MusareMeteor/app/client/templates/privateRoom.html

<template name="privateRoom">
    <header>
        <nav>
            <div class="nav-wrapper light-blue accent-4">
                <ul class="left hide-on-med-and-down">
                    <li><a href="/"><i class="material-icons">home</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>
                    {{#if isPrivateRoomOwner name}}
                        <li><a class='dropdown-button' data-activates='control-dropdown'><i class="material-icons">control_point</i></a></li>
                    {{/if}}
                </ul>
                <span class="brand-logo center">{{privateRoomDisplayName}} <small>(by {{privateRoomOwnerName}})</small></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>
                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Allowed" id="allowed-slideout" data-activates="allowed-slide-out" class="tooltipped header-collapse"><i class="material-icons">assignment</i></a></li>
                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Playlists" id="playlists-slideout" data-activates="playlists-slide-out" class="tooltipped header-collapse"><i class="material-icons">library_music</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">
                  <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
                  <h3>{{{title}}}</h3>
                  <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>
                  <div class="seeker-bar-container white" id="preview-progress">
                      <div class="seeker-bar light-blue" style="width: 0%"></div>
                  </div>
                </div>
            </div>
        </div>
    </main>
    <!--Chat slideout-->
    <div id="chat-slide-out" class="side-nav room-slideout">
        <h5>Chat</h5>
        <ul class="list-ul 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>
                        <a style="text-decoration: none; font-size: 0.9em; height: 0.9em; font-weight: 500" href="/u/{{this.username}}" target="_blank"><span class="rank-{{this.rawrank}}">{{this.rank}}</span>{{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}}
                <div class="divider" style="margin-top: 15px;"></div>
            {{/each}}
        </ul>
        <div>
            <div class="row" id="chat-input-div">
                <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>

    </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>

    <div id="allowed-slide-out" class="side-nav room-slideout">
        <h5>Allowed</h5>
        <ul class="list-ul" id="allowed-ul">
            {{#each allowed}}
                <li>
                    <a href=/u/{{this.name}} target="_blank">
                        {{this.name}}
                        {{#if isPrivateRoomOwner name}}
                            <a href="#" class="right remove-allowed" data-user={{this.id}}>
                                <i class="material-icons" style="line-height: 64px;">remove</i>
                            </a>
                        {{/if}}
                    </a>
                </li>
            {{/each}}
        </ul>
        {{#if isPrivateRoomOwner name}}
        <div>
            <div class="row" id="chat-input-div">
                <div class="input-field col s12">
                    <input id="add-allowed" type="text">
                    <label for="add-allowed">Add user</label>
                </div>
            </div>
            <a id="add-allowed-submit" class="waves-effect waves-light btn">Add</a>
        </div>
        {{/if}}
    </div>

    <div id="playlists-slide-out" class="side-nav room-slideout">
        <h5>Playlists</h5>
        <ul class="list-ul" id="playlists-ul">
            {{#each playlists}}
                <li>
                    <a href="#edit_playlist_modal" class="edit-playlist-button" data-playlist={{this.name}}>
                        {{this.displayName}}
                        <a href="#" class="right select-playlist" data-playlist={{this.name}}>
                            {{#if isPrivateRoomOwner name}}
                                {{#if isPlaylistSelected name this.name}}
                                    <i class="material-icons" style="line-height: 64px;">check_circle</i>
                                {{else}}
                                    <i class="material-icons" data-playlist={{this.name}} style="line-height: 64px;" title="Select playlist">panorama_fish_eye</i>
                                {{/if}}
                            {{/if}}
                        </a>
                    </a>
                </li>
            {{/each}}
        </ul>
        <div>
            <a id="add-playlist-modal-button" class="waves-effect waves-light btn" href="#create_playlist_modal">Create Playlist</a>
        </div>
    </div>

    <!--room controls-->
    <ul id='control-dropdown' style="background-color: rgb(3, 169, 244) !important; display: none">
        {{#if playing}}
            <li><a id="pause"><i class="material-icons">pause</i></a></li>
        {{else}}
            <li><a id="play"><i class="material-icons">play_arrow</i></a></li>
        {{/if}}
        <li><a id="skip"><i class="material-icons">skip_next</i></a></li>
        {{#if private}}
            <li><a id="unlock"><i class="material-icons">lock_outline</i></a></li>
        {{else}}
            <li><a id="lock"><i class="material-icons">lock_open</i></a></li>
        {{/if}}
    </ul>


    <!-- Edit Playlist Modal -->
    <div id="edit_playlist_modal" class="modal">
        <div class="modal-content">
            <h4>Editing: {{editingPlaylist.name}}</h4>
            {{#each song in editingPlaylist.songs}}
                <a href="https://youtube.com/watch?v={{song.id}}" target="_blank">{{song.title}}</a> <span class="red-text remove_playlist_button" data-id={{song.id}} style="cursor: pointer">remove</span><br>
            {{/each}}
            <div class="input-field">
                <input id="add_playlist_video" type="text">
                <label for="add_playlist_video">Video ID</label>
            </div>
            <button class="btn waves-effect waves-light" id="add_playlist_video_submit">Add video</button>
            <button class="btn waves-effect waves-light right red" id="delete_playlist">Delete playlist</button>
        </div>
        <div class="divider"></div>
        <div class="modal-footer">
            <a class="modal-action modal-close waves-effect btn">Close</a>
        </div>
    </div>
    <!-- Create Playlist Modal -->
    <div id="create_playlist_modal" class="modal">
        <div class="modal-content">
            <h4>Create Modal</h4>
            <div class="input-field">
                <input id="create_playlist_name" type="text">
                <label for="create_playlist_name">Name</label>
            </div>
            <div class="input-field">
                <input id="create_playlist_display_name" type="text">
                <label for="create_playlist_display_name">Display Name</label>
            </div>
            <button class="btn waves-effect waves-light" id="create_playlist_submit">Create</button>
        </div>
        <div class="divider"></div>
        <div class="modal-footer">
            <a class="modal-action modal-close waves-effect btn">Close</a>
        </div>
    </div>
    <script>
        $(".edit-playlist-button").leanModal({
            dismissible: true,
            opacity: .5,
            in_duration: 500,
            out_duration: 200
        });
        $("#add-playlist-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'
        });

        $("#allowed-slideout").sideNav({
            menuWidth: 350,
            edge: 'right'
        });
        $("#playlists-slideout").sideNav({
            menuWidth: 350,
            edge: 'right'
        });
        $('.tooltipped').tooltip({delay: 50});
    </script>
</template>