ts-video-player 0.1.0

package/src/core/media-session.ts

@@ -0,0 +1,137 @@
+/**
+ * ts-video-player Media Session API Integration
+ *
+ * Provides lock screen / notification controls via navigator.mediaSession.
+ *
+ * @module core/media-session
+ */
+
+import type { StateStore } from './state'
+
+export interface MediaSessionOptions {
+  /** Title to display */
+  title?: string
+  /** Artist name */
+  artist?: string
+  /** Album name */
+  album?: string
+  /** Artwork images for lock screen */
+  artwork?: MediaImage[]
+}
+
+/**
+ * Check if Media Session API is available
+ */
+export function isMediaSessionSupported(): boolean {
+  return typeof navigator !== 'undefined' && 'mediaSession' in navigator
+}
+
+/**
+ * Create a Media Session controller that syncs player state to the browser's
+ * media session (lock screen controls, notification area, etc.)
+ */
+export function createMediaSession(
+  store: StateStore,
+  actions: {
+    play: () => void
+    pause: () => void
+    seekTo: (time: number) => void
+    seekBy: (offset: number) => void
+    stop: () => void
+  },
+  options?: MediaSessionOptions,
+): () => void {
+  if (!isMediaSessionSupported()) return () => {}
+
+  const session = navigator.mediaSession
+
+  // Set metadata
+  if (options) {
+    updateMetadata(options)
+  }
+
+  // Action handlers
+  const handlers: Array<[MediaSessionAction, MediaSessionActionHandler]> = [
+    ['play', () => actions.play()],
+    ['pause', () => actions.pause()],
+    ['stop', () => actions.stop()],
+    ['seekbackward', (details) => {
+      const offset = (details as MediaSessionActionDetails & { seekOffset?: number }).seekOffset || -10
+      actions.seekBy(offset)
+    }],
+    ['seekforward', (details) => {
+      const offset = (details as MediaSessionActionDetails & { seekOffset?: number }).seekOffset || 10
+      actions.seekBy(offset)
+    }],
+    ['seekto', (details) => {
+      const seekTime = (details as MediaSessionActionDetails & { seekTime?: number }).seekTime
+      if (seekTime !== undefined) actions.seekTo(seekTime)
+    }],
+  ]
+
+  for (const [action, handler] of handlers) {
+    try {
+      session.setActionHandler(action, handler)
+    } catch {
+      // Some actions may not be supported on all platforms
+    }
+  }
+
+  // Sync playback state
+  const unsubPaused = store.subscribe('paused', (state) => {
+    session.playbackState = state.paused ? 'paused' : 'playing'
+  })
+
+  // Sync position state
+  let positionTimer: ReturnType<typeof setInterval> | null = null
+
+  const updatePosition = () => {
+    const state = store.getState()
+    if (!isFinite(state.duration) || state.duration <= 0) return
+    try {
+      session.setPositionState({
+        duration: state.duration,
+        playbackRate: state.playbackRate,
+        position: Math.min(state.currentTime, state.duration),
+      })
+    } catch {
+      // Position state may fail if values are invalid
+    }
+  }
+
+  const unsubPlaying = store.subscribe('playing', (state) => {
+    if (state.playing) {
+      updatePosition()
+      if (!positionTimer) {
+        positionTimer = setInterval(updatePosition, 1000)
+      }
+    } else {
+      if (positionTimer) { clearInterval(positionTimer); positionTimer = null }
+      updatePosition()
+    }
+  })
+
+  return () => {
+    if (positionTimer) clearInterval(positionTimer)
+    unsubPaused()
+    unsubPlaying()
+
+    // Clear action handlers
+    for (const [action] of handlers) {
+      try { session.setActionHandler(action, null) } catch { /* ignore */ }
+    }
+  }
+}
+
+/**
+ * Update media session metadata
+ */
+export function updateMetadata(options: MediaSessionOptions): void {
+  if (!isMediaSessionSupported()) return
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: options.title || '',
+    artist: options.artist || '',
+    album: options.album || '',
+    artwork: options.artwork || [],
+  })
+}

package/src/core/orientation.ts

@@ -0,0 +1,57 @@
+/**
+ * ts-video-player Orientation Lock
+ *
+ * Auto-lock screen orientation to landscape when entering fullscreen on mobile.
+ *
+ * @module core/orientation
+ */
+
+type OrientationType = 'landscape' | 'portrait' | 'any'
+
+interface ScreenOrientationAPI {
+  lock(orientation: string): Promise<void>
+  unlock(): void
+}
+
+/**
+ * Check if Screen Orientation API is available
+ */
+export function isOrientationLockSupported(): boolean {
+  return (
+    typeof screen !== 'undefined' &&
+    'orientation' in screen &&
+    typeof (screen.orientation as unknown as ScreenOrientationAPI).lock === 'function'
+  )
+}
+
+/**
+ * Lock the screen orientation (best-effort, silently fails if unsupported)
+ */
+export function lockOrientation(type: OrientationType): void {
+  if (!isOrientationLockSupported()) return
+
+  const orientationMap: Record<OrientationType, string> = {
+    landscape: 'landscape',
+    portrait: 'portrait',
+    any: 'any',
+  }
+
+  ;(screen.orientation as unknown as ScreenOrientationAPI)
+    .lock(orientationMap[type])
+    .catch(() => {
+      // Orientation lock may fail if not in fullscreen or unsupported
+    })
+}
+
+/**
+ * Unlock the screen orientation
+ */
+export function unlockOrientation(): void {
+  if (!isOrientationLockSupported()) return
+
+  try {
+    ;(screen.orientation as unknown as ScreenOrientationAPI).unlock()
+  } catch {
+    // Unlock may fail if lock was never acquired
+  }
+}

package/src/core/popover.ts

@@ -0,0 +1,143 @@
+/**
+ * ts-video-player Popover Positioning
+ *
+ * Collision-aware positioning for menus and tooltips.
+ *
+ * @module core/popover
+ */
+
+export interface Rect {
+  top: number
+  left: number
+  bottom: number
+  right: number
+  width: number
+  height: number
+}
+
+export type Placement = 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+
+export interface PositionOptions {
+  /** Preferred placement */
+  placement?: Placement
+  /** Gap between anchor and popover in px */
+  offset?: number
+  /** Boundary element (defaults to viewport) */
+  boundary?: HTMLElement | null
+  /** Minimum distance from boundary edges in px */
+  padding?: number
+}
+
+export interface PositionResult {
+  top: number
+  left: number
+  placement: Placement
+}
+
+/**
+ * Calculate the position of a popover relative to an anchor element,
+ * flipping when it would overflow the boundary.
+ */
+export function computePosition(
+  anchor: HTMLElement,
+  popover: HTMLElement,
+  options: PositionOptions = {},
+): PositionResult {
+  const {
+    placement = 'top',
+    offset = 4,
+    boundary = null,
+    padding = 8,
+  } = options
+
+  const anchorRect = anchor.getBoundingClientRect()
+  const popoverRect = popover.getBoundingClientRect()
+
+  const boundaryRect = boundary
+    ? boundary.getBoundingClientRect()
+    : { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth, width: window.innerWidth, height: window.innerHeight }
+
+  const availableTop = anchorRect.top - boundaryRect.top - padding
+  const availableBottom = boundaryRect.bottom - anchorRect.bottom - padding
+
+  // Determine vertical placement (flip if needed)
+  let vertical: 'top' | 'bottom'
+  if (placement.startsWith('top')) {
+    vertical = popoverRect.height + offset <= availableTop ? 'top' : 'bottom'
+  } else {
+    vertical = popoverRect.height + offset <= availableBottom ? 'bottom' : 'top'
+  }
+
+  // Calculate top
+  let top: number
+  if (vertical === 'top') {
+    top = anchorRect.top - popoverRect.height - offset
+  } else {
+    top = anchorRect.bottom + offset
+  }
+
+  // Determine horizontal alignment
+  let align: '' | '-start' | '-end' = ''
+  if (placement.endsWith('-start')) align = '-start'
+  else if (placement.endsWith('-end')) align = '-end'
+
+  // Calculate left
+  let left: number
+  switch (align) {
+    case '-start':
+      left = anchorRect.left
+      break
+    case '-end':
+      left = anchorRect.right - popoverRect.width
+      break
+    default:
+      left = anchorRect.left + (anchorRect.width - popoverRect.width) / 2
+      break
+  }
+
+  // Clamp horizontal to boundary
+  const minLeft = boundaryRect.left + padding
+  const maxLeft = boundaryRect.right - popoverRect.width - padding
+  left = Math.max(minLeft, Math.min(maxLeft, left))
+
+  // Clamp vertical to boundary
+  const minTop = boundaryRect.top + padding
+  const maxTop = boundaryRect.bottom - popoverRect.height - padding
+  top = Math.max(minTop, Math.min(maxTop, top))
+
+  const finalPlacement: Placement = `${vertical}${align}` as Placement
+
+  return { top, left, placement: finalPlacement }
+}
+
+/**
+ * Apply computed position to a popover element using absolute positioning
+ * relative to an offset parent.
+ */
+export function applyPosition(
+  anchor: HTMLElement,
+  popover: HTMLElement,
+  options: PositionOptions = {},
+): Placement {
+  // Temporarily make visible for measurement
+  const prevVisibility = popover.style.visibility
+  popover.style.visibility = 'hidden'
+  popover.style.display = 'block'
+
+  const result = computePosition(anchor, popover, options)
+
+  // Convert to relative coordinates if popover has an offset parent
+  const offsetParent = popover.offsetParent as HTMLElement | null
+  if (offsetParent) {
+    const parentRect = offsetParent.getBoundingClientRect()
+    popover.style.top = `${result.top - parentRect.top}px`
+    popover.style.left = `${result.left - parentRect.left}px`
+  } else {
+    popover.style.top = `${result.top}px`
+    popover.style.left = `${result.left}px`
+  }
+
+  popover.style.visibility = prevVisibility
+
+  return result.placement
+}