.claude/agent-memory/hrms-checkin-expert/MEMORY.md

@@ -11,4 +11,3 @@
 - [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos
 - [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization
 - [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted)
-- [iOS 16 Inline White Preview](issue_ios16_inline_camera_white_preview.md) - Safari iOS 16 white preview needs single mount plus explicit video readiness

.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md

@@ -1,11 +0,0 @@
----
-name: ios16-inline-camera-white-preview
-description: Safari iOS 16 inline preview can stay white when multiple simple-vue-camera instances mount and playback readiness is assumed too early
-type: project
----
-
-In `HomeView.vue`, Safari on iOS 16.x can show a white in-page camera preview when more than one `simple-vue-camera` instance is mounted for responsive layouts and the app treats `camera.start()` as sufficient proof that the preview is rendering.
-
-**Why:** `simple-vue-camera` uses a hard-coded `id="video"` internally and does not explicitly call `video.play()` during `start()`. On mobile/xs, mounting both desktop and mobile camera components at once creates a fragile setup for Safari, where the active preview can remain white even though permission and stream startup succeeded.
-
-**How to apply:** Keep only the active responsive camera instance mounted in `HomeView.vue`, and after `camera.start()` explicitly prepare/check the underlying video element (`playsinline`, `muted`, `play()`, non-zero dimensions, ready state). If the preview still does not become render-ready, remount once and then fall back to native capture.

package.json

@@ -34,7 +34,6 @@
     "quasar": "^2.11.1",
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
-    "socket.io-client": "^4.8.3",
     "vite-plugin-pwa": "^0.16.7",
     "vue": "^3.4.15",
     "vue-router": "^4.1.6",

src/App.vue

@@ -1,12 +1,3 @@
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import { useSocketStore } from '@/stores/socket'
-
-onMounted(() => {
-  useSocketStore()
-})
-</script>
-
 <template>
   <router-view />
 </template>

src/api/socket.ts

@@ -1,7 +0,0 @@
-import env from "./index";
-
-const socket = `${env.API_URI}/org-socket`;
-
-export default {
-  socket,
-};

src/app.config.ts

@@ -4,7 +4,6 @@
 import leave from '@/api/api.checkin'
 import history from '@/api/api.history'
 import message from '@/api/api.message'
-import socket from '@/api/socket'
 
 const API = {
   /**leave */
@@ -13,7 +12,6 @@ const API = {
   ...history,
   /**message */
   ...message,
-  ...socket,
 }
 
 export default {

src/components/AscGISMap.vue

@@ -163,19 +163,8 @@ function reattachAndResizeMap(retry = 0) {
       mapView.value.container = activeContainer
     }
 
-    // เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่
+    mapView.value.resize()
-    try {
+    mapView.value.requestRender?.()
-      if (typeof mapView.value.resize === 'function') {
-        mapView.value.resize()
-      }
-    } catch (error) {
-      console.warn('Map resize failed:', error)
-    }
-
-    if (typeof mapView.value.requestRender === 'function') {
-      mapView.value.requestRender?.()
-    }
-
     mapView.value
       .goTo(
         {
@@ -296,11 +285,7 @@ async function initializeMap() {
       geometry: userPoint,
       symbol: userSymbol,
     })
-
+    mapView.value.graphics.add(userGraphic)
-    // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics
-    if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) {
-      mapView.value.graphics.add(userGraphic)
-    }
     // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
     // await axios
     //   .get(
@@ -396,22 +381,12 @@ async function initializeMap() {
           geometry: poiPoint,
           symbol: poiSymbol,
         })
-
+        mapView.value.graphics.add(poiGraphic)
-        // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo
+        // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-        if (mapView.value && !mapView.value.destroyed) {
+        mapView.value.goTo({
-          if (mapView.value.graphics) {
+          target: [userPoint, poiPoint],
-            mapView.value.graphics.add(poiGraphic)
+          zoom: zoomMap.value,
-          }
+        })
-          // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-          if (typeof mapView.value.goTo === 'function') {
-            mapView.value.goTo({
-              target: [userPoint, poiPoint],
-              zoom: zoomMap.value,
-            }).catch(() => {
-              // Ignore goTo errors
-            })
-          }
-        }
 
         updateLocation(latitude, longitude, poiPlaceName.value)
       })

src/stores/socket.ts

@@ -1,101 +0,0 @@
-import { ref } from 'vue'
-import config from '@/app.config'
-import { getToken } from '@/plugins/auth'
-import { defineStore } from 'pinia'
-import { Notify } from 'quasar'
-import { io, Socket } from 'socket.io-client'
-interface sockeBackup {
-  message: string
-  success?: boolean
-}
-
-export const useSocketStore = defineStore('socket', () => {
-  let socket: Socket
-  const notificationCounter = ref(0);
-
-  async function init() {
-    socket = io(new URL(config.API.socket).origin, {
-      auth: { token: await getToken() },
-      path: '/api/v1/org-socket',
-    })
-
-    socket.on('socket-notification', (payload) => {
-      let body: sockeBackup = JSON.parse(payload)
-      notificationCounter.value++ 
-      notifyStatus(body.message, body.success)
-    })
-  }
-
-  function notifyStatus(message: string, success?: boolean) {
-    Notify.create({
-      group: false,
-      type: success === undefined || success ? 'positive' : 'negative',
-      message: `${message}`,
-      position: 'top',
-      classes: 'custom-notification-top', // ใส่ class ที่เราสร้างไว้
-      timeout: success === undefined || success ? 3000 : 0,
-      actions:
-        success === undefined || success
-          ? []
-          : [
-              {
-                icon: 'close',
-                color: 'white',
-                round: true,
-              },
-            ],
-      progress: true,
-    })
-  }
-
-  function fnStyleNotiOrg() {
-    if (document.getElementById('notify-link-style')) return
-    const style = document.createElement('style')
-    style.id = 'notify-link-style'
-    style.textContent = `
-    .notify-link {
-      padding: 4px 8px;
-      border-radius: 4px;
-      text-decoration: none;
-      color: #fff;
-      border: 1px solid #fff;
-      transition: all 0.3s;
-      cursor: pointer;
-      margin:0 0 0 5px;
-    }
-    .notify-link:hover {
-      background-color: #ffffff;
-      color: #21BA45;
-    }
-  `
-    document.head.appendChild(style)
-  }
-  ;(window as any).resetOrgPage = (type: string) => {
-    localStorage.setItem('org_type', type)
-    window.location.reload()
-  }
-  function notifyStatusOrg(type: string, message: string, success?: boolean) {
-    fnStyleNotiOrg()
-    Notify.create({
-      message: `${message} <a href="#" onclick="window.resetOrgPage('${type}')" class="notify-link">${
-        type == 'draft' ? 'ไปยังโครงสร้างแบบร่าง' : 'ไปยังโครงสร้างปัจจุบัน'
-      }</a>`,
-      html: true,
-      group: false,
-      type: success === undefined || success ? 'positive' : 'negative',
-      position: 'top',
-      timeout: 0,
-      actions: [
-        {
-          icon: 'close',
-          color: 'white',
-          round: true,
-        },
-      ],
-    })
-  }
-
-  init()
-
-  return { notificationCounter }
-})

src/style/quasar-variables.sass

@@ -69,30 +69,30 @@ div
 $separator-color: #EDEDED !default
 
 .bg-teal-1
-    background: #e0f2f1a6 !important
+  background: #e0f2f1a6 !important
-
+  
 .table_ellipsis
-    max-width: 200px
+  max-width: 200px
-    white-space: nowrap
+  white-space: nowrap
-    overflow: hidden
+  overflow: hidden
-    text-overflow: ellipsis
+  text-overflow: ellipsis
 
 .table_ellipsis:hover
-    word-wrap: break-word
+  word-wrap: break-word
-    overflow: visible
+  overflow: visible
-    white-space: normal
+  white-space: normal
 
 .table_ellipsis2
-    max-width: 25vw
+  max-width: 25vw
-    white-space: nowrap
+  white-space: nowrap
-    overflow: hidden
+  overflow: hidden
-    text-overflow: ellipsis
+  text-overflow: ellipsis
 
 .table_ellipsis2:hover
-    word-wrap: break-word
+  word-wrap: break-word
-    overflow: visible
+  overflow: visible
-    white-space: normal
+  white-space: normal
-    transition: width 2s
+  transition: width 2s
 
 $muti-tab: #87d4cc
 .text-muti-tab
@@ -100,33 +100,35 @@ $muti-tab: #87d4cc
 .bg-muti-tab
     background: $muti-tab !important
 
+    
 /* editor */
 
 .q-editor
     font-size: 1rem
     line-height: 1.5rem
     font-weight: 400
-
+    
 .q-editor h1, .q-menu h1
-    font-size: 1.5rem
+  font-size: 1.5rem
-    line-height: 2rem
+  line-height: 2rem
-    font-weight: 400
+  font-weight: 400
-    margin-block-start: 0em
+  margin-block-start: 0em
-    margin-block-end: 0em
+  margin-block-end: 0em
 
 .q-editor h2,  .q-menu h2
-    font-size: 1.25rem
+  font-size: 1.25rem
-    line-height: 1.5rem
+  line-height: 1.5rem
-    font-weight: 400
+  font-weight: 400
-    margin-block-start: 0em
+  margin-block-start: 0em
-    margin-block-end: 0em
+  margin-block-end: 0em
+
 
 .q-editor h3, .q-menu h3
-    font-size: 1.1rem
+  font-size: 1.1rem
-    line-height: 1.5rem
+  line-height: 1.5rem
-    font-weight: 400
+  font-weight: 400
-    margin-block-start: 0em
+  margin-block-start: 0em
-    margin-block-end: 0em
+  margin-block-end: 0em
 
 .q-editor p, .q-menu p
     margin: 0
@@ -134,7 +136,4 @@ $muti-tab: #87d4cc
 /* q-tree */
 
 .q-tree
-    color: #c8d3db
+  color: #c8d3db
-
-.custom-notification-top
-    margin-top: 180px !important

src/views/HomeView.vue

@@ -1,17 +1,8 @@
 <script setup lang="ts">
-import {
+import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
-  ref,
-  reactive,
-  onMounted,
-  watch,
-  onBeforeUnmount,
-  computed,
-  nextTick,
-} from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
-import { storeToRefs } from 'pinia'
 
 import config from '@/app.config'
 import http from '@/plugins/http'
@@ -19,7 +10,6 @@ import { useCounterMixin } from '@/stores/mixin'
 import { usePermissions } from '@/composables/usePermissions'
 import { usePrivacyStore } from '@/stores/privacy'
 import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
-import { useSocketStore } from '@/stores/socket'
 
 import type { FormRef, OptionReason } from '@/interface/response/checkin'
 
@@ -34,8 +24,6 @@ const {
   syncPermissionStates,
   requestCameraPermission,
 } = usePermissions()
-const socketStore = useSocketStore()
-const { notificationCounter } = storeToRefs(socketStore)
 const privacyStore = usePrivacyStore()
 const positionKeycloakStore = usePositionKeycloakStore()
 const MOCK_CHECK_DELAY_MS = 800
@@ -199,131 +187,6 @@ function wait(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
-function getCameraVideoElement() {
-  return camera.value?.video
-}
-
-function prepareInlineCameraVideo(videoElement: HTMLVideoElement) {
-  videoElement.autoplay = true
-  videoElement.muted = true
-  videoElement.setAttribute('autoplay', '')
-  videoElement.setAttribute('muted', '')
-  videoElement.setAttribute('playsinline', '')
-  videoElement.setAttribute('webkit-playsinline', 'true')
-}
-
-function isInlineCameraPreviewReady(videoElement: HTMLVideoElement) {
-  return (
-    Boolean(videoElement.srcObject) &&
-    videoElement.videoWidth > 0 &&
-    videoElement.videoHeight > 0 &&
-    videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA
-  )
-}
-
-async function waitForCameraInstance() {
-  for (let attempt = 0; attempt < 10; attempt += 1) {
-    await nextTick()
-
-    if (camera.value) {
-      return camera.value
-    }
-
-    await wait(50)
-  }
-
-  return null
-}
-
-async function stopInlineCamera() {
-  camera.value?.stop()
-  cameraIsOn.value = false
-}
-
-async function remountInlineCameraComponent() {
-  await stopInlineCamera()
-  cameraMountKey.value += 1
-  await nextTick()
-  await wait(INLINE_CAMERA_REMOUNT_DELAY_MS)
-}
-
-async function ensureInlineCameraPreviewReady() {
-  const deadline = Date.now() + INLINE_CAMERA_PREVIEW_TIMEOUT_MS
-  let lastPlaybackError: unknown = null
-
-  while (Date.now() < deadline) {
-    const videoElement = getCameraVideoElement()
-
-    if (videoElement) {
-      prepareInlineCameraVideo(videoElement)
-
-      if (isInlineCameraPreviewReady(videoElement)) {
-        return
-      }
-
-      if (videoElement.srcObject) {
-        try {
-          await videoElement.play()
-        } catch (error) {
-          lastPlaybackError = error
-        }
-      }
-    }
-
-    await wait(INLINE_CAMERA_PREVIEW_POLL_MS)
-  }
-
-  if (lastPlaybackError instanceof Error) {
-    throw lastPlaybackError
-  }
-
-  throw new Error('Inline camera preview did not become ready in time')
-}
-
-async function syncActiveCameraDevices() {
-  const devices: any = await camera.value?.devices(['videoinput'])
-  if (!devices) {
-    return
-  }
-
-  availableCameras.value = devices
-
-  const activeId = camera.value?.currentDeviceID()
-  const activeIdx = activeId
-    ? devices.findIndex((device: any) => device.deviceId === activeId)
-    : -1
-  currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
-  currentCameraType.value = resolveCameraType(
-    devices[currentCameraIndex.value]?.label || '',
-    'front'
-  )
-}
-
-async function startInlineCamera(recoveryAttempt = 0): Promise<void> {
-  const cameraInstance = await waitForCameraInstance()
-
-  if (!cameraInstance) {
-    throw new Error('Camera component is unavailable')
-  }
-
-  try {
-    currentCameraType.value = 'front'
-    await cameraInstance.start()
-    await ensureInlineCameraPreviewReady()
-    await syncActiveCameraDevices()
-    cameraIsOn.value = true
-  } catch (error) {
-    await stopInlineCamera()
-
-    if (recoveryAttempt < MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS) {
-      await remountInlineCameraComponent()
-      return startInlineCamera(recoveryAttempt + 1)
-    }
-
-    throw error
-  }
-}
-
 async function getDelayedFreshPosition() {
   const firstPosition = await getCurrentPositionAsync({
     enableHighAccuracy: true,
@@ -389,7 +252,6 @@ const cameraIsOn = ref<boolean>(false)
 const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
-const cameraMountKey = ref<number>(0)
 const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
@@ -423,10 +285,6 @@ const centeredPreviewImageStyle = Object.freeze({
   objectFit: 'cover',
   objectPosition: 'center center',
 })
-const INLINE_CAMERA_PREVIEW_TIMEOUT_MS = isIOSDevice ? 2500 : 1800
-const INLINE_CAMERA_PREVIEW_POLL_MS = 120
-const INLINE_CAMERA_REMOUNT_DELAY_MS = 120
-const MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS = 1
 
 /** Ref for the hidden file input used as native camera fallback */
 const nativePhotoInput = ref<HTMLInputElement | null>(null)
@@ -555,7 +413,10 @@ async function assignSelectedPhoto(file: File) {
 }
 
 function openNativePhotoCapture() {
-  void stopInlineCamera()
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+    cameraIsOn.value = false
+  }
 
   if (nativePhotoInput.value) {
     nativePhotoInput.value.value = ''
@@ -565,7 +426,8 @@ function openNativePhotoCapture() {
 
 function enableNativePhotoCaptureFallback() {
   preferNativePhotoCapture.value = true
-  void stopInlineCamera()
+  camera.value?.stop()
+  cameraIsOn.value = false
   clearSelectedPhoto()
 }
 
@@ -638,18 +500,19 @@ async function fetchCheckStatus() {
       /** inQueue เป็น true  */
       isDisabledCheckTime.value = true
       msgCheckTime.value = 'ระบบกำลังประมวลผล'
-      // if (intervalId.value === undefined) {
+      if (intervalId.value === undefined) {
-      //   intervalId.value = setInterval(async () => {
+        intervalId.value = setInterval(async () => {
-      //     try {
+          try {
-      //       await fetchCheckStatus()
+            await fetchCheckStatus()
-      //     } catch (error) {
+          } catch (error) {
-      //       console.error('Error in interval fetchCheckStatus:', error)
+            console.error('Error in interval fetchCheckStatus:', error)
-      //       // หยุด interval ถ้าเกิด error
+            // หยุด interval ถ้าเกิด error
-      //       stopChecking()
+            stopChecking()
-      //     }
+          }
-      //   }, 3000)
+        }, 3000)
-      //   console.log('startChecking called, intervalId:', intervalId.value)
+        console.log('startChecking called, intervalId:', intervalId.value)
-      // }
+      }
+      // hideLoader()
     } else {
       /** inQueue เป็น false  */
       isDisabledCheckTime.value = false
@@ -751,7 +614,8 @@ async function openCamera() {
   }
 
   if (cameraIsOn.value) {
-    await stopInlineCamera()
+    camera.value?.stop()
+    cameraIsOn.value = false
     return
   }
 
@@ -781,7 +645,26 @@ async function openCamera() {
   }
 
   try {
-    await startInlineCamera()
+    currentCameraType.value = 'front'
+
+    // Keep the initial stream aligned with the Camera component's front-camera constraint.
+    await camera.value?.start()
+    const devices: any = await camera.value?.devices(['videoinput'])
+    if (devices) {
+      availableCameras.value = devices
+
+      // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
+      const activeId = camera.value?.currentDeviceID()
+      const activeIdx = activeId
+        ? devices.findIndex((d: any) => d.deviceId === activeId)
+        : -1
+      currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+      currentCameraType.value = resolveCameraType(
+        devices[currentCameraIndex.value]?.label || '',
+        'front'
+      )
+    }
+    cameraIsOn.value = true
   } catch (error) {
     console.error('Error opening camera:', error)
 
@@ -812,7 +695,6 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
         targetCameraType ??
         (currentCameraType.value === 'back' ? 'back' : 'front')
       await camera.value?.changeCamera(device.deviceId)
-      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = 0
       currentCameraType.value = resolveCameraType(
         device.label || '',
@@ -829,7 +711,6 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
     if (matchingCameras.length > 0) {
       const targetDevice = matchingCameras[0]
       await camera.value?.changeCamera(targetDevice.deviceId)
-      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = devices.indexOf(targetDevice)
       currentCameraType.value = resolveCameraType(
         targetDevice.label || '',
@@ -839,7 +720,6 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
       const nextIndex = (currentCameraIndex.value + 1) % devices.length
       const nextDevice = devices[nextIndex]
       await camera.value?.changeCamera(nextDevice.deviceId)
-      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = nextIndex
       currentCameraType.value = resolveCameraType(
         nextDevice.label || '',
@@ -863,7 +743,6 @@ async function switchCamera() {
   const fallbackType = currentCameraType.value === 'back' ? 'front' : 'back'
 
   await camera.value?.changeCamera(targetDevice.deviceId)
-  await ensureInlineCameraPreviewReady()
   currentCameraIndex.value = targetIndex
   currentCameraType.value = resolveCameraType(
     targetDevice.label || '',
@@ -902,7 +781,7 @@ async function capturePhoto() {
     await assignSelectedPhoto(normalizedFile)
 
     //แสดงรูป
-    await stopInlineCamera()
+    camera.value?.stop()
   } catch (error) {
     console.error('Error capturing photo:', error)
 
@@ -924,7 +803,7 @@ async function refreshPhoto() {
       openNativePhotoCapture()
       return
     }
-    await startInlineCamera()
+    await camera.value?.start()
   } catch (error) {
     console.error('Error refreshing photo:', error)
     messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
@@ -1159,7 +1038,10 @@ const inQueue = ref<boolean>(false)
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
   clearSelectedPhoto()
-  void stopInlineCamera()
+  if (cameraIsOn.value && camera.value) {
+    camera.value.stop()
+    cameraIsOn.value = false
+  }
 }
 
 // เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
@@ -1251,11 +1133,6 @@ watch(
     }
   }
 )
-
-/** Watch notification counter on socket */
-watch(notificationCounter, () => {
-  startChecking()
-})
 </script>
 
 <template>
@@ -1357,7 +1234,7 @@ watch(notificationCounter, () => {
                     />
                   </div>
                 </div>
-                <div v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-4">
+                <div class="col-xs-12 col-sm-4 gt-xs">
                   <q-card
                     :class="
                       $q.screen.xs ? 'card-container-xs' : 'card-container'
@@ -1380,7 +1257,6 @@ watch(notificationCounter, () => {
                     <div class="col-12 row items-center">
                       <!-- แสดงกล้องตอนกดถ่ายภาพ -->
                       <Camera
-                        :key="`desktop-${cameraMountKey}`"
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
                         :class="['camera-preview']"
@@ -1413,13 +1289,13 @@ watch(notificationCounter, () => {
                         </div>
                       </div>
 
-                      <div v-if="cameraIsOn && img == null">
+                      <div v-if="cameraIsOn">
                         <div
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
                           <q-btn
-                            v-if="availableCameras.length > 1"
+                            v-if="availableCameras.length > 1 && img == null"
                             round
                             push
                             icon="flip_camera_ios"
@@ -1429,6 +1305,7 @@ watch(notificationCounter, () => {
                             @click="switchCamera"
                           />
                           <q-btn
+                            v-if="img == null"
                             round
                             push
                             icon="photo_camera"
@@ -1436,41 +1313,8 @@ watch(notificationCounter, () => {
                             color="positive"
                             @click="capturePhoto"
                           />
-                        </div>
-                        <div v-else>
-                          <div
-                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
-                            style="background: #00000021"
-                          >
-                            <q-btn
-                              v-if="availableCameras.length > 1"
-                              round
-                              icon="flip_camera_ios"
-                              size="16px"
-                              style="background: #424242; color: white"
-                              @click="switchCamera"
-                              unelevated
-                              class="q-mr-xs"
-                            />
-                            <q-btn
-                              round
-                              icon="photo_camera"
-                              size="18px"
-                              style="background: #263238; color: white"
-                              @click="capturePhoto"
-                              unelevated
-                            />
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- Refresh button - shows when photo is captured regardless of camera state -->
-                      <div v-if="img != null && !useNativePhotoCapture">
-                        <div
-                          v-if="$q.screen.gt.xs"
-                          class="absolute-bottom-right q-ma-md"
-                        >
                           <q-btn
+                            v-else
                             round
                             push
                             icon="refresh"
@@ -1485,12 +1329,31 @@ watch(notificationCounter, () => {
                             style="background: #00000021"
                           >
                             <q-btn
+                              v-if="availableCameras.length > 1 && img == null"
+                              round
+                              icon="flip_camera_ios"
+                              size="16px"
+                              style="background: #424242; color: white"
+                              @click="switchCamera"
+                              unelevated
+                              class="q-mr-xs"
+                            />
+                            <q-btn
+                              round
+                              v-if="img == null"
+                              icon="photo_camera"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="capturePhoto"
+                              unelevated
+                            />
+                            <q-btn
+                              v-else
                               round
                               icon="refresh"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="refreshPhoto"
-                              unelevated
                             />
                           </div>
                         </div>
@@ -1525,7 +1388,6 @@ watch(notificationCounter, () => {
                       <div class="col-12 row items-center">
                         <!-- แสดงกล้องตอนกดถ่ายภาพ -->
                         <Camera
-                          :key="`mobile-${cameraMountKey}`"
                           :resolution="{
                             width: photoWidth,
                             height: photoHeight,
@@ -1562,13 +1424,13 @@ watch(notificationCounter, () => {
                           </div>
                         </div>
 
-                        <div v-if="cameraIsOn && img == null">
+                        <div v-if="cameraIsOn">
                           <div
                             class="absolute-bottom text-subtitle2 text-center q-py-sm"
                             style="background: #00000021"
                           >
                             <q-btn
-                              v-if="availableCameras.length > 1"
+                              v-if="availableCameras.length > 1 && img == null"
                               round
                               icon="flip_camera_ios"
                               size="16px"
@@ -1579,22 +1441,15 @@ watch(notificationCounter, () => {
                             />
                             <q-btn
                               round
+                              v-if="img == null"
                               icon="photo_camera"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="capturePhoto"
                               unelevated
                             />
-                          </div>
-                        </div>
-
-                        <!-- Refresh button - shows when photo is captured regardless of camera state -->
-                        <div v-if="img != null && !useNativePhotoCapture">
-                          <div
-                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
-                            style="background: #00000021"
-                          >
                             <q-btn
+                              v-else
                               round
                               icon="refresh"
                               size="18px"