MusareMeteor/app/client/templates/communityStation.html

<template name="communityStation">
    <header>
        <nav>
            <div class="nav-wrapper light-blue accent-4">
                <ul class="left hide-on-med-and-down">
                    <li><a style="margin-left: 0px; padding-left: 20px; padding-right: 20px;" href="/"
                           class="brand-logo">Musare</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 isCommunityStationOwner name}}
                        <li style="margin-left: 144px;" class={{pausedHidden}}><a id="pause" data-position="bottom" data-delay="50" data-tooltip="Pause this room" data-activates="chat-slide-out" class="tooltipped"><i class="material-icons">pause</i></a></li>
                        <li style="margin-left: 144px;" class={{playingHidden}}><a id="play" data-position="bottom" data-delay="50" data-tooltip="Play this room" data-activates="chat-slide-out" class="tooltipped"><i class="material-icons">play_arrow</i></a></li>
                        <li><a id="skip" data-position="bottom" data-delay="50" data-tooltip="Skip this song"
                               data-activates="chat-slide-out" class="tooltipped"><i
                                class="material-icons">skip_next</i></a></li>
                        <li><a id="edit_room" href="#edit_room_modal" data-position="bottom" data-delay="50"
                               data-tooltip="Edit this room" data-activates="chat-slide-out" class="tooltipped"><i
                                class="material-icons">settings</i></a></li>
                    {{/if}}
                </ul>
                <span class="brand-logo center">{{communityStationDisplayName}}
                    <small>(by {{communityStationOwnerName}})</small></span>
                <ul class="right hide-on-med-and-down">
                    <li class="{{partyModeEnabledHidden}}"><a href="#" data-position="bottom" data-delay="50" data-tooltip="Queue" id="playlist-slideout" data-activates="queue-slide-out" class="tooltipped header-collapse"><i class="material-icons">queue_music</i></a></li>
                    {{#if isLoggedIn}}
                        <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>
                    {{/if}}
                    {{#if isCommunityStationOwner name}}
                        <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>
                    {{/if}}
                </ul>
            </div>
        </nav>
    </header>
    {{> alerts}}
    <main id="room-content">
        <div class="container room-container">
            {{#if noCurrentSong}}
                <h1 class="center musare-text">There's currently no song playing.</h1>
            {{/if}}
            <div class="row {{noCurrentSongHidden}}">
                <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="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">
                    {{#if currentUser}}
                        <input id="chat-message" type="text">
                        <label for="chat-message">Send a message</label>
                    {{else}}
                        <input id="chat-message" class="disabled" disabled type="text">
                        <label for="chat-message">You have to be logged in to chat.</label>
                    {{/if}}
                </div>
            </div>
            {{#if currentUser}}
                <a id="submit" class="waves-effect waves-light btn">Send</a>
            {{else}}
                <a id="submit" class="waves-effect waves-light btn disabled" disabled>Send</a>
            {{/if}}
        </div>
    </div>
    <!--Playlist slideout-->
    <div id="queue-slide-out" class="side-nav room-slideout">
        <h5>Queue</h5>

        <ul id="queue-ul" style="max-height: calc(100% - 105px); overflow-y: auto; margin: 0;">
            {{#each song in queue}}
                <li class="queue-item" style="clear: both">
                    <a class="queue-item-remove" style="float:right; height: 0; width: 0;" href="#" data-id={{song.song.id}}><i class="material-icons" data-id={{song.song.id}}>clear</i></a>
                    <div class="queue-item-text">
                        <p class="queue-item-title">{{song.song.title}}</p>
                        <p class="queue-item-username">Added by <a style="display: inline-block; height: 10px; padding: 0; color: #039be5;" href="/profile/{{getUsernameFromId song.requestedBy}}">{{getUsernameFromId song.requestedBy}}</a></p>
                    </div>
                    <hr>
                </li>
            {{/each}}
        </ul>
        <a id="add-song-to-queue-button" class="waves-effect waves-light btn musare white-text" href="#add-song-to-queue">Add song to queue</a>
    </div>




    <div id="users-slide-out" class="side-nav room-slideout">
        <h5>Users In Room</h5>
        <ul style="margin-bottom: 64px;">
            {{#each usersInRoom}}
                <li><a href=/u/{{this}} target="_blank">{{this}}</a></li>
            {{/each}}
        </ul>

        {{#if currentUser}}
            <a class="btn btn-block musare white-text waves-effect waves-light" href="#" id="logout"
               style="position: fixed; bottom: 0; width: 342px;">Logout</a>
        {{else}}
            <a class="btn btn-block musare white-text waves-effect waves-light" href="/login"
               style="position: fixed; bottom: 0; width: 342px;">Login / Register</a>
        {{/if}}
    </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 isCommunityStationOwner 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 isCommunityStationOwner 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 isCommunityStationOwner 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>

    <!-- Edit Room Modal -->
    <div id="edit_room_modal" class="modal">
        <div class="modal-content">
            <h4>Edit Room</h4>
            <div class="input-field">
                <input id="edit_room_description" value={{room.roomDesc}} type="text">
                <label for="edit_room_description">Description</label>
            </div>
            <div class="input-field">
                <input id="edit_room_display" value={{room.displayName}} type="text">
                <label for="edit_room_display">Display Name</label>
            </div>
            <div class="input-field col s12">
                <select id="edit_room_privacy">
                    <option value="public" {{getSelected 'public' room.privacy}}>Public</option>
                    <option value="unlisted" {{getSelected 'unlisted' room.privacy}}>Unlisted</option>
                    <option value="community" {{getSelected 'community' room.privacy}}>Private</option>
                </select>
                <label>Room Privacy</label>
            </div>
            <p>
                <input type="checkbox" id="partyModeEnabled" {{partyModeChecked}} />
                <label for="partyModeEnabled">Party Mode Enabled</label>
                <br><small><b>What is party mode?</b> Party mode is a mode in community stations where, if enabled, people can request songs to be added to the queue, which will then be played in the station.</small>
            </p>
            {{#if partyModeEnabled}}
                <p>
                    <input type="checkbox" id="queueLocked" {{queueLockedChecked}} />
                    <label for="queueLocked">Queue Locked</label>
                    <br><small>Locking the queue will disallow normal users from adding songs to the queue.</small>
                </p>
            {{/if}}
            <button class="btn waves-effect waves-light" id="save_edit_room_changes">Save Changes</button>
            <button class="btn waves-effect waves-light right red" id="delete_room">Delete Room</button>
        </div>
        <div class="divider"></div>
        <div class="modal-footer">
            <a class="modal-action modal-close waves-effect btn">Close</a>
        </div>
    </div>
    <!-- Edit Playlist Modal -->
    <div id="edit_playlist_modal" class="modal">
        <div class="modal-content">
            <h4>Editing: {{editingPlaylist.name}}</h4>
            <ul class="collection">
                {{#each song in editingPlaylist.songs}}
                    <li class="collection-item">
                        <a href="https://youtube.com/watch?v={{song.id}}" target="_blank">{{song.title}}</a>
                        <a href="#" class="secondary-content playlistSongRemove" data-id={{song.id}}><i
                                class="material-icons" data-id={{song.id}}>delete</i></a>
                        {{#if hasMoreThanOne editingPlaylist.songs}}
                            {{#if isFirst song editingPlaylist.songs}}
                                <a href="#" class="secondary-content playlistSongDown" data-id={{song.id}}><i
                                        class="material-icons" data-id={{song.id}}>keyboard_arrow_down</i></a>
                            {{else}}
                                {{#if isLast song editingPlaylist.songs}}
                                    <a href="#" class="secondary-content playlistSongUp" data-id={{song.id}}><i
                                            class="material-icons" data-id={{song.id}}>keyboard_arrow_up</i></a>
                                {{else}}
                                    <a href="#" class="secondary-content playlistSongDown" data-id={{song.id}}><i
                                            class="material-icons" data-id={{song.id}}>keyboard_arrow_down</i></a>
                                    <a href="#" class="secondary-content playlistSongUp" data-id={{song.id}}><i
                                            class="material-icons" data-id={{song.id}}>keyboard_arrow_up</i></a>
                                {{/if}}
                            {{/if}}
                        {{/if}}
                    </li>
                {{/each}}
            </ul>
            <div class="input-field">
                <input id="song-input" type="text" class="validate">
                <label for="search_for_song">Search for song to add</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: 400px; margin-top: 1rem;">
                        <ul class="collection light-blue-text">
                            {{#each result in singleVideoResults}}
                                <li class="collection-item avatar youtube-search-result-li">
                                    <img src="{{result.image}}" onerror="this.src='/notes.png'" 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 addSong" data-result="{{result.id}}"><i
                                            class="material-icons" data-result="{{result.id}}">add</i></a>
                                </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            {{/if}}
            <br>
            <div class="input-field">
                <input id="rename-playlist-name" type="text" class="validate" value={{editingPlaylist.name}}>
                <label for="rename-playlist-name">Rename playlist name</label>
            </div>
            <div class="input-field">
                <input id="rename-playlist-display-name" type="text" class="validate"
                       value={{editingPlaylist.displayName}}>
                <label for="rename-playlist-display-name">Rename playlist display name</label>
            </div>
            <button class="btn waves-effect waves-light musare" id="rename-playlist-button">Rename playlist</button>
        </div>
        <div class="divider"></div>
        <div class="modal-footer">
            <a class="modal-action modal-close waves-effect btn">Close</a>
            <button class="btn waves-effect waves-light left red" id="delete_playlist">Delete playlist</button>
        </div>
    </div>

    <!-- Edit Playlist Modal -->
    <div id="add-song-to-queue" class="modal">
        <div class="modal-content">
            <h4>Add song to queue</h4>
            <div class="input-field">
                <input id="add-song-to-queue-search" type="text" class="validate">
                <label for="add-song-to-queue-search">Search for song to add</label>
            </div>
            <a class="waves-effect waves-light btn" id="add-song-to-queue-search-button"><i class="material-icons left">search</i>Search</a>
            <a class="waves-effect waves-light btn orange" id="clear-queue-search"><i class="material-icons left">delete</i>Clear results</a>
        </div>
        {{#if singleVideoResultsActiveQueue}}
            <div id="single-video-results-queue">
                <div style="overflow: auto; height: 400px; margin-top: 1rem;">
                    <ul class="collection light-blue-text">
                        {{#each result in singleVideoResultsQueue}}
                            <li class="collection-item avatar youtube-search-result-li">
                                <img src="{{result.image}}" onerror="this.src='/notes.png'" 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 addSongQueue" data-result="{{result.id}}"><i
                                        class="material-icons" data-result="{{result.id}}">add</i></a>
                            </li>
                        {{/each}}
                    </ul>
                </div>
            </div>
        {{/if}}
        <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>
        $("#add-song-to-queue-button").leanModal({
            dismissible: true,
            opacity: .5,
            in_duration: 500,
            out_duration: 200
        });
        $(".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
        });
        $("#edit_room").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>