From 0b62e0813eed25d8fe52a1a1b9172d56c30013c8 Mon Sep 17 00:00:00 2001 From: Kim Scott Date: Wed, 4 Jul 2018 11:21:33 -0400 Subject: [PATCH] Fix linting errors (#6) * fix bug where completing audio in one exp-lookit-dialogue-page frame was carrying through to other frames so users were not actually required to play audio; only require users to play audio rather than completing it for character audio * display images centered on a specified left value, rather than left-aligned at left value, to avoid overlapping images for polcon study * fix animation of images to work with new formatting * update troubleshooting info for exp-config frame * Add skeleton of observation frame. Displays webcam, allows user to show/hide webcam. * add dependencies * add placeholder survey frame and get dependencies working * fix green outline formatting for selected choice broken with previous formatting update * Wiggle the currently-speaking character so kids can tell who's saying what! * Get survey frame working. Allow specification of arbitrary fields, validation, repopulation when returning to frame. * Record transition to previous frame as event * Update exp-video-config formatting and troubleshooting text to be easier to follow. Include instructions to use Chrome or Firefox on a computer, not a mobile device, at the top. Break down instructions by browser. Don't send people to outside webpages unless necessary, just show screenshots for on-screen fixes. Edit wording on main instructions. * add time limit for recording; show/hide recorder smoothly; add video recording; add option to record starting immediately * Set up video recorder to work using Pipe instead of HDFVR. This is an initial proof of concept only. Current status: recorder shows up correctly formatted, w/o record button shown, in correct element; we can proceed from one frame to another without re-confirming settings; we can programmatically start and stop recording. (NOT YET: pause, wait for upload/allow overlapping recordings, warn if no audio, destroy recorder, display consent video to user, wait until recording is ready/started, edit troubleshooting directions, check video naming convention, security review.) Note that html5 is only used on secure origins, so for local development need to use https://localhost. * Remove requirement that user reloads webcam before finishing exp-video-config. * remove unnecessary _SWFId data * Make sure that new exp-lookit-dialogue-page styles don't affect other frames when in fullscreen! Fixes bug in fullscreen display for exp-lookit-story-page. * add instructions in exp-video-config-quality to adjust camera height based on child over shoulder * check that volume exceeds minimal level during exp-video-config frame * destroy recorder after frame ends * add keypress handler for enter -> next * revert attempt to add source selection to exp-video-config frame * only call finish() once in exp-video-consent * make pause/resume into placeholder dummies for backwards compatibility * only stop video recorder if it's currently recording * fix bug where exp-video-config called stop and, since recording hadn't ever been started, stop was deferred until 3s later by which point another frame might have a recorder active * have exp-lookit-observation use pause (placeholder) rather than stop until implementing multiple video clip solution for pausing * reversion of earlier changes to ensure proper playback - not sure whether this is necessary though * edit Next button on exp-lookit-dialogue-page to say "or press Enter" as well * store list of videos per frame; embed webrtc player in physics frame; store pipe account hash in env; dummy fns for pause/resume for now * add observation frame, using webrtc * make recorder elements & functions more consistent across frames in prep for generalizing * set up exp-lookit-story-page to work with new recorder * avoid error on leaving FS when frame has been destroyed * don't destroy recorder when upload completes; handled elsewhere (and leave flexibility for future multiple recordings) * adapt exp-lookit-dialogue-page to work with new recorder * remove unnecessary fields from exp-lookit-story-page * restore enter == next on exp-lookit-dialogue-page (not sure why pulling from develop is not reinstating this but other commits appear to be here) * Mark geometry frame as not adapted for webrtc. * remove unused frames for clarity when dealing with codebase * move stopping/destroying video recorder to mixin instead of individual frames * use frame name directly when recording event, rather than manually adding a boilerplate modification of makeTimeEvent to every frame * don't show timer on pipe recorder, to avoid some errors where it's not found * restore radio-group formatting, accidentally removed earlier * format next button so it's not flush at bottom of page * refactor to make recorder setup & triggering of actions once ready to record part of the VideoRecord mixin. Some cleanup of willDestroy refactor from earlier. * actually require at least 3 s recording on consent video * ignore compiled docs * have video-config check for both camera and mic, and allow reload * remove unused 'hidden' attribute from video-recorder service * stop tracking docs * move recorder hide/show functions to mixin and get working * set up webcam warnings for physics study - before starting test will pause and indicate if there's no webcam available. Doesn't currently require sound because that's not critical during study. * update the troubleshooting directions for the exp-video-config frame for webrtc player * load Pipe environment ID from env file * use loaded pipe environment ID * update docs for use of this mixin * keep original naming scheme since it's used by lookit-api * remove Flash player config * add directions about selecting mic/camera devices in Chrome to exp-video-config frame * remove unused video-pause mixin * Revert "ignore compiled docs" This reverts commit 2ac336628c30a54dfaffc2f56066e98dd9c824fe. * update yuidocs * fix linting errors --- .../exp-lookit-dialogue-page/component.js | 7 +-- .../exp-lookit-observation/component.js | 42 +++++++------- .../components/exp-video-consent/component.js | 2 +- .../components/exp-video-physics/component.js | 7 +-- .../components/exp-video-preview/component.js | 1 - exp-player/addon/mixins/video-record.js | 58 +++++++++---------- exp-player/addon/services/video-recorder.js | 22 ++++--- 7 files changed, 64 insertions(+), 75 deletions(-) diff --git a/exp-player/addon/components/exp-lookit-dialogue-page/component.js b/exp-player/addon/components/exp-lookit-dialogue-page/component.js index 6ce05aa8..e4429ae4 100644 --- a/exp-player/addon/components/exp-lookit-dialogue-page/component.js +++ b/exp-player/addon/components/exp-lookit-dialogue-page/component.js @@ -524,8 +524,6 @@ export default ExpFrameBaseUnsafeComponent.extend(FullScreen, VideoRecord, { } }, - - // Move an image up and down until the isSpeaking class is removed. // Yes, this could much more naturally be done by using a CSS animation property // on isSpeaking, but despite animations getting applied properly to the element, @@ -537,9 +535,9 @@ export default ExpFrameBaseUnsafeComponent.extend(FullScreen, VideoRecord, { if ($('#' + imageId).hasClass('isSpeaking')) { $('#' + imageId).animate({'margin-bottom': '.3%'}, 250, function() { $('#' + imageId).animate({'margin-bottom': '0%'}, 250, function() { - _this.wiggle(imageId); - }) + _this.wiggle(imageId); }); + }); } }, @@ -580,7 +578,6 @@ export default ExpFrameBaseUnsafeComponent.extend(FullScreen, VideoRecord, { $('#' + imageId).addClass('isSpeaking'); this.wiggle(imageId); - /** * When image audio is started * diff --git a/exp-player/addon/components/exp-lookit-observation/component.js b/exp-player/addon/components/exp-lookit-observation/component.js index fb2bb88f..aeaacbe0 100644 --- a/exp-player/addon/components/exp-lookit-observation/component.js +++ b/exp-player/addon/components/exp-lookit-observation/component.js @@ -140,34 +140,34 @@ export default ExpFrameBaseComponent.extend(VideoRecord, { // Override to deal with whether or not recording is starting automatically whenPossibleToRecord: function() { - if (this.get('startRecordingAutomatically')) { - var _this = this; - if (this.get('hasCamAccess') && this.get('recorderReady')) { - this.startRecorder().then(() => { - _this.set('recorderReady', false); - }); - } - } else { - $('#recordButton').show(); + if (this.get('startRecordingAutomatically')) { + var _this = this; + if (this.get('hasCamAccess') && this.get('recorderReady')) { + this.startRecorder().then(() => { + _this.set('recorderReady', false); + }); + } + } else { + $('#recordButton').show(); $('#recordingText').text('Not recording yet'); - } + } }.observes('recorder.hasCamAccess', 'recorderReady'), showWarning() { if (!this.get('showVideoWarning')) { - this.set('showVideoWarning', true); - this.send('setTimeEvent', 'webcamNotConfigured'); + this.set('showVideoWarning', true); + this.send('setTimeEvent', 'webcamNotConfigured'); - // If webcam error, save the partial frame payload immediately, so that we don't lose timing events if - // the user is unable to move on. - this.send('save'); + // If webcam error, save the partial frame payload immediately, so that we don't lose timing events if + // the user is unable to move on. + this.send('save'); - var recorder = this.get('recorder'); - recorder.show(); - recorder.on('onCamAccessConfirm', () => { - this.send('removeWarning'); - this.startRecorder(); - }); + var recorder = this.get('recorder'); + recorder.show(); + recorder.on('onCamAccessConfirm', () => { + this.send('removeWarning'); + this.startRecorder(); + }); } }, diff --git a/exp-player/addon/components/exp-video-consent/component.js b/exp-player/addon/components/exp-video-consent/component.js index 426d9b69..c29a806e 100644 --- a/exp-player/addon/components/exp-video-consent/component.js +++ b/exp-player/addon/components/exp-video-consent/component.js @@ -63,7 +63,7 @@ export default ExpFrameBaseComponent.extend(VideoRecord, { this.set('startedRecording', true); // Require at least 3 s recording setTimeout(function() { - $('#submitbutton').prop( "disabled", false); + $('#submitbutton').prop('disabled', false); }, 3000); }); }, diff --git a/exp-player/addon/components/exp-video-physics/component.js b/exp-player/addon/components/exp-video-physics/component.js index 809cb02d..0fd0007a 100644 --- a/exp-player/addon/components/exp-video-physics/component.js +++ b/exp-player/addon/components/exp-video-physics/component.js @@ -286,7 +286,6 @@ export default ExpFrameBaseUnsafeComponent.extend(FullScreen, MediaReload, Video this.showRecorder(); }, - actions: { removeWarning() { @@ -298,7 +297,6 @@ export default ExpFrameBaseUnsafeComponent.extend(FullScreen, MediaReload, Video this.pauseStudy(); }, - reloadRecorder() { this.destroyRecorder(); this.setupRecorder(this.$(this.get('recorderElement')), false); @@ -327,8 +325,7 @@ export default ExpFrameBaseUnsafeComponent.extend(FullScreen, MediaReload, Video // use that globally instead of just checking here. if (!this.get('recorder.hasCamAccess') || !this.get('recorder.hasWebCam')) { this.showWarning(); - } - else { + } else { this.set('currentTask', 'test'); } } else { @@ -418,8 +415,6 @@ export default ExpFrameBaseUnsafeComponent.extend(FullScreen, MediaReload, Video pauseStudy(pause) { // only called in FS mode Ember.run.once(this, () => { - - if (!this.get('isLast')) { try { this.set('hasBeenPaused', true); diff --git a/exp-player/addon/components/exp-video-preview/component.js b/exp-player/addon/components/exp-video-preview/component.js index 63bebf02..7cee249f 100644 --- a/exp-player/addon/components/exp-video-preview/component.js +++ b/exp-player/addon/components/exp-video-preview/component.js @@ -63,7 +63,6 @@ export default ExpFrameBaseComponent.extend(MediaReload, VideoRecord, { return !(this.get('recorder.hasCamAccess') && this.get('recorderReady')); }), - actions: { accept() { this.set('prompt', false); diff --git a/exp-player/addon/mixins/video-record.js b/exp-player/addon/mixins/video-record.js index 695985e1..0e385fd3 100644 --- a/exp-player/addon/mixins/video-record.js +++ b/exp-player/addon/mixins/video-record.js @@ -107,28 +107,28 @@ export default Ember.Mixin.create({ * JQuery string to identify the recorder element. * @property {String} [recorderElement='#recorder'] */ - recorderElement: '#recorder', + recorderElement: '#recorder', - /** + /** * Whether recorder has been set up yet. Automatically set when doing setup. * Accessible to consuming frame. * @property {Boolean} recorderReady */ - recorderReady: false, + recorderReady: false, - /** + /** * Whether to use the camera in this frame. Consuming frame should set this property * to override if needed. * @property {Boolean} [doUseCamera=true] */ - doUseCamera: true, + doUseCamera: true, - /** + /** * Whether to start recording ASAP (only applies if doUseCamera). Consuming frame * should set to override if needed. * @property {Boolean} [startRecordingAutomatically=false] */ - startRecordingAutomatically: false, + startRecordingAutomatically: false, /** * A video ID to use for the current recording. Format is @@ -145,7 +145,7 @@ export default Ember.Mixin.create({ this.get('experiment.id'), this.get('id'), this.get('session.id'), - + Date.now(), // Timestamp in ms + +Date.now(), // Timestamp in ms Math.floor(Math.random() * 1000) ].join('_'); }, @@ -181,8 +181,8 @@ export default Ember.Mixin.create({ const videoId = this._generateVideoId(); this.set('videoId', videoId); const recorder = this.get('videoRecorder').start(videoId, element, settings); - const pipeLoc = this.container.lookupFactory('config:environment')['pipeLoc']; - const pipeEnv = this.container.lookupFactory('config:environment')['pipeEnv'] + const pipeLoc = this.container.lookupFactory('config:environment').pipeLoc; + const pipeEnv = this.container.lookupFactory('config:environment').pipeEnv; const installPromise = recorder.install({record}, this.get('videoId'), pipeLoc, pipeEnv); // Track specific events for all frames that use VideoRecorder @@ -250,7 +250,7 @@ export default Ember.Mixin.create({ if (this.get('videoList') == null) { this.set('videoList', [this.get('videoId')]); } else { - this.set('videoList', this.get('videoList').concat([this.get('videoId')])) + this.set('videoList', this.get('videoList').concat([this.get('videoId')])); } }); } else { @@ -273,7 +273,7 @@ export default Ember.Mixin.create({ } }, - /** + /** * Destroy recorder and stop accessing webcam * @method destroyRecorder */ @@ -296,7 +296,7 @@ export default Ember.Mixin.create({ _this.destroyRecorder(); }, () => { _this.destroyRecorder(); - }) + }); } } _this.send('setTimeEvent', 'destroyingElement'); @@ -304,9 +304,9 @@ export default Ember.Mixin.create({ }, didInsertElement() { - if (this.get('doUseCamera')) { - var _this = this; - this.setupRecorder(this.$(this.get('recorderElement')), false).then(() => { + if (this.get('doUseCamera')) { + var _this = this; + this.setupRecorder(this.$(this.get('recorderElement')), false).then(() => { /** * When video recorder has been installed * @@ -316,24 +316,24 @@ export default Ember.Mixin.create({ _this.set('recorderReady', true); _this.whenPossibleToRecord(); // make sure this fires }); - } - this._super(...arguments); + } + this._super(...arguments); }, - /** + /** * Observer that starts recording once recorder is ready. Override to do additional * stuff at this point! * @method whenPossibleToRecord */ whenPossibleToRecord: function() { - if (this.get('doUseCamera') && this.get('startRecordingAutomatically')) { - var _this = this; - if (this.get('recorder.hasCamAccess') && this.get('recorderReady')) { - this.startRecorder().then(() => { - _this.set('recorderReady', false); - }); - } - } + if (this.get('doUseCamera') && this.get('startRecordingAutomatically')) { + var _this = this; + if (this.get('recorder.hasCamAccess') && this.get('recorderReady')) { + this.startRecorder().then(() => { + _this.set('recorderReady', false); + }); + } + } }.observes('recorder.hasCamAccess', 'recorderReady'), /** @@ -350,9 +350,9 @@ export default Ember.Mixin.create({ * a problem with video capture settings * @method showRecorder */ - showRecorder() { + showRecorder() { $(this.get('recorderElement')).parent().removeClass('video-recorder-hidden'); - }, + }, init() { this._super(...arguments); diff --git a/exp-player/addon/services/video-recorder.js b/exp-player/addon/services/video-recorder.js index 6b9a54f2..2a778915 100644 --- a/exp-player/addon/services/video-recorder.js +++ b/exp-player/addon/services/video-recorder.js @@ -14,7 +14,7 @@ let { // https://addpipe.com/docs#javascript-events-api // New events available in HTML5: onRecorderInit, onRecorderReady, onConnectionClosed, // onMicActivityLevel, onSaveOk -const HOOKS = [ 'onRecordingStarted', +const HOOKS = ['onRecordingStarted', 'onCamAccess', 'onRecorderReady', 'onUploadDone', @@ -32,8 +32,8 @@ const MIN_VOLUME = 5; const FLASHVARS = { recorderId: '123', - qualityurl: "avq/480p.xml", - showMenu: "false", // show recording button menu. Yes, STRING "true"/"false" sigh. + qualityurl: 'avq/480p.xml', + showMenu: 'false', // show recording button menu. Yes, STRING "true"/"false" sigh. mrt: 100000000, // max recording time in seconds (don't use) sis: 1, // skip initial screen asv: 1, // autosave recordings @@ -71,7 +71,7 @@ const VideoRecorder = Ember.Object.extend({ flashReady: Ember.computed.alias('_recorderReady').readOnly(), connected: false, - debug: true, + debug: false, _started: false, _camAccess: false, _recording: false, @@ -205,12 +205,10 @@ const VideoRecorder = Ember.Object.extend({ var timeLeft = 3 - this.getTime(); if (this.get('hasCamAccess') && (timeLeft > 0)) { // sleep time expects milliseconds - function sleep (time) { - return new Promise((resolve) => setTimeout(resolve, time)); + function sleep(time) { + return new Promise((resolve) => setTimeout(resolve, time)); } - return sleep(timeLeft * 1000).then(() => { - return this.stop(); - }); + return sleep(timeLeft * 1000).then(() => this.stop()); } else { var recorder = this.get('recorder'); if (recorder) { @@ -298,8 +296,8 @@ const VideoRecorder = Ember.Object.extend({ this.set('_recorderReady', true); }, - _userHasCamMic(cam_number,mic_number, recorderId) { - this.set('hasWebCam', Boolean(cam_number)); + _userHasCamMic(camNumber, micNumber, recorderId) { + this.set('hasWebCam', Boolean(camNumber)); }, _onConnectionStatus(status, recorderId) { @@ -332,7 +330,7 @@ export default Ember.Service.extend({ init() { var runHandler = function (recorder, hookName, args) { if (recorder.get('debug')) { - //console.log(hookName, args); + console.log(hookName, args); } if (recorder.get('_' + hookName)) { recorder.get('_' + hookName).apply(recorder, args);