Show:

File: app/components/exp-lookit-start-recording/component.js

import Ember from 'ember';
import layout from './template';
import ExpFrameBaseComponent from '../exp-frame-base/component';
import ExpandAssets from '../../mixins/expand-assets';
import isColor, {colorSpecToRgbaArray} from '../../utils/is-color';
import { imageAssetOptions, videoAssetOptions } from '../../mixins/expand-assets';

let {
    $
} = Ember;

/**
 * @module exp-player
 * @submodule frames
 */

/**
* Dedicated frame to start session recording.
*
* This frame will take a few seconds to get a session-level recording started, then proceed
* immediately to the next frame. (See https://lookit.readthedocs.io/en/develop/researchers-create-experiment.html?highlight=startSessionRecording#recording-webcam-video
* for information about session-level vs. individual-frame recording.)
*
* (You could also set startSessionRecording to true on any frame, but then you need to rely
* on that individual frame's setup for waiting for recording before getting started.)
*
* If the following frame is full-screen, make this one full-screen too.
*
* Just like for exp-lookit-calibration, you can display a video or an optionally animated
* image (see below for examples of each) as a placeholder while getting recording started.
*
* For details about specifying media locations, please see
* https://lookit.readthedocs.io/en/develop/researchers-prep-stimuli.html?highlight=basedir#directory-structure
*
* Example usage:

```json

    "start-recording-with-image": {
        "kind": "exp-lookit-start-recording",
        "baseDir": "https://www.mit.edu/~kimscott/placeholderstimuli/",
        "videoTypes": [
            "webm",
            "mp4"
        ],
        "image": "peekaboo_remy.jpg",
        "imageAnimation": "spin"
        "displayFullscreen": true
    },

    "start-recording-with-video": {
        "kind": "exp-lookit-start-recording",
        "baseDir": "https://www.mit.edu/~kimscott/placeholderstimuli/",
        "videoTypes": [
            "webm",
            "mp4"
        ],
        "video": "attentiongrabber",
        "displayFullscreen": true
    },

* ```
* @class Exp-lookit-start-recording
* @extends Exp-frame-base
* @uses Expand-assets
*/

export default ExpFrameBaseComponent.extend(ExpandAssets, {
    layout: layout,
    type: 'exp-lookit-start-recording',

    fullScreenElementId: 'experiment-player',
    fsButtonID: 'fsButton',

    /**
     *
     * @property {Boolean} startSessionRecording
     * @default true
     * @private
     */
    startSessionRecording: true,

    /**
     *
     * @property {Boolean} endSessionRecording
     * @default false
     * @private
     */
    endSessionRecording: false,

    assetsToExpand: {
        'audio': [],
        'video': [
            'video'
        ],
        'image': [
            'image'
        ]
    },

    frameSchemaProperties: {
        /**
         * Whether to display this frame in full-screen mode
         *
         * @property {Boolean} displayFullscreen
         * @default true
         */
        displayFullscreen: {
            type: 'boolean',
            description: 'Whether to display this frame in full-screen mode',
            default: true
        },
        /**
         * Color of background. See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
         * for acceptable syntax: can use color names ('blue', 'red', 'green', etc.), or
         * rgb hex values (e.g. '#800080' - include the '#')
         *
         * @property {String} backgroundColor
         * @default 'black'
         */
        backgroundColor: {
            type: 'string',
            description: 'Color of background',
            default: 'white'
        },
        /**
         * Video to play (looping) while waiting. Supply
         * either a video or image, not both.
         *
         * This can be either an array of {src: 'url', type: 'MIMEtype'} objects or
         * just a string like `attentiongrabber` to rely on the `baseDir` and `videoTypes`
         * to generate full paths.
         *
         * @property {Object[]} video
         * @default []
         */
        video: {
            anyOf: videoAssetOptions,
            description: 'list of objects specifying video src and type',
            default: []
        },
        /**
         * Image to display while waiting. Supply
         * either a video or image, not both.
         *
         * This can be either a full URL or just the filename (e.g. "star.png") to
         * use the full path based on `baseDir` (e.g. `baseDir/img/star.png`).
         *
         * @property {String} image
         * @default []
         */
        image: {
            anyOf: imageAssetOptions,
            description: 'Image to display while waiting',
            default: ''
        },

        /**
         * Which animation to use for the image. Options are 'bounce', 'spin',
         * or '' (empty to not animate).
         *
         * @property {String} imageAnimation
         * @default []
         */
        imageAnimation: {
            type: 'string',
            enum: ['bounce', 'spin', ''],
            description: 'Which animation to use for the image',
            default: 'spin'
        }
    },

    meta: {
        data: {
            type: 'object',
            properties: {
            }
        }
    },

    onSessionRecordingStarted() {
        this.send('next');
    },

    didInsertElement() {
        this._super(...arguments);
        this.set('hasVideo', this.get('video').length > 0);

        // Apply background colors
        let colorSpec = this.get('backgroundColor');
        if (isColor(colorSpec)) {
            $('div.exp-lookit-start-stop-recording').css('background-color', colorSpec);
            // Set text color so it'll be visible (black or white depending on how dark background is). Use style
            // so this applies whenever pause text actually appears.
            let colorSpecRGBA = colorSpecToRgbaArray(colorSpec);
            let textColor = (colorSpecRGBA[0] + colorSpecRGBA[1] + colorSpecRGBA[2] > 128 * 3) ? 'black' : 'white';
            //$(`<style>.exp-lookit-start-stop-recording p.waitForVideo { color: ${textColor}; }</style>`).appendTo('div.exp-lookit-start-stop-recording');
            $('p.wait-for-video').css('color', textColor);
        } else {
            console.warn('Invalid background color provided; not applying.');
        }

        // Apply image animation class
        if (this.get('image')) {
            $('#placeholder-image').addClass(this.get('imageAnimation'));
        }

        // Check that we're not already recording
        if (this.get('sessionRecordingInProgress')) {
            console.warn('Already have active session recording; proceeding without starting another.');
            this.send('next');
        }

    }

});