Pihkaal
a12cc61dd3
All checks were successful
Build and Push Docker Image / build (push) Successful in 2m55s
81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { useFullscreen } from "@vueuse/core";
|
|
|
|
const app = useAppStore();
|
|
|
|
const showFullscreenBtn = ref(true);
|
|
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen();
|
|
|
|
const open = ref(false);
|
|
|
|
onMounted(() => {
|
|
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
|
|
showFullscreenBtn.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fixed bottom-4 right-4 flex flex-row items-center">
|
|
<UPopover
|
|
v-model:open="open"
|
|
:content="{ side: 'top', align: 'center' }"
|
|
:ui="{ content: 'bg-transparent border-0 ring-0 shadow-none' }"
|
|
>
|
|
<template #default>
|
|
<UButton
|
|
:icon="
|
|
app.settings.volume === 0
|
|
? 'i-heroicons-speaker-x-mark'
|
|
: 'i-heroicons-speaker-wave'
|
|
"
|
|
color="neutral"
|
|
variant="link"
|
|
size="xl"
|
|
:class="[
|
|
'transition-opacity',
|
|
open
|
|
? 'opacity-100 text-highlighted'
|
|
: 'opacity-50 hover:opacity-100',
|
|
]"
|
|
/>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="flex items-center justify-center h-24">
|
|
<USlider
|
|
:model-value="app.settings.volume * 100"
|
|
:min="0"
|
|
:max="100"
|
|
:step="2"
|
|
orientation="vertical"
|
|
color="neutral"
|
|
@keydown.prevent
|
|
@mouseup="($event.target as HTMLElement).blur()"
|
|
@update:model-value="
|
|
(v) => {
|
|
app.settings.volume = (v ?? 100) / 100;
|
|
app.save();
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</UPopover>
|
|
|
|
<UButton
|
|
v-if="showFullscreenBtn"
|
|
:icon="
|
|
isFullscreen
|
|
? 'i-heroicons-arrows-pointing-in'
|
|
: 'i-heroicons-arrows-pointing-out'
|
|
"
|
|
color="neutral"
|
|
variant="link"
|
|
size="xl"
|
|
class="opacity-50 hover:opacity-100 transition-opacity"
|
|
@click="toggleFullscreen"
|
|
/>
|
|
</div>
|
|
</template>
|