feat: more chrome fixes

NuttyShrimp · Apr 22, 2024 · e0889d9 · e0889d9
1 parent 5099451
commit e0889d9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/components/Camera.vue b/components/Camera.vue
@@ -56,7 +56,7 @@ const loadCamera = (deviceId: ConstrainDOMString) => {
       };
       video.value.srcObject = stream
       video.value.onloadedmetadata = function (e) {
-        cameraView.play()
+        video.value?.play()
       }
 
       window.localStorage.setItem(deviceStorageToken, deviceId.toString())
@@ -203,9 +203,8 @@ defineExpose({
 })
 </script>
 <template>
-  <div class="not-prose">
-
-    <video v-if="deviceId" ref="video" class="w-full object-contain" autoplay muted playsinline />
+  <div class="not-prose h-full">
+    <video v-if="deviceId" ref="video" class="h-full w-auto" autoplay muted playsinline />
     <div v-else>
       <USkeleton class="w-[95vw] h-[85svh]" />
     </div>

diff --git a/components/RunningEvent.vue b/components/RunningEvent.vue
@@ -57,13 +57,11 @@ const handleCameraStop = () => {
         <UButton icon="i-fa6-solid-camera-rotate" variant="soft" size="sm" square @click="camera?.rotateCamera" />
       </div>
     </div>
-    <div class="flex flex-1 items-center justify-center ">
-      <ClientOnly fallback-tag="span" fallback="Loading the camera...">
-        <Camera ref="camera" @unsupported="handleUnsupported" @error="handleCamError" @photo-taken="handlePhotoTaken"
-          @start="handleCameraStart" @stop="handleCameraStop" />
-      </ClientOnly>
+    <div class="flex items-center justify-center h-[90%]">
+      <Camera ref="camera" @unsupported="handleUnsupported" @error="handleCamError" @photo-taken="handlePhotoTaken"
+        @start="handleCameraStart" @stop="handleCameraStop" />
     </div>
-    <div class="flex flex-row z-10 w-full items-center rounded-t bg-cool-800 p-2">
+    <div class="flex flex-row z-10 w-full items-center rounded-t bg-cool-800 p-2 absolute bottom-0">
       <div class="flex-1 pl-2">
         <div class="w-20" v-if="data === undefined || pending">
           <UProgress animation="carousel" />

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -19,7 +19,7 @@ export default defineNuxtConfig({
     minioBucket: process.env.MINIO_BUCKET,
   },
   devtools: { enabled: true },
-  modules: ['@vite-pwa/nuxt', "@nuxt/ui", "nuxt-security", "dayjs-nuxt", "@nuxt/image"],
+  modules: ['@vite-pwa/nuxt', "@nuxt/ui", "dayjs-nuxt", "@nuxt/image"],
   dayjs: {
     plugins: ['utc', 'timezone', 'relativeTime'],
   },