jam-cloud/web/app/views/clients/_session.html.erb

<!-- Actual Session Screen -->
<div layout="screen" layout-id="session" layout-arg="id" class="screen secondary">
    <div class="content-head">
        <div class="content-icon">
            <%= image_tag "shared/icon_session.png", {:height => 19, :width => 19} %>
        </div>
        <h1>session</h1>
    </div>

    <div class="content-body">
    <!-- session controls -->
        <div id="session-controls">
            <a class="button-grey resync left" id="session-resync">
                <%= image_tag "content/icon_resync.png", {:align => "texttop", :height => 14, :width => 12} %>
                RESYNC
            </a>
            <a class="button-grey left" layout-link="session-settings" id="session-settings-button">
                <%= image_tag "content/icon_settings_sm.png", {:align => "texttop", :height => 12, :width => 12} %>
                SETTINGS
            </a>
            <a layout-link="share-dialog" class="button-grey left">
                <%= image_tag "content/icon_share.png", {:align => "texttop", :height => 12, :width => 12} %> 
                SHARE
            </a>

            <!-- Volume Slider -->
            <div class="block">
                <div class="label">VOLUME:</div>
                <div id="volume" class="fader lohi" mixer-id=""></div>
            </div>

            <!-- Mix: Me versus Others -->
            <div class="block">
                <div class="label">MIX:</div>
                <div class="label"><small>others</small></div>
                <div id="l2m" class="fader flat" mixer-id="__L2M__"></div>
                <div class="label"><small>me</small></div>
            </div>

            <!-- Leave Button -->
            <a class="button-grey right leave" href="#/home" id="session-leave">X&nbsp;&nbsp;LEAVE</a>
        </div>
        <!-- end session controls -->

        <!-- content scrolling area -->
        <div id="tracks">
            <div class="content-scroller">

                <!-- content wrapper -->
                <div class="content-wrapper">

                    <!-- my tracks -->
                    <div class="session-mytracks">
                        <h2>my tracks</h2>
                        <div id="track-settings" class="session-add" style="display:block;" layout-link="configure-audio">
                            <%= image_tag "content/icon_settings_lg.png", {:width => 18, :height => 18} %>&nbsp;&nbsp;Settings
                        </div>

                        <div class="session-tracks-scroller">
                            <div id="session-mytracks-container"></div>
                            <div id="voice-chat" class="voicechat" style="display:none;" mixer-id="">
                                <div class="voicechat-label">CHAT</div>
                                <div class="voicechat-gain"></div>
                                <div class="voicechat-mute enabled" control="mute" mixer-id=""></div>
                            </div>
                        </div>
                    </div>

                    <!-- live tracks -->
                    <div class="session-livetracks">
                        <h2>live tracks</h2>
                        <div class="session-add" layout-link="select-invites">
                            <a href="#" id="session-invite-musicians">
                                <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"} %>&nbsp;&nbsp;Invite Musicians
                            </a>
                        </div>
                        <div class="session-tracks-scroller">
                            <div id="session-livetracks-container">
                                <p class="when-empty">
                                No Live Tracks:<br/>
                                <a>Invite Other Musicians</a> to<br/>
                                Add Live Tracks
                                </p>
                            </div>
                            <br clear="all" />
                            <div class="recording" id="recording-start-stop">
                                <a>
                                    <%= image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"} %>&nbsp;&nbsp;<span id="recording-status">Make a Recording</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- recordings -->
                    <div class="session-recordings">
                        <h2>recordings</h2>
                        <div class="session-recording-name-wrapper">
                            <div class="session-recording-name left">(No recording loaded)</div>
                            <div class="session-add right">
                                <a id='close-playback-recording' href="#"><%= image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"} %>&nbsp;&nbsp;Close</a>
                            </div>
                        </div>
                        <div class="session-tracks-scroller">
                            <div id="session-recordedtracks-container">
                                <p class="when-empty recordings">
                                No Recordings:<br/><a href="#" id="open-a-recording">Open a Recording</a>
                                </p>
                            </div>
                            <br clear="all" />

                          <%= render "play_controls" %>

                        </div>

                        <!-- recording name and close button -->
                        <!--
                        <div class="session-recording-name-wrapper">
                            <div class="session-recording-name left">(No recording loaded)</div>
                            <div class="session-add right">
                                <a>
                                    <%= image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"} %>&nbsp;&nbsp;Close
                                </a>
                            </div>
                        </div>
                        -->
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- dialogs needed for Session screen (ORDER MATTERS) -->
<%= render "configureTrack" %>
<%= render "addTrack" %>
<%= render "addNewGear" %>
<%= render "error" %>
<%= render "sessionSettings" %>
<%= render :partial => "shareDialog", :locals => {} %>

<!-- Track Template -->
<script type="text/template" id="template-session-track">
<div track-id="{trackId}" class="session-track track" client-id="{clientId}">
    <div class="track-vu-left" mixer-id="{mixerId}_vul"></div>
    <div class="track-vu-right" mixer-id="{mixerId}_vur"></div>
    <div class="track-label">{name}</div>
    <div id="div-track-close" track-id="{trackId}" class="track-close op30">
        <%= image_tag "content/icon_closetrack.png", {:width => 12, :height => 12} %>
    </div>
    <div class="{avatarClass}">
        <img src="{avatar}"/>
    </div>
    <div class="track-instrument {preMasteredClass}">
        <img src="/assets/{instrumentIcon}" width="45" height="45"/>
    </div>
    <div class="track-gain" mixer-id="{mixerId}"></div>
    <!--
        <div class="track-gain-wrapper" 
            control="fader" orientation="vertical">
            <div class="track-gain-slider" style="bottom:{gainPercent}%;" control="fader-handle">
                <%= image_tag "content/slider_gain_vertical.png", {:width => 28, :height => 11} %>
            </div>
        </div>
    </div>
    -->
    <div class="track-icon-mute {muteClass}" control="mute" mixer-id="{mixerId}">
    </div>
    <!-- TODO - connection class from curly param -->
    <div mixer-id="{mixerId}_connection" class="track-connection green">CONNECTION</div>
</div>
</script>

<script type="text/template" id="template-option">
    <option value="{value}" title="{label}" {selected}>{label}</option>
</script>

<!-- Genre option template -->
<script type="text/template" id="template-genre-option">
    <option value="{value}">{label}</option>
</script>