ts-video-player 0.1.0

package/src/features/fullscreen.ts

@@ -0,0 +1,44 @@
+/**
+ * Fullscreen feature — fullscreen state + availability detection.
+ *
+ * @module features/fullscreen
+ */
+
+import type { Feature, FeatureContext } from './types'
+import { detectFullscreenAvailability } from '../core/features'
+import { onFullscreenChange } from '../core/events'
+
+export const fullscreen: Feature = {
+  name: 'fullscreen',
+  stateKeys: ['fullscreen', 'fullscreenAvailability', 'canFullscreen'],
+
+  setup(ctx: FeatureContext) {
+    const { store, container, getMediaElement } = ctx
+
+    const update = () => {
+      const video = getMediaElement() as HTMLVideoElement | null
+      const availability = detectFullscreenAvailability(container, video)
+      store.batch({
+        fullscreenAvailability: availability,
+        canFullscreen: availability === 'available',
+      })
+    }
+
+    update()
+
+    const cleanup = onFullscreenChange((fs) => {
+      store.set('fullscreen', fs)
+    })
+
+    // Re-detect after metadata loaded
+    const onMeta = () => update()
+    const media = getMediaElement()
+    media?.addEventListener('loadedmetadata', onMeta)
+
+    return () => {
+      cleanup()
+      const m = getMediaElement()
+      m?.removeEventListener('loadedmetadata', onMeta)
+    }
+  },
+}

package/src/features/gestures.ts

@@ -0,0 +1,44 @@
+/**
+ * Gestures feature — touch gesture detection.
+ *
+ * @module features/gestures
+ */
+
+import type { Feature, FeatureContext } from './types'
+import { createGestureDetector } from '../core/events'
+
+export const gestures: Feature = {
+  name: 'gestures',
+
+  setup(ctx: FeatureContext) {
+    const { container, options } = ctx
+
+    if (options.gestures === false) return
+
+    const cleanup = createGestureDetector(container, {
+      onDoubleTap: (x) => {
+        // Double-tap left third: seek back, right third: seek forward
+        const rect = container.getBoundingClientRect()
+        const third = rect.width / 3
+        const relX = x - rect.left
+        const media = ctx.getMediaElement()
+        if (!media) return
+        if (relX < third) {
+          media.currentTime = Math.max(0, media.currentTime - 10)
+        } else if (relX > third * 2) {
+          media.currentTime = Math.min(media.duration, media.currentTime + 10)
+        }
+      },
+      onSwipeUp: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.volume = Math.min(1, media.volume + 0.1)
+      },
+      onSwipeDown: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.volume = Math.max(0, media.volume - 0.1)
+      },
+    })
+
+    return cleanup
+  },
+}

package/src/features/index.ts

@@ -0,0 +1,44 @@
+/**
+ * ts-video-player Composable Features
+ *
+ * Tree-shakeable feature composition system.
+ *
+ * @module features
+ */
+
+// Feature implementations
+export { playback } from './playback'
+export { volume } from './volume'
+export { fullscreen } from './fullscreen'
+export { pip } from './pip'
+export { captions } from './captions'
+export { quality } from './quality'
+export { keyboard } from './keyboard'
+export { gestures } from './gestures'
+
+// Types
+export type { Feature, FeatureContext } from './types'
+
+// Factory
+export { createComposablePlayer } from './create-player'
+export type { ComposablePlayer, ComposablePlayerOptions } from './create-player'
+
+// Feature bundles
+import { playback } from './playback'
+import { volume } from './volume'
+import { fullscreen } from './fullscreen'
+import { pip } from './pip'
+import { captions } from './captions'
+import { quality } from './quality'
+import { keyboard } from './keyboard'
+import { gestures } from './gestures'
+import type { Feature } from './types'
+
+/** All features for video playback */
+export const videoFeatures: Feature[] = [playback, volume, fullscreen, pip, captions, quality, keyboard, gestures]
+
+/** Features for audio-only playback */
+export const audioFeatures: Feature[] = [playback, volume, keyboard]
+
+/** Minimal features (playback only) */
+export const minimalFeatures: Feature[] = [playback]

package/src/features/keyboard.ts

@@ -0,0 +1,89 @@
+/**
+ * Keyboard feature — keyboard shortcut handling.
+ *
+ * @module features/keyboard
+ */
+
+import type { Feature, FeatureContext } from './types'
+import { createKeyboardHandler, type KeyboardActions } from '../core/events'
+
+export const keyboard: Feature = {
+  name: 'keyboard',
+
+  setup(ctx: FeatureContext) {
+    const { container, options } = ctx
+
+    if (options.keyboard === false) return
+
+    const actions: KeyboardActions = {
+      togglePlay: () => {
+        const media = ctx.getMediaElement()
+        if (!media) return
+        if (media.paused) media.play()
+        else media.pause()
+      },
+      toggleMute: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.muted = !media.muted
+      },
+      toggleFullscreen: () => {
+        // Handled at player level
+      },
+      togglePiP: () => {
+        // Handled at player level
+      },
+      toggleCaptions: () => {
+        // Handled at player level
+      },
+      seekBackward: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.currentTime = Math.max(0, media.currentTime - 5)
+      },
+      seekForward: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.currentTime = Math.min(media.duration, media.currentTime + 5)
+      },
+      volumeUp: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.volume = Math.min(1, media.volume + 0.1)
+      },
+      volumeDown: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.volume = Math.max(0, media.volume - 0.1)
+      },
+      speedUp: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.playbackRate = Math.min(4, media.playbackRate + 0.25)
+      },
+      speedDown: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.playbackRate = Math.max(0.25, media.playbackRate - 0.25)
+      },
+      seekStart: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.currentTime = 0
+      },
+      seekEnd: () => {
+        const media = ctx.getMediaElement()
+        if (media) media.currentTime = media.duration
+      },
+      seekPercent: (percent) => {
+        const media = ctx.getMediaElement()
+        if (media) media.currentTime = (percent / 100) * media.duration
+      },
+    }
+
+    const config = typeof options.keyboard === 'object' ? options.keyboard as Record<string, any> : {}
+    const handler = createKeyboardHandler(actions, {
+      seekStep: config.seekStep,
+      volumeStep: config.volumeStep,
+    })
+
+    const target = config.global ? document : container
+    target.addEventListener('keydown', handler as EventListener)
+
+    return () => {
+      target.removeEventListener('keydown', handler as EventListener)
+    }
+  },
+}

package/src/features/pip.ts

@@ -0,0 +1,47 @@
+/**
+ * Picture-in-Picture feature — PiP state + availability detection.
+ *
+ * @module features/pip
+ */
+
+import type { Feature, FeatureContext } from './types'
+import { detectPipAvailability } from '../core/features'
+import { onPiPChange } from '../core/events'
+
+export const pip: Feature = {
+  name: 'pip',
+  stateKeys: ['pictureInPicture', 'pipAvailability', 'canPictureInPicture'],
+
+  setup(ctx: FeatureContext) {
+    const { store, getMediaElement } = ctx
+
+    const update = () => {
+      const video = getMediaElement() as HTMLVideoElement | null
+      const availability = detectPipAvailability(video)
+      store.batch({
+        pipAvailability: availability,
+        canPictureInPicture: availability === 'available',
+      })
+    }
+
+    update()
+
+    let cleanupPiP: (() => void) | null = null
+    const media = getMediaElement()
+    if (media instanceof HTMLVideoElement) {
+      cleanupPiP = onPiPChange(media, (isPiP) => {
+        store.set('pictureInPicture', isPiP)
+      })
+    }
+
+    // Re-detect after metadata loaded
+    const onMeta = () => update()
+    media?.addEventListener('loadedmetadata', onMeta)
+
+    return () => {
+      cleanupPiP?.()
+      const m = getMediaElement()
+      m?.removeEventListener('loadedmetadata', onMeta)
+    }
+  },
+}

package/src/features/playback.ts

@@ -0,0 +1,68 @@
+/**
+ * Playback feature — core playback state management.
+ *
+ * @module features/playback
+ */
+
+import type { Feature, FeatureContext } from './types'
+
+export const playback: Feature = {
+  name: 'playback',
+  stateKeys: ['paused', 'playing', 'ended', 'seeking', 'waiting', 'currentTime', 'duration', 'playbackRate', 'loop', 'autoplay', 'playbackState'],
+
+  setup(ctx: FeatureContext) {
+    const { store, getMediaElement } = ctx
+
+    const onPlay = () => store.batch({ paused: false, ended: false })
+    const onPause = () => store.set('paused', true)
+    const onPlaying = () => store.batch({ playing: true, waiting: false, playbackState: 'playing' })
+    const onWaiting = () => store.batch({ waiting: true, playbackState: 'buffering' })
+    const onSeeking = () => store.set('seeking', true)
+    const onSeeked = () => store.set('seeking', false)
+    const onEnded = () => store.batch({ ended: true, playing: false, playbackState: 'ended' })
+    const onTimeUpdate = () => {
+      const media = getMediaElement()
+      if (media) store.set('currentTime', media.currentTime)
+    }
+    const onDurationChange = () => {
+      const media = getMediaElement()
+      if (media) store.set('duration', media.duration)
+    }
+    const onRateChange = () => {
+      const media = getMediaElement()
+      if (media) store.set('playbackRate', media.playbackRate)
+    }
+
+    const bind = () => {
+      const media = getMediaElement()
+      if (!media) return
+      media.addEventListener('play', onPlay)
+      media.addEventListener('pause', onPause)
+      media.addEventListener('playing', onPlaying)
+      media.addEventListener('waiting', onWaiting)
+      media.addEventListener('seeking', onSeeking)
+      media.addEventListener('seeked', onSeeked)
+      media.addEventListener('ended', onEnded)
+      media.addEventListener('timeupdate', onTimeUpdate)
+      media.addEventListener('durationchange', onDurationChange)
+      media.addEventListener('ratechange', onRateChange)
+    }
+
+    bind()
+
+    return () => {
+      const media = getMediaElement()
+      if (!media) return
+      media.removeEventListener('play', onPlay)
+      media.removeEventListener('pause', onPause)
+      media.removeEventListener('playing', onPlaying)
+      media.removeEventListener('waiting', onWaiting)
+      media.removeEventListener('seeking', onSeeking)
+      media.removeEventListener('seeked', onSeeked)
+      media.removeEventListener('ended', onEnded)
+      media.removeEventListener('timeupdate', onTimeUpdate)
+      media.removeEventListener('durationchange', onDurationChange)
+      media.removeEventListener('ratechange', onRateChange)
+    }
+  },
+}

package/src/features/quality.ts

@@ -0,0 +1,19 @@
+/**
+ * Quality feature — quality selection state.
+ *
+ * @module features/quality
+ */
+
+import type { Feature, FeatureContext } from './types'
+
+export const quality: Feature = {
+  name: 'quality',
+  stateKeys: ['qualities', 'autoQuality'],
+
+  setup(_ctx: FeatureContext) {
+    // Quality management is provider-specific (HLS/DASH).
+    // This feature exists as a placeholder for the state keys
+    // and to allow tree-shaking when quality UI is not needed.
+    return undefined
+  },
+}

package/src/features/types.ts

@@ -0,0 +1,28 @@
+/**
+ * ts-video-player Feature Types
+ *
+ * @module features/types
+ */
+
+import type { PlayerState } from '../types'
+import type { StateStore } from '../core/state'
+
+export interface FeatureContext {
+  /** The player container element */
+  container: HTMLElement
+  /** The state store */
+  store: StateStore
+  /** Options passed to the player */
+  options: Record<string, unknown>
+  /** Get the current media element (may be null before load) */
+  getMediaElement: () => HTMLMediaElement | null
+}
+
+export interface Feature {
+  /** Unique feature name */
+  name: string
+  /** State keys this feature manages */
+  stateKeys?: (keyof PlayerState)[]
+  /** Initialize the feature. Returns a cleanup function. */
+  setup(ctx: FeatureContext): (() => void) | void
+}

package/src/features/volume.ts

@@ -0,0 +1,46 @@
+/**
+ * Volume feature — volume state + availability detection.
+ *
+ * @module features/volume
+ */
+
+import type { Feature, FeatureContext } from './types'
+import { detectVolumeAvailability, probeVolumeAvailability } from '../core/features'
+
+export const volume: Feature = {
+  name: 'volume',
+  stateKeys: ['volume', 'muted', 'volumeAvailability'],
+
+  setup(ctx: FeatureContext) {
+    const { store, getMediaElement } = ctx
+
+    // Initial sync detection
+    const media = getMediaElement()
+    store.set('volumeAvailability', detectVolumeAvailability(media))
+
+    const onVolumeChange = () => {
+      const m = getMediaElement()
+      if (m) store.batch({ volume: m.volume, muted: m.muted })
+    }
+
+    const onLoadedData = () => {
+      const m = getMediaElement()
+      if (!m) return
+      probeVolumeAvailability(m).then((availability) => {
+        store.set('volumeAvailability', availability)
+      })
+    }
+
+    if (media) {
+      media.addEventListener('volumechange', onVolumeChange)
+      media.addEventListener('loadeddata', onLoadedData)
+    }
+
+    return () => {
+      const m = getMediaElement()
+      if (!m) return
+      m.removeEventListener('volumechange', onVolumeChange)
+      m.removeEventListener('loadeddata', onLoadedData)
+    }
+  },
+}