Added a new option to the plugin

With this option it is now possible to hide the slider while the video is playing

docs/plugins/video-slider-response.md

@@ -31,6 +31,7 @@ trial_ends_after_video | bool | false | If true, then the trial will end as soon
 trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, then the trial will wait for a response indefinitely.
 response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
 response_allowed_while_playing | boolean | true | If true, then responses are allowed while the video is playing. If false, then the video must finish playing before the slider is enabled and the trial can end via the next button click. Once the video has played all the way through, the slider is enabled and a response is allowed (including while the video is being re-played via on-screen playback controls). 
+hide_slider_while_video_plays | boolean | false | If true, the slider will be hidden while the video is playing, and will appear when the video stops.
 
 
 ## Data Generated

packages/plugin-video-slider-response/src/index.ts

@@ -131,6 +131,12 @@ const info = <const>{
       pretty_name: "Response allowed while playing",
       default: true,
     },
+    hide_slider_while_video_plays: {
+      type: ParameterType.BOOL,
+      pretty_name: "Hide slider while video plays",
+      default: false,
+      description: "If true the slider will be hidden while the video plays and it will appear when the video stops"
+    },
   },
 };
 
@@ -274,6 +280,10 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
       if (trial.trial_ends_after_video) {
         end_trial();
       } else if (!trial.response_allowed_while_playing) {
+        if(trial.hide_slider_while_video_plays) {
+          show_slider();
+        }
+
         enable_slider();
       }
     };
@@ -310,6 +320,10 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
+          if (trial.hide_slider_while_video_plays){
+            show_slider();
+          }
+
           if (trial.trial_ends_after_video && !stopped) {
             // this is to prevent end_trial from being called twice, because the timeupdate event
             // can fire in quick succession
@@ -336,6 +350,11 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         .addEventListener("touchstart", enable_button);
     }
 
+    if (trial.hide_slider_while_video_plays) {
+      hide_slider();
+    }
+
+
     var startTime = performance.now();
 
     // store response
@@ -405,6 +424,14 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
       }
     }
 
+    function hide_slider() {
+      (document.getElementsByClassName("jspsych-video-slider-response-container")[0] as HTMLElement).style.display = "none";
+    }
+
+    function show_slider() {
+      (document.getElementsByClassName("jspsych-video-slider-response-container")[0] as HTMLElement).style.display = "";
+    }
+
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
       this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);