Commit 0cf8821c authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FEAT: implement order and delete of playlist entries

also uses a b-table instead of b-rows because they are easy to rerender
after changes to the playlist entries array
parent 8a702779
...@@ -350,40 +350,59 @@ ...@@ -350,40 +350,59 @@
Editing playlist with index: {{ playlistEditor.id }} Editing playlist with index: {{ playlistEditor.id }}
</div> </div>
<p>Playlist entries:</p> <p>Playlist entries:</p>
<hr> <hr>
<!-- If no entries are here (i.e. we add a new playlist), only show
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"
> >
No entries yet. Add some. No entries yet. Add some.
</div> </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> <div v-else>
<b-row <b-table
v-for="(entry, index) in playlistEditor.entries" ref="playlistEditTable"
:key="index" striped
class="modalPlaylistRows" :items="playlistEditor.entries"
:fields="playlistEditTableFields"
> >
<b-col <!-- Column: Index
cols="1" Here we just use the array index, because the playlist entries
align="right" are ordered as an array, without the need for an extra id field
-->
<template
slot="id"
slot-scope="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
slot="type"
slot-scope="data"
> >
{{ index + 1 }}.
</b-col>
<b-col cols="1">
<b-badge <b-badge
v-if="entry.file" v-if="data.item.file"
variant="success" variant="success"
> >
File File
</b-badge> </b-badge>
<b-badge <b-badge
v-else-if="entry.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="entry.uri.startsWith('http://') || entry.uri.startsWith('https://')" v-else-if="data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
variant="light" variant="light"
> >
Stream Stream
...@@ -394,57 +413,82 @@ ...@@ -394,57 +413,82 @@
> >
Other Other
</b-badge> </b-badge>
</b-col> </template>
<b-col>
<span v-if="entry.file"> <!-- Column: Source
file://{{ entry.file.show }}/{{ entry.file.id }} Here we display where this playlist entry is coming from
-->
<template
slot="source"
slot-scope="data"
>
<span v-if="data.item.file">
file://{{ data.item.file.show }}/{{ data.item.file.id }}
</span> </span>
<span v-else> <span v-else>
{{ entry.uri }} {{ data.item.uri }}
</span> </span>
</b-col> </template>
<b-col cols="3">
<!-- Column: Actions
Finally some buttons to reorder or delete playlist entries
-->
<template
slot="actions"
slot-scope="data"
>
<b-button-group size="sm"> <b-button-group size="sm">
<b-button <b-button
:disabled="index === 0" :disabled="data.index === 0"
@click="movePlaylistItemUp(index)" @click="movePlaylistItemUp(data.index)"
> >
<b class="upDownArrows">&uarr;</b> <b class="upDownArrows">&uarr;</b>
</b-button> </b-button>
<b-button <b-button
:disabled="index === playlistEditor.entries.length - 1" :disabled="data.index === playlistEditor.entries.length - 1"
@click="movePlaylistItemDown(index)" @click="movePlaylistItemDown(data.index)"
> >
<b class="upDownArrows">&darr;</b> <b class="upDownArrows">&darr;</b>
</b-button> </b-button>
<b-button <b-button
variant="danger" variant="danger"
@click="deletePlaylistItem(index)" @click="deletePlaylistItem(data.index)"
> >
Delete Delete
</b-button> </b-button>
</b-button-group> </b-button-group>
</b-col> </template>
</b-row> </b-table>
</div> </div>
<hr> <hr>
Add:
<b-button-group> <!-- Below the table with the playlists entry we display buttons to
<b-dropdown text="File"> add new entries to the table - these can either be files from our
<b-dropdown-item uploaded/imported files, or one of the preconfigured inputs, or a
v-for="(file, index) in files" stream.
:key="index" TODO: should we disable choosing files that are still being imported?
> TODO: make the inputs configurable
{{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{ prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }}) -->
</b-dropdown-item> <div>
</b-dropdown> Add:
<b-dropdown text="Line-in"> <b-button-group>
<b-dropdown-item>Studio 1</b-dropdown-item> <b-dropdown text="File">
<b-dropdown-item>Preprod</b-dropdown-item> <b-dropdown-item
<b-dropdown-item>Line 3</b-dropdown-item> v-for="(file, index) in files"
</b-dropdown> :key="index"
<b-button>Stream</b-button> >
</b-button-group> {{ 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>Studio 1</b-dropdown-item>
<b-dropdown-item>Preprod</b-dropdown-item>
<b-dropdown-item>Line 3</b-dropdown-item>
</b-dropdown>
<b-button>Stream</b-button>
</b-button-group>
</div>
</b-modal> </b-modal>
<!-- Only display a spinner if the playlists are not loaded yet --> <!-- Only display a spinner if the playlists are not loaded yet -->
...@@ -625,6 +669,13 @@ export default { ...@@ -625,6 +669,13 @@ export default {
{ key: 'entries', label: 'Entries' }, { key: 'entries', label: 'Entries' },
{ key: 'updated', label: 'Last edit' }, { key: 'updated', label: 'Last edit' },
{ key: 'actions', label: 'Actions', class: 'text-right' }, { key: 'actions', label: 'Actions', class: 'text-right' },
],
playlistEditTableFields: [
{ key: 'id', label: 'Index' },
{ key: 'type', label: 'Type' },
{ key: 'source', label: 'Source' },
{ key: 'actions', label: 'Actions', class: 'text-right' },
] ]
} }
}, },
...@@ -707,18 +758,28 @@ export default { ...@@ -707,18 +758,28 @@ export default {
}, },
movePlaylistItemUp: function (index) { movePlaylistItemUp: function (index) {
this.notYetImplemented() if (index > 0 && index < this.playlistEditor.entries.length) {
return index var temp = this.playlistEditor.entries[index - 1]
this.playlistEditor.entries[index - 1] = this.playlistEditor.entries[index]
this.playlistEditor.entries[index] = temp
this.$refs.playlistEditTable.refresh()
}
}, },
movePlaylistItemDown: function (index) { movePlaylistItemDown: function (index) {
this.notYetImplemented() if (index < this.playlistEditor.entries.length - 1 && index >= 0) {
return index var temp = this.playlistEditor.entries[index + 1]
this.playlistEditor.entries[index + 1] = this.playlistEditor.entries[index]
this.playlistEditor.entries[index] = temp
this.$refs.playlistEditTable.refresh()
}
}, },
deletePlaylistItem: function (index) { deletePlaylistItem: function (index) {
this.notYetImplemented() if (index >= 0 && index < this.playlistEditor.entries.length) {
return index this.playlistEditor.entries.splice(index, 1)
this.$refs.playlistEditTable.refresh()
}
}, },
deletePlaylist: function (id) { deletePlaylist: function (id) {
...@@ -763,7 +824,10 @@ export default { ...@@ -763,7 +824,10 @@ export default {
}, },
storePlaylist: function () { storePlaylist: function () {
alert(this.playlistEditor.mode) this.notYetImplemented()
var data = { entries: this.playlistEditor.entries }
console.log('Attempting to send playlist data:')
console.log(JSON.stringify(data))
}, },
// To start modifying the meta information for a file we have to set our // To start modifying the meta information for a file we have to set our
......
Supports Markdown
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