499 lines
28 KiB
Plaintext
499 lines
28 KiB
Plaintext
<!-- Create Session Screen -->
|
|
<div layout="screen" layout-id="createSession" class="screen secondary create-session" id="create-session-layout">
|
|
<div class="content">
|
|
<div class="content-head">
|
|
<div class="content-icon">
|
|
<%= image_tag "content/icon_add.png", :size => "19x19" %>
|
|
</div>
|
|
|
|
<h1>create session</h1>
|
|
|
|
<%= render "screen_navigation" %>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div class="content-body">
|
|
<div class="content-body-scroller">
|
|
<form id="create-session-form">
|
|
<div class="content-wrapper">
|
|
<div class="session-header">
|
|
<div id="create-session-steps"></div>
|
|
</div>
|
|
<!-- left column -->
|
|
<div class="session-wrapper">
|
|
<div id="session-step-1" class="create-session-wizard" layout-wizard-step="0">
|
|
<div class="w60 left">
|
|
<h3>When do you want to schedule and play in this session?</h3>
|
|
<br />
|
|
|
|
<div class="icheckbuttons">
|
|
<ul id="create-session-type">
|
|
<li create-type="start-scheduled">
|
|
<input type="radio" name="session-when" id="session-when-start-scheduled" checked="checked" info-value="start-scheduled" />
|
|
<label for="session-when-start-scheduled" class="radio-text">
|
|
I have already scheduled a session, and I want to start it now
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
<li create-type="schedule-future">
|
|
<input type="radio" name="session-when" id="session-when-schedule-future" info-value="schedule-future" />
|
|
<label for="session-when-schedule-future" class="radio-text">
|
|
I want to schedule a session for a specific future time
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
<li create-type="rsvp">
|
|
<input type="radio" name="session-when" id="session-when-rsvp" info-value="rsvp" />
|
|
<label for="session-when-rsvp" class="radio-text">
|
|
I want to choose the time after others RSVP to my session
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
<li create-type="immediately">
|
|
<input type="radio" name="session-when" id="session-when-immediately" info-value="immediately" />
|
|
<label for="session-when-immediately" class="radio-text">
|
|
I want to start a new session right now for others to join
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
<li create-type="quick-start">
|
|
<input type="radio" name="session-when" id="session-when-quick-start" info-value="quick-start" />
|
|
<label for="session-when-quick-start" class="radio-text">
|
|
I want to quick start a test session just for me
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="session-when-info mt10">
|
|
<div class="" info-id="start-scheduled">
|
|
If you have already scheduled a session, and you want to start the session now so that other
|
|
musicians who RSVP'd can join you in the session, then choose the session you want to start now
|
|
from the list of sessions you have scheduled on the right side of this screen and then
|
|
click the NEXT button.
|
|
</div>
|
|
<div class="hidden" info-id="schedule-future">
|
|
This is a good option to choose if you have other musician friends online on JamKazam who are
|
|
ready to play right now. To schedule a session for a specific time in the future, just choose
|
|
the date, start time, and end time for your session, and specify the time zone to avoid confusion.
|
|
The end time just sets expectations for the other musicians. Your session can go on as long as
|
|
you'd like, won't automatically end. You can also set up regular sessions that recur weekly.
|
|
</div>
|
|
<div class="hidden" info-id="rsvp">
|
|
This is good option to choose if you are not sure who might play in the session with you, and
|
|
you want to wait to schedule a specific time until you have RSVPs from musicians who play the
|
|
set of instruments you need for the session. When using this option, just click NEXT to move
|
|
forward to the next step.
|
|
</div>
|
|
<div class="hidden" info-id="immediately">
|
|
This is good option to choose if you have other musician friends online on JamKazam who are
|
|
ready to play right now. Otherwise, the chances that other musicians with the right instruments,
|
|
skill sets, interests, and shared repertoire of music will be online to jump into a session
|
|
with you are pretty slim. To use this option, just click the NEXT button to proceed.
|
|
</div>
|
|
<div class="hidden" info-id="quick-start">
|
|
This is good option to choose if you just want to jump into a quick test session alone to make
|
|
sure you audio gear is working properly, and to familiarize yourself with the session interface.
|
|
Choosing this option will set your session to private so that you won't be disturbed, and will
|
|
set other options to defaults. To use this option, just click the NEXT buttono to proceed.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w35 right">
|
|
<div id="start-scheduled-wrapper">
|
|
<div>
|
|
<h3 class="left">My scheduled sessions</h3>
|
|
<%= link_to '(edit)', '#', class: 'right', id: 'edit_scheduled_sessions', target: '_blank' %>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="icheckbuttons session-list">
|
|
<div id="scheduled-session-not-found" class="center">
|
|
You currently have no scheduled sessions.
|
|
</div>
|
|
<ul id="scheduled-session-list">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="schedule-future-wrapper" class="hidden">
|
|
<h3>When will the session happen?</h3>
|
|
<br/>
|
|
|
|
<div class="left ib w15 h40">Date:</div>
|
|
<div class="right ib w85 h40">
|
|
<input type="text" id="session-start-date">
|
|
</div>
|
|
|
|
<div class="clearall left ib w15 h40">Start:</div>
|
|
<div class="left ib w35 h40">
|
|
<select id="start-time-list">
|
|
</select>
|
|
</div>
|
|
<div class="left ib w15 h40">End:</div>
|
|
<div class="left ib w35 h40">
|
|
<select id="end-time-list">
|
|
</select>
|
|
</div>
|
|
|
|
<div class="clearall left ib w35 h40">Time Zone:</div>
|
|
<div class="right ib w65 h40">
|
|
<select id="timezone-list" class="w100">
|
|
<% ActiveSupport::TimeZone.zones_map.each do |name, tz| %>
|
|
<option value="<%= name + ',' + tz.tzinfo.name %>" class="label"><%= tz.to_s %></option>
|
|
<% end %>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="clearall left ib w35 h40">Recurring:</div>
|
|
<div class="right ib w65 h40">
|
|
<select id="recurring-mode-list" class="w100">
|
|
<option value="once" class="label">Not Recurring</option>
|
|
<option value="weekly" class="label">Weekly</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div id="session-step-2" class="create-session-wizard" layout-wizard-step="1">
|
|
<div class="w100 hb10">
|
|
<div id="divSessionGenre" class="left w40">
|
|
<div class="mb5">Please select a genre for your session:</div>
|
|
<div id="create-session-genre">
|
|
<%= render "genreSelector" %>
|
|
</div>
|
|
</div>
|
|
<div class="w50 right">
|
|
A genre will help other musicians more easily find your session if they are interested in a
|
|
particular style of music like classical, jazz, rock or bluegrass.
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div class="w100 hb10">
|
|
<div id="divSessionName" class="w40 mb10 left">
|
|
<div class="mb5">Please enter a name for your session:</div>
|
|
<div>
|
|
<input id="session-name" type="text" name="session-name" class="w80">
|
|
</div>
|
|
</div>
|
|
<div class="w50 right">
|
|
Give your session a name that will help other musicians see at a quick glance if it's interesting to them.
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div class="w100 hb10">
|
|
<div id="divSessionDescription" class="w40 mb10 left">
|
|
<div class="mb5">Please enter a description for your session:</div>
|
|
<div>
|
|
<textarea rows=3 id="session-description" name="description" class="session-description"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="w50 right">
|
|
We strongly recommend listing the names of any specific pieces of music you plan to play in your session,
|
|
both so that other musicians can decide to join you, and also so that they can practice a bit to be prepared.
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div class="w100 hb10">
|
|
<div class="w50 hb10 left">
|
|
<h3 class="hb3">Upload music notation for your session (optional):</h3>
|
|
<div>
|
|
<div class="w30 left">
|
|
<a class="button-orange btn-select-files" href="#">Select Files...</a>
|
|
<input type="file" class="hidden" id="session-select-files" value="Select Files..."
|
|
accept=".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt" multiple>
|
|
</div>
|
|
<div class="w70 left">
|
|
<div id="selected-filenames"></div>
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w50 left">
|
|
If you're playing a piece of music that you wrote, you may upload sheet music files that other
|
|
musicians can use to learn/play. Please do not upload sheet music that violates anyone else's copyright.
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
</div>
|
|
<div id="session-step-3" class="create-session-wizard" layout-wizard-step="2">
|
|
<div class="w45 left">
|
|
<div id="create-session-invite-musicians"></div>
|
|
<div class="icheckbuttons plus-checkbox">
|
|
<input type="checkbox" name="plus-musicians" id="session-plus-musicians" checked="checked"/>
|
|
<label for="session-plus-musicians" class="radio-text">
|
|
Plus any interested JamKazam musicians that I approve
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<br/>
|
|
<div class="f13">
|
|
To invite specific friends, click the Choose Friends button and select them in the dialog box, or
|
|
just start typing your friends' names and select them from the popup menu. If you choose to let
|
|
other interested musicians join you, you will have the opportunity to approve them when they RSVP.
|
|
</div>
|
|
<br/>
|
|
<h3>What language will be spoken?</h3>
|
|
<select id="session-language-list">
|
|
<% music_session_languages.each do |language| %>
|
|
<option value="<%= language[:id] %>"><%= language[:label] %></option>
|
|
<% end %>
|
|
</select>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div class="w50 right">
|
|
<h3 class="mb5">What will you play?</h3>
|
|
<div class="session-instrumentlist f12" id="instrument-select-list">
|
|
</div>
|
|
<br><br>
|
|
<h3 class="mb5">What other instruments/parts will you need?</h3>
|
|
<div class="session-instrumentlist f12" id="instrument-select-rsvp-list">
|
|
<div class="f12">
|
|
To let other musicians know which parts you'll need in the session, check the instrumental and
|
|
vocal parts that you need, the number of each, and the desired skill level of the musicians you're
|
|
comfortable playing with.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div id="session-step-4" class="create-session-wizard" layout-wizard-step="3">
|
|
<div class="left w55 f13">
|
|
<div class="icheckbuttons">
|
|
<ul id="session-policy">
|
|
<li>
|
|
<input type="radio" name="session-policy-type" id="session-policy-standard" policy-id="Standard" checked="checked">
|
|
<label for="session-policy-standard" class="radio-text">
|
|
Session participants agree to standard legal provisions<br>
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="session-policy-type" id="session-policy-creative" policy-id="Creative Commons">
|
|
<label for="session-policy-creative" class="radio-text">
|
|
Session participants agree to Creative Commons license<br>
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="session-policy-type" id="session-policy-offline" policy-id="Offline">
|
|
<label for="session-policy-offline" class="radio-text">
|
|
Session participants have made an offline agreement
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="session-policy-type" id="session-policy-jamtracks" policy-id="Jamtracks">
|
|
<label for="session-policy-jamtracks" class="radio-text">
|
|
Session participants agree to JamTracks legal provisions
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="session-policy-info" class="mb5">
|
|
<div class="info-box" policy-type="Standard">
|
|
This is a good option to choose when following normal legal conventions works - i.e. session participants agree
|
|
that whoever holds the copyright on the music being performed maintains all ownership rights and interests in
|
|
the music. Use the following link for full legal details of this choice:
|
|
<a href="http://www.jamkazam.com/session-legal-policies/standard" target="_blank">www.jamkazam.com/session-legal-policies/standard</a>.
|
|
</div>
|
|
<div class="info-box hidden" policy-type="Creative Commons">
|
|
This is a good option to choose when the session participants are creating new music that is not
|
|
already copyrighted, and when the musicians can agree that everyone will share ownership of any
|
|
music created in the session. Use the following link for full legal details of this choice:
|
|
<a href="http://www.jamkazam.com/session-legal-policies/creativecommons" target="_blank">www.jamkazam.com/session-legal-policies/creativecommons</a>
|
|
</div>
|
|
<div class="info-box hidden" policy-type="Offline">
|
|
This is a good option to choose when the session participants are already made an offline agreement
|
|
in the real world about who owns what, and when agreeing to the standard legal provisions doest not
|
|
adequately or accurately cover your legal bases. Use the following link for full legal details of this choice:
|
|
<a href="http://www.jamkazam.com/session-legal-policies/offline" target="_blank">www.jamkazam.com/session-legal-policies/offline</a>
|
|
</div>
|
|
<div class="info-box hidden" policy-type="Jamtracks">
|
|
This option must be selected when the musicians in a session will be playing one or more JamTracks.
|
|
Use the following link for full legal details of this choice:
|
|
<a href="http://www.jamkazam.com/session-legal-policies/jamtracks" target="_blank">www.jamkazam.com/session-legal-policies/jamtracks</a>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div id="divSessionPolicy">
|
|
<div class="terms-checkbox icheckbuttons">
|
|
<input type="checkbox" id="session-policy-confirm"/>
|
|
</div>
|
|
<div id="divSessionPolicyHelper" class="terms ml25">
|
|
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">Creative Commons CC BY-NC-SA license</a> in accordance with the <a rel="external" href="http://www.jamkazam.com/corp/terms" target="_blank">JamKazam Terms of Service</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right w40">
|
|
<h3>How will you handle musician access?</h3>
|
|
<select id="session-musician-access">
|
|
<option value="only-rsvp">Only RSVP musicians may join</option>
|
|
<option value="musicians-approval" selected="selected">Musicians may join by approval</option>
|
|
<option value="musicians">Musicians may join at will</option>
|
|
</select>
|
|
<div id="session-musician-access-info" class="mt5">
|
|
<div class="hidden info-box" musician-access-type="only-rsvp">
|
|
This is a good option when you have gone to the trouble to pre-plan your session, and have secured
|
|
RSVPs from a set of musicians who are likely to join you, and you don't need any other musicians,
|
|
and don't want to be disturbed by others asking to join while you are playing in the session.
|
|
</div>
|
|
<div class="info-box" musician-access-type="musicans-approval">
|
|
This is a good option when you have invited some musicians who are likely to join you, but you still
|
|
want to let other musicians request to join your session while it's in progress. Musicians can't
|
|
just wander in, but they can ask to join while you are in session, and you can approve or not.
|
|
</div>
|
|
<div class="hidden info-box" musician-access-type="musicians">
|
|
This is a good option when you haven't invited anyone to join your session ahead of time, and you
|
|
just want to set up an open jam style session, where anyone can wander in and out as they like to
|
|
join you.
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<h3>How will you handle fan access?</h3>
|
|
<select id="session-fans-access">
|
|
<option value="listen-chat-band">Fans may listen, chat with the band</option>
|
|
<option value="listen-chat-each" selected="selected">Fans may listen, chat with each other</option>
|
|
<option value="no-listen-chat">Fans may not listen to session</option>
|
|
</select>
|
|
<div id="session-fans-access-info" class="mt5">
|
|
<div class="info-box hidden" fans-access-type="listen-chat-band">
|
|
Fans can listen to you while you're playing in session, and can text chat with each other and the band while listening.
|
|
</div>
|
|
<div class="info-box" fans-access-type="listen-chat-each">
|
|
Fans can listen to you while you're playing in session, and can text chat with each other while listening.
|
|
</div>
|
|
<div class="info-box hidden" fans-access-type="no-listen-chat">
|
|
Fans cannot listen to you while you're playing in session, so your session is closed and private.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
<div id="session-step-5" class="create-session-wizard" layout-wizard-step="4">
|
|
<div class="left w55">
|
|
<h3>When are you starting your session?</h3>
|
|
<div id="session-start-type-disp" class="mt5"></div>
|
|
<br/><br/>
|
|
|
|
<h3 class="mb5">What are you playing?</h3>
|
|
<em id="session-name-disp"></em>
|
|
<div id="session-description-disp" class="mt5"></div><br/>
|
|
<div id="session-notations-disp" class="mt5"></div><br/>
|
|
|
|
<h3>What language will be spoken?</h3>
|
|
<div id="session-language-disp" class="mt5"></div>
|
|
</div>
|
|
<div class="right w40">
|
|
<h3>Who is invited?</h3>
|
|
<div id="session-invited-disp" class="mt5"></div><br/>
|
|
|
|
<h3>What instruments/parts do you need?</h3>
|
|
<div class="left ib w20 mt5">Me:</div>
|
|
<div class="left ib w75 mt5" id="session-instruments-me-disp" class="mt5"></div>
|
|
<div class="clearall left ib w20">Others:</div>
|
|
<div class="left ib w75" id="session-instruments-rsvp-disp" class="mt5"></div><br clear="all"></br>
|
|
|
|
<h3>What access policies are in effect?</h3>
|
|
<div id="session-musician-access-disp" class="mt5"></div>
|
|
<div id="session-fans-access-disp"></div><br/><br/>
|
|
|
|
<h3>What legal policy is in effect?</h3>
|
|
<div id="session-policy-disp" class="mt5"></div>
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-buttons">
|
|
<div id="create-session-buttons" class="right"></div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current step display template -->
|
|
<script type="text/template" id="template-session-steps">
|
|
<div class="sessionsteps-inner">
|
|
<a href='#' class="session-stepnumber left" data-step-number="0">1</a>
|
|
<div class="session-step-title">When Is Your Session?</div>
|
|
<a href='#' class="session-stepnumber left" data-step-number="1">2</a>
|
|
<div class="session-step-title">What Are You Playing?</div>
|
|
<a href='#' class="session-stepnumber left" data-step-number="2">3</a>
|
|
<div class="session-step-title">Who Is Playing With You?</div>
|
|
<a href='#' class="session-stepnumber left" data-step-number="3">4</a>
|
|
<div class="session-step-title">What Are Your Policies?</div>
|
|
<a href='#' class="session-stepnumber left" data-step-number="4">5</a>
|
|
<div class="session-step-title">Review & Confirm?</div>
|
|
<div class="clearall"></div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/template" id="template-session-buttons">
|
|
<div class="sessionbuttons-holder">
|
|
<a class="button-orange" href="http://jamkazam.desk.com/" target="_blank">HELP</a>
|
|
<a class="button-orange btn-back" href="#">BACK</a>
|
|
<a class="button-orange btn-next" href="#">NEXT</a>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Scheduled session template -->
|
|
<script type="text/template" id="template-scheduled-session">
|
|
<li>
|
|
<input type="radio" name="scheduled-session-info" id="{{data.id}}" value="false" />
|
|
<label for="{{data.id}}" class="radio-text w85">
|
|
{{data.scheduled_start}} : {{data.name}}
|
|
</label>
|
|
<div class="clearall"></div>
|
|
</li>
|
|
</script>
|
|
|
|
<!-- Instrument select template -->
|
|
<script type="text/template" id="template-instrument-option">
|
|
<div class="left ib w45 mb5 clearall plus-checkbox">
|
|
<input type="checkbox" id="{id}" session-instrument-id="{value}">
|
|
<label for="{id}" class="radio-text">
|
|
{label}
|
|
</label>
|
|
</div>
|
|
<div class="right ib w45 mb5">
|
|
<select class="f12" session-instrument-id="{value}">
|
|
<option value="1">Beginner</option>
|
|
<option value="2">Intermediate</option>
|
|
<option value="3">Expert</option>
|
|
</select>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Instrument select template for RSVP -->
|
|
<script type="text/template" id="template-instrument-rsvp-option">
|
|
<div class="left ib w35 mb5 plus-checkbox clearall">
|
|
<input type="checkbox" id="{id}" session-instrument-id="{value}">
|
|
<label for="{id}" class="radio-text">
|
|
{label}
|
|
</label>
|
|
</div>
|
|
<div class="right ib w65 mb5">
|
|
<select class="f12 rsvp-count" session-instrument-id="{value}">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
</select>
|
|
<select class="f12 rsvp-level" session-instrument-id="{value}">
|
|
<option value="0">Any Skill Level</option>
|
|
<option value="1">Beginner</option>
|
|
<option value="2">Beginner to Intermediate</option>
|
|
<option value="3">Intermediate</option>
|
|
<option value="4">Intermediate to Advanced</option>
|
|
<option value="5">Advanced</option>
|
|
</select>
|
|
</div>
|
|
</script> |