Add warning when playlist length and timeslot length do not match

src/components/filemanager/Playlists.vue

@@ -72,7 +72,7 @@
           This column displays the duration of all playlist entries combined
           -->
           <template v-slot:cell(duration)="data">
-            {{ durationSum(data) }}
+            {{ playlistDuration(data) }}
           </template>
 
           <!-- Column: Last edit
@@ -188,7 +188,7 @@ export default {
       this.$refs.editPlaylistsModal.editPlaylist(id)
     },
 
-    durationSum({ item }) {
+    playlistDuration({ item }) {
       const totalDuration = item.entries.reduce((acc, entry) => acc + entry.duration, 0)
 
       return this.prettyNanoseconds(totalDuration)

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

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