Compare commits
No commits in common. "dev" and "v1.1.26" have entirely different histories.
10 changed files with 122 additions and 425 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,3 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
|
||||
onMounted(() => {
|
||||
useSocketStore()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
import env from "./index";
|
||||
|
||||
const socket = `${env.API_URI}/org-socket`;
|
||||
|
||||
export default {
|
||||
socket,
|
||||
};
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -163,19 +163,8 @@ function reattachAndResizeMap(retry = 0) {
|
|||
mapView.value.container = activeContainer
|
||||
}
|
||||
|
||||
// เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่
|
||||
try {
|
||||
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,
|
||||
})
|
||||
|
||||
// เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง 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,
|
||||
})
|
||||
|
||||
// เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo
|
||||
if (mapView.value && !mapView.value.destroyed) {
|
||||
if (mapView.value.graphics) {
|
||||
mapView.value.graphics.add(poiGraphic)
|
||||
}
|
||||
// อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ 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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
})
|
||||
|
|
@ -100,6 +100,7 @@ $muti-tab: #87d4cc
|
|||
.bg-muti-tab
|
||||
background: $muti-tab !important
|
||||
|
||||
|
||||
/* editor */
|
||||
|
||||
.q-editor
|
||||
|
|
@ -121,6 +122,7 @@ $muti-tab: #87d4cc
|
|||
margin-block-start: 0em
|
||||
margin-block-end: 0em
|
||||
|
||||
|
||||
.q-editor h3, .q-menu h3
|
||||
font-size: 1.1rem
|
||||
line-height: 1.5rem
|
||||
|
|
@ -135,6 +137,3 @@ $muti-tab: #87d4cc
|
|||
|
||||
.q-tree
|
||||
color: #c8d3db
|
||||
|
||||
.custom-notification-top
|
||||
margin-top: 180px !important
|
||||
|
|
|
|||
|
|
@ -1,17 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
watch,
|
||||
onBeforeUnmount,
|
||||
computed,
|
||||
nextTick,
|
||||
} from 'vue'
|
||||
import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } 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) {
|
||||
// intervalId.value = setInterval(async () => {
|
||||
// try {
|
||||
// await fetchCheckStatus()
|
||||
// } catch (error) {
|
||||
// console.error('Error in interval fetchCheckStatus:', error)
|
||||
// // หยุด interval ถ้าเกิด error
|
||||
// stopChecking()
|
||||
// }
|
||||
// }, 3000)
|
||||
// console.log('startChecking called, intervalId:', intervalId.value)
|
||||
// }
|
||||
if (intervalId.value === undefined) {
|
||||
intervalId.value = setInterval(async () => {
|
||||
try {
|
||||
await fetchCheckStatus()
|
||||
} catch (error) {
|
||||
console.error('Error in interval fetchCheckStatus:', error)
|
||||
// หยุด interval ถ้าเกิด error
|
||||
stopChecking()
|
||||
}
|
||||
}, 3000)
|
||||
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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue