robonen
aa2938cb34
Genuinely type composable any usages (useStepper/useStorage/useForm/ createEventHook/useSorted/etc.) as proper generics/unknown; keep idiomatic any-function and overload-impl signatures with comments; skipped test -> .todo.
128 lines
3.7 KiB
Vue
128 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
|
import { useDocumentPiP } from './index';
|
|
|
|
const { isSupported, isOpen, error, open, close } = useDocumentPiP();
|
|
|
|
// A live element we move into (and back out of) the PiP window.
|
|
const player = ref<HTMLElement>();
|
|
const host = ref<HTMLElement>();
|
|
const elapsed = ref(0);
|
|
|
|
let timer: ReturnType<typeof setInterval> | undefined;
|
|
|
|
onMounted(() => {
|
|
timer = setInterval(() => {
|
|
elapsed.value += 1;
|
|
}, 1000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (timer)
|
|
clearInterval(timer);
|
|
});
|
|
|
|
async function popOut() {
|
|
const win = await open({ width: 320, height: 180 });
|
|
|
|
if (win && player.value) {
|
|
// Carry over the document styles so the moved DOM keeps its look.
|
|
for (const sheet of Array.from(document.styleSheets)) {
|
|
try {
|
|
const css = Array.from(sheet.cssRules).map(r => r.cssText).join('');
|
|
const style = win.document.createElement('style');
|
|
style.textContent = css;
|
|
win.document.head.append(style);
|
|
}
|
|
catch {
|
|
// Cross-origin stylesheet — skip.
|
|
}
|
|
}
|
|
win.document.body.style.margin = '0';
|
|
win.document.body.append(player.value);
|
|
}
|
|
}
|
|
|
|
// When the PiP window closes, pull the element back into the page.
|
|
watch(isOpen, (openNow) => {
|
|
if (!openNow && player.value && host.value)
|
|
host.value.append(player.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-stack max-w-sm">
|
|
<div
|
|
v-if="!isSupported"
|
|
class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400"
|
|
>
|
|
Document Picture-in-Picture is not supported in this browser.
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div
|
|
ref="host"
|
|
class="min-h-[7rem] rounded-xl border border-border bg-bg-inset p-1"
|
|
>
|
|
<div
|
|
ref="player"
|
|
class="flex h-full flex-col items-center justify-center gap-1 rounded-lg bg-bg-elevated p-6"
|
|
>
|
|
<span class="demo-label">Live timer</span>
|
|
<span class="demo-stat text-3xl">
|
|
{{ String(Math.floor(elapsed / 60)).padStart(2, '0') }}:{{ String(elapsed % 60).padStart(2, '0') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="demo-btn-primary flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
:disabled="isOpen"
|
|
@click="popOut"
|
|
>
|
|
Pop out
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
:disabled="!isOpen"
|
|
@click="close"
|
|
>
|
|
Close window
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3 text-sm">
|
|
<span class="text-fg-muted">isOpen</span>
|
|
<span
|
|
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
|
|
:class="isOpen
|
|
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
|
|
: 'border-border bg-bg text-fg-muted'"
|
|
>
|
|
<span
|
|
class="h-1.5 w-1.5 rounded-full"
|
|
:class="isOpen ? 'bg-emerald-500' : 'bg-fg-subtle'"
|
|
/>
|
|
{{ isOpen ? 'floating' : 'docked' }}
|
|
</span>
|
|
</div>
|
|
|
|
<p
|
|
v-if="error"
|
|
class="text-xs text-red-600 dark:text-red-400"
|
|
>
|
|
{{ String(error) }}
|
|
</p>
|
|
<p
|
|
v-else
|
|
class="text-xs text-fg-subtle"
|
|
>
|
|
"Pop out" moves the live timer into an always-on-top window. Closing it returns the element to the page.
|
|
</p>
|
|
</template>
|
|
</div>
|
|
</template>
|