Changeset 29867


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.

Location:
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled
Files:
2 added
6 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

    r29863 r29867  
    280280        // avoid playing a note if some kind of control-key
    281281        // combination (such a web page reload) is pressed
    282         return;
     282        return false;
     283    }
     284
     285    if (e.shiftKey) {
     286        return fnDrumKeyboard(e);
    283287    }
    284288   
    … …  
    431435    };
    432436
     437    var fnDrumKeyboard = function(e) {
     438    //console.log("*** drum pressed: " + e.key);
     439    if (e.key == "C") {
     440        $('#drum1').trigger("mousedown");
     441    }
     442    else if (e.key == "B") {
     443        $('#drum2').trigger("mousedown");
     444    }
     445    else if (e.key == "N") {
     446        $('#drum3').trigger("mousedown");
     447    }
     448    else if (e.key == "M") {
     449        $('#drum4').trigger("mousedown");
     450    }
     451    else if (e.key == " ") {
     452        $('#drum5').trigger("mousedown");
     453    }
     454
     455    e.preventDefault();
     456    return false;
     457    }
     458
     459
    433460    // Set up global event listeners
    434461

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js

    r29863 r29867  
    1919    $('#video').on('loadedmetadata', function() {
    2020
     21    displayDuration(this.duration);
     22
    2123    // Create a MediaElementAudioSourceNode
    2224    // Feed the HTMLMediaElement into it
    … …  
    2729    // music and have the filter 'kick in' when 'Missing Out' button
    2830    // pressed
    29    
    3031
    3132    var tinnyEffectNode = audioCtx.createScriptProcessor(bufferSize, 2, 2);

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js

    r29863 r29867  
    2525    var drum;
    2626   
    27     $('.drum').click(function() {
     27    $('.drum').mousedown(function() {
    2828   
    29     //find the drum it and play the respective audio
     29    //find the drum hit and play the respective audio
    3030    drum = $(this).attr('id');
    3131    drum = eval(drum);

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

    r29863 r29867  
    5757    mediaPlayer.addEventListener('play', function() {
    5858        // Change the button to be a pause button
    59         changeButtonType(playPauseBtn, 'pause');
     59        changeButtonType(playPauseBtn, 'buttonx2 pause');
    6060    }, false);
    6161    mediaPlayer.addEventListener('pause', function() {
    6262        // Change the button to be a play button
    63         changeButtonType(playPauseBtn, 'play');
     63        changeButtonType(playPauseBtn, 'buttonx2 play');
    6464    }, false);
    6565   
    … …  
    6767    mediaPlayer.addEventListener('volumechange', function(e) {
    6868        // Update the button to be mute/unmute
    69         if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
    70         else changeButtonType(muteBtn, 'mute');
     69        if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
     70        else changeButtonType(muteBtn, 'button mute');
    7171    }, false); 
    7272    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false);
    … …  
    9292
    9393        // Change the button to be a pause button
    94         changeButtonType(playPauseBtn, 'pause');
     94        changeButtonType(playPauseBtn, 'buttonx2 pause');
    9595        // Play the media
    9696        mediaPlayer.play();
    … …  
    101101
    102102        // Change the button to be a play button
    103         changeButtonType(playPauseBtn, 'play');
     103        changeButtonType(playPauseBtn, 'buttonx2 play');
    104104        // Pause the media
    105105        mediaPlayer.pause();
    … …  
    109109}
    110110
     111function pad(n, width, z) {
     112  z = z || '0';
     113  n = n + '';
     114  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
     115}
     116
     117function convertSecsToTimeStr(time)
     118{
     119    var int_mins = Math.floor(time / 60);   
     120
     121    var float_secs = time % 60;
     122    //var int_secs = Math.floor(float_secs);
     123   
     124    //var float_sub_sec = float_secs - int_secs;
     125    //var int_sub_sec = float_sub_sec.toFixed(2)
     126
     127    var padded_secs = pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
     128    return int_mins + ":" + padded_secs
     129}
     130
     131
     132function displayCurrentTime()
     133{
     134    var currentTime = mediaPlayer.currentTime;
     135    var formattedTime = convertSecsToTimeStr(currentTime);
     136    $('#mediaPlayerCurrentTime').html(formattedTime);
     137}
     138
     139function displayDuration(duration)
     140{
     141     var formattedTime = convertSecsToTimeStr(duration);
     142     $('#mediaPlayerTotalTime').html(formattedTime);
     143}
     144
     145
    111146// Stop the current media from playing, and return it to the start position
    112 function stopPlayer() {
    113     mediaPlayer.pause();
    114     mediaPlayer.currentTime = 0;
     147function stopPlayer()
     148{
     149    mediaPlayer.pause();
     150    mediaPlayer.currentTime = 0;
     151    displayCurrentTime();
    115152}
    116153
    … …  
    126163    if (mediaPlayer.muted) {
    127164        // Change the cutton to be a mute button
    128         changeButtonType(muteBtn, 'mute');
     165        changeButtonType(muteBtn, 'button mute');
    129166        // Unmute the media player
    130167        mediaPlayer.muted = false;
    … …  
    132169    else {
    133170        // Change the button to be an unmute button
    134         changeButtonType(muteBtn, 'unmute');
     171        changeButtonType(muteBtn, 'button unmute');
    135172        // Mute the media player
    136173        mediaPlayer.muted = true;
    … …  
    146183// Update the progress bar
    147184function updateProgressBar() {
    148     // Work out how much of the media has played via the duration and currentTime parameters
    149     var percentage = (100 / mediaPlayer.duration) * mediaPlayer.currentTime;
    150     // Update the progress bar's value
    151     progressBar.value = percentage;
    152     // Update the progress bar's text (for browsers that don't support the progress element)
    153         progressBar.innerHTML = Math.floor(percentage) + '% played';
     185    // Work out how much of the media has played via the duration and currentTime parameters
     186    var percentage = (100 / mediaPlayer.duration) * mediaPlayer.currentTime;
     187
     188    // Update the progress bar's value
     189    progressBar.value = percentage;
     190
     191    // Update the progress bar's text (for browsers that don't support the progress element)
     192    progressBar.innerHTML = Math.floor(percentage) + '% played';
     193
     194    displayCurrentTime();
    154195}
    155196
    … …  
    161202    // Update the video time
    162203    mediaPlayer.currentTime = time;
     204    displayCurrentTime();
    163205}
    164206
    … …  
    195237// Resets the media player
    196238function resetPlayer() {
    197         mediaStartPlayTime = null;
    198         mediaStartPauseTime = null;
    199 
    200     // Reset the progress bar to 0
    201     progressBar.value = 0;
    202     // Move the media back to the start
    203     mediaPlayer.currentTime = 0;
    204     // Ensure that the play pause button is set as 'play'
    205     changeButtonType(playPauseBtn, 'play');
    206 }
     239    mediaStartPlayTime = null;
     240    mediaStartPauseTime = null;
     241   
     242    // Reset the progress bar to 0
     243    progressBar.value = 0;
     244    // Move the media back to the start
     245    mediaPlayer.currentTime = 0;
     246    displayCurrentTime();
     247    // Ensure that the play pause button is set as 'play'
     248    changeButtonType(playPauseBtn, 'play');
     249}

  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css

    r29863 r29867  
    2424}
    2525
    26 button {
     26
     27.button {
    2728    text-indent:-9999px;
    2829    width:16px;
    … …  
    3334}
    3435
     36
     37
     38.buttonx2 {
     39    text-indent:-9999px;
     40    width:32px;
     41    height:32px;
     42    border:none;
     43    cursor:pointer;
     44    background:transparent url('images/buttons_x2.png') no-repeat 0 0;
     45}
     46
     47/*
    3548.pause { background-position:-19px 0; }
    3649.stop { background-position:-38px 0; }
     50*/
    3751.volume-plus { background-position:-57px 0; }
    3852.volume-minus { background-position:-76px 0; }
    3953.mute { background-position:-95px 0; }
    4054.unmute { background-position:-114px 0; }
     55/*
    4156.replay { background-position:-133px 0; }
     57*/
     58
     59.pause { background-position:-38px 0; }
     60.stop { background-position:-76px 0; }
     61/*
     62.volume-plus { background-position:-114px 0; }
     63.volume-minus { background-position:-152px 0; }
     64.mute { background-position:-190px 0; }
     65.unmute { background-position:-228px 0; }
     66*/
     67.replay { background-position:-266px 0; }
    4268
    4369#progress-bar {

  • 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.