Changeset 29877 for main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

Timestamp:

2015-05-14T13:56:53+12:00 (9 years ago)

Author:

davidb

Message:

Work developing a guitar to play, and recording notes on piano when played (with the radio button set to record)

File:

• main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js (modified) (11 diffs)

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

@@ -1 @@
-// Sample Media Player using HTML5's Media API
+"use strict";
+
+// Based on: 
+//   Sample Media Player using HTML5's Media API
 // 
 // Ian Devlin (c) 2012
@@ -16 +19 @@
 var progressBar;
 
+var mediaPlaybackMode = null;
+
 var mediaStartPlayTime;
 var mediaStartPauseTime;
 var mediaPlayedNotes;
 
+var recordedNotesArray = null;
+
 function initialiseMediaPlayer() {
+
+    setPlaybackMode();
 
     mediaStartPlayTime  = null;
@@ -54 +63 @@
     });
 
-    // Add a listener for the play and pause events so the buttons state can be updated
-    mediaPlayer.addEventListener('play', function() {
-        // Change the button to be a pause button
-        changeButtonType(playPauseBtn, 'buttonx2 pause');
-    }, false);
-    mediaPlayer.addEventListener('pause', function() {
-        // Change the button to be a play button
-        changeButtonType(playPauseBtn, 'buttonx2 play');
-    }, false);
+    // Add a listener for the play and pause events so the buttons state can be updated
+    mediaPlayer.addEventListener('play', function() {
+    // Change the button to be a pause button
+    changeButtonType(playPauseBtn, 'buttonx2 pause');
+    }, false);
+    mediaPlayer.addEventListener('pause', function() {
+    // Change the button to be a play button
+    changeButtonType(playPauseBtn, 'buttonx2 play');
+    }, false);
     
-    // need to work on this one more...how to know it's muted?
-    mediaPlayer.addEventListener('volumechange', function(e) { 
-        // Update the button to be mute/unmute
-        if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
-        else changeButtonType(muteBtn, 'button mute');
-    }, false);  
-    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
+    // need to work on this one more...how to know it's muted?
+    mediaPlayer.addEventListener('volumechange', function(e) { 
+    // Update the button to be mute/unmute
+    if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
+    else changeButtonType(muteBtn, 'button mute');
+    }, false);  
+
+    mediaPlayer.addEventListener('ended', stopPlayer, false);   
 }
 
 function togglePlayPause() {
-    // If the mediaPlayer is currently paused or has ended
+    // If the mediaPlayer is currently paused or has ended
+    console.log("togglePlayPause()");
+    //console.log("*** mediaPlayer (paused,ended): (" + mediaPlayer.paused + "," + mediaPlayer.ended + ")");
+    //console.log("*** currentTime = " + mediaPlayer.currentTime);
+
     if (mediaPlayer.paused || mediaPlayer.ended) {
         if (mediaStartPlayTime == null) {
+        // Fresh play start
+        console.log("**** mediaPlaybackMode = " + mediaPlaybackMode);
+
             mediaStartPlayTime = Date.now();
         //console.log("*** mediaStartPlayTime=" + mediaStartPlayTime);
@@ -83 +100 @@
         }
         else {
+        // Resume playing
         var mediaPauseBuildup = mediaStartPauseTime - Date.now();
 
@@ -98 +116 @@
     // Otherwise it must currently be playing
     else {
-        mediaPauseTime = Date.now();
+        // put into pause state
+
+        mediaStartPauseTime = Date.now();
 
         // Change the button to be a play button
@@ -109 +129 @@
 }
 
-function pad(n, width, z) {
+function _pad(n, width, z) {
   z = z || '0';
   n = n + '';
@@ -118 +138 @@
 {
     var int_mins = Math.floor(time / 60);   
-
     var float_secs = time % 60;
-    //var int_secs = Math.floor(float_secs); 
-    
-    //var float_sub_sec = float_secs - int_secs;
-    //var int_sub_sec = float_sub_sec.toFixed(2)
-
-    var padded_secs = pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
+
+    var padded_secs = _pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
     return int_mins + ":" + padded_secs
 }
@@ -145 +160 @@
 
 // Stop the current media from playing, and return it to the start position
+
 function stopPlayer() 
 {
+    console.log("stopPlayer()");
     mediaPlayer.pause();
+
+    if (mediaPlaybackMode == "record") {
+    recordedNotesArray = mediaPlayedNotes[String(mediaStartPlayTime)];
+    if (recordedNotesArray.length>0) {
+        // non-trival data recorded
+        $('#save-recording-popup').dialog('open');
+    }
+    }
+
+    mediaStartPlayTime = null;
+    mediaStartPauseTime = null;
+
     mediaPlayer.currentTime = 0;
     displayCurrentTime();
+
 }
 
@@ -180 +210 @@
     mediaPlayer.play();
 }
+
+
+
 
 // Update the progress bar
@@ -235 +268 @@
 }
 
+
 // Resets the media player
 function resetPlayer() {
@@ -246 +280 @@
     displayCurrentTime();
     // Ensure that the play pause button is set as 'play'
-    changeButtonType(playPauseBtn, 'play');
-}
+    changeButtonType(playPauseBtn, 'buttonx2 play');
+}
+
+
+function setPlaybackMode() 
+{
+    //console.log("setPlaybackMode()");
+    mediaPlaybackMode = $('input[name=mpm-radio]:checked', '#mpmForm').val();
+}
+
+
+
+function saveRecording()
+{
+    var valid = true;
+
+    var $save_name_input = $("#save-recording-name");
+    var save_name = $save_name_input.val();
+    
+    if (save_name.match(/^\s*$/)) {
+    valid = false;
+    $save_name_input.addClass( "ui-state-error" );
+    }
+    else {
+    console.log("**** Saving under name '" + save_name +"': " + JSON.stringify(recordedNotesArray));
+
+    var $dialog = $('#save-recording-popup');
+
+    $dialog.dialog( "close" );
+    }
+
+    return valid;
+}
+
+
+$(document).ready(function() {
+    // Setup dialog
+
+    var dialog = $('#save-recording-popup').dialog({
+    width : 500,
+    height: 350,
+    autoOpen: false, // Do not open on page load
+    modal: true,     // Freeze the background behind the overlay
+
+    show: {
+            effect: "blind",
+            duration: 1000
+    },
+    hide: {
+            effect: "blind",
+            duration: 500
+    },
+
+    buttons: {
+            "Save Recording": saveRecording,
+            Cancel: function() {
+        dialog.dialog("close");
+            }
+    },
+    close: function() {
+            form[0].reset();
+            $( "#save-recording-name" ).removeClass( "ui-state-error" );
+    }
+    });
+
+    var form = dialog.find( "form" ).on( "submit", function( event ) {
+    event.preventDefault();
+    });
+ 
+
+});
+