Skip to content

GitLab

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

Extract 'add playlist' modal to a custom page

parent 83d3a0d2
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 636 deletions
src/Pages/EditPlaylist.vue → src/Pages/AddOrEditPlaylist.vue
View file @ 05409b63
<style></style>
<template>
<b-container class="tw-mb-8">
<h1>Playliste {{ playlistEditor.id }} für Sendung '{{ this.selectedShow.name }}' bearbeiten</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
<div
v-if="!selectedShow"
class="tw-text-center tw-my-8"
>
Lädt...
</div>
<b-container
v-else
class="tw-mb-8"
>
<h1>
<template v-if="id">
Playliste {{ playlistEditor.id }} für Sendung '{{ selectedShow.name }}' bearbeiten
</template>
<template v-else>
Neue Playliste für Sendung '{{ selectedShow.name }}' hinzufügen
</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. -->
<div
v-if="playlistEditor.entries.length === 0"
align="center"
>
Noch keine Einträge vorhanden. Füge doch welche hinzu!
</div>
<!-- As soon as we have at least one entry in our temporary playlist
<div
v-if="playlistEditor.entries.length === 0"
align="center"
>
Noch keine Einträge vorhanden. Füge doch welche hinzu!
</div>
<!-- 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 -->
<div v-else>
<b-table
ref="playlistEditTable"
striped
:items="playlistEditor.entries"
:fields="playlistEditTableFields"
>
<!-- Column: Index
<div v-else>
<b-table
ref="playlistEditTable"
striped
:items="playlistEditor.entries"
:fields="playlistEditTableFields"
>
<!-- Column: Index
Here we just use the array index, because the playlist entries
are ordered as an array, without the need for an extra id field
-->
<template v-slot:cell(id)="data">
{{ data.index + 1 }}.
</template>
<template v-slot:cell(id)="data">
{{ data.index + 1 }}.
</template>
<!-- Column: Type
<!-- Column: Type
Based on the entry content (either file or uri), we display
a small badge indicating which type of source this is
-->
<template v-slot:cell(type)="data">
<b-badge
v-if="data.item.file"
variant="success"
>
Datei
</b-badge>
<b-badge
v-else-if="data.item.uri.startsWith('line://')"
variant="info"
>
Line-in
</b-badge>
<b-badge
v-else-if="data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
variant="light"
>
Stream
</b-badge>
<b-badge
v-else
variant="dark"
>
Andere
</b-badge>
</template>
<!-- Column: Source
<template v-slot:cell(type)="data">
<b-badge
v-if="data.item.file"
variant="success"
>
Datei
</b-badge>
<b-badge
v-else-if="data.item.uri.startsWith('line://')"
variant="info"
>
Line-in
</b-badge>
<b-badge
v-else-if="data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
variant="light"
>
Stream
</b-badge>
<b-badge
v-else
variant="dark"
>
Andere
</b-badge>
</template>
<!-- Column: Source
Here we display where this playlist entry is coming from
-->
<template v-slot:cell(source)="data">
<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-text-gray-700">(file://{{ data.item.file.show }}/{{ data.item.file.id }})</span>
</span>
<span v-else>
{{ data.item.uri}}
</span>
</template>
<!-- Column: Duration
<template v-slot:cell(source)="data">
<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-text-gray-700">(file://{{ data.item.file.show }}/{{ data.item.file.id }})</span>
</span>
<span v-else>
{{ data.item.uri }}
</span>
</template>
<!-- Column: Duration
Here we give the user the ability to edit the duration of an entry.
-->
<template v-slot:cell(duration)="data">
<span v-if="playlistEditor.durationField === data.index">
<input
ref="durationField"
v-model="playlistEditor.newDuration"
type="text"
class="tw-w-24"
placeholder="hh:mm:ss"
pattern="\d{2}:\d{2}(:\d{2})?"
@blur="checkAndUpdateDuration"
>
</span>
<span v-else-if="data.item.file">
{{ prettyNanoseconds(getFileById(data.item.file.id).duration) }}
</span>
<span
v-b-tooltip="'Klicken um zu bearbeiten'"
class="tw-underline hover:tw-no-underline tw-cursor-pointer"
v-else-if="data.item.duration"
@click="toggleDurationField(data.index)"
>
{{ prettyNanoseconds(data.item.duration) }}
</span>
<span v-else>
<span
v-b-tooltip="'Klicken um zu bearbeiten'"
class="tw-text-gray-700 tw-underline hover:tw-no-underline tw-cursor-pointer"
@click="toggleDurationField(data.index)"
>
(Unbekannt)
</span>
</span>
</template>
<!-- Column: Actions
<template v-slot:cell(duration)="data">
<span v-if="playlistEditor.durationField === data.index">
<input
ref="durationField"
v-model="playlistEditor.newDuration"
type="text"
class="tw-w-24"
placeholder="hh:mm:ss"
pattern="\d{2}:\d{2}(:\d{2})?"
@blur="checkAndUpdateDuration"
>
</span>
<span v-else-if="data.item.file">
{{ prettyNanoseconds(getFileById(data.item.file.id).duration) }}
</span>
<span
v-else-if="data.item.duration"
v-b-tooltip="'Klicken um zu bearbeiten'"
class="tw-underline hover:tw-no-underline tw-cursor-pointer"
@click="toggleDurationField(data.index)"
>
{{ prettyNanoseconds(data.item.duration) }}
</span>
<span v-else>
<span
v-b-tooltip="'Klicken um zu bearbeiten'"
class="tw-text-gray-700 tw-underline hover:tw-no-underline tw-cursor-pointer"
@click="toggleDurationField(data.index)"
>
(Unbekannt)
</span>
</span>
</template>
<!-- Column: Actions
Finally some buttons to reorder or delete playlist entries
-->
<template v-slot:cell(actions)="data">
<b-button-group size="sm">
<b-button
:disabled="data.index === 0"
@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"
<template v-slot:cell(actions)="data">
<b-button-group size="sm">
<b-button
:disabled="data.index === 0"
@click="movePlaylistItemUp(data.index)"
>
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>
<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>
<!-- 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
uploaded/imported files, or one of the preconfigured inputs, or a
stream.
TODO: should we disable choosing files that are still being imported?
TODO: make the inputs configurable
-->
<b-modal
id="modal-edit-playlist-add-stream"
title="Add stream to the playlist"
@ok="addPlaylistItemStream('save')"
<b-modal
id="modal-edit-playlist-add-stream"
title="Add stream to the playlist"
@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
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')"
>
Stream
</b-button>
</b-button-group>
<b-button
variant="success"
:disabled="playlistExceedsAllowedUnknowns"
@click="storePlaylist"
>
Speichern
</b-button>
</div>
</b-container>
Stream
</b-button>
</b-button-group>
<b-button
variant="success"
:disabled="playlistExceedsAllowedUnknowns"
@click="storePlaylist"
>
Speichern
</b-button>
</div>
</b-container>
</template>
<script>
......@@ -248,7 +265,12 @@
export default {
mixins: [prettyDate],
props: ['id'],
props: {
id: {
type: [ Number, Boolean ],
default: false,
},
},
// include the modal for displaying file import logs
data() {
......@@ -327,7 +349,10 @@
},
created() {
this.editPlaylist(this.id);
this.$store.dispatch('shows/fetchShows');
this.id
? this.editPlaylist()
: this.addPlaylist()
},
methods: {
......@@ -397,10 +422,6 @@
}
},
editPlaylistItemDuration(index) {
console.log(this.playlistEditor.entries, index);
},
movePlaylistItemUp(index) {
if (index > 0 && index < this.playlistEditor.entries.length) {
let temp = this.playlistEditor.entries[index - 1]
......@@ -465,12 +486,20 @@
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.entries = []
this.playlistEditor.id = id
let playlist = this.getPlaylistById(id)
this.playlistEditor.id = this.id
this.playlistEditor.description = playlist.description
for (let i in playlist.entries) {
let entry = {}
if (playlist.entries[i].file) {
......
src/components/emissions/ModalEdit.vue
View file @ 05409b63
......@@ -99,15 +99,17 @@
<b-form-select
v-model="repetitionRule"
:options="repetitionOptions"
>
</b-form-select>
/>
</label>
<b-checkbox v-model="useSameTime">
Use same start and end time
</b-checkbox>
</b-col>
<b-col cols="6" v-if="!useSameTime">
<b-col
v-if="!useSameTime"
cols="6"
>
<label class="tw-leading-loose">
Repeat at
<b-form-input type="time" />
......
src/components/filemanager/EditPlaylistModal.vue deleted 100644 → 0
View file @ 83d3a0d2
<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"
>
No entries yet. Add some.
</div>
<!-- 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 -->
<div v-else>
<b-table
ref="playlistEditTable"
striped
:items="playlistEditor.entries"
:fields="playlistEditTableFields"
>
<!-- Column: Index
Here we just use the array index, because the playlist entries
are ordered as an array, without the need for an extra id field
-->
<template v-slot:cell(id)="data">
{{ data.index + 1 }}.
</template>
<!-- Column: Type
Based on the entry content (either file or uri), we display
a small badge indicating which type of source this is
-->
<template v-slot:cell(type)="data">