strataplayer 1.1.0 → 1.2.0

package/README.md

@@ -4,7 +4,7 @@
   <img src="https://dev-ashishranjan.github.io/StrataPlayer/logo.png" alt="StrataPlayer Logo" width="128" />
   
   <p align="center">
-    <strong>The Universal Media Engine for the Modern Web.</strong>
+    <strong>A Universal Media Engine for the Web.</strong>
   </p>
   
   <p align="center">
@@ -22,23 +22,23 @@
 
 ## Introduction
 
-StrataPlayer is a production-grade, framework-agnostic media engine designed for the modern web. It decouples playback logic from the UI, ensuring high-performance rendering even during rapid state updates.
+StrataPlayer is a framework-agnostic media engine designed for web applications. It decouples playback logic from the UI, ensuring consistent performance during state updates.
 
-Built on **React 19** and **TypeScript**, it features a modular plugin architecture that allows you to support only the formats you need—keeping your bundle size minimal while offering support for everything from HLS to BitTorrent streaming.
+Built on **React 19** and **TypeScript**, it features a modular plugin architecture to support various streaming formats while keeping the core bundle size minimal.
 
-## ✨ Key Features
+## Key Features
 
 - **Universal Playback:** Support for **HLS**, **DASH**, **MPEG-TS/FLV**, and **WebTorrent** (P2P).
-- **Framework Agnostic:** First-class React support, with easy mounting for Vue, Svelte, Angular, and Vanilla JS.
-- **Robust Network Handling:** Automatic exponential backoff and retry logic for unstable connections.
-- **Advanced Audio Engine:** Integrated Web Audio API nodes for volume boosting (up to 300%) and gain control.
-- **Professional UI:**
-  - **Themes:** 4 built-in distinct themes (Default, Pixel, Game, Hacker).
-  - **Subtitles:** Comprehensive VTT/SRT support with user-customizable styling (size, color, sync, shadows).
-  - **Picture-in-Picture** & **Google Cast** integration.
-- **State Management:** Powered by `NanoStore` for isolated, high-performance state updates.
+- **Framework Agnostic:** First-class React support with mounting helpers for Vue, Svelte, Angular, and Vanilla JS.
+- **Network Handling:** Automatic exponential backoff and retry logic.
+- **Audio Engine:** Integrated Web Audio API nodes for gain control and volume boosting.
+- **UI System:**
+  - 4 built-in themes (Default, Pixel, Game, Hacker).
+  - VTT/SRT subtitle support with user customization.
+  - Picture-in-Picture & Google Cast integration.
+- **State Management:** Powered by `NanoStore` for isolated state updates.
 
-## 🚀 Installation
+## Installation
 
 Install the core player:
 
@@ -62,7 +62,7 @@ npm install mpegts.js
 npm install webtorrent
 ```
 
-## 💻 Usage
+## Usage
 
 ### 1. Basic Usage (React)
 
@@ -141,55 +141,68 @@ const player = mountStrataPlayer(container, {
 // player.unmount();
 ```
 
-## 📋 Component Props
-
-The `<StrataPlayer />` component accepts the following props:
-
-| Prop                   | Type                                         | Default     | Description                                                                                |
-| :--------------------- | :------------------------------------------- | :---------- | :----------------------------------------------------------------------------------------- |
-| **src**                | `string`                                     | `undefined` | The primary media URL.                                                                     |
-| **sources**            | `PlayerSource[]`                             | `[]`        | Array of sources for quality fallback or alternative formats. Overrides `src` if provided. |
-| **poster**             | `string`                                     | `undefined` | URL for the poster image shown before playback.                                            |
-| **autoPlay**           | `boolean`                                    | `false`     | Whether to start playback automatically. Note: Browsers may block unmuted autoplay.        |
-| **volume**             | `number`                                     | `1`         | Initial volume (0.0 to 1.0).                                                               |
-| **muted**              | `boolean`                                    | `false`     | Initial mute state.                                                                        |
-| **theme**              | `'default' \| 'pixel' \| 'game' \| 'hacker'` | `'default'` | The visual theme of the player.                                                            |
-| **themeColor**         | `string`                                     | `'#6366f1'` | Primary accent color (Hex, RGB).                                                           |
-| **iconSize**           | `'small' \| 'medium' \| 'large'`             | `'medium'`  | Size of the control icons.                                                                 |
-| **thumbnails**         | `string`                                     | `undefined` | URL to a VTT file containing storyboard thumbnails for hover preview.                      |
-| **textTracks**         | `TextTrackConfig[]`                          | `[]`        | Array of subtitle/caption tracks.                                                          |
-| **plugins**            | `IPlugin[]`                                  | `[]`        | Array of initialized plugin instances (e.g., `new HlsPlugin()`).                           |
-| **disablePersistence** | `boolean`                                    | `false`     | If `true`, prevents saving settings to LocalStorage.                                       |
-| **audioGain**          | `number`                                     | `1`         | Initial audio boost level (e.g., `1.5` for 150%).                                          |
-| **playbackRate**       | `number`                                     | `1`         | Initial playback speed.                                                                    |
-
-### Data Structures
-
-#### `PlayerSource`
-
-```ts
-{
-  url: string;
-  // Optional: 'hls' | 'dash' | 'mp4' | 'webm' | 'mpegts' | 'webtorrent'
-  // If omitted, the player attempts to detect it from the extension.
-  type?: string;
-  name?: string; // Label for source selector
-}
-```
-
-#### `TextTrackConfig`
-
-```ts
-{
-  kind: 'subtitles' | 'captions';
-  label: string;  // e.g. "English"
-  src: string;    // URL to .vtt file
-  srcLang: string; // e.g. "en"
-  default?: boolean;
-}
-```
-
-## 🧩 Plugin System
+## Component Props & Options
+
+The `<StrataPlayer />` component accepts the following configuration options.
+
+### Source & Playback
+
+| Prop             | Type                | Default | Description                                                   |
+| :--------------- | :------------------ | :------ | :------------------------------------------------------------ |
+| **src**          | `string`            | -       | The primary media URL.                                        |
+| **sources**      | `PlayerSource[]`    | `[]`    | Array of sources for quality fallback or alternative formats. |
+| **poster**       | `string`            | -       | URL for the poster image.                                     |
+| **thumbnails**   | `string`            | -       | URL to a VTT file for hover previews.                         |
+| **textTracks**   | `TextTrackConfig[]` | `[]`    | Array of subtitle/caption tracks.                             |
+| **plugins**      | `IPlugin[]`         | `[]`    | Array of initialized plugin instances.                        |
+| **autoPlay**     | `boolean`           | `false` | Start playback automatically.                                 |
+| **loop**         | `boolean`           | `false` | Loop playback.                                                |
+| **volume**       | `number`            | `1`     | Initial volume (0.0 to 1.0).                                  |
+| **muted**        | `boolean`           | `false` | Initial mute state.                                           |
+| **audioGain**    | `number`            | `1`     | Audio boost level (e.g., `1.5` for 150%).                     |
+| **playbackRate** | `number`            | `1`     | Initial playback speed.                                       |
+| **isLive**       | `boolean`           | `false` | Enable live stream UI mode.                                   |
+
+### UI & Appearance
+
+| Prop           | Type          | Default     | Description                                      |
+| :------------- | :------------ | :---------- | :----------------------------------------------- |
+| **theme**      | `string`      | `'default'` | `'default'`, `'pixel'`, `'game'`, or `'hacker'`. |
+| **themeColor** | `string`      | `'#6366f1'` | Primary accent color (Hex, RGB).                 |
+| **iconSize**   | `string`      | `'medium'`  | `'small'`, `'medium'`, or `'large'`.             |
+| **backdrop**   | `boolean`     | `true`      | Enable background blur effects in menus.         |
+| **autoSize**   | `boolean`     | `false`     | Toggles `object-fit: cover`.                     |
+| **highlight**  | `Highlight[]` | `[]`        | Markers to display on the timeline.              |
+
+### Functionality & Controls
+
+| Prop                   | Type      | Default | Description                               |
+| :--------------------- | :-------- | :------ | :---------------------------------------- |
+| **hotKey**             | `boolean` | `true`  | Enable keyboard shortcuts.                |
+| **screenshot**         | `boolean` | `false` | Show screenshot button.                   |
+| **pip**                | `boolean` | `true`  | Show Picture-in-Picture button.           |
+| **setting**            | `boolean` | `true`  | Show Settings menu.                       |
+| **fullscreen**         | `boolean` | `true`  | Show Fullscreen button.                   |
+| **fullscreenWeb**      | `boolean` | `false` | Show Web Fullscreen button.               |
+| **flip**               | `boolean` | `true`  | Enable image flip controls in settings.   |
+| **aspectRatio**        | `boolean` | `true`  | Enable aspect ratio controls in settings. |
+| **lock**               | `boolean` | `false` | Show mobile lock button.                  |
+| **fastForward**        | `boolean` | `true`  | Enable long-press to 2x speed.            |
+| **autoOrientation**    | `boolean` | `false` | Lock landscape on mobile fullscreen.      |
+| **disablePersistence** | `boolean` | `false` | Prevent saving settings to LocalStorage.  |
+
+### Advanced Customization
+
+> Detailed documentation for configuring layers, controls, context menus, and custom settings is available in the full documentation.
+
+| Prop            | Type                | Description                            |
+| :-------------- | :------------------ | :------------------------------------- |
+| **controls**    | `ControlItem[]`     | Custom control bar items.              |
+| **layers**      | `LayerConfig[]`     | Custom UI layers overlaying the video. |
+| **contextmenu** | `ContextMenuItem[]` | Custom right-click menu items.         |
+| **settings**    | `SettingItem[]`     | Custom menu entries.                   |
+
+## Plugin System
 
 StrataPlayer uses a modular system. You only pay the bundle size cost for the formats you use.
 
@@ -200,54 +213,7 @@ StrataPlayer uses a modular system. You only pay the bundle size cost for the fo
 | **MpegtsPlugin**     | `strataplayer/mpegts`     | `mpegts.js`  | MPEG-TS and FLV live streams         |
 | **WebTorrentPlugin** | `strataplayer/webtorrent` | `webtorrent` | P2P streaming via WebRTC             |
 
-## ⚙️ Configuration
-
-### Sources & Tracks
-
-Support multiple sources for quality fallback and detailed subtitle configuration.
-
-```tsx
-<StrataPlayer
-  sources={[
-    { name: "HLS Master", url: "master.m3u8", type: "hls" },
-    { name: "Fallback MP4", url: "fallback.mp4", type: "mp4" },
-  ]}
-  poster="https://example.com/poster.jpg"
-  thumbnails="https://example.com/storyboard.vtt" // for hover previews
-  textTracks={[
-    {
-      kind: "subtitles",
-      label: "English",
-      src: "/subs/en.vtt",
-      srcLang: "en",
-      default: true,
-    },
-  ]}
-/>
-```
-
-### UI & Themes
-
-The player includes 4 professionally designed themes.
-
-| Theme     | Description                                                   |
-| :-------- | :------------------------------------------------------------ |
-| `default` | Clean, modern aesthetic using Inter font.                     |
-| `pixel`   | Retro 8-bit style with sharp edges and "Press Start 2P" font. |
-| `game`    | Cinematic RPG style with serif typography and gold accents.   |
-| `hacker`  | Terminal-inspired look with scanlines and monospaced fonts.   |
-
-Customize further with:
-
-```tsx
-<StrataPlayer
-  theme="game"
-  themeColor="#10b981" // Custom accent color
-  iconSize="medium" // 'small' | 'medium' | 'large'
-/>
-```
-
-## ⌨️ Keyboard Shortcuts
+## Keyboard Shortcuts
 
 | Key           | Action            |
 | ------------- | ----------------- |
@@ -259,7 +225,7 @@ Customize further with:
 | `Arrow Up`    | Increase Volume   |
 | `Arrow Down`  | Decrease Volume   |
 
-## 🛠️ Development
+## Development
 
 1. Clone the repository
 2. Install dependencies:
@@ -271,7 +237,7 @@ Customize further with:
    npm run dev
    ```
 
-## 🤝 Contributing
+## Contributing
 
 Contributions are welcome! Please follow these steps:
 
@@ -281,7 +247,7 @@ Contributions are welcome! Please follow these steps:
 4. Push to the branch.
 5. Open a Pull Request.
 
-## 📄 License
+## License
 
 Distributed under the MIT License. See `LICENSE` for more information.
 

package/dist/dash.d.ts

@@ -1,3 +1,31 @@
+import { default as default_2 } from 'react';
+
+declare interface ContextMenuItem {
+    html?: string | default_2.ReactNode;
+    disabled?: boolean;
+    icon?: string | default_2.ReactNode;
+    onClick?: (close: () => void) => void;
+    click?: (close: () => void) => void;
+    checked?: boolean;
+    showBorder?: boolean;
+    separator?: boolean;
+    isLabel?: boolean;
+}
+
+declare interface ControlItem {
+    id?: string;
+    position: 'left' | 'right' | 'center';
+    index: number;
+    html?: string | default_2.ReactNode;
+    tooltip?: string;
+    onClick?: (core: StrataCore) => void;
+    click?: (core: StrataCore) => void;
+    className?: string;
+    style?: default_2.CSSProperties;
+    isBuiltIn?: boolean;
+    builtInId?: string;
+}
+
 export declare class DashPlugin implements IPlugin {
     name: string;
     private player;
@@ -20,12 +48,26 @@ declare class EventBus {
 
 declare type EventCallback<T = any> = (data: T) => void;
 
+declare interface Highlight_2 {
+    time: number;
+    text: string;
+}
+
 declare interface IPlugin {
     name: string;
     init(core: StrataCore): void;
     destroy?(): void;
 }
 
+declare interface LayerConfig {
+    name?: string;
+    html: string | default_2.ReactNode;
+    style?: default_2.CSSProperties;
+    className?: string;
+    click?: () => void;
+    mounted?: (element: HTMLElement) => void;
+}
+
 declare type Listener<T> = (state: T, prevState: T) => void;
 
 declare class NanoStore<T> {
@@ -55,6 +97,7 @@ declare interface PlayerSource {
 declare interface PlayerState {
     isPlaying: boolean;
     isBuffering: boolean;
+    isLive: boolean;
     currentTime: number;
     duration: number;
     buffered: {
@@ -96,19 +139,65 @@ declare interface PlayerState {
     theme: PlayerTheme;
     sources: PlayerSource[];
     currentSourceIndex: number;
+    isLocked: boolean;
+    flipState: {
+        horizontal: boolean;
+        vertical: boolean;
+    };
+    aspectRatio: string;
+    isAutoSized: boolean;
+    isLooping: boolean;
+    controlsVisible: boolean;
 }
 
 declare type PlayerTheme = 'default' | 'pixel' | 'game' | 'hacker';
 
+declare interface SettingItem {
+    id?: string;
+    html: string | default_2.ReactNode;
+    icon?: string | default_2.ReactNode;
+    tooltip?: string;
+    switch?: boolean;
+    onSwitch?: (item: SettingItem) => boolean | void;
+    onClick?: () => void;
+    click?: () => void;
+    isDefault?: boolean;
+}
+
 declare interface StrataConfig {
+    container?: string;
+    id?: string;
     volume?: number;
     muted?: boolean;
     playbackRate?: number;
     audioGain?: number;
+    loop?: boolean;
+    playsInline?: boolean;
+    isLive?: boolean;
     theme?: PlayerTheme;
     themeColor?: string;
     iconSize?: 'small' | 'medium' | 'large';
+    backdrop?: boolean;
+    autoSize?: boolean;
     subtitleSettings?: Partial<SubtitleSettings>;
+    screenshot?: boolean;
+    setting?: boolean;
+    pip?: boolean;
+    fullscreen?: boolean;
+    fullscreenWeb?: boolean;
+    flip?: boolean;
+    aspectRatio?: boolean;
+    highlight?: Highlight_2[];
+    hotKey?: boolean;
+    lock?: boolean;
+    gesture?: boolean;
+    fastForward?: boolean;
+    autoOrientation?: boolean;
+    layers?: LayerConfig[];
+    contextmenu?: ContextMenuItem[];
+    controls?: ControlItem[];
+    settings?: SettingItem[];
+    useSSR?: boolean;
     disablePersistence?: boolean;
 }
 
@@ -119,7 +208,8 @@ declare class StrataCore {
     store: NanoStore<PlayerState>;
     private plugins;
     private audioEngine;
-    private config;
+    config: StrataConfig;
+    private resizeObserver;
     private retryCount;
     private maxRetries;
     private retryTimer;
@@ -130,6 +220,24 @@ declare class StrataCore {
     private boundCueChange;
     private boundFullscreenChange;
     constructor(config?: StrataConfig, videoElement?: HTMLVideoElement);
+    get playing(): boolean;
+    get currentTime(): number;
+    set currentTime(val: number);
+    get duration(): number;
+    get paused(): boolean;
+    get volume(): number;
+    set volume(val: number);
+    get muted(): boolean;
+    set muted(val: boolean);
+    get playbackRate(): number;
+    set playbackRate(val: number);
+    get loop(): boolean;
+    set loop(val: boolean);
+    forward(seconds?: number): void;
+    backward(seconds?: number): void;
+    on(event: string, callback: EventCallback): () => void;
+    off(event: string, callback: EventCallback): void;
+    emit(event: string, data?: any): void;
     private initVideoListeners;
     triggerError(message: string, isFatal?: boolean): void;
     private handleError;
@@ -141,6 +249,7 @@ declare class StrataCore {
     setSources(sources: PlayerSource[], tracks?: TextTrackConfig[]): void;
     switchSource(index: number): void;
     load(source: PlayerSource | string, tracks?: TextTrackConfig[], isRetry?: boolean): void;
+    loadSubtitle(url: string, label?: string): void;
     addTextTrack(file: File, label: string): void;
     private addTextTrackInternal;
     play(): Promise<void>;
@@ -153,8 +262,14 @@ declare class StrataCore {
     setAudioGain(gain: number): void;
     setQuality(index: number): void;
     setAudioTrack(index: number): void;
-    toggleFullscreen(): void;
+    setControlsVisible(visible: boolean): void;
+    toggleFullscreen(): Promise<void>;
     togglePip(): void;
+    screenshot(): void;
+    toggleLock(): void;
+    toggleLoop(): void;
+    setFlip(direction: 'horizontal' | 'vertical'): void;
+    setAspectRatio(ratio: string): void;
     private initCast;
     requestCast(): void;
     private loadMediaToCast;
@@ -190,11 +305,11 @@ declare interface SubtitleSettings {
 }
 
 declare interface TextTrackConfig {
-    kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-    label: string;
     src: string;
-    srcLang: string;
+    label: string;
+    srcLang?: string;
     default?: boolean;
+    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
 }
 
 export { }

package/dist/hls.d.ts

@@ -1,3 +1,31 @@
+import { default as default_2 } from 'react';
+
+declare interface ContextMenuItem {
+    html?: string | default_2.ReactNode;
+    disabled?: boolean;
+    icon?: string | default_2.ReactNode;
+    onClick?: (close: () => void) => void;
+    click?: (close: () => void) => void;
+    checked?: boolean;
+    showBorder?: boolean;
+    separator?: boolean;
+    isLabel?: boolean;
+}
+
+declare interface ControlItem {
+    id?: string;
+    position: 'left' | 'right' | 'center';
+    index: number;
+    html?: string | default_2.ReactNode;
+    tooltip?: string;
+    onClick?: (core: StrataCore) => void;
+    click?: (core: StrataCore) => void;
+    className?: string;
+    style?: default_2.CSSProperties;
+    isBuiltIn?: boolean;
+    builtInId?: string;
+}
+
 declare class EventBus {
     private events;
     constructor();
@@ -9,6 +37,11 @@ declare class EventBus {
 
 declare type EventCallback<T = any> = (data: T) => void;
 
+declare interface Highlight_2 {
+    time: number;
+    text: string;
+}
+
 export declare class HlsPlugin implements IPlugin {
     name: string;
     private hls;
@@ -24,6 +57,15 @@ declare interface IPlugin {
     destroy?(): void;
 }
 
+declare interface LayerConfig {
+    name?: string;
+    html: string | default_2.ReactNode;
+    style?: default_2.CSSProperties;
+    className?: string;
+    click?: () => void;
+    mounted?: (element: HTMLElement) => void;
+}
+
 declare type Listener<T> = (state: T, prevState: T) => void;
 
 declare class NanoStore<T> {
@@ -53,6 +95,7 @@ declare interface PlayerSource {
 declare interface PlayerState {
     isPlaying: boolean;
     isBuffering: boolean;
+    isLive: boolean;
     currentTime: number;
     duration: number;
     buffered: {
@@ -94,19 +137,65 @@ declare interface PlayerState {
     theme: PlayerTheme;
     sources: PlayerSource[];
     currentSourceIndex: number;
+    isLocked: boolean;
+    flipState: {
+        horizontal: boolean;
+        vertical: boolean;
+    };
+    aspectRatio: string;
+    isAutoSized: boolean;
+    isLooping: boolean;
+    controlsVisible: boolean;
 }
 
 declare type PlayerTheme = 'default' | 'pixel' | 'game' | 'hacker';
 
+declare interface SettingItem {
+    id?: string;
+    html: string | default_2.ReactNode;
+    icon?: string | default_2.ReactNode;
+    tooltip?: string;
+    switch?: boolean;
+    onSwitch?: (item: SettingItem) => boolean | void;
+    onClick?: () => void;
+    click?: () => void;
+    isDefault?: boolean;
+}
+
 declare interface StrataConfig {
+    container?: string;
+    id?: string;
     volume?: number;
     muted?: boolean;
     playbackRate?: number;
     audioGain?: number;
+    loop?: boolean;
+    playsInline?: boolean;
+    isLive?: boolean;
     theme?: PlayerTheme;
     themeColor?: string;
     iconSize?: 'small' | 'medium' | 'large';
+    backdrop?: boolean;
+    autoSize?: boolean;
     subtitleSettings?: Partial<SubtitleSettings>;
+    screenshot?: boolean;
+    setting?: boolean;
+    pip?: boolean;
+    fullscreen?: boolean;
+    fullscreenWeb?: boolean;
+    flip?: boolean;
+    aspectRatio?: boolean;
+    highlight?: Highlight_2[];
+    hotKey?: boolean;
+    lock?: boolean;
+    gesture?: boolean;
+    fastForward?: boolean;
+    autoOrientation?: boolean;
+    layers?: LayerConfig[];
+    contextmenu?: ContextMenuItem[];
+    controls?: ControlItem[];
+    settings?: SettingItem[];
+    useSSR?: boolean;
     disablePersistence?: boolean;
 }
 
@@ -117,7 +206,8 @@ declare class StrataCore {
     store: NanoStore<PlayerState>;
     private plugins;
     private audioEngine;
-    private config;
+    config: StrataConfig;
+    private resizeObserver;
     private retryCount;
     private maxRetries;
     private retryTimer;
@@ -128,6 +218,24 @@ declare class StrataCore {
     private boundCueChange;
     private boundFullscreenChange;
     constructor(config?: StrataConfig, videoElement?: HTMLVideoElement);
+    get playing(): boolean;
+    get currentTime(): number;
+    set currentTime(val: number);
+    get duration(): number;
+    get paused(): boolean;
+    get volume(): number;
+    set volume(val: number);
+    get muted(): boolean;
+    set muted(val: boolean);
+    get playbackRate(): number;
+    set playbackRate(val: number);
+    get loop(): boolean;
+    set loop(val: boolean);
+    forward(seconds?: number): void;
+    backward(seconds?: number): void;
+    on(event: string, callback: EventCallback): () => void;
+    off(event: string, callback: EventCallback): void;
+    emit(event: string, data?: any): void;
     private initVideoListeners;
     triggerError(message: string, isFatal?: boolean): void;
     private handleError;
@@ -139,6 +247,7 @@ declare class StrataCore {
     setSources(sources: PlayerSource[], tracks?: TextTrackConfig[]): void;
     switchSource(index: number): void;
     load(source: PlayerSource | string, tracks?: TextTrackConfig[], isRetry?: boolean): void;
+    loadSubtitle(url: string, label?: string): void;
     addTextTrack(file: File, label: string): void;
     private addTextTrackInternal;
     play(): Promise<void>;
@@ -151,8 +260,14 @@ declare class StrataCore {
     setAudioGain(gain: number): void;
     setQuality(index: number): void;
     setAudioTrack(index: number): void;
-    toggleFullscreen(): void;
+    setControlsVisible(visible: boolean): void;
+    toggleFullscreen(): Promise<void>;
     togglePip(): void;
+    screenshot(): void;
+    toggleLock(): void;
+    toggleLoop(): void;
+    setFlip(direction: 'horizontal' | 'vertical'): void;
+    setAspectRatio(ratio: string): void;
     private initCast;
     requestCast(): void;
     private loadMediaToCast;
@@ -188,11 +303,11 @@ declare interface SubtitleSettings {
 }
 
 declare interface TextTrackConfig {
-    kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-    label: string;
     src: string;
-    srcLang: string;
+    label: string;
+    srcLang?: string;
     default?: boolean;
+    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
 }
 
 export { }