337 lines
16 KiB
HTML
337 lines
16 KiB
HTML
<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/music.mpd/utils.js') }}"></script>
|
|
|
|
{% include 'plugins/music.mpd/browser.html' %}
|
|
{% include 'plugins/music.mpd/playlist.html' %}
|
|
{% include 'plugins/music.mpd/search.html' %}
|
|
|
|
<script type="text/x-template" id="tmpl-music-mpd">
|
|
<div class="row plugin music-mpd-container">
|
|
<music-mpd-search ref="search" @info="info" :mpd="this">
|
|
</music-mpd-search>
|
|
|
|
<modal id="music-mpd-info" title="Info" v-model="modalVisible.info" ref="modal">
|
|
<div class="info-container">
|
|
<div class="row">
|
|
<div class="col-4 attr">File</div>
|
|
<div class="col-8 value" v-text="infoItem.file"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="infoItem.artist">
|
|
<div class="col-4 attr">Artist</div>
|
|
<div class="col-8 value" v-text="infoItem.artist"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="infoItem.title">
|
|
<div class="col-4 attr">Title</div>
|
|
<div class="col-8 value" v-text="infoItem.title"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="infoItem.album">
|
|
<div class="col-4 attr">Album</div>
|
|
<div class="col-8 value" v-text="infoItem.album"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="infoItem.year || infoItem.date">
|
|
<div class="col-4 attr">Date</div>
|
|
<div class="col-8 value" v-text="infoItem.year || infoItem.date"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="infoItem.disc">
|
|
<div class="col-4 attr">Disc</div>
|
|
<div class="col-8 value" v-text="infoItem.disc"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="infoItem.track">
|
|
<div class="col-4 attr">Track</div>
|
|
<div class="col-8 value" v-text="infoItem.track"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="infoItem.time && infoItem.time > 0">
|
|
<div class="col-4 attr">Time</div>
|
|
<div class="col-8 value" v-text="convertTime(infoItem.time)"></div>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
|
|
<modal id="music-mpd-playlist-add" title="Add to playlist" v-model="modalVisible.playlistAdd" ref="modalPlaylistAdd">
|
|
<div class="playlist-add">
|
|
<div class="playlist-add-controls">
|
|
<div class="row">
|
|
<div class="col-7 filter-container">
|
|
<i class="fa fa-filter input-icon"></i>
|
|
<input type="text" class="with-icon" v-model="playlistAddFilter">
|
|
</div>
|
|
<div class="col-5 pull-right">
|
|
<button class="btn-primary" type="button"
|
|
@click="playlistadd"
|
|
:disabled="Object.keys(selectedPlaylistAddItems).length === 0">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="playlists-container">
|
|
<div class="item"
|
|
:class="{selected: p.playlist in selectedPlaylistAddItems}"
|
|
v-for="p in playlists"
|
|
v-if="matchesPlaylistAddFilter(p)"
|
|
v-text="p.playlist"
|
|
@click="onPlaylistAddItemClick(p)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
|
|
<modal id="music-mpd-playlist-edit" title="Edit/view playlist" v-model="modalVisible.editor" ref="modalEditor">
|
|
<div class="editor">
|
|
<div class="editor-controls">
|
|
<div class="row">
|
|
<div class="col-7 filter-container">
|
|
<i class="fa fa-filter input-icon"></i>
|
|
<input type="text" class="with-icon" v-model="editorFilter">
|
|
</div>
|
|
<div class="col-5 pull-right">
|
|
<button title="Add item" @click="addToPlaylistEditorPrompt">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
<button title="Rename playlist" @click="rename">
|
|
<i class="fa fa-edit"></i>
|
|
</button>
|
|
<button :class="{enabled: selectionMode.editor}"
|
|
:title="selectionMode.editor ? 'End selection' : 'Start selection'"
|
|
@click="toggleEditorSelectionMode">
|
|
<i class="fa fa-check"></i>
|
|
</button>
|
|
<button title="Select all"
|
|
@click="editorSelectAll">
|
|
<i class="fa fa-check-double"></i>
|
|
</button>
|
|
<button title="Clear playlist" @click="playlistclear">
|
|
<i class="fa fa-ban"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="editor-container">
|
|
<dropdown id="music-mpd-editor-dropdown"
|
|
v-if="selectedPlaylist.items"
|
|
ref="editorDropdown"
|
|
:items="editorDropdownItems">
|
|
</dropdown>
|
|
|
|
<music-mpd-playlist-item
|
|
v-for="item in selectedPlaylist.items"
|
|
v-if="matchesEditorFilter(item)"
|
|
:key="item.pos"
|
|
:track="item"
|
|
:selected="item.pos in selectedEditorItems"
|
|
:move="moveMode.editor"
|
|
@input="onEditorItemClick">
|
|
</music-mpd-playlist-item>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
|
|
<div class="row panels">
|
|
<!-- Browser section -->
|
|
<div class="s-hidden panel browser">
|
|
<div class="browser-controls">
|
|
<div class="col-7 filter-container">
|
|
<i class="fa fa-filter input-icon"></i>
|
|
<input type="text" class="with-icon" v-model="browserFilter">
|
|
</div>
|
|
<div class="col-5 buttons pull-right">
|
|
<button :class="{enabled: selectionMode.browser}"
|
|
:title="selectionMode.browser ? 'End selection' : 'Start selection'"
|
|
@click="toggleBrowserSelectionMode">
|
|
<i class="fa fa-check"></i>
|
|
</button>
|
|
<button title="Select all"
|
|
@click="browserSelectAll">
|
|
<i class="fa fa-check-double"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results">
|
|
<dropdown id="music-mpd-browser-dropdown"
|
|
v-if="browserItems.length > 0"
|
|
ref="browserDropdown"
|
|
:items="browserDropdownItems">
|
|
</dropdown>
|
|
|
|
<music-mpd-browser-item
|
|
v-if="browserPath.length > 0"
|
|
key=".."
|
|
id="directory:.."
|
|
type="directory"
|
|
name=".."
|
|
:selected="'directory:..' in selectedBrowserItems"
|
|
@input="onBrowserItemClick">
|
|
</music-mpd-browser-item>
|
|
|
|
<music-mpd-browser-item
|
|
v-for="item in browserItems"
|
|
v-if="matchesBrowserFilter(item)"
|
|
:key="item.id"
|
|
:id="item.id"
|
|
:type="item.type"
|
|
:name="item.name"
|
|
:file="item.file"
|
|
:time="item.time"
|
|
:artist="item.artist"
|
|
:title="item.title"
|
|
:date="item.date"
|
|
:track="item.track"
|
|
:genre="item.genre"
|
|
:lastModified="item['last-modified']"
|
|
:albumUri="item['x-albumuri']"
|
|
:selected="item.id in selectedBrowserItems"
|
|
@input="onBrowserItemClick">
|
|
</music-mpd-browser-item>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playlist section -->
|
|
<div class="panel playlist">
|
|
<div class="playlist-controls">
|
|
<div class="col-7 filter-container">
|
|
<i class="fa fa-filter input-icon"></i>
|
|
<input type="text" class="with-icon" v-model="playlistFilter">
|
|
</div>
|
|
<div class="col-5 buttons pull-right">
|
|
<button title="Search" @click="$refs.search.visible = true">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
<button title="Add item" @click="addToPlaylistPrompt">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
<button title="Save playlist" v-if="playlist.length">
|
|
<i class="fa fa-save" @click="savePlaylistPrompt"></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 :class="{enabled: selectionMode.playlist}"
|
|
:title="selectionMode.playlist ? 'End selection' : 'Start selection'"
|
|
@click="togglePlaylistSelectionMode">
|
|
<i class="fa fa-check"></i>
|
|
</button>
|
|
<button title="Select all"
|
|
@click="playlistSelectAll">
|
|
<i class="fa fa-check-double"></i>
|
|
</button>
|
|
<button title="Clear playlist" @click="clear">
|
|
<i class="fa fa-ban"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results">
|
|
<div class="row empty" v-if="playlist.length === 0">
|
|
<i class="fa fa-list"></i>
|
|
</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"
|
|
:move="moveMode.playlist"
|
|
:ref="track.file && status.state !== 'stop' && item.file === track.file ? 'activePlaylistTrack' : undefined"
|
|
@input="onPlaylistItemClick">
|
|
</music-mpd-playlist-item>
|
|
</div>
|
|
</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">
|
|
<a href="#" v-text="track.artist" @click="searchArtist(track)" v-if="track.artist"></a>
|
|
<span v-text="track.artist" v-else></span>
|
|
</div>
|
|
<div class="row title">
|
|
<a href="#" v-text="track.title" @click="searchAlbum(track)" v-if="track.album"></a>
|
|
<span v-text="track.title" v-else></span>
|
|
</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="single" :class="{enabled: status.single}" title="Toggle single mode">
|
|
<i class="fa fa-bullseye"></i>
|
|
</button>
|
|
<button @click="consume" :class="{enabled: status.consume}" title="Toggle consume mode">
|
|
<i class="fa fa-utensils"></i>
|
|
</button>
|
|
<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-redo"></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>
|
|
|