feat: introduce the compact vehicle HUD
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import IconGlyph, { type IconGlyphName } from './IconGlyph.vue';
|
||||
import type { AudioUiState } from '@/audio/types';
|
||||
import type { MotionPolicy, QualityTier } from '@/journey/motion-policy';
|
||||
|
||||
@@ -27,13 +28,31 @@ const emit = defineEmits<{
|
||||
audioVolumeChange: [volume: number];
|
||||
}>();
|
||||
|
||||
const controlRoot = ref<HTMLElement | null>(null);
|
||||
const settingsButton = ref<HTMLButtonElement | null>(null);
|
||||
const volumeButton = ref<HTMLButtonElement | null>(null);
|
||||
const settingsOpen = ref(false);
|
||||
const volumeOpen = ref(false);
|
||||
|
||||
const action = computed(() => {
|
||||
if (props.policy.reason === 'visitor-pause') return { label: 'Resume motion', event: 'resume' as const };
|
||||
if (props.policy.reason === 'saved-static') return { label: 'Enable motion', event: 'enable' as const };
|
||||
if (props.policy.reason === 'full') return { label: 'Pause motion', event: 'pause' as const };
|
||||
if (props.policy.reason === 'visitor-pause') {
|
||||
return { label: 'Resume motion', event: 'resume' as const, icon: 'play' as IconGlyphName };
|
||||
}
|
||||
if (props.policy.reason === 'saved-static') {
|
||||
return { label: 'Enable motion', event: 'enable' as const, icon: 'play' as IconGlyphName };
|
||||
}
|
||||
if (props.policy.reason === 'full') {
|
||||
return { label: 'Pause motion', event: 'pause' as const, icon: 'pause' as IconGlyphName };
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
const isAudioActive = computed(() => (
|
||||
props.audioState.kind === 'running' || props.audioState.kind === 'suspended'
|
||||
));
|
||||
const muteLabel = computed(() => props.audioMuted ? 'Unmute sound' : 'Mute sound');
|
||||
const muteIcon = computed<IconGlyphName>(() => props.audioMuted ? 'sound-muted' : 'sound');
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (props.policy.reason === 'system-reduce') return 'Motion: static — reduced motion requested';
|
||||
if (props.policy.reason === 'data-saver') return 'Motion: static — data saver is active';
|
||||
@@ -41,7 +60,7 @@ const statusText = computed(() => {
|
||||
if (props.policy.reason === 'saved-static') return 'Motion: static';
|
||||
if (props.sceneStatus === 'failed' || props.sceneStatus === 'static') return 'Visuals unavailable';
|
||||
if (props.sceneStatus === 'loading' || props.sceneStatus === 'idle') return 'Motion: preparing';
|
||||
return 'Motion: active';
|
||||
return null;
|
||||
});
|
||||
|
||||
const runAction = (): void => {
|
||||
@@ -61,56 +80,186 @@ const changeQuality = (event: Event): void => {
|
||||
const changeVolume = (event: Event): void => {
|
||||
emit('audioVolumeChange', Number((event.currentTarget as HTMLInputElement).value));
|
||||
};
|
||||
|
||||
const toggleSettings = (): void => {
|
||||
settingsOpen.value = !settingsOpen.value;
|
||||
volumeOpen.value = false;
|
||||
};
|
||||
|
||||
const toggleVolume = (): void => {
|
||||
volumeOpen.value = !volumeOpen.value;
|
||||
settingsOpen.value = false;
|
||||
};
|
||||
|
||||
const closePanels = (restoreFocus = false): void => {
|
||||
const focusTarget = settingsOpen.value ? settingsButton.value : volumeButton.value;
|
||||
settingsOpen.value = false;
|
||||
volumeOpen.value = false;
|
||||
if (restoreFocus) void nextTick(() => focusTarget?.focus());
|
||||
};
|
||||
|
||||
const onDocumentPointerDown = (event: Event): void => {
|
||||
if (controlRoot.value?.contains(event.target as Node)) return;
|
||||
closePanels();
|
||||
};
|
||||
|
||||
const onDocumentKeyDown = (event: KeyboardEvent): void => {
|
||||
if (event.key !== 'Escape' || (!settingsOpen.value && !volumeOpen.value)) return;
|
||||
event.preventDefault();
|
||||
closePanels(true);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.audioState.kind,
|
||||
() => closePanels(),
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('pointerdown', onDocumentPointerDown);
|
||||
document.addEventListener('keydown', onDocumentKeyDown);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('pointerdown', onDocumentPointerDown);
|
||||
document.removeEventListener('keydown', onDocumentKeyDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="drive-controls">
|
||||
<button v-if="action" type="button" @click="runAction">{{ action.label }}</button>
|
||||
<div v-if="audioState.kind === 'idle'" class="drive-controls__audio-start">
|
||||
<button type="button" @click="emit('audioStart')">START THE DRIVE</button>
|
||||
<span>Enables the interactive soundtrack.</span>
|
||||
</div>
|
||||
<div v-else-if="audioState.kind === 'starting'" class="drive-controls__audio-start" aria-live="polite">
|
||||
<button type="button" disabled>Starting drive…</button>
|
||||
<span>Preparing the interactive soundtrack.</span>
|
||||
</div>
|
||||
<div
|
||||
ref="controlRoot"
|
||||
class="drive-controls"
|
||||
:data-drive-state="audioState.kind"
|
||||
>
|
||||
<button
|
||||
v-if="audioState.kind === 'idle'"
|
||||
class="drive-start"
|
||||
type="button"
|
||||
aria-label="Start the drive"
|
||||
@click="emit('audioStart')"
|
||||
>
|
||||
<IconGlyph name="play" />
|
||||
<span>START THE DRIVE</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-else-if="audioState.kind === 'starting'"
|
||||
class="drive-start"
|
||||
type="button"
|
||||
disabled
|
||||
aria-label="Starting drive"
|
||||
aria-live="polite"
|
||||
>
|
||||
<IconGlyph name="play" />
|
||||
<span>STARTING…</span>
|
||||
</button>
|
||||
|
||||
<p v-else-if="audioState.kind === 'failed'" class="drive-controls__audio-status" role="status">
|
||||
Audio unavailable. Continue without sound.
|
||||
</p>
|
||||
<div
|
||||
v-else-if="audioState.kind === 'running' || audioState.kind === 'suspended'"
|
||||
class="drive-controls__audio"
|
||||
>
|
||||
|
||||
<div v-else-if="isAudioActive" class="drive-controls__dock" role="group" aria-label="Drive controls">
|
||||
<button
|
||||
v-if="audioState.kind === 'suspended' && audioState.resumeRequiresGesture"
|
||||
class="drive-control-button"
|
||||
type="button"
|
||||
aria-label="Resume sound"
|
||||
title="Resume sound"
|
||||
data-tooltip="Resume sound"
|
||||
@click="emit('audioResume')"
|
||||
>Resume sound</button>
|
||||
<label>
|
||||
<span>Sound volume</span>
|
||||
<input
|
||||
aria-label="Sound volume"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
:value="audioVolume"
|
||||
@input="changeVolume"
|
||||
>
|
||||
</label>
|
||||
<button type="button" @click="emit('audioMuteToggle')">
|
||||
{{ audioMuted ? 'Unmute sound' : 'Mute sound' }}
|
||||
>
|
||||
<IconGlyph name="play" />
|
||||
</button>
|
||||
<button
|
||||
class="drive-control-button"
|
||||
type="button"
|
||||
:aria-label="muteLabel"
|
||||
:title="muteLabel"
|
||||
:data-tooltip="muteLabel"
|
||||
@click="emit('audioMuteToggle')"
|
||||
>
|
||||
<IconGlyph :name="muteIcon" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
ref="volumeButton"
|
||||
class="drive-control-button"
|
||||
type="button"
|
||||
aria-label="Sound volume"
|
||||
title="Sound volume"
|
||||
data-tooltip="Sound volume"
|
||||
aria-controls="drive-volume-panel"
|
||||
:aria-expanded="volumeOpen"
|
||||
@click="toggleVolume"
|
||||
>
|
||||
<IconGlyph name="volume" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="action"
|
||||
class="drive-control-button"
|
||||
type="button"
|
||||
:aria-label="action.label"
|
||||
:title="action.label"
|
||||
:data-tooltip="action.label"
|
||||
@click="runAction"
|
||||
>
|
||||
<IconGlyph :name="action.icon" />
|
||||
</button>
|
||||
</div>
|
||||
<label>
|
||||
<span>Quality</span>
|
||||
<select :value="maximumQuality" aria-label="Quality control" @change="changeQuality">
|
||||
|
||||
<button
|
||||
v-if="audioState.kind !== 'starting'"
|
||||
ref="settingsButton"
|
||||
class="drive-control-button drive-controls__settings-trigger"
|
||||
type="button"
|
||||
aria-label="Drive settings"
|
||||
title="Drive settings"
|
||||
data-tooltip="Drive settings"
|
||||
aria-controls="drive-settings-panel"
|
||||
:aria-expanded="settingsOpen"
|
||||
@click="toggleSettings"
|
||||
>
|
||||
<IconGlyph name="settings" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="volumeOpen && isAudioActive"
|
||||
id="drive-volume-panel"
|
||||
class="drive-popover drive-popover--volume"
|
||||
role="dialog"
|
||||
aria-label="Sound volume"
|
||||
>
|
||||
<label for="drive-volume">SOUND</label>
|
||||
<input
|
||||
id="drive-volume"
|
||||
aria-label="Sound volume level"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
:value="audioVolume"
|
||||
@input="changeVolume"
|
||||
>
|
||||
<output for="drive-volume">{{ Math.round(audioVolume * 100) }}%</output>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="settingsOpen"
|
||||
id="drive-settings-panel"
|
||||
class="drive-popover drive-popover--settings"
|
||||
role="dialog"
|
||||
aria-label="Drive settings"
|
||||
>
|
||||
<strong>DRIVE SETTINGS</strong>
|
||||
<label for="drive-quality">QUALITY</label>
|
||||
<select id="drive-quality" :value="maximumQuality" aria-label="Quality control" @change="changeQuality">
|
||||
<option value="high">High</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="low">Low</option>
|
||||
<option value="static">Static</option>
|
||||
</select>
|
||||
</label>
|
||||
<p class="drive-controls__status" role="status">{{ statusText }}</p>
|
||||
<p v-if="statusText" class="drive-controls__status" role="status">{{ statusText }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user