Merge branch 'develop' of https://github.com/lookit/ember-lookit-fram…

…eplayer into feature/try-out-sphinx

* 'develop' of https://github.com/lookit/ember-lookit-frameplayer:
  style fixes
  style fix
  allow unpausing from exp-lookit-video even if no pauseKey is selected (because trial can be paused by leaving FS mode)
  correct use of backgroundColor on exp-lookit-video and adjust text color accordingly - fixes issue with "white bars" to sides of video when in FS with black background
  if neither image nor video given for start/stop recording frame, just don't display (no alt-text)
  fix for correct application of backgroundColor on start- and stop-recording frames, and appropriate adjustment of text color given background
  fix for scrolling to bottom of exp-lookit-instruction-video transcript not always being detected on Chrome
  add consent template 4 with slight clarification as requested by Smith College IRB
  store which audio file was played in exp-lookit-images-audio; minor fixes to docs for start/stop recording frames

# Conflicts:
#	docs

app/components/consent-template004/template.hbs

@@ -0,0 +1,66 @@
+<div class="center-text">
+    <span class="exp-text-medium">
+        Consent to participate in research: {{experiment.name}}
+    </span>
+</div>
+
+<br>
+<div class="video-consent-body">
+
+    <p> Researchers led by {{PIName}} at {{institution}} are running this study, "{{experiment.name}}," on Lookit. </p>
+
+    <p class="exp-text-medium"> Purpose </p>
+    <p> {{purpose}} </p>
+
+    <p class="exp-text-medium"> Procedures </p>
+    <p> This study takes about {{experiment.duration}} to complete. {{procedures}} </p>
+
+    <p class="exp-text-medium"> Participation </p>
+    <p> You and your child are free to choose whether to be in this study. If you and your child choose to participate, it's okay to stop at any point during the session. Please pause or stop the session if your child becomes very fussy or does not want to participate! If this is a study with multiple sessions, it's okay not to complete all the sessions.</p>
+
+    <p class="exp-text-medium"> Benefits, risks, and payment </p>
+    <p> {{payment}} </p>
+
+    <p class="exp-text-medium"> Data collection and webcam recording </p>
+    <p>During the session, you and your child will be recorded via your computer's webcam and microphone. At the end of the session, you will be prompted to choose a privacy level for your webcam recordings. You will have the option to withdraw your video data at this point. Video recordings and other data you enter are sent securely to the Lookit platform and stored indefinitely. You can view your past recordings on Lookit under "Studies" -> "Your past studies" at any time.</p>
+    <p>Data is stored securely on Lookit servers and by researchers. However, there is always a small risk that data transmitted over the internet may be intercepted or that the security of stored data may be compromised.</p>
+    <p>No video clips will be published or shared unless you allow this when selecting a privacy level. If we do not receive a consent recording (the video you'll make to the right) for this session and cannot verify that you agreed to participate, no other video from your session will be viewed.</p>
+
+
+    <p class="exp-text-medium"> Use of data by study researchers </p>
+    <p>The research group led by {{PIName}} at {{institution}} will have access to video and other data collected during this session. We will also have access to your account profile, demographic survey, and the child profile for the child who is participating, including changes you make in the future to any of this information. We may study your child's responses in connection with his or her previous responses to this or other studies run by our group, siblings' responses to this or other studies run by our group, or demographic survey responses.</p>
+    {{#if datause}}
+        <p>
+            {{datause}}
+        </p>
+    {{/if}}
+
+    <p class="exp-text-medium"> Use of data by Lookit </p>
+    <p> Because this study is being run on the Lookit platform, researchers working on the Lookit project at MIT will also have access to the data collected during this session, in addition to your account data, child profiles, and demographic survey responses. This data may be used by Lookit to detect and fix technical problems or identify new features that would be helpful; provide support to study researchers; assess data quality (for instance, how well an observer can tell which direction children are looking); evaluate the site's success in reaching a diverse population; and characterize family engagement (for instance, looking at what aspects of a study make parents more interested in coming back later). </p>
+
+    <p class="exp-text-medium"> Publication of results </p>
+    <p> The results of the research may be presented at scientific meetings or published in scientific journals. Raw data (for instance, looking times to the left and right of the screen) may be published when it cannot identify children. We never publish children's birthdates or names, and we never publish your demographic data in conjunction with your child's video. </p>
+
+    {{#if additional_segments}}
+        {{#each additional_segments as |segment|}}
+            <p class="exp-text-medium"> {{segment.title}} </p>
+            <p> {{exp-format segment.text}} </p>
+        {{/each}}
+    {{/if}}
+
+    <p class="exp-text-medium"> Rights of research subjects </p>
+    <p> {{research_rights_statement}} </p>
+
+    {{#if gdpr}}
+        <p class="exp-text-medium"> General Data Protection Regulation (GDPR) information </p>
+        <p> As part of your participation, we will collect certain personal information about you, including: {{gdpr_personal_data}}. In addition, we will collect special category data, your personal information that is especially sensitive: {{gdpr_sensitive_data}}</p>
+
+        <p>Your personal information will be transferred to the United States. You understand that the data protection and privacy laws of the United States may not offer you the same level of protection as those in your country of origin.</p>
+    {{/if}}
+
+
+    <p class="exp-text-medium"> Researcher contact information </p>
+    <p> This study is run by {{PIName}} at {{institution}}. If you or your child have any questions or concerns about this study, or in the very unlikely event of a research-related injury, please contact {{PIContact}}. </p>
+    <p>If you or your child have any questions or concerns about the Lookit platform, please contact Kim Scott at kimscott@mit.edu or 617 324 4859.</p>
+
+</div>

app/components/exp-lookit-images-audio-infant-control/component.js

@@ -110,6 +110,9 @@ export default ExpLookitImagesAudio.extend(InfantControlledTiming, {
                 images: {
                     type: 'array'
                 },
+                audioPlayed: {
+                    type: 'string'
+                },
                 selectedImage: {
                     type: 'string'
                 },

app/components/exp-lookit-images-audio/component.js

@@ -369,6 +369,8 @@ export default ExpFrameBaseComponent.extend(FullScreen, VideoRecord, ExpandAsset
     showingFeedbackDialog: false,
     selectedImage: null,
 
+    audioPlayed: null,
+
     noParentText: false,
 
     assetsToExpand: {
@@ -727,23 +729,31 @@ export default ExpFrameBaseComponent.extend(FullScreen, VideoRecord, ExpandAsset
                 /**
                 * Array of images used in this frame [same as passed to this frame, but
                 * may reflect random assignment for this particular participant]
-                * @attribute images
+                * @attribute {Array} images
                 */
                 images: {
                     type: 'array'
                 },
                 /**
                 * ID of image selected at time of proceeding
-                * @attribute selectedImage
+                * @attribute {String} selectedImage
                 */
                 selectedImage: {
                     type: 'string'
                 },
                 /**
                 * Whether image selected at time of proceeding is marked as correct
-                * @attribute correctImageSelected
+                * @attribute {Boolean} correctImageSelected
                 */
                 correctImageSelected: {
+                    type: 'Boolean'
+                },
+                /**
+                * Source URL of audio played, if any. If multiple sources provided (e.g.
+                * mp4 and ogg versions) just the first is stored.
+                * @attribute {String} audioPlayed
+                */
+                audioPlayed: {
                     type: 'string'
                 }
             },
@@ -1126,6 +1136,12 @@ export default ExpFrameBaseComponent.extend(FullScreen, VideoRecord, ExpandAsset
         this.set('minDurationAchieved', !(this.get('durationSeconds') > 0));
         this.set('showProgressBar', this.get('showProgressBar') && this.get('durationSeconds') > 0);
         this.set('showReplayButton', this.get('showReplayButton') && this.get('audio').length);
+
+        // Store audio source
+        let audioSources = this.get('audio_parsed');
+        if (audioSources && audioSources.length) {
+            this.set('audioPlayed', audioSources[0].src);
+        }
     },
 
     didInsertElement() {
@@ -1165,6 +1181,8 @@ export default ExpFrameBaseComponent.extend(FullScreen, VideoRecord, ExpandAsset
         }
 
         $('#nextbutton').prop('disabled', true);
+
+        // Begin trial!
         this.checkAndEnableProceed();
     },
 

app/components/exp-lookit-images-audio/doc.rst

@@ -546,6 +546,10 @@ The fields added specifically for this frame type are:
     correctImageSelected [Boolean]
         Whether image selected at time of proceeding is marked as correct
 
+    audioPlayed [String]
+        Source URL of audio played, if any. If multiple sources provided (e.g.
+        mp4 and ogg versions) just the first is stored.
+
 Events recorded
 ----------------
 

app/components/exp-lookit-instruction-video/component.js

@@ -273,14 +273,15 @@ export default ExpFrameBaseComponent.extend(ExpandAssets, {
         let _frame = this;
         // See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled
         if ($transcript.length) {
-            // First check if the transcript is already scrolled to end because it doesn't need to scroll
-            if ($transcript[0].scrollHeight - $transcript[0].scrollTop === $transcript[0].clientHeight) {
+            // First check if the transcript is already scrolled to end because it doesn't need to scroll. Allow slight
+            // buffer (2px) as Chrome doesn't always think we've scrolled to very bottom.
+            if ($transcript[0].scrollHeight - $transcript[0].scrollTop <= $transcript[0].clientHeight + 2) {
                 _frame.set('readTranscript', true);
                 _frame.set('showWarning', false);
             }
             // And check upon scrolling if we've reached the bottom
             $transcript.bind('scroll', function() {
-                if (this.scrollHeight - this.scrollTop === this.clientHeight) {
+                if (this.scrollHeight - this.scrollTop <= this.clientHeight + 2) {
                     _frame.set('readTranscript', true);
                     _frame.set('showWarning', false);
                 }

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

@@ -2,7 +2,7 @@ import Ember from 'ember';
 import layout from './template';
 import ExpFrameBaseComponent from '../exp-frame-base/component';
 import ExpandAssets from '../../mixins/expand-assets';
-import isColor from '../../utils/is-color';
+import isColor, {colorSpecToRgbaArray} from '../../utils/is-color';
 import { imageAssetOptions, videoAssetOptions } from '../../mixins/expand-assets';
 
 let {
@@ -62,9 +62,6 @@ let {
 * ```
 * @class Exp-lookit-start-recording
 * @extends Exp-frame-base
-* @uses Full-screen
-* @uses Media-reload
-* @uses Video-record
 * @uses Expand-assets
 */
 
@@ -190,8 +187,15 @@ export default ExpFrameBaseComponent.extend(ExpandAssets, {
         this.set('hasVideo', this.get('video').length > 0);
 
         // Apply background colors
-        if (isColor(this.get('backgroundColor'))) {
-            $('div.exp-lookit-start-recording').css('background-color', this.get('backgroundColor'));
+        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.');
         }

app/components/exp-lookit-start-recording/template.hbs

@@ -11,7 +11,8 @@
                     <source src={{stream.src}} type={{stream.type}}>
                 {{/each}}
             </video>
-        {{else}}
+        {{/if}}
+        {{#if image}}
             <img id="placeholder-image" src={{image_parsed}} alt="placeholder">
         {{/if}}
 

app/components/exp-lookit-stop-recording/component.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 import layout from './template';
 import ExpFrameBaseComponent from '../exp-frame-base/component';
 import ExpandAssets from '../../mixins/expand-assets';
-import isColor from '../../utils/is-color';
+import isColor, {colorSpecToRgbaArray} from '../../utils/is-color';
 import { imageAssetOptions, videoAssetOptions } from '../../mixins/expand-assets';
 
 let {
@@ -66,9 +66,6 @@ let {
 * ```
 * @class Exp-lookit-stop-recording
 * @extends Exp-frame-base
-* @uses Full-screen
-* @uses Media-reload
-* @uses Video-record
 * @uses Expand-assets
 */
 
@@ -198,8 +195,15 @@ export default ExpFrameBaseComponent.extend(ExpandAssets, {
         this.set('hasVideo', this.get('video').length > 0);
 
         // Apply background colors
-        if (isColor(this.get('backgroundColor'))) {
-            $('div.exp-lookit-start-recording').css('background-color', this.get('backgroundColor'));
+        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.wait-for-video { 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.');
         }

app/components/exp-lookit-stop-recording/template.hbs

@@ -11,7 +11,8 @@
                     <source src={{stream.src}} type={{stream.type}}>
                 {{/each}}
             </video>
-        {{else}}
+        {{/if}}
+        {{#if image}}
             <img id="placeholder-image" src={{image_parsed}} alt="placeholder">
         {{/if}}
 

app/components/exp-lookit-video-consent/component.js

@@ -25,6 +25,8 @@ Researchers can select from the following named templates:
 
 * `consent_003`: Same as consent_002 except that the 'Payment' section is renamed 'Benefits, risks, and payment' for institutions that prefer that
 
+* `consent_004`: Same as consent_003 except that sentences in 'Data collection and webcam recording' are rearranged to make it clearer what happens if you withdraw video data, and the prompt says to read "out loud (or in ASL)" instead of just "out loud" for accessibility.
+
 Important: To look up the exact text of each consent template for your IRB protocol, and to understand the context for each piece of text to be inserted, please see https://github.com/lookit/research-resources/tree/master/Legal
 
 The consent document can be downloaded as PDF document by participant.
@@ -386,12 +388,12 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
         /**
         Which consent document template to use. If you are setting up a new study,
         use the most recent (highest number) of these options. Options: consent_001,
-        consent_002, consent_003.
+        consent_002, consent_003, consent_004.
         @property {String} template
         */
         template: {
             type: 'string',
-            enum: ['consent_001', 'consent_002', 'consent_003'],
+            enum: ['consent_001', 'consent_002', 'consent_003', 'consent_004'],
             description: 'Which consent document template to use',
             default: 'consent_001'
         }
@@ -423,7 +425,7 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
 
     didInsertElement() {
         this._super(...arguments);
-        let validTemplateNames = ['consent_001', 'consent_002', 'consent_003'];
+        let validTemplateNames = ['consent_001', 'consent_002', 'consent_003', 'consent_004'];
         if (!validTemplateNames.includes(this.get('template'))) {
             console.warn('Invalid consent form specified. \'template\' parameter of \'exp-lookit-video-consent\' frame should be one of: ' + validTemplateNames.join(' '));
         }

app/components/exp-lookit-video-consent/template.hbs

@@ -61,6 +61,24 @@
                         @PIContact={{PIContact}}
                     />
 
+                {{else if (eq template "consent_004")}}
+
+                    <ConsentTemplate004
+                            @experiment={{experiment}}
+                            @PIName={{PIName}}
+                            @institution={{institution}}
+                            @purpose={{purpose}}
+                            @payment={{payment}}
+                            @procedures={{procedures}}
+                            @datause={{datause}}
+                            @additional_segments={{additional_segments}}
+                            @research_rights_statement={{research_rights_statement}}
+                            @gdpr={{gdpr}}
+                            @gdpr_personal_data={{gdpr_personal_data}}
+                            @gdpr_sensitive_data={{gdpr_sensitive_data}}
+                            @PIContact={{PIContact}}
+                    />
+
                 {{/if}}
 
             </div>
@@ -92,7 +110,7 @@
 
         <div class="video-consent-numbered-direction">
             <span class="video-consent-number">3.</span>
-            <span class="video-consent-direction">Read the statement below <em class="video-consent-outloud"> out loud: </em></span>
+            <span class="video-consent-direction">Read the statement below <em class="video-consent-outloud"> out loud</em>{{#if (not (or (eq template "consent_003") (eq template "consent_002") (eq template "consent_001")))}} (or in ASL){{/if}}: </span>
         </div>
 
         <div class="well video-consent-prompt">