revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

music.mpd vue.js refactoring WIP: Implemented playlist track move feature

Browse source
This commit is contained in:
Fabio Manganiello 2019-06-04 15:59:07 +02:00
parent d3ecb7b871
commit 611a137ff6
7 changed files with 74 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss
View file

@ -132,6 +132,13 @@
height: 4rem;
@include animation(active-track 5s infinite);
}
&.move:hover {
background: $move-mode-track-bg !important;
border-top: $move-mode-track-border;
border-bottom: $move-mode-track-border;
cursor: move;
}
}
}
}

3
platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/vars.scss
View file

@ -23,3 +23,6 @@ $playlist-controls-border: $default-border-2;
$active-track-bg-1: #d4ffe3;
$active-track-bg-2: #9cdfb0;
$move-mode-track-border: 3px dotted rgb(216,156,136);
$move-mode-track-bg: rgba(216,156,136,0.3);

67
platypush/backend/http/static/js/plugins/music.mpd/index.js
View file

@ -17,6 +17,11 @@ Vue.component('music-mpd', {
browser: false,
},
moveMode: {
playlist: false,
editor: false,
},
selectedPlaylistItems: {},
selectedBrowserItems: {},
@ -45,24 +50,29 @@ Vue.component('music-mpd', {
});
}
items.push(
{
text: 'Add to playlist',
icon: 'list',
},
{
items.push({
text: 'Add to playlist',
icon: 'list',
});
if (Object.keys(this.selectedPlaylistItems).length < this.playlist.length) {
items.push({
text: 'Move',
icon: 'retweet',
},
{
text: 'Remove from queue',
icon: 'trash',
click: async function() {
await self.del();
self.selectedPlaylistItems = {};
click: function() {
self.moveMode.playlist = true;
},
});
}
items.push({
text: 'Remove from queue',
icon: 'trash',
click: async function() {
await self.del();
self.selectedPlaylistItems = {};
},
);
});
if (Object.keys(this.selectedPlaylistItems).length === 1) {
items.push({
@ -473,10 +483,8 @@ Vue.component('music-mpd', {
this._parsePlaylist(playlist);
},
load: async function(item) {
let status = await request('music.mpd.load', {playlist:item});
this._parseStatus(status);
load: async function(item, play=false) {
await request('music.mpd.load', {playlist:item, play:play});
let playlist = await request('music.mpd.playlistinfo');
this._parsePlaylist(playlist);
},
@ -511,6 +519,16 @@ Vue.component('music-mpd', {
this._parseBrowserItems(items);
},
move: async function(fromPos, toPos, updateChanges=true) {
let status = await request('music.mpd.move', {from_pos: fromPos, to_pos: toPos});
if (updateChanges) {
this._parseStatus(status);
const playlist = await request('music.mpd.playlistinfo');
this._parsePlaylist(playlist);
}
},
swap: async function() {
if (Object.keys(this.selectedPlaylistItems).length !== 2) {
return;
@ -693,13 +711,24 @@ Vue.component('music-mpd', {
this.browserFilter.toLocaleLowerCase().split(' ').filter(_ => _.length > 0).join(' ')) >= 0;
},
onPlaylistItemClick: function(track) {
onPlaylistItemClick: async function(track) {
if (this.selectionMode.playlist) {
if (track.pos in this.selectedPlaylistItems) {
Vue.delete(this.selectedPlaylistItems, track.pos);
} else {
Vue.set(this.selectedPlaylistItems, track.pos, track);
}
} else if (this.moveMode.playlist) {
var fromPos = Object.values(this.selectedPlaylistItems).map(_ => _.pos);
var toPos = track.pos;
this.moveMode.playlist = false;
const promises = fromPos.map((pos,i) => this.move(pos, toPos+i, false));
await Promise.all(promises);
this.selectedPlaylistItems = {};
const playlist = await request('music.mpd.playlistinfo');
this._parsePlaylist(playlist);
} else if (track.pos in this.selectedPlaylistItems) {
Vue.delete(this.selectedPlaylistItems, track.pos);
} else {

5
platypush/backend/http/static/js/plugins/music.mpd/playlist.js
View file

@ -15,6 +15,11 @@ Vue.component('music-mpd-playlist-item', {
type: Boolean,
default: false,
},
move: {
type: Boolean,
default: false,
},
},
});

3
platypush/backend/http/templates/plugins/music.mpd/index.html
View file

@ -120,6 +120,7 @@
:track="item"
:active="track.file && status.state !== 'stop' && item.file === track.file"
:selected="item.pos in selectedPlaylistItems"
:move="moveMode.playlist"
:ref="track.file && status.state !== 'stop' && item.file === track.file ? 'activePlaylistTrack' : undefined"
@input="onPlaylistItemClick">
</music-mpd-playlist-item>
@ -167,7 +168,7 @@
<div class="col-3 pull-right">
<div class="row">
<button @click="single" :class="{enabled: status.single}" title="Toggle single mode">
<i class="fa fa-chess-pawn"></i>
<i class="fa fa-bullseye"></i>
</button>
<button @click="consume" :class="{enabled: status.consume}" title="Toggle consume mode">
<i class="fa fa-utensils"></i>

2
platypush/backend/http/templates/plugins/music.mpd/playlist.html
View file

@ -2,7 +2,7 @@
<script type="text/x-template" id="tmpl-music-mpd-playlist-item">
<div class="row item playlist-item"
:class="{selected: selected, active: active}"
:class="{selected: selected, active: active, move: move}"
@click="$emit('input', track)">
<div class="col-5 artist" v-text="track.artist"></div>
<div class="col-5 title" v-text="track.title"></div>

11
platypush/plugins/music/mpd/__init__.py
View file

@ -379,16 +379,21 @@ class MusicMpdPlugin(MusicPlugin):
return resource
@action
def load(self, playlist):
def load(self, playlist, play=True):
"""
Load and play a playlist by name
:param playlist: Playlist name
:type playlist: str
:param play: Start playback after loading the playlist (default: True)
:type play: bool
"""
self._exec('load', playlist)
return self.play()
ret = self._exec('load', playlist)
if play:
self.play()
return ret
@action
def clear(self):