add 'controls' option to exp-lookit-video 'video' parameter to displa…

…y controls to user. Display cursor to user in this case. Store 'currentTime' along with 'videoStopped' and 'videoStarted' events, and log when video is started/stopped by user as well as automatically.
lookit · Feb 24, 2021 · 577189c · 577189c
1 parent 1edbb22
commit 577189c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 21 deletions.
diff --git a/app/components/exp-lookit-video/component.js b/app/components/exp-lookit-video/component.js
@@ -78,6 +78,9 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
                 },
                 'loop': {
                     type: 'boolean'
+                },
+                'controls': {
+                    type: 'boolean'
                 }
             }
         },
@@ -189,6 +192,10 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
 
     actions: {
 
+        videoPaused() {
+            this.send('setTimeEvent', 'videoPaused', {'currentTime': $('#player-video').length ? $('#player-video')[0].currentTime : null});
+        },
+
         videoStarted() {
             /**
              * When video begins playing (recorded each time video starts if played through more than once)
@@ -199,7 +206,7 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
                 return;
             }
 
-            this.send('setTimeEvent', 'videoStarted');
+            this.send('setTimeEvent', 'videoStarted', {'currentTime': $('#player-video').length ? $('#player-video')[0].currentTime : null});
             if (this.get('testVideoTimesPlayed') === 0) {
                 window.clearInterval(this.get('testTimer'));
                 if (this.get('requiredDuration')) {
@@ -225,12 +232,6 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
             if (this.get('isDestroying') || this.get('isDestroyed')) {
                 return;
             }
-            /**
-             * When video completes playback (recorded each time if played more than once)
-             *
-             * @event videoStopped
-             */
-            this.send('setTimeEvent', 'videoStopped');
             this.set('testVideoTimesPlayed', this.get('testVideoTimesPlayed') + 1);
             if (this.isReadyToFinish()) {
                 this.readyToFinish();

diff --git a/app/components/exp-lookit-video/doc.rst b/app/components/exp-lookit-video/doc.rst
@@ -218,6 +218,9 @@ video [Object]
     :loop: [Boolean]
         whether the video should loop, even after any ``requireTestVideoCount`` is satisfied.
 
+    :controls: [Boolean | ``false``]
+        whether to display controls allowing the user to seek, pause/resume, and adjust volume.
+
 audio [Object | ``{}``]
     Object describing the audio to play along with video, if any. Can have properties:
 
@@ -299,9 +302,17 @@ Events recorded
 
 The events recorded specifically by this frame are:
 
-:videoStarted: When video begins playing (recorded each time video starts if played through more than once)
+:videoStarted: When video begins playing (recorded each time video starts if played through more than once).
+
+   :currentTime: [Number]
+       Playback time at start in s. This will be ~0 if video is being started/restarted automatically but may be nonzero
+       if controls were enabled and video playback was paused by the participant.
+
+:videoStopped: When video completes playback (recorded each time if played more than once) OR is paused, either
+   automatically because study was paused or by participant if controls were shown.
 
-:videoStopped: When video completes playback (recorded each time if played more than once)
+   :currentTime: [Number]
+       Playback time at pause in s.
 
 :audioStarted: When audio begins playing (recorded each time video starts if played through more than once)
 

diff --git a/app/components/exp-lookit-video/template.hbs b/app/components/exp-lookit-video/template.hbs
@@ -1,7 +1,7 @@
 {{! template-lint-disable no-invalid-interactive}}
 {{! template-lint-disable no-html-comments}}
 
-<div class="input-group exp-lookit-video row {{unless autoProceed "cursor-display"}}">
+<div class="input-group exp-lookit-video row {{unless (and autoProceed (not video.controls)) "cursor-display"}}">
 
     <!--RECORDER-->
     <div class="row recorder-container video-recorder-hidden">
@@ -28,8 +28,10 @@
                 <video id="player-video"
                        class="test story-image"
                        autoplay="autoplay"
+                       controls={{ if video_parsed.controls "controls" "" }}
+                       onpause={{ action "videoPaused" }}
                        onended={{ action "videoStopped"}}
-                       onplay={{action "videoStarted"}}>
+                       onplay={{ action "videoStarted" }}>
                     {{#each video_parsed.source as |stream|}}
                         <source src={{stream.src}} type={{stream.type}}>
                     {{/each}}

diff --git a/app/mixins/infant-controlled-timing.js b/app/mixins/infant-controlled-timing.js
@@ -217,9 +217,9 @@ var infantControlledTimingMixin = Ember.Mixin.create({
                  *
                  * @event lookawayEndedTrial
                  */
-                this.send('setTimeEvent', 'lookawayEndedTrial');
-                this.set('trialEndReason', 'lookaway');
-                this.setTrialEndTime();
+                _this.send('setTimeEvent', 'lookawayEndedTrial');
+                _this.set('trialEndReason', 'lookaway');
+                _this.setTrialEndTime();
                 _this.onLookawayCriterion();
             }, delay));
         }
@@ -332,13 +332,6 @@ var infantControlledTimingMixin = Ember.Mixin.create({
         },
         this.get('measurementPeriodDelay') * 1000)
         );
-
-
-
-
-
-
-
     },
 
     /**