Added a new option to the plugin

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

Author: Gali Geller

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);