Create js/js.php

js/js.php

@@ -0,0 +1,125 @@
+
+/* --------------------------------------------------*/
+/* -------------   MEDIA PLAYBACK   ----------------- */
+/* ---------------------https://web.archive.org/web/20220121094229/ */
+/* https://childes.talkbank.org/browser/index.php?url=Eng-UK/MPI-EVA-Manchester/Eleanor/020006b.cha */
+/*-----------------------------*/
+$(function (){
+    // Add "timeupdate" listener to "#speakera".
+    var vid = document.getElementById("speakera");
+    vid.addEventListener("timeupdate", function(){
+        updatePosition(this.currentTime);
+    });
+
+
+    // Listen for user to pause video.
+    vid.addEventListener("pause", function(){
+        $( '.movControl' ).removeClass( 'playing' ); // Mark all bullets as not "playing".
+        $( '.movControl' ).html("&#9654"); // Change all bullets to "play".
+    });
+
+
+
+
+    // Click on the little 'play' character at end of utterance line.
+    //$("body").on('click', ".movControl",
+    $("body").on('click', 'span[name=utterance]',
+        function(event) {
+            var vid = document.getElementById("speakera");         
+
+
+            // If user clicked "stop" on a playing line, pause video, remove ".playing", change icon to "play".
+            if($(this).children(".movControl").hasClass('playing')) {
+                vid.pause();
+            }
+            else {
+                var newTime = $(this).attr("beg");
+                vid.currentTime = newTime / 1000;
+
+                vid.play();
+            }
+
+
+/*
+            // If video currently paused, and click on highlighted line, then play video.
+            if(( vid.paused ) && ($(this).children(".movControl").hasClass('playing'))) {
+                vid.play();
+            }
+            // Set media to clicked location and pause video
+            else {
+                var newTime = $(this).attr("beg");
+                vid.currentTime = newTime / 1000;
+
+                vid.pause();
+            }
+    */
+
+        }
+    );
+
+
+    getIntervals();
+});
+
+
+
+// Create "intervals[]" from each <span name="utterance"> using its id/class to get the begin/end times.
+// Needs to be called whenever a new chat file is loaded.
+var intervals = [];
+function getIntervals() {
+    $( 'span[name=utterance]' ).each(function( index ) {
+        //console.log( index + ", begin: " + $( this ).prop('beg') + ", end: " + $( this ).prop('end'));
+        intervals.push({"begin": $( this ).prop('beg'), "end": $( this ).prop('end')});
+    });
+
+    //console.log(intervals);
+}
+
+
+// Set $ref as not playing.
+function notPlaying($ref) {
+    $ref.removeClass('uttPlaying');
+    $ref.children(".movControl").html("&#9654;"); // Show "play" icon.
+    $ref.children(".movControl").removeClass("playing");
+}
+
+// Set $ref as playing.
+function isPlaying($ref) {
+    $ref.addClass('uttPlaying');
+    $ref.children(".movControl").html("&#9632;"); // Show "stop" icon.
+    $ref.children(".movControl").addClass("playing");
+}
+
+
+// Returns true if $elem is beyond the current scrolled view.
+function isScrolledOutOfView($elem) {
+    var $window = $(window);
+
+    var windowTop = $window.scrollTop();
+    var windowBottom = windowTop + $window.height();
+
+    var elemTop = $elem.offset().top;
+    var elemBottom = elemTop + $elem.height();
+
+    return ((elemBottom > windowBottom) || (elemTop < windowTop));
+}
+
+// Callback function for timeupdate event.
+function updatePosition( currentTime ) {
+    var msTime = currentTime * 1000;
+
+    for ( c = 0; c < intervals.length; c++ ) {
+        if ((msTime >= intervals[c].begin) && (msTime < intervals[c].end)) {
+            notPlaying($( 'span[name=utterance]' )); // Mark everything as "not playing".
+            isPlaying($( '#' +  intervals[c].begin )); // Mark line corresponding to currentTime as "playing".
+
+            // Auto-scroll if playing line is out of view.
+            if (isScrolledOutOfView($('.playing'))) {
+                $('html, body').animate({
+                    scrollTop: ($(".playing").offset().top - ($(window).height() / 2))
+                }, 500);
+            }
+        }
+        //$( 'span[name=utterance]' ).removeClass('uttPlaying'); // No interval defined at currentTime.
+    }
+}