MusareMeteor/app/client/templates/room.html

<template name="room">
    {{> alerts}}
    {{#if loaded}}
        <header>
            <nav>
                <div class="nav-wrapper teal accent-4">
                    <ul class="left hide-on-med-and-down">
                        <li><a href="/"><i class="material-icons">home</i></a></li>
                        <li><a href="#add_song_modal"><i class="material-icons">playlist_add</i></a></li>
                        <li><a href="#bug_report_modal"><i class="material-icons">bug_report</i></a></li>
                        <li><a href="#vote_to_skip" id="skip_vote"><i class="material-icons">skip_next</i></a></li>
                    </ul>
                    <span class="brand-logo center">{{type}}</span>
                    <ul class="right hide-on-med-and-down">
                        <li><a href="#"><i class="material-icons">queue_music</i></a></li>
                        <li><a href="#"><i class="material-icons">chat</i></a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <main id="room-content">
            <div class="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">
                        <div class="row">
                            <div class="col s12 m12 l8">
                                <h3>{{{title}}} - {{{artist}}}</h3>
                                <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
                                <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 class="right col s4 m2 l2">
                                    <ul>
                                      <li class="left"><a href="#add_song_modal"><i class="material-icons black-text">thumb_up</i></a></li>
                                      <li class="right"><a href="#bug_report_modal"><i class="material-icons black-text">thumb_down</i></a></li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="seeker-bar-container white" id="preview-progress">
                                    <div class="seeker-bar teal" style="width: 0%"></div>
                                </div>
                            </div>
                            <img alt="Not loading" class="responsive-img song-img col s12 m12 l4" onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" id="song-img"/>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    {{/if}}
</template>