Merge branch 'feature/playlist-time' into develop

src/components/filemanager/EditPlaylistModal.vue

@@ -31,7 +31,10 @@
 
     <hr>
 
-    <p>Playlist entries:</p>
+    <p class="d-flex justify-content-between">
+      <span class="font-weight-bold">Playlist entries</span>
+      <span>Duration: {{ playlistDuration }}</span>
+    </p>
 
     <!-- If no entries are here (i.e. we add a new playlist), only show
     a hint that there's nothing here yet. -->
@@ -221,6 +224,15 @@ export default {
       }
     },
 
+    playlistDuration() {
+      const totalDuration = this.playlistEditor.entries.reduce((acc, entry) => {
+        const file = this.getFileById(entry.file.id)
+        return acc + file.duration;
+      }, 0);
+
+      return this.prettyNanoseconds(totalDuration)
+    },
+
     ...mapGetters({
       selectedShow: 'shows/selectedShow',
       getPlaylistById: 'playlists/getPlaylistById',

src/components/filemanager/Playlists.vue

@@ -68,6 +68,13 @@
             </b-button>
           </template>
 
+          <!-- Column: Duration
+          This column displays the duration of all playlist entries combined
+          -->
+          <template v-slot:cell(duration)="data">
+            {{ playlistDuration(data) }}
+          </template>
+
           <!-- Column: Last edit
           This column lists the last date this playlist was changed.
           -->
@@ -128,6 +135,7 @@ export default {
         { key: 'id', label: 'Index' },
         { key: 'description', label: 'Description' },
         { key: 'entries', label: 'Entries' },
+        { key: 'duration', label: 'Duration' },
         { key: 'updated', label: 'Last edit' },
         { key: 'actions', label: 'Actions', class: 'text-right' },
       ],
@@ -179,6 +187,12 @@ export default {
     editPlaylist (id) {
       this.$refs.editPlaylistsModal.editPlaylist(id)
     },
+
+    playlistDuration({ item }) {
+      const totalDuration = item.entries.reduce((acc, entry) => acc + entry.duration, 0)
+
+      return this.prettyNanoseconds(totalDuration)
+    }
   },
 }
 </script>

src/components/shows/PlaylistSelector.vue

@@ -40,6 +40,25 @@
             </b-button>
           </template>
 
+
+          <!-- Column: Duration
+          This column displays the number of entries of the playlist.
+          -->
+          <template v-slot:cell(duration)="data">
+            <span
+              :class="{'is-mismatched': isMismatchedLength(data) }"
+            >
+              {{ playlistDuration(data) }}
+
+              <abbr
+                v-if="isMismatchedLength(data)"
+                :title="title(data)"
+              >
+                (?)
+              </abbr>
+            </span>
+          </template>
+
           <!-- Column: Actions
           This column displays the available buttons for actions the user can
           take on this playlist (e.g. editing and deleting).
@@ -49,7 +68,7 @@
               <b-button
                 v-if="data.item.id !== timeslot.playlist_id"
                 variant="info"
-                @click="choose(data.item.id)"
+                @click="choose(data)"
               >
                 Take it!
               </b-button>
@@ -96,6 +115,7 @@ export default {
         { key: 'id', label: 'Index' },
         { key: 'description', label: 'Description' },
         { key: 'entries', label: 'Entries' },
+        { key: 'duration', label: 'Duration' },
         { key: 'actions', label: 'Actions', class: 'text-right' },
       ],
     }
@@ -104,6 +124,15 @@ export default {
   computed: {
     loaded () { return this.$store.state.playlists.loaded.playlists },
 
+    timeslotDuration() {
+      const { start, end } = this.timeslot
+
+      return parseInt(
+        this.prettyDuration(start, end),
+        10
+      )
+    },
+
     currentPlaylistDescription () {
       let description = false
       if (this.timeslot && this.timeslot.playlist_id !== null) {
@@ -131,15 +160,33 @@ export default {
       this.$refs.modalPlaylistSelector.show()
     },
 
-    choose (id) {
-      let ts = {...this.timeslot}
-      ts.playlist_id = id
-      this.$store.dispatch('shows/updateTimeslot', {
-        show: this.selectedShow.id,
-        schedule: this.scheduleId,
-        timeslot: ts,
-        callback: () => { this.timeslot = this.getTimeslotById(ts.id) }
-      })
+    choose (data) {
+      const { item } = data || {}
+      const { id } = item || {}
+      let confirmed = true
+
+      if (data && this.isMismatchedLength(data)) {
+        confirmed = confirm("The playlist you have selected has a different length than the timeslot. Proceed?")
+      }
+
+      if (confirmed) {
+        let ts = {...this.timeslot}
+        ts.playlist_id = id
+        this.$store.dispatch('shows/updateTimeslot', {
+          show: this.selectedShow.id,
+          schedule: this.scheduleId,
+          timeslot: ts,
+          callback: () => { this.timeslot = this.getTimeslotById(ts.id) }
+        })
+      }
+    },
+
+    title(data) {
+      if (this.isMismatchedLength(data)) {
+        return "Playlist is not the same length as the timeslot"
+      }
+
+      return ""
     },
 
     playlistToolTip (entries) {
@@ -150,9 +197,28 @@ export default {
       text += '</div>'
       return text
     },
+
+    playlistDuration({ item }) {
+      const totalDuration = item.entries.reduce((acc, entry) => acc + entry.duration, 0);
+      return this.prettyNanoseconds(totalDuration)
+    },
+
+    isMismatchedLength({ item }) {
+      const totalDuration = this.calculatePlaylistDuration(item)
+      const durationInMinutes = this.nanosecondsToMinutes(totalDuration)
+
+      return this.timeslotDuration !== durationInMinutes
+    },
+
+    calculatePlaylistDuration(item) {
+      return item.entries.reduce((acc, entry) => acc + entry.duration, 0)
+    }
   }
 }
 </script>
 
 <style scoped>
+  .is-mismatched {
+    color: var(--orange);
+  }
 </style>

src/mixins/prettyDate.js

@@ -81,7 +81,11 @@ export default {
       var hours = Math.floor(sec_total / 3600)
       var minutes = Math.floor((sec_total - (hours * 3600)) / 60)
       var seconds = Math.floor((sec_total - (hours * 3600) - (minutes * 60)) * 10) / 10
-      return hours + ':' + leadingZero(minutes) + ':' + leadingZero(seconds)
-    }
+
+      return leadingZero(hours) + ':' + leadingZero(minutes) + ':' + leadingZero(seconds)
+    },
+    nanosecondsToMinutes: function(ns) {
+      return ns / 1000 / 1000 / 1000 / 60;
+    },
   }
 }