Commit 6130ad1a authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

Merge branch 'feature/playlist-time' into develop

parents 736db302 3b234048
......@@ -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',
......
......@@ -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>
......@@ -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>
......@@ -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;
},
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment