Hugging Face's logo

Spaces:
clr
/
spjall
Running

App Files Community
1
spjall
File size: 4,543 Bytes 
11dee72
 
 
 
 
 
 
0df8086
11dee72
 
 
 
 
 
 
 
 
 
 
 
 
 
0df8086
 
 
 
11dee72
 
 
 
 
 
 
 
 
 
0df8086
 
11dee72
 
0df8086
11dee72
 
 
bc7cad0
11dee72
bc7cad0
 
 
 
 
 
 
11dee72
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 

/* --------------------------------------------------*/
/* -------------   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".
    });


    // Listen for user to play video. ** i added this
    vid.addEventListener("play", function(){
        $( '.movControl' ).html("&#9632"); // Change all bullets to "stop".
    });


    // 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')) {
            if(!vid.paused) {
                vid.pause();
            }

            else {
                var newTime = $(this).attr("beg");
                vid.currentTime = newTime / 1000;

                vid.play();

                var segmentDur = $(this).attr("end") - newTime

                setTimeout(function(){
                document.getElementById('speakera').pause();
                }, segmentDur);

            }


/*
            // 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.
    }
}