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">
                    {{#if isCommunityStationOwner name}}
                        <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>
                    {{/if}}
                    <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>
        {{#if currentUser}}
            <a id="add-song-to-queue-button" class="waves-effect waves-light btn musare white-text" href="#add-song-to-queue">Add a song to the queue</a>
        {{else}}
            <a class="waves-effect waves-light btn musare white-text" href="/login" target="_blank">Log in to add a song to the queue</a>
        {{/if}}
    </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 class="waves-effect waves-light btn add-playlist-modal-button" 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="privacy" {{getSelected 'privacy' 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 VideoIn 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>Select playlist for queue</h4>
            <small>
                Instead of adding one song to the queue, you can also make a playlist and select that to automatically
                add all the video's from your playlist to the queue. Selecting a playlist will automatically get the first
                song from your playlist, add it to the queue and then after that song has played, move that song to the bottom of the
                playlist and add the new top song from your playlist to the queue automatically.<br>
                Deselecting a playlist or selecting a different playlist does not automatically remove the song already added to the queue.
            </small>
            <ul class="collection">
                {{#each playlist in playlists}}
                    <li class="collection-item">
                        <a href="#edit_playlist_modal" class="edit-playlist-button" data-playlist={{playlist.name}}>{{playlist.displayName}}</a>
                        {{#if playlistQueueSelected playlist.name}}
                            <a href="#" class="secondary-content playlistQueueDeselect" data-name={{playlist.name}}><i class="material-icons" data-name={{playlist.name}}>check_circle</i></a>
                        {{else}}
                            <a href="#" class="secondary-content playlistQueueSelect" data-name={{playlist.name}}><i class="material-icons" data-name={{playlist.name}}>panorama_fish_eye</i></a>
                        {{/if}}
                    </li>
                {{/each}}
            </ul>
            <a class="waves-effect waves-light btn add-playlist-modal-button" href="#create_playlist_modal">Create Playlist</a>
            <br>
            <br>
            <br>
            <br>
            <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 VideoIn 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>