@lookit/record 3.0.1 → 4.0.0

package/dist/index.browser.js

@@ -32,7 +32,7 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 
 	var _package = {
 	  name: "@lookit/record",
-	  version: "3.0.1",
+	  version: "4.0.0",
 	  description: "Recording extensions and plugins for CHS studies.",
 	  homepage: "https://github.com/lookit/lookit-jspsych#readme",
 	  bugs: {
@@ -74,7 +74,7 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  },
 	  peerDependencies: {
 	    "@lookit/data": "^0.2.0",
-	    "@lookit/templates": "^2.0.0",
+	    "@lookit/templates": "^2.1.0",
 	    jspsych: "^8.0.3"
 	  }
 	};
@@ -167,21 +167,10 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    this.name = "CreateURLError";
 	  }
 	}
-	class VideoContainerNotFoundError extends Error {
-	  constructor() {
-	    super("Video Container could not be found.");
-	    this.name = "VideoContainerError";
-	  }
-	}
-	class ButtonNotFoundError extends Error {
-	  constructor(id) {
-	    super(`"${id}" button not found.`);
-	    this.name = "ButtonNotFoundError";
-	  }
-	}
-	class ImageNotFoundError extends Error {
-	  constructor(id) {
-	    super(`"${id}" image not found.`);
+	class ElementNotFoundError extends Error {
+	  constructor(id, tag) {
+	    super(`"${id}" ${tag} not found.`);
+	    this.name = "ElementNotFoundError";
 	  }
 	}
 
@@ -8580,9 +8569,9 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    this.recorder.stop();
 	    this.stream.getTracks().map((t) => t.stop());
 	  }
-	  stop() {
+	  stop(maintain_container_size = false) {
+	    this.clearWebcamFeed(maintain_container_size);
 	    this.stopTracks();
-	    this.clearWebcamFeed();
 	    if (!this.stopPromise) {
 	      throw new NoStopPromiseError();
 	    }
@@ -8627,11 +8616,20 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	      link.click();
 	    }
 	  }
-	  clearWebcamFeed() {
+	  clearWebcamFeed(maintain_container_size) {
 	    const webcam_feed_element = document.querySelector(
 	      `#${this.webcam_element_id}`
 	    );
 	    if (webcam_feed_element) {
+	      if (maintain_container_size) {
+	        const parent_div = webcam_feed_element.parentElement;
+	        if (parent_div) {
+	          const width = webcam_feed_element.offsetWidth;
+	          const height = webcam_feed_element.offsetHeight;
+	          parent_div.style.height = `${height}px`;
+	          parent_div.style.width = `${width}px`;
+	        }
+	      }
 	      webcam_feed_element.remove();
 	    }
 	  }
@@ -8706,6 +8704,11 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  static info = info$3;
 	  recorder;
 	  video_container_id = "lookit-jspsych-video-container";
+	  msg_container_id = "lookit-jspsych-video-msg-container";
+	  uploadingMsg = null;
+	  startingMsg = null;
+	  recordingMsg = null;
+	  notRecordingMsg = null;
 	  trial(display, trial) {
 	    const consentVideo = chsTemplates.consentVideo(trial);
 	    display.insertAdjacentHTML("afterbegin", consentVideo);
@@ -8714,13 +8717,25 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    this.stopButton(display);
 	    this.playButton(display);
 	    this.nextButton(display);
+	    this.uploadingMsg = chsTemplates.translateString(
+	      "exp-lookit-video-consent.Stopping-and-uploading"
+	    );
+	    this.startingMsg = chsTemplates.translateString(
+	      "exp-lookit-video-consent.Starting-recorder"
+	    );
+	    this.recordingMsg = chsTemplates.translateString(
+	      "exp-lookit-video-consent.Recording"
+	    );
+	    this.notRecordingMsg = chsTemplates.translateString(
+	      "exp-lookit-video-consent.Not-recording"
+	    );
 	  }
 	  getVideoContainer(display) {
 	    const videoContainer = display.querySelector(
 	      `div#${this.video_container_id}`
 	    );
 	    if (!videoContainer) {
-	      throw new VideoContainerNotFoundError();
+	      throw new ElementNotFoundError(this.video_container_id, "div");
 	    }
 	    return videoContainer;
 	  }
@@ -8731,14 +8746,31 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  }
 	  playbackFeed(display) {
 	    const videoContainer = this.getVideoContainer(display);
-	    this.recorder.insertPlaybackFeed(videoContainer, this.onEnded(display));
+	    this.recorder.insertPlaybackFeed(
+	      videoContainer,
+	      this.onPlaybackEnded(display)
+	    );
 	  }
-	  onEnded(display) {
+	  getMessageContainer(display) {
+	    const msgContainer = display.querySelector(
+	      `div#${this.msg_container_id}`
+	    );
+	    if (!msgContainer) {
+	      throw new ElementNotFoundError(this.msg_container_id, "div");
+	    }
+	    return msgContainer;
+	  }
+	  addMessage(display, message) {
+	    const msgContainer = this.getMessageContainer(display);
+	    msgContainer.innerHTML = message;
+	  }
+	  onPlaybackEnded(display) {
 	    return () => {
 	      const next = this.getButton(display, "next");
 	      const play = this.getButton(display, "play");
 	      const record = this.getButton(display, "record");
 	      this.recordFeed(display);
+	      this.addMessage(display, this.notRecordingMsg);
 	      next.disabled = false;
 	      play.disabled = false;
 	      record.disabled = false;
@@ -8747,14 +8779,14 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  getButton(display, id) {
 	    const btn = display.querySelector(`button#${id}`);
 	    if (!btn) {
-	      throw new ButtonNotFoundError(id);
+	      throw new ElementNotFoundError(id, "button");
 	    }
 	    return btn;
 	  }
 	  getImg(display, id) {
 	    const img = display.querySelector(`img#${id}`);
 	    if (!img) {
-	      throw new ImageNotFoundError(id);
+	      throw new ElementNotFoundError(id, "img");
 	    }
 	    return img;
 	  }
@@ -8764,12 +8796,14 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    const play = this.getButton(display, "play");
 	    const next = this.getButton(display, "next");
 	    record.addEventListener("click", async () => {
+	      this.addMessage(display, this.startingMsg);
 	      record.disabled = true;
-	      stop.disabled = false;
 	      play.disabled = true;
 	      next.disabled = true;
-	      this.getImg(display, "record-icon").style.visibility = "visible";
 	      await this.recorder.start(true, VideoConsentPlugin.info.name);
+	      this.getImg(display, "record-icon").style.visibility = "visible";
+	      this.addMessage(display, this.recordingMsg);
+	      stop.disabled = false;
 	    });
 	  }
 	  playButton(display) {
@@ -8787,11 +8821,14 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    const play = this.getButton(display, "play");
 	    stop.addEventListener("click", async () => {
 	      stop.disabled = true;
-	      record.disabled = false;
-	      play.disabled = false;
-	      await this.recorder.stop();
+	      this.addMessage(display, this.uploadingMsg);
+	      await this.recorder.stop(true);
 	      this.recorder.reset();
 	      this.recordFeed(display);
+	      this.getImg(display, "record-icon").style.visibility = "hidden";
+	      this.addMessage(display, this.notRecordingMsg);
+	      play.disabled = false;
+	      record.disabled = false;
 	    });
 	  }
 	  nextButton(display) {
@@ -9288,4 +9325,4 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	return index;
 
 })(chsData, chsTemplates, jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@lookit/record@3.0.1/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@lookit/record@4.0.0/dist/index.browser.js.map