whattheduck: Fix native layout for camera preview

ducksmanager · Jul 9, 2024 · a4cda03 · a4cda03
1 parent 1d127ea
commit a4cda03
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/apps/whattheduck/.env b/apps/whattheduck/.env
@@ -1,10 +1,10 @@
 BASE_URL=http://localhost:8003
 
-#VITE_DM_SOCKET_URL=https://api-websocket.ducksmanager.net
-#VITE_DM_SOCKET_URL_NATIVE=https://api-websocket.ducksmanager.net
+VITE_DM_SOCKET_URL=https://api-websocket.ducksmanager.net
+VITE_DM_SOCKET_URL_NATIVE=https://api-websocket.ducksmanager.net
 
-VITE_DM_SOCKET_URL=http://localhost:3000
-VITE_DM_SOCKET_URL_NATIVE=http://192.168.1.209:3000
+#VITE_DM_SOCKET_URL=http://localhost:3000
+#VITE_DM_SOCKET_URL_NATIVE=http://192.168.1.209:3000
 
 VITE_DM_URL=https://ducksmanager.net
 

diff --git a/apps/whattheduck/src/components/List.vue b/apps/whattheduck/src/components/List.vue
@@ -55,8 +55,8 @@
 
     <template v-if="isCameraPreviewShown">
       <div :id="cameraPreviewElementId"></div>
-      <div class="overlay">
-        <ion-button @click="takePhoto().then(() => (isCameraPreviewShown = false))" size="large">
+      <div class="overlay" ref="overlay">
+        <ion-button ref="takePhotoButton" @click="takePhoto().then(() => (isCameraPreviewShown = false))" size="large">
           <ion-icon :ios="apertureOutline" :md="apertureSharp" />
         </ion-button>
         <ion-button size="large" color="danger" @click="isCameraPreviewShown = false">
@@ -109,6 +109,9 @@ const props = defineProps<{
 
 const emit = defineEmits<(e: 'items-filtered', items: string[]) => void>();
 
+const overlay = ref<HTMLElement>();
+const takePhotoButton = ref<{ $el: HTMLElement }>();
+
 const {
   coverId: { services: coverIdServices },
 } = injectLocal(dmSocketInjectionKey)!;
@@ -120,15 +123,33 @@ const { isCameraPreviewShown, filterText, selectedIssuenumbers, currentNavigatio
 
 watch(isCameraPreviewShown, async () => {
   if (isCameraPreviewShown.value) {
-    await nextTick();
-    const cameraPreviewElementBoundingRect = document.getElementById('camera-preview')!.getBoundingClientRect();
-
-    const cameraPreviewOptions: CameraPreviewOptions = {
-      parent: cameraPreviewElementId,
-      position: 'rear',
-      ...cameraPreviewElementBoundingRect,
-    };
-    CameraPreview.start(cameraPreviewOptions);
+    let loopIteration = 0;
+    const interval = setInterval(() => {
+      const boundingClientRect = Object.entries(overlay.value!.getBoundingClientRect().toJSON()).reduce(
+        (acc, [key, value]) => ({
+          ...acc,
+          [key]: parseInt(
+            ((value as number) - (key === 'height' ? takePhotoButton.value!.$el.clientHeight : 0)).toFixed(),
+          ),
+        }),
+        {},
+      ) as DOMRect;
+      console.log(boundingClientRect);
+
+      if (boundingClientRect.height) {
+        clearInterval(interval);
+        const cameraPreviewOptions: CameraPreviewOptions = {
+          parent: cameraPreviewElementId,
+          position: 'rear',
+          ...boundingClientRect,
+        };
+        CameraPreview.start(cameraPreviewOptions);
+      } else if (loopIteration > 10) {
+        console.error('Could not get overlayElement height');
+        clearInterval(interval);
+      }
+      loopIteration++;
+    }, 50);
   } else {
     CameraPreview.stop();
   }

diff --git a/apps/whattheduck/src/components/NavigationDrawer.vue b/apps/whattheduck/src/components/NavigationDrawer.vue
@@ -79,14 +79,14 @@ const { token, isOfflineMode } = storeToRefs(app());
 const collectionStore = wtdcollection();
 const points = computed(() => webStores.users().points);
 
-type AppPage = {
+interface AppPage {
   title: string;
   url: string;
   disabledOnOfflineMode?: boolean;
   iosIcon: string;
   mdIcon: string;
   chip?: number;
-};
+}
 
 const appPages: AppPage[] = [
   {