@openwebf/vue-video-player 1.0.0

package/README.md

@@ -0,0 +1,191 @@
+# WebF Video Player
+
+HTML5-compatible video player for WebF applications. Wraps Flutter's `video_player` package with a familiar HTML5 video element API.
+
+## Installation
+
+Add this package to your `pubspec.yaml`:
+
+```yaml
+dependencies:
+  webf_video_player: ^1.0.0
+```
+
+## Setup
+
+Register the custom element in your Flutter app's main function:
+
+```dart
+import 'package:webf_video_player/webf_video_player.dart';
+
+void main() {
+  installWebFVideoPlayer();
+  runApp(MyApp());
+}
+```
+
+## Usage
+
+### Basic Example
+
+```html
+<webf-video-player
+  src="https://example.com/video.mp4"
+  controls
+></webf-video-player>
+```
+
+### With All Options
+
+```html
+<webf-video-player
+  src="https://example.com/video.mp4"
+  poster="https://example.com/poster.jpg"
+  controls
+  autoplay
+  muted
+  loop
+  volume="0.8"
+  playback-rate="1.0"
+  object-fit="contain"
+></webf-video-player>
+```
+
+### JavaScript Control
+
+```javascript
+const video = document.querySelector('webf-video-player');
+
+// Play/Pause
+video.play();
+video.pause();
+
+// Seek to 30 seconds
+video.currentTime = 30;
+
+// Adjust volume
+video.volume = 0.5;
+video.muted = true;
+
+// Change playback speed
+video.playbackRate = 1.5;
+
+// Listen to events
+video.addEventListener('play', () => console.log('Playing'));
+video.addEventListener('pause', () => console.log('Paused'));
+video.addEventListener('ended', () => console.log('Ended'));
+video.addEventListener('timeupdate', (e) => {
+  console.log('Current time:', e.detail.currentTime);
+});
+video.addEventListener('error', (e) => {
+  console.error('Error:', e.detail.message);
+});
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `src` | string | - | Video source URL. Supports `http://`, `https://`, `asset://`, `file://` |
+| `poster` | string | - | Poster image URL displayed before playback |
+| `autoplay` | boolean | false | Auto-start playback when loaded |
+| `controls` | boolean | true | Show playback controls |
+| `loop` | boolean | false | Loop video continuously |
+| `muted` | boolean | false | Mute audio |
+| `volume` | number | 1.0 | Volume level (0.0 to 1.0) |
+| `playbackRate` | number | 1.0 | Playback speed (0.25 to 2.0) |
+| `currentTime` | number | 0 | Current position in seconds (read/write) |
+| `objectFit` | string | 'contain' | Video sizing: 'contain', 'cover', 'fill', 'none' |
+| `preload` | string | 'metadata' | Preload hint: 'none', 'metadata', 'auto' |
+| `playsInline` | boolean | true | Play inline on iOS (vs fullscreen) |
+
+### Read-only Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `duration` | number | Total duration in seconds |
+| `paused` | boolean | Whether playback is paused |
+| `ended` | boolean | Whether playback has ended |
+| `seeking` | boolean | Whether currently seeking |
+| `readyState` | number | Loading ready state (0-4) |
+| `networkState` | number | Network state (0-3) |
+| `videoWidth` | number | Natural video width in pixels |
+| `videoHeight` | number | Natural video height in pixels |
+| `buffering` | boolean | Whether currently buffering |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `loadstart` | - | Browser starts loading |
+| `loadedmetadata` | `{duration, videoWidth, videoHeight}` | Metadata loaded |
+| `loadeddata` | - | First frame loaded |
+| `canplay` | - | Ready to play |
+| `canplaythrough` | - | Can play without buffering |
+| `play` | - | Playback started |
+| `playing` | - | Playback ready after pause/buffer |
+| `pause` | - | Playback paused |
+| `ended` | - | Playback ended |
+| `waiting` | - | Buffering/stalled |
+| `seeking` | - | Seek operation started |
+| `seeked` | - | Seek operation completed |
+| `timeupdate` | `{currentTime, duration}` | Position update (~4x/sec) |
+| `durationchange` | `{duration}` | Duration changed |
+| `volumechange` | `{volume, muted}` | Volume/mute changed |
+| `ratechange` | `{playbackRate}` | Playback rate changed |
+| `progress` | - | Download progress |
+| `error` | `{code, message}` | Error occurred |
+
+## Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `play()` | void | Start playback |
+| `pause()` | void | Pause playback |
+| `load()` | void | Reload video source |
+| `canPlayType(mimeType)` | string | Check MIME support ('', 'maybe', 'probably') |
+
+## Source URL Protocols
+
+| Protocol | Example | Description |
+|----------|---------|-------------|
+| `http://` | `http://example.com/video.mp4` | HTTP URL |
+| `https://` | `https://example.com/video.mp4` | HTTPS URL |
+| `asset://` | `asset://videos/intro.mp4` | Flutter asset |
+| `file://` | `file:///path/to/video.mp4` | Local file |
+
+## Supported Formats
+
+The supported video formats depend on the platform:
+
+| Format | iOS | Android | Description |
+|--------|-----|---------|-------------|
+| MP4 (H.264) | Yes | Yes | Most compatible |
+| WebM | No | Yes | Android only |
+| HLS | Yes | Yes | Streaming format |
+
+## Platform Configuration
+
+### iOS
+
+Add to `ios/Runner/Info.plist` for network video playback:
+
+```xml
+<key>NSAppTransportSecurity</key>
+<dict>
+  <key>NSAllowsArbitraryLoads</key>
+  <true/>
+</dict>
+```
+
+### Android
+
+Add to `android/app/src/main/AndroidManifest.xml`:
+
+```xml
+<uses-permission android:name="android.permission.INTERNET"/>
+```
+
+## License
+
+Apache License 2.0

package/index.d.ts

@@ -0,0 +1,158 @@
+/*
+ * Generated by TSDL, don't edit this file directly.
+ */
+// Based on the Vue 3 documentation for defining custom elements:
+// https://vuejs.org/guide/extras/web-components
+import type { EmitFn, PublicProps, StyleValue, ClassValue } from 'vue';
+import '@openwebf/vue-core-ui';
+type EventMap = {
+  [event: string]: Event
+}
+// This maps an EventMap to the format that Vue's $emit type expects.
+type VueEmit<T extends EventMap> = EmitFn<{
+  [K in keyof T]: (event: NonNullable<T[K]>) => void
+}>
+// Vue 3 event listener properties for template usage
+type VueEventListeners<T extends EventMap> = {
+  [K in keyof T as `on${Capitalize<string & K>}`]?: (event: NonNullable<T[K]>) => any
+}
+/**
+ * Time range information for buffered/seekable regions.
+ */
+export interface TimeRangeInfo {
+  /**
+   * Number of ranges.
+   */
+  length: number;
+  /**
+   * Array of range objects with start and end times in seconds.
+   */
+  ranges: any[];
+}
+/**
+ * Video error information matching HTML5 MediaError.
+ */
+export interface VideoError {
+  /**
+   * Error code:
+   * - 1: MEDIA_ERR_ABORTED
+   * - 2: MEDIA_ERR_NETWORK
+   * - 3: MEDIA_ERR_DECODE
+   * - 4: MEDIA_ERR_SRC_NOT_SUPPORTED
+   */
+  code: number;
+  /**
+   * Human-readable error message.
+   */
+  message: string;
+}
+type DefineCustomElement<
+  ElementType,
+  Props,
+  Events extends EventMap = {},
+> = new () => ElementType & VueEventListeners<Events> & {
+  // Use $props to define the properties exposed to template type checking. Vue
+  // specifically reads prop definitions from the `$props` type. Note that we
+  // combine the element's props with Vue's special props.
+  /** @deprecated Do not use the $props property on a Custom Element ref,
+    this is for template prop types only. */
+  $props: Props & PublicProps & VueEventListeners<Events>
+  // Use $emit to specifically define event types. Vue specifically reads event
+  // types from the `$emit` type. Note that `$emit` expects a particular format
+  // that we map `Events` to.
+  /** @deprecated Do not use the $emit property on a Custom Element ref,
+    this is for template prop types only. */
+  $emit: VueEmit<Events>
+}
+export type WebFVideoPlayerProps = {
+  'src'?: string;
+  'poster'?: string;
+  'autoplay'?: boolean;
+  'controls'?: boolean;
+  'loop'?: boolean;
+  'muted'?: boolean;
+  'volume'?: number;
+  'playback-rate'?: number;
+  'current-time'?: number;
+  'object-fit'?: string;
+  'preload'?: string;
+  'plays-inline'?: boolean;
+  'duration'?: number;
+  'paused'?: boolean;
+  'ended'?: boolean;
+  'seeking'?: boolean;
+  'ready-state'?: number;
+  'network-state'?: number;
+  'video-width'?: number;
+  'video-height'?: number;
+  'buffering'?: boolean;
+  'id'?: string;
+  'class'?: ClassValue;
+  'style'?: StyleValue;
+}
+export interface WebFVideoPlayerElement {
+  src?: string;
+  poster?: string;
+  autoplay?: boolean;
+  controls?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  volume?: number;
+  playbackRate?: number;
+  currentTime?: number;
+  objectFit?: string;
+  preload?: string;
+  playsInline?: boolean;
+  duration?: number;
+  paused?: boolean;
+  ended?: boolean;
+  seeking?: boolean;
+  readyState?: number;
+  networkState?: number;
+  videoWidth?: number;
+  videoHeight?: number;
+  buffering?: boolean;
+  play(): void;
+  pause(): void;
+  load(): void;
+  canPlayType(type: string): string;
+}
+export type WebFVideoPlayerEvents = {
+  loadstart: Event;
+  error: CustomEvent<VideoError>;
+  loadedmetadata: CustomEvent<{ duration: number; videoWidth: number; videoHeight: number }>;
+  loadeddata: Event;
+  canplay: Event;
+  canplaythrough: Event;
+  playing: Event;
+  waiting: Event;
+  seeking: Event;
+  seeked: Event;
+  ended: Event;
+  durationchange: CustomEvent<{ duration: number }>;
+  timeupdate: CustomEvent<{ currentTime: number; duration: number }>;
+  play: Event;
+  pause: Event;
+  ratechange: CustomEvent<{ playbackRate: number }>;
+  volumechange: CustomEvent<{ volume: number; muted: boolean }>;
+  progress: Event;
+}
+declare const flutterAttached: (typeof import('@openwebf/vue-core-ui')) extends { flutterAttached: infer T } ? T : any;
+declare module '@vue/runtime-core' {
+  interface GlobalDirectives {
+    vFlutterAttached: typeof flutterAttached;
+  }
+  interface GlobalComponents {
+    'webf-video-player': DefineCustomElement<
+      WebFVideoPlayerElement,
+      WebFVideoPlayerProps,
+      WebFVideoPlayerEvents
+    >
+  }
+}
+// Some tooling (older IDE integrations) look for global directive/component typing
+// augmentations on the `vue` module name instead of `@vue/runtime-core`.
+declare module 'vue' {
+  interface GlobalDirectives extends import('@vue/runtime-core').GlobalDirectives {}
+  interface GlobalComponents extends import('@vue/runtime-core').GlobalComponents {}
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@openwebf/vue-video-player",
+  "version": "1.0.0",
+  "description": "HTML5-compatible video player for WebF applications. Wraps Flutter's video_player package with a familiar HTML5 video element API.",
+  "main": "",
+  "types": "index.d.ts",
+  "files": ["index.d.ts", "README.md"],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@openwebf/vue-core-ui": "^0.24.0"
+  },
+  "devDependencies": {
+    "@openwebf/vue-core-ui": "^0.24.0",
+    "vue": "^3.0.0"
+  }
+}