Mirror webcam display (#99)

* add webcam-feed class to all video elements that display a webcam feed * add css rule for webcam-feed, rename consent-video-trial scss, move video-config scss to separate file
lookit · Nov 1, 2024 · 1a7d73e · 1a7d73e
1 parent 1118fc7
commit 1a7d73e
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 180 deletions.
diff --git a/.changeset/large-schools-talk.md b/.changeset/large-schools-talk.md
@@ -0,0 +1,6 @@
+---
+"@lookit/record": patch
+"@lookit/style": patch
+---
+
+Change the webcam display to mirror the participant.
diff --git a/packages/record/hbs/playback-feed.hbs b/packages/record/hbs/playback-feed.hbs
@@ -2,6 +2,7 @@
   autoplay
   playsinline
   src="{{{src}}}"
+  class="webcam-feed"
   id="{{webcam_element_id}}"
   width="{{width}}"
   height="{{height}}"

diff --git a/packages/record/hbs/record-feed.hbs b/packages/record/hbs/record-feed.hbs
@@ -2,6 +2,7 @@
   autoplay
   playsinline
   muted
+  class="webcam-feed"
   id="{{webcam_element_id}}"
   width="{{width}}"
   height="{{height}}"

diff --git a/packages/record/hbs/webcam-feed.hbs b/packages/record/hbs/webcam-feed.hbs
@@ -2,6 +2,7 @@
   autoplay
   playsinline
   muted
+  class="webcam-feed"
   id="{{webcam_element_id}}"
   width="{{width}}"
   height="{{height}}"

diff --git a/...ages/record/scss/consent-video-trial.scss → ...ges/record/scss/consent-video-plugin.scss b/...ages/record/scss/consent-video-trial.scss → ...ges/record/scss/consent-video-plugin.scss
diff --git a/packages/record/scss/index.scss b/packages/record/scss/index.scss
@@ -1,182 +1,6 @@
-@import "./consent-video-trial";
+@import "./consent-video-plugin";
+@import "./video-config-plugin";
 
-div#lookit-jspsych-video-config {
-  margin-top: 5%;
-  margin-bottom: 10%;
-
-  button.lookit-jspsych-btn {
-    font-size: 18px;
-  }
-
-  /* Webcam/instructions row container */
-  #lookit-jspsych-video-config-row-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: center;
-  }
-
-  /* Title container */
-  #lookit-jspsych-video-config-title-row {
-    text-align: left;
-    margin-bottom: 10px;
-    margin-left: 10%;
-  }
-
-  /* Webcam column */
-  #lookit-jspsych-video-config-webcam-column {
-    flex-basis: 40%;
-    margin: 5px;
-    min-width: 300px;
-    margin-bottom: 1.6em;
-  }
-
-  /* Webcam container */
-  #lookit-jspsych-webcam-container {
-    width: 100%;
-    margin-bottom: 5px;
-    min-width: 300px;
-    min-height: 225px;
-  }
-
-  /* Container for elements displayed below the webcam feed (reload and device selection) */
-  #lookit-jspsych-webcam-buttons {
-    display: flex;
-    flex-direction: row;
-  }
-
-  /* Webcam reload button container */
-  #lookit-jspsych-webcam-reload-container {
-    flex: none;
-    align-content: center;
-  }
-
-  /* Webcam/mic device selection container */
-  #lookit-jspsych-device-selection-container {
-    flex: auto;
-  }
-
-  /* Device selection elements */
-  .lookit-jspsych-device-selection {
-    font-size: 14px;
-    font-family: "Open Sans", "Arial", sans-serif;
-    padding: 4px;
-  }
-
-  #lookit-jspsych-video-config-instructions-column {
-    flex-basis: 40%;
-    margin: 5px;
-    text-align: left;
-  }
-
-  /* Error/info message div */
-  #lookit-jspsych-video-config-errors {
-    min-height: 3em;
-    margin-top: -3em;
-    text-align: center;
-    font-weight: bold;
-    color: red;
-  }
-
-  /* Instructions */
-  #lookit-jspsych-video-config-instructions {
-    margin-top: 0;
-  }
-
-  /* Next button container */
-  #lookit-jspsych-next-container {
-    padding: 10px 0px;
-  }
-
-  /* Instruction step complete class */
-  .lookit-jspsych-step-complete {
-    font-weight: bold;
-  }
-
-  /** Help text, such as that about browser compatibility */
-  .lookit-jspsych-help-text {
-    font-size: 0.8em;
-    line-height: 1.5em;
-    text-align: left;
-    margin-top: 10px;
-  }
-
-  #lookit-jspsych-config-troubleshooting-column-container {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-items: flex-start;
-    justify-content: center;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 10%;
-    max-width: 90%;
-  }
-
-  div#lookit-jspsych-accordion-header-container {
-    text-align: center;
-    width: 100%;
-  }
-
-  div#lookit-jspsych-accordion-container {
-    text-align: left;
-  }
-
-  p#lookit-jspsych-troubleshooting-intro {
-    text-align: left;
-    padding: 0 18px;
-  }
-
-  /* Accordion section titles (buttons) for opening/closing the accordion panel content. */
-  button.lookit-jspsych-accordion {
-    background-color: #eee;
-    color: #444;
-    cursor: pointer;
-    padding: 18px;
-    width: 100%;
-    text-align: left;
-    border: none;
-    outline: none;
-    transition: 0.4s;
-    float: left;
-    font-size: 1.2em;
-    font-weight: bold;
-  }
-
-  /* Background color for the accordion section (button) when "active" (selected) and on hover */
-  .active,
-  button.lookit-jspsych-accordion:hover {
-    background-color: #ccc;
-  }
-
-  /* Content within each accordion button. */
-  div.lookit-jspsych-accordion-panel {
-    padding: 0 18px;
-    background-color: white;
-    display: none;
-    overflow: hidden;
-  }
-
-  button.lookit-jspsych-accordion:after {
-    content: "\02795"; /* Unicode character for "plus" sign (+) */
-    font-size: 13px;
-    color: #777;
-    float: right;
-    margin-left: 5px;
-  }
-
-  button.lookit-jspsych-accordion.active:after {
-    content: "\2796"; /* Unicode character for "minus" sign (-) */
-  }
-
-  .lookit-jspsych-screenshot {
-    display: block;
-    margin: 15px auto;
-    max-width: 30%;
-  }
-
-  img.lookit-jspsych-checkmark {
-    max-width: 20px;
-  }
+video.webcam-feed {
+  transform: rotateY(180deg);
 }
diff --git a/packages/record/scss/video-config-plugin.scss b/packages/record/scss/video-config-plugin.scss
@@ -0,0 +1,180 @@
+div#lookit-jspsych-video-config {
+  margin-top: 5%;
+  margin-bottom: 10%;
+
+  button.lookit-jspsych-btn {
+    font-size: 18px;
+  }
+
+  /* Webcam/instructions row container */
+  #lookit-jspsych-video-config-row-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  /* Title container */
+  #lookit-jspsych-video-config-title-row {
+    text-align: left;
+    margin-bottom: 10px;
+    margin-left: 10%;
+  }
+
+  /* Webcam column */
+  #lookit-jspsych-video-config-webcam-column {
+    flex-basis: 40%;
+    margin: 5px;
+    min-width: 300px;
+    margin-bottom: 1.6em;
+  }
+
+  /* Webcam container */
+  #lookit-jspsych-webcam-container {
+    width: 100%;
+    margin-bottom: 5px;
+    min-width: 300px;
+    min-height: 225px;
+  }
+
+  /* Container for elements displayed below the webcam feed (reload and device selection) */
+  #lookit-jspsych-webcam-buttons {
+    display: flex;
+    flex-direction: row;
+  }
+
+  /* Webcam reload button container */
+  #lookit-jspsych-webcam-reload-container {
+    flex: none;
+    align-content: center;
+  }
+
+  /* Webcam/mic device selection container */
+  #lookit-jspsych-device-selection-container {
+    flex: auto;
+  }
+
+  /* Device selection elements */
+  .lookit-jspsych-device-selection {
+    font-size: 14px;
+    font-family: "Open Sans", "Arial", sans-serif;
+    padding: 4px;
+  }
+
+  #lookit-jspsych-video-config-instructions-column {
+    flex-basis: 40%;
+    margin: 5px;
+    text-align: left;
+  }
+
+  /* Error/info message div */
+  #lookit-jspsych-video-config-errors {
+    min-height: 3em;
+    margin-top: -3em;
+    text-align: center;
+    font-weight: bold;
+    color: red;
+  }
+
+  /* Instructions */
+  #lookit-jspsych-video-config-instructions {
+    margin-top: 0;
+  }
+
+  /* Next button container */
+  #lookit-jspsych-next-container {
+    padding: 10px 0px;
+  }
+
+  /* Instruction step complete class */
+  .lookit-jspsych-step-complete {
+    font-weight: bold;
+  }
+
+  /** Help text, such as that about browser compatibility */
+  .lookit-jspsych-help-text {
+    font-size: 0.8em;
+    line-height: 1.5em;
+    text-align: left;
+    margin-top: 10px;
+  }
+
+  #lookit-jspsych-config-troubleshooting-column-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    justify-content: center;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10%;
+    max-width: 90%;
+  }
+
+  div#lookit-jspsych-accordion-header-container {
+    text-align: center;
+    width: 100%;
+  }
+
+  div#lookit-jspsych-accordion-container {
+    text-align: left;
+  }
+
+  p#lookit-jspsych-troubleshooting-intro {
+    text-align: left;
+    padding: 0 18px;
+  }
+
+  /* Accordion section titles (buttons) for opening/closing the accordion panel content. */
+  button.lookit-jspsych-accordion {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    outline: none;
+    transition: 0.4s;
+    float: left;
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+
+  /* Background color for the accordion section (button) when "active" (selected) and on hover */
+  .active,
+  button.lookit-jspsych-accordion:hover {
+    background-color: #ccc;
+  }
+
+  /* Content within each accordion button. */
+  div.lookit-jspsych-accordion-panel {
+    padding: 0 18px;
+    background-color: white;
+    display: none;
+    overflow: hidden;
+  }
+
+  button.lookit-jspsych-accordion:after {
+    content: "\02795"; /* Unicode character for "plus" sign (+) */
+    font-size: 13px;
+    color: #777;
+    float: right;
+    margin-left: 5px;
+  }
+
+  button.lookit-jspsych-accordion.active:after {
+    content: "\2796"; /* Unicode character for "minus" sign (-) */
+  }
+
+  .lookit-jspsych-screenshot {
+    display: block;
+    margin: 15px auto;
+    max-width: 30%;
+  }
+
+  img.lookit-jspsych-checkmark {
+    max-width: 20px;
+  }
+}