|
@@ -11,7 +11,7 @@
|
|
|
<li><a class='dropdown-button' data-activates='admin-dropdown'><i class="material-icons">control_point</i></a></li>
|
|
|
{{/if}}
|
|
|
</ul>
|
|
|
- <span class="brand-logo center">{{type}}</span>
|
|
|
+ <span class="brand-logo center">{{privateRoomDisplayName}}</span>
|
|
|
<ul class="right hide-on-med-and-down">
|
|
|
<li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Playlist" id="playlist-slideout" data-activates="playlist-slide-out" class="tooltipped header-collapse"><i class="material-icons">queue_music</i></a></li>
|
|
|
<li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Chat" id="chat-slideout" data-activates="chat-slide-out" class="tooltipped header-collapse"><i class="material-icons">chat</i></a></li>
|
|
@@ -34,27 +34,17 @@
|
|
|
<div class="col s12 m12 l8">
|
|
|
<h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
|
|
|
<h3>{{{title}}}</h3>
|
|
|
- <h4 class="thin" style="margin-left: 0">{{{artist}}}</h4>
|
|
|
<div class="row">
|
|
|
<form action="#" class="left col s4 m4 l4">
|
|
|
<p class="range-field" style="margin-top: 0">
|
|
|
<input type="range" id="volume_slider" min="0" max="100"/>
|
|
|
</p>
|
|
|
</form>
|
|
|
- <div class="right col s8 m5 l5">
|
|
|
- <ul>
|
|
|
- <li id="like" class="right"><span class="flow-text">{{likes}} </span> <i id="thumbs_up" class="material-icons grey-text {{liked}}">thumb_up</i></li>
|
|
|
- <li style="margin-right: 10px;" id="dislike" class="right"><span class="flow-text">{{dislikes}} </span><i id="thumbs_down" class="material-icons grey-text {{disliked}}">thumb_down</i></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="seeker-bar-container white" id="preview-progress">
|
|
|
<div class="seeker-bar teal" style="width: 0%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <img alt="Not loading" class="responsive-img song-img col s12 m12 l4"
|
|
|
- onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
|
|
|
- id="song-img" style="margin-top: 10px !important"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -88,7 +78,7 @@
|
|
|
<!--Playlist slideout-->
|
|
|
<div id="playlist-slide-out" class="side-nav room-slideout">
|
|
|
<h5>Playlist</h5>
|
|
|
- {{> playlist}}
|
|
|
+
|
|
|
</div>
|
|
|
<div id="users-slide-out" class="side-nav room-slideout">
|
|
|
<h5>Users In Room</h5>
|
|
@@ -105,407 +95,7 @@
|
|
|
<li><a id="shuffle"><i class="material-icons">shuffle</i></a></li>
|
|
|
<li><a id="lock"><i class="material-icons">lock_outline</i></a></li>
|
|
|
</ul>
|
|
|
- <!--Add song modal-->
|
|
|
- <div id="add_song_modal" class="modal">
|
|
|
- <div class="modal-content container">
|
|
|
- <div class="row">
|
|
|
- <form class="black-text" id="search-info">
|
|
|
- <div class="row">
|
|
|
- <div class="input-field">
|
|
|
- <select id="si_or_pl">
|
|
|
- <option value="singleVideo" selected>Single Song</option>
|
|
|
- <option value="importPlaylist">Import Playlist</option>
|
|
|
- <label>Import Type</label>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {{#if singleVideo}}
|
|
|
- {{#if editingSong}}
|
|
|
- <div class="row">
|
|
|
- <button type="button" id="return-button" style="margin-bottom: 20px;"
|
|
|
- class="btn btn-small col l4 m4 s8 offset-l4 offset-m4 offset-s2 center waves-effect waves-light">
|
|
|
- Return
|
|
|
- </button>
|
|
|
- <h4 class="center-align col l12 m12 s12">Add Song</h4>
|
|
|
- <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
|
|
|
- <select multiple id="genres">
|
|
|
- <option value="" disabled selected>Select Genre(s):</option>
|
|
|
- <option value="edm">EDM</option>
|
|
|
- <option value="chill">Chill</option>
|
|
|
- <option value="pop">Pop</option>
|
|
|
- <option value="country">Country</option>
|
|
|
- <option value="rock">Rock</option>
|
|
|
- <option value="randb">R&B</option>
|
|
|
- <option value="rap">Rap</option>
|
|
|
- <option value="heavymetal">Heavy Metal</option>
|
|
|
- <option value="christmas">Christmas</option>
|
|
|
- <option value="alternative">Alternative</option>
|
|
|
- </select>
|
|
|
- <label class="white-text">Genre(s)</label>
|
|
|
- </div>
|
|
|
- <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
|
|
|
- <i class="material-icons prefix">vpn_key</i>
|
|
|
- <label for="id" class="teal-text">Song ID</label>
|
|
|
- <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
|
|
|
- </div>
|
|
|
- <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
|
|
|
- <i class="material-icons prefix">person</i>
|
|
|
- <label for="artist" class="teal-text">Song Artist</label>
|
|
|
- <input class="validate" name="artist" id="artist" aria-required="true"
|
|
|
- type="text"/>
|
|
|
- </div>
|
|
|
- <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
|
|
|
- <i class="material-icons prefix">subject</i>
|
|
|
- <label for="title" class="teal-text">Song Title</label>
|
|
|
- <input class="validate required" name="title" id="title" type="text"/>
|
|
|
- </div>
|
|
|
- <button type="button" id="add-song-button"
|
|
|
- class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">
|
|
|
- Add Song
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <script>
|
|
|
- $('#genres').material_select();
|
|
|
- </script>
|
|
|
- {{else}}
|
|
|
- <div class="row" id="single-video">
|
|
|
- <div class="input-field">
|
|
|
- <input id="song-input" type="text" class="validate">
|
|
|
- <label for="search_for_song">Search for song</label>
|
|
|
- </div>
|
|
|
- <a class="waves-effect waves-light btn" id="search-song"><i
|
|
|
- class="material-icons left">search</i>Search</a>
|
|
|
- {{#if singleVideoResultsActive}}
|
|
|
- <div id="single-video-results">
|
|
|
- <div style="overflow: auto; height: 30vh; margin-top: 1rem;">
|
|
|
- <ul class="collection teal-text">
|
|
|
- {{#each result in singleVideoResults}}
|
|
|
- <li class="collection-item avatar youtube-search-result-li">
|
|
|
- <img src="{{result.image}}"
|
|
|
- onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
|
|
|
- alt="" class="video-import-thumbnail">
|
|
|
- <span class="title video-import-text">{{result.title}}</span>
|
|
|
- <p class="video-import-text">{{result.artist}} <br>
|
|
|
- <a href="https://youtube.com/watch?v={{result.id}}"
|
|
|
- target="_blank">View Video In YouTube</a>
|
|
|
- </p>
|
|
|
- <a href="#" class="secondary-content" id="addSong"
|
|
|
- data-result="{{result.id}}"><i class="material-icons"
|
|
|
- data-result="{{result.id}}">add</i></a>
|
|
|
- </li>
|
|
|
- {{/each}}
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- {{else}}
|
|
|
- <div class="row" id="import-playlist">
|
|
|
- <div class="input-field">
|
|
|
- <input id="playlist-url" type="text" class="validate">
|
|
|
- <label for="search_for_song">Playlist URL</label>
|
|
|
- </div>
|
|
|
- <div class="progress">
|
|
|
- <div class="determinate" id="import-progress" style="width: 0%"></div>
|
|
|
- </div>
|
|
|
- <a class="waves-effect waves-light btn" id="import-playlist-button">Import
|
|
|
- Playlist</a>
|
|
|
- {{#if playlistImportVideosActive}}
|
|
|
- <a class="waves-effect waves-light btn" id="confirm-import">Confirm selection
|
|
|
- and add songs to queue</a>
|
|
|
- <div class="input-field col l12 m12 s12">
|
|
|
- <select multiple id="genres_pl">
|
|
|
- <option value="" disabled selected>Select Genre(s):</option>
|
|
|
- <option value="edm">EDM</option>
|
|
|
- <option value="chill">Chill</option>
|
|
|
- <option value="pop">Pop</option>
|
|
|
- <option value="country">Country</option>
|
|
|
- <option value="rock">Rock</option>
|
|
|
- <option value="randb">R&B</option>
|
|
|
- <option value="rap">Rap</option>
|
|
|
- <option value="heavymetal">Heavy Metal</option>
|
|
|
- <option value="christmas">Christmas</option>
|
|
|
- <option value="alternative">Alternative</option>
|
|
|
- </select>
|
|
|
- <label class="white-text">Genre(s)</label>
|
|
|
- </div>
|
|
|
- <script>
|
|
|
- $('#genres_pl').material_select();
|
|
|
- </script>
|
|
|
- <div id="import-playlist-results">
|
|
|
- <ul class="collection teal-text">
|
|
|
- {{#each result in importPlaylistVideos}}
|
|
|
- <li class="collection-item avatar youtube-search-result-li">
|
|
|
- <img src="{{result.image}}"
|
|
|
- onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
|
|
|
- alt="" class="video-import-thumbnail">
|
|
|
- <span class="title video-import-text">{{result.title}}</span>
|
|
|
- <p class="video-import-text">{{result.artist}} <br>
|
|
|
- <a href="https://youtube.com/watch?v={{result.id}}"
|
|
|
- target="_blank">View Video In YouTube</a>
|
|
|
- </p>
|
|
|
- <a href="#" class="secondary-content" id="removeSong"
|
|
|
- data-result="{{result.id}}"><i class="material-icons"
|
|
|
- data-result="{{result.id}}">remove</i></a>
|
|
|
- </li>
|
|
|
- {{/each}}
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </form>
|
|
|
- <div id="song-results"></div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <form class="black-text hide" id="add-info">
|
|
|
- <div class="row">
|
|
|
- <div class="input-field">
|
|
|
- <input id="song-id" type="text" class="validate">
|
|
|
- <label for="song-id">Song ID</label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <a class="waves-effect waves-light btn" id="add-song-button"><i
|
|
|
- class="material-icons left">playlist_add</i>Request Song</a>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="divider"></div>
|
|
|
- <div class="modal-footer">
|
|
|
- <a href="#" class="modal-action modal-close waves-effect btn">Close</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--Report modal-->
|
|
|
- <div id="report_modal" class="modal">
|
|
|
- <div class="modal-content">
|
|
|
- <h4>Reporting:</h4>
|
|
|
- <h5 id="report-which">{{reportingSong.title}} <span class="thin">by</span> {{reportingSong.artist}}</h5>
|
|
|
- <div class="report-layer-1">
|
|
|
- <div>
|
|
|
- <input type="checkbox" id="report-song">
|
|
|
- <label for="report-song">
|
|
|
- Song
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <!-- Layer2 -->
|
|
|
- {{#if reportSong}}
|
|
|
- <div class="report-layer-2" id="report-song-list">
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-song-not-playing">
|
|
|
- <label for="report-song-not-playing">
|
|
|
- Not playing
|
|
|
- </label>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-song-does-not-exist">
|
|
|
- <label for="report-song-does-not-exist">
|
|
|
- Does not exist
|
|
|
- </label>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-song-other">
|
|
|
- <label for="report-song-other">
|
|
|
- Other:
|
|
|
- </label>
|
|
|
- {{#if reportSongOther}}
|
|
|
- <div class="input-field">
|
|
|
- <textarea class="materialize-textarea" id="report-song-other-ta" type="text"></textarea>
|
|
|
- <label for="report-song-other-ta">What is the issue?</label>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-title">
|
|
|
- <label for="report-title">
|
|
|
- Title
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <!-- Layer2 -->
|
|
|
- {{#if reportTitle}}
|
|
|
- <div class="report-layer-2" id="report-title-list">
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-title-incorrect">
|
|
|
- <label for="report-title-incorrect">
|
|
|
- Incorrect
|
|
|
- </label>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-title-inappropriate">
|
|
|
- <label for="report-title-inappropriate">
|
|
|
- Inappropriate
|
|
|
- </label>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-title-other">
|
|
|
- <label for="report-title-other">
|
|
|
- Other:
|
|
|
- </label>
|
|
|
- {{#if reportTitleOther}}
|
|
|
- <div class="input-field">
|
|
|
- <textarea class="materialize-textarea" id="report-title-other-ta" type="text"></textarea>
|
|
|
- <label for="report-title-other-ta">What is the issue?</label>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- <div>
|
|
|
- <input type="checkbox" id="report-artist">
|
|
|
- <label for="report-artist">
|
|
|
- Artist
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <!-- Layer2 -->
|
|
|
- {{#if reportArtist}}
|
|
|
- <div class="report-layer-2" id="report-artist-list">
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-artist-incorrect">
|
|
|
- <label for="report-artist-incorrect">
|
|
|
- Incorrect
|
|
|
- </label>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-artist-inappropriate">
|
|
|
- <label for="report-artist-inappropriate">
|
|
|
- Inappropriate
|
|
|
- </label>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <input type="checkbox" id="report-artist-other">
|
|
|
- <label for="report-artist-other">
|
|
|
- Other:
|
|
|
- </label>
|
|
|
- {{#if reportArtistOther}}
|
|
|
- <div class="input-field">
|
|
|
- <textarea class="materialize-textarea" id="report-artist-other-ta" type="text"></textarea>
|
|
|
- <label for="report-artist-other-ta">What is the issue?</label>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-duration">
|
|
|
- <label for="report-duration">
|
|
|
- Duration
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <!-- Layer2 -->
|
|
|
- {{#if reportDuration}}
|
|
|
- <div class="report-layer-2" id="report-duration-list">
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-duration-long">
|
|
|
- <label for="report-duration-long">
|
|
|
- Too long
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-duration-short">
|
|
|
- <label for="report-duration-short">
|
|
|
- Too short
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-duration-other">
|
|
|
- <label for="report-duration-other">
|
|
|
- Other: <br>
|
|
|
- </label>
|
|
|
- {{#if reportDurationOther}}
|
|
|
- <div class="input-field">
|
|
|
- <textarea class="materialize-textarea" id="report-duration-other-ta" type="text"></textarea>
|
|
|
- <label for="report-duration-other-ta">What is the issue?</label>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-albumart">
|
|
|
- <label for="report-albumart">
|
|
|
- Albumart
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <!-- Layer2 -->
|
|
|
- {{#if reportAlbumart}}
|
|
|
- <div class="report-layer-2" id="report-albumart-list">
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-albumart-incorrect">
|
|
|
- <label for="report-albumart-incorrect">
|
|
|
- Incorrect
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-albumart-inappropriate">
|
|
|
- <label for="report-albumart-inappropriate">
|
|
|
- Inappropriate
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-albumart-not-showing">
|
|
|
- <label for="report-albumart-not-showing">
|
|
|
- Not showing
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-albumart-other">
|
|
|
- <label for="report-albumart-other">
|
|
|
- Other:
|
|
|
- </label>
|
|
|
- {{#if reportAlbumartOther}}
|
|
|
- <div class="input-field">
|
|
|
- <textarea class="materialize-textarea" id="report-albumart-other-ta" type="text"></textarea>
|
|
|
- <label for="report-albumart-other-ta">What is the issue?</label>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- <div class="checkbox">
|
|
|
- <input type="checkbox" id="report-other">
|
|
|
- <label for="report-other">
|
|
|
- Other: <br>
|
|
|
- </label>
|
|
|
- {{#if reportOther}}
|
|
|
- <div class="input-field">
|
|
|
- <textarea class="materialize-textarea" id="report-other-ta" type="text"></textarea>
|
|
|
- <label for="report-other-ta">What is the issue?</label>
|
|
|
- </div>
|
|
|
- {{/if}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <a id="report-song-button" class="waves-effect waves-light btn btn-block red">Submit Song Report</a>
|
|
|
- {{#if previousSongR}}
|
|
|
- <a id="report-prev" class="waves-effect waves-light btn btn-block">Report Previous Song</a>
|
|
|
- {{/if}}
|
|
|
- <a id="report-curr" class="waves-effect waves-light btn btn-block">Report Current Song</a>
|
|
|
- </div>
|
|
|
- <div class="divider"></div>
|
|
|
- <div class="modal-footer">
|
|
|
- <a class="modal-action modal-close waves-effect btn">Close</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<script>
|
|
|
- $("#add-song-modal-button").leanModal({
|
|
|
- dismissible: true,
|
|
|
- opacity: .5,
|
|
|
- in_duration: 500,
|
|
|
- out_duration: 200
|
|
|
- });
|
|
|
- $("#report-modal-button").leanModal({
|
|
|
- dismissible: true,
|
|
|
- opacity: .5,
|
|
|
- in_duration: 500,
|
|
|
- out_duration: 200,
|
|
|
- ready: function() {
|
|
|
- Session.set("currentSongR", Session.get("currentSong"));
|
|
|
- Session.set("previousSongR", Session.get("previousSong"));
|
|
|
- }
|
|
|
- });
|
|
|
$(".dropdown-button").dropdown({
|
|
|
belowOrigin: true
|
|
|
});
|