forked from platypush/platypush
182 lines
6.4 KiB
HTML
182 lines
6.4 KiB
HTML
<script type="text/javascript" src="{{ url_for('static', filename='js/music.mpd.js') }}"></script>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/music.mpd.css') }}"></script>
|
|
|
|
<div id="music-search-modal" class="modal">
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
Search For Music
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<form id="music-search-form" action="#">
|
|
<div class="row form-row">
|
|
<div class="two columns">
|
|
<label for="music-search-any">Any</label>
|
|
</div>
|
|
<div class="ten columns">
|
|
<input type="text" name="any">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-row">
|
|
<div class="two columns">
|
|
<label for="music-search-artist">Artist</label>
|
|
</div>
|
|
<div class="ten columns">
|
|
<input type="text" name="artist">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-row">
|
|
<div class="two columns">
|
|
<label for="music-search-title">Title</label>
|
|
</div>
|
|
<div class="ten columns">
|
|
<input type="text" name="title">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-row">
|
|
<div class="two columns">
|
|
<label for="music-search-album">Album</label>
|
|
</div>
|
|
<div class="ten columns">
|
|
<input type="text" name="album">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row music-form-bottom">
|
|
<div class="six columns offset-by-six do-search-btns">
|
|
<input type="button" class="btn-default" data-dismiss-modal="#music-search-modal"
|
|
value="Close">
|
|
<input type="submit" class="btn-primary" value="Search">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="row" id="music-search-results-form">
|
|
<div class="six columns">
|
|
<button class="btn-default" id="music-results-add" disabled="disabled">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
<button class="btn-default" id="music-results-play" disabled="disabled">
|
|
<i class="fa fa-play"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="six columns right-side">
|
|
<input type="button" class="btn-default"
|
|
data-dismiss-modal="#music-search-modal" value="Close">
|
|
<input type="button" class="btn-primary"
|
|
id="music-search-reset" value="Reset">
|
|
</div>
|
|
</form>
|
|
|
|
<div id="music-search-results-container" class="row">
|
|
<div id="music-search-results-head" class="row">
|
|
<div class="three columns">Artist</div>
|
|
<div class="four columns">Title</div>
|
|
<div class="four columns">Album</div>
|
|
<div class="one column">Time</div>
|
|
</div>
|
|
|
|
<div id="music-search-results" class="row"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row track-info">
|
|
<span class="no-track">No media is being played</span>
|
|
<span class="artist"></span>
|
|
<span class="track"></span>
|
|
</div>
|
|
|
|
<div class="playback-controls">
|
|
<div class="row">
|
|
<div class="eight columns offset-by-two slider-container" id="track-seeker-container">
|
|
<span class="seek-time" id="seek-time-elapsed">-:--</span>
|
|
<input type="range" min="0" id="track-seeker" disabled="disabled" class="slider" style="width:75%">
|
|
<span class="seek-time" id="seek-time-length">-:--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="ten columns offset-by-one">
|
|
<button data-action="previous">
|
|
<i class="fa fa-step-backward"></i>
|
|
</button>
|
|
|
|
<button data-action="repeat">
|
|
<i class="fa fa-repeat"></i>
|
|
</button>
|
|
|
|
<button data-action="play">
|
|
<i class="fa fa-play"></i>
|
|
</button>
|
|
|
|
<button data-action="pause">
|
|
<i class="fa fa-pause"></i>
|
|
</button>
|
|
|
|
<button data-action="stop">
|
|
<i class="fa fa-stop"></i>
|
|
</button>
|
|
|
|
<button data-action="random">
|
|
<i class="fa fa-random"></i>
|
|
</button>
|
|
|
|
<button data-action="next">
|
|
<i class="fa fa-step-forward"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="eight columns offset-by-two slider-container" id="volume-ctrl-container">
|
|
<i class="fa fa-volume-down"></i>
|
|
<input type="range" min="0" max="100" id="volume-ctrl" class="slider" style="width:80%">
|
|
<i class="fa fa-volume-up"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div id="player-left-side" class="three columns music-pane">
|
|
<div class="row">
|
|
<div id="browser-controls">
|
|
<button data-action="add">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
<button data-action="search" data-modal="#music-search-modal">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="browser-filter-container">
|
|
<input type="text" id="browser-filter" placeholder="Filter">
|
|
</div>
|
|
|
|
<div id="music-browser" class="music-pane"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="player-right-side" class="nine columns music-pane">
|
|
<div class="row">
|
|
<div id="playlist-controls">
|
|
<button data-action="clear">
|
|
<i class="fa fa-eraser"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="playlist-filter-container">
|
|
<input type="text" id="playlist-filter" placeholder="Filter">
|
|
</div>
|
|
|
|
<div id="playlist-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|