Merge branch 'main' into feat/media-chrome-support

lib/types/global.d.ts

@@ -0,0 +1,17 @@
+interface DocumentPictureInPicture {
+	requestWindow: (options: { width: number; height: number }) => Promise<WindowWithPiP>
+	window: Window | null
+}
+
+interface WindowWithPiP extends Window {
+	document: Document
+	close: () => void
+	addEventListener: (type: string, listener: EventListener) => void
+	removeEventListener: (type: string, listener: EventListener) => void
+}
+
+interface Window {
+	documentPictureInPicture?: DocumentPictureInPicture
+}
+
+declare let documentPictureInPicture: DocumentPictureInPicture

lib/video-moq/control-buttons/fullscreen-button.ts

@@ -0,0 +1 @@
+export const FULLSCREEN_BUTTON = `<button id="fullscreen" class="flex h-4 w-0 items-center justify-center rounded bg-transparent p-4 text-white hover:bg-black-100 focus:bg-black-80 focus:outline-none">⛶</button>`

lib/video-moq/control-buttons/index.ts

@@ -0,0 +1,5 @@
+import { FULLSCREEN_BUTTON } from "./fullscreen-button"
+import { PICTURE_IN_PICTURE_BUTTON } from "./pip-button"
+import { VOLUME_CONTROL } from "./volume-control"
+
+export { FULLSCREEN_BUTTON, PICTURE_IN_PICTURE_BUTTON, VOLUME_CONTROL }

lib/video-moq/control-buttons/pip-button.ts

@@ -0,0 +1,9 @@
+import { ENTER_PIP_SVG } from "../icons"
+
+export const PICTURE_IN_PICTURE_BUTTON = window.documentPictureInPicture
+	? `
+		<button id="picture-in-picture" aria-label="Enter picture-in-picture" class="relative flex h-4 w-0 items-center justify-center rounded bg-transparent p-4 text-white hover:bg-black-80 focus:bg-black-80 focus:outline-none">
+			${ENTER_PIP_SVG}
+		</button>
+	`
+	: ""

lib/video-moq/control-buttons/volume-control.ts

@@ -0,0 +1,15 @@
+export const VOLUME_CONTROL = `
+	<div class="flex items-center gap-2">
+		<button id="volume" aria-label="Unmute" class="flex h-4 w-0 items-center justify-center rounded bg-transparent p-4 text-white hover:bg-black-80 focus:bg-black-80 focus:outline-none">
+			🔇
+		</button>
+		<input
+			id="volume-range"
+			type="range"
+			min="0"
+			max="1"
+			step="0.1"
+			class="h-1 w-24 cursor-pointer"
+		</input>
+	</div>
+`

lib/video-moq/icons/enter-pip.ts

@@ -0,0 +1,8 @@
+export const ENTER_PIP_SVG = `<svg xmlns="http://www.w3.org/2000/svg" class="absolute h-4" viewBox="0 0 24 24">
+<g>
+	<path
+		fill="#fff"
+		d="M21 3a1 1 0 0 1 1 1v7h-2V5H4v14h6v2H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zm0 10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h8zm-9.5-6L9.457 9.043l2.25 2.25-1.414 1.414-2.25-2.25L6 12.5V7h5.5z"
+	/>
+</g>
+</svg>`

lib/video-moq/icons/exit-pip.ts

@@ -0,0 +1,8 @@
+export const EXIT_PIP_SVG = `<svg xmlns="http://www.w3.org/2000/svg" class="absolute h-4" viewBox="0 0 24 24">
+<g>
+	<path
+		fill="#fff"
+		d="M21 3a1 1 0 0 1 1 1v7h-2V5H4v14h6v2H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zm0 10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h8zm-1 2h-6v4h6v-4zM6.707 6.293l2.25 2.25L11 6.5V12H5.5l2.043-2.043-2.25-2.25 1.414-1.414z"
+	/>
+</g>
+</svg>`

lib/video-moq/icons/index.ts

@@ -0,0 +1,6 @@
+import { PLAY_SVG } from "./play-svg"
+import { PAUSE_SVG } from "./pause-svg"
+import { ENTER_PIP_SVG } from "./enter-pip"
+import { EXIT_PIP_SVG } from "./exit-pip"
+
+export { PLAY_SVG, PAUSE_SVG, ENTER_PIP_SVG, EXIT_PIP_SVG }

lib/video-moq/icons/pause-svg.ts

@@ -0,0 +1,3 @@
+export const PAUSE_SVG = /*html*/ `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" class="h-6 w-6">
+					<path d="M6 5h4v14H6zM14 5h4v14h-4z" />
+				</svg>`

lib/video-moq/icons/play-svg.ts

@@ -0,0 +1,3 @@
+export const PLAY_SVG = /*html*/ `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" class="h-4 w-4">
+					<path d="M3 22v-20l18 10-18 10z" />
+				</svg>`