From d699a83f11360b26db3000defe746987b63daa9f Mon Sep 17 00:00:00 2001
From: Josh de Leeuw <josh.deleeuw@gmail.com>
Date: Tue, 31 May 2022 17:25:28 -0400
Subject: [PATCH] add width and height options for mirror plugin

---
 examples/jspsych-mirror-camera.html        |  3 ++-
 packages/plugin-mirror-camera/src/index.ts | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/jspsych-mirror-camera.html b/examples/jspsych-mirror-camera.html
index c48c6cfc..85ccdad9 100644
--- a/examples/jspsych-mirror-camera.html
+++ b/examples/jspsych-mirror-camera.html
@@ -16,7 +16,8 @@
   }
 
   const mirror_camera = {
-    type: jsPsychMirrorCamera
+    type: jsPsychMirrorCamera,
+    width: 320,
   }
 
   jsPsych.run([init_camera, mirror_camera]);
diff --git a/packages/plugin-mirror-camera/src/index.ts b/packages/plugin-mirror-camera/src/index.ts
index f6c00386..50a416c0 100644
--- a/packages/plugin-mirror-camera/src/index.ts
+++ b/packages/plugin-mirror-camera/src/index.ts
@@ -8,6 +8,16 @@ const info = <const>{
       type: ParameterType.STRING,
       default: "Continue",
     },
+    /** Height of the video element */
+    height: {
+      type: ParameterType.INT,
+      default: null,
+    },
+    /** Width of the video element */
+    width: {
+      type: ParameterType.INT,
+      default: null,
+    },
   },
 };
 
@@ -33,7 +43,9 @@ class MirrorCameraPlugin implements JsPsychPlugin<Info> {
     this.stream = this.jsPsych.pluginAPI.getCameraStream();
 
     display_element.innerHTML = `
-      <video autoplay playsinline id="jspsych-mirror-camera-video" style=""></video>
+      <video autoplay playsinline id="jspsych-mirror-camera-video" width="${
+        trial.width ? trial.width : "auto"
+      }" height="${trial.height ? trial.height : "auto"}"></video>
       <p><button class="jspsych-btn" id="btn-continue">${trial.button_label}</button></p>
     `;