MusareMeteor/app/client/templates/room.html

<template name="room">
    <header>
        <nav>
            <div class="nav-wrapper teal accent-4">
                <ul class="left hide-on-med-and-down">
                    <li><a href="/"><i class="material-icons">home</i></a></li>
                    <li><a href="#add_song_modal" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Request a song" id="add-song-modal-button"><i class="material-icons">playlist_add</i></a></li>
                    <li><a href="#report_modal" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Flag a song" id="report-modal-button"><i class="material-icons">flag</i></a></li>
                    <li><a id="vote-skip" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Vote to skip this song"><i class="material-icons left">skip_next</i>{{votes}}</a></li>
                    <li><a id="like" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Like this song"><i class="material-icons left" style="font-size: 1.5em">thumb_up</i>{{likes}}</a></li>
                    <li><a id="dislike" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Dislike this song"><i class="material-icons left" style="font-size: 1.5em">thumb_down</i>{{dislikes}}</a></li>
                    {{#if isAdmin}}
                        <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>
                <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>
                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Users" id="users-slideout" data-activates="users-slide-out" class="tooltipped header-collapse"><i class="material-icons">people</i></a></li>
                </ul>
            </div>
        </nav>
    </header>
    {{> alerts}}
    <main id="room-content">
        <div class="container room-container">
            <div class="row">
                <div class="col s12 m10 l8 offset-l2 offset-m1" id="media-container">
                    <div class="video-container">
                        <div id="player"></div>
                    </div>
                </div>
                <div class="col s12 m10 l8 offset-l2 offset-m1">
                    <div class="row">
                        <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 s4 m4 l2">
                                    <ul>
                                        <li id="like" class="left"><i id="thumbs_up"
                                                                      class="material-icons {{liked}}">thumb_up</i>
                                        </li>
                                        <li id="dislike" class="right"><i id="thumbs_down"
                                                                          class="material-icons {{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>
        </div>
    </main>
    <!--Chat slideout-->
    <div id="chat-slide-out" class="side-nav room-slideout">
        <h5>Chat</h5>
        <ul class="chat-ul">
            {{#each globalChat}}
                {{#emojione}}
                    <li class="chat-message" style="line-height: 30px">
                        <span title="{{time}}" style="float: right; margin-top: 15px">{{rtime time}}</span>
                        <small class="rank-{{this.rawrank}}" style="margin-top: 15px">{{this.rank}}</small>
                        <a style="text-decoration: none; font-size: 0.9em; height: 0.9em; font-weight: 500" href="/u/{{this.username}}" target="_blank">{{this.username}}</a>
                        <p style="clear: both; line-height: 1.2em; margin-left: 13px; margin-bottom: 0; font-size: 1.2em">{{this.message}}</p>
                    </li>
                {{/emojione}}
            {{/each}}
        </ul>
        <div>
            <div class="row">
                <div class="input-field col s12">
                  <input id="chat-message" type="text">
                  <label for="chat-message">Send a message</label>
                </div>
            </div>
            <a id="submit" class="waves-effect waves-light btn">Send</a>
        </div>
    </div>
    <!--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>
        <ul>
            {{#each usersInRoom}}
                <li><a href=/u/{{this}} target="_blank">{{this}}</a></li>
            {{/each}}
        </ul>
    </div>
    <!--Admin room controls-->
    <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">
        <li><a id="pause"><i class="material-icons">pause</i></a></li>
        <li><a id="skip"><i class="material-icons">skip_next</i></a></li>
        <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 container">
            <h4>Reporting:</h4>
            <h5>{{currentSong.title}} <span class="thin">by</span> {{currentSong.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">Report 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
        });
        $(".dropdown-button").dropdown({
            belowOrigin: true
        });
        $('select').material_select();
        $("#chat-slideout").sideNav({
            menuWidth: 350,
            edge: 'right'
        });
        $("#playlist-slideout").sideNav({
            menuWidth: 350,
            edge: 'right'
        });
        $("#users-slideout").sideNav({
            menuWidth: 350,
            edge: 'right'
        });
        $('.tooltipped').tooltip({delay: 50});
    </script>
</template>