[media.jellyfin] Playlist implementation [UI].
This commit is contained in:
parent
bc42ba16d7
commit
b646b5f3d7
GPG key ID:
D90FBA7F76362774
7 changed files with 326 additions and 14 deletions
|
|
@ -27,6 +27,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row duration" v-if="computedItem?.duration">
|
||||
<div class="left side">Duration</div>
|
||||
<div class="right side" v-text="formatDuration(computedItem.duration, true)" />
|
||||
</div>
|
||||
|
||||
<div class="row duration" v-if="computedItem?.n_items != null">
|
||||
<div class="left side">Items</div>
|
||||
<div class="right side" v-text="computedItem.n_items" />
|
||||
</div>
|
||||
|
||||
<div class="row direct-url" v-if="computedItem?.imdb_url">
|
||||
<div class="left side">ImDB URL</div>
|
||||
<div class="right side">
|
||||
|
|
|
|||
|
|
@ -14,10 +14,18 @@
|
|||
<div class="left side"
|
||||
:class="{'col-11': !listView, 'col-10': listView }"
|
||||
@click.stop="$emit('select')">
|
||||
<span class="track-number" v-if="listView && item.track_number">
|
||||
<span class="track-number" v-if="playlistView">
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
|
||||
<span class="track-number" v-else-if="listView && item.track_number">
|
||||
{{ item.track_number }}
|
||||
</span>
|
||||
|
||||
<span class="artist" v-if="playlistView && item.artist">
|
||||
{{ item.artist.name ?? item.artist }} —
|
||||
</span>
|
||||
|
||||
{{item.title || item.name}}
|
||||
</div>
|
||||
|
||||
|
|
@ -111,6 +119,10 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
|
||||
index: {
|
||||
type: Number,
|
||||
},
|
||||
|
||||
listView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
|
@ -187,7 +199,7 @@ export default {
|
|||
})
|
||||
}
|
||||
|
||||
if (this.item.type === 'youtube') {
|
||||
if (['jellyfin', 'youtube'].includes(this.item.type)) {
|
||||
actions.push({
|
||||
iconClass: 'fa fa-list',
|
||||
text: 'Add to Playlist',
|
||||
|
|
@ -195,7 +207,7 @@ export default {
|
|||
})
|
||||
}
|
||||
|
||||
if (this.item.type === 'youtube' && this.playlist?.length) {
|
||||
if (['jellyfin', 'youtube'].includes(this.item.type) && this.playlist) {
|
||||
actions.push({
|
||||
iconClass: 'fa fa-trash',
|
||||
text: 'Remove from Playlist',
|
||||
|
|
@ -211,6 +223,10 @@ export default {
|
|||
|
||||
return actions
|
||||
},
|
||||
|
||||
playlistView() {
|
||||
return this.playlist && this.listView
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -308,6 +324,12 @@ export default {
|
|||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-weight: 300;
|
||||
opacity: .75;
|
||||
letter-spacing: 0.065em;
|
||||
}
|
||||
}
|
||||
|
||||
.side {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<Media v-bind="componentData.props"
|
||||
v-on="componentData.on"
|
||||
:collection="collection"
|
||||
@delete="deleteItem"
|
||||
@select="select"
|
||||
@select-collection="selectCollection"
|
||||
@view="$emit('view', $event)"
|
||||
|
|
@ -148,6 +149,27 @@ export default {
|
|||
this.collection = collection
|
||||
this.select(collection)
|
||||
},
|
||||
|
||||
async deleteItem(item_id) {
|
||||
this.loading_ = true
|
||||
|
||||
try {
|
||||
await this.request('media.jellyfin.delete_item', {
|
||||
item_id: item_id,
|
||||
})
|
||||
} finally {
|
||||
this.loading_ = false
|
||||
}
|
||||
|
||||
if (this.path.length > 1) {
|
||||
if (this.path[this.path.length - 1].id === item_id) {
|
||||
this.selectCollection(this.path[this.path.length - 2])
|
||||
}
|
||||
} else {
|
||||
this.collection = null
|
||||
this.select(this.rootItem)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -22,12 +22,61 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-playlist floating-btn-container" v-if="isPlaylistsCollection">
|
||||
<FloatingButton icon-class="fa fa-plus"
|
||||
title="Create Playlist"
|
||||
:disabled="loading"
|
||||
@click="showNewPlaylist = true" />
|
||||
</div>
|
||||
|
||||
<div class="add-playlist-modal" v-if="showNewPlaylist">
|
||||
<Modal title="Create Playlist"
|
||||
:visible="true"
|
||||
@close="showNewPlaylist = false">
|
||||
<form class="modal-body" @submit.prevent="createPlaylist">
|
||||
<div class="row">
|
||||
<label for="newPlaylistName">Playlist Name</label>
|
||||
<input name="name"
|
||||
type="text"
|
||||
id="newPlaylistName"
|
||||
placeholder="Playlist Name"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label for="newPlaylistPublic">Public</label>
|
||||
<input name="public" type="checkbox" checked id="newPlaylistPublic">
|
||||
</div>
|
||||
|
||||
<div class="row buttons">
|
||||
<button type="button" @click="showNewPlaylist = false">Cancel</button>
|
||||
<button type="submit">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FloatingButton from "@/components/elements/FloatingButton";
|
||||
import Modal from "@/components/Modal";
|
||||
import Utils from '@/Utils'
|
||||
|
||||
export default {
|
||||
mixins: [Utils],
|
||||
emits: ['refresh', 'select'],
|
||||
components: {
|
||||
FloatingButton,
|
||||
Modal,
|
||||
},
|
||||
|
||||
props: {
|
||||
collection: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
filter: {
|
||||
type: String,
|
||||
},
|
||||
|
|
@ -50,7 +99,9 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
fallbackImageCollections: {},
|
||||
loading: false,
|
||||
maxResultIndex: this.batchItems,
|
||||
showNewPlaylist: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -82,9 +133,23 @@ export default {
|
|||
return a.name.localeCompare(b.name)
|
||||
}).slice(0, this.maxResultIndex)
|
||||
},
|
||||
|
||||
isPlaylistsCollection() {
|
||||
return this.collection?.collection_type === 'playlists'
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
async createPlaylist(event) {
|
||||
const form = new FormData(event.target)
|
||||
await this.request('media.jellyfin.create_playlist', {
|
||||
name: form.get('name'),
|
||||
public: form.get('public') === 'on',
|
||||
})
|
||||
|
||||
this.$emit('refresh')
|
||||
},
|
||||
|
||||
onImageError(collection) {
|
||||
this.fallbackImageCollections[collection.id] = true
|
||||
},
|
||||
|
|
@ -102,6 +167,13 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
showNewPlaylist(value) {
|
||||
if (value)
|
||||
this.$nextTick(() => this.$el.querySelector('input[name="name"]').focus())
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$el.parentElement?.addEventListener('scroll', this.onScroll)
|
||||
},
|
||||
|
|
@ -149,5 +221,45 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.add-playlist-modal) {
|
||||
.modal-body {
|
||||
min-width: 30em;
|
||||
max-width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row {
|
||||
margin-bottom: 1em;
|
||||
|
||||
label {
|
||||
@extend .col-m-4;
|
||||
@extend .col-s-12;
|
||||
}
|
||||
|
||||
input {
|
||||
@extend .col-m-8;
|
||||
@extend .col-s-12;
|
||||
}
|
||||
|
||||
&.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
margin-left: 1em;
|
||||
|
||||
&[type="submit"] {
|
||||
width: 10em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@
|
|||
:filter="filter"
|
||||
:loading="isLoading"
|
||||
:path="path"
|
||||
@add-to-playlist="$emit('add-to-playlist', $event)"
|
||||
@delete="$emit('delete', $event)"
|
||||
@play="$emit('play', $event)"
|
||||
@play-with-opts="$emit('play-with-opts', $event)"
|
||||
@remove-from-playlist="$emit('remove-from-playlist', $event)"
|
||||
@select="selectedResult = $event; $emit('select', $event)"
|
||||
@select-collection="selectCollection"
|
||||
@view="$emit('view', $event)" />
|
||||
|
|
@ -16,7 +19,7 @@
|
|||
|
||||
<NoItems :with-shadow="false"
|
||||
v-else-if="!items?.length">
|
||||
No videos found.
|
||||
No media found.
|
||||
</NoItems>
|
||||
|
||||
<div class="wrapper items-wrapper" v-else>
|
||||
|
|
@ -25,6 +28,7 @@
|
|||
:items="collections"
|
||||
:loading="isLoading"
|
||||
:parent-id="collection?.id"
|
||||
@refresh="refresh"
|
||||
@select="selectCollection"
|
||||
v-if="collections.length > 0" />
|
||||
|
||||
|
|
@ -54,7 +58,18 @@ import Results from "@/components/panels/Media/Results";
|
|||
|
||||
export default {
|
||||
mixins: [Mixin],
|
||||
emits: ['select', 'select-collection'],
|
||||
emits: [
|
||||
'add-to-playlist',
|
||||
'delete',
|
||||
'download',
|
||||
'play',
|
||||
'play-with-opts',
|
||||
'remove-from-playlist',
|
||||
'select',
|
||||
'select-collection',
|
||||
'view',
|
||||
],
|
||||
|
||||
components: {
|
||||
Collections,
|
||||
Loading,
|
||||
|
|
@ -65,11 +80,11 @@ export default {
|
|||
|
||||
computed: {
|
||||
collections() {
|
||||
return this.sortedItems?.filter((item) => item.item_type === 'collection') ?? []
|
||||
return this.sortedItems?.filter((item) => ['collection', 'playlist'].includes(item.item_type)) ?? []
|
||||
},
|
||||
|
||||
mediaItems() {
|
||||
const items = this.sortedItems?.filter((item) => item.item_type !== 'collection') ?? []
|
||||
const items = this.sortedItems?.filter((item) => !['collection', 'playlist'].includes(item.item_type)) ?? []
|
||||
|
||||
if (this.collection && (!this.collection.collection_type || this.collection.collection_type === 'books')) {
|
||||
return items.sort((a, b) => {
|
||||
|
|
@ -193,5 +208,18 @@ export default {
|
|||
.music-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.floating-btn-container) {
|
||||
position: fixed;
|
||||
bottom: 5.5em;
|
||||
|
||||
@include until($tablet) {
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
@include from($tablet) {
|
||||
right: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,7 @@
|
|||
<div class="music index">
|
||||
<Loading v-if="isLoading" />
|
||||
|
||||
<NoItems :with-shadow="false" v-else-if="!items?.length">
|
||||
No music found.
|
||||
</NoItems>
|
||||
|
||||
<main :class="{ album: view === 'album', artist: view === 'artist' }" v-else>
|
||||
<main :class="containerClass">
|
||||
<div class="artist header" v-if="view === 'artist'">
|
||||
<div class="image" v-if="collection.image">
|
||||
<img :src="collection.image" />
|
||||
|
|
@ -17,7 +13,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album header" v-if="view === 'album'">
|
||||
<div class="album header" v-else-if="view === 'album'">
|
||||
<div class="image" v-if="collection.image">
|
||||
<img :src="collection.image" />
|
||||
</div>
|
||||
|
|
@ -44,6 +40,38 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="playlist header" v-else-if="view === 'playlist'">
|
||||
<div class="image" v-if="collection.image">
|
||||
<img :src="collection.image" />
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h1 v-text="collection.name" />
|
||||
<div class="details">
|
||||
<div class="row" v-if="collection.duration">
|
||||
<span class="label">Duration:</span>
|
||||
<span class="value" v-text="formatDuration(collection.duration, true)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<Dropdown title="Playlist Actions">
|
||||
<DropdownItem text="Remove Playlist"
|
||||
icon-class="fas fa-trash"
|
||||
@input="$refs.deleteConfirmDialog.show()" />
|
||||
|
||||
<DropdownItem text="Info"
|
||||
icon-class="fas fa-info"
|
||||
@input="showInfoModal = true" />
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NoItems :with-shadow="false" v-if="!items?.length">
|
||||
No media found.
|
||||
</NoItems>
|
||||
|
||||
<Collections :collection="collection"
|
||||
:filter="filter"
|
||||
:items="collections"
|
||||
|
|
@ -56,6 +84,7 @@
|
|||
:sources="{'jellyfin': true}"
|
||||
:filter="filter"
|
||||
:list-view="true"
|
||||
:playlist="collection?.item_type === 'playlist' ? collection : null"
|
||||
:selected-result="selectedResult"
|
||||
:show-date="false"
|
||||
@add-to-playlist="$emit('add-to-playlist', $event)"
|
||||
|
|
@ -66,23 +95,54 @@
|
|||
@select="selectedResult = $event"
|
||||
@view="$emit('view', $event)"
|
||||
v-if="mediaItems?.length > 0" />
|
||||
|
||||
<div class="collection-modal" v-if="showInfoModal">
|
||||
<Modal title="Collection Info" visible @close="showInfoModal = false">
|
||||
<Info :item="collection" :pluginName="pluginName" />
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog ref="deleteConfirmDialog" @input="$emit('delete', collection.id)">
|
||||
Are you sure you want to delete this playlist?
|
||||
</ConfirmDialog>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Collections from "@/components/panels/Media/Providers/Jellyfin/Collections";
|
||||
import ConfirmDialog from "@/components/elements/ConfirmDialog";
|
||||
import Dropdown from "@/components/elements/Dropdown";
|
||||
import DropdownItem from "@/components/elements/DropdownItem";
|
||||
import Info from "@/components/panels/Media/Info";
|
||||
import Loading from "@/components/Loading";
|
||||
import Mixin from "@/components/panels/Media/Providers/Jellyfin/Mixin";
|
||||
import Modal from "@/components/Modal";
|
||||
import NoItems from "@/components/elements/NoItems";
|
||||
import Results from "@/components/panels/Media/Results";
|
||||
|
||||
export default {
|
||||
mixins: [Mixin],
|
||||
emits: ['select', 'select-collection'],
|
||||
emits: [
|
||||
'add-to-playlist',
|
||||
'delete',
|
||||
'download',
|
||||
'play',
|
||||
'play-with-opts',
|
||||
'remove-from-playlist',
|
||||
'select',
|
||||
'select-collection',
|
||||
'view',
|
||||
],
|
||||
|
||||
components: {
|
||||
Collections,
|
||||
ConfirmDialog,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
Info,
|
||||
Loading,
|
||||
Modal,
|
||||
NoItems,
|
||||
Results,
|
||||
},
|
||||
|
|
@ -90,6 +150,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
artist: null,
|
||||
showInfoModal: false,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -100,6 +161,14 @@ export default {
|
|||
).sort((a, b) => a.name.localeCompare(b.name))
|
||||
},
|
||||
|
||||
containerClass() {
|
||||
return {
|
||||
artist: this.view === 'artist',
|
||||
album: this.view === 'album',
|
||||
playlist: this.view === 'playlist',
|
||||
}
|
||||
},
|
||||
|
||||
displayedArtist() {
|
||||
return this.artist || this.collection?.artist
|
||||
},
|
||||
|
|
@ -134,6 +203,8 @@ export default {
|
|||
return 'artist'
|
||||
case 'album':
|
||||
return 'album'
|
||||
case 'playlist':
|
||||
return 'playlist'
|
||||
default:
|
||||
return 'index'
|
||||
}
|
||||
|
|
@ -240,6 +311,16 @@ export default {
|
|||
)
|
||||
break
|
||||
|
||||
case 'playlist':
|
||||
this.items = await this.request(
|
||||
'media.jellyfin.get_items',
|
||||
{
|
||||
parent_id: this.collection.id,
|
||||
limit: 25000,
|
||||
}
|
||||
)
|
||||
break
|
||||
|
||||
default:
|
||||
this.artist = null
|
||||
this.items = await this.request(
|
||||
|
|
@ -274,6 +355,8 @@ export default {
|
|||
|
||||
$artist-header-height: 5em;
|
||||
$album-header-height: 10em;
|
||||
$playlist-header-height: 5em;
|
||||
$actions-dropdown-width: 5em;
|
||||
|
||||
.index {
|
||||
position: relative;
|
||||
|
|
@ -313,6 +396,12 @@ $album-header-height: 10em;
|
|||
}
|
||||
}
|
||||
|
||||
&.playlist {
|
||||
.media-results {
|
||||
height: calc(100% - #{$playlist-header-height} - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
.index {
|
||||
height: fit-content;
|
||||
}
|
||||
|
|
@ -363,6 +452,32 @@ $album-header-height: 10em;
|
|||
}
|
||||
}
|
||||
|
||||
&.playlist {
|
||||
height: $playlist-header-height;
|
||||
border-bottom: 1px solid $default-shadow-color;
|
||||
|
||||
.image {
|
||||
img {
|
||||
width: calc($playlist-header-height - 0.5em);
|
||||
height: calc($playlist-header-height - 0.5em);
|
||||
padding: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: calc(100% - #{$actions-dropdown-width});
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: $actions-dropdown-width;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: -0.75em;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin-right: 1em;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<Item v-for="(item, i) in visibleResults"
|
||||
:key="i"
|
||||
:hidden="!!Object.keys(sources || {}).length && !sources[item.type]"
|
||||
:index="i"
|
||||
:item="item"
|
||||
:list-view="listView"
|
||||
:playlist="playlist"
|
||||
|
|
@ -184,6 +185,8 @@ export default {
|
|||
|
||||
&.list {
|
||||
:deep(.grid) {
|
||||
height: fit-content;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue