Skip to content
Snippets Groups Projects
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
No related branches found
No related tags found
No related merge requests found
......@@ -350,40 +350,59 @@
Editing playlist with index: {{ playlistEditor.id }}
</div>
<p>Playlist entries:</p>
<hr>
<!-- 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-row
v-for="(entry, index) in playlistEditor.entries"
:key="index"
class="modalPlaylistRows"
<b-table
ref="playlistEditTable"
striped
:items="playlistEditor.entries"
:fields="playlistEditTableFields"
>
<b-col
cols="1"
align="right"
<!-- 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
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
v-if="entry.file"
v-if="data.item.file"
variant="success"
>
File
</b-badge>
<b-badge
v-else-if="entry.uri.startsWith('line://')"
v-else-if="data.item.uri.startsWith('line://')"
variant="info"
>
Line-in
</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"
>
Stream
......@@ -394,57 +413,82 @@
>
Other
</b-badge>
</b-col>
<b-col>
<span v-if="entry.file">
file://{{ entry.file.show }}/{{ entry.file.id }}
</template>
<!-- Column: Source
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 v-else>
{{ entry.uri }}
{{ data.item.uri }}
</span>
</b-col>
<b-col cols="3">
</template>
<!-- Column: Actions
Finally some buttons to reorder or delete playlist entries
-->
<template
slot="actions"
slot-scope="data"
>
<b-button-group size="sm">
<b-button
:disabled="index === 0"
@click="movePlaylistItemUp(index)"
:disabled="data.index === 0"
@click="movePlaylistItemUp(data.index)"
>
<b class="upDownArrows">&uarr;</b>
</b-button>
<b-button
:disabled="index === playlistEditor.entries.length - 1"
@click="movePlaylistItemDown(index)"
:disabled="data.index === playlistEditor.entries.length - 1"
@click="movePlaylistItemDown(data.index)"
>
<b class="upDownArrows">&darr;</b>
</b-button>
<b-button
variant="danger"
@click="deletePlaylistItem(index)"
@click="deletePlaylistItem(data.index)"
>
Delete
</b-button>
</b-button-group>
</b-col>
</b-row>
</template>
</b-table>
</div>
<hr>
Add:
<b-button-group>
<b-dropdown text="File">
<b-dropdown-item
v-for="(file, index) in files"
:key="index"
>
{{ 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>
<!-- 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
-->
<div>
Add:
<b-button-group>
<b-dropdown text="File">
<b-dropdown-item
v-for="(file, index) in files"
:key="index"
>
{{ 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>
<!-- Only display a spinner if the playlists are not loaded yet -->
......@@ -625,6 +669,13 @@ export default {
{ key: 'entries', label: 'Entries' },
{ key: 'updated', label: 'Last edit' },
{ 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 {
},
movePlaylistItemUp: function (index) {
this.notYetImplemented()
return index
if (index > 0 && index < this.playlistEditor.entries.length) {
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) {
this.notYetImplemented()
return index
if (index < this.playlistEditor.entries.length - 1 && index >= 0) {
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) {
this.notYetImplemented()
return index
if (index >= 0 && index < this.playlistEditor.entries.length) {
this.playlistEditor.entries.splice(index, 1)
this.$refs.playlistEditTable.refresh()
}
},
deletePlaylist: function (id) {
......@@ -763,7 +824,10 @@ export default {
},
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
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment