@jspsych/plugin-video-keyboard-response 2.1.1 → 2.2.0

package/dist/index.browser.js

@@ -1,7 +1,7 @@
 var jsPsychVideoKeyboardResponse = (function (jspsych) {
   'use strict';
 
-  var version = "2.1.1";
+  var version = "2.2.0";
 
   const info = {
     name: "video-keyboard-response",
@@ -26,7 +26,7 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
         pretty_name: "Prompt",
         default: null
       },
-      /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, 
+      /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,
        * or properly scaled with the aspect ratio if the height is also specified.
        */
       width: {
@@ -95,6 +95,17 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
         type: jspsych.ParameterType.BOOL,
         pretty_name: "Response allowed while playing",
         default: true
+      },
+      /** If true, the response is not registered until the participant releases the key. The response
+       * time (`rt`) still reflects when the key was pressed, and the additional data field
+       * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+       * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+       * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+       * key is still held, no response is recorded for the trial.
+       */
+      wait_for_key_release: {
+        type: jspsych.ParameterType.BOOL,
+        default: false
       }
     },
     data: {
@@ -112,6 +123,10 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
       stimulus: {
         type: jspsych.ParameterType.STRING,
         array: true
+      },
+      /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+      rt_key_duration: {
+        type: jspsych.ParameterType.INT
       }
     },
     // prettier-ignore
@@ -185,7 +200,8 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
             valid_responses: trial.choices,
             rt_method: "performance",
             persist: false,
-            allow_held_key: false
+            allow_held_key: false,
+            wait_for_key_release: trial.wait_for_key_release
           });
         }
       };
@@ -222,7 +238,8 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
                 valid_responses: trial.choices,
                 rt_method: "performance",
                 persist: false,
-                allow_held_key: false
+                allow_held_key: false,
+                wait_for_key_release: trial.wait_for_key_release
               });
             }
             video_element.pause();
@@ -235,7 +252,8 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
       }
       var response = {
         rt: null,
-        key: null
+        key: null,
+        rt_key_duration: null
       };
       const end_trial = () => {
         this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
@@ -247,14 +265,19 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
         var trial_data = {
           rt: response.rt,
           stimulus: trial.stimulus,
-          response: response.key
+          response: response.key,
+          rt_key_duration: response.rt_key_duration
         };
         this.jsPsych.finishTrial(trial_data);
       };
       var after_response = (info2) => {
         display_element.querySelector("#jspsych-video-keyboard-response-stimulus").className += " responded";
         if (response.key == null) {
-          response = info2;
+          response = {
+            rt: info2.rt,
+            key: info2.key,
+            rt_key_duration: info2.rt_key_duration ?? null
+          };
         }
         if (trial.response_ends_trial) {
           end_trial();
@@ -266,7 +289,8 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
           valid_responses: trial.choices,
           rt_method: "performance",
           persist: false,
-          allow_held_key: false
+          allow_held_key: false,
+          wait_for_key_release: trial.wait_for_key_release
         });
       }
       if (trial.trial_duration !== null) {
@@ -309,8 +333,10 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
       const default_data = {
         stimulus: trial.stimulus,
         rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-        response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+        response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+        rt_key_duration: null
       };
+      default_data.rt_key_duration = default_data.rt === null || !trial.wait_for_key_release ? null : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
       const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
       this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
       return data;
@@ -320,4 +346,4 @@ var jsPsychVideoKeyboardResponse = (function (jspsych) {
   return VideoKeyboardResponsePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-video-keyboard-response@2.1.1/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-video-keyboard-response@2.2.0/dist/index.browser.js.map

package/dist/index.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.1\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, \n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICkHA,SAAA,EAAA;EAAA;;KAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n          wait_for_key_release: trial.wait_for_key_release,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n              wait_for_key_release: trial.wait_for_key_release,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICiIA,SAAA,EAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.browser.min.js

@@ -1,2 +1,2 @@
-var jsPsychVideoKeyboardResponse=function(r){"use strict";var c="2.1.1";const _={name:"video-keyboard-response",version:c,parameters:{stimulus:{type:r.ParameterType.VIDEO,pretty_name:"Video",default:void 0,array:!0},choices:{type:r.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:r.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},width:{type:r.ParameterType.INT,pretty_name:"Width",default:""},height:{type:r.ParameterType.INT,pretty_name:"Height",default:""},autoplay:{type:r.ParameterType.BOOL,pretty_name:"Autoplay",default:!0},controls:{type:r.ParameterType.BOOL,pretty_name:"Controls",default:!1},start:{type:r.ParameterType.FLOAT,pretty_name:"Start",default:null},stop:{type:r.ParameterType.FLOAT,pretty_name:"Stop",default:null},rate:{type:r.ParameterType.FLOAT,pretty_name:"Rate",default:1},trial_ends_after_video:{type:r.ParameterType.BOOL,pretty_name:"End trial after video finishes",default:!1},trial_duration:{type:r.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:r.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},response_allowed_while_playing:{type:r.ParameterType.BOOL,pretty_name:"Response allowed while playing",default:!0}},data:{response:{type:r.ParameterType.STRING},rt:{type:r.ParameterType.INT},stimulus:{type:r.ParameterType.STRING,array:!0}},citations:{apa:"de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",bibtex:'@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '}};class m{constructor(a){this.jsPsych=a}trial(a,e){var t="<div>";t+='<video id="jspsych-video-keyboard-response-stimulus"',e.width&&(t+=' width="'+e.width+'"'),e.height&&(t+=' height="'+e.height+'"'),e.autoplay&&e.start==null&&(t+=" autoplay "),e.controls&&(t+=" controls "),e.start!==null&&(t+=' style="visibility: hidden;"'),t+=">";var i=this.jsPsych.pluginAPI.getVideoBuffer(e.stimulus[0]);if(!i)for(var n=0;n<e.stimulus.length;n++){var l=e.stimulus[n];l.indexOf("?")>-1&&(l=l.substring(0,l.indexOf("?")));var o=l.substr(l.lastIndexOf(".")+1);o=o.toLowerCase(),o=="mov"&&console.warn("Warning: video-keyboard-response plugin does not reliably support .mov files."),t+='<source src="'+l+'" type="video/'+o+'">'}t+="</video>",t+="</div>",e.prompt!==null&&(t+=e.prompt),a.innerHTML=t;var s=a.querySelector("#jspsych-video-keyboard-response-stimulus");i&&(s.src=i),s.onended=()=>{if(e.trial_ends_after_video&&d(),e.response_allowed_while_playing==!1&&!e.trial_ends_after_video)var u=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:y,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1})},s.playbackRate=e.rate,e.start!==null&&(s.pause(),s.onseeked=()=>{s.style.visibility="visible",s.muted=!1,e.autoplay?s.play():s.pause(),s.onseeked=()=>{}},s.onplaying=()=>{s.currentTime=e.start,s.onplaying=()=>{}},s.muted=!0,s.play());let h=!1;e.stop!==null&&s.addEventListener("timeupdate",u=>{var v=s.currentTime;if(v>=e.stop){if(!e.response_allowed_while_playing)var g=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:y,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1});s.pause(),e.trial_ends_after_video&&!h&&(h=!0,d())}});var p={rt:null,key:null};const d=()=>{this.jsPsych.pluginAPI.cancelAllKeyboardResponses(),a.querySelector("#jspsych-video-keyboard-response-stimulus").pause(),a.querySelector("#jspsych-video-keyboard-response-stimulus").onended=()=>{};var u={rt:p.rt,stimulus:e.stimulus,response:p.key};this.jsPsych.finishTrial(u)};var y=u=>{a.querySelector("#jspsych-video-keyboard-response-stimulus").className+=" responded",p.key==null&&(p=u),e.response_ends_trial&&d()};if(e.choices!="NO_KEYS"&&e.response_allowed_while_playing)var P=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:y,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1});e.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(d,e.trial_duration)}simulate(a,e,t,i){e=="data-only"&&(i(),this.simulate_data_only(a,t)),e=="visual"&&this.simulate_visual(a,t,i)}simulate_data_only(a,e){const t=this.create_simulation_data(a,e);this.jsPsych.finishTrial(t)}simulate_visual(a,e,t){const i=this.create_simulation_data(a,e),n=this.jsPsych.getDisplayElement();this.trial(n,a),t();const l=n.querySelector("#jspsych-video-button-response-stimulus"),o=()=>{i.rt!==null&&this.jsPsych.pluginAPI.pressKey(i.response,i.rt)};a.response_allowed_while_playing?o():l.addEventListener("ended",o)}create_simulation_data(a,e){const t={stimulus:a.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0),response:this.jsPsych.pluginAPI.getValidKey(a.choices)},i=this.jsPsych.pluginAPI.mergeSimulationData(t,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(a,i),i}}return m.info=_,m}(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-video-keyboard-response@2.1.1/dist/index.browser.min.js.map
+var jsPsychVideoKeyboardResponse=(function(r){"use strict";var c="2.2.0";const f={name:"video-keyboard-response",version:c,parameters:{stimulus:{type:r.ParameterType.VIDEO,pretty_name:"Video",default:void 0,array:!0},choices:{type:r.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:r.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},width:{type:r.ParameterType.INT,pretty_name:"Width",default:""},height:{type:r.ParameterType.INT,pretty_name:"Height",default:""},autoplay:{type:r.ParameterType.BOOL,pretty_name:"Autoplay",default:!0},controls:{type:r.ParameterType.BOOL,pretty_name:"Controls",default:!1},start:{type:r.ParameterType.FLOAT,pretty_name:"Start",default:null},stop:{type:r.ParameterType.FLOAT,pretty_name:"Stop",default:null},rate:{type:r.ParameterType.FLOAT,pretty_name:"Rate",default:1},trial_ends_after_video:{type:r.ParameterType.BOOL,pretty_name:"End trial after video finishes",default:!1},trial_duration:{type:r.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:r.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},response_allowed_while_playing:{type:r.ParameterType.BOOL,pretty_name:"Response allowed while playing",default:!0},wait_for_key_release:{type:r.ParameterType.BOOL,default:!1}},data:{response:{type:r.ParameterType.STRING},rt:{type:r.ParameterType.INT},stimulus:{type:r.ParameterType.STRING,array:!0},rt_key_duration:{type:r.ParameterType.INT}},citations:{apa:"de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",bibtex:'@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '}};class m{constructor(a){this.jsPsych=a}trial(a,e){var t="<div>";t+='<video id="jspsych-video-keyboard-response-stimulus"',e.width&&(t+=' width="'+e.width+'"'),e.height&&(t+=' height="'+e.height+'"'),e.autoplay&&e.start==null&&(t+=" autoplay "),e.controls&&(t+=" controls "),e.start!==null&&(t+=' style="visibility: hidden;"'),t+=">";var l=this.jsPsych.pluginAPI.getVideoBuffer(e.stimulus[0]);if(!l)for(var u=0;u<e.stimulus.length;u++){var i=e.stimulus[u];i.indexOf("?")>-1&&(i=i.substring(0,i.indexOf("?")));var o=i.substr(i.lastIndexOf(".")+1);o=o.toLowerCase(),o=="mov"&&console.warn("Warning: video-keyboard-response plugin does not reliably support .mov files."),t+='<source src="'+i+'" type="video/'+o+'">'}t+="</video>",t+="</div>",e.prompt!==null&&(t+=e.prompt),a.innerHTML=t;var s=a.querySelector("#jspsych-video-keyboard-response-stimulus");l&&(s.src=l),s.onended=()=>{if(e.trial_ends_after_video&&y(),e.response_allowed_while_playing==!1&&!e.trial_ends_after_video)var n=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:_,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1,wait_for_key_release:e.wait_for_key_release})},s.playbackRate=e.rate,e.start!==null&&(s.pause(),s.onseeked=()=>{s.style.visibility="visible",s.muted=!1,e.autoplay?s.play():s.pause(),s.onseeked=()=>{}},s.onplaying=()=>{s.currentTime=e.start,s.onplaying=()=>{}},s.muted=!0,s.play());let h=!1;e.stop!==null&&s.addEventListener("timeupdate",n=>{var d=s.currentTime;if(d>=e.stop){if(!e.response_allowed_while_playing)var g=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:_,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1,wait_for_key_release:e.wait_for_key_release});s.pause(),e.trial_ends_after_video&&!h&&(h=!0,y())}});var p={rt:null,key:null,rt_key_duration:null};const y=()=>{this.jsPsych.pluginAPI.cancelAllKeyboardResponses(),a.querySelector("#jspsych-video-keyboard-response-stimulus").pause(),a.querySelector("#jspsych-video-keyboard-response-stimulus").onended=()=>{};var n={rt:p.rt,stimulus:e.stimulus,response:p.key,rt_key_duration:p.rt_key_duration};this.jsPsych.finishTrial(n)};var _=n=>{var d;a.querySelector("#jspsych-video-keyboard-response-stimulus").className+=" responded",p.key==null&&(p={rt:n.rt,key:n.key,rt_key_duration:(d=n.rt_key_duration)!=null?d:null}),e.response_ends_trial&&y()};if(e.choices!="NO_KEYS"&&e.response_allowed_while_playing)var P=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:_,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1,wait_for_key_release:e.wait_for_key_release});e.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(y,e.trial_duration)}simulate(a,e,t,l){e=="data-only"&&(l(),this.simulate_data_only(a,t)),e=="visual"&&this.simulate_visual(a,t,l)}simulate_data_only(a,e){const t=this.create_simulation_data(a,e);this.jsPsych.finishTrial(t)}simulate_visual(a,e,t){const l=this.create_simulation_data(a,e),u=this.jsPsych.getDisplayElement();this.trial(u,a),t();const i=u.querySelector("#jspsych-video-button-response-stimulus"),o=()=>{l.rt!==null&&this.jsPsych.pluginAPI.pressKey(l.response,l.rt)};a.response_allowed_while_playing?o():i.addEventListener("ended",o)}create_simulation_data(a,e){const t={stimulus:a.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0),response:this.jsPsych.pluginAPI.getValidKey(a.choices),rt_key_duration:null};t.rt_key_duration=t.rt===null||!a.wait_for_key_release?null:this.jsPsych.randomization.sampleExGaussian(150,30,.01,!0);const l=this.jsPsych.pluginAPI.mergeSimulationData(t,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(a,l),l}}return m.info=f,m})(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-video-keyboard-response@2.2.0/dist/index.browser.min.js.map

package/dist/index.browser.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.1\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, \n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":["version"],"mappings":"0DAEEA,IAAAA,EAAW,kxCCkHA,UAAA,iuBAAe"}
+{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n          wait_for_key_release: trial.wait_for_key_release,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n              wait_for_key_release: trial.wait_for_key_release,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":["version","_a"],"mappings":"2DACE,IACAA,EAAW,y3CCiIA,UAAA,iuBAAe,unEAnI5B,IAAAC"}

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var jspsych = require('jspsych');
 
-var version = "2.1.1";
+var version = "2.2.0";
 
 const info = {
   name: "video-keyboard-response",
@@ -27,7 +27,7 @@ const info = {
       pretty_name: "Prompt",
       default: null
     },
-    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, 
+    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,
      * or properly scaled with the aspect ratio if the height is also specified.
      */
     width: {
@@ -96,6 +96,17 @@ const info = {
       type: jspsych.ParameterType.BOOL,
       pretty_name: "Response allowed while playing",
       default: true
+    },
+    /** If true, the response is not registered until the participant releases the key. The response
+     * time (`rt`) still reflects when the key was pressed, and the additional data field
+     * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+     * key is still held, no response is recorded for the trial.
+     */
+    wait_for_key_release: {
+      type: jspsych.ParameterType.BOOL,
+      default: false
     }
   },
   data: {
@@ -113,6 +124,10 @@ const info = {
     stimulus: {
       type: jspsych.ParameterType.STRING,
       array: true
+    },
+    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+    rt_key_duration: {
+      type: jspsych.ParameterType.INT
     }
   },
   // prettier-ignore
@@ -186,7 +201,8 @@ class VideoKeyboardResponsePlugin {
           valid_responses: trial.choices,
           rt_method: "performance",
           persist: false,
-          allow_held_key: false
+          allow_held_key: false,
+          wait_for_key_release: trial.wait_for_key_release
         });
       }
     };
@@ -223,7 +239,8 @@ class VideoKeyboardResponsePlugin {
               valid_responses: trial.choices,
               rt_method: "performance",
               persist: false,
-              allow_held_key: false
+              allow_held_key: false,
+              wait_for_key_release: trial.wait_for_key_release
             });
           }
           video_element.pause();
@@ -236,7 +253,8 @@ class VideoKeyboardResponsePlugin {
     }
     var response = {
       rt: null,
-      key: null
+      key: null,
+      rt_key_duration: null
     };
     const end_trial = () => {
       this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
@@ -248,14 +266,19 @@ class VideoKeyboardResponsePlugin {
       var trial_data = {
         rt: response.rt,
         stimulus: trial.stimulus,
-        response: response.key
+        response: response.key,
+        rt_key_duration: response.rt_key_duration
       };
       this.jsPsych.finishTrial(trial_data);
     };
     var after_response = (info2) => {
       display_element.querySelector("#jspsych-video-keyboard-response-stimulus").className += " responded";
       if (response.key == null) {
-        response = info2;
+        response = {
+          rt: info2.rt,
+          key: info2.key,
+          rt_key_duration: info2.rt_key_duration ?? null
+        };
       }
       if (trial.response_ends_trial) {
         end_trial();
@@ -267,7 +290,8 @@ class VideoKeyboardResponsePlugin {
         valid_responses: trial.choices,
         rt_method: "performance",
         persist: false,
-        allow_held_key: false
+        allow_held_key: false,
+        wait_for_key_release: trial.wait_for_key_release
       });
     }
     if (trial.trial_duration !== null) {
@@ -310,8 +334,10 @@ class VideoKeyboardResponsePlugin {
     const default_data = {
       stimulus: trial.stimulus,
       rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-      response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+      rt_key_duration: null
     };
+    default_data.rt_key_duration = default_data.rt === null || !trial.wait_for_key_release ? null : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
     const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
     this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
     return data;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.1\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, \n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECkHA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n          wait_for_key_release: trial.wait_for_key_release,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n              wait_for_key_release: trial.wait_for_key_release,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiIA,SAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -93,6 +93,17 @@ declare const info: {
             readonly pretty_name: "Response allowed while playing";
             readonly default: true;
         };
+        /** If true, the response is not registered until the participant releases the key. The response
+         * time (`rt`) still reflects when the key was pressed, and the additional data field
+         * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+         * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+         * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+         * key is still held, no response is recorded for the trial.
+         */
+        readonly wait_for_key_release: {
+            readonly type: ParameterType.BOOL;
+            readonly default: false;
+        };
     };
     readonly data: {
         /** Indicates which key the participant pressed. */
@@ -110,6 +121,10 @@ declare const info: {
             readonly type: ParameterType.STRING;
             readonly array: true;
         };
+        /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+        readonly rt_key_duration: {
+            readonly type: ParameterType.INT;
+        };
     };
     readonly citations: "__CITATIONS__";
 };
@@ -225,6 +240,17 @@ declare class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
                 readonly pretty_name: "Response allowed while playing";
                 readonly default: true;
             };
+            /** If true, the response is not registered until the participant releases the key. The response
+             * time (`rt`) still reflects when the key was pressed, and the additional data field
+             * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+             * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+             * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+             * key is still held, no response is recorded for the trial.
+             */
+            readonly wait_for_key_release: {
+                readonly type: ParameterType.BOOL;
+                readonly default: false;
+            };
         };
         readonly data: {
             /** Indicates which key the participant pressed. */
@@ -242,6 +268,10 @@ declare class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
                 readonly type: ParameterType.STRING;
                 readonly array: true;
             };
+            /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+            readonly rt_key_duration: {
+                readonly type: ParameterType.INT;
+            };
         };
         readonly citations: "__CITATIONS__";
     };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { ParameterType } from 'jspsych';
 
-var version = "2.1.1";
+var version = "2.2.0";
 
 const info = {
   name: "video-keyboard-response",
@@ -25,7 +25,7 @@ const info = {
       pretty_name: "Prompt",
       default: null
     },
-    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, 
+    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,
      * or properly scaled with the aspect ratio if the height is also specified.
      */
     width: {
@@ -94,6 +94,17 @@ const info = {
       type: ParameterType.BOOL,
       pretty_name: "Response allowed while playing",
       default: true
+    },
+    /** If true, the response is not registered until the participant releases the key. The response
+     * time (`rt`) still reflects when the key was pressed, and the additional data field
+     * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+     * key is still held, no response is recorded for the trial.
+     */
+    wait_for_key_release: {
+      type: ParameterType.BOOL,
+      default: false
     }
   },
   data: {
@@ -111,6 +122,10 @@ const info = {
     stimulus: {
       type: ParameterType.STRING,
       array: true
+    },
+    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+    rt_key_duration: {
+      type: ParameterType.INT
     }
   },
   // prettier-ignore
@@ -184,7 +199,8 @@ class VideoKeyboardResponsePlugin {
           valid_responses: trial.choices,
           rt_method: "performance",
           persist: false,
-          allow_held_key: false
+          allow_held_key: false,
+          wait_for_key_release: trial.wait_for_key_release
         });
       }
     };
@@ -221,7 +237,8 @@ class VideoKeyboardResponsePlugin {
               valid_responses: trial.choices,
               rt_method: "performance",
               persist: false,
-              allow_held_key: false
+              allow_held_key: false,
+              wait_for_key_release: trial.wait_for_key_release
             });
           }
           video_element.pause();
@@ -234,7 +251,8 @@ class VideoKeyboardResponsePlugin {
     }
     var response = {
       rt: null,
-      key: null
+      key: null,
+      rt_key_duration: null
     };
     const end_trial = () => {
       this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
@@ -246,14 +264,19 @@ class VideoKeyboardResponsePlugin {
       var trial_data = {
         rt: response.rt,
         stimulus: trial.stimulus,
-        response: response.key
+        response: response.key,
+        rt_key_duration: response.rt_key_duration
       };
       this.jsPsych.finishTrial(trial_data);
     };
     var after_response = (info2) => {
       display_element.querySelector("#jspsych-video-keyboard-response-stimulus").className += " responded";
       if (response.key == null) {
-        response = info2;
+        response = {
+          rt: info2.rt,
+          key: info2.key,
+          rt_key_duration: info2.rt_key_duration ?? null
+        };
       }
       if (trial.response_ends_trial) {
         end_trial();
@@ -265,7 +288,8 @@ class VideoKeyboardResponsePlugin {
         valid_responses: trial.choices,
         rt_method: "performance",
         persist: false,
-        allow_held_key: false
+        allow_held_key: false,
+        wait_for_key_release: trial.wait_for_key_release
       });
     }
     if (trial.trial_duration !== null) {
@@ -308,8 +332,10 @@ class VideoKeyboardResponsePlugin {
     const default_data = {
       stimulus: trial.stimulus,
       rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-      response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+      rt_key_duration: null
     };
+    default_data.rt_key_duration = default_data.rt === null || !trial.wait_for_key_release ? null : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
     const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
     this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
     return data;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.1\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, \n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":[],"mappings":";;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECkHA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-video-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for playing a video file and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-video-keyboard-response\"\n  },\n  \"author\": \"Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/video-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"video-keyboard-response\",\n  version: version,\n  parameters: {\n    /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */\n    stimulus: {\n      type: ParameterType.VIDEO,\n      pretty_name: \"Video\",\n      default: undefined,\n      array: true,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the height is also specified.\n     */\n    width: {\n      type: ParameterType.INT,\n      pretty_name: \"Width\",\n      default: \"\",\n    },\n    /** The height of the video display in pixels. If `null`, the video will take the original video's dimensions,\n     * or properly scaled with the aspect ratio if the width is also specified.\n     */\n    height: {\n      type: ParameterType.INT,\n      pretty_name: \"Height\",\n      default: \"\",\n    },\n    /** If true, the video will begin playing as soon as it has loaded. */\n    autoplay: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Autoplay\",\n      default: true,\n    },\n    /** If true, the subject will be able to pause the video or move the playback to any point in the video. */\n    controls: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Controls\",\n      default: false,\n    },\n    /** Time to start the clip. If null (default), video will start at the beginning of the file. */\n    start: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Start\",\n      default: null,\n    },\n    /** Time to stop the clip. If null (default), video will stop at the end of the file. */\n    stop: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Stop\",\n      default: null,\n    },\n    /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */\n    rate: {\n      type: ParameterType.FLOAT,\n      pretty_name: \"Rate\",\n      default: 1,\n    },\n    /** If true, the trial will end immediately after the video finishes playing. */\n    trial_ends_after_video: {\n      type: ParameterType.BOOL,\n      pretty_name: \"End trial after video finishes\",\n      default: false,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, the trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response allowed while playing\",\n      default: true,\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the\n     * stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */\n    stimulus: {\n      type: ParameterType.STRING,\n      array: true,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin plays a video file and records a keyboard response. The stimulus can be displayed until a response is\n * given, or for a pre-determined amount of time. The trial can be ended automatically when the participant responds,\n * when the video file has finished playing, or if the participant has failed to respond within a fixed length of time.\n * You can also prevent a keyboard response from being recorded before the video has finished playing.\n *\n * Video files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are\n * using timeline variables or another dynamic method to specify the video stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the videos. Also note that video preloading\n * is disabled when the experiment is running as a file (i.e. opened directly in the browser, rather than through a\n * server), in order to prevent CORS errors - see the section on [Running Experiments](../overview/running-experiments.md)\n * for more information.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}\n */\nclass VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    // setup stimulus\n    var video_html = \"<div>\";\n    video_html += '<video id=\"jspsych-video-keyboard-response-stimulus\"';\n\n    if (trial.width) {\n      video_html += ' width=\"' + trial.width + '\"';\n    }\n    if (trial.height) {\n      video_html += ' height=\"' + trial.height + '\"';\n    }\n    if (trial.autoplay && trial.start == null) {\n      // if autoplay is true and the start time is specified, then the video will start automatically\n      // via the play() method, rather than the autoplay attribute, to prevent showing the first frame\n      video_html += \" autoplay \";\n    }\n    if (trial.controls) {\n      video_html += \" controls \";\n    }\n    if (trial.start !== null) {\n      // hide video element when page loads if the start time is specified,\n      // to prevent the video element from showing the first frame\n      video_html += ' style=\"visibility: hidden;\"';\n    }\n    video_html += \">\";\n\n    var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);\n    if (!video_preload_blob) {\n      for (var i = 0; i < trial.stimulus.length; i++) {\n        var file_name = trial.stimulus[i];\n        if (file_name.indexOf(\"?\") > -1) {\n          file_name = file_name.substring(0, file_name.indexOf(\"?\"));\n        }\n        var type = file_name.substr(file_name.lastIndexOf(\".\") + 1);\n        type = type.toLowerCase();\n        if (type == \"mov\") {\n          console.warn(\n            \"Warning: video-keyboard-response plugin does not reliably support .mov files.\"\n          );\n        }\n        video_html += '<source src=\"' + file_name + '\" type=\"video/' + type + '\">';\n      }\n    }\n    video_html += \"</video>\";\n    video_html += \"</div>\";\n\n    // add prompt if there is one\n    if (trial.prompt !== null) {\n      video_html += trial.prompt;\n    }\n\n    display_element.innerHTML = video_html;\n\n    var video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-keyboard-response-stimulus\"\n    );\n\n    if (video_preload_blob) {\n      video_element.src = video_preload_blob;\n    }\n\n    video_element.onended = () => {\n      if (trial.trial_ends_after_video) {\n        end_trial();\n      }\n      if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {\n        // start keyboard listener\n        var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n          callback_function: after_response,\n          valid_responses: trial.choices,\n          rt_method: \"performance\",\n          persist: false,\n          allow_held_key: false,\n          wait_for_key_release: trial.wait_for_key_release,\n        });\n      }\n    };\n\n    video_element.playbackRate = trial.rate;\n\n    // if video start time is specified, hide the video and set the starting time\n    // before showing and playing, so that the video doesn't automatically show the first frame\n    if (trial.start !== null) {\n      video_element.pause();\n      video_element.onseeked = () => {\n        video_element.style.visibility = \"visible\";\n        video_element.muted = false;\n        if (trial.autoplay) {\n          video_element.play();\n        } else {\n          video_element.pause();\n        }\n        video_element.onseeked = () => {};\n      };\n      video_element.onplaying = () => {\n        video_element.currentTime = trial.start;\n        video_element.onplaying = () => {};\n      };\n      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,\n      // change current time, then show/unmute\n      video_element.muted = true;\n      video_element.play();\n    }\n\n    let stopped = false;\n    if (trial.stop !== null) {\n      video_element.addEventListener(\"timeupdate\", (e) => {\n        var currenttime = video_element.currentTime;\n        if (currenttime >= trial.stop) {\n          if (!trial.response_allowed_while_playing) {\n            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n              callback_function: after_response,\n              valid_responses: trial.choices,\n              rt_method: \"performance\",\n              persist: false,\n              allow_held_key: false,\n              wait_for_key_release: trial.wait_for_key_release,\n            });\n          }\n          video_element.pause();\n          if (trial.trial_ends_after_video && !stopped) {\n            // this is to prevent end_trial from being called twice, because the timeupdate event\n            // can fire in quick succession\n            stopped = true;\n            end_trial();\n          }\n        }\n      });\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      this.jsPsych.pluginAPI.cancelAllKeyboardResponses();\n\n      // stop the video file if it is playing\n      // remove end event listeners if they exist\n      display_element\n        .querySelector<HTMLVideoElement>(\"#jspsych-video-keyboard-response-stimulus\")\n        .pause();\n      display_element.querySelector<HTMLVideoElement>(\n        \"#jspsych-video-keyboard-response-stimulus\"\n      ).onended = () => {};\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-video-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\" && trial.response_allowed_while_playing) {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    const video_element = display_element.querySelector<HTMLVideoElement>(\n      \"#jspsych-video-button-response-stimulus\"\n    );\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n      }\n    };\n\n    if (!trial.response_allowed_while_playing) {\n      video_element.addEventListener(\"ended\", respond);\n    } else {\n      respond();\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default VideoKeyboardResponsePlugin;\n"],"names":[],"mappings":";;AAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiIA,SAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jspsych/plugin-video-keyboard-response",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "jsPsych plugin for playing a video file and getting a keyboard response",
   "type": "module",
   "main": "dist/index.cjs",
@@ -37,7 +37,7 @@
     "jspsych": ">=7.1.0"
   },
   "devDependencies": {
-    "@jspsych/config": "^3.3.1",
-    "@jspsych/test-utils": "^1.2.0"
+    "@jspsych/config": "^3.3.4",
+    "@jspsych/test-utils": "^1.3.0"
   }
 }

package/src/index.spec.ts

@@ -42,6 +42,24 @@ describe("video-keyboard-response simulation", () => {
 
     expect(getData().values()[0].rt).toBeGreaterThan(0);
     expect(typeof getData().values()[0].response).toBe("string");
+    expect(getData().values()[0].rt_key_duration).toBe(null);
+  });
+
+  test("data mode records rt_key_duration when wait_for_key_release is true", async () => {
+    const timeline = [
+      {
+        type: videoKeyboardResponse,
+        stimulus: ["foo.mp4"],
+        wait_for_key_release: true,
+      },
+    ];
+
+    const { expectFinished, getData } = await simulateTimeline(timeline);
+
+    await expectFinished();
+
+    expect(getData().values()[0].rt).toBeGreaterThan(0);
+    expect(typeof getData().values()[0].rt_key_duration).toBe("number");
   });
 
   // can't run this until we mock video elements.

package/src/index.ts

@@ -25,7 +25,7 @@ const info = <const>{
       pretty_name: "Prompt",
       default: null,
     },
-    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions, 
+    /** The width of the video display in pixels. If `null`, the video will take the original video's dimensions,
      * or properly scaled with the aspect ratio if the height is also specified.
      */
     width: {
@@ -95,6 +95,17 @@ const info = <const>{
       pretty_name: "Response allowed while playing",
       default: true,
     },
+    /** If true, the response is not registered until the participant releases the key. The response
+     * time (`rt`) still reflects when the key was pressed, and the additional data field
+     * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+     * key is still held, no response is recorded for the trial.
+     */
+    wait_for_key_release: {
+      type: ParameterType.BOOL,
+      default: false,
+    },
   },
   data: {
     /** Indicates which key the participant pressed. */
@@ -112,6 +123,10 @@ const info = <const>{
       type: ParameterType.STRING,
       array: true,
     },
+    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+    rt_key_duration: {
+      type: ParameterType.INT,
+    },
   },
   // prettier-ignore
   citations: '__CITATIONS__',
@@ -213,6 +228,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
           rt_method: "performance",
           persist: false,
           allow_held_key: false,
+          wait_for_key_release: trial.wait_for_key_release,
         });
       }
     };
@@ -255,6 +271,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
               rt_method: "performance",
               persist: false,
               allow_held_key: false,
+              wait_for_key_release: trial.wait_for_key_release,
             });
           }
           video_element.pause();
@@ -272,6 +289,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     var response = {
       rt: null,
       key: null,
+      rt_key_duration: null,
     };
 
     // function to end trial when it is time
@@ -293,6 +311,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         rt: response.rt,
         stimulus: trial.stimulus,
         response: response.key,
+        rt_key_duration: response.rt_key_duration,
       };
 
       // move on to the next trial
@@ -308,7 +327,11 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
       // only record the first response
       if (response.key == null) {
-        response = info;
+        response = {
+          rt: info.rt,
+          key: info.key,
+          rt_key_duration: info.rt_key_duration ?? null,
+        };
       }
 
       if (trial.response_ends_trial) {
@@ -324,6 +347,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         rt_method: "performance",
         persist: false,
         allow_held_key: false,
+        wait_for_key_release: trial.wait_for_key_release,
       });
     }
 
@@ -384,7 +408,12 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       stimulus: trial.stimulus,
       rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
       response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+      rt_key_duration: null,
     };
+    default_data.rt_key_duration =
+      default_data.rt === null || !trial.wait_for_key_release
+        ? null
+        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
 
     const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);