Archipelago — open-source initial import

2026-08-12 10:55:50 +00:00
commit b67e1527a2
2068 changed files with 472303 additions and 0 deletions
@@ -0,0 +1,75 @@
+import { ref, readonly } from 'vue'
+
+/** Singleton picture-in-picture session.
+ *
+ *  A video handed to `adopt()` is moved into a body-level custodial host so
+ *  that it survives the unmount of whatever view rendered it — a Teleport
+ *  and a KeepAlive'd view both move their subtree on deactivation, and a
+ *  moved element is a removed element as far as the picture-in-picture spec
+ *  is concerned. Owning the element at the document level sidesteps that
+ *  entirely: nothing about where the video *used* to live can touch it once
+ *  it has been adopted.
+ *
+ *  Module singleton, no Vue lifecycle hooks — a lifecycle hook in a bare
+ *  composable silently no-ops outside a component's setup(). */
+
+const active = ref(false)
+const element = ref<HTMLVideoElement | null>(null)
+
+let host: HTMLDivElement | null = null
+let leaveHandler: (() => void) | null = null
+
+function ensureHost(): HTMLDivElement {
+  if (host) return host
+  const el = document.createElement('div')
+  el.setAttribute('data-pip-session-host', '')
+  el.setAttribute('aria-hidden', 'true')
+  el.style.position = 'fixed'
+  el.style.top = '0'
+  el.style.left = '0'
+  el.style.width = '1px'
+  el.style.height = '1px'
+  el.style.overflow = 'hidden'
+  el.style.opacity = '0'
+  el.style.pointerEvents = 'none'
+  el.style.zIndex = '-1'
+  document.body.appendChild(el)
+  host = el
+  return el
+}
+
+function release(): void {
+  const video = element.value
+  if (video) {
+    if (leaveHandler) video.removeEventListener('leavepictureinpicture', leaveHandler)
+    video.pause()
+    video.removeAttribute('src')
+    video.src = ''
+    video.load()
+    if (video.parentNode) video.parentNode.removeChild(video)
+  }
+  leaveHandler = null
+  element.value = null
+  active.value = false
+}
+
+function adopt(video: HTMLVideoElement): void {
+  if (active.value && element.value && element.value !== video) {
+    release()
+  }
+  const hostEl = ensureHost()
+  hostEl.appendChild(video)
+  element.value = video
+  active.value = true
+  leaveHandler = () => release()
+  video.addEventListener('leavepictureinpicture', leaveHandler)
+}
+
+export function usePipSession() {
+  return {
+    active: readonly(active),
+    element: readonly(element),
+    adopt,
+    release,
+  }
+}