allow overriding the frame image per action now. move preview stream …

…to a dedicated component.
photobooth-app · Jan 25, 2025 · 56ca345 · 56ca345
1 parent d22d049
commit 56ca345
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 83 deletions.
diff --git a/quasar.config.ts b/quasar.config.ts
@@ -100,7 +100,6 @@ export default defineConfig((ctx) => {
       open: true, // opens browser window automatically
       proxy: {
         '/private.css': 'http://127.0.0.1:8000/',
-        '/demoassets': 'http://127.0.0.1:8000/',
         '/userdata': 'http://127.0.0.1:8000/',
         '/media': 'http://127.0.0.1:8000/',
         '/api/sse': {

diff --git a/src/components/PreviewStream.vue b/src/components/PreviewStream.vue
@@ -0,0 +1,86 @@
+<template>
+  <!-- lowest layer: preview stream -->
+  <div id="preview-container" :class="{ mirroreffect: props.enableMirrorEffect }">
+    <div id="preview-blurredback" v-if="props.enableBlurredBackgroundStream" style="background-image: url('/api/aquisition/stream.mjpg')"></div>
+
+    <div id="overlay-wrapper" v-if="props.frameOverlayImage ?? true">
+      <img id="overlay-image" style="background-image: url('/api/aquisition/stream.mjpg')" :src="props.frameOverlayImage" />
+    </div>
+    <div id="stream-wrapper" v-else>
+      <img id="stream-image" src="/api/aquisition/stream.mjpg" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import type { components } from 'src/dto/api'
+
+const props = defineProps<{
+  // from docs: An absent optional prop other than Boolean will have undefined value.
+  enableMirrorEffect?: boolean
+  enableBlurredBackgroundStream?: boolean
+  frameOverlayImage?: string
+}>()
+</script>
+
+<style lang="scss">
+#preview-container {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+#preview-container.mirroreffect {
+  transform: scale(-1, 1);
+}
+
+#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(10px);
+  transform: translateZ(0);
+  opacity: 0.6;
+  position: fixed;
+}
+
+#stream-wrapper,
+#overlay-wrapper {
+  z-index: 2;
+  transform: translateZ(0);
+}
+
+#stream-wrapper {
+  height: 100%;
+}
+#overlay-image {
+  height: 100%;
+  max-height: 100vh;
+  max-width: 100vw;
+  background-position: center;
+  background-repeat: no-repeat;
+  object-fit: contain;
+  background-size: cover;
+}
+
+#stream-image {
+  height: 100%;
+  max-height: 100vh;
+  max-width: 100vw;
+  object-fit: contain;
+}
+
+#preview-container {
+  pointer-events: none;
+  user-select: none;
+}
+</style>
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -31,63 +31,7 @@ h6 {
   margin-bottom: 1rem;
 }
 
-#v2-preview-container {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-
-#v2-preview-container.mirroreffect {
-  transform: scale(-1, 1);
-}
-
-#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(10px);
-  transform: translateZ(0);
-  opacity: 0.6;
-  position: fixed;
-}
-
-#v2-stream-wrapper,
-#v2-overlay-wrapper {
-  z-index: 2;
-  transform: translateZ(0);
-}
-
-#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 {
+#frontpage_text {
   pointer-events: none;
   user-select: none;
 }

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -1,24 +1,11 @@
 <template>
   <q-page id="index-page" class="q-pa-none column full-height">
-    <!-- lowest layer: preview stream -->
-    <div id="v2-preview-container" :class="{ mirroreffect: livestreamMirror }" v-if="showPreview">
-      <div
-        id="v2-preview-blurredback"
-        v-if="configurationStore.configuration.uisettings.livestream_blurredbackground"
-        style="background-image: url('/api/aquisition/stream.mjpg')"
-      ></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>
+    <preview-stream
+      v-if="showPreview"
+      :frame-overlay-image="frameOverlayImage"
+      :enable-blurred-background-stream="configurationStore.configuration.uisettings.livestream_blurredbackground"
+      :enable-mirror-effect="configurationStore.configuration.uisettings.livestream_mirror_effect"
+    ></preview-stream>
 
     <!-- layer display processing spinner grid to show user computer working hard -->
     <div v-if="showProcessing" class="full-height full-width column justify-center content-center" style="position: absolute">
@@ -108,6 +95,8 @@ import { useConfigurationStore } from '../stores/configuration-store'
 import CountdownTimer from '../components/CountdownTimer.vue'
 import type { TriggerSchema } from '../components/FrontpageTriggerButtons.vue'
 import { default as FrontpageTriggerButtons } from '../components/FrontpageTriggerButtons.vue'
+import { default as PreviewStream } from '../components/PreviewStream.vue'
+import _ from 'lodash'
 
 const stateStore = useStateStore()
 const configurationStore = useConfigurationStore()
@@ -157,10 +146,6 @@ const showRecording = computed(() => {
   return stateStore.state == 'record'
 })
 
-const livestreamMirror = computed(() => {
-  return configurationStore.configuration.uisettings.livestream_mirror_effect
-})
-
 const adminButtonInvisible = computed(() => {
   return configurationStore.configuration.uisettings.admin_button_invisible
 })
@@ -171,6 +156,23 @@ const showCountdownCounting = computed(() => {
   return (stateStore.duration && stateStore.duration > 0 && machineCounting) || capture
 })
 
+const frameOverlayImage = computed(() => {
+  if (showCountdownCounting.value) {
+    const enable_action_frame_overlay = _.get(stateStore.configuration_set, 'processing.img_frame_enable', false)
+    const action_frame_overlay_image = _.get(stateStore.configuration_set, 'processing.img_frame_file', '')
+    if (enable_action_frame_overlay) {
+      return action_frame_overlay_image
+      // return '/userdata/frames/sprencles.png'
+    } else {
+      return configurationStore.configuration.uisettings.livestream_frameoverlay_image
+    }
+  } else if (configurationStore.configuration.uisettings.enable_livestream_frameoverlay) {
+    return configurationStore.configuration.uisettings.livestream_frameoverlay_image
+  } else {
+    return ''
+  }
+})
+
 const showPreview = computed(() => {
   const enabledWhenIdle = configurationStore.configuration.uisettings.enable_livestream_when_idle
   const enabledWhenActive = configurationStore.configuration.uisettings.enable_livestream_when_active

diff --git a/src/stores/mediacollection-store.ts b/src/stores/mediacollection-store.ts
@@ -80,8 +80,6 @@ export const useMediacollectionStore = defineStore('mediacollection-store', {
     },
 
     collection_number_of_items() {
-      //return Object.keys(this.collection).length;
-      console.log(this.collection.length)
       return this.collection.length
     },
   },