greatly simplify preview htmlcss

photobooth-app · Jan 24, 2025 · bec5db3 · bec5db3
1 parent 838138d
commit bec5db3
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 50 deletions.
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -31,66 +31,64 @@ h6 {
   margin-bottom: 1rem;
 }
 
-#preview-container {
-  display: flex;
-  justify-content: center;
-}
-#preview-wrapper {
+#v2-preview-container {
+  position: fixed;
   display: flex;
   justify-content: center;
-  position: fixed;
-  height: 100%;
-  transform: translateZ(0);
-}
 
-#stream-container {
-  position: relative;
-  display: inline-block;
+  align-items: center;
   height: 100%;
-}
-#preview-container {
-  pointer-events: none;
-  user-select: none;
-}
-
-#stream-image {
-  display: block;
   width: 100%;
-  height: 100%;
-  object-fit: contain;
 }
 
-#overlay-image {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
+#v2-preview-container.mirroreffect {
+  transform: scale(-1, 1);
 }
 
-#preview-blurredback {
+#v2-preview-blurredback {
+  z-index: 1;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   width: 110%;
   height: 110%;
   top: -5%;
   left: -5%;
-  filter: blur(13px);
+  filter: blur(10px);
   transform: translateZ(0);
   opacity: 0.6;
   position: fixed;
 }
 
-#preview-blurredback.mirroreffect,
-#stream-container.mirroreffect {
-  transform: scale(-1, 1);
+#v2-stream-wrapper,
+#v2-overlay-wrapper {
+  z-index: 2;
+  transform: translateZ(0);
 }
 
-#frontpage_text {
+#v2-stream-wrapper {
+  height: 100%;
+}
+#v2-overlay-image {
+  height: 100%;
+  max-height: 100vh;
+  max-width: 100vw;
+  background-position: center;
+  background-repeat: no-repeat;
+  object-fit: contain;
+  background-size: cover;
+}
+
+#v2-stream-image {
+  height: 100%;
+  max-height: 100vh;
+  max-width: 100vw;
+  object-fit: contain;
+}
+
+#frontpage_text,
+#preview-container {
+  pointer-events: none;
   user-select: none;
 }
 

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -1,24 +1,22 @@
 <template>
   <q-page id="index-page" class="q-pa-none column full-height">
     <!-- lowest layer: preview stream -->
-
-    <div id="preview-container" v-if="showPreview">
+    <div id="v2-preview-container" :class="{ mirroreffect: livestreamMirror }" v-if="showPreview">
       <div
-        id="preview-blurredback"
+        id="v2-preview-blurredback"
         v-if="configurationStore.configuration.uisettings.livestream_blurredbackground"
         style="background-image: url('/api/aquisition/stream.mjpg')"
-        :class="{ mirroreffect: livestreamMirror }"
       ></div>
 
-      <div id="preview-wrapper">
-        <div id="stream-container" :class="{ mirroreffect: livestreamMirror }">
-          <img src="/api/aquisition/stream.mjpg" id="stream-image" />
-          <img
-            id="overlay-image"
-            v-if="configurationStore.configuration.uisettings.enable_livestream_frameoverlay"
-            :src="configurationStore.configuration.uisettings.livestream_frameoverlay_image"
-          />
-        </div>
+      <div id="v2-overlay-wrapper" v-if="configurationStore.configuration.uisettings.enable_livestream_frameoverlay">
+        <img
+          id="v2-overlay-image"
+          style="background-image: url('/api/aquisition/stream.mjpg')"
+          :src="configurationStore.configuration.uisettings.livestream_frameoverlay_image"
+        />
+      </div>
+      <div id="v2-stream-wrapper" v-else>
+        <img id="v2-stream-image" src="/api/aquisition/stream.mjpg" />
       </div>
     </div>