jam-cloud/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>
        <%= render "screen_navigation" %>
    </div>

    <!-- session controls -->
    <div id="session-controls">
        <a class="button-grey settings left" href="#">
            <%= image_tag "content/icon_settings_sm.png", {:align => "texttop", :height => 12, :width => 12} %>
            SETTINGS
        </a>
        <a class="button-grey left" href="#">
            <%= image_tag "content/icon_share.png", {:align => "texttop"} %> 
            SHARE
        </a>
        <div class="master-volume-label">VOLUME</div>
        <div id="volume" master-id="" monitor-id="">
            <div class="slider-volume">
                <%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
            </div>
        </div>

        <a class="button-grey right leave" href="#/home">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>

                <!-- add track button -->
                <div class="session-add">
                    <a href="#">
                        <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"} %>&nbsp;&nbsp;Add Track
                    </a>
                </div>

                <!-- my tracks scroller -->
                <div class="session-tracks-scroller">
                    <div id="session-mytracks-container"></div>
                    <!-- voice chat box -->
                    <div id="voice-chat" class="voicechat" style="display:none;" mixer-id="">
                        <div class="voicechat-label">CHAT</div>
                        <!-- voice chat gain -->
                        <div class="voicechat-gain">
                            <div class="voicechat-gain-wrapper" control="fader">
                                <!-- voice chat gain slider -->
                                <div class="voicechat-gain-slider" style="left:0%;" control="fader-handle">
                                    <%= image_tag "content/slider_gain_horiz.png", {:width => 10, :height => 18} %>
                                </div>
                            </div>
                        </div>
                        <!-- mute icon -->
                        <div class="voicechat-mute enabled" control="mute" mixer-id=""></div>
                        <!-- settings icon -->
                        <div class="voicechat-settings">
                            <%= image_tag "content/icon_settings_lg.png", {:width => 18, :height => 18} %>
                        </div>
                    </div>
                    <!-- end voice chat -->
                    <div id="voice-chat"></div>
                </div> <!-- end session-tracks-scroller -->
            </div> <!-- end session-mytracks -->

            <!-- live tracks -->
            <div class="session-livetracks">
                <h2>live tracks</h2>

                <!-- add track button -->
                <div class="session-add">
                    <a href="#">
                        <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"} %>&nbsp;&nbsp;Invite Musicians
                    </a>
                </div>

                <!-- live tracks scroller -->
                <div class="session-tracks-scroller">
                    <div id="session-livetracks-container">
                    </div>
                    <br clear="all" />
                    <!-- make a recording -->
                    <div class="recording">
                        <a href="#">
                            <%= image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"} %>&nbsp;&nbsp;Make a Recording
                        </a>
                    </div>
                    <!-- end make a recording -->
                </div> <!-- end session-tracks-scroller -->
            </div> <!-- end session-livetracks -->

            <!-- recordings -->
            <div class="session-recordings">
                <h2>recordings</h2>

                <!-- 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 href="#">
                            <%= image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"} %>&nbsp;&nbsp;Close
                        </a>
                    </div>
                    -->
                </div>
                <!-- recording tracks scroller -->
                <div class="session-tracks-scroller">
                </div> <!-- end session-tracks-scroller -->
            </div> <!-- end session-recordings -->

        </div> <!-- end content wrapper -->
    </div> <!-- end of content wrapper -->
    </div> <!-- end of #tracks -->
</div> <!-- end of screen -->

<!-- Track Template -->
<script type="text/template" id="template-session-track">
<div class="session-track track" client-id="{clientId}">
    <table class="track-vu-left vu" mixer-id="{mixerId}_vul">
        {left-vu}
    </table>
    <table class="track-vu-right vu" mixer-id="{mixerId}_vur">
        {right-vu}
    </table>
    <div class="track-label">{name}</div>
    <div class="track-close op30">
        <%= image_tag "content/icon_closetrack.png", {:width => 12, :height => 12} %>
    </div>
    <!-- TODO - use user's avatar as curly param -->
    <div class="avatar-med">
        <img src="{avatar}"/>
    </div>
    <!-- TODO - use track instrument as curly param -->
    <div class="track-instrument">
        <img src="/assets/{instrumentIcon}" width="45" height="45"/>
    </div>
    <div class="track-gain" mixer-id="{mixerId}">
        <div class="track-gain-wrapper" control="fader">
            <div class="track-gain-slider" style="bottom:0%;" control="fader-handle">
                <%= image_tag "content/slider_gain_vertical.png", 
                    {:width => 28, :height => 11} %>
            </div>
        </div>
    </div>
    <div class="track-icon-mute enabled"
        control="mute"
        mixer-id="{mixerId}">
    </div>
    <div class="track-icon-settings" style="display:none;" mixer-id="{mixerId}">
        <%= image_tag "content/icon_settings_lg.png", 
            {:width => 18, :height => 18} %>
    </div>
    <!-- TODO - connection class from curly param -->
    <div class="track-connection-green">CONNECTION</div>
</div>
</script>

<!-- VU Template -->
<script type="text/template" id="template-vu">
    <tr>
        <td width=3 height=17 class="vulight vu12 vu-red-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu11 vu-red-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu10 vu-red-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu9 vu-red-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu8 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu7 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu6 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu5 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu4 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu3 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu2 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu1 vu-green-off"></td>
    </tr>
    <tr>
        <td width=3 height=17 class="vulight vu0 vu-green-off"></td>
    </tr>
</script>

<script type="text/template" id="template-voicechat">
    <!-- voice chat box -->
    <div class="voicechat">
        <div class="voicechat-label">CHAT</div>
        <!-- voice chat gain -->
        <div class="voicechat-gain">
            <div class="voicechat-gain-wrapper">
                <!-- voice chat gain slider -->
                <div class="voicechat-gain-slider">
                    <%= image_tag "content/slider_gain_horiz.png", {:width => 10, :height => 18} %>
                </div>
            </div>
        </div>
        <!-- mute icon -->
        <div class="voicechat-mute">
            <%= image_tag "content/icon_mute.png", {:width => 20, :height => 18} %>
        </div>
        <!-- settings icon -->
        <div class="voicechat-settings">
            <%= image_tag "content/sicon_settings_lg.png", {:width => 18, :height => 18} %>
        </div>
    </div>
    <!-- end voice chat -->
</script>

<script type="text/template" id="template-makerecording">
   <!-- make a recording -->
   <div class="recording">
       <a href="#">
           <img src="images/content/recordbutton-off.png" width="20" height="20" align="absmiddle" /> Make a Recording</a>
   
   
   </div>
   <!-- end make a recording -->
</script>