added add to playlist for list item songs
This commit is contained in:
booploops
parent
2c3535fcdc
commit
00e032a0ec
6 changed files with 173 additions and 19 deletions
36
src/renderer/views/components/add-to-playlist.ejs
Normal file
36
src/renderer/views/components/add-to-playlist.ejs
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script type="text/x-template" id="add-to-playlist">
|
||||
<template>
|
||||
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<div class="row">
|
||||
<div class="col flex-center">
|
||||
Add To Playlist
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="md-btn" @click="app.resetState()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<button class="md-btn" @click="app.addSelectedToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlists" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">{{ playlist.attributes.name }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('add-to-playlist', {
|
||||
template: '#add-to-playlist',
|
||||
props: {
|
||||
playlists: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -4,9 +4,10 @@
|
|||
@contextmenu="contextMenu"
|
||||
@click="select"
|
||||
:data-id="item.attributes.playParams.id ?? item.id"
|
||||
:data-type="item.type ?? item.attributes.playParams.kind"
|
||||
:data-type="getDataType()"
|
||||
:data-index="index"
|
||||
:data-guid="guid"
|
||||
:data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
|
||||
class="cd-mediaitem-list-item"
|
||||
:class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
|
||||
<template v-if="isVisible">
|
||||
|
|
@ -84,11 +85,23 @@
|
|||
'contextExt': {type: Object, required: false},
|
||||
},
|
||||
methods: {
|
||||
getDataType() {
|
||||
if(this.item.attributes.playParams.isLibrary) {
|
||||
return this.item.type
|
||||
}else{
|
||||
return this.item.attributes.playParams.kind
|
||||
}
|
||||
},
|
||||
select(e) {
|
||||
let data_type = this.getDataType()
|
||||
let item_id = this.item.attributes.playParams.id ?? this.item.id
|
||||
let isLibrary = this.item.attributes.playParams.isLibrary ?? false
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (this.index != -1) {
|
||||
|
||||
if(app.selectedMediaItems.length == 0) {
|
||||
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
|
||||
app.select_selectMediaItem(item_id, this.getDataType(), this.index, this.guid, isLibrary)
|
||||
}
|
||||
let allMediaItems = document.querySelectorAll(".cd-mediaitem-list-item[data-index]")
|
||||
let startIndex = Math.min(...app.selectedMediaItems.map(item => item.index))
|
||||
|
|
@ -100,7 +113,8 @@
|
|||
app.select_selectMediaItem(item.getAttribute("data-id"),
|
||||
item.getAttribute("data-type"),
|
||||
item.getAttribute("data-index"),
|
||||
item.getAttribute("data-guid"))
|
||||
item.getAttribute("data-guid")),
|
||||
item.getAttribute("data-islibrary")
|
||||
}
|
||||
}
|
||||
} else if (this.index > endIndex) {
|
||||
|
|
@ -110,7 +124,8 @@
|
|||
app.select_selectMediaItem(item.getAttribute("data-id"),
|
||||
item.getAttribute("data-type"),
|
||||
item.getAttribute("data-index"),
|
||||
item.getAttribute("data-guid"))
|
||||
item.getAttribute("data-guid")),
|
||||
item.getAttribute("data-islibrary")
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
|
@ -120,7 +135,8 @@
|
|||
app.select_selectMediaItem(item.getAttribute("data-id"),
|
||||
item.getAttribute("data-type"),
|
||||
item.getAttribute("data-index"),
|
||||
item.getAttribute("data-guid"))
|
||||
item.getAttribute("data-guid")),
|
||||
item.getAttribute("data-islibrary")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,29 +145,39 @@
|
|||
if (app.select_hasMediaItem(this.guid)) {
|
||||
app.select_removeMediaItem(this.guid)
|
||||
} else {
|
||||
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
|
||||
app.select_selectMediaItem(item_id, this.getDataType(), this.index, this.guid, isLibrary)
|
||||
}
|
||||
} else {
|
||||
if (app.select_hasMediaItem(this.guid)) {
|
||||
app.selectedMediaItems = []
|
||||
} else {
|
||||
app.selectedMediaItems = []
|
||||
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
|
||||
app.select_selectMediaItem(item_id, this.getDataType(), this.index, this.guid, isLibrary)
|
||||
}
|
||||
}
|
||||
},
|
||||
contextMenu(event) {
|
||||
let self = this
|
||||
let data_type = this.getDataType()
|
||||
let item_id = this.item.attributes.playParams.id ?? this.item.id
|
||||
let isLibrary = this.item.attributes.playParams.isLibrary ?? false
|
||||
|
||||
let useMenu = "normal"
|
||||
if (app.selectedMediaItems.length <= 1) {
|
||||
app.selectedMediaItems = []
|
||||
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
|
||||
app.select_selectMediaItem(item_id, data_type, this.index, this.guid, isLibrary)
|
||||
} else {
|
||||
useMenu = "multiple"
|
||||
}
|
||||
let menus = {
|
||||
multiple: {
|
||||
items: [
|
||||
{
|
||||
"name": "Add to Playlist...",
|
||||
"action": function () {
|
||||
app.promptAddToPlaylist()
|
||||
}
|
||||
},
|
||||
{
|
||||
name: `Play ${app.selectedMediaItems.length} tracks next`,
|
||||
action: () => {
|
||||
|
|
@ -197,6 +223,12 @@
|
|||
},
|
||||
normal: {
|
||||
items: [
|
||||
{
|
||||
"name": "Add to Playlist...",
|
||||
"action": function () {
|
||||
app.promptAddToPlaylist()
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Start Radio",
|
||||
"action": function () {
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@
|
|||
Playlists
|
||||
</div>
|
||||
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
|
||||
@dragover="()=>{}"
|
||||
:href="item.href"
|
||||
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
|
||||
{{ item.attributes.name }}
|
||||
|
|
@ -408,6 +409,9 @@
|
|||
<transition name="wpfade">
|
||||
<div class="bg-artwork--placeholder" v-else></div>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
|
||||
</transition>
|
||||
<div id="apple-music-video-container">
|
||||
<div id="apple-music-video-player-controls">
|
||||
<div id="player-exit" title="Close" onclick="app.exitMV()">
|
||||
|
|
@ -485,6 +489,8 @@
|
|||
</button>
|
||||
</script>
|
||||
|
||||
<!-- Add to playlist -->
|
||||
<%- include('components/add-to-playlist') %>
|
||||
<!-- Queue -->
|
||||
<%- include('components/queue') %>
|
||||
<!-- Queue Item -->
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit" v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'" v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" :context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
</draggable>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue