Ignore:
Timestamp:
2015-05-12T14:57:02+12:00 (9 years ago)
Author:
davidb
Message:

Next round of improvements. More open-close bars. Drums with better images. Drums played on mousedown + key mappings. Playbar layout changed. Timing info when playing added.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

    r29863 r29867  
    13151315<div>
    13161316  <div id='media-player' style="width: 96%">
    1317     <video id="video" width="100%" controls="true">
    1318       <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
    1319       Your browser does not support the video tag.
    1320     </video>
    1321 
     1317
     1318
     1319    <div class="video-player-bar">
     1320      <div id="video-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
     1321    Video Display
     1322      </div>
     1323
     1324      <div id="video-area" class="documenttext"
     1325       style="display: none; position: absolute: left: 0px; top: 0px;">
     1326
     1327    <video id="video" width="100%" controls="true">
     1328      <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" />
     1329      Your browser does not support the video tag.
     1330    </video>
     1331      </div>
     1332    </div>
    13221333
    13231334    <div id='media-controls'>
    … …  
    13281339
    13291340      </div>
    1330       <div style="padding: 8px">
    1331     <button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>   
    1332     <button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
    1333     <button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
    1334     <button id='volume-inc-button' class='volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
    1335     <button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
    1336     <button id='mute-button' class='mute' title='mute' onclick="toggleMute('true');">Mute</button> 
     1341      <div style="width: 100%;">
     1342    <div style="float:left; padding: 8px; ">
     1343      <button id='replay-button'     class='buttonx2 replay' title='replay' onclick='replayMedia();'>Replay</button>   
     1344      <button id='play-pause-button' class='buttonx2 play' title='play' onclick='togglePlayPause();'>Play</button>
     1345      <button id='stop-button'       class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button>
     1346    </div>
     1347    <div style="float:right; padding: 8px; ">
     1348      <div style="display: inline; font-family: Arial,Helvetica,sans-serif; color: white">
     1349        <span id="mediaPlayerCurrentTime">0:00.0</span>/
     1350        <span id="mediaPlayerTotalTime">0:00.0</span>
     1351      </div>
     1352      <button id='volume-inc-button' class='button volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button>
     1353      <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button>
     1354      <button id='mute-button'       class='button mute' title='mute' onclick="toggleMute('true');">Mute</button>   
     1355    </div>
    13371356      </div>
    13381357    </div>
    1339    
     1358
     1359
     1360
     1361    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
     1362
     1363    <div class="analysis-bar">
     1364      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
     1365    Play Along
     1366      </div>
     1367
     1368
     1369    <div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
     1370          <div style="color: white; width:100%; height: 400px;">
     1371        <xsl:comment>filler</xsl:comment>
     1372      </div>
     1373     
     1374    </div>
     1375    </div>
     1376
     1377
     1378
     1379    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
     1380
     1381    <div class="playlist-bar">
     1382      <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
     1383    Controls
     1384      </div>
     1385
     1386      <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
     1387
     1388      <div id="playlist-area" class="documenttext"
     1389       style="display: none; position: absolute: left: 0px; top: 0px;">
     1390<!--
     1391    <div id='media-play-list'>
     1392      <h2>Play list</h2>
     1393      <ul id='play-list'>
     1394        <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li>
     1395        <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li>
     1396        <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li>
     1397      </ul>
     1398    </div>
     1399-->
     1400          <div style="color: white;">
     1401
     1402        <form style="width:99%;">
     1403          <fieldset>
     1404        <legend id="mpm-legend">Video Player Mode</legend>
     1405       
     1406        <div id="mpm-div" class="radio-div">
     1407
     1408          <div class="radio-label-combo" style="display:inline-block; width: 32%">
     1409            <span>
     1410              <input type="radio" id="mpm-record" name="mpm-radio" />
     1411            </span>
     1412            <label for="mpm-record" class="radio-label">
     1413              <span style="color: red;">
     1414            Lay down new track (record)
     1415              </span>
     1416            </label>
     1417          </div>
     1418
     1419          <div class="radio-label-combo" style="display:inline-block; width: 32%">
     1420            <span>
     1421              <input type="radio" id="mpm-neutral" name="mpm-radio" checked="checked"/>
     1422            </span>
     1423            <label for="mpm-neutral" class="radio-label">
     1424              <span style="color: orange;">
     1425            Put into Neutral
     1426              </span>
     1427            </label>
     1428          </div>
     1429
     1430          <div class="radio-label-combo" style="display:inline-block; width: 32%">
     1431            <span>
     1432              <input type="radio" id="mpm-game-on" name="mpm-radio" />
     1433            </span>
     1434            <label for="mpm-game-on" class="radio-label">
     1435              <span style="color: green;">
     1436            Game on!
     1437              </span>
     1438            </label>
     1439          </div>
     1440
     1441        </div>
     1442          </fieldset>
     1443        </form>
     1444
     1445        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; background: black">
     1446          <fieldset>
     1447        <legend id="mpm-legend">Popup Layers</legend>
     1448        <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
     1449        <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
     1450        <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
     1451        <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
     1452       
     1453        <div style="padding: 8px;">
     1454          <button id="mpm-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
     1455            Merge Selected
     1456          </button>
     1457          <button id="mpm-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
     1458            Split Selected
     1459          </button>
     1460          <button id="mpm-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
     1461          Edit Selected
     1462          </button>
     1463        </div>
     1464          </fieldset>
     1465        </form>
     1466
     1467        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; ">
     1468          <fieldset>
     1469        <legend id="pam-legend">Play Along Layers</legend>
     1470        <input type="checkbox" name="PianoHero" value="PianoHero" />Piano Hero<br />
     1471        <input type="checkbox" name="DrumHero"  value="DrumHero" />Drum-beat Hero<br />
     1472       
     1473        <div style="padding: 8px;">
     1474          <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
     1475            Merge Selected
     1476          </button>
     1477          <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
     1478            Split Selected
     1479          </button>
     1480          <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
     1481          Edit Selected
     1482          </button>
     1483        </div>
     1484          </fieldset>
     1485        </form>
     1486
     1487
     1488      </div>
     1489
     1490    </div>
     1491    </div>
     1492
     1493    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
     1494
    13401495    <div class="turnstyle-bar">
    13411496
    … …  
    13501505      </div>
    13511506
    1352       <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">
    1353     Popup Layers
     1507      <div id="guitar-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">
     1508    Guitar
    13541509      </div>
    13551510
    … …  
    14001555    </div>
    14011556
    1402 
     1557    <style>
     1558      .drumcontainer {
     1559        position: absolute;
     1560        top: 50%;
     1561        left: 50%;
     1562        transform: translateX(-50%) translateY(-50%);
     1563        font-size: 150%;
     1564        color: #888888;
     1565        pointer-events: onone;
     1566      }
     1567    </style>
    14031568    <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
    1404       <div id='jquery-drums'>
     1569      <div id='jquery-drums' style="padding: 8px;">
    14051570        <center>
    1406           <img src="{$httpCollection}/images/drum.png" class="drum" id="drum1" border="0" />
    1407           <img src="{$httpCollection}/images/drum.png" class="drum" id="drum2" border="0" />
    1408           <img src="{$httpCollection}/images/drum.png" class="drum" id="drum3" border="0" />
    1409           <img src="{$httpCollection}/images/drum.png" class="drum" id="drum4" border="0" />
     1571          <div style="display:inline-block;">
     1572        <div style="position: relative;">
     1573          <img style="position: relative;" width="202" height="204"
     1574               src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
     1575          <div class="drumcontainer" style="color: #555555">
     1576            &lt;Shift-C&gt;
     1577          </div>
     1578        </div>
     1579          </div>
     1580          <div style="display:inline-block;">
     1581        <div style="position: relative;">
     1582          <img style="position: relative;" width="197" height="192"
     1583              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
     1584          <div class="drumcontainer" >
     1585            &lt;Shift-B&gt;
     1586          </div>
     1587        </div>
     1588          </div>
     1589          <div style="display:inline-block;">
     1590        <div style="position: relative;">
     1591          <img style="position: relative;"  width="197" height="192"
     1592               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
     1593          <div class="drumcontainer" >
     1594            &lt;Shift-N&gt;
     1595          </div>
     1596        </div>
     1597          </div>
     1598          <div style="display:inline-block;">
     1599        <div style="position: relative;">
     1600          <img style="position: relative;" width="197" height="192"
     1601               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" />
     1602          <div class="drumcontainer" >
     1603            &lt;Shift-M&gt;
     1604          </div>
     1605        </div>
     1606          </div>
    14101607          <br />
    1411           <img src="{$httpCollection}/images/drum.png" class="drum" id="drum5" border="0" />
    1412           <img src="{$httpCollection}/images/drum.png" class="drum" id="drum6" border="0" />
    1413           <br />
     1608          <div style="display:inline-block;">
     1609        <div style="position: relative;">
     1610          <img style="position: relative;" width="240" height="234"
     1611               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
     1612          <div class="drumcontainer" >
     1613            &lt;Space-Bar&gt;
     1614          </div>
     1615        </div>
     1616          </div>
    14141617        </center>
    14151618      </div>
    … …  
    14181621
    14191622
    1420     <div id="playlist-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
    1421 <!--
    1422     <div id='media-play-list'>
    1423       <h2>Play list</h2>
    1424       <ul id='play-list'>
    1425         <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li>
    1426         <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li>
    1427         <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li>
    1428       </ul>
    1429     </div>
    1430 -->
     1623    <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
    14311624          <div style="color: white;">
    1432         <form style="padding: 20px;">
    1433           <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br />
    1434           <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br />
    1435           <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br />
    1436           <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br />
    1437           <input type="checkbox" name="PianoHere" value="PianoHero" />Play-along Piano Hero<br />
    1438         </form>
     1625        Guitar area
    14391626      </div>
    1440      
    1441     </div>
    1442 
    1443       </div>
     1627    </div>
     1628
     1629      </div>
     1630
     1631    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div>
     1632
    14441633
    14451634    </div>
     1635
     1636
     1637
    14461638
    14471639    <script>
    14481640      <xsl:text disable-output-escaping="yes">
    14491641    $(function(){
     1642      transformToTurnstyleBlock("video");
     1643      transformToTurnstyleBlock("playlist");
     1644
    14501645      transformToTurnstyleBlock("piano");
    1451       transformToTurnstyleBlock("playlist");
    14521646      transformToTurnstyleBlock("drumkit");
     1647      transformToTurnstyleBlock("guitar");
     1648
     1649      transformToTurnstyleBlock("analysis");
     1650
     1651      $('#video-openclose').trigger("click");
     1652
    14531653    });
    14541654    var piano_keyboard = new AudioSynthView();
Note: See TracChangeset for help on using the changeset viewer.