mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-04 17:23:25 +00:00
ADD - camera and gallery apps
This commit is contained in:
Eichenholz
+12
-1
@@ -11,6 +11,7 @@ import {
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import PhoneHomeIndicator from '@/components/PhoneHomeIndicator.vue'
|
||||
import PhoneMediaCapture from '@/components/PhoneMediaCapture.vue'
|
||||
import PhoneLockScreen from '@/components/PhoneLockScreen.vue'
|
||||
import PhoneNotifications from '@/components/PhoneNotifications.vue'
|
||||
import NotificationPhonePreview from '@/components/NotificationPhonePreview.vue'
|
||||
@@ -194,6 +195,11 @@ function unlockPhone(): void {
|
||||
}, 720)
|
||||
}
|
||||
|
||||
function unlockCamera(): void {
|
||||
unlockPhone()
|
||||
window.setTimeout(() => void router.push('/apps/camera'), 0)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('message', onMessage)
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
@@ -305,6 +311,7 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PhoneMediaCapture />
|
||||
<SimPhonePicker
|
||||
v-if="simPicker"
|
||||
:choices="simPicker.choices"
|
||||
@@ -367,7 +374,11 @@ onBeforeUnmount(() => {
|
||||
</RouterView>
|
||||
<PhoneHomeIndicator v-if="!isLocked" />
|
||||
<Transition name="lock-screen">
|
||||
<PhoneLockScreen v-if="isLocked" @unlock="unlockPhone" />
|
||||
<PhoneLockScreen
|
||||
v-if="isLocked"
|
||||
@camera="unlockCamera"
|
||||
@unlock="unlockPhone"
|
||||
/>
|
||||
</Transition>
|
||||
<PhoneNotifications
|
||||
:notification="notifications.current"
|
||||
|
||||
@@ -13,6 +13,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
|
||||
const emit = defineEmits<{
|
||||
camera: []
|
||||
unlock: []
|
||||
}>()
|
||||
|
||||
@@ -167,6 +168,7 @@ onBeforeUnmount(() => {
|
||||
class="lock-screen__shortcut"
|
||||
:colors="shortcutColors"
|
||||
:aria-label="phone.t('LockScreen.camera')"
|
||||
@click="emit('camera')"
|
||||
>
|
||||
<template #icon>
|
||||
<Camera :stroke-width="1.4" aria-hidden="true" />
|
||||
|
||||
@@ -0,0 +1,333 @@
|
||||
<script setup lang="ts">
|
||||
import fixWebmDuration from 'fix-webm-duration'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
import type { UploadReady } from '@/types/media'
|
||||
import { createGameView, type GameView } from '@/utils/gameView'
|
||||
import { nuiCall } from '@/utils/nui'
|
||||
|
||||
type RecordingChunk = { blob: Blob; durationMs: number }
|
||||
type PendingVideo = { blob: Blob; fileName: string }
|
||||
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
const pendingVideos = new Map<string, PendingVideo>()
|
||||
const captureFps = 30
|
||||
const maxCaptureHeight = 720
|
||||
let bitrateBps = 1_500_000
|
||||
let gameView: GameView | null = null
|
||||
let renderFrameId: number | undefined
|
||||
let lastRenderAt = 0
|
||||
let recorder: MediaRecorder | null = null
|
||||
let stream: MediaStream | null = null
|
||||
let chunks: RecordingChunk[] = []
|
||||
let lastChunkAt = 0
|
||||
let lastChunkTimecode: number | null = null
|
||||
let flushTimer: number | undefined
|
||||
|
||||
function postRecordState(active: boolean, saving = false): void {
|
||||
window.postMessage(
|
||||
{ data: { active, saving }, type: 'camera:recordState' },
|
||||
'*',
|
||||
)
|
||||
}
|
||||
|
||||
function ensureGameView(): GameView {
|
||||
if (!canvasRef.value) throw new Error('capture_failed')
|
||||
if (gameView && !gameView.isLost()) return gameView
|
||||
gameView?.dispose()
|
||||
const scale = Math.min(1, maxCaptureHeight / window.innerHeight)
|
||||
gameView = createGameView(canvasRef.value)
|
||||
gameView.resize(
|
||||
Math.round(window.innerWidth * scale),
|
||||
Math.round(window.innerHeight * scale),
|
||||
)
|
||||
return gameView
|
||||
}
|
||||
|
||||
function startRenderLoop(): void {
|
||||
const view = ensureGameView()
|
||||
if (renderFrameId !== undefined) return
|
||||
const render = (now: number) => {
|
||||
if (!gameView || gameView.isLost()) {
|
||||
renderFrameId = undefined
|
||||
return
|
||||
}
|
||||
renderFrameId = window.requestAnimationFrame(render)
|
||||
if (now - lastRenderAt < 1000 / captureFps) return
|
||||
lastRenderAt = now
|
||||
view.render()
|
||||
}
|
||||
lastRenderAt = 0
|
||||
renderFrameId = window.requestAnimationFrame(render)
|
||||
}
|
||||
|
||||
function stopRenderLoop(): void {
|
||||
if (renderFrameId !== undefined) {
|
||||
window.cancelAnimationFrame(renderFrameId)
|
||||
renderFrameId = undefined
|
||||
}
|
||||
}
|
||||
|
||||
function resetRecording(): void {
|
||||
chunks = []
|
||||
lastChunkAt = 0
|
||||
lastChunkTimecode = null
|
||||
}
|
||||
|
||||
function stopTracks(): void {
|
||||
stream?.getTracks().forEach((track) => track.stop())
|
||||
stream = null
|
||||
}
|
||||
|
||||
function cleanupRecording(): void {
|
||||
if (recorder && recorder.state !== 'inactive') recorder.stop()
|
||||
recorder = null
|
||||
stopTracks()
|
||||
if (flushTimer !== undefined) window.clearInterval(flushTimer)
|
||||
flushTimer = undefined
|
||||
stopRenderLoop()
|
||||
resetRecording()
|
||||
postRecordState(false)
|
||||
}
|
||||
|
||||
function startRecording(data: Record<string, unknown>): void {
|
||||
if (recorder) return
|
||||
if (typeof MediaRecorder === 'undefined') {
|
||||
window.postMessage(
|
||||
{
|
||||
data: { error: 'unsupported', success: false },
|
||||
type: 'camera:recordError',
|
||||
},
|
||||
'*',
|
||||
)
|
||||
return
|
||||
}
|
||||
const configuredBitrate = Number(data.bitrateKbps)
|
||||
if (Number.isFinite(configuredBitrate) && configuredBitrate > 0) {
|
||||
bitrateBps = Math.round(configuredBitrate * 1000)
|
||||
}
|
||||
startRenderLoop()
|
||||
resetRecording()
|
||||
stream = canvasRef.value?.captureStream(captureFps) ?? null
|
||||
if (!stream) {
|
||||
cleanupRecording()
|
||||
return
|
||||
}
|
||||
recorder = new MediaRecorder(stream, {
|
||||
mimeType: 'video/webm',
|
||||
videoBitsPerSecond: bitrateBps,
|
||||
})
|
||||
recorder.ondataavailable = (event) => {
|
||||
if (!event.data.size) return
|
||||
const now = Date.now()
|
||||
let durationMs = Math.max(0, now - lastChunkAt)
|
||||
if (typeof event.timecode === 'number') {
|
||||
durationMs =
|
||||
lastChunkTimecode === null
|
||||
? 0
|
||||
: Math.max(0, event.timecode - lastChunkTimecode)
|
||||
lastChunkTimecode = event.timecode
|
||||
}
|
||||
lastChunkAt = now
|
||||
chunks.push({ blob: event.data, durationMs })
|
||||
}
|
||||
recorder.start()
|
||||
flushTimer = window.setInterval(() => {
|
||||
if (recorder?.state === 'recording') recorder.requestData()
|
||||
}, 1000)
|
||||
postRecordState(true)
|
||||
}
|
||||
|
||||
async function stopRecording(data: Record<string, unknown>): Promise<void> {
|
||||
const correlationId = String(data.correlationId ?? '')
|
||||
if (!recorder || recorder.state === 'inactive' || !correlationId) return
|
||||
postRecordState(false, true)
|
||||
recorder.requestData()
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 120))
|
||||
recorder.stop()
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 120))
|
||||
if (flushTimer !== undefined) window.clearInterval(flushTimer)
|
||||
flushTimer = undefined
|
||||
stopTracks()
|
||||
recorder = null
|
||||
stopRenderLoop()
|
||||
const durationMs = chunks.reduce((sum, entry) => sum + entry.durationMs, 0)
|
||||
let blob = new Blob(
|
||||
chunks.map((entry) => entry.blob),
|
||||
{ type: 'video/webm' },
|
||||
)
|
||||
blob = await (
|
||||
fixWebmDuration as unknown as (
|
||||
source: Blob,
|
||||
duration: number,
|
||||
options: { logger: boolean },
|
||||
) => Promise<Blob>
|
||||
)(blob, durationMs, { logger: false })
|
||||
resetRecording()
|
||||
pendingVideos.set(correlationId, {
|
||||
blob,
|
||||
fileName: `camera-${correlationId}.webm`,
|
||||
})
|
||||
await nuiCall('media:requestUpload', {
|
||||
correlationId,
|
||||
mediaType: 'video',
|
||||
})
|
||||
}
|
||||
|
||||
async function renderFrames(view: GameView, count: number): Promise<void> {
|
||||
for (let index = 0; index < count; index += 1) {
|
||||
await new Promise<void>((resolve) => {
|
||||
window.requestAnimationFrame(() => {
|
||||
view.render()
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function capturePhotoBlob(ready: UploadReady): Promise<Blob> {
|
||||
const width = window.innerWidth
|
||||
const height = window.innerHeight
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
const view = createGameView(canvas, { preserveDrawingBuffer: true })
|
||||
try {
|
||||
view.resize(width, height)
|
||||
await renderFrames(view, 3)
|
||||
const output = document.createElement('canvas')
|
||||
output.width = width
|
||||
output.height = height
|
||||
const context = output.getContext('2d')
|
||||
if (!context) throw new Error('capture_failed')
|
||||
context.drawImage(canvas, 0, 0)
|
||||
const encoding = ready.photo?.Encoding ?? 'jpg'
|
||||
const mimeType =
|
||||
encoding === 'png'
|
||||
? 'image/png'
|
||||
: encoding === 'webp'
|
||||
? 'image/webp'
|
||||
: 'image/jpeg'
|
||||
return await new Promise<Blob>((resolve, reject) => {
|
||||
output.toBlob(
|
||||
(blob) => (blob ? resolve(blob) : reject(new Error('capture_failed'))),
|
||||
mimeType,
|
||||
ready.photo?.Quality ?? 0.95,
|
||||
)
|
||||
})
|
||||
} finally {
|
||||
view.dispose()
|
||||
}
|
||||
}
|
||||
|
||||
async function failUpload(requestId: string, error: string): Promise<void> {
|
||||
await nuiCall('media:failUpload', { error, requestId })
|
||||
}
|
||||
|
||||
async function uploadReady(ready: UploadReady): Promise<void> {
|
||||
let blob: Blob
|
||||
let fileName: string
|
||||
try {
|
||||
if (ready.mediaType === 'video') {
|
||||
const pending = pendingVideos.get(ready.correlationId)
|
||||
if (!pending) throw new Error('capture_failed')
|
||||
pendingVideos.delete(ready.correlationId)
|
||||
blob = pending.blob
|
||||
fileName = pending.fileName
|
||||
} else {
|
||||
blob = await capturePhotoBlob(ready)
|
||||
fileName = `camera-${ready.correlationId}.${ready.photo?.Encoding ?? 'jpg'}`
|
||||
}
|
||||
} catch {
|
||||
await failUpload(ready.requestId, 'capture_failed')
|
||||
return
|
||||
}
|
||||
|
||||
const form = new FormData()
|
||||
form.append('file', blob, fileName)
|
||||
form.append(
|
||||
'metadata',
|
||||
JSON.stringify({ captureToken: ready.captureToken, source: 'sky_phone' }),
|
||||
)
|
||||
const controller = new AbortController()
|
||||
const timeout = window.setTimeout(
|
||||
() => controller.abort(),
|
||||
ready.uploadTimeoutMs ?? 25000,
|
||||
)
|
||||
try {
|
||||
const response = await fetch(ready.presignedUrl, {
|
||||
body: form,
|
||||
method: 'POST',
|
||||
signal: controller.signal,
|
||||
})
|
||||
const text = await response.text()
|
||||
const body = JSON.parse(text) as {
|
||||
data?: { id?: string; url?: string }
|
||||
id?: string
|
||||
url?: string
|
||||
}
|
||||
const uploaded = body.data ?? body
|
||||
if (!response.ok || !uploaded.id || !uploaded.url) {
|
||||
throw new Error('upload_failed')
|
||||
}
|
||||
await nuiCall('media:completeUpload', {
|
||||
remoteId: uploaded.id,
|
||||
requestId: ready.requestId,
|
||||
url: uploaded.url,
|
||||
})
|
||||
} catch (error) {
|
||||
await failUpload(
|
||||
ready.requestId,
|
||||
error instanceof DOMException && error.name === 'AbortError'
|
||||
? 'upload_timeout'
|
||||
: 'upload_failed',
|
||||
)
|
||||
} finally {
|
||||
window.clearTimeout(timeout)
|
||||
}
|
||||
}
|
||||
|
||||
function onMessage(event: MessageEvent): void {
|
||||
const message = event.data as {
|
||||
data?: Record<string, unknown>
|
||||
type?: string
|
||||
}
|
||||
if (message.type === 'camera:recordStart') {
|
||||
startRecording(message.data ?? {})
|
||||
} else if (message.type === 'camera:recordStop') {
|
||||
void stopRecording(message.data ?? {})
|
||||
} else if (message.type === 'camera:recordCancel') {
|
||||
cleanupRecording()
|
||||
} else if (message.type === 'media:uploadReady') {
|
||||
void uploadReady(message.data as UploadReady)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('message', onMessage))
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('message', onMessage)
|
||||
cleanupRecording()
|
||||
pendingVideos.clear()
|
||||
gameView?.dispose()
|
||||
gameView = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
class="phone-media-capture"
|
||||
aria-hidden="true"
|
||||
></canvas>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.phone-media-capture {
|
||||
position: fixed;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -29,15 +29,13 @@ describe('app registry', () => {
|
||||
route: '/apps/weather',
|
||||
})
|
||||
expect(PHONE_APPS.find((app) => app.id === 'camera')).toMatchObject({
|
||||
component: null,
|
||||
route: null,
|
||||
route: '/apps/camera',
|
||||
})
|
||||
expect(PHONE_APPS.find((app) => app.id === 'photos')).toMatchObject({
|
||||
component: null,
|
||||
route: null,
|
||||
route: '/apps/photos',
|
||||
})
|
||||
expect(isPhoneAppId('camera')).toBe(false)
|
||||
expect(isPhoneAppId('photos')).toBe(false)
|
||||
expect(isPhoneAppId('camera')).toBe(true)
|
||||
expect(isPhoneAppId('photos')).toBe(true)
|
||||
expect(isPhoneAppId('clock')).toBe(true)
|
||||
expect(
|
||||
PHONE_APPS.filter((app) => app.dockOrder !== null)
|
||||
|
||||
@@ -97,7 +97,9 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
|
||||
route: '/apps/calculator',
|
||||
},
|
||||
{
|
||||
component: null,
|
||||
component: markRaw(
|
||||
defineAsyncComponent(() => import('@/views/apps/CameraApp.vue')),
|
||||
),
|
||||
dockOrder: 2,
|
||||
gridOrder: 2,
|
||||
icon: markRaw(Camera),
|
||||
@@ -105,7 +107,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
|
||||
iconImage: cameraIcon,
|
||||
id: 'camera',
|
||||
labelKey: 'Apps.camera.name',
|
||||
route: null,
|
||||
route: '/apps/camera',
|
||||
},
|
||||
{
|
||||
component: markRaw(
|
||||
@@ -134,7 +136,9 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
|
||||
route: '/apps/weather',
|
||||
},
|
||||
{
|
||||
component: null,
|
||||
component: markRaw(
|
||||
defineAsyncComponent(() => import('@/views/apps/GalleryApp.vue')),
|
||||
),
|
||||
dockOrder: null,
|
||||
gridOrder: 7,
|
||||
icon: markRaw(Images),
|
||||
@@ -142,7 +146,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
|
||||
iconImage: photosIcon,
|
||||
id: 'photos',
|
||||
labelKey: 'Apps.photos.name',
|
||||
route: null,
|
||||
route: '/apps/photos',
|
||||
},
|
||||
{
|
||||
component: markRaw(
|
||||
|
||||
@@ -182,7 +182,40 @@ const defaultLocales: LocaleTree = {
|
||||
snow: 'Cold conditions with snow across the region.',
|
||||
},
|
||||
},
|
||||
camera: { name: 'Camera' },
|
||||
camera: {
|
||||
name: 'Camera',
|
||||
flash: 'Flash',
|
||||
flip: 'Flip camera',
|
||||
photo: 'Photo',
|
||||
video: 'Video',
|
||||
focusHelp: 'Space for movement',
|
||||
returnHelp: 'Space to return',
|
||||
uploading: '{count} uploading',
|
||||
saving: 'Saving video...',
|
||||
openGallery: 'Open Gallery',
|
||||
takePhoto: 'Take photo',
|
||||
startRecording: 'Start recording',
|
||||
stopRecording: 'Stop recording',
|
||||
saved: 'Saved to Gallery.',
|
||||
errors: {
|
||||
cancelled: 'Capture cancelled.',
|
||||
capture_failed: 'Unable to capture the game view.',
|
||||
invalid_media_type: 'The uploaded media type is invalid.',
|
||||
invalid_upload: 'The upload could not be verified.',
|
||||
invalid_upload_token: 'The upload session is no longer valid.',
|
||||
missing_config: 'Camera uploads are not configured.',
|
||||
not_found: 'The media item no longer exists.',
|
||||
operation_in_progress:
|
||||
'Another media operation is already in progress.',
|
||||
owner_changed: 'The active phone account changed during upload.',
|
||||
rate_limited: 'Too many media actions. Try again shortly.',
|
||||
request_failed: 'The camera request failed.',
|
||||
request_timeout: 'The media service timed out.',
|
||||
unsupported: 'Video recording is not supported.',
|
||||
upload_failed: 'The media upload failed.',
|
||||
upload_timeout: 'The media upload timed out.',
|
||||
},
|
||||
},
|
||||
clock: {
|
||||
name: 'Clock',
|
||||
lap: 'Lap',
|
||||
@@ -339,7 +372,43 @@ const defaultLocales: LocaleTree = {
|
||||
unpin: 'Unpin note',
|
||||
deleteNote: 'Delete note',
|
||||
},
|
||||
photos: { name: 'Photos' },
|
||||
photos: {
|
||||
name: 'Gallery',
|
||||
count: '{count} items',
|
||||
loading: 'Loading Gallery...',
|
||||
emptyTitle: 'No Photos or Videos',
|
||||
emptyBody: 'Captures from Camera will appear here.',
|
||||
photo: 'Photo',
|
||||
video: 'Video',
|
||||
photoAlt: 'Gallery photo',
|
||||
videoAlt: 'Gallery video',
|
||||
delete: 'Delete media',
|
||||
deleteTitle: 'Delete Media?',
|
||||
deleteBody: 'This photo or video will be permanently deleted.',
|
||||
deleted: 'Media deleted.',
|
||||
zoomIn: 'Zoom in',
|
||||
zoomOut: 'Zoom out',
|
||||
resetZoom: 'Reset zoom',
|
||||
filters: { all: 'All', photos: 'Photos', videos: 'Videos' },
|
||||
errors: {
|
||||
cancelled: 'The media action was cancelled.',
|
||||
capture_failed: 'Unable to capture the game view.',
|
||||
invalid_media_type: 'The media type is invalid.',
|
||||
invalid_upload: 'The upload could not be verified.',
|
||||
invalid_upload_token: 'The upload session is no longer valid.',
|
||||
missing_config: 'Gallery uploads are not configured.',
|
||||
not_found: 'The media item no longer exists.',
|
||||
operation_in_progress:
|
||||
'Another media operation is already in progress.',
|
||||
owner_changed: 'The active phone account changed.',
|
||||
rate_limited: 'Too many media actions. Try again shortly.',
|
||||
request_failed: 'The Gallery request failed.',
|
||||
request_timeout: 'The media service timed out.',
|
||||
unsupported: 'This media format is not supported.',
|
||||
upload_failed: 'The media upload failed.',
|
||||
upload_timeout: 'The media upload timed out.',
|
||||
},
|
||||
},
|
||||
settings: {
|
||||
name: 'Settings',
|
||||
searchPlaceholder: 'Search',
|
||||
|
||||
@@ -13,7 +13,7 @@ export type PhoneAppId =
|
||||
| 'app-store'
|
||||
| 'settings'
|
||||
|
||||
export type LaunchablePhoneAppId = Exclude<PhoneAppId, 'camera' | 'photos'>
|
||||
export type LaunchablePhoneAppId = PhoneAppId
|
||||
|
||||
export type AppLaunchOrigin = {
|
||||
borderRadius: number
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
export type MediaType = 'photo' | 'video'
|
||||
export type GalleryFilter = 'all' | MediaType
|
||||
|
||||
export type PhoneMedia = {
|
||||
createdAt: number
|
||||
id: number
|
||||
mediaType: MediaType
|
||||
url: string
|
||||
}
|
||||
|
||||
export type UploadReady = {
|
||||
captureToken: string
|
||||
correlationId: string
|
||||
mediaType: MediaType
|
||||
photo?: {
|
||||
Encoding?: 'jpg' | 'png' | 'webp'
|
||||
Quality?: number
|
||||
}
|
||||
presignedUrl: string
|
||||
requestId: string
|
||||
uploadTimeoutMs?: number
|
||||
video?: {
|
||||
BitrateKbps?: number
|
||||
}
|
||||
}
|
||||
|
||||
export type UploadResult = {
|
||||
correlationId: string
|
||||
error?: string
|
||||
media?: PhoneMedia
|
||||
success: boolean
|
||||
}
|
||||
|
||||
export type DeleteResult = {
|
||||
correlationId: string
|
||||
error?: string
|
||||
id?: number
|
||||
success: boolean
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
const VERTEX_SHADER = `
|
||||
attribute vec2 a_position;
|
||||
attribute vec2 a_texcoord;
|
||||
varying vec2 v_texcoord;
|
||||
void main() {
|
||||
gl_Position = vec4(a_position, 0.0, 1.0);
|
||||
v_texcoord = a_texcoord;
|
||||
}
|
||||
`
|
||||
|
||||
const FRAGMENT_SHADER = `
|
||||
varying highp vec2 v_texcoord;
|
||||
uniform sampler2D u_texture;
|
||||
void main() {
|
||||
gl_FragColor = texture2D(u_texture, v_texcoord);
|
||||
}
|
||||
`
|
||||
|
||||
export interface GameView {
|
||||
readonly canvas: HTMLCanvasElement
|
||||
dispose(): void
|
||||
isLost(): boolean
|
||||
render(): void
|
||||
resize(width: number, height: number): void
|
||||
}
|
||||
|
||||
export interface GameViewOptions {
|
||||
preserveDrawingBuffer?: boolean
|
||||
}
|
||||
|
||||
function compileShader(
|
||||
gl: WebGLRenderingContext,
|
||||
type: number,
|
||||
source: string,
|
||||
): WebGLShader {
|
||||
const shader = gl.createShader(type)
|
||||
if (!shader) throw new Error('game_view_shader_unavailable')
|
||||
gl.shaderSource(shader, source)
|
||||
gl.compileShader(shader)
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
throw new Error(gl.getShaderInfoLog(shader) || 'game_view_shader_failed')
|
||||
}
|
||||
return shader
|
||||
}
|
||||
|
||||
export function createGameView(
|
||||
canvas: HTMLCanvasElement,
|
||||
options: GameViewOptions = {},
|
||||
): GameView {
|
||||
const gl = canvas.getContext('webgl', {
|
||||
alpha: false,
|
||||
antialias: false,
|
||||
depth: false,
|
||||
desynchronized: true,
|
||||
failIfMajorPerformanceCaveat: false,
|
||||
preserveDrawingBuffer: options.preserveDrawingBuffer === true,
|
||||
stencil: false,
|
||||
}) as WebGLRenderingContext | null
|
||||
if (!gl) throw new Error('game_view_unavailable')
|
||||
|
||||
let lost = false
|
||||
let disposed = false
|
||||
const onContextLost = (event: Event) => {
|
||||
event.preventDefault()
|
||||
lost = true
|
||||
console.error('[Camera] Game-view WebGL context lost.')
|
||||
}
|
||||
canvas.addEventListener(
|
||||
'webglcontextlost',
|
||||
onContextLost as EventListener,
|
||||
false,
|
||||
)
|
||||
|
||||
const program = gl.createProgram()
|
||||
if (!program) throw new Error('game_view_program_unavailable')
|
||||
gl.attachShader(program, compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER))
|
||||
gl.attachShader(
|
||||
program,
|
||||
compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER),
|
||||
)
|
||||
gl.linkProgram(program)
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
throw new Error(gl.getProgramInfoLog(program) || 'game_view_program_failed')
|
||||
}
|
||||
gl.useProgram(program)
|
||||
|
||||
const positionLocation = gl.getAttribLocation(program, 'a_position')
|
||||
const texcoordLocation = gl.getAttribLocation(program, 'a_texcoord')
|
||||
if (positionLocation < 0 || texcoordLocation < 0) {
|
||||
throw new Error('game_view_attributes_unavailable')
|
||||
}
|
||||
|
||||
const positionBuffer = gl.createBuffer()
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
|
||||
gl.bufferData(
|
||||
gl.ARRAY_BUFFER,
|
||||
new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
|
||||
gl.STATIC_DRAW,
|
||||
)
|
||||
gl.enableVertexAttribArray(positionLocation)
|
||||
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
|
||||
|
||||
const texcoordBuffer = gl.createBuffer()
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
|
||||
gl.bufferData(
|
||||
gl.ARRAY_BUFFER,
|
||||
new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
|
||||
gl.STATIC_DRAW,
|
||||
)
|
||||
gl.enableVertexAttribArray(texcoordLocation)
|
||||
gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0)
|
||||
|
||||
const texture = gl.createTexture()
|
||||
gl.bindTexture(gl.TEXTURE_2D, texture)
|
||||
gl.texImage2D(
|
||||
gl.TEXTURE_2D,
|
||||
0,
|
||||
gl.RGBA,
|
||||
1,
|
||||
1,
|
||||
0,
|
||||
gl.RGBA,
|
||||
gl.UNSIGNED_BYTE,
|
||||
new Uint8Array([0, 0, 0, 255]),
|
||||
)
|
||||
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
|
||||
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
|
||||
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
|
||||
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
|
||||
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT)
|
||||
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)
|
||||
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
|
||||
gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0)
|
||||
|
||||
return {
|
||||
canvas,
|
||||
dispose() {
|
||||
if (disposed) return
|
||||
disposed = true
|
||||
canvas.removeEventListener(
|
||||
'webglcontextlost',
|
||||
onContextLost as EventListener,
|
||||
false,
|
||||
)
|
||||
gl.getExtension('WEBGL_lose_context')?.loseContext()
|
||||
},
|
||||
isLost: () => lost,
|
||||
render() {
|
||||
if (disposed || lost) return
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
|
||||
gl.finish()
|
||||
},
|
||||
resize(width: number, height: number) {
|
||||
if (disposed || lost) return
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
gl.viewport(0, 0, width, height)
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import {
|
||||
filterMedia,
|
||||
formatRecordingDuration,
|
||||
mediaErrorKey,
|
||||
mergeMedia,
|
||||
} from './media'
|
||||
|
||||
const media = [
|
||||
{ createdAt: 10, id: 1, mediaType: 'photo' as const, url: 'photo' },
|
||||
{ createdAt: 20, id: 2, mediaType: 'video' as const, url: 'video' },
|
||||
]
|
||||
|
||||
describe('media utilities', () => {
|
||||
it('filters gallery media by explicit type', () => {
|
||||
expect(filterMedia(media, 'all')).toHaveLength(2)
|
||||
expect(filterMedia(media, 'photo').map((entry) => entry.id)).toEqual([1])
|
||||
expect(filterMedia(media, 'video').map((entry) => entry.id)).toEqual([2])
|
||||
})
|
||||
|
||||
it('merges pages without duplicates and keeps newest first', () => {
|
||||
expect(
|
||||
mergeMedia(media, [
|
||||
{ createdAt: 30, id: 1, mediaType: 'photo', url: 'updated' },
|
||||
{ createdAt: 25, id: 3, mediaType: 'photo', url: 'new' },
|
||||
]).map((entry) => [entry.id, entry.url]),
|
||||
).toEqual([
|
||||
[1, 'updated'],
|
||||
[3, 'new'],
|
||||
[2, 'video'],
|
||||
])
|
||||
})
|
||||
|
||||
it('formats unlimited recording durations', () => {
|
||||
expect(formatRecordingDuration(0)).toBe('00:00')
|
||||
expect(formatRecordingDuration(3_725_000)).toBe('62:05')
|
||||
})
|
||||
|
||||
it('maps unknown server failures to the localized default', () => {
|
||||
expect(mediaErrorKey('upload_timeout')).toBe('upload_timeout')
|
||||
expect(mediaErrorKey('private_provider_error')).toBe('request_failed')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,53 @@
|
||||
import type { GalleryFilter, MediaType, PhoneMedia } from '@/types/media'
|
||||
|
||||
export function isMediaType(value: unknown): value is MediaType {
|
||||
return value === 'photo' || value === 'video'
|
||||
}
|
||||
|
||||
export function filterMedia(
|
||||
media: PhoneMedia[],
|
||||
filter: GalleryFilter,
|
||||
): PhoneMedia[] {
|
||||
return filter === 'all'
|
||||
? media
|
||||
: media.filter((entry) => entry.mediaType === filter)
|
||||
}
|
||||
|
||||
export function mergeMedia(
|
||||
current: PhoneMedia[],
|
||||
incoming: PhoneMedia[],
|
||||
): PhoneMedia[] {
|
||||
const byId = new Map(current.map((entry) => [entry.id, entry]))
|
||||
for (const entry of incoming) byId.set(entry.id, entry)
|
||||
return [...byId.values()].sort(
|
||||
(left, right) => right.createdAt - left.createdAt || right.id - left.id,
|
||||
)
|
||||
}
|
||||
|
||||
export function formatRecordingDuration(elapsedMs: number): string {
|
||||
const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000))
|
||||
const minutes = Math.floor(totalSeconds / 60)
|
||||
const seconds = totalSeconds % 60
|
||||
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function mediaErrorKey(error?: string): string {
|
||||
const known = new Set([
|
||||
'cancelled',
|
||||
'capture_failed',
|
||||
'invalid_media_type',
|
||||
'invalid_upload',
|
||||
'invalid_upload_token',
|
||||
'missing_config',
|
||||
'not_found',
|
||||
'operation_in_progress',
|
||||
'owner_changed',
|
||||
'rate_limited',
|
||||
'request_failed',
|
||||
'request_timeout',
|
||||
'unsupported',
|
||||
'upload_failed',
|
||||
'upload_timeout',
|
||||
])
|
||||
return known.has(error ?? '') ? (error as string) : 'request_failed'
|
||||
}
|
||||
@@ -50,11 +50,13 @@ const DEFAULT_APP_NOTIFICATIONS: Record<
|
||||
phone: { enabled: true, sounds: true },
|
||||
'app-store': { enabled: true, sounds: true },
|
||||
calculator: { enabled: true, sounds: true },
|
||||
camera: { enabled: true, sounds: true },
|
||||
clock: { enabled: true, sounds: true },
|
||||
weather: { enabled: true, sounds: true },
|
||||
mail: { enabled: true, sounds: true },
|
||||
map: { enabled: true, sounds: true },
|
||||
notes: { enabled: true, sounds: true },
|
||||
photos: { enabled: true, sounds: true },
|
||||
settings: { enabled: true, sounds: true },
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,602 @@
|
||||
<script setup lang="ts">
|
||||
import { kFab, kPage, kSegmented, kSegmentedButton, kToast } from 'konsta/vue'
|
||||
import {
|
||||
Camera as CameraIcon,
|
||||
Images,
|
||||
RefreshCw,
|
||||
Video,
|
||||
Zap,
|
||||
ZapOff,
|
||||
} from 'lucide-vue-next'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
import type { MediaType, PhoneMedia, UploadResult } from '@/types/media'
|
||||
import { formatRecordingDuration, mediaErrorKey } from '@/utils/media'
|
||||
import { nuiCall } from '@/utils/nui'
|
||||
|
||||
type CaptureItem = {
|
||||
error?: string
|
||||
id: string
|
||||
mediaType: MediaType
|
||||
status: 'uploading' | 'success' | 'error'
|
||||
}
|
||||
|
||||
const isDevelopment = import.meta.env.DEV
|
||||
const phone = usePhoneStore()
|
||||
const router = useRouter()
|
||||
const mode = ref<MediaType>('photo')
|
||||
const flashEnabled = ref(false)
|
||||
const frontCamera = ref(false)
|
||||
const shutterActive = ref(false)
|
||||
const focused = ref(true)
|
||||
const recording = ref(false)
|
||||
const savingVideo = ref(false)
|
||||
const recordingStartedAt = ref(0)
|
||||
const elapsed = ref('00:00')
|
||||
const captures = ref<CaptureItem[]>([])
|
||||
const latestMedia = ref<PhoneMedia | null>(null)
|
||||
const toastOpened = ref(false)
|
||||
const toastText = ref('')
|
||||
const videoBitrateKbps = ref(1500)
|
||||
let shutterTimer: number | undefined
|
||||
let toastTimer: number | undefined
|
||||
let recordingTimer: number | undefined
|
||||
|
||||
const pendingCount = computed(
|
||||
() =>
|
||||
captures.value.filter((capture) => capture.status === 'uploading').length,
|
||||
)
|
||||
const controlColors = {
|
||||
bgIos: 'bg-black/40',
|
||||
textIos: 'text-white',
|
||||
}
|
||||
const flashColors = computed(() => ({
|
||||
...controlColors,
|
||||
textIos: flashEnabled.value ? 'text-yellow-300' : 'text-white',
|
||||
}))
|
||||
|
||||
function correlationId(): string {
|
||||
return `${Date.now()}-${crypto.randomUUID()}`
|
||||
}
|
||||
|
||||
function showToast(text: string): void {
|
||||
if (toastTimer !== undefined) window.clearTimeout(toastTimer)
|
||||
toastText.value = text
|
||||
toastOpened.value = true
|
||||
toastTimer = window.setTimeout(() => {
|
||||
toastOpened.value = false
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
function updateCapture(id: string, updates: Partial<CaptureItem>): void {
|
||||
const index = captures.value.findIndex((capture) => capture.id === id)
|
||||
if (index < 0) return
|
||||
captures.value[index] = { ...captures.value[index], ...updates }
|
||||
}
|
||||
|
||||
function queueCapture(id: string, mediaType: MediaType): void {
|
||||
captures.value.unshift({ id, mediaType, status: 'uploading' })
|
||||
captures.value = captures.value.slice(0, 6)
|
||||
}
|
||||
|
||||
function devMedia(id: string, mediaType: MediaType): PhoneMedia {
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="900" height="1600"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#19354f"/><stop offset="1" stop-color="#d78357"/></linearGradient></defs><rect width="900" height="1600" fill="url(#g)"/><circle cx="680" cy="380" r="210" fill="#ffffff22"/><path d="M0 1200 260 840l180 220 170-170 290 310v400H0z" fill="#102331aa"/></svg>`
|
||||
return {
|
||||
createdAt: Date.now(),
|
||||
id: Number(Date.now()),
|
||||
mediaType,
|
||||
url: `data:image/svg+xml,${encodeURIComponent(svg)}#${id}`,
|
||||
}
|
||||
}
|
||||
|
||||
async function requestPhoto(): Promise<void> {
|
||||
if (recording.value || savingVideo.value) return
|
||||
const id = correlationId()
|
||||
queueCapture(id, 'photo')
|
||||
shutterActive.value = true
|
||||
if (shutterTimer !== undefined) window.clearTimeout(shutterTimer)
|
||||
shutterTimer = window.setTimeout(() => {
|
||||
shutterActive.value = false
|
||||
}, 280)
|
||||
if (isDevelopment) {
|
||||
window.setTimeout(() => {
|
||||
window.dispatchEvent(
|
||||
new MessageEvent('message', {
|
||||
data: {
|
||||
data: {
|
||||
correlationId: id,
|
||||
media: devMedia(id, 'photo'),
|
||||
success: true,
|
||||
},
|
||||
type: 'media:uploadResult',
|
||||
},
|
||||
}),
|
||||
)
|
||||
}, 700)
|
||||
return
|
||||
}
|
||||
await nuiCall('media:requestUpload', {
|
||||
correlationId: id,
|
||||
mediaType: 'photo',
|
||||
})
|
||||
}
|
||||
|
||||
function startRecording(): void {
|
||||
if (savingVideo.value) return
|
||||
window.postMessage(
|
||||
{
|
||||
data: { bitrateKbps: videoBitrateKbps.value },
|
||||
type: 'camera:recordStart',
|
||||
},
|
||||
'*',
|
||||
)
|
||||
}
|
||||
|
||||
function stopRecording(): void {
|
||||
if (!recording.value || savingVideo.value) return
|
||||
const id = correlationId()
|
||||
queueCapture(id, 'video')
|
||||
if (isDevelopment) {
|
||||
recording.value = false
|
||||
savingVideo.value = true
|
||||
window.setTimeout(() => {
|
||||
window.dispatchEvent(
|
||||
new MessageEvent('message', {
|
||||
data: {
|
||||
data: {
|
||||
correlationId: id,
|
||||
media: devMedia(id, 'video'),
|
||||
success: true,
|
||||
},
|
||||
type: 'media:uploadResult',
|
||||
},
|
||||
}),
|
||||
)
|
||||
}, 900)
|
||||
return
|
||||
}
|
||||
window.postMessage(
|
||||
{ data: { correlationId: id }, type: 'camera:recordStop' },
|
||||
'*',
|
||||
)
|
||||
}
|
||||
|
||||
function capture(): void {
|
||||
if (mode.value === 'video') {
|
||||
if (recording.value) {
|
||||
stopRecording()
|
||||
} else {
|
||||
startRecording()
|
||||
}
|
||||
return
|
||||
}
|
||||
void requestPhoto()
|
||||
}
|
||||
|
||||
async function toggleFlash(): Promise<void> {
|
||||
flashEnabled.value = !flashEnabled.value
|
||||
await nuiCall('camera:setFlash', { enabled: flashEnabled.value })
|
||||
}
|
||||
|
||||
async function toggleFacing(): Promise<void> {
|
||||
frontCamera.value = !frontCamera.value
|
||||
await nuiCall('camera:setFacing', { front: frontCamera.value })
|
||||
}
|
||||
|
||||
function updateRecordingTimer(): void {
|
||||
elapsed.value = formatRecordingDuration(Date.now() - recordingStartedAt.value)
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent): void {
|
||||
if (event.code !== 'Space' || event.repeat || !focused.value) return
|
||||
event.preventDefault()
|
||||
focused.value = false
|
||||
void nuiCall('camera:setFocus', { focused: false })
|
||||
}
|
||||
|
||||
function onMessage(event: MessageEvent): void {
|
||||
const message = event.data as {
|
||||
data?: Record<string, unknown>
|
||||
type?: string
|
||||
}
|
||||
if (message.type === 'camera:focus') {
|
||||
focused.value = message.data?.focused === true
|
||||
} else if (message.type === 'camera:recordState') {
|
||||
const active = message.data?.active === true
|
||||
savingVideo.value = message.data?.saving === true
|
||||
recording.value = active
|
||||
if (active) {
|
||||
recordingStartedAt.value = Date.now()
|
||||
updateRecordingTimer()
|
||||
if (recordingTimer !== undefined) window.clearInterval(recordingTimer)
|
||||
recordingTimer = window.setInterval(updateRecordingTimer, 250)
|
||||
} else if (recordingTimer !== undefined) {
|
||||
window.clearInterval(recordingTimer)
|
||||
recordingTimer = undefined
|
||||
}
|
||||
} else if (message.type === 'camera:recordError') {
|
||||
showToast(
|
||||
phone.t(
|
||||
`Apps.camera.errors.${mediaErrorKey(String(message.data?.error ?? ''))}`,
|
||||
),
|
||||
)
|
||||
} else if (message.type === 'media:uploadResult') {
|
||||
const result = message.data as UploadResult
|
||||
if (!result?.correlationId) return
|
||||
savingVideo.value = false
|
||||
if (result.success && result.media) {
|
||||
latestMedia.value = result.media
|
||||
updateCapture(result.correlationId, { status: 'success' })
|
||||
showToast(phone.t('Apps.camera.saved'))
|
||||
window.setTimeout(() => {
|
||||
captures.value = captures.value.filter(
|
||||
(captureItem) => captureItem.id !== result.correlationId,
|
||||
)
|
||||
}, 2500)
|
||||
} else {
|
||||
const error = mediaErrorKey(result.error)
|
||||
updateCapture(result.correlationId, { error, status: 'error' })
|
||||
showToast(phone.t(`Apps.camera.errors.${error}`))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLatest(): Promise<void> {
|
||||
const response = await nuiCall<PhoneMedia[]>('gallery:list', {
|
||||
limit: 1,
|
||||
offset: 0,
|
||||
})
|
||||
if (response.success && response.data?.[0])
|
||||
latestMedia.value = response.data[0]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
window.addEventListener('message', onMessage)
|
||||
void nuiCall('camera:setActive', { active: true })
|
||||
void nuiCall<{ videoBitrateKbps?: number }>('media:config').then(
|
||||
(response) => {
|
||||
if (response.success && response.data?.videoBitrateKbps) {
|
||||
videoBitrateKbps.value = response.data.videoBitrateKbps
|
||||
}
|
||||
},
|
||||
)
|
||||
void loadLatest()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (shutterTimer !== undefined) window.clearTimeout(shutterTimer)
|
||||
if (toastTimer !== undefined) window.clearTimeout(toastTimer)
|
||||
if (recordingTimer !== undefined) window.clearInterval(recordingTimer)
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
window.removeEventListener('message', onMessage)
|
||||
window.postMessage({ type: 'camera:recordCancel' }, '*')
|
||||
void nuiCall('camera:setFlash', { enabled: false })
|
||||
void nuiCall('camera:setActive', { active: false })
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<k-page class="camera-page" :aria-label="phone.t('Apps.camera.name')">
|
||||
<object
|
||||
v-if="!isDevelopment"
|
||||
class="camera-game-view"
|
||||
type="application/x-cfx-game-view"
|
||||
aria-hidden="true"
|
||||
></object>
|
||||
<div v-else class="camera-dev-view" aria-hidden="true">
|
||||
<span class="camera-dev-sun"></span>
|
||||
<span class="camera-dev-horizon"></span>
|
||||
</div>
|
||||
<div class="camera-shade"></div>
|
||||
<div class="camera-flash" :class="{ active: shutterActive }"></div>
|
||||
|
||||
<header class="camera-topbar">
|
||||
<k-fab
|
||||
component="button"
|
||||
type="button"
|
||||
class="camera-control"
|
||||
:colors="flashColors"
|
||||
:aria-label="phone.t('Apps.camera.flash')"
|
||||
@click="toggleFlash"
|
||||
>
|
||||
<template #icon>
|
||||
<Zap v-if="flashEnabled" :size="19" />
|
||||
<ZapOff v-else :size="19" />
|
||||
</template>
|
||||
</k-fab>
|
||||
<span v-if="pendingCount" class="camera-upload-pill">
|
||||
{{ phone.t('Apps.camera.uploading', { count: String(pendingCount) }) }}
|
||||
</span>
|
||||
<span v-else class="camera-focus-pill">
|
||||
{{
|
||||
phone.t(focused ? 'Apps.camera.focusHelp' : 'Apps.camera.returnHelp')
|
||||
}}
|
||||
</span>
|
||||
<k-fab
|
||||
component="button"
|
||||
type="button"
|
||||
class="camera-control"
|
||||
:colors="controlColors"
|
||||
:aria-label="phone.t('Apps.camera.flip')"
|
||||
@click="toggleFacing"
|
||||
>
|
||||
<template #icon><RefreshCw :size="19" /></template>
|
||||
</k-fab>
|
||||
</header>
|
||||
|
||||
<div v-if="recording || savingVideo" class="camera-record-status">
|
||||
<span class="camera-record-dot"></span>
|
||||
{{ savingVideo ? phone.t('Apps.camera.saving') : elapsed }}
|
||||
</div>
|
||||
|
||||
<footer class="camera-controls">
|
||||
<k-segmented class="camera-mode-picker">
|
||||
<k-segmented-button
|
||||
:active="mode === 'photo'"
|
||||
:disabled="recording || savingVideo"
|
||||
@click="mode = 'photo'"
|
||||
>
|
||||
{{ phone.t('Apps.camera.photo') }}
|
||||
</k-segmented-button>
|
||||
<k-segmented-button
|
||||
:active="mode === 'video'"
|
||||
:disabled="recording || savingVideo"
|
||||
@click="mode = 'video'"
|
||||
>
|
||||
{{ phone.t('Apps.camera.video') }}
|
||||
</k-segmented-button>
|
||||
</k-segmented>
|
||||
|
||||
<div class="camera-capture-row">
|
||||
<button
|
||||
class="camera-latest"
|
||||
type="button"
|
||||
:aria-label="phone.t('Apps.camera.openGallery')"
|
||||
@click="router.push('/apps/photos')"
|
||||
>
|
||||
<img
|
||||
v-if="latestMedia?.mediaType === 'photo'"
|
||||
:src="latestMedia.url"
|
||||
alt=""
|
||||
/>
|
||||
<Video v-else-if="latestMedia" :size="22" />
|
||||
<Images v-else :size="22" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="camera-shutter"
|
||||
:class="{ recording, video: mode === 'video' }"
|
||||
type="button"
|
||||
:disabled="savingVideo"
|
||||
:aria-label="
|
||||
phone.t(
|
||||
mode === 'photo'
|
||||
? 'Apps.camera.takePhoto'
|
||||
: recording
|
||||
? 'Apps.camera.stopRecording'
|
||||
: 'Apps.camera.startRecording',
|
||||
)
|
||||
"
|
||||
@click="capture"
|
||||
>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<span class="camera-row-spacer" aria-hidden="true">
|
||||
<CameraIcon :size="22" />
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<k-toast
|
||||
:opened="toastOpened"
|
||||
position="center"
|
||||
@click="toastOpened = false"
|
||||
>
|
||||
{{ toastText }}
|
||||
</k-toast>
|
||||
</k-page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.camera-page {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.camera-game-view,
|
||||
.camera-dev-view,
|
||||
.camera-shade,
|
||||
.camera-flash {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.camera-game-view {
|
||||
border: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.camera-dev-view {
|
||||
overflow: hidden;
|
||||
background: linear-gradient(#4a88ad 0 48%, #a88d68 49% 62%, #283528 63%);
|
||||
}
|
||||
.camera-dev-sun {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
right: 16%;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 50%;
|
||||
background: #fff3b0;
|
||||
box-shadow: 0 0 50px #ffd36a;
|
||||
}
|
||||
.camera-dev-horizon {
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
right: -10%;
|
||||
bottom: 31%;
|
||||
height: 24%;
|
||||
background: #142b21;
|
||||
clip-path: polygon(
|
||||
0 100%,
|
||||
0 64%,
|
||||
18% 22%,
|
||||
34% 61%,
|
||||
54% 8%,
|
||||
73% 58%,
|
||||
88% 27%,
|
||||
100% 74%,
|
||||
100% 100%
|
||||
);
|
||||
}
|
||||
.camera-shade {
|
||||
pointer-events: none;
|
||||
background: linear-gradient(#0008, transparent 22%, transparent 62%, #000d);
|
||||
}
|
||||
.camera-flash {
|
||||
z-index: 8;
|
||||
pointer-events: none;
|
||||
background: #fff;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.camera-flash.active {
|
||||
opacity: 0.9;
|
||||
transition-duration: 0.04s;
|
||||
}
|
||||
.camera-topbar {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 52px;
|
||||
left: 18px;
|
||||
right: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: 44px 1fr 44px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.camera-control {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
.camera-focus-pill,
|
||||
.camera-upload-pill {
|
||||
min-width: 0;
|
||||
padding: 7px 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: #0006;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
.camera-upload-pill {
|
||||
color: #ffd60a;
|
||||
}
|
||||
.camera-record-status {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 108px;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: #0009;
|
||||
transform: translateX(-50%);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.camera-record-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff3b30;
|
||||
}
|
||||
.camera-controls {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
right: 0;
|
||||
bottom: 35px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.camera-mode-picker {
|
||||
align-self: center;
|
||||
width: 188px;
|
||||
padding: 2px;
|
||||
border-radius: 10px;
|
||||
background: #0007;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
.camera-capture-row {
|
||||
display: grid;
|
||||
grid-template-columns: 54px 1fr 54px;
|
||||
align-items: center;
|
||||
}
|
||||
.camera-latest,
|
||||
.camera-row-spacer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
border: 2px solid #ffffff99;
|
||||
border-radius: 12px;
|
||||
background: #111b;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.camera-latest img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.camera-row-spacer {
|
||||
justify-self: end;
|
||||
visibility: hidden;
|
||||
}
|
||||
.camera-shutter {
|
||||
justify-self: center;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
padding: 4px;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
.camera-shutter span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transition: 0.18s ease;
|
||||
}
|
||||
.camera-shutter.video span {
|
||||
background: #ff3b30;
|
||||
}
|
||||
.camera-shutter.recording span {
|
||||
width: 48%;
|
||||
height: 48%;
|
||||
margin: 26%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.camera-shutter:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,557 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
kBlock,
|
||||
kDialog,
|
||||
kDialogButton,
|
||||
kLink,
|
||||
kNavbar,
|
||||
kNavbarBackLink,
|
||||
kPage,
|
||||
kPreloader,
|
||||
kSegmented,
|
||||
kSegmentedButton,
|
||||
kToast,
|
||||
} from 'konsta/vue'
|
||||
import { Play, RotateCcw, Trash2, ZoomIn, ZoomOut } from 'lucide-vue-next'
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
import type { DeleteResult, GalleryFilter, PhoneMedia } from '@/types/media'
|
||||
import { mediaErrorKey, mergeMedia } from '@/utils/media'
|
||||
import { nuiCall } from '@/utils/nui'
|
||||
|
||||
const isDevelopment = import.meta.env.DEV
|
||||
const developmentGalleryState = isDevelopment
|
||||
? new URLSearchParams(window.location.search).get('galleryMock')
|
||||
: null
|
||||
const pageSize = 36
|
||||
const phone = usePhoneStore()
|
||||
const media = ref<PhoneMedia[]>([])
|
||||
const filter = ref<GalleryFilter>('all')
|
||||
const loading = ref(true)
|
||||
const fetching = ref(false)
|
||||
const hasMore = ref(true)
|
||||
const loadError = ref('')
|
||||
const selected = ref<PhoneMedia | null>(null)
|
||||
const deleteDialogOpened = ref(false)
|
||||
const deleting = ref(false)
|
||||
const toastOpened = ref(false)
|
||||
const toastText = ref('')
|
||||
const loadTrigger = ref<HTMLElement | null>(null)
|
||||
const imageZoom = ref(1)
|
||||
const imagePan = ref({ x: 0, y: 0 })
|
||||
const dragging = ref(false)
|
||||
const dragStart = ref({ panX: 0, panY: 0, x: 0, y: 0 })
|
||||
let observer: IntersectionObserver | null = null
|
||||
let toastTimer: number | undefined
|
||||
let pendingDeleteCorrelation = ''
|
||||
|
||||
const countLabel = computed(() =>
|
||||
phone.t('Apps.photos.count', { count: String(media.value.length) }),
|
||||
)
|
||||
const imageStyle = computed(() => ({
|
||||
cursor:
|
||||
imageZoom.value > 1 ? (dragging.value ? 'grabbing' : 'grab') : 'zoom-in',
|
||||
transform: `translate3d(${imagePan.value.x}px, ${imagePan.value.y}px, 0) scale(${imageZoom.value})`,
|
||||
}))
|
||||
|
||||
function buildMockPhoto(
|
||||
id: number,
|
||||
label: string,
|
||||
first: string,
|
||||
second: string,
|
||||
): PhoneMedia {
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="900" height="1200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="${first}"/><stop offset="1" stop-color="${second}"/></linearGradient></defs><rect width="900" height="1200" fill="url(#g)"/><circle cx="680" cy="290" r="180" fill="#ffffff20"/><path d="M0 930 230 650l190 190 120-130 360 300v190H0z" fill="#08131d66"/><text x="70" y="1080" fill="white" font-size="54" font-family="sans-serif">${label}</text></svg>`
|
||||
return {
|
||||
createdAt: Date.now() - id * 3_600_000,
|
||||
id,
|
||||
mediaType: 'photo',
|
||||
url: `data:image/svg+xml,${encodeURIComponent(svg)}`,
|
||||
}
|
||||
}
|
||||
|
||||
function mockMedia(): PhoneMedia[] {
|
||||
const photos = [
|
||||
buildMockPhoto(1, 'Vespucci', '#23567b', '#e08d5c'),
|
||||
buildMockPhoto(2, 'Downtown', '#442c69', '#c86a77'),
|
||||
buildMockPhoto(3, 'Paleto Bay', '#1f6653', '#d1a85b'),
|
||||
buildMockPhoto(4, 'Mirror Park', '#355c7d', '#6c5b7b'),
|
||||
buildMockPhoto(5, 'Del Perro', '#b06ab3', '#4568dc'),
|
||||
buildMockPhoto(6, 'Sandy Shores', '#7b4f35', '#d2a35f'),
|
||||
buildMockPhoto(7, 'Rockford', '#203a43', '#2c5364'),
|
||||
buildMockPhoto(8, 'Little Seoul', '#8e2de2', '#4a00e0'),
|
||||
]
|
||||
return [
|
||||
photos[0],
|
||||
{
|
||||
createdAt: Date.now() - 1_800_000,
|
||||
id: 100,
|
||||
mediaType: 'video',
|
||||
url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
|
||||
},
|
||||
...photos.slice(1),
|
||||
]
|
||||
}
|
||||
|
||||
function showToast(text: string): void {
|
||||
if (toastTimer !== undefined) window.clearTimeout(toastTimer)
|
||||
toastText.value = text
|
||||
toastOpened.value = true
|
||||
toastTimer = window.setTimeout(() => {
|
||||
toastOpened.value = false
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
function formatDate(timestamp: number): string {
|
||||
return new Intl.DateTimeFormat(phone.lang, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(timestamp))
|
||||
}
|
||||
|
||||
async function fetchMore(): Promise<void> {
|
||||
if (fetching.value || !hasMore.value) return
|
||||
fetching.value = true
|
||||
const offset = media.value.length
|
||||
const response = await nuiCall<PhoneMedia[]>('gallery:list', {
|
||||
limit: pageSize,
|
||||
mediaType: filter.value === 'all' ? undefined : filter.value,
|
||||
mockState: developmentGalleryState ?? undefined,
|
||||
offset,
|
||||
})
|
||||
if (response.success && Array.isArray(response.data)) {
|
||||
media.value = mergeMedia(media.value, response.data)
|
||||
hasMore.value = response.data.length === pageSize
|
||||
} else if (
|
||||
isDevelopment &&
|
||||
developmentGalleryState !== 'error' &&
|
||||
offset === 0
|
||||
) {
|
||||
const mock = mockMedia().filter(
|
||||
(entry) => filter.value === 'all' || entry.mediaType === filter.value,
|
||||
)
|
||||
media.value = mock
|
||||
hasMore.value = false
|
||||
} else {
|
||||
if (offset === 0) {
|
||||
loadError.value = phone.t(
|
||||
`Apps.photos.errors.${mediaErrorKey(response.error)}`,
|
||||
)
|
||||
}
|
||||
hasMore.value = false
|
||||
}
|
||||
fetching.value = false
|
||||
}
|
||||
|
||||
async function loadGallery(): Promise<void> {
|
||||
media.value = []
|
||||
hasMore.value = true
|
||||
loadError.value = ''
|
||||
loading.value = true
|
||||
await fetchMore()
|
||||
loading.value = false
|
||||
await nextTick()
|
||||
observeMore()
|
||||
}
|
||||
|
||||
function observeMore(): void {
|
||||
observer?.disconnect()
|
||||
observer = null
|
||||
if (!hasMore.value || !loadTrigger.value) return
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries.some((entry) => entry.isIntersecting)) void fetchMore()
|
||||
},
|
||||
{ rootMargin: '180px' },
|
||||
)
|
||||
observer.observe(loadTrigger.value)
|
||||
}
|
||||
|
||||
function openMedia(entry: PhoneMedia): void {
|
||||
selected.value = entry
|
||||
imageZoom.value = 1
|
||||
imagePan.value = { x: 0, y: 0 }
|
||||
}
|
||||
|
||||
function closeMedia(): void {
|
||||
selected.value = null
|
||||
deleteDialogOpened.value = false
|
||||
stopDragging()
|
||||
}
|
||||
|
||||
function setZoom(value: number): void {
|
||||
imageZoom.value = Math.min(4, Math.max(1, value))
|
||||
if (imageZoom.value === 1) imagePan.value = { x: 0, y: 0 }
|
||||
}
|
||||
|
||||
function startDragging(event: PointerEvent): void {
|
||||
if (imageZoom.value === 1) {
|
||||
setZoom(2)
|
||||
return
|
||||
}
|
||||
dragging.value = true
|
||||
dragStart.value = {
|
||||
panX: imagePan.value.x,
|
||||
panY: imagePan.value.y,
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
}
|
||||
window.addEventListener('pointermove', moveImage)
|
||||
window.addEventListener('pointerup', stopDragging)
|
||||
}
|
||||
|
||||
function moveImage(event: PointerEvent): void {
|
||||
if (!dragging.value) return
|
||||
imagePan.value = {
|
||||
x: dragStart.value.panX + event.clientX - dragStart.value.x,
|
||||
y: dragStart.value.panY + event.clientY - dragStart.value.y,
|
||||
}
|
||||
}
|
||||
|
||||
function stopDragging(): void {
|
||||
dragging.value = false
|
||||
window.removeEventListener('pointermove', moveImage)
|
||||
window.removeEventListener('pointerup', stopDragging)
|
||||
}
|
||||
|
||||
async function deleteSelected(): Promise<void> {
|
||||
if (!selected.value || deleting.value) return
|
||||
deleting.value = true
|
||||
deleteDialogOpened.value = false
|
||||
pendingDeleteCorrelation = `${Date.now()}-${crypto.randomUUID()}`
|
||||
if (isDevelopment) {
|
||||
window.setTimeout(() => {
|
||||
window.dispatchEvent(
|
||||
new MessageEvent('message', {
|
||||
data: {
|
||||
data: {
|
||||
correlationId: pendingDeleteCorrelation,
|
||||
id: selected.value?.id,
|
||||
success: true,
|
||||
},
|
||||
type: 'media:deleteResult',
|
||||
},
|
||||
}),
|
||||
)
|
||||
}, 500)
|
||||
return
|
||||
}
|
||||
await nuiCall('gallery:delete', {
|
||||
correlationId: pendingDeleteCorrelation,
|
||||
id: selected.value.id,
|
||||
})
|
||||
}
|
||||
|
||||
function onMessage(event: MessageEvent): void {
|
||||
const message = event.data as { data?: DeleteResult; type?: string }
|
||||
if (
|
||||
message.type !== 'media:deleteResult' ||
|
||||
message.data?.correlationId !== pendingDeleteCorrelation
|
||||
) {
|
||||
return
|
||||
}
|
||||
deleting.value = false
|
||||
if (message.data.success && message.data.id) {
|
||||
media.value = media.value.filter((entry) => entry.id !== message.data?.id)
|
||||
closeMedia()
|
||||
showToast(phone.t('Apps.photos.deleted'))
|
||||
} else {
|
||||
showToast(
|
||||
phone.t(`Apps.photos.errors.${mediaErrorKey(message.data.error)}`),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
watch(filter, () => void loadGallery())
|
||||
watch(hasMore, () => void nextTick().then(observeMore))
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('message', onMessage)
|
||||
void loadGallery()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
observer?.disconnect()
|
||||
stopDragging()
|
||||
if (toastTimer !== undefined) window.clearTimeout(toastTimer)
|
||||
window.removeEventListener('message', onMessage)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<k-page
|
||||
v-if="!selected"
|
||||
class="gallery-page !pt-[44px] !pb-[25px]"
|
||||
:aria-label="phone.t('Apps.photos.name')"
|
||||
>
|
||||
<k-navbar large transparent :title="phone.t('Apps.photos.name')">
|
||||
<template #right>
|
||||
<span class="gallery-count">{{ countLabel }}</span>
|
||||
</template>
|
||||
<template #subnavbar>
|
||||
<k-segmented class="gallery-filter">
|
||||
<k-segmented-button
|
||||
:active="filter === 'all'"
|
||||
@click="filter = 'all'"
|
||||
>
|
||||
{{ phone.t('Apps.photos.filters.all') }}
|
||||
</k-segmented-button>
|
||||
<k-segmented-button
|
||||
:active="filter === 'photo'"
|
||||
@click="filter = 'photo'"
|
||||
>
|
||||
{{ phone.t('Apps.photos.filters.photos') }}
|
||||
</k-segmented-button>
|
||||
<k-segmented-button
|
||||
:active="filter === 'video'"
|
||||
@click="filter = 'video'"
|
||||
>
|
||||
{{ phone.t('Apps.photos.filters.videos') }}
|
||||
</k-segmented-button>
|
||||
</k-segmented>
|
||||
</template>
|
||||
</k-navbar>
|
||||
|
||||
<div v-if="loading" class="gallery-state">
|
||||
<k-preloader />
|
||||
<span>{{ phone.t('Apps.photos.loading') }}</span>
|
||||
</div>
|
||||
<k-block v-else-if="loadError" strong inset class="gallery-error">
|
||||
{{ loadError }}
|
||||
</k-block>
|
||||
<div v-else-if="!media.length" class="gallery-state gallery-empty">
|
||||
<strong>{{ phone.t('Apps.photos.emptyTitle') }}</strong>
|
||||
<span>{{ phone.t('Apps.photos.emptyBody') }}</span>
|
||||
</div>
|
||||
<div v-else class="gallery-grid">
|
||||
<button
|
||||
v-for="entry in media"
|
||||
:key="entry.id"
|
||||
class="gallery-tile"
|
||||
type="button"
|
||||
:aria-label="
|
||||
phone.t(
|
||||
entry.mediaType === 'video'
|
||||
? 'Apps.photos.videoAlt'
|
||||
: 'Apps.photos.photoAlt',
|
||||
)
|
||||
"
|
||||
@click="openMedia(entry)"
|
||||
>
|
||||
<img
|
||||
v-if="entry.mediaType === 'photo'"
|
||||
:src="entry.url"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
:src="entry.url"
|
||||
muted
|
||||
playsinline
|
||||
preload="metadata"
|
||||
></video>
|
||||
<span v-if="entry.mediaType === 'video'" class="gallery-video-badge">
|
||||
<Play :size="16" fill="currentColor" />
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
v-if="hasMore"
|
||||
ref="loadTrigger"
|
||||
class="gallery-load-trigger"
|
||||
></span>
|
||||
</div>
|
||||
</k-page>
|
||||
|
||||
<k-page v-else class="gallery-detail !pt-[44px] !pb-[25px]">
|
||||
<k-navbar
|
||||
:title="
|
||||
phone.t(
|
||||
selected.mediaType === 'video'
|
||||
? 'Apps.photos.video'
|
||||
: 'Apps.photos.photo',
|
||||
)
|
||||
"
|
||||
>
|
||||
<template #left>
|
||||
<k-navbar-back-link
|
||||
component="button"
|
||||
:text="phone.t('Common.back')"
|
||||
@click="closeMedia"
|
||||
/>
|
||||
</template>
|
||||
<template #right>
|
||||
<k-link
|
||||
component="button"
|
||||
icon-only
|
||||
class="text-red-500"
|
||||
:aria-label="phone.t('Apps.photos.delete')"
|
||||
:disabled="deleting"
|
||||
@click="deleteDialogOpened = true"
|
||||
>
|
||||
<Trash2 :size="20" />
|
||||
</k-link>
|
||||
</template>
|
||||
</k-navbar>
|
||||
|
||||
<div class="gallery-detail-stage">
|
||||
<img
|
||||
v-if="selected.mediaType === 'photo'"
|
||||
:src="selected.url"
|
||||
:alt="phone.t('Apps.photos.photoAlt')"
|
||||
:style="imageStyle"
|
||||
draggable="false"
|
||||
@pointerdown="startDragging"
|
||||
@dblclick="setZoom(imageZoom === 1 ? 2 : 1)"
|
||||
/>
|
||||
<video v-else :src="selected.url" controls autoplay playsinline></video>
|
||||
</div>
|
||||
|
||||
<nav v-if="selected.mediaType === 'photo'" class="gallery-zoom-controls">
|
||||
<k-link
|
||||
component="button"
|
||||
icon-only
|
||||
:aria-label="phone.t('Apps.photos.zoomOut')"
|
||||
:disabled="imageZoom === 1"
|
||||
@click="setZoom(imageZoom - 0.5)"
|
||||
><ZoomOut :size="20"
|
||||
/></k-link>
|
||||
<k-link
|
||||
component="button"
|
||||
icon-only
|
||||
:aria-label="phone.t('Apps.photos.resetZoom')"
|
||||
:disabled="imageZoom === 1"
|
||||
@click="setZoom(1)"
|
||||
><RotateCcw :size="19"
|
||||
/></k-link>
|
||||
<k-link
|
||||
component="button"
|
||||
icon-only
|
||||
:aria-label="phone.t('Apps.photos.zoomIn')"
|
||||
:disabled="imageZoom === 4"
|
||||
@click="setZoom(imageZoom + 0.5)"
|
||||
><ZoomIn :size="20"
|
||||
/></k-link>
|
||||
</nav>
|
||||
<div class="gallery-detail-date">{{ formatDate(selected.createdAt) }}</div>
|
||||
</k-page>
|
||||
|
||||
<k-dialog
|
||||
:opened="deleteDialogOpened"
|
||||
@backdropclick="deleteDialogOpened = false"
|
||||
>
|
||||
<template #title>{{ phone.t('Apps.photos.deleteTitle') }}</template>
|
||||
<p>{{ phone.t('Apps.photos.deleteBody') }}</p>
|
||||
<template #buttons>
|
||||
<k-dialog-button @click="deleteDialogOpened = false">
|
||||
{{ phone.t('Common.cancel') }}
|
||||
</k-dialog-button>
|
||||
<k-dialog-button strong class="text-red-500" @click="deleteSelected">
|
||||
{{ phone.t('Common.delete') }}
|
||||
</k-dialog-button>
|
||||
</template>
|
||||
</k-dialog>
|
||||
|
||||
<k-toast :opened="toastOpened" position="center" @click="toastOpened = false">
|
||||
{{ toastText }}
|
||||
</k-toast>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.gallery-count {
|
||||
color: #8e8e93;
|
||||
font-size: 12px;
|
||||
}
|
||||
.gallery-filter {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px 8px;
|
||||
}
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2px;
|
||||
padding: 8px 2px 30px;
|
||||
}
|
||||
.gallery-tile {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
background: #d1d1d6;
|
||||
}
|
||||
.gallery-tile img,
|
||||
.gallery-tile video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.gallery-video-badge {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
bottom: 7px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #0009;
|
||||
color: #fff;
|
||||
}
|
||||
.gallery-load-trigger {
|
||||
height: 1px;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.gallery-state {
|
||||
min-height: 430px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 36px;
|
||||
color: #8e8e93;
|
||||
text-align: center;
|
||||
}
|
||||
.gallery-empty strong {
|
||||
color: currentColor;
|
||||
font-size: 20px;
|
||||
}
|
||||
.gallery-error {
|
||||
color: #ff3b30;
|
||||
}
|
||||
.gallery-detail-stage {
|
||||
height: calc(100cqh - 174px);
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
touch-action: none;
|
||||
}
|
||||
.gallery-detail-stage img,
|
||||
.gallery-detail-stage video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
transform-origin: center;
|
||||
user-select: none;
|
||||
}
|
||||
.gallery-detail-stage img {
|
||||
transition: transform 0.12s ease-out;
|
||||
}
|
||||
.gallery-zoom-controls {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
border-bottom: 1px solid #8e8e9333;
|
||||
}
|
||||
.gallery-detail-date {
|
||||
padding: 12px 18px;
|
||||
color: #8e8e93;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user