mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-04 17:23:25 +00:00
Merge branch 'camera-and-gallery' into dev
# Conflicts: # frontend/package.json # frontend/pnpm-lock.yaml # frontend/src/views/apps/SettingsApp.vue # sky_phone/source/html/index.html
This commit is contained in:
Eichenholz
@@ -9,11 +9,11 @@ import {
|
||||
} from 'lucide-vue-next'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { useMediaStore } from '@/stores/media'
|
||||
import { useAppStoreStore } from '@/stores/app-store'
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
|
||||
const phone = usePhoneStore()
|
||||
const media = useMediaStore()
|
||||
const appStore = useAppStoreStore()
|
||||
const tab = ref<'today' | 'apps' | 'games' | 'arcade' | 'search'>('today')
|
||||
const query = ref('')
|
||||
const tabs = [
|
||||
@@ -126,10 +126,10 @@ const date = new Intl.DateTimeFormat(phone.lang, {
|
||||
<strong>{{ item.title }}</strong
|
||||
><small>{{ phone.t(item.subtitle) }}</small>
|
||||
</div>
|
||||
<button type="button" @click="media.claimApp(item.id)">
|
||||
<button type="button" @click="appStore.claimApp(item.id)">
|
||||
{{
|
||||
phone.t(
|
||||
media.claimedApps.includes(item.id)
|
||||
appStore.claimedApps.includes(item.id)
|
||||
? 'Apps.appStore.open'
|
||||
: 'Apps.appStore.get',
|
||||
)
|
||||
|
||||
@@ -1,126 +1,812 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Aperture,
|
||||
Camera,
|
||||
ChevronUp,
|
||||
RotateCcw,
|
||||
kFab,
|
||||
kNavbar,
|
||||
kPage,
|
||||
kSegmented,
|
||||
kSegmentedButton,
|
||||
} from 'konsta/vue'
|
||||
import {
|
||||
Images,
|
||||
RefreshCw,
|
||||
RotateCcwSquare,
|
||||
Video,
|
||||
Zap,
|
||||
ZapOff,
|
||||
} from 'lucide-vue-next'
|
||||
import { ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { useMediaStore } from '@/stores/media'
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
import type { MediaType, PhoneMedia, UploadResult } from '@/types/media'
|
||||
import { createGameView, type GameView } from '@/utils/gameView'
|
||||
import { formatRecordingDuration, mediaErrorKey } from '@/utils/media'
|
||||
import { nuiCall } from '@/utils/nui'
|
||||
|
||||
const media = useMediaStore()
|
||||
type CaptureItem = {
|
||||
error?: string
|
||||
id: string
|
||||
mediaType: MediaType
|
||||
status: 'uploading' | 'success' | 'error'
|
||||
}
|
||||
|
||||
const isDevelopment = import.meta.env.DEV
|
||||
const zoomLevels = [0.5, 1, 2, 3] as const
|
||||
const phone = usePhoneStore()
|
||||
const flash = ref(false)
|
||||
const router = useRouter()
|
||||
const mode = ref<MediaType>('photo')
|
||||
const selectedZoom = ref<(typeof zoomLevels)[number]>(1)
|
||||
const flashEnabled = ref(false)
|
||||
const modes = [
|
||||
'timelapse',
|
||||
'slowMo',
|
||||
'cinematic',
|
||||
'video',
|
||||
'photo',
|
||||
'portrait',
|
||||
'pano',
|
||||
] as const
|
||||
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 gameCanvas = ref<HTMLCanvasElement | null>(null)
|
||||
const noticeText = ref('')
|
||||
const videoBitrateKbps = ref(1500)
|
||||
let shutterTimer: number | undefined
|
||||
let noticeTimer: number | undefined
|
||||
let recordingTimer: number | undefined
|
||||
let gameView: GameView | null = null
|
||||
let renderFrameId: number | undefined
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
|
||||
const pendingCount = computed(
|
||||
() =>
|
||||
captures.value.filter((capture) => capture.status === 'uploading').length,
|
||||
)
|
||||
const controlColors = {
|
||||
bgIos: 'bg-ios-light-glass/75 dark:bg-ios-dark-glass/75',
|
||||
activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
|
||||
textIos: 'text-black/80 dark:text-white/80',
|
||||
}
|
||||
const modeColors = {
|
||||
strongHighlightBgIos: 'bg-[#e5e5ea] dark:bg-[#2c2c2e]',
|
||||
}
|
||||
const modeButtonColors = {
|
||||
segmentedStrongTextIos: 'text-[#ffd60a]',
|
||||
}
|
||||
const modeNavbarColors = {
|
||||
bgIos: 'bg-transparent',
|
||||
}
|
||||
const flashColors = computed(() => ({
|
||||
...controlColors,
|
||||
textIos: flashEnabled.value
|
||||
? 'text-yellow-500 dark:text-yellow-300'
|
||||
: controlColors.textIos,
|
||||
}))
|
||||
|
||||
function correlationId(): string {
|
||||
return `${Date.now()}-${crypto.randomUUID()}`
|
||||
}
|
||||
|
||||
function showCameraNotice(text: string): void {
|
||||
if (noticeTimer !== undefined) window.clearTimeout(noticeTimer)
|
||||
noticeText.value = text
|
||||
noticeTimer = window.setTimeout(() => {
|
||||
noticeText.value = ''
|
||||
}, 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 {
|
||||
flash.value = true
|
||||
media.capture()
|
||||
window.setTimeout(() => (flash.value = false), 120)
|
||||
if (mode.value === 'video') {
|
||||
if (recording.value) {
|
||||
stopRecording()
|
||||
} else {
|
||||
startRecording()
|
||||
}
|
||||
return
|
||||
}
|
||||
void requestPhoto()
|
||||
}
|
||||
|
||||
function setMode(nextMode: MediaType): void {
|
||||
if (recording.value || savingVideo.value) return
|
||||
mode.value = nextMode
|
||||
}
|
||||
|
||||
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 toggleOrientation(): void {
|
||||
if (recording.value || savingVideo.value) return
|
||||
phone.setCameraLandscape(!phone.cameraLandscape)
|
||||
window.postMessage(
|
||||
{
|
||||
data: { landscape: phone.cameraLandscape },
|
||||
type: 'camera:orientation',
|
||||
},
|
||||
'*',
|
||||
)
|
||||
}
|
||||
|
||||
function setZoom(zoom: (typeof zoomLevels)[number]): void {
|
||||
selectedZoom.value = zoom
|
||||
resizeGameView()
|
||||
window.postMessage({ data: { zoom }, type: 'camera:zoom' }, '*')
|
||||
void nuiCall('camera:setZoom', { zoom })
|
||||
}
|
||||
|
||||
function resizeGameView(entry?: ResizeObserverEntry): void {
|
||||
if (!gameCanvas.value || !gameView) return
|
||||
const width = entry?.contentRect.width ?? gameCanvas.value.offsetWidth
|
||||
const height = entry?.contentRect.height ?? gameCanvas.value.offsetHeight
|
||||
const renderScale = Math.min(window.devicePixelRatio, 2)
|
||||
gameView.resize(
|
||||
Math.max(1, Math.round(width * renderScale)),
|
||||
Math.max(1, Math.round(height * renderScale)),
|
||||
window.innerWidth,
|
||||
window.innerHeight,
|
||||
selectedZoom.value,
|
||||
)
|
||||
}
|
||||
|
||||
function startGameView(): void {
|
||||
if (isDevelopment || !gameCanvas.value) return
|
||||
gameView = createGameView(gameCanvas.value)
|
||||
resizeObserver = new ResizeObserver((entries) => resizeGameView(entries[0]))
|
||||
resizeObserver.observe(gameCanvas.value)
|
||||
resizeGameView()
|
||||
const render = () => {
|
||||
if (!gameView || gameView.isLost()) {
|
||||
renderFrameId = undefined
|
||||
return
|
||||
}
|
||||
gameView.render()
|
||||
renderFrameId = window.requestAnimationFrame(render)
|
||||
}
|
||||
renderFrameId = window.requestAnimationFrame(render)
|
||||
}
|
||||
|
||||
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') {
|
||||
showCameraNotice(
|
||||
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' })
|
||||
showCameraNotice(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' })
|
||||
showCameraNotice(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(() => {
|
||||
phone.setCameraLandscape(false)
|
||||
window.postMessage(
|
||||
{ data: { landscape: false }, type: 'camera:orientation' },
|
||||
'*',
|
||||
)
|
||||
window.postMessage(
|
||||
{ data: { zoom: selectedZoom.value }, type: 'camera:zoom' },
|
||||
'*',
|
||||
)
|
||||
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()
|
||||
startGameView()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (shutterTimer !== undefined) window.clearTimeout(shutterTimer)
|
||||
if (noticeTimer !== undefined) window.clearTimeout(noticeTimer)
|
||||
if (recordingTimer !== undefined) window.clearInterval(recordingTimer)
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
window.removeEventListener('message', onMessage)
|
||||
if (renderFrameId !== undefined) window.cancelAnimationFrame(renderFrameId)
|
||||
resizeObserver?.disconnect()
|
||||
gameView?.dispose()
|
||||
phone.setCameraLandscape(false)
|
||||
window.postMessage(
|
||||
{ data: { landscape: false }, type: 'camera:orientation' },
|
||||
'*',
|
||||
)
|
||||
window.postMessage({ type: 'camera:recordCancel' }, '*')
|
||||
void nuiCall('camera:setFlash', { enabled: false })
|
||||
void nuiCall('camera:setActive', { active: false })
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="native-app reference-camera">
|
||||
<header class="camera-topbar">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="phone.t('Apps.camera.flash')"
|
||||
@click="flashEnabled = !flashEnabled"
|
||||
>
|
||||
<Zap v-if="flashEnabled" :size="22" />
|
||||
<ZapOff v-else :size="22" />
|
||||
</button>
|
||||
<Aperture :size="22" />
|
||||
</div>
|
||||
<button
|
||||
class="camera-chevron"
|
||||
type="button"
|
||||
:aria-label="phone.t('Apps.camera.controls')"
|
||||
<k-page
|
||||
class="camera-page"
|
||||
:class="{ 'camera-page--landscape': phone.cameraLandscape }"
|
||||
:aria-label="phone.t('Apps.camera.name')"
|
||||
>
|
||||
<div class="camera-viewport">
|
||||
<canvas
|
||||
v-if="!isDevelopment"
|
||||
ref="gameCanvas"
|
||||
class="camera-game-view"
|
||||
aria-hidden="true"
|
||||
></canvas>
|
||||
<div
|
||||
v-else
|
||||
class="camera-dev-view"
|
||||
:style="{ transform: `scale(${Math.max(1, selectedZoom)})` }"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<ChevronUp :size="20" />
|
||||
</button>
|
||||
<Aperture :size="22" />
|
||||
<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>
|
||||
</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="noticeText"
|
||||
class="camera-focus-pill camera-focus-pill--notice"
|
||||
>
|
||||
{{ noticeText }}
|
||||
</span>
|
||||
<span v-else-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"
|
||||
:disabled="recording || savingVideo"
|
||||
:aria-label="
|
||||
phone.t(
|
||||
phone.cameraLandscape
|
||||
? 'Apps.camera.portrait'
|
||||
: 'Apps.camera.landscape',
|
||||
)
|
||||
"
|
||||
@click="toggleOrientation"
|
||||
>
|
||||
<template #icon><RotateCcwSquare :size="19" /></template>
|
||||
</k-fab>
|
||||
</header>
|
||||
|
||||
<section
|
||||
class="reference-viewfinder"
|
||||
:class="`camera-facing--${media.cameraFacing}`"
|
||||
>
|
||||
<div class="camera-flash" :class="{ active: flash }" />
|
||||
<i
|
||||
v-for="corner in ['tl', 'tr', 'bl', 'br']"
|
||||
:key="corner"
|
||||
:class="`focus-corner focus-corner--${corner}`"
|
||||
/>
|
||||
<div class="camera-zoom">
|
||||
<button
|
||||
v-for="zoom in [0.5, 1]"
|
||||
:key="zoom"
|
||||
:class="{ active: media.cameraZoom === zoom }"
|
||||
type="button"
|
||||
@click="media.cameraZoom = zoom"
|
||||
>
|
||||
{{ zoom }}<small v-if="zoom === 1">x</small>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<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="reference-camera-footer">
|
||||
<nav class="camera-mode-strip">
|
||||
<div class="camera-zoom-row">
|
||||
<button
|
||||
v-for="zoom in zoomLevels"
|
||||
:key="zoom"
|
||||
class="camera-zoom-pill"
|
||||
:class="{ active: selectedZoom === zoom }"
|
||||
type="button"
|
||||
:aria-label="phone.t('Apps.camera.zoom', { zoom: `${zoom}x` })"
|
||||
:aria-pressed="selectedZoom === zoom"
|
||||
@click="setZoom(zoom)"
|
||||
>
|
||||
{{ zoom }}x
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<footer class="camera-controls">
|
||||
<div class="camera-capture-row">
|
||||
<button
|
||||
v-for="mode in modes"
|
||||
:key="mode"
|
||||
:class="{ active: media.cameraMode === mode }"
|
||||
class="camera-latest"
|
||||
type="button"
|
||||
@click="
|
||||
mode === 'photo' || mode === 'portrait' || mode === 'video'
|
||||
? (media.cameraMode = mode)
|
||||
: undefined
|
||||
"
|
||||
:aria-label="phone.t('Apps.camera.openGallery')"
|
||||
@click="router.push('/apps/photos')"
|
||||
>
|
||||
{{ phone.t(`Apps.camera.modes.${mode}`) }}
|
||||
<img
|
||||
v-if="latestMedia?.mediaType === 'photo'"
|
||||
:src="latestMedia.url"
|
||||
alt=""
|
||||
/>
|
||||
<Video v-else-if="latestMedia" :size="22" />
|
||||
<Images v-else :size="22" />
|
||||
</button>
|
||||
</nav>
|
||||
<div class="camera-shutter-row">
|
||||
<div
|
||||
class="camera-thumbnail"
|
||||
:style="{ background: media.photos[0]?.gradient }"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="reference-shutter"
|
||||
class="camera-shutter"
|
||||
:class="{ recording, video: mode === 'video' }"
|
||||
type="button"
|
||||
:aria-label="phone.t('Apps.camera.shutter')"
|
||||
:disabled="savingVideo"
|
||||
:aria-label="
|
||||
phone.t(
|
||||
mode === 'photo'
|
||||
? 'Apps.camera.takePhoto'
|
||||
: recording
|
||||
? 'Apps.camera.stopRecording'
|
||||
: 'Apps.camera.startRecording',
|
||||
)
|
||||
"
|
||||
@click="capture"
|
||||
>
|
||||
<Camera :size="23" />
|
||||
<span></span>
|
||||
</button>
|
||||
<button
|
||||
class="reference-flip"
|
||||
|
||||
<k-fab
|
||||
component="button"
|
||||
type="button"
|
||||
class="camera-control camera-selfie"
|
||||
:colors="controlColors"
|
||||
:aria-label="phone.t('Apps.camera.flip')"
|
||||
@click="
|
||||
media.cameraFacing =
|
||||
media.cameraFacing === 'rear' ? 'front' : 'rear'
|
||||
"
|
||||
@click="toggleFacing"
|
||||
>
|
||||
<RotateCcw :size="22" />
|
||||
</button>
|
||||
<template #icon><RefreshCw :size="20" /></template>
|
||||
</k-fab>
|
||||
</div>
|
||||
|
||||
<k-navbar
|
||||
component="nav"
|
||||
class="camera-mode-navbar"
|
||||
inner-class="hidden"
|
||||
:colors="modeNavbarColors"
|
||||
:aria-label="phone.t('Apps.camera.name')"
|
||||
>
|
||||
<template #subnavbar>
|
||||
<k-segmented strong rounded :colors="modeColors">
|
||||
<k-segmented-button
|
||||
small
|
||||
:active="mode === 'photo'"
|
||||
:disabled="recording || savingVideo"
|
||||
:colors="modeButtonColors"
|
||||
:class="mode === 'photo' ? undefined : 'text-[#8e8e93]'"
|
||||
:aria-pressed="mode === 'photo'"
|
||||
@click="setMode('photo')"
|
||||
>
|
||||
{{ phone.t('Apps.camera.photo') }}
|
||||
</k-segmented-button>
|
||||
<k-segmented-button
|
||||
small
|
||||
:active="mode === 'video'"
|
||||
:disabled="recording || savingVideo"
|
||||
:colors="modeButtonColors"
|
||||
:class="mode === 'video' ? undefined : 'text-[#8e8e93]'"
|
||||
:aria-pressed="mode === 'video'"
|
||||
@click="setMode('video')"
|
||||
>
|
||||
{{ phone.t('Apps.camera.video') }}
|
||||
</k-segmented-button>
|
||||
</k-segmented>
|
||||
</template>
|
||||
</k-navbar>
|
||||
</footer>
|
||||
</main>
|
||||
</k-page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.camera-page {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.camera-viewport {
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 4;
|
||||
overflow: hidden;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.camera-page--landscape .camera-viewport {
|
||||
top: 46%;
|
||||
left: 50%;
|
||||
width: calc(100% * 16 / 9);
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
.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 {
|
||||
--color-primary: transparent;
|
||||
}
|
||||
.camera-control svg {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.camera-latest svg {
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.camera-page--landscape .camera-control svg,
|
||||
.camera-page--landscape .camera-latest svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.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-focus-pill--notice {
|
||||
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-zoom-row {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
bottom: 164px;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.camera-zoom-pill {
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
.camera-zoom-pill.active {
|
||||
border-color: transparent;
|
||||
background: rgb(44 44 46 / 88%);
|
||||
box-shadow: 0 8px 16px rgb(0 0 0 / 30%);
|
||||
color: #ffd60a;
|
||||
}
|
||||
.camera-controls {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.camera-capture-row {
|
||||
display: grid;
|
||||
grid-template-columns: 54px 1fr 54px;
|
||||
align-items: center;
|
||||
padding: 0 24px 4px;
|
||||
}
|
||||
.camera-latest {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #111b;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.camera-selfie {
|
||||
justify-self: end;
|
||||
}
|
||||
.camera-latest img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.camera-mode-navbar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
width: 50%;
|
||||
align-self: center;
|
||||
padding-bottom: 18px;
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,678 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
kBlock,
|
||||
kButton,
|
||||
kDialog,
|
||||
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 {
|
||||
hasNextMediaPage,
|
||||
MEDIA_PAGE_SIZE,
|
||||
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 filterItems = [
|
||||
{ id: 'all', label: 'all' },
|
||||
{ id: 'photo', label: 'photos' },
|
||||
{ id: 'video', label: 'videos' },
|
||||
] as const
|
||||
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 cancelButtonColors = {
|
||||
fillBgIos: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
|
||||
fillBgMaterial: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
|
||||
fillTextIos: 'text-white',
|
||||
fillTextMaterial: 'text-white',
|
||||
}
|
||||
const deleteButtonColors = {
|
||||
fillBgIos: 'bg-[#ff3b30] active:bg-[#d9342b]',
|
||||
fillBgMaterial: 'bg-[#ff3b30] active:bg-[#d9342b]',
|
||||
fillTextIos: 'text-white',
|
||||
fillTextMaterial: 'text-white',
|
||||
}
|
||||
const filterBarColors = {
|
||||
strongHighlightBgIos: 'bg-[#63636680]',
|
||||
}
|
||||
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 landscapeViewer = ref(false)
|
||||
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 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,
|
||||
landscape = false,
|
||||
): PhoneMedia {
|
||||
const width = landscape ? 1600 : 900
|
||||
const height = landscape ? 900 : 1200
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><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="${width}" height="${height}" fill="url(#g)"/><circle cx="${width * 0.76}" cy="${height * 0.24}" r="${height * 0.15}" fill="#ffffff20"/><path d="M0 ${height * 0.82} ${width * 0.26} ${height * 0.56}l${width * 0.2} ${height * 0.18} ${width * 0.14}-${height * 0.11} ${width * 0.4} ${height * 0.27}v${height * 0.18}H0z" fill="#08131d66"/><text x="${width * 0.08}" y="${height * 0.9}" fill="white" font-size="${height * 0.05}" 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', true),
|
||||
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: MEDIA_PAGE_SIZE,
|
||||
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 = hasNextMediaPage(response.data.length)
|
||||
} 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 {
|
||||
landscapeViewer.value = false
|
||||
phone.setCameraLandscape(false)
|
||||
selected.value = entry
|
||||
imageZoom.value = 1
|
||||
imagePan.value = { x: 0, y: 0 }
|
||||
}
|
||||
|
||||
function closeMedia(): void {
|
||||
landscapeViewer.value = false
|
||||
phone.setCameraLandscape(false)
|
||||
selected.value = null
|
||||
deleteDialogOpened.value = false
|
||||
stopDragging()
|
||||
}
|
||||
|
||||
function orientToMedia(event: Event): void {
|
||||
const mediaElement = event.currentTarget as
|
||||
| HTMLImageElement
|
||||
| HTMLVideoElement
|
||||
const landscape =
|
||||
mediaElement instanceof HTMLVideoElement
|
||||
? mediaElement.videoWidth > mediaElement.videoHeight
|
||||
: mediaElement.naturalWidth > mediaElement.naturalHeight
|
||||
landscapeViewer.value = landscape
|
||||
phone.setCameraLandscape(landscape)
|
||||
}
|
||||
|
||||
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(() => {
|
||||
phone.setCameraLandscape(false)
|
||||
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]"
|
||||
:aria-label="phone.t('Apps.photos.name')"
|
||||
>
|
||||
<k-navbar :title="phone.t('Apps.photos.name')" />
|
||||
|
||||
<div class="gallery-content">
|
||||
<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"
|
||||
:class="{ 'gallery-grid--fill': media.length >= 13 }"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<k-navbar
|
||||
component="nav"
|
||||
class="gallery-filter-navbar"
|
||||
:aria-label="phone.t('Apps.photos.name')"
|
||||
>
|
||||
<template #subnavbar>
|
||||
<k-segmented
|
||||
strong
|
||||
rounded
|
||||
:colors="filterBarColors"
|
||||
:data-active-filter="filter"
|
||||
>
|
||||
<k-segmented-button
|
||||
v-for="item in filterItems"
|
||||
:key="item.id"
|
||||
large
|
||||
:active="filter === item.id"
|
||||
:class="filter === item.id ? 'text-white' : 'text-[#8e8e93]'"
|
||||
:aria-pressed="filter === item.id"
|
||||
@click="filter = item.id"
|
||||
>
|
||||
{{ phone.t(`Apps.photos.filters.${item.label}`) }}
|
||||
</k-segmented-button>
|
||||
</k-segmented>
|
||||
</template>
|
||||
</k-navbar>
|
||||
</k-page>
|
||||
|
||||
<k-page
|
||||
v-else
|
||||
class="gallery-detail !pt-[44px] !pb-[25px]"
|
||||
:class="{ 'gallery-detail--landscape': landscapeViewer }"
|
||||
>
|
||||
<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">
|
||||
<div class="gallery-detail-media">
|
||||
<img
|
||||
v-if="selected.mediaType === 'photo'"
|
||||
:src="selected.url"
|
||||
:alt="phone.t('Apps.photos.photoAlt')"
|
||||
:style="imageStyle"
|
||||
draggable="false"
|
||||
@load="orientToMedia"
|
||||
@pointerdown="startDragging"
|
||||
@dblclick="setZoom(imageZoom === 1 ? 2 : 1)"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
:src="selected.url"
|
||||
controls
|
||||
autoplay
|
||||
playsinline
|
||||
@loadedmetadata="orientToMedia"
|
||||
></video>
|
||||
</div>
|
||||
</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-button
|
||||
large
|
||||
rounded
|
||||
:colors="cancelButtonColors"
|
||||
@click="deleteDialogOpened = false"
|
||||
>
|
||||
{{ phone.t('Common.cancel') }}
|
||||
</k-button>
|
||||
<k-button
|
||||
large
|
||||
rounded
|
||||
:colors="deleteButtonColors"
|
||||
@click="deleteSelected"
|
||||
>
|
||||
{{ phone.t('Common.delete') }}
|
||||
</k-button>
|
||||
</template>
|
||||
</k-dialog>
|
||||
|
||||
<k-toast :opened="toastOpened" position="center" @click="toastOpened = false">
|
||||
{{ toastText }}
|
||||
</k-toast>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.gallery-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery-content {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.gallery-filter-navbar {
|
||||
position: absolute !important;
|
||||
top: auto !important;
|
||||
bottom: 24px;
|
||||
}
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2px;
|
||||
padding: 8px 2px 0;
|
||||
}
|
||||
.gallery-grid--fill {
|
||||
flex: 1;
|
||||
grid-auto-rows: minmax(min-content, 1fr);
|
||||
}
|
||||
.gallery-tile {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
background: #d1d1d6;
|
||||
}
|
||||
.gallery-grid--fill .gallery-tile {
|
||||
height: 100%;
|
||||
}
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery-detail-stage {
|
||||
position: relative;
|
||||
container-type: size;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
touch-action: none;
|
||||
}
|
||||
.gallery-detail-media {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transform-origin: center;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.gallery-detail--landscape .gallery-detail-media {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100cqh;
|
||||
height: 100cqw;
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
.gallery-detail-media img,
|
||||
.gallery-detail-media video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
transform-origin: center;
|
||||
user-select: none;
|
||||
}
|
||||
.gallery-detail-media img {
|
||||
transition: transform 0.12s ease-out;
|
||||
}
|
||||
.gallery-detail :deep(svg) {
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.gallery-detail--landscape :deep(svg) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.gallery-zoom-controls {
|
||||
flex: 0 0 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
border-bottom: 1px solid #8e8e9333;
|
||||
}
|
||||
.gallery-detail-date {
|
||||
flex: 0 0 auto;
|
||||
padding: 8px 18px 10px;
|
||||
color: #8e8e93;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,135 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Heart, Images, Library, Search } from 'lucide-vue-next'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { useMediaStore } from '@/stores/media'
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
|
||||
const media = useMediaStore()
|
||||
const phone = usePhoneStore()
|
||||
const tab = ref<'library' | 'forYou' | 'albums' | 'search'>('library')
|
||||
const query = ref('')
|
||||
const tabs = [
|
||||
{ id: 'library', icon: Library },
|
||||
{ id: 'forYou', icon: Heart },
|
||||
{ id: 'albums', icon: Images },
|
||||
{ id: 'search', icon: Search },
|
||||
] as const
|
||||
const gallery = computed(() =>
|
||||
Array.from(
|
||||
{ length: 54 },
|
||||
(_, index) => media.photos[index % media.photos.length],
|
||||
),
|
||||
)
|
||||
const filtered = computed(() =>
|
||||
media.photos.filter((photo) =>
|
||||
phone.t(photo.titleKey).toLowerCase().includes(query.value.toLowerCase()),
|
||||
),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="native-app reference-photos">
|
||||
<section v-if="tab === 'library'" class="photos-library">
|
||||
<header class="photos-floating-header">
|
||||
<div>
|
||||
<strong>{{ phone.t('Apps.photos.dateRange') }}</strong
|
||||
><span>{{ phone.t('Apps.photos.place') }}</span>
|
||||
</div>
|
||||
<button type="button">{{ phone.t('Apps.photos.select') }}</button
|
||||
><button type="button">•••</button>
|
||||
</header>
|
||||
<div class="reference-photo-grid">
|
||||
<article
|
||||
v-for="(photo, index) in gallery"
|
||||
:key="`${photo.id}-${index}`"
|
||||
:style="{ background: photo.gradient }"
|
||||
/>
|
||||
</div>
|
||||
<p class="photos-count">{{ phone.t('Apps.photos.count') }}</p>
|
||||
<div class="photos-period">
|
||||
<button>{{ phone.t('Apps.photos.years') }}</button
|
||||
><button>{{ phone.t('Apps.photos.months') }}</button
|
||||
><button>{{ phone.t('Apps.photos.days') }}</button
|
||||
><button class="active">{{ phone.t('Apps.photos.allPhotos') }}</button>
|
||||
</div>
|
||||
</section>
|
||||
<section v-else-if="tab === 'forYou'" class="photos-scroll">
|
||||
<h1>{{ phone.t('Apps.photos.tabs.forYou') }}</h1>
|
||||
<div class="photos-section-title">
|
||||
<h2>{{ phone.t('Apps.photos.memories') }}</h2>
|
||||
<button>{{ phone.t('Apps.photos.seeAll') }}</button>
|
||||
</div>
|
||||
<article
|
||||
class="memory-card"
|
||||
:style="{ background: media.photos[1]?.gradient }"
|
||||
>
|
||||
<Heart :size="25" />
|
||||
<div>
|
||||
<strong>{{ phone.t('Apps.photos.onThisDay') }}</strong
|
||||
><span>{{ phone.t('Apps.photos.trip') }}</span>
|
||||
</div>
|
||||
</article>
|
||||
<div class="photos-section-title">
|
||||
<h2>{{ phone.t('Apps.photos.featuredPhotos') }}</h2>
|
||||
</div>
|
||||
<div class="featured-row">
|
||||
<article v-for="photo in media.photos.slice(0, 2)" :key="photo.id">
|
||||
<div :style="{ background: photo.gradient }" />
|
||||
<strong>{{ phone.t(photo.titleKey) }}</strong
|
||||
><span>{{ phone.t('Apps.photos.featuredDate') }}</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section v-else-if="tab === 'albums'" class="photos-scroll">
|
||||
<h1>{{ phone.t('Apps.photos.tabs.albums') }}</h1>
|
||||
<div class="album-cards">
|
||||
<article>
|
||||
<div
|
||||
class="photo-tile"
|
||||
:style="{ background: media.photos[0]?.gradient }"
|
||||
/>
|
||||
<strong>{{ phone.t('Apps.photos.recents') }}</strong
|
||||
><small
|
||||
>{{ media.photos.length }} {{ phone.t('Apps.photos.items') }}</small
|
||||
>
|
||||
</article>
|
||||
<article>
|
||||
<div class="photo-tile favorites" />
|
||||
<strong>{{ phone.t('Apps.photos.favorites') }}</strong
|
||||
><small>2 {{ phone.t('Apps.photos.items') }}</small>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section v-else class="photos-scroll">
|
||||
<h1>{{ phone.t('Apps.photos.tabs.search') }}</h1>
|
||||
<div class="app-search">
|
||||
<Search :size="17" /><input
|
||||
v-model="query"
|
||||
:placeholder="phone.t('Apps.photos.searchPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="photo-grid">
|
||||
<article
|
||||
v-for="photo in filtered"
|
||||
:key="photo.id"
|
||||
class="photo-tile"
|
||||
:style="{ background: photo.gradient }"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<nav class="reference-tabbar">
|
||||
<button
|
||||
v-for="item in tabs"
|
||||
:key="item.id"
|
||||
:class="{ active: tab === item.id }"
|
||||
type="button"
|
||||
@click="tab = item.id"
|
||||
>
|
||||
<component :is="item.icon" :size="22" /><span>{{
|
||||
phone.t(`Apps.photos.tabs.${item.id}`)
|
||||
}}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</main>
|
||||
</template>
|
||||
@@ -43,11 +43,14 @@ import {
|
||||
} from 'vue'
|
||||
|
||||
import { PHONE_FRAME_COLORS } from '@/config/appearance'
|
||||
import { PHONE_APPS } from '@/config/apps'
|
||||
import { isLaunchablePhoneApp, PHONE_APPS } from '@/config/apps'
|
||||
import { IFRUIT_AUTH_INPUT_COLORS } from '@/config/ifruit'
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
import { useAccountStore } from '@/stores/account'
|
||||
import type { PhoneAppDefinition, PhoneAppId } from '@/types/apps'
|
||||
import type {
|
||||
LaunchablePhoneAppDefinition,
|
||||
LaunchablePhoneAppId,
|
||||
} from '@/types/apps'
|
||||
import {
|
||||
filterMailAddressInput,
|
||||
MAIL_ADDRESS_INPUT_MAX_LENGTH,
|
||||
@@ -92,7 +95,7 @@ const phone = usePhoneStore()
|
||||
const account = useAccountStore()
|
||||
const query = ref('')
|
||||
const activeView = ref<SettingsView>('root')
|
||||
const selectedNotificationAppId = ref<PhoneAppId>('calculator')
|
||||
const selectedNotificationAppId = ref<LaunchablePhoneAppId>('calculator')
|
||||
const settingsPage = ref<ComponentPublicInstance | null>(null)
|
||||
const framePickerButton = ref<ComponentPublicInstance | null>(null)
|
||||
const framePickerOpened = ref(false)
|
||||
@@ -181,12 +184,15 @@ const visiblePreferenceRows = computed(() =>
|
||||
preferenceRows.filter((row) => matchesSearch(row.key)),
|
||||
)
|
||||
const notificationApps = computed(() =>
|
||||
[...PHONE_APPS].sort((left, right) => left.gridOrder - right.gridOrder),
|
||||
PHONE_APPS.filter(isLaunchablePhoneApp).sort(
|
||||
(left, right) => left.gridOrder - right.gridOrder,
|
||||
),
|
||||
)
|
||||
const selectedNotificationApp = computed(
|
||||
() =>
|
||||
PHONE_APPS.find((app) => app.id === selectedNotificationAppId.value) ??
|
||||
PHONE_APPS[0],
|
||||
notificationApps.value.find(
|
||||
(app) => app.id === selectedNotificationAppId.value,
|
||||
) ?? notificationApps.value[0],
|
||||
)
|
||||
const activeTitle = computed(() => {
|
||||
if (activeView.value === 'account') {
|
||||
@@ -219,7 +225,7 @@ function openView(view: SubmenuView): void {
|
||||
scrollPageToTop()
|
||||
}
|
||||
|
||||
function openNotificationApp(app: PhoneAppDefinition): void {
|
||||
function openNotificationApp(app: LaunchablePhoneAppDefinition): void {
|
||||
selectedNotificationAppId.value = app.id
|
||||
activeView.value = 'notification-detail'
|
||||
scrollPageToTop()
|
||||
|
||||
Reference in New Issue
Block a user