npm - @jspsych/plugin-video-keyboard-response - Versions diffs - 1.1.3 → 2.0.0 - Mend

@jspsych/plugin-video-keyboard-response 1.1.3 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.browser.js +313 -303
package/dist/index.browser.js.map +1 -1
package/dist/index.browser.min.js +5 -2
package/dist/index.browser.min.js.map +1 -1
package/dist/index.cjs +311 -301
package/dist/index.cjs.map +1 -1
package/dist/index.d.ts +51 -5
package/dist/index.js +311 -301
package/dist/index.js.map +1 -1
package/package.json +3 -3
package/src/index.ts +31 -9

package/dist/index.browser.js CHANGED Viewed

@@ -1,331 +1,341 @@
 var jsPsychVideoKeyboardResponse = (function (jspsych) {
   'use strict';
+  var _package = {
+    name: "@jspsych/plugin-video-keyboard-response",
+    version: "2.0.0",
+    description: "jsPsych plugin for playing a video file and getting a keyboard response",
+    type: "module",
+    main: "dist/index.cjs",
+    exports: {
+      import: "./dist/index.js",
+      require: "./dist/index.cjs"
+    },
+    typings: "dist/index.d.ts",
+    unpkg: "dist/index.browser.min.js",
+    files: [
+      "src",
+      "dist"
+    ],
+    source: "src/index.ts",
+    scripts: {
+      test: "jest --passWithNoTests",
+      "test:watch": "npm test -- --watch",
+      tsc: "tsc",
+      build: "rollup --config",
+      "build:watch": "npm run build -- --watch"
+    },
+    repository: {
+      type: "git",
+      url: "git+https://github.com/jspsych/jsPsych.git",
+      directory: "packages/plugin-video-keyboard-response"
+    },
+    author: "Josh de Leeuw",
+    license: "MIT",
+    bugs: {
+      url: "https://github.com/jspsych/jsPsych/issues"
+    },
+    homepage: "https://www.jspsych.org/latest/plugins/video-keyboard-response",
+    peerDependencies: {
+      jspsych: ">=7.1.0"
+    },
+    devDependencies: {
+      "@jspsych/config": "^3.0.0",
+      "@jspsych/test-utils": "^1.2.0"
+    }
+  };
   const info = {
-      name: "video-keyboard-response",
-      parameters: {
-          /** Array of the video file(s) to play. Video can be provided in multiple file formats for better cross-browser support. */
-          stimulus: {
-              type: jspsych.ParameterType.VIDEO,
-              pretty_name: "Video",
-              default: undefined,
-              array: true,
-          },
-          /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
-          choices: {
-              type: jspsych.ParameterType.KEYS,
-              pretty_name: "Choices",
-              default: "ALL_KEYS",
-          },
-          /** Any content here will be displayed below the stimulus. */
-          prompt: {
-              type: jspsych.ParameterType.HTML_STRING,
-              pretty_name: "Prompt",
-              default: null,
-          },
-          /** The width of the video in pixels. */
-          width: {
-              type: jspsych.ParameterType.INT,
-              pretty_name: "Width",
-              default: "",
-          },
-          /** The height of the video display in pixels. */
-          height: {
-              type: jspsych.ParameterType.INT,
-              pretty_name: "Height",
-              default: "",
-          },
-          /** If true, the video will begin playing as soon as it has loaded. */
-          autoplay: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "Autoplay",
-              default: true,
-          },
-          /** If true, the subject will be able to pause the video or move the playback to any point in the video. */
-          controls: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "Controls",
-              default: false,
-          },
-          /** Time to start the clip. If null (default), video will start at the beginning of the file. */
-          start: {
-              type: jspsych.ParameterType.FLOAT,
-              pretty_name: "Start",
-              default: null,
-          },
-          /** Time to stop the clip. If null (default), video will stop at the end of the file. */
-          stop: {
-              type: jspsych.ParameterType.FLOAT,
-              pretty_name: "Stop",
-              default: null,
-          },
-          /** The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. */
-          rate: {
-              type: jspsych.ParameterType.FLOAT,
-              pretty_name: "Rate",
-              default: 1,
-          },
-          /** If true, the trial will end immediately after the video finishes playing. */
-          trial_ends_after_video: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "End trial after video finishes",
-              default: false,
-          },
-          /** How long to show trial before it ends. */
-          trial_duration: {
-              type: jspsych.ParameterType.INT,
-              pretty_name: "Trial duration",
-              default: null,
-          },
-          /** If true, the trial will end when subject makes a response. */
-          response_ends_trial: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "Response ends trial",
-              default: true,
-          },
-          /** If true, then responses are allowed while the video is playing. If false, then the video must finish playing before a response is accepted. */
-          response_allowed_while_playing: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "Response allowed while playing",
-              default: true,
-          },
+    name: "video-keyboard-response",
+    version: _package.version,
+    parameters: {
+      stimulus: {
+        type: jspsych.ParameterType.VIDEO,
+        pretty_name: "Video",
+        default: void 0,
+        array: true
+      },
+      choices: {
+        type: jspsych.ParameterType.KEYS,
+        pretty_name: "Choices",
+        default: "ALL_KEYS"
+      },
+      prompt: {
+        type: jspsych.ParameterType.HTML_STRING,
+        pretty_name: "Prompt",
+        default: null
+      },
+      width: {
+        type: jspsych.ParameterType.INT,
+        pretty_name: "Width",
+        default: ""
+      },
+      height: {
+        type: jspsych.ParameterType.INT,
+        pretty_name: "Height",
+        default: ""
+      },
+      autoplay: {
+        type: jspsych.ParameterType.BOOL,
+        pretty_name: "Autoplay",
+        default: true
+      },
+      controls: {
+        type: jspsych.ParameterType.BOOL,
+        pretty_name: "Controls",
+        default: false
+      },
+      start: {
+        type: jspsych.ParameterType.FLOAT,
+        pretty_name: "Start",
+        default: null
+      },
+      stop: {
+        type: jspsych.ParameterType.FLOAT,
+        pretty_name: "Stop",
+        default: null
+      },
+      rate: {
+        type: jspsych.ParameterType.FLOAT,
+        pretty_name: "Rate",
+        default: 1
+      },
+      trial_ends_after_video: {
+        type: jspsych.ParameterType.BOOL,
+        pretty_name: "End trial after video finishes",
+        default: false
       },
+      trial_duration: {
+        type: jspsych.ParameterType.INT,
+        pretty_name: "Trial duration",
+        default: null
+      },
+      response_ends_trial: {
+        type: jspsych.ParameterType.BOOL,
+        pretty_name: "Response ends trial",
+        default: true
+      },
+      response_allowed_while_playing: {
+        type: jspsych.ParameterType.BOOL,
+        pretty_name: "Response allowed while playing",
+        default: true
+      }
+    },
+    data: {
+      response: {
+        type: jspsych.ParameterType.STRING
+      },
+      rt: {
+        type: jspsych.ParameterType.INT
+      },
+      stimulus: {
+        type: jspsych.ParameterType.STRING,
+        array: true
+      }
+    }
   };
-  /**
-   * **video-keyboard-response**
-   *
-   * jsPsych plugin for playing a video file and getting a keyboard response
-   *
-   * @author Josh de Leeuw
-   * @see {@link https://www.jspsych.org/plugins/jspsych-video-keyboard-response/ video-keyboard-response plugin documentation on jspsych.org}
-   */
   class VideoKeyboardResponsePlugin {
-      constructor(jsPsych) {
-          this.jsPsych = jsPsych;
-      }
-      trial(display_element, trial) {
-          // catch mistake where stimuli are not an array
-          if (!Array.isArray(trial.stimulus)) {
-              throw new Error(`
+    constructor(jsPsych) {
+      this.jsPsych = jsPsych;
+    }
+    static info = info;
+    trial(display_element, trial) {
+      if (!Array.isArray(trial.stimulus)) {
+        throw new Error(`
         The stimulus property for the video-keyboard-response plugin must be an array
         of files. See https://www.jspsych.org/latest/plugins/video-keyboard-response/#parameters
       `);
+      }
+      var video_html = "<div>";
+      video_html += '<video id="jspsych-video-keyboard-response-stimulus"';
+      if (trial.width) {
+        video_html += ' width="' + trial.width + '"';
+      }
+      if (trial.height) {
+        video_html += ' height="' + trial.height + '"';
+      }
+      if (trial.autoplay && trial.start == null) {
+        video_html += " autoplay ";
+      }
+      if (trial.controls) {
+        video_html += " controls ";
+      }
+      if (trial.start !== null) {
+        video_html += ' style="visibility: hidden;"';
+      }
+      video_html += ">";
+      var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);
+      if (!video_preload_blob) {
+        for (var i = 0; i < trial.stimulus.length; i++) {
+          var file_name = trial.stimulus[i];
+          if (file_name.indexOf("?") > -1) {
+            file_name = file_name.substring(0, file_name.indexOf("?"));
           }
-          // setup stimulus
-          var video_html = "<div>";
-          video_html += '<video id="jspsych-video-keyboard-response-stimulus"';
-          if (trial.width) {
-              video_html += ' width="' + trial.width + '"';
-          }
-          if (trial.height) {
-              video_html += ' height="' + trial.height + '"';
-          }
-          if (trial.autoplay && trial.start == null) {
-              // if autoplay is true and the start time is specified, then the video will start automatically
-              // via the play() method, rather than the autoplay attribute, to prevent showing the first frame
-              video_html += " autoplay ";
-          }
-          if (trial.controls) {
-              video_html += " controls ";
-          }
-          if (trial.start !== null) {
-              // hide video element when page loads if the start time is specified,
-              // to prevent the video element from showing the first frame
-              video_html += ' style="visibility: hidden;"';
-          }
-          video_html += ">";
-          var video_preload_blob = this.jsPsych.pluginAPI.getVideoBuffer(trial.stimulus[0]);
-          if (!video_preload_blob) {
-              for (var i = 0; i < trial.stimulus.length; i++) {
-                  var file_name = trial.stimulus[i];
-                  if (file_name.indexOf("?") > -1) {
-                      file_name = file_name.substring(0, file_name.indexOf("?"));
-                  }
-                  var type = file_name.substr(file_name.lastIndexOf(".") + 1);
-                  type = type.toLowerCase();
-                  if (type == "mov") {
-                      console.warn("Warning: video-keyboard-response plugin does not reliably support .mov files.");
-                  }
-                  video_html += '<source src="' + file_name + '" type="video/' + type + '">';
-              }
-          }
-          video_html += "</video>";
-          video_html += "</div>";
-          // add prompt if there is one
-          if (trial.prompt !== null) {
-              video_html += trial.prompt;
-          }
-          display_element.innerHTML = video_html;
-          var video_element = display_element.querySelector("#jspsych-video-keyboard-response-stimulus");
-          if (video_preload_blob) {
-              video_element.src = video_preload_blob;
-          }
-          video_element.onended = () => {
-              if (trial.trial_ends_after_video) {
-                  end_trial();
-              }
-              if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {
-                  // start keyboard listener
-                  this.jsPsych.pluginAPI.getKeyboardResponse({
-                      callback_function: after_response,
-                      valid_responses: trial.choices,
-                      rt_method: "performance",
-                      persist: false,
-                      allow_held_key: false,
-                  });
-              }
-          };
-          video_element.playbackRate = trial.rate;
-          // if video start time is specified, hide the video and set the starting time
-          // before showing and playing, so that the video doesn't automatically show the first frame
-          if (trial.start !== null) {
-              video_element.pause();
-              video_element.onseeked = () => {
-                  video_element.style.visibility = "visible";
-                  video_element.muted = false;
-                  if (trial.autoplay) {
-                      video_element.play();
-                  }
-                  else {
-                      video_element.pause();
-                  }
-                  video_element.onseeked = () => { };
-              };
-              video_element.onplaying = () => {
-                  video_element.currentTime = trial.start;
-                  video_element.onplaying = () => { };
-              };
-              // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
-              // change current time, then show/unmute
-              video_element.muted = true;
-              video_element.play();
+          var type = file_name.substr(file_name.lastIndexOf(".") + 1);
+          type = type.toLowerCase();
+          if (type == "mov") {
+            console.warn(
+              "Warning: video-keyboard-response plugin does not reliably support .mov files."
+            );
           }
-          let stopped = false;
-          if (trial.stop !== null) {
-              video_element.addEventListener("timeupdate", (e) => {
-                  var currenttime = video_element.currentTime;
-                  if (currenttime >= trial.stop) {
-                      if (!trial.response_allowed_while_playing) {
-                          this.jsPsych.pluginAPI.getKeyboardResponse({
-                              callback_function: after_response,
-                              valid_responses: trial.choices,
-                              rt_method: "performance",
-                              persist: false,
-                              allow_held_key: false,
-                          });
-                      }
-                      video_element.pause();
-                      if (trial.trial_ends_after_video && !stopped) {
-                          // this is to prevent end_trial from being called twice, because the timeupdate event
-                          // can fire in quick succession
-                          stopped = true;
-                          end_trial();
-                      }
-                  }
-              });
+          video_html += '<source src="' + file_name + '" type="video/' + type + '">';
+        }
+      }
+      video_html += "</video>";
+      video_html += "</div>";
+      if (trial.prompt !== null) {
+        video_html += trial.prompt;
+      }
+      display_element.innerHTML = video_html;
+      var video_element = display_element.querySelector(
+        "#jspsych-video-keyboard-response-stimulus"
+      );
+      if (video_preload_blob) {
+        video_element.src = video_preload_blob;
+      }
+      video_element.onended = () => {
+        if (trial.trial_ends_after_video) {
+          end_trial();
+        }
+        if (trial.response_allowed_while_playing == false && !trial.trial_ends_after_video) {
+          this.jsPsych.pluginAPI.getKeyboardResponse({
+            callback_function: after_response,
+            valid_responses: trial.choices,
+            rt_method: "performance",
+            persist: false,
+            allow_held_key: false
+          });
+        }
+      };
+      video_element.playbackRate = trial.rate;
+      if (trial.start !== null) {
+        video_element.pause();
+        video_element.onseeked = () => {
+          video_element.style.visibility = "visible";
+          video_element.muted = false;
+          if (trial.autoplay) {
+            video_element.play();
+          } else {
+            video_element.pause();
           }
-          // store response
-          var response = {
-              rt: null,
-              key: null,
-          };
-          // function to end trial when it is time
-          const end_trial = () => {
-              // kill any remaining setTimeout handlers
-              this.jsPsych.pluginAPI.clearAllTimeouts();
-              // kill keyboard listeners
-              this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
-              // stop the video file if it is playing
-              // remove end event listeners if they exist
-              display_element
-                  .querySelector("#jspsych-video-keyboard-response-stimulus")
-                  .pause();
-              display_element.querySelector("#jspsych-video-keyboard-response-stimulus").onended = () => { };
-              // gather the data to store for the trial
-              var trial_data = {
-                  rt: response.rt,
-                  stimulus: trial.stimulus,
-                  response: response.key,
-              };
-              // clear the display
-              display_element.innerHTML = "";
-              // move on to the next trial
-              this.jsPsych.finishTrial(trial_data);
+          video_element.onseeked = () => {
           };
-          // function to handle responses by the subject
-          var after_response = (info) => {
-              // after a valid response, the stimulus will have the CSS class 'responded'
-              // which can be used to provide visual feedback that a response was recorded
-              display_element.querySelector("#jspsych-video-keyboard-response-stimulus").className +=
-                  " responded";
-              // only record the first response
-              if (response.key == null) {
-                  response = info;
-              }
-              if (trial.response_ends_trial) {
-                  end_trial();
-              }
+        };
+        video_element.onplaying = () => {
+          video_element.currentTime = trial.start;
+          video_element.onplaying = () => {
           };
-          // start the response listener
-          if (trial.choices != "NO_KEYS" && trial.response_allowed_while_playing) {
+        };
+        video_element.muted = true;
+        video_element.play();
+      }
+      let stopped = false;
+      if (trial.stop !== null) {
+        video_element.addEventListener("timeupdate", (e) => {
+          var currenttime = video_element.currentTime;
+          if (currenttime >= trial.stop) {
+            if (!trial.response_allowed_while_playing) {
               this.jsPsych.pluginAPI.getKeyboardResponse({
-                  callback_function: after_response,
-                  valid_responses: trial.choices,
-                  rt_method: "performance",
-                  persist: false,
-                  allow_held_key: false,
+                callback_function: after_response,
+                valid_responses: trial.choices,
+                rt_method: "performance",
+                persist: false,
+                allow_held_key: false
               });
+            }
+            video_element.pause();
+            if (trial.trial_ends_after_video && !stopped) {
+              stopped = true;
+              end_trial();
+            }
           }
-          // end trial if time limit is set
-          if (trial.trial_duration !== null) {
-              this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-          }
+        });
       }
-      simulate(trial, simulation_mode, simulation_options, load_callback) {
-          if (simulation_mode == "data-only") {
-              load_callback();
-              this.simulate_data_only(trial, simulation_options);
-          }
-          if (simulation_mode == "visual") {
-              this.simulate_visual(trial, simulation_options, load_callback);
-          }
+      var response = {
+        rt: null,
+        key: null
+      };
+      const end_trial = () => {
+        this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
+        display_element.querySelector("#jspsych-video-keyboard-response-stimulus").pause();
+        display_element.querySelector(
+          "#jspsych-video-keyboard-response-stimulus"
+        ).onended = () => {
+        };
+        var trial_data = {
+          rt: response.rt,
+          stimulus: trial.stimulus,
+          response: response.key
+        };
+        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;
+        }
+        if (trial.response_ends_trial) {
+          end_trial();
+        }
+      };
+      if (trial.choices != "NO_KEYS" && trial.response_allowed_while_playing) {
+        this.jsPsych.pluginAPI.getKeyboardResponse({
+          callback_function: after_response,
+          valid_responses: trial.choices,
+          rt_method: "performance",
+          persist: false,
+          allow_held_key: false
+        });
       }
-      simulate_data_only(trial, simulation_options) {
-          const data = this.create_simulation_data(trial, simulation_options);
-          this.jsPsych.finishTrial(data);
+      if (trial.trial_duration !== null) {
+        this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
       }
-      simulate_visual(trial, simulation_options, load_callback) {
-          const data = this.create_simulation_data(trial, simulation_options);
-          const display_element = this.jsPsych.getDisplayElement();
-          this.trial(display_element, trial);
-          load_callback();
-          const video_element = display_element.querySelector("#jspsych-video-button-response-stimulus");
-          const respond = () => {
-              if (data.rt !== null) {
-                  this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
-              }
-          };
-          if (!trial.response_allowed_while_playing) {
-              video_element.addEventListener("ended", respond);
-          }
-          else {
-              respond();
-          }
+    }
+    simulate(trial, simulation_mode, simulation_options, load_callback) {
+      if (simulation_mode == "data-only") {
+        load_callback();
+        this.simulate_data_only(trial, simulation_options);
       }
-      create_simulation_data(trial, simulation_options) {
-          const default_data = {
-              stimulus: trial.stimulus,
-              rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-              response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
-          };
-          const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
-          this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
-          return data;
+      if (simulation_mode == "visual") {
+        this.simulate_visual(trial, simulation_options, load_callback);
+      }
+    }
+    simulate_data_only(trial, simulation_options) {
+      const data = this.create_simulation_data(trial, simulation_options);
+      this.jsPsych.finishTrial(data);
+    }
+    simulate_visual(trial, simulation_options, load_callback) {
+      const data = this.create_simulation_data(trial, simulation_options);
+      const display_element = this.jsPsych.getDisplayElement();
+      this.trial(display_element, trial);
+      load_callback();
+      const video_element = display_element.querySelector(
+        "#jspsych-video-button-response-stimulus"
+      );
+      const respond = () => {
+        if (data.rt !== null) {
+          this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
+        }
+      };
+      if (!trial.response_allowed_while_playing) {
+        video_element.addEventListener("ended", respond);
+      } else {
+        respond();
       }
+    }
+    create_simulation_data(trial, simulation_options) {
+      const default_data = {
+        stimulus: trial.stimulus,
+        rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
+        response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+      };
+      const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
+      this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
+      return data;
+    }
   }
-  VideoKeyboardResponsePlugin.info = info;
   return VideoKeyboardResponsePlugin;
 })(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-video-keyboard-response@1.1.3/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-video-keyboard-response@2.0.0/dist/index.browser.js.map