89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<template>
|
|
<div class="caramel-wrapper">
|
|
<div class="caramel-stage">
|
|
<div class="caramel-float-anchor">
|
|
<video
|
|
ref="videoEl"
|
|
class="caramel-video"
|
|
autoplay
|
|
loop
|
|
muted
|
|
playsinline
|
|
preload="auto"
|
|
>
|
|
<source src="~/assets/caramelldansen.webm" type="video/webm" />
|
|
</video>
|
|
|
|
<button
|
|
class="audio-toggle"
|
|
@click="toggleAudio"
|
|
:aria-label="muted ? 'Unmute video' : 'Mute video'"
|
|
>
|
|
{{ muted ? '🔇' : '🔊' }}
|
|
</button>
|
|
|
|
<div
|
|
class="uwu-floating"
|
|
:data-pos="position"
|
|
>
|
|
:3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed bottom-4 right-6 opacity-40 text-xs select-none">
|
|
gimme.pet
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
|
|
const videoEl = ref<HTMLVideoElement | null>(null)
|
|
const muted = ref(true)
|
|
|
|
function toggleAudio() {
|
|
if (!videoEl.value) return
|
|
|
|
muted.value = !muted.value
|
|
videoEl.value.muted = muted.value
|
|
|
|
if (!muted.value) {
|
|
videoEl.value.volume = 0.8
|
|
videoEl.value.play().catch(() => {})
|
|
}
|
|
}
|
|
|
|
const position = ref<'top' | 'bottom' | 'left' | 'right'>('top')
|
|
|
|
function updatePosition() {
|
|
const vw = window.innerWidth
|
|
const vh = window.innerHeight
|
|
|
|
// prioritize not colliding with short screens
|
|
if (vh < 520) {
|
|
position.value = 'bottom'
|
|
} else if (vw < 480) {
|
|
position.value = 'left'
|
|
} else if (vw > 1200) {
|
|
position.value = 'right'
|
|
} else {
|
|
position.value = 'top'
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (videoEl.value) {
|
|
videoEl.value.muted = true
|
|
}
|
|
|
|
updatePosition()
|
|
window.addEventListener('resize', updatePosition)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', updatePosition)
|
|
})
|
|
</script>
|