import Ember from 'ember';
import layout from './template';
import ExpFrameBaseComponent from '../exp-frame-base/component';
import FullScreen from '../../mixins/full-screen';
import VideoRecord from '../../mixins/video-record';
import ExpandAssets from '../../mixins/expand-assets';
import { audioAssetOptions, videoAssetOptions } from '../../mixins/expand-assets';
import { observer } from '@ember/object';
let {
$
} = Ember;
/**
* @module exp-player
* @submodule frames-deprecated
*/
/**
* This frame is a bespoke frame for a beta tester. It is deprecated and will not be
* included in release 2.x. For new studies, use {{#crossLink "Exp-lookit-change-detection"}}{{/crossLink}} instead.
*
* Frame to implement specific test trial structure for geometry alternation
* replication study. Includes announcement, calibration, and alternation (test)
* phases. During "alternation," two streams of "open triangles" are shown, in
* rectangles on the left and right of the screen: one one side both size and
* shape change, on the other only size changes. Frame is displayed fullscreen
* and video recording is conducted during calibration/test.
*
* This frame is displayed fullscreen; if the frame before it is not, that frame
* needs to include a manual "next" button so that there's a user interaction
* event to trigger fullscreen mode. (Browsers don't allow us to switch to FS
* without a user event.)
*
* Specifying media locations:
* For any parameters that expect a list of audio/video sources, you can EITHER provide
* a list of src/type pairs with full paths like this:
```json
[
{
'src': 'http://.../video1.mp4',
'type': 'video/mp4'
},
{
'src': 'http://.../video1.webm',
'type': 'video/webm'
}
]
```
* OR you can provide a single string 'stub', which will be expanded
* based on the parameter baseDir and the media types expected - either audioTypes or
* videoTypes as appropriate. For example, if you provide the audio source `intro`
* and baseDir is https://mystimuli.org/mystudy/, with audioTypes ['mp3', 'ogg'], then this
* will be expanded to:
```json
[
{
src: 'https://mystimuli.org/mystudy/mp3/intro.mp3',
type: 'audio/mp3'
},
{
src: 'https://mystimuli.org/mystudy/ogg/intro.ogg',
type: 'audio/ogg'
}
]
```
* This allows you to simplify your JSON document a bit and also easily switch to a
* new version of your stimuli without changing every URL. You can mix source objects with
* full URLs and those using stubs within the same directory. However, any stimuli
* specified using stubs MUST be
* organized as expected under baseDir/MEDIATYPE/filename.MEDIATYPE.
*
* Example usage:
```json
"frames": {
"alt-trial": {
"kind": "exp-lookit-geometry-alternation-open",
"triangleLineWidth": 8,
"baseDir": "https://s3.amazonaws.com/lookitcontents/geometry/",
"videoTypes": ["mp4", "webm"],
"audioTypes": ["mp3", "ogg"],
"calibrationVideoSources": "attention",
"trialLength": 60,
"attnLength": 10,
"calibrationLength": 3000,
"fsAudio": "fullscreen",
"triangleColor": "#056090",
"unpauseAudio": "return_after_pause",
"pauseAudio": "pause",
"videoSources": "attentiongrabber",
"musicSources": "happy-stroll",
"calibrationAudioSources": "chimes",
"altOnLeft": true,
"context": true,
"audioSources": "video_01",
"endAudioSources": "all_done"
}
}
* ```
* @class Exp-lookit-geometry-alternation-open
* @extends Exp-frame-base
* @uses Full-screen
* @uses Video-record
* @uses Expand-assets
* @deprecated
*/
export default ExpFrameBaseComponent.extend(FullScreen, VideoRecord, ExpandAssets, {
type: 'exp-lookit-geometry-alternation',
layout: layout,
displayFullscreen: true, // force fullscreen for all uses of this component
fullScreenElementId: 'experiment-player',
fsButtonID: 'fsButton',
// Track state of experiment
completedAudio: false,
completedAttn: false,
currentSegment: 'intro', // 'calibration', 'test' (mutually exclusive)
alreadyStartedCalibration: false,
// Override setting in VideoRecord mixin - only use camera if doing recording
doUseCamera: Ember.computed.alias('doRecording'),
startRecordingAutomatically: Ember.computed.alias('doRecording'),
recordingStarted: false,
assetsToExpand: {
'audio': [
'audioSources',
'musicSources',
'calibrationAudioSources',
'endAudioSources',
'pauseAudio',
'unpauseAudio',
'fsAudio'
],
'video': [
'calibrationVideoSources',
'videoSources'
],
'image': [
]
},
readyToStartCalibration: Ember.computed('recordingStarted', 'completedAudio', 'completedAttn',
function() {
var recordingStarted = false;
if (this.get('session').get('recorder')) {
recordingStarted = this.get('session').get('recorder').get('recording');
} else {
recordingStarted = this.get('recordingStarted');
}
return (recordingStarted && this.get('completedAudio') && this.get('completedAttn'));
}),
// used only by template
doingCalibration: Ember.computed('currentSegment', function() {
return (this.get('currentSegment') === 'calibration');
}),
doingIntro: Ember.computed('currentSegment', function() {
return (this.get('currentSegment') === 'intro');
}),
isPaused: false,
hasBeenPaused: false,
// Timers for intro & stimuli
introTimer: null, // minimum length of intro segment
stimTimer: null,
// Store data about triangles to show, display lengths, etc. in frame
settings: null,
triangleBases: null,
frameSchemaProperties: {
/**
* Whether to do webcam recording on this frame
*
* @property {Boolean} doRecording
*/
doRecording: {
type: 'boolean',
description: 'Whether to do webcam recording',
default: true
},
/**
* True to use big uneven triangle as context figure, or false to use small even triangle as context.
*
* @property {Boolean} context
* @default true
*/
context: {
type: 'boolean',
description: 'True to use big uneven triangle as context figure, or false to use small even triangle as context.',
default: true
},
/**
* Whether to put the shape+size alternating stream on the left (other stream alternates only in size)
*
* @property {Boolean} altOnLeft
* @default true
*/
altOnLeft: {
type: 'boolean',
description: 'Whether to put the shape+size alternating stream on the left.',
default: true
},
/**
* color of triangle outline (3 or 6 char hex, starting with #)
*
* @property {String} triangleColor
* @default '#056090'
*/
triangleColor: {
type: 'string',
description: 'color of triangle outline (3 or 6 char hex, starting with #)',
default: '#056090'
},
/**
* triangle line width in pixels
*
* @property {Integer} triangleLineWidth
* @default 5
*/
triangleLineWidth: {
type: 'integer',
description: 'triangle line width in pixels',
default: 5
},
/**
* minimum amount of time to show attention-getter in seconds
*
* @property {Number} attnLength
* @default 5
*/
attnLength: {
type: 'number',
description: 'minimum amount of time to show attention-getter in seconds',
default: 5
},
/**
* length of alternation trial in seconds
*
* @property {Number} trialLength
* @default 6
*/
trialLength: {
type: 'number',
description: 'length of alternation trial in seconds',
default: 6
},
/**
* length of single calibration segment in ms
*
* @property {Number} calibrationLength
* @default 3000
*/
calibrationLength: {
type: 'number',
description: 'length of single calibration segment in ms',
default: 3000
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* instructions during attention-getter video
*
* @property {Object[]} audioSources
*/
audioSources: {
oneOf: audioAssetOptions,
description: 'List of objects specifying audio src and type for instructions during attention-getter video',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* music during trial
*
* @property {Object[]} musicSources
*/
musicSources: {
oneOf: audioAssetOptions,
description: 'List of objects specifying audio src and type for music during trial',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* audio after completion of trial (optional; used for last
* trial "okay to open your eyes now" announcement)
*
* @property {Object[]} endAudioSources
*/
endAudioSources: {
oneOf: audioAssetOptions,
description: 'Supply this to play audio at the end of the trial; list of objects specifying audio src and type',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* calibration audio (played 4 times during calibration)
*
* @property {Object[]} calibrationAudioSources
*/
calibrationAudioSources: {
oneOf: audioAssetOptions,
description: 'list of objects specifying audio src and type for calibration audio',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* calibration video (played from start 4 times during
* calibration)
*
* @property {Object[]} calibrationVideoSources
*/
calibrationVideoSources: {
oneOf: videoAssetOptions,
description: 'list of objects specifying video src and type for calibration audio',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* attention-getter video (should be loopable)
*
* @property {Object[]} videoSources
*/
videoSources: {
oneOf: videoAssetOptions,
description: 'List of objects specifying video src and type for attention-getter video',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* audio played upon pausing study
*
* @property {Object[]} pauseAudio
*/
pauseAudio: {
oneOf: audioAssetOptions,
description: 'List of objects specifying audio src and type for audio played when pausing study',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* audio played upon unpausing study
*
* @property {Object[]} unpauseAudio
*/
unpauseAudio: {
oneOf: audioAssetOptions,
description: 'List of objects specifying audio src and type for audio played when pausing study',
default: []
},
/**
* Sources Array of {src: 'url', type: 'MIMEtype'} objects for
* audio played when study is paused due to not being fullscreen
*
* @property {Object[]} fsAudio
*/
fsAudio: {
oneOf: audioAssetOptions,
description: 'List of objects specifying audio src and type for audio played when pausing study if study is not fullscreen',
default: []
}
},
meta: {
data: {
type: 'object',
properties: {
/**
* True to use big fat triangle as context figure, or false to use small skinny triangle as context. [same as passed to this frame]
* @attribute context
*/
context: {
type: 'boolean'
},
/**
* Whether to put the shape+size alternating stream on the left (other stream alternates only in size) [same as passed to this frame]
* @attribute altOnLeft
*/
altOnLeft: {
type: 'boolean'
},
videoId: {
type: 'string'
},
/**
* whether this trial was paused
* @attribute hasBeenPaused
*/
hasBeenPaused: {
type: 'boolean'
}
}
}
},
calObserver: observer('readyToStartCalibration', function(frame) {
if (frame.get('readyToStartCalibration') && frame.get('currentSegment') === 'intro') {
if (!frame.checkFullscreen()) {
frame.pauseStudy();
} else {
frame.set('currentSegment', 'calibration');
}
}
}),
segmentObserver: observer('currentSegment', function(frame) {
// Don't trigger starting intro; that'll be done manually.
if (frame.get('currentSegment') === 'calibration') {
frame.notifyPropertyChange('doingCalibration');
frame.set('alreadyStartedCalibration', false);
frame.rerender(); // Defer starting calibration until re-render completes, to
// wait for video to be available. Forcing rerender due to idiosyncratic
// calibration display problem
} else if (frame.get('currentSegment') === 'test') {
frame.startTrial();
}
}),
didRender() {
this._super(...arguments);
if (this.get('doingCalibration') && !this.get('alreadyStartedCalibration')) {
this.set('alreadyStartedCalibration', true);
this.startCalibration();
}
},
actions: {
// When intro audio is complete
endAudio() {
this.set('completedAudio', true);
this.notifyPropertyChange('readyToStartCalibration');
},
finish() {
// Call this something separate from next because stopRecorder promise needs
// to call next AFTER recording is stopped and we don't want this to have
// already been destroyed at that point.
/**
* Just before stopping webcam video capture
*
* @event stoppingCapture
*/
var _this = this;
this.stopRecorder().then(() => {
_this.set('stoppedRecording', true);
_this.send('next');
return;
}, () => {
_this.send('next');
return;
});
this._super(...arguments);
}
},
startIntro() {
// Allow pausing during intro
var _this = this;
$(document).off('keyup.pauser');
$(document).on('keyup.pauser', function(e) {_this.handleSpace(e, _this);});
// Start placeholder video right away
/**
* Immediately before starting intro/announcement segment
*
* @event startIntro
*/
this.send('setTimeEvent', 'startIntro');
$('#player-video')[0].play();
// Set a timer for the minimum length for the intro/break
$('#player-audio')[0].play();
this.set('introTimer', window.setTimeout(function() {
_this.set('completedAttn', true);
_this.notifyPropertyChange('readyToStartCalibration');
}, _this.get('attnLength') * 1000));
},
startCalibration() {
var _this = this;
// Don't allow pausing during calibration/test.
$(document).off('keyup.pauser');
// Attempt to fix calibration display similar to exit-fullscreen-and-return fix
$('#allstimuli').css('background-color', 'white');
var calAudio = $('#player-calibration-audio')[0];
var calVideo = $('#player-calibration-video')[0];
$('#player-calibration-video').show();
// Show the calibration segment at center, left, right, center, each
// time recording an event and playing the calibration audio.
var doCalibrationSegments = function(calList, lastLoc) {
if (calList.length === 0) {
$('#player-calibration-video').hide();
_this.set('currentSegment', 'test');
} else {
var thisLoc = calList.shift();
/**
* Start of EACH calibration segment
*
* @event startCalibration
* @param {String} location location of calibration ball, relative to child: 'left', 'right', or 'center'
*/
_this.send('setTimeEvent', 'startCalibration',
{location: thisLoc});
calAudio.pause();
calAudio.currentTime = 0;
calAudio.play();
calVideo.pause();
calVideo.currentTime = 0;
calVideo.play();
$('#player-calibration-video').removeClass(lastLoc);
$('#player-calibration-video').addClass(thisLoc);
window.setTimeout(function() {
doCalibrationSegments(calList, thisLoc);
}, _this.settings.calLength);
}
};
doCalibrationSegments(['center', 'left', 'right', 'center'], '');
},
startTrial() {
var _this = this;
/**
* Immediately before starting test trial segment
*
* @event startTestTrial
*/
_this.send('setTimeEvent', 'startTestTrial');
// Begin playing music; fade in and set to fade out at end of trial
var $musicPlayer = $('#player-music');
$musicPlayer.prop('volume', 0.1);
$musicPlayer[0].play();
$musicPlayer.animate({volume: 1}, _this.settings.musicFadeLength);
window.setTimeout(function() {
$musicPlayer.animate({volume: 0}, _this.settings.musicFadeLength);
}, _this.settings.trialLength * 1000 - _this.settings.musicFadeLength);
// Start presenting triangles and set to stop after trial length
_this.presentTriangles(_this.settings.LshapesStart,
_this.settings.RshapesStart,
_this.settings.LsizeBaseStart,
_this.settings.RsizeBaseStart);
window.setTimeout(function() {
window.clearTimeout(_this.get('stimTimer'));
_this.clearTriangles();
_this.endTrial();
}, _this.settings.trialLength * 1000);
},
// When triangles have been shown for time indicated: play end-audio if
// present, or just move on.
endTrial() {
this.stopRecorder();
if (this.get('endAudioSources').length) {
$('#player-endaudio')[0].play();
} else {
this.send('finish');
}
},
getRandomElement(arr) {
return arr[Math.floor(Math.random() * arr.length)];
},
getRandom(min, max) {
return Math.random() * (max - min) + min;
},
drawTriangles(Lshape, LX, LY, LRot, LFlip, LSize, Rshape, RX, RY, RRot, RFlip, RSize) {
/**
* records EACH triangle presentation during test trial
*
* @event videoStreamConnection
* @param {String} Lshape shape of left triangle: 'skinny' or 'fat'
* @param {String} Rshape shape of right triangle: 'skinny' or 'fat'
* @param {Number} LX Horizontal offset of left triangle from rectangle center, in units where rectangle width = 70; positive = to right
* @param {Number} LY Vertical offset of left triangle from rectangle center, in units where rectangle height = 100.8; positive = down
* @param {Number} RX Horizontal offset of right triangle from rectangle center, in units where screen width = 200 and rectangle width = 70; positive = to right
* @param {Number} RY Vertical offset of right triangle from rectangle center, in units where rectangle height = 100.8; positive = down
* @param {Number} LRot rotation of left triangle in degrees. 0 degrees has long side horizontal and 15 degree angle (skinny triangle) or 60 degree angle (fat triangle) on left.
* @param {Number} RRot rotation of right triangle in degrees. 0 degrees has long side horizontal and 15 degree angle (skinny triangle) or 60 degree angle (fat triangle) on left.
* @param {Number} LFlip whether left triangle is flipped (1 = no, -1 = yes)
* @param {Number} RFlip whether right triangle is flipped (1 = no, -1 = yes)
* @param {Number} LSize size of left triangle, relative to standard ('standard' sizes are set so that areas of skinny & fat triangles are equal), in terms of side length (e.g. for a rectangle, 2 would mean take a 1x3 rectangle and make it a 2x6 rectangle, quadrupling the area)
* @param {Number} RSize size of right triangle, relative to standard ('standard' sizes are set so that areas of skinny & fat triangles are equal), in terms of side length (e.g. for a rectangle, 2 would mean take a 1x3 rectangle and make it a 2x6 rectangle, quadrupling the area)
*/
this.send('setTimeEvent', 'presentTriangles', {
Lshape: Lshape,
LX: LX,
LY: LY,
LRot: LRot,
LFlip: LFlip,
LSize: LSize,
Rshape: Rshape,
RX: RX,
RY: RY,
RRot: RRot,
RFlip: RFlip,
RSize: RSize
});
var leftTriangle = `${this.triangleBases[Lshape]}
transform=" translate(${LX}, ${LY})
translate(37.5, 56)
rotate(${LRot})
scale(${LSize})
scale(${LFlip}, 1)" />`;
var rightTriangle = `${this.triangleBases[Rshape]}
transform=" translate(${RX}, ${RY})
translate(162.5, 56)
rotate(${RRot})
scale(${RSize})
scale(${RFlip}, 1)" />`;
$('#stimuli').html(leftTriangle + rightTriangle);
},
clearTriangles() {
/**
* Records each time triangles are cleared from display
*
* @event clearTriangles
*/
this.send('setTimeEvent', 'clearTriangles');
$('#stimuli').html('');
},
presentTriangles(Lshapes, Rshapes, LsizeBase, RsizeBase) {
// select X and Y positions for each shape
var LX = this.getRandom(this.settings.XRange[0],
this.settings.XRange[1]);
var RX = this.getRandom(this.settings.XRange[0],
this.settings.XRange[1]);
var LY = this.getRandom(this.settings.YRange[0],
this.settings.YRange[1]);
var RY = this.getRandom(this.settings.YRange[0],
this.settings.YRange[1]);
// select rotation, flip, size per shape
var LRot = this.getRandom(this.settings.rotRange[0],
this.settings.rotRange[1]);
var RRot = this.getRandom(this.settings.rotRange[0],
this.settings.rotRange[1]);
var LFlip = this.getRandomElement(this.settings.flipVals);
var RFlip = this.getRandomElement(this.settings.flipVals);
var LSize = this.getRandom(this.settings.sizeRange[0],
this.settings.sizeRange[1]) * LsizeBase[0];
var RSize = this.getRandom(this.settings.sizeRange[0],
this.settings.sizeRange[1]) * RsizeBase[0];
var _this = this;
_this.clearTriangles();
_this.set('stimTimer', window.setTimeout(function() {
_this.drawTriangles(Lshapes[0], LX, LY, LRot, LFlip, LSize,
Rshapes[0], RX, RY, RRot, RFlip, RSize);
_this.set('stimTimer', window.setTimeout(function() {
_this.presentTriangles(Lshapes.reverse(), Rshapes.reverse(),
LsizeBase.reverse(), RsizeBase.reverse());
}, _this.settings.msTriangles));
}, _this.settings.msBlank));
},
handleSpace(event, frame) {
if (frame.checkFullscreen() || !frame.isPaused) {
if (event.which === 32) { // space
frame.pauseStudy();
}
}
},
// Pause/unpause study; only called if doing intro.
pauseStudy() {
$('#player-audio')[0].pause();
$('#player-audio')[0].currentTime = 0;
$('#player-pause-audio')[0].pause();
$('#player-pause-audio')[0].currentTime = 0;
$('#player-pause-audio-leftfs')[0].pause();
$('#player-pause-audio-leftfs')[0].currentTime = 0;
this.set('completedAudio', false);
this.set('completedAttn', false);
Ember.run.once(this, () => {
this.set('hasBeenPaused', true);
var wasPaused = this.get('isPaused');
this.set('currentSegment', 'intro');
// Currently paused: RESUME
if (wasPaused) {
this.startIntro();
this.set('isPaused', false);
} else { // Not currently paused: PAUSE
window.clearTimeout(this.get('introTimer'));
if (this.checkFullscreen()) {
$('#player-pause-audio')[0].play();
} else {
$('#player-pause-audio-leftfs')[0].play();
}
this.set('isPaused', true);
}
});
},
didInsertElement() {
this._super(...arguments);
// Define basic properties for two triangle shapes used. It would be
// more natural to define these in the template, and then use the
// <use xlink:href="#name" .../> syntax to transform them as
// appropriate, but although this worked fine on experimenter I couldn't
// get the links working on lookit. The code was correctly generated,
// but while a direct use of polygon showed up, nothing that used
// xlink:href showed up at all (even when hard-coded into the template).
// Possibly related to issues like
// https://github.com/emberjs/ember.js/issues/14752.
// --kim
this.set('triangleBases', {
'even': `<polyline stroke="${this.get('triangleColor')}"
stroke-width="${this.get('triangleLineWidth')}"
fill="none"
points="-5.75451015291 , -5.14699035165
-5.75451015291 , 10.2939807033
11.5090203058 , -5.14699035165"
vector-effect="non-scaling-stroke"
stroke-linejoin="round"`,
'uneven': `<polyline stroke="${this.get('triangleColor')}"
stroke-width="${this.get('triangleLineWidth')}"
fill="none"
points="-7.19313769114 , 0.0
-7.19313769114 , 9.65060690934
14.3862753823 , -9.65060690934"
vector-effect="non-scaling-stroke"
stroke-linejoin="round"`
});
// COUNTERBALANCING (2x2):
// context: whether to use even or uneven triangle as context. If 'even',
// contrasts are small even/big even and small even/big uneven. If 'uneven',
// contrasts are big uneven/small even and big uneven/small uneven.
// altOnLeft: whether to put size-and-shape alteration on left
var diffShapes;
var sameShapes;
var shapeSizes;
if (this.get('context')) {
sameShapes = ['uneven']; // context: big fat triangle
shapeSizes = [1.6, 1]; // big fat vs. small fat/small skinny
diffShapes = ['uneven', 'even']; // start with context
} else {
sameShapes = ['even']; // context: small skinny triangle
shapeSizes = [1, 1.6]; // small skinny vs. big skinny/big fat
diffShapes = ['even', 'uneven']; // start with context
}
var Lshapes;
var Rshapes;
if (this.get('altOnLeft')) {
Lshapes = diffShapes;
Rshapes = sameShapes;
} else {
Lshapes = sameShapes;
Rshapes = diffShapes;
}
this.set('settings', {
msBlank: 300,
msTriangles: 500,
LsizeBaseStart: shapeSizes,
RsizeBaseStart: shapeSizes.slice(),
XRange: [-3.125, 3.125],
YRange: [-3.125, 3.125],
rotRange: [0, 360],
flipVals: [-1, 1],
sizeRange: [0.921954, 1.072381], // 15% by AREA: sqrt(0.85), sqrt(1.15)
trialLength: this.get('trialLength'),
LshapesStart: Lshapes,
RshapesStart: Rshapes,
musicFadeLength: 2000,
calLength: this.get('calibrationLength')});
this.notifyPropertyChange('readyToStartCalibration');
this.startIntro();
},
willDestroyElement() { // remove event handler
$(document).off('keyup.pauser');
window.clearInterval(this.get('introTimer'));
window.clearInterval(this.get('stimTimer'));
this._super(...arguments);
},
// Override to do a bit extra when starting recording
onRecordingStarted() {
this.set('recordingStarted', true);
},
// Override to do a bit extra when starting session recorder
onSessionRecordingStarted() {
this.set('recordingStarted', true);
}
});
