Commit 05409b63 authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Extract 'add playlist' modal to a custom page

parent 83d3a0d2
<style></style> <style></style>
<template> <template>
<b-container class="tw-mb-8"> <div
<h1>Playliste {{ playlistEditor.id }} für Sendung '{{ this.selectedShow.name }}' bearbeiten</h1> v-if="!selectedShow"
class="tw-text-center tw-my-8"
<b-row class="tw-my-8 tw-items-center"> >
<b-col cols="2"> Lädt...
Beschreibung: </div>
</b-col>
<b-container
<b-col> v-else
<b-form-input class="tw-mb-8"
v-model="playlistEditor.description" >
type="text" <h1>
placeholder="Beschreibung eingeben..." <template v-if="id">
/> Playliste {{ playlistEditor.id }} für Sendung '{{ selectedShow.name }}' bearbeiten
</b-col> </template>
</b-row> <template v-else>
Neue Playliste für Sendung '{{ selectedShow.name }}' hinzufügen
<!-- If no entries are here (i.e. we add a new playlist), only show </template>
</h1>
<b-row class="tw-my-8 tw-items-center">
<b-col cols="2">
Beschreibung:
</b-col>
<b-col>
<b-form-input
v-model="playlistEditor.description"
type="text"
placeholder="Beschreibung eingeben..."
/>
</b-col>
</b-row>
<!-- If no entries are here (i.e. we add a new playlist), only show
a hint that there's nothing here yet. --> a hint that there's nothing here yet. -->
<div <div
v-if="playlistEditor.entries.length === 0" v-if="playlistEditor.entries.length === 0"
align="center" align="center"
> >
Noch keine Einträge vorhanden. Füge doch welche hinzu! Noch keine Einträge vorhanden. Füge doch welche hinzu!
</div> </div>
<!-- As soon as we have at least one entry in our temporary playlist <!-- As soon as we have at least one entry in our temporary playlist
we can display a table with all the info and action buttons --> we can display a table with all the info and action buttons -->
<div v-else> <div v-else>
<b-table <b-table
ref="playlistEditTable" ref="playlistEditTable"
striped striped
:items="playlistEditor.entries" :items="playlistEditor.entries"
:fields="playlistEditTableFields" :fields="playlistEditTableFields"
> >
<!-- Column: Index <!-- Column: Index
Here we just use the array index, because the playlist entries Here we just use the array index, because the playlist entries
are ordered as an array, without the need for an extra id field are ordered as an array, without the need for an extra id field
--> -->
<template v-slot:cell(id)="data"> <template v-slot:cell(id)="data">
{{ data.index + 1 }}. {{ data.index + 1 }}.
</template> </template>
<!-- Column: Type <!-- Column: Type
Based on the entry content (either file or uri), we display Based on the entry content (either file or uri), we display
a small badge indicating which type of source this is a small badge indicating which type of source this is
--> -->
<template v-slot:cell(type)="data"> <template v-slot:cell(type)="data">
<b-badge <b-badge
v-if="data.item.file" v-if="data.item.file"
variant="success" variant="success"
> >
Datei Datei
</b-badge> </b-badge>
<b-badge <b-badge
v-else-if="data.item.uri.startsWith('line://')" v-else-if="data.item.uri.startsWith('line://')"
variant="info" variant="info"
> >
Line-in Line-in
</b-badge> </b-badge>
<b-badge <b-badge
v-else-if="data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')" v-else-if="data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
variant="light" variant="light"
> >
Stream Stream
</b-badge> </b-badge>
<b-badge <b-badge
v-else v-else
variant="dark" variant="dark"
> >
Andere Andere
</b-badge> </b-badge>
</template> </template>
<!-- Column: Source <!-- Column: Source
Here we display where this playlist entry is coming from Here we display where this playlist entry is coming from
--> -->
<template v-slot:cell(source)="data"> <template v-slot:cell(source)="data">
<span v-if="data.item.file"> <span v-if="data.item.file">
<span class="tw-font-bold">{{ getFileTitleForPlaylist(data.item.file.show, data.item.file.id) }}</span><br> <span class="tw-font-bold">{{ getFileTitleForPlaylist(data.item.file.show, data.item.file.id) }}</span><br>
<span class="tw-text-gray-700">(file://{{ data.item.file.show }}/{{ data.item.file.id }})</span> <span class="tw-text-gray-700">(file://{{ data.item.file.show }}/{{ data.item.file.id }})</span>
</span> </span>
<span v-else> <span v-else>
{{ data.item.uri}} {{ data.item.uri }}
</span> </span>
</template> </template>
<!-- Column: Duration <!-- Column: Duration
Here we give the user the ability to edit the duration of an entry. Here we give the user the ability to edit the duration of an entry.
--> -->
<template v-slot:cell(duration)="data"> <template v-slot:cell(duration)="data">
<span v-if="playlistEditor.durationField === data.index"> <span v-if="playlistEditor.durationField === data.index">
<input <input
ref="durationField" ref="durationField"
v-model="playlistEditor.newDuration" v-model="playlistEditor.newDuration"
type="text" type="text"
class="tw-w-24" class="tw-w-24"
placeholder="hh:mm:ss" placeholder="hh:mm:ss"
pattern="\d{2}:\d{2}(:\d{2})?" pattern="\d{2}:\d{2}(:\d{2})?"
@blur="checkAndUpdateDuration" @blur="checkAndUpdateDuration"
> >
</span> </span>
<span v-else-if="data.item.file"> <span v-else-if="data.item.file">
{{ prettyNanoseconds(getFileById(data.item.file.id).duration) }} {{ prettyNanoseconds(getFileById(data.item.file.id).duration) }}
</span> </span>
<span <span
v-b-tooltip="'Klicken um zu bearbeiten'" v-else-if="data.item.duration"
class="tw-underline hover:tw-no-underline tw-cursor-pointer" v-b-tooltip="'Klicken um zu bearbeiten'"
v-else-if="data.item.duration" class="tw-underline hover:tw-no-underline tw-cursor-pointer"
@click="toggleDurationField(data.index)" @click="toggleDurationField(data.index)"
> >
{{ prettyNanoseconds(data.item.duration) }} {{ prettyNanoseconds(data.item.duration) }}
</span> </span>
<span v-else> <span v-else>
<span <span
v-b-tooltip="'Klicken um zu bearbeiten'" v-b-tooltip="'Klicken um zu bearbeiten'"
class="tw-text-gray-700 tw-underline hover:tw-no-underline tw-cursor-pointer" class="tw-text-gray-700 tw-underline hover:tw-no-underline tw-cursor-pointer"
@click="toggleDurationField(data.index)" @click="toggleDurationField(data.index)"
> >
(Unbekannt) (Unbekannt)
</span> </span>
</span> </span>
</template> </template>
<!-- Column: Actions <!-- Column: Actions
Finally some buttons to reorder or delete playlist entries Finally some buttons to reorder or delete playlist entries
--> -->
<template v-slot:cell(actions)="data"> <template v-slot:cell(actions)="data">
<b-button-group size="sm"> <b-button-group size="sm">
<b-button <b-button
:disabled="data.index === 0" :disabled="data.index === 0"
@click="movePlaylistItemUp(data.index)" @click="movePlaylistItemUp(data.index)"
>
<b class="upDownArrows">&uarr;</b>
</b-button>
<b-button
:disabled="data.index === playlistEditor.entries.length - 1"
@click="movePlaylistItemDown(data.index)"
>
<b class="upDownArrows">&darr;</b>
</b-button>
<b-button
variant="danger"
@click="deletePlaylistItem(data.index)"
>
Delete
</b-button>
</b-button-group>
</template>
</b-table>
<hr>
<p class="d-flex justify-content-between border-t">
<span class="font-weight-bold">Playlisteinträge</span>
<span>Dauer: {{ playlistDuration }}</span>
</p>
<hr>
<div
v-if="playlistExceedsAllowedUnknowns"
class="tw-text-red-600 tw-my-4"
> >
Es gibt 2 oder mehr Einträge die eine unbekannte Dauer haben. Bitte korrigiere das, indem du auf die Dauer <b class="upDownArrows">&uarr;</b>
in der Tabelle klickst und manuell eine einträgst. Es darf maximal ein Eintrag mit unbekannter Dauer vorhanden </b-button>
sein. <b-button
</div> :disabled="data.index === playlistEditor.entries.length - 1"
</div> @click="movePlaylistItemDown(data.index)"
>
<b class="upDownArrows">&darr;</b>
</b-button>
<!-- Below the table with the playlists entry we display buttons to <b-button
variant="danger"
@click="deletePlaylistItem(data.index)"
>
Delete
</b-button>
</b-button-group>
</template>
</b-table>
<hr>
<p class="d-flex justify-content-between border-t">
<span class="font-weight-bold">Playlisteinträge</span>
<span>Dauer: {{ playlistDuration }}</span>
</p>
<hr>
<div
v-if="playlistExceedsAllowedUnknowns"
class="tw-text-red-600 tw-my-4"
>
Es gibt 2 oder mehr Einträge die eine unbekannte Dauer haben. Bitte korrigiere das, indem du auf die Dauer
in der Tabelle klickst und manuell eine einträgst. Es darf maximal ein Eintrag mit unbekannter Dauer vorhanden
sein.
</div>
</div>
<!-- Below the table with the playlists entry we display buttons to
add new entries to the table - these can either be files from our add new entries to the table - these can either be files from our
uploaded/imported files, or one of the preconfigured inputs, or a uploaded/imported files, or one of the preconfigured inputs, or a
stream. stream.
TODO: should we disable choosing files that are still being imported? TODO: should we disable choosing files that are still being imported?
TODO: make the inputs configurable TODO: make the inputs configurable
--> -->
<b-modal <b-modal
id="modal-edit-playlist-add-stream" id="modal-edit-playlist-add-stream"
title="Add stream to the playlist" title="Add stream to the playlist"
@ok="addPlaylistItemStream('save')" @ok="addPlaylistItemStream('save')"
>
<b-input
v-model="playlistEditor.newStreamURL"
type="url"
>
...
</b-input>
</b-modal>
<div class="tw-flex tw-justify-between">
<b-button-group>
<b-dropdown text="Datei">
<b-dropdown-item
v-for="(file, index) in files"
:key="index"
@click="addPlaylistItemFile(file.show, file.id)"
>
{{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{
prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
</b-dropdown-item>
</b-dropdown>
<b-dropdown text="Line-in">
<b-dropdown-item @click="addPlaylistItemLine('0')">
Studio 1
</b-dropdown-item>
<b-dropdown-item @click="addPlaylistItemLine('1')">
Preprod
</b-dropdown-item>
<b-dropdown-item @click="addPlaylistItemLine('2')">
Line 2
</b-dropdown-item>
</b-dropdown>
<b-button
@click="addPlaylistItemStream('openModal')"
> >
<b-input Stream
v-model="playlistEditor.newStreamURL" </b-button>
type="url" </b-button-group>
>
... <b-button
</b-input> variant="success"
</b-modal> :disabled="playlistExceedsAllowedUnknowns"
@click="storePlaylist"
<div class="tw-flex tw-justify-between"> >
<b-button-group> Speichern
<b-dropdown text="Datei"> </b-button>
<b-dropdown-item </div>
v-for="(file, index) in files" </b-container>
:key="index"
@click="addPlaylistItemFile(file.show, file.id)"
>
{{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{
prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
</b-dropdown-item>
</b-dropdown>
<b-dropdown text="Line-in">
<b-dropdown-item @click="addPlaylistItemLine('0')">
Studio 1
</b-dropdown-item>
<b-dropdown-item @click="addPlaylistItemLine('1')">
Preprod
</b-dropdown-item>
<b-dropdown-item @click="addPlaylistItemLine('2')">
Line 2
</b-dropdown-item>
</b-dropdown>
<b-button
@click="addPlaylistItemStream('openModal')"
>
Stream
</b-button>
</b-button-group>
<b-button
variant="success"
:disabled="playlistExceedsAllowedUnknowns"
@click="storePlaylist"
>
Speichern
</b-button>
</div>
</b-container>
</template> </template>
<script> <script>
...@@ -248,7 +265,12 @@ ...@@ -248,7 +265,12 @@
export default { export default {
mixins: [prettyDate], mixins: [prettyDate],
props: ['id'], props: {
id: {
type: [ Number, Boolean ],
default: false,
},
},
// include the modal for displaying file import logs // include the modal for displaying file import logs
data() { data() {
...@@ -327,7 +349,10 @@ ...@@ -327,7 +349,10 @@
}, },
created() { created() {
this.editPlaylist(this.id); this.$store.dispatch('shows/fetchShows');
this.id
? this.editPlaylist()
: this.addPlaylist()
}, },
methods: { methods: {
...@@ -397,10 +422,6 @@ ...@@ -397,10 +422,6 @@
} }
}, },
editPlaylistItemDuration(index) {
console.log(this.playlistEditor.entries, index);
},
movePlaylistItemUp(index) { movePlaylistItemUp(index) {
if (index > 0 && index < this.playlistEditor.entries.length) { if (index > 0 && index < this.playlistEditor.entries.length) {
let temp = this.playlistEditor.entries[index - 1] let temp = this.playlistEditor.entries[index - 1]
...@@ -465,12 +486,20 @@ ...@@ -465,12 +486,20 @@
this.$bvModal.show('modal-edit-playlist') this.$bvModal.show('modal-edit-playlist')
}, },
editPlaylist(id) { editPlaylist() {
let playlist = this.getPlaylistById(this.id);
console.log("AAAAA", playlist);
if (!playlist) {
this.$router.push({ name: 'addPlaylist' })
return;
}
this.playlistEditor.mode = 'edit' this.playlistEditor.mode = 'edit'
this.playlistEditor.entries = [] this.playlistEditor.entries = []
this.playlistEditor.id = id this.playlistEditor.id = this.id
let playlist = this.getPlaylistById(id)
this.playlistEditor.description = playlist.description this.playlistEditor.description = playlist.description
for (let i in playlist.entries) { for (let i in playlist.entries) {
let entry = {} let entry = {}
if (playlist.entries[i].file) { if (playlist.entries[i].file) {
......
...@@ -99,15 +99,17 @@ ...@@ -99,15 +99,17 @@
<b-form-select <b-form-select
v-model="repetitionRule" v-model="repetitionRule"
:options="repetitionOptions" :options="repetitionOptions"
> />
</b-form-select>
</label> </label>
<b-checkbox v-model="useSameTime"> <b-checkbox v-model="useSameTime">
Use same start and end time Use same start and end time
</b-checkbox> </b-checkbox>
</b-col> </b-col>
<b-col cols="6" v-if="!useSameTime"> <b-col
v-if="!useSameTime"
cols="6"
>
<label class="tw-leading-loose"> <label class="tw-leading-loose">
Repeat at Repeat at
<b-form-input type="time" /> <b-form-input type="time" />
......
<template>
<b-modal
id="modal-edit-playlist"
size="lg"
:title="playlistEditor.mode === 'edit' ? 'Edit playlist' : 'Add new playlist'"
@ok="storePlaylist"
>
<b-row
v-if="playlistEditor.mode === 'edit'"
style="padding-bottom: 1em;"
>
<b-col
cols="3"
>
Playlist index:
</b-col>
<b-col>{{ playlistEditor.id }}</b-col>
</b-row>
<b-row>
<b-col cols="3">
Description:
</b-col>
<b-col>
<b-form-input
v-model="playlistEditor.description"
type="text"
/>
</b-col>
</b-row>
<hr>
<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. -->
<div
v-if="playlistEditor.entries.length === 0"
align="center"
>