groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-02-28 21:19:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Added buttons to add items to the top or bottom of a playlist.

Browse source
This commit is contained in:
sir-wilhelm 2025-12-12 18:34:50 +00:00
parent 122fc34a75
commit 6c94913cb2
3 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/components/modals/playlists/AddCreateModal.vue
View file

@ -15,7 +15,7 @@
<div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
<transition-group name="list-complete" tag="div">
<template v-for="playlist in sortedPlaylists">
<modals-playlists-user-playlist-item :key="playlist.id" :playlist="playlist" class="list-complete-item" @add="addToPlaylist" @remove="removeFromPlaylist" @close="show = false" />
<modals-playlists-user-playlist-item :key="playlist.id" :playlist="playlist" class="list-complete-item" @add-top="addToPlaylist" @add-bottom="addToPlaylist" @remove="removeFromPlaylist" @close="show = false" />
</template>
</transition-group>
</div>
@ -151,13 +151,13 @@ export default {
this.processing = false
})
},
addToPlaylist(playlist) {
addToPlaylist(playlist, addToTop) {
if (!this.selectedPlaylistItems.length) return
this.processing = true
const itemObjects = this.selectedPlaylistItems.map((pi) => ({ libraryItemId: pi.libraryItem.id, episodeId: pi.episode ? pi.episode.id : null }))
this.$axios
.$post(`/api/playlists/${playlist.id}/batch/add`, { items: itemObjects })
.$post(`/api/playlists/${playlist.id}/batch/add`, { items: itemObjects, addToTop: addToTop })
.then((updatedPlaylist) => {
console.log(`Items added to playlist`, updatedPlaylist)
this.processing = false

14
client/components/modals/playlists/UserPlaylistItem.vue
View file

@ -7,8 +7,11 @@
<div class="grow overflow-hidden px-2">
<nuxt-link :to="`/playlist/${playlist.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ playlist.name }}</nuxt-link>
</div>
<div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
<ui-btn v-if="!isItemIncluded" color="bg-success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-symbols text-2xl pt-px">add</span></ui-btn>
<div class="h-full flex flex-col items-end justify-center transform space-y-2" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
<template v-if="!isItemIncluded">
<ui-btn color="bg-success" :padding-x="3" small class="h-9" @click.stop="clickAddTop"><span class="material-symbols text-2xl pt-px">vertical_align_top</span></ui-btn>
<ui-btn color="bg-success" :padding-x="3" small class="h-9" @click.stop="clickAddBottom"><span class="material-symbols text-2xl pt-px">vertical_align_bottom</span></ui-btn>
</template>
<ui-btn v-else color="bg-error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-symbols text-2xl pt-px">remove</span></ui-btn>
</div>
</div>
@ -45,8 +48,11 @@ export default {
mouseleave() {
this.isHovering = false
},
clickAdd() {
this.$emit('add', this.playlist)
clickAddTop() {
this.$emit('add-top', this.playlist, true)
},
clickAddBottom() {
this.$emit('add-bottom', this.playlist, false)
},
clickRem() {
this.$emit('remove', this.playlist)

3
server/controllers/PlaylistController.js
View file

@ -397,9 +397,10 @@ class PlaylistController {
const mediaItemsToAdd = []
const jsonExpanded = req.playlist.toOldJSONExpanded()
const addToTop = req.body.addToTop === true
// Setup array of playlistMediaItem records to add
let order = req.playlist.playlistMediaItems.length + 1
let order = addToTop ? 0 : (req.playlist.playlistMediaItems.length + 1)
for (const item of req.body.items) {
const libraryItem = libraryItems.find((li) => li.id === item.libraryItemId)