MusareMeteor/app/templates/room.html

<template name="room">
    <div class="landing">
        {{#if loaded}}
            <div class="row">
                <div class="col-md-9" id="station-main">
                    <nav>
                        <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}}
                        <h3>
                            {{{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 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}}}</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" 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" disabled>Add songs</button>
                            {{/if}}
                        </div>
                        <div class="col-md-4">
                            <button type="button" id="toggle-video" class="button">Hide video</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3" id="side-panel">
                  {{> playlist}}
                </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" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
        {{else}}
            {{> loading}}
        {{/if}}
        <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>
    <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>