mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
470 lines
27 KiB
HTML
Executable File
470 lines
27 KiB
HTML
Executable File
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<meta content="yes" name="mobile-web-app-capable">
|
|
<meta content="yes" name="apple-mobile-web-app-capable">
|
|
<meta content="black" name="apple-mobile-web-app-status-bar-style">
|
|
|
|
<link rel="apple-touch-icon" sizes="57x57" href="/public/favicon/apple-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="/public/favicon/apple-icon-60x60.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="/public/favicon/apple-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="/public/favicon/apple-icon-76x76.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="/public/favicon/apple-icon-114x114.png">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="/public/favicon/apple-icon-120x120.png">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="/public/favicon/apple-icon-144x144.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="/public/favicon/apple-icon-152x152.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/public/favicon/apple-icon-180x180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/public/favicon/android-icon-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/public/favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/public/favicon/favicon-96x96.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/public/favicon/favicon-16x16.png">
|
|
<link rel="manifest" href="/public/favicon/manifest.json">
|
|
<meta name="msapplication-TileColor" content="#ffffff">
|
|
<meta name="msapplication-TileImage" content="/public/favicon/ms-icon-144x144.png">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<title>mStream Media Player - All your media. Everywhere you go.</title>
|
|
|
|
<link rel="stylesheet" href="/public/css/foundation.css" />
|
|
<link rel="stylesheet" href="/public/css/master.css">
|
|
<link rel="stylesheet" href="/public/css/mstream-player.css">
|
|
|
|
<script src="/public/js/modernizr.js"></script>
|
|
<script src="/public/js/lib/jquery-2.2.4.min.js"></script>
|
|
<script type="text/javascript" src="/public/js/lib/cookie.js"></script>
|
|
|
|
<!-- iziToast -->
|
|
<script src="/public/js/lib/izi-toast.min.js"></script>
|
|
<link rel="stylesheet" href="/public/css/izi-toast.min.css">
|
|
|
|
<!-- Vue JS -->
|
|
<script src="/public/js/lib/vue.min.js"></script>
|
|
<!-- Sortable JS -->
|
|
<script src="/public/js/lib/sortable.js"></script>
|
|
<!-- https://github.com/SortableJS/Vue.Draggable - v2.14.1 -->
|
|
<script src="/public/js/lib/vue-sortable.js"></script>
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
|
|
<!--
|
|
This is the mStream Player stack
|
|
DO NOT Change to order these are loaded in -->
|
|
<script src="/public/js/lib/howler.core.js"></script>
|
|
<script src="/public/js/mstream.player.js"></script>
|
|
|
|
<!-- These must be loaded after the player -->
|
|
<!-- They add functions onto the MSTREAM object -->
|
|
<script src="/public/js/api2.js"></script>
|
|
<script type="text/javascript" src="/public/js/mstream.js"></script>
|
|
<script src="/public/js/mstream.jukebox.js"></script>
|
|
|
|
<!-- Star Rating System -->
|
|
<script src="/public/js/lib/star.js"></script>
|
|
<script src="/public/js/lib/popper.js"></script>
|
|
|
|
<script src="/public/js/lib/lodash.js"></script>
|
|
<script src="/public/js/lib/butterchurn.min.js"></script>
|
|
<script src="/public/js/lib/butterchurn-presets.min.js"></script>
|
|
<script src="/public/js/lib/butterchurn-presets-extra.js"></script>
|
|
|
|
<script src="/public/js/t.js"></script>
|
|
<script src="/public/js/lib/dropzone.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Login Overlay -->
|
|
<div id="login-overlay" class="login-overlay hide">
|
|
<div class="row">
|
|
<div class="large-3 medium-3 small-1 columns">
|
|
<p></p>
|
|
</div>
|
|
<div class="large-6 medium-6 small-10 columns">
|
|
<img class="login-icon" src="/public/img/mstream-icon.svg">
|
|
<form id="login-form" v-on:submit.prevent="submitCode($event)">
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input v-focus type="text" class="form-control" id="login-username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input required type="password" class="form-control" id="login-password">
|
|
</div>
|
|
<button id="login-submit" type="submit" class="btn btn-warning btn-lg" :disabled="pending === true ? true : false">Login</button>
|
|
</form>
|
|
</div>
|
|
<div class="large-3 medium-3 small-1 columns">
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Size Classes: [small medium large xlarge expand] -->
|
|
<!-- Save Playlist Modal -->
|
|
<div id="savePlaylist" class="reveal-modal small" data-reveal>
|
|
<h2>Save Playlist</h2>
|
|
<form id="save_playlist_form">
|
|
<input id="playlist_name" type="text" required placeholder="Enter your playlist name" pattern="[a-zA-Z0-9 _-]+">
|
|
<input id="save_playlist" type="submit" class="button small" value="Save Playlist">
|
|
</form>
|
|
<a id="close_save_playlist" class="close-reveal-modal">×</a>
|
|
</div>
|
|
|
|
<!-- Share Modal -->
|
|
<div id="sharePlaylist" class="reveal-modal medium" data-reveal>
|
|
<h2>Share Playlist</h2>
|
|
<form id="share_playlist_form">
|
|
<div class="row collapse">
|
|
<div class="small-6 large-6 columns">
|
|
<label>Experation Time</label>
|
|
<input id="share_time" value="14" class="form-control" type="text" pattern="[0-9]+">
|
|
<span class="share-time-post postfix radius">Days</span>
|
|
</div>
|
|
</div>
|
|
<input id="share_it" type="submit" class="button small" value="Share It!">
|
|
</form>
|
|
|
|
<textarea class="share-textarea" rows="8" cols="60" placeholder="Your URL will be put here" readonly="readonly"></textarea>
|
|
<a id="close_share_modal" class="close-reveal-modal">×</a>
|
|
</div>
|
|
|
|
|
|
<!-- Download iFrame -->
|
|
<form id="downform" action="download" target="frameframe" method="POST"></form>
|
|
<iframe id="downframe" src="" width="0" height="0" tabindex="-1" title="empty" class="hidden" hidden name="frameframe"></iframe>
|
|
|
|
|
|
<div class="off-canvas-wrap">
|
|
<div class="inner-wrap">
|
|
|
|
<!-- Top Nav Bar -->
|
|
<nav class="noselect tab-bar">
|
|
<section class="left-small">
|
|
<a class="left-off-canvas-toggle menu-icon" title="Toggle Sidebar">
|
|
<span></span>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="right tab-bar-section">
|
|
<h1 class="title">
|
|
<img src="/public/img/mstream-logo.png" class="logo" alt="MStream" width="181" height="auto">
|
|
</h1>
|
|
|
|
<div class="radio-group hide-for-small">
|
|
<div class="btnx-group ">
|
|
<button class="buttonx l-button get_file_explorer">Files</button>
|
|
<button class="buttonx get_all_playlists">Playlists</button>
|
|
<button class="buttonx get_all_artists">Artists</button>
|
|
<button class="buttonx get_all_albums">Albums</button>
|
|
<button class="buttonx r-button get_rated_songs" style="font-size: 16px;">★</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</nav>
|
|
|
|
<!-- Off Canvas Menu -->
|
|
<aside class="left-off-canvas-menu">
|
|
<ul class="off-canvas-list" id="playlist_list">
|
|
<li class="left-off-canvas-toggle get_file_explorer show-for-small-only" class="get_file_explorer" id="file_explorer">
|
|
<label>File Explorer</label>
|
|
</li>
|
|
<li class="left-off-canvas-toggle get_all_playlists show-for-small-only" id="all_playlists">
|
|
<label>Playlists</label>
|
|
</li>
|
|
<li class="left-off-canvas-toggle get_all_albums show-for-small-only" id="all_albums">
|
|
<label>Albums</label>
|
|
</li>
|
|
<li class="left-off-canvas-toggle get_all_artists show-for-small-only" id="all_artists">
|
|
<label>Artists</label>
|
|
</li>
|
|
<li class="left-off-canvas-toggle get_rated_songs show-for-small-only">
|
|
<label>Rated</label>
|
|
</li>
|
|
<li class="left-off-canvas-toggle" id="manage_database">
|
|
<label>Database</label>
|
|
</li>
|
|
<!-- <li class="left-off-canvas-toggle" id="search_database"><label>Search</label></li> -->
|
|
<li class="left-off-canvas-toggle" id="jukebox_mode">
|
|
<label>Jukebox</label>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="db-status-bar">
|
|
<p class="scan-status metadata-panel-text"></p>
|
|
<!-- DB Status -->
|
|
<p class="scan-status-files metadata-panel-text"></p>
|
|
<!-- Number of Files -->
|
|
</div>
|
|
|
|
<div id="metadata-panel">
|
|
<div class="album-art-left-container">
|
|
<img :src="albumArtPath" id="album-art" />
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<section class="main-section">
|
|
<!-- content goes in here -->
|
|
<div class="row ohidden">
|
|
|
|
<!-- Overlay with metadata -->
|
|
<div id="main-overlay" class="hide main-overlay">
|
|
<div class="hide" id="presetControls">
|
|
<div>Preset: <select id="presetSelect"></select></div>
|
|
</div>
|
|
<canvas id="viz-canvas">
|
|
</canvas>
|
|
</div>
|
|
|
|
|
|
<!-- Tabs for Mobile -->
|
|
<dl class="tabs show-for-small-only" data-tab>
|
|
<dd class="active">
|
|
<a class="panel_one_name" href="#panel1">Library</a>
|
|
</dd>
|
|
<dd>
|
|
<a href="#panel2">Now Playing</a>
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
<div class="tabs-content">
|
|
|
|
<div class="content active" id="panel1">
|
|
<div id="libraryColumn" class="large-12 columns libraryColumn">
|
|
<div class="columnHeader">
|
|
|
|
<div class="libraryHeaderContainer">
|
|
<div class="large-12 medium-12 small-12 columns noPaddingLeft">
|
|
<h3 class="panel_one_name noselect hide-for-small"> </h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- /libraryHeaderContainer -->
|
|
<div class="clear flatline"></div>
|
|
|
|
<div id="directory_bar" class="clear directoryTitle">
|
|
<button class="backButton noselect tiny">
|
|
<img src="/public/img/glyphicons/png/glyphicons_435_undo.png" alt="Back" width="15" height="15">
|
|
</button>
|
|
<h4 class="directoryName"></h4>
|
|
<!-- Current Directory -->
|
|
<input id="search_folders" class="hide">
|
|
<a title="Search" id="search-explorer" class="noselect hover-fill">
|
|
<img src="/public/img/glyphicons/search.png" alt="" width="27" height="27">
|
|
</a>
|
|
<div class="controls leftControls">
|
|
<a title="Add Directory to Playlist" class="noselect add" id='addall'>
|
|
<img src="/public/img/glyphicons/png/glyphicons_131_inbox_plus.png" alt="" width="27" height="27">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Upload progress bar-->
|
|
<div class="upload-progress-bar">
|
|
<div style="width:0%" class="upload-progress-inner"></div>
|
|
</div>
|
|
|
|
<div class='clear col scroll noselect' id='filelist'>
|
|
<div class="filez">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playlist -->
|
|
<div class="content" id="panel2">
|
|
<div class="large-12 columns playlistColumn" id="playlist_container">
|
|
<div class="columnHeader noselect">
|
|
<div class="large-6 medium-6 small-12 columns noPaddingLeft">
|
|
<h3 class="hide-for-small">Now Playing</h3>
|
|
</div>
|
|
<div class="large-6 medium-6 small-12 columns">
|
|
<div class="controls rightControls">
|
|
<a title="Save Playlist" class="save" data-reveal-id="savePlaylist">
|
|
<img src="/public/img/glyphicons/png/glyphicons_443_floppy_disk.png" alt="" width="27" height="27">
|
|
</a>
|
|
<a title="Share Playlist" id="share-button" data-reveal-id="sharePlaylist">
|
|
<img src="/public/img/share-black.svg">
|
|
</a>
|
|
<a title="Download Playlist" class="downloadPlaylist" id="downloadPlaylist">
|
|
<img src="/public/img/glyphicons/png/glyphicons_181_download_alt.png" width="27" height="27">
|
|
</a>
|
|
<a title="Clear Playlist" id='clear'>
|
|
<img src="/public/img/glyphicons/png/glyphicons_192_circle_remove.png" alt="" width="27" height="27">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clear flatline"></div>
|
|
|
|
<!-- This section is tied into the MSTREAMPLAYER module with Vue -->
|
|
<!-- see file: mstream.vue-player-controls.js -->
|
|
<div class="clear col scroll scrollBoxHeight3">
|
|
<draggable :list="playlist" :options="{handle:'.drag-handle'}" @end="checkMove" id="playlist">
|
|
<div v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :song="song">
|
|
</div>
|
|
|
|
<div style="visibility:hidden;" class="pop-c" id="pop" role="tooltip">
|
|
<div class="my-rating pop-c"></div>
|
|
</div>
|
|
<div style="visibility:hidden;" class="pop-d" id="pop-d" role="tooltip">
|
|
<div class="pop-d pop-playlist">Add To Playlist:</div>
|
|
<div v-for="(playlist, index) in playlists" is="popper-playlist-item" :key="index" :index="index" :playlist="playlist"></div>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
|
|
<div id="meta-box" class="meta-box">
|
|
<div class="player-spacer"></div>
|
|
|
|
<div class="meta-spacer"></div>
|
|
<div class="meta-album-art noselect">
|
|
<img :src="albumArtPath" />
|
|
</div>
|
|
<div class="meta-info">
|
|
<p v-cloak class="metadata-panel-text">Title: {{ (meta.title) ? meta.title : '' }}</p>
|
|
<p v-cloak class="metadata-panel-text">Artist: {{ (meta.artist) ? meta.artist : '' }}</p>
|
|
<p v-cloak class="metadata-panel-text">Album: {{ (meta.album) ? meta.album : '' }}</p>
|
|
<p v-cloak class="metadata-panel-text">Year: {{ (meta.year) ? meta.year : '' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /row -->
|
|
|
|
|
|
<!-- Media Player
|
|
This section is tied into the MSTREAMPLAYER module with Vue
|
|
see file: mstream.vue-player-controls.js -->
|
|
<div id="mstream-player" class="mstream-player noselect">
|
|
<div class="player-spacer"></div>
|
|
<div class="player-spacer"></div>
|
|
|
|
<div class="player-ticker-layer">
|
|
<div id="progress-bar" class="progress-bar">
|
|
<div class="titlebar">
|
|
<div v-cloak id="title-text" class="title-text">{{currentSongText}}</div>
|
|
<div v-cloak class="duration-text">{{showTime}}</div>
|
|
</div>
|
|
<div class="pbar" :style="widthcss"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-spacer"></div>
|
|
|
|
<div class="player-button-layer">
|
|
<div id="previous-button" class="previous-button">
|
|
<img class="noselect previous-image center" src="/public/img/previous-white.svg" title="Previous">
|
|
</div>
|
|
|
|
<div id="play-pause-button" class="play-pause-button">
|
|
<img id="play-pause-image" class="noselect play-pause-image center" :src="imgsrc" title="Pause/Play">
|
|
</div>
|
|
|
|
<div id="next-button" class="next-button">
|
|
<img class="center noselect" src="/public/img/next-white.svg" title="Next">
|
|
</div>
|
|
|
|
<div id="player-overlay-button" class="player-overlay-button">
|
|
<span title="Butterchurn Visualizer">
|
|
<svg v-bind:class="{ 'aux-button-active': isViz }" style="cursor:pointer;" v-on:click="fadeOverlay" class="center" height="36" width="36" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M82.405 313.596c0 5.449-4.347 9.76-9.212 9.76H20.751c-5.419 0-9.736-4.311-9.736-9.76v-21.054c0-5.409 4.317-9.761 9.736-9.761h52.442c4.865 0 9.212 4.352 9.212 9.761v21.054zm0 49.759c0 5.411-4.347 9.763-9.212 9.763H20.751c-5.419 0-9.736-4.352-9.736-9.763v-21.05c0-5.459 4.317-9.76 9.736-9.76h52.442c4.865 0 9.212 4.301 9.212 9.76v21.05zm0 49.765c0 5.408-4.347 9.763-9.212 9.763H20.751c-5.419 0-9.736-4.354-9.736-9.763v-21.103c0-5.41 4.317-9.712 9.736-9.712h52.442c4.865 0 9.212 4.302 9.212 9.712v21.103zm164.946 0a9.726 9.726 0 0 1-9.751 9.763h-51.903a9.72 9.72 0 0 1-9.746-9.763v-21.103c0-5.41 4.327-9.712 9.746-9.712H237.6c5.419 0 9.751 4.302 9.751 9.712v21.103zm0-99.524c0 5.449-4.333 9.76-9.751 9.76h-51.903c-5.419 0-9.746-4.311-9.746-9.76v-21.054a9.719 9.719 0 0 1 9.746-9.761H237.6a9.723 9.723 0 0 1 9.751 9.761v21.054zm0-49.711c0 5.399-4.333 9.71-9.751 9.71h-51.903c-5.419 0-9.746-4.311-9.746-9.71v-21.104a9.718 9.718 0 0 1 9.746-9.761H237.6a9.722 9.722 0 0 1 9.751 9.761v21.104zm0-49.762c0 4.874-4.333 9.711-9.751 9.711h-51.903c-5.419 0-9.746-4.837-9.746-9.711v-21.628c0-4.885 4.327-9.186 9.746-9.186H237.6c5.419 0 9.751 4.301 9.751 9.186v21.628zm82.185 49.762c0 5.399-4.299 9.71-9.186 9.71h-52.451c-5.408 0-9.751-4.311-9.751-9.71v-21.104a9.73 9.73 0 0 1 9.751-9.761h52.451c4.887 0 9.186 4.351 9.186 9.761v21.104zm0 49.711c0 5.449-4.299 9.76-9.186 9.76h-52.451a9.704 9.704 0 0 1-9.751-9.76v-21.054a9.73 9.73 0 0 1 9.751-9.761h52.451c4.887 0 9.186 4.352 9.186 9.761v21.054zm0 49.759c0 5.411-4.299 9.763-9.186 9.763h-52.451a9.73 9.73 0 0 1-9.751-9.763v-21.05a9.698 9.698 0 0 1 9.751-9.76h52.451c4.887 0 9.186 4.301 9.186 9.76v21.05zm0 49.765c0 5.408-4.299 9.763-9.186 9.763h-52.451a9.732 9.732 0 0 1-9.751-9.763v-21.103c0-5.41 4.343-9.712 9.751-9.712h52.451c4.887 0 9.186 4.302 9.186 9.712v21.103zm82.752 0a9.72 9.72 0 0 1-9.761 9.763h-52.442c-4.852 0-9.185-4.354-9.185-9.763v-21.103c0-5.41 4.333-9.712 9.185-9.712h52.442c5.439 0 9.761 4.302 9.761 9.712v21.103zm0-49.765a9.719 9.719 0 0 1-9.761 9.763h-52.442c-4.852 0-9.185-4.352-9.185-9.763v-21.05c0-5.459 4.333-9.76 9.185-9.76h52.442c5.439 0 9.761 4.301 9.761 9.76v21.05zm0-49.759c0 5.449-4.321 9.76-9.761 9.76h-52.442c-4.852 0-9.185-4.311-9.185-9.76v-21.054c0-5.409 4.333-9.761 9.185-9.761h52.442a9.719 9.719 0 0 1 9.761 9.761v21.054zm88.698-196.278c0 5.408-4.333 9.187-9.743 9.187h-52.471c-4.855 0-9.188-3.778-9.188-9.187V95.691c0-4.876 4.332-9.227 9.188-9.227h52.471c5.41 0 9.743 4.351 9.743 9.227v21.627zm0 49.723a9.728 9.728 0 0 1-9.743 9.76h-52.471c-4.855 0-9.188-4.361-9.188-9.76v-21.629c0-4.834 4.332-9.187 9.188-9.187h52.471c5.41 0 9.743 4.353 9.743 9.187v21.629zm0 49.761c0 5.398-4.333 9.762-9.743 9.762h-52.471c-4.855 0-9.188-4.363-9.188-9.762V195.75c0-5.461 4.332-9.761 9.188-9.761h52.471c5.41 0 9.743 4.3 9.743 9.761v21.052zm0 49.761c0 5.401-4.333 9.712-9.743 9.712h-52.471c-4.855 0-9.188-4.311-9.188-9.712V245.46c0-5.408 4.332-9.71 9.188-9.71h52.471c5.41 0 9.743 4.302 9.743 9.71v21.103zm0 49.763c0 5.398-4.333 9.761-9.743 9.761h-52.471c-4.855 0-9.188-4.362-9.188-9.761v-21.104c0-5.409 4.332-9.711 9.188-9.711h52.471c5.41 0 9.743 4.302 9.743 9.711v21.104zm0 50.287c0 4.874-4.333 9.185-9.743 9.185h-52.471c-4.855 0-9.188-4.311-9.188-9.185v-21.628c0-5.41 4.332-9.765 9.188-9.765h52.471a9.724 9.724 0 0 1 9.743 9.765v21.628zm0 49.76c0 4.874-4.333 9.188-9.743 9.188h-52.471c-4.855 0-9.188-4.313-9.188-9.188v-21.625c0-5.41 4.332-9.189 9.188-9.189h52.471c5.41 0 9.743 3.779 9.743 9.189v21.625zm-335.845-53.018a9.728 9.728 0 0 1-9.746 9.763h-52.441c-5.419 0-9.211-4.352-9.211-9.763v-21.05c0-5.459 3.792-9.76 9.211-9.76h52.441c5.405 0 9.746 4.301 9.746 9.76v21.05zm0 49.765a9.73 9.73 0 0 1-9.746 9.763h-52.441c-5.419 0-9.211-4.354-9.211-9.763v-21.103c0-5.41 3.792-9.712 9.211-9.712h52.441c5.405 0 9.746 4.302 9.746 9.712v21.103zM82.405 263.885c0 5.399-4.347 9.71-9.212 9.71H20.751c-5.419 0-9.736-4.311-9.736-9.71v-21.104c0-5.41 4.317-9.761 9.736-9.761h52.442c4.865 0 9.212 4.351 9.212 9.761v21.104zm164.946 99.47a9.724 9.724 0 0 1-9.751 9.763h-51.903a9.72 9.72 0 0 1-9.746-9.763v-21.05c0-5.459 4.327-9.76 9.746-9.76H237.6c5.419 0 9.751 4.301 9.751 9.76v21.05z"/></svg>
|
|
</span>
|
|
</div>
|
|
|
|
<div v-on:click="toggleVolume" class="player-button">
|
|
<img class="noselect fill-white center" :src="volumeSrc" title="Mute/Unmute">
|
|
</div>
|
|
<div class="volume-bar">
|
|
<input v-model="curVol" class="volume-slider" type="range" max="100" value="0" step="1">
|
|
</div>
|
|
<div v-on:click="toggleRepeat" class="next-button" title="Repeat">
|
|
<!-- For precise control we have to have the svg code embedded in the html -->
|
|
<svg v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" class="repeat-button center" xmlns="http://www.w3.org/2000/svg"
|
|
version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25">
|
|
<path d="M 17 2 L 17 5 L 6 5 C 4.3 5 3 6.3 3 8 L 3 14.8125 L 5 13.1875 L 5 8 C 5 7.4 5.4 7 6 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 21 9.1875 L 19 10.8125 L 19 16 C 19 16.6 18.6 17 18 17 L 7 17 L 7 14 L 2 18 L 7 22 L 7 19 L 18 19 C 19.7 19 21 17.7 21 16 L 21 9.1875 z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div v-on:click="toggleShuffle" class="next-button" title="Shuffle">
|
|
<svg class="shuffle-button center" v-bind:class="{ 'aux-button-active': playerStats.shuffle }" xmlns="http://www.w3.org/2000/svg"
|
|
version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25">
|
|
<path d="M 17 2 L 17 5 L 14.1875 5 C 13.0875 5 12 5.5875 11.5 6.6875 L 6.59375 16.5 C 6.49375 16.8 6.1125 17 5.8125 17 L 2 17 L 2 19 L 5.8125 19 C 6.9125 19 8 18.4125 8.5 17.3125 L 13.40625 7.5 C 13.50625 7.2 13.8875 7 14.1875 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 2 5 L 2 7 L 5.8125 7 C 6.1125 7 6.4875 7.19375 6.6875 7.59375 L 8.40625 10.90625 L 9.5 8.6875 L 8.5 6.6875 C 7.9 5.5875 6.9125 5 5.8125 5 L 2 5 z M 11.59375 13.09375 L 10.5 15.3125 L 11.5 17.3125 C 12 18.3125 12.9875 19 14.1875 19 L 17 19 L 17 22 L 22 18 L 17 14 L 17 17 L 14.1875 17 C 13.8875 17 13.5125 16.80625 13.3125 16.40625 L 11.59375 13.09375 z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div v-on:click="toggleAutoDJ" class="next-button" title="Auto DJ">
|
|
<svg class="center" v-bind:class="{ 'aux-button-active': playerStats.autoDJ }" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" style="width:25px;webkit-logical-width:25px;webkit-logical-height:25px;user-select:none;transform-origin:12.5px 12.5px;stroke-width:1px;r:0px;perspective-origin:12.5px 12.5px;overflow-y:hidden;overflow-x:hidden;overflow:hidden;inline-size:25px;height:25px;display:block;d:none;block-size:25px;fill:rgb(255, 255, 255);background:rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box">
|
|
<style type="text/css" class="" style="user-select:none;stroke-width:1px">
|
|
path,
|
|
ellipse,
|
|
circle,
|
|
rect,
|
|
polygon,
|
|
polyline,
|
|
line {
|
|
stroke-width: 0;
|
|
}
|
|
|
|
text {
|
|
font-family: Arial
|
|
}
|
|
</style>
|
|
<g transform="translate(-0.9375 19.85)" class="" style="y:0px;user-select:none;transform:matrix(1, 0, 0, 1, -0.9375, 19.85);stroke-width:1px;perspective-origin:0px 0px;opacity:1">
|
|
<g class="ld " style="y:0px;x:0px;user-select:none;transform-origin:7.9375px 0px;transform:none;stroke-width:1px;size:;r:0px;perspective-origin:0px 0px;line-height:31.4286px;font-size:22px;font:normal normal 400 normal 22px / 31.4286px 'Varela Round', 'century gothic', verdana;direction:ltr;d:none">
|
|
<text class="" style="y:0px;white-space:nowrap;user-select:none;stroke-width:1px;r:0px;perspective-origin:7.9375px 0px;line-height:31.4286px;font-size:22px;font-family:Arial;font:normal normal 400 normal 22px / 31.4286px Arial;display:block">D</text>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(14.9375 19.85)" class="" style="y:0px;user-select:none;transform:matrix(1, 0, 0, 1, 14.9375, 19.85);stroke-width:1px;perspective-origin:0px 0px;opacity:1">
|
|
<g class="ld " style="y:0px;x:0px;user-select:none;transform-origin:5.5px 0px;transform:none;stroke-width:1px;size:;r:0px;perspective-origin:0px 0px;line-height:31.4286px;font-size:22px;font:normal normal 400 normal 22px / 31.4286px 'Varela Round', 'century gothic', verdana;direction:ltr;d:none">
|
|
<text class="" style="y:0px;white-space:nowrap;user-select:none;stroke-width:1px;r:0px;perspective-origin:5.5px 0px;line-height:31.4286px;font-size:22px;font-family:Arial;font:normal normal 400 normal 22px / 31.4286px Arial;display:block">J</text>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="player-button remote-button" title="Remote Play">
|
|
<svg v-bind:class="{ 'aux-button-active': jukebox.live }" width="24" height="24" viewBox="0 0 24 24">
|
|
<path d="M12,0C8.96,0 6.21,1.23 4.22,3.22L5.63,4.63C7.26,3 9.5,2 12,2C14.5,2 16.74,3 18.36,4.64L19.77,3.23C17.79,1.23 15.04,0 12,0M7.05,6.05L8.46,7.46C9.37,6.56 10.62,6 12,6C13.38,6 14.63,6.56 15.54,7.46L16.95,6.05C15.68,4.78 13.93,4 12,4C10.07,4 8.32,4.78 7.05,6.05M12,15A2,2 0 0,1 10,13A2,2 0 0,1 12,11A2,2 0 0,1 14,13A2,2 0 0,1 12,15M15,9H9A1,1 0 0,0 8,10V22A1,1 0 0,0 9,23H15A1,1 0 0,0 16,22V10A1,1 0 0,0 15,9Z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /6 columns -->
|
|
|
|
|
|
<!-- close the off-canvas menu -->
|
|
<a class="exit-off-canvas"></a>
|
|
|
|
<script src="/public/js/foundation.min.js"></script>
|
|
<script>
|
|
$(document).foundation();
|
|
</script>
|
|
|
|
<script type="text/javascript" src="/public/js/lib/lazy-load.js"></script>
|
|
<script>
|
|
// Lazy load all images in scroallable areas
|
|
var ll = new LazyLoad({
|
|
container: document.getElementById('filelist')
|
|
});
|
|
</script>
|
|
<script src="/public/js/mstream.vue-player-controls.js"></script>
|
|
</body>
|