MusareMeteor/app/client/templates/room.html

<template name="room">
    {{#if loaded}}
        <div class="landing">
            <div class="row">
                <div class="col-md-9" id="station-main">
                    <nav>
                        <div id="room-icons">
                            <a class="back" href="/"><i class="fa fa-chevron-left"></i></a>
                            {{#if isAdmin}}
                            {{#if paused}}
                            <i class="fa fa-play fa-1" id="play"></i>
                            {{else}}
                            <i class="fa fa-pause fa-1" id="pause"></i>
                            {{/if}}
                            <i class="fa fa-step-forward fa-1" id="skip"></i>
                            <i class="fa fa-random fa-1" id="shuffle"></i>
                            {{/if}}
                        </div>

                        <h3 id="room-header">
                            {{{type}}}
                        </h3>
                        <div id="volume-container">
                            <i class="fa fa-volume-down" id="volume-icon"></i>
                            <input type="text" id="volume-slider" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
                        </div>
                    </nav>
                    <div id="seeker-container">
                        <div id="seeker-bar"></div>
                    </div>
                    <div class="row" id="song-media">
                        <div class="col-md-8">
                            <div class="embed-responsive embed-responsive-16by9" id="media-container">
                                <!--div id="player" class="embed-responsive-item"></div-->
                            </div>
                        </div>
                        <div id="song-info" class="col-md-4" style="margin-top:15px">
                          <img class="song-img" onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" id="song-img"/>
                          <h2 class="room-title">{{{title}}} <small id="time-display">(<span id="time-elapsed"></span> / <span id="time-total"></span>)</small></h2>
                          <h2 class="room-artist">{{{artist}}}</h2>
                        </div>
                    </div>
                    <!--<div class="row" id="settings">-->
                        <!--<div class="col-md-4">-->
                            <!--{{#if currentUser}}-->
                            <!--<button type="button" id="song-modal" class="button action-button action-button-25" data-toggle="modal" data-target="#myModal">Add songs</button>-->
                            <!--{{else}}-->
                            <!--<button title="You need to be logged in to add songs." type="button" class="button btn btn-disabled action-button action-button-25" disabled>Add songs</button>-->
                            <!--{{/if}}-->
                        <!--</div>-->
                        <!--<div class="col-md-4">-->
                            <!--<button type="button" id="toggle-video" class="button action-button action-button-25">Hide video</button>-->
                            <!--<div class="action-button action-button-25">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!---->
                    <div class="row" id="settings">
                        <div class="col-md-4">
                            {{#if currentUser}}
                                <button type="button" id="song-modal" class="button action-button" data-toggle="modal" data-target="#myModal">Add songs</button>
                            {{else}}
                                <button title="You need to be logged in to add songs." type="button" class="button btn btn-disabled action-button" disabled>Add songs</button>
                            {{/if}}
                        </div>
                        <div class="col-md-4">
                            <button type="button" id="toggle-video" class="button action-button">Hide video</button>
                            <div class="action-button "></div>
                        </div>
                    </div>
                    <div class="row" id="settings">
                        {{#if currentUser}}
                            <div class="col-md-2">
                                <button title="Smile to this song." type="button" id="like" class="btn btn-success btn-lg {{liked}} action-button"><i class="fa fa-smile-o"> {{likes}}</i></button>
                            </div>
                            <div class="col-md-2">
                                <button title="I dislike this song." type="button" id="dislike" class="btn btn-danger btn-lg {{disliked}} action-button"><i class="fa fa-meh-o"> {{dislikes}}</i></button>
                            </div>
                        {{else}}
                            <div class="col-md-2">
                                <button title="You need to be logged to smile this song." type="button" class="btn btn-success btn-lg action-button" disabled><i class="fa fa-smile-o"> {{likes}}</i></button>
                            </div>
                            <div class="col-md-2">
                                <button title="You need to be logged to dislike this song." type="button" class="btn btn-danger btn-lg action-button" disabled><i class="fa fa-meh-o"> {{dislikes}}</i></button>
                            </div>
                        {{/if}}
                        <div class="col-md-2">
                            <button title="Report this song!" type="button" id="report-modal" class="btn btn-warning btn-lg report-button action-button" data-toggle="modal" data-target="#reportModal"><i class="fa fa-flag"></i></button>
                        </div>
                    </div>
                    <!---->
                </div>
                <div class="col-md-3" id="side-panel">
                    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
                        <li role="presentation" class="active"><a data-toggle="tab" href="#playlist">Playlist</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#chat">Chat</a></li>
                    </ul>
                    <div id='content' class="tab-content sidebar-content">
                        <div class="tab-pane active" id="playlist">
                            {{> playlist}}
                        </div>
                        <div class="tab-pane" id="chat">
                            <h2 class="chat-title">Chat</h2>
                            <ul id="chat-ul">
                                {{#each chat}}
                                <li class="chat-message"><b class="bold">{{this.username}}:</b> {{this.message}}</li>
                                <hr>
                                {{/each}}
                            </ul>
                            <div id="chat-input-div">
                                <input id="chat-input" placeholder="Type a message...">
                                <div id="submit"><i id="submit-message" class="fa fa-paper-plane-o"></i>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Search for a song</h4>
                        </div>
                        <div class="modal-body">
                            <div id="search-info">
                                <select name="type" id="search_type" class="song-input-select">
                                    <option name="youtube" id="search_youtube">YouTube</option>
                                    <option name="soundcloud" id="search_soundcloud">SoundCloud</option>
                                </select>
                                <input type="text" id="song-input" class="song-input">
                                <button type="button" id="search-song" class="button">Search</button>
                                <div id="song-results"></div>
                            </div>
                            <div id="add-info" style="display:none">
                                <button type="button" id="return" class="button">Return</button>
                                <label for="type" class="song-input-label">Song Type</label>
                                <select name="type" id="type" class="song-input-select">
                                    <option name="youtube" id="youtube">YouTube</option>
                                    <option name="soundcloud" id="soundcloud">SoundCloud</option>
                                </select>
                                <label for="id" class="song-input-label">Song ID</label>
                                <input class="song-input" name="id" id="id" type="text"/>
                                <label for="id" class="song-input-label">Song Artist</label>
                                <input class="song-input" name="artist" id="artist" type="text"/>
                                <label for="title" class="song-input-label">Song Title</label>
                                <input class="song-input" name="title" id="title" type="text"/>
                                <label for="img" class="song-input-label">Song Img</label>
                                <input class="song-input" name="img" id="img" type="text" />
                                <button type="button" id="add-song-button" class="button">Add Song</button>
                            </div>
                            <!--small id="search-alert">Searching for a song fills out the above fields automatically, but you will still have to verify them.</small-->
                        </div>
                        <div class="modal-footer">
                            <button id="close-modal-a" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
            <!-- Report Modal -->
            <div id="reportModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-body">

                            <button type="button" id="report-prev" class="btn btn-warning btn-lg btn-block">Report previous song ({{previousSongR.title}})</button>
                            <button type="button" id="report-curr" class="btn btn-warning btn-lg btn-block" disabled>Report current song ({{currentSongR.title}})</button>

                            <h3 class="text-primary"><b>Reporting:</b> {{reportingSong.title}} by {{reportingSong.artist}}</h3>

                            <div class="report-layer-1">
                                <div class="checkbox">
                                    <input class="checkbox-box" type="checkbox" id="report-song">
                                    <label for="report-song">
                                        Song
                                    </label>
                                </div>
                                    <!-- Layer2 -->
                                    {{#if reportSong}}
                                    <div class="report-layer-2" id="report-song-list">
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-song-not-playing">
                                            <label for="report-song-not-playing">
                                                Not playing
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-song-does-not-exist">
                                            <label for="report-song-does-not-exist">
                                                Does not exist
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-song-other">
                                            <label for="report-song-other">
                                                Other: <br>
                                                <textarea class="other-textarea" id="report-song-other-ta" type="text"></textarea>
                                            </label>
                                        </div>
                                    </div>
                                    {{/if}}
                                <div class="checkbox">
                                    <input class="checkbox-box" type="checkbox" id="report-title">
                                    <label for="report-title">
                                        Title
                                    </label>
                                </div>
                                    <!-- Layer2 -->
                                {{#if reportTitle}}
                                    <div class="report-layer-2" id="report-title-list">
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-title-incorrect">
                                            <label for="report-title-incorrect">
                                                Incorrect
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-title-inappropriate">
                                            <label for="report-title-inappropriate">
                                                Inappropriate
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-title-other">
                                            <label for="report-title-other">
                                                Other: <br>
                                                <textarea class="other-textarea" id="report-title-other-ta" type="text"></textarea>
                                            </label>
                                        </div>
                                    </div>
                                {{/if}}
                                <div class="checkbox">
                                    <input class="checkbox-box" type="checkbox" id="report-author">
                                    <label for="report-author">
                                        Author
                                    </label>
                                </div>
                                    <!-- Layer2 -->
                                {{#if reportAuthor}}
                                    <div class="report-layer-2" id="report-author-list">
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-author-incorrect">
                                            <label for="report-author-incorrect">
                                                Incorrect
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-author-inappropriate">
                                            <label for="report-author-inappropriate">
                                                Inappropriate
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-author-other">
                                            <label for="report-author-other">
                                                Other: <br>
                                                <textarea class="other-textarea" id="report-author-other-ta" type="text"></textarea>
                                            </label>
                                        </div>
                                    </div>
                                {{/if}}
                                <div class="checkbox">
                                    <input class="checkbox-box" 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>
                                                <textarea class="other-textarea" id="report-duration-other-ta" type="text"></textarea>
                                            </label>
                                        </div>
                                    </div>
                                {{/if}}
                                <div class="checkbox">
                                    <input class="checkbox-box" type="checkbox" id="report-audio">
                                    <label for="report-audio">
                                        Audio
                                    </label>
                                </div>
                                    <!-- Layer2 -->
                                {{#if reportAudio}}
                                    <div class="report-layer-2" id="report-audio-list">
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-audio-inappropriate">
                                            <label for="report-audio-inappropriate">
                                                Inappropriate
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-audio-not-playing">
                                            <label for="report-audio-not-playing">
                                                Not playing
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="report-audio-other">
                                            <label for="report-audio-other">
                                                Other: <br>
                                                <textarea class="other-textarea" id="report-audio-other-ta" type="text"></textarea>
                                            </label>
                                        </div>
                                    </div>
                                {{/if}}
                                <div class="checkbox">
                                    <input class="checkbox-box" 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: <br>
                                                <textarea class="other-textarea" id="report-albumart-other-ta" type="text"></textarea>
                                            </label>
                                        </div>
                                    </div>
                                {{/if}}
                                <div class="checkbox">
                                    <input class="checkbox-box" type="checkbox" id="report-other">
                                    <label for="report-other">
                                        Other: <br>
                                        <textarea class="other-textarea" id="report-other-ta" type="text"></textarea>
                                    </label>
                                </div>
                            </div>
                            <button type="button" id="report-song-button" class="button">Submit</button>
                        </div>
                        <div class="modal-footer">
                            <button id="close-modal-r" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
            <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        </div>
    {{else}}
        {{> loading}}
    {{/if}}
    <script type="text/javascript">
      window.doorbellOptions = {
          appKey: 'v2Gu14c8s9HgBsAFCXNWIm2vlk11N12Plt2Wu5k2MbQIkM1Ao6kOTCbfN95ElEVM',
          hideEmail: true
      };
      (function(d, t) {
          var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/2408?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g);
      }(document, 'script'));
    </script>
</template>