forked from platypush/platypush
168 lines
7.9 KiB
HTML
168 lines
7.9 KiB
HTML
{% include 'plugins/music.mpd/browser.html' %}
|
|
{% include 'plugins/music.mpd/playlist.html' %}
|
|
|
|
<script type="text/x-template" id="tmpl-music-mpd">
|
|
<div class="row music-mpd-container">
|
|
<div class="row panels">
|
|
<!-- Browser section -->
|
|
<div class="col-no-margin-l-3 col-no-margin-m-4 s-hidden browser">
|
|
<div class="col-s-12 col-m-4 col-l-3 browser-controls">
|
|
<div class="col-8 filter-container">
|
|
<i class="fa fa-filter input-icon"></i>
|
|
<input type="text" class="with-icon" v-model="browserFilter">
|
|
</div>
|
|
<div class="col-4 buttons pull-right">
|
|
<button title="Add to queue">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
<button title="Remove tracks" v-if="selectionMode.playlist"
|
|
:disabled="Object.keys(selectedPlaylistItems).length === 0"
|
|
@click="del">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
<button :class="{enabled: selectionMode.browser}"
|
|
:title="selectionMode.browser ? 'End selection' : 'Start selection'"
|
|
@click="toggleBrowserSelectionMode">
|
|
<i class="fa fa-check-square"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<music-mpd-browser-item
|
|
v-for="item in browserItems"
|
|
v-if="matchesBrowserFilter(item)"
|
|
:key="item.type + '-' + item.name"
|
|
:type="item.type"
|
|
:name="item.name">
|
|
</music-mpd-browser-item>
|
|
</div>
|
|
|
|
<!-- Playlist section -->
|
|
<div class="col-s-12 col-no-margin-m-8 col-no-margin-l-9 playlist">
|
|
<div class="row empty" v-if="playlist.length === 0">
|
|
<i class="fa fa-list"></i>
|
|
</div>
|
|
|
|
<div class="col-s-12 col-m-8 col-l-9 playlist-controls" v-else>
|
|
<div class="col-8 filter-container">
|
|
<i class="fa fa-filter input-icon"></i>
|
|
<input type="text" class="with-icon" v-model="playlistFilter">
|
|
</div>
|
|
<div class="col-4 buttons pull-right">
|
|
<button title="Search">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
<button title="Add item">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
<button title="Save playlist" v-if="playlist.length">
|
|
<i class="fa fa-save"></i>
|
|
</button>
|
|
<button title="Swap tracks"
|
|
v-if="selectionMode.playlist && playlist.length > 1"
|
|
:disabled="Object.keys(selectedPlaylistItems).length !== 2"
|
|
@click="swap">
|
|
<i class="fa fa-retweet"></i>
|
|
</button>
|
|
<button title="Remove tracks" v-if="selectionMode.playlist"
|
|
:disabled="Object.keys(selectedPlaylistItems).length === 0"
|
|
@click="del">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
<button :class="{enabled: selectionMode.playlist}"
|
|
:title="selectionMode.playlist ? 'End selection' : 'Start selection'"
|
|
@click="togglePlaylistSelectionMode">
|
|
<i class="fa fa-check-square"></i>
|
|
</button>
|
|
<button title="Clear playlist" @click="clear">
|
|
<i class="fa fa-ban"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<dropdown id="music-mpd-playlist-dropdown"
|
|
v-if="playlist.length > 0"
|
|
ref="playlistDropdown"
|
|
:items="playlistDropdownItems">
|
|
</dropdown>
|
|
|
|
<music-mpd-playlist-item
|
|
v-for="item in playlist"
|
|
v-if="matchesPlaylistFilter(item)"
|
|
:key="item.pos"
|
|
:track="item"
|
|
:active="track.file && status.state !== 'stop' && item.file === track.file"
|
|
:selected="item.pos in selectedPlaylistItems"
|
|
:ref="track.file && status.state !== 'stop' && item.file === track.file ? 'activePlaylistTrack' : undefined"
|
|
@input="onPlaylistItemClick">
|
|
</music-mpd-playlist-item>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row controls">
|
|
<div class="col-3 track-container">
|
|
<div class="track-info" v-if="status.state == 'play' || status.state == 'pause'">
|
|
<div class="row artist" v-text="track.artist"></div>
|
|
<div class="row title" v-text="track.title"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 playback-controls">
|
|
<div class="row">
|
|
<button @click="previous" title="Play previous track">
|
|
<i class="fa fa-step-backward"></i>
|
|
</button>
|
|
<button @click="playPause" :title="status.state == 'play' ? 'Pause playback' : 'Start playback'">
|
|
<i class="fa fa-pause" v-if="status.state == 'play'"></i>
|
|
<i class="fa fa-play" v-else></i>
|
|
</button>
|
|
<button @click="stop" v-if="status.state != 'stop'" title="Stop playback">
|
|
<i class="fa fa-stop"></i>
|
|
</button>
|
|
<button @click="next" title="Play next track">
|
|
<i class="fa fa-step-forward"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<span class="elapsed-time" v-text="status.elapsed && status.state != 'stop' ? convertTime(status.elapsed) : '-:--'"></span>
|
|
<input type="range"
|
|
class="slider seek-slider"
|
|
v-model="status.elapsed"
|
|
min="0"
|
|
:max="track.time"
|
|
:disabled="!track.time || status.state == 'stop'"
|
|
@input="seek">
|
|
<span class="total-time" v-text="track.time && status.state != 'stop' ? convertTime(track.time) : '-:--'"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-3 pull-right">
|
|
<div class="row">
|
|
<button @click="random" :class="{enabled: status.random}" title="Toggle shuffle">
|
|
<i class="fa fa-random"></i>
|
|
</button>
|
|
<button @click="repeat" :class="{enabled: status.repeat}" title="Toggle repeat">
|
|
<i class="fa fa-repeat"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row volume-container">
|
|
<button disabled>
|
|
<i class="fa fa-volume-up"></i>
|
|
</button>
|
|
<input type="range"
|
|
class="slider volume-slider"
|
|
min="0"
|
|
max="100"
|
|
v-model="status.volume"
|
|
@input="volume">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|