@7sage/vidstack

{ "components": [ { "type": "component", "name": "MediaAnnouncer", "file": { "path": "/home/derek/Code/7sage/vidstack-player/packages/vidstack/src/components/aria/announcer.ts" }, "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/display/announcer" } ], "props": [ { "name": "translations", "default": "null", "type": { "primitive": "object", "concise": "Partial<MediaAnnouncerTranslations>", "full": "{ Play?: string; Pause?: string; \"Enter Fullscreen\"?: string; \"Exit Fullscreen\"?: string; \"Enter PiP\"?: string; \"Exit PiP\"?: string; \"Closed-Captions On\"?: string; \"Closed-Captions Off\"?: string; Mute?: string; Volume?: string; \"Seek Forward\"?: string; \"Seek Backward\"?: string; }" } } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "DOMEvent<string>", "full": "DOMEvent<string>" }, "detail": { "primitive": "string", "concise": "string", "full": "string" } } ], "state": [ { "name": "label", "type": { "primitive": "string", "concise": "string", "full": "string" }, "default": "null" }, { "name": "busy", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "MediaAnnouncerState", "full": "MediaAnnouncerState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect<MediaAnnouncerState>", "full": "(state: MediaAnnouncerState) => Maybe<Dispose>" } } ], "signature": { "type": "(callback: Effect<MediaAnnouncerState>) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "MediaAnnouncerProps", "state": "MediaAnnouncerState", "events": "MediaAnnouncerEvents" } }, { "type": "component", "name": "DefaultAudioLayout", "file": { "path": "/home/derek/Code/7sage/vidstack-player/packages/vidstack/src/components/layouts/default/audio-layout.ts" }, "docs": "The audio layout is our production-ready UI that's displayed when the media view type is set to\n'audio'. It includes support for audio tracks, slider chapters, captions, live streams, and much\nmore out of the box.", "doctags": [ { "name": "attr", "text": "data-match - Whether this layout is being used (query match)." }, { "name": "attr", "text": "data-sm - The small layout is active" }, { "name": "attr", "text": "data-lg - The large layout is active." }, { "name": "attr", "text": "data-size - The active layout size (sm or lg)." } ], "props": [ { "name": "when", "default": "({ viewType }) => viewType === 'audio'", "type": { "primitive": "boolean", "concise": "boolean | MediaPlayerQuery", "full": "boolean | MediaPlayerQuery" }, "docs": "Determines when the UI should be displayed." }, { "name": "smallWhen", "default": "({ width }) => width < 576", "type": { "primitive": "mixed", "concise": "boolean | MediaPlayerQuery | 'never'", "full": "boolean | MediaPlayerQuery | 'never'" }, "docs": "Determines when the small (e.g., mobile) UI should be displayed." }, { "name": "thumbnails", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "colorScheme", "type": { "primitive": "string", "concise": "'light' | 'dark' | 'system' | 'default'", "full": "'light' | 'dark' | 'system' | 'default'" }, "docs": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; }" }, "docs": "Sets the download URL and filename for the download button." }, { "name": "customIcons", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "translations", "type": { "primitive": "object", "concise": "Partial<DefaultLayoutTranslations>", "full": "{ Play?: string; Pause?: string; \"Enter Fullscreen\"?: string; \"Exit Fullscreen\"?: string; \"Enter PiP\"?: string; \"Exit PiP\"?: string; \"Closed-Captions On\"?: string; \"Closed-Captions Off\"?: string; Mute?: string; Volume?: string; \"Seek Forward\"?: string; \"Seek Backward\"?: string; Announcements?: string; Accessibility?: string; AirPlay?: string; Audio?: string; Auto?: string; Boost?: string; Captions?: string; \"Caption Styles\"?: string; \"Captions look like this\"?: string; Chapters?: string; Connected?: string; Continue?: string; Connecting?: string; Default?: string; Disabled?: string; Disconnected?: string; \"Display Background\"?: string; Download?: string; Font?: string; Family?: string; Fullscreen?: string; \"Google Cast\"?: string; \"Keyboard Animations\"?: string; LIVE?: string; Loop?: string; Normal?: string; Off?: string; Playback?: string; PiP?: string; Quality?: string; Replay?: string; Reset?: string; Seek?: string; Settings?: string; \"Skip To Live\"?: string; Speed?: string; Size?: string; Color?: string; Opacity?: string; Shadow?: string; Text?: string; \"Text Background\"?: string; Track?: string; Unmute?: string; }" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "menuContainer", "type": { "primitive": "string", "concise": "string | HTMLElement", "full": "string | HTMLElement" }, "docs": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`." }, { "name": "menuGroup", "type": { "primitive": "string", "concise": "'top' | 'bottom'", "full": "'top' | 'bottom'" }, "docs": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout." }, { "name": "noAudioGain", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Disable audio boost slider in the settings menu." }, { "name": "noModal", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether modal menus should be disabled when the small layout is active. A modal menu is\na floating panel that floats up from the bottom of the screen (outside of the player). It's\nenabled by default as it provides a better user experience for touch devices." }, { "name": "noScrubGesture", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether to disable scrubbing by touch swiping left or right on the player canvas." }, { "name": "sliderChaptersMinWidth", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum width of the slider to start displaying slider chapters when available." }, { "name": "disableTimeSlider", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time slider should be disabled." }, { "name": "noGestures", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether all gestures such as press to play or seek should not be active." }, { "name": "noKeyboardAnimations", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether keyboard actions should not be displayed." }, { "name": "hideQualityBitrate", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the bitrate should be hidden in the settings quality hint." }, { "name": "playbackRates", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The playback rate options to be displayed in the settings menu." }, { "name": "audioGains", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The audio gain options to be displayed in the settings menu." }, { "name": "seekStep", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts." } ], "members": { "props": [ { "name": "isMatch", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true }, { "name": "isSmallLayout", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 2 }, "generics": { "props": "DefaultLayoutProps" } }, { "type": "component", "name": "DefaultLayout", "file": { "path": "/home/derek/Code/7sage/vidstack-player/packages/vidstack/src/components/layouts/default/default-layout.ts" }, "props": [ { "name": "when", "default": "false", "type": { "primitive": "boolean", "concise": "boolean | MediaPlayerQuery", "full": "boolean | MediaPlayerQuery" }, "docs": "Determines when the UI should be displayed." }, { "name": "smallWhen", "default": "false", "type": { "primitive": "mixed", "concise": "boolean | MediaPlayerQuery | 'never'", "full": "boolean | MediaPlayerQuery | 'never'" }, "docs": "Determines when the small (e.g., mobile) UI should be displayed." }, { "name": "thumbnails", "default": "null", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "colorScheme", "default": "'system'", "type": { "primitive": "string", "concise": "'light' | 'dark' | 'system' | 'default'", "full": "'light' | 'dark' | 'system' | 'default'" }, "docs": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "default": "null", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; }" }, "docs": "Sets the download URL and filename for the download button." }, { "name": "customIcons", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "translations", "default": "null", "type": { "primitive": "object", "concise": "Partial<DefaultLayoutTranslations>", "full": "{ Play?: string; Pause?: string; \"Enter Fullscreen\"?: string; \"Exit Fullscreen\"?: string; \"Enter PiP\"?: string; \"Exit PiP\"?: string; \"Closed-Captions On\"?: string; \"Closed-Captions Off\"?: string; Mute?: string; Volume?: string; \"Seek Forward\"?: string; \"Seek Backward\"?: string; Announcements?: string; Accessibility?: string; AirPlay?: string; Audio?: string; Auto?: string; Boost?: string; Captions?: string; \"Caption Styles\"?: string; \"Captions look like this\"?: string; Chapters?: string; Connected?: string; Continue?: string; Connecting?: string; Default?: string; Disabled?: string; Disconnected?: string; \"Display Background\"?: string; Download?: string; Font?: string; Family?: string; Fullscreen?: string; \"Google Cast\"?: string; \"Keyboard Animations\"?: string; LIVE?: string; Loop?: string; Normal?: string; Off?: string; Playback?: string; PiP?: string; Quality?: string; Replay?: string; Reset?: string; Seek?: string; Settings?: string; \"Skip To Live\"?: string; Speed?: string; Size?: string; Color?: string; Opacity?: string; Shadow?: string; Text?: string; \"Text Background\"?: string; Track?: string; Unmute?: string; }" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "menuContainer", "default": "null", "type": { "primitive": "string", "concise": "string | HTMLElement", "full": "string | HTMLElement" }, "docs": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`." }, { "name": "menuGroup", "default": "'bottom'", "type": { "primitive": "string", "concise": "'top' | 'bottom'", "full": "'top' | 'bottom'" }, "docs": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout." }, { "name": "noAudioGain", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Disable audio boost slider in the settings menu." }, { "name": "noModal", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether modal menus should be disabled when the small layout is active. A modal menu is\na floating panel that floats up from the bottom of the screen (outside of the player). It's\nenabled by default as it provides a better user experience for touch devices." }, { "name": "noScrubGesture", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether to disable scrubbing by touch swiping left or right on the player canvas." }, { "name": "sliderChaptersMinWidth", "default": "325", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum width of the slider to start displaying slider chapters when available." }, { "name": "disableTimeSlider", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time slider should be disabled." }, { "name": "noGestures", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether all gestures such as press to play or seek should not be active." }, { "name": "noKeyboardAnimations", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether keyboard actions should not be displayed." }, { "name": "hideQualityBitrate", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the bitrate should be hidden in the settings quality hint." }, { "name": "playbackRates", "default": "{ min: 0, max: 2, step: 0.25 }", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The playback rate options to be displayed in the settings menu." }, { "name": "audioGains", "default": "{ min: 0, max: 300, step: 25 }", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The audio gain options to be displayed in the settings menu." }, { "name": "seekStep", "default": "10", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts." } ], "members": { "props": [ { "name": "isMatch", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true }, { "name": "isSmallLayout", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 2 }, "generics": { "props": "DefaultLayoutProps" } }, { "type": "component", "name": "DefaultVideoLayout", "file": { "path": "/home/derek/Code/7sage/vidstack-player/packages/vidstack/src/components/layouts/default/video-layout.ts" }, "docs": "The video layout is our production-ready UI that's displayed when the media view type is set to\n'video'. It includes support for picture-in-picture, fullscreen, slider chapters, slider\npreviews, captions, audio/quality settings, live streams, and much more out of the box.", "doctags": [ { "name": "attr", "text": "data-match - Whether this layout is being used (query match)." }, { "name": "attr", "text": "data-sm - The small layout is active" }, { "name": "attr", "text": "data-lg - The large layout is active." }, { "name": "attr", "text": "data-size - The active layout size." } ], "props": [ { "name": "when", "default": "({ viewType }) => viewType === 'video'", "type": { "primitive": "boolean", "concise": "boolean | MediaPlayerQuery", "full": "boolean | MediaPlayerQuery" }, "docs": "Determines when the UI should be displayed." }, { "name": "smallWhen", "default": "({ width, height }) => width < 576 || height < 380", "type": { "primitive": "mixed", "concise": "boolean | MediaPlayerQuery | 'never'", "full": "boolean | MediaPlayerQuery | 'never'" }, "docs": "Determines when the small (e.g., mobile) UI should be displayed." }, { "name": "thumbnails", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "colorScheme", "type": { "primitive": "string", "concise": "'light' | 'dark' | 'system' | 'default'", "full": "'light' | 'dark' | 'system' | 'default'" }, "docs": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; }" }, "docs": "Sets the download URL and filename for the download button." }, { "name": "customIcons", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "translations", "type": { "primitive": "object", "concise": "Partial<DefaultLayoutTranslations>", "full": "{ Play?: string; Pause?: string; \"Enter Fullscreen\"?: string; \"Exit Fullscreen\"?: string; \"Enter PiP\"?: string; \"Exit PiP\"?: string; \"Closed-Captions On\"?: string; \"Closed-Captions Off\"?: string; Mute?: string; Volume?: string; \"Seek Forward\"?: string; \"Seek Backward\"?: string; Announcements?: string; Accessibility?: string; AirPlay?: string; Audio?: string; Auto?: string; Boost?: string; Captions?: string; \"Caption Styles\"?: string; \"Captions look like this\"?: string; Chapters?: string; Connected?: string; Continue?: string; Connecting?: string; Default?: string; Disabled?: string; Disconnected?: string; \"Display Background\"?: string; Download?: string; Font?: string; Family?: string; Fullscreen?: string; \"Google Cast\"?: string; \"Keyboard Animations\"?: string; LIVE?: string; Loop?: string; Normal?: string; Off?: string; Playback?: string; PiP?: string; Quality?: string; Replay?: string; Reset?: string; Seek?: string; Settings?: string; \"Skip To Live\"?: string; Speed?: string; Size?: string; Color?: string; Opacity?: string; Shadow?: string; Text?: string; \"Text Background\"?: string; Track?: string; Unmute?: string; }" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "menuContainer", "type": { "primitive": "string", "concise": "string | HTMLElement", "full": "string | HTMLElement" }, "docs": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`." }, { "name": "menuGroup", "type": { "primitive": "string", "concise": "'top' | 'bottom'", "full": "'top' | 'bottom'" }, "docs": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout." }, { "name": "noAudioGain", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Disable audio boost slider in the settings menu." }, { "name": "noModal", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether modal menus should be disabled when the small layout is active. A modal menu is\na floating panel that floats up from the bottom of the screen (outside of the player). It's\nenabled by default as it provides a better user experience for touch devices." }, { "name": "noScrubGesture", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether to disable scrubbing by touch swiping left or right on the player canvas." }, { "name": "sliderChaptersMinWidth", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum width of the slider to start displaying slider chapters when available." }, { "name": "disableTimeSlider", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time slider should be disabled." }, { "name": "noGestures", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether all gestures such as press to play or seek should not be active." }, { "name": "noKeyboardAnimations", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether keyboard actions should not be displayed." }, { "name": "hideQualityBitrate", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the bitrate should be hidden in the settings quality hint." }, { "name": "playbackRates", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The playback rate options to be displayed in the settings menu." }, { "name": "audioGains", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The audio gain options to be displayed in the settings menu." }, { "name": "seekStep", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts." } ], "members": { "props": [ { "name": "isMatch", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true }, { "name": "isSmallLayout", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 2 }, "generics": { "props": "DefaultLayoutProps" } }, { "type": "component", "name": "PlyrLayout", "file": { "path": "/home/derek/Code/7sage/vidstack-player/packages/vidstack/src/components/layouts/plyr/plyr-layout.ts" }, "props": [ { "name": "clickToPlay", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Press the video container to toggle play/pause." }, { "name": "clickToFullscreen", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Double-press the video container to toggle fullscreen." }, { "name": "controls", "default": "[\n 'play-large',\n 'play',\n 'progress',\n 'current-time',\n 'mute+volume',\n 'captions',\n 'settings',\n 'pip',\n 'airplay',\n 'fullscreen',\n ]", "type": { "primitive": "object", "concise": "PlyrControl[]", "full": "PlyrControl[]" }, "docs": "The controls to be included in the layout and their order specified by the position in the\narray." }, { "name": "customIcons", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "displayDuration", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the duration should be displayed. This is ignored if `toggleTime` is `true`." }, { "name": "download", "default": "null", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; }" }, "docs": "Sets the download URL and filename for the download button. The download button must be\nincluded in the `controls` prop for this to take effect." }, { "name": "markers", "default": "null", "type": { "primitive": "object", "concise": "PlyrMarker[]", "full": "PlyrMarker[]" }, "docs": "Points on the time slider which should be visually marked for the user." }, { "name": "invertTime", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Display the current time as a countdown rather than an incremental counter." }, { "name": "thumbnails", "default": "null", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "toggleTime", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Allow users to press to toggle the inverted time." }, { "name": "translations", "default": "null", "type": { "primitive": "object", "concise": "Partial<PlyrLayoutTranslations>", "full": "{ Play?: string; Pause?: string; \"Enter Fullscreen\"?: string; \"Exit Fullscreen\"?: string; \"Enter PiP\"?: string; \"Exit PiP\"?: string; Mute?: string; Volume?: string; AirPlay?: string; Audio?: string; Auto?: string; Captions?: string; Default?: string; Disabled?: string; Download?: string; LIVE?: string; Loop?: string; Normal?: string; Quality?: string; Reset?: string; Seek?: string; Settings?: string; Speed?: string; Unmute?: string; Ad?: string; All?: string; Buffered?: string; \"Current time\"?: string; \"Disable captions\"?: string; Duration?: string; \"Enable captions\"?: string; Enabled?: string; End?: string; Forward?: string; \"Go back to previous menu\"?: string; Played?: string; Restart?: string; Rewind?: string; Start?: string; }" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "seekTime", "default": "10", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The time, in seconds, to seek when a user hits fast forward or rewind." }, { "name": "speed", "default": "[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4]", "type": { "primitive": "object", "concise": "(string | number)[]", "full": "(string | number)[]" }, "docs": "The speed options to display in the UI." } ], "generics": { "props": "PlyrLayoutProps" } }, { "type": "component", "name": "MediaPlayer", "file": { "path": "/home/derek/Code/7sage/vidstack-player/packages/vidstack/src/components/player.ts" }, "docs": "All media elements exist inside the `<media-player>` component. This component's main\nresponsibilities are to manage media state updates, dispatch media events, handle media\nrequests, and expose media state through HTML attributes and CSS properties for styling\npurposes.", "doctags": [ { "name": "attr", "text": "data-airplay - Whether AirPlay is connected." }, { "name": "attr", "text": "data-autoplay - Autoplay has successfully started." }, { "name": "attr", "text": "data-autoplay-error - Autoplay has failed to start." }, { "name": "attr", "text": "data-buffering - Media is not ready for playback or waiting for more data." }, { "name": "attr", "text": "data-can-airplay - Whether AirPlay is available." }, { "name": "attr", "text": "data-can-fullscreen - Fullscreen mode is available." }, { "name": "attr", "text": "data-can-google-cast - Whether Google Cast is available." }, { "name": "attr", "text": "data-can-load - Media can now begin loading." }, { "name": "attr", "text": "data-can-pip - Picture-in-Picture mode is available." }, { "name": "attr", "text": "data-can-play - Media is ready for playback." }, { "name": "attr", "text": "data-can-seek - Seeking operations are permitted." }, { "name": "attr", "text": "data-captions - Captions are available and visible." }, { "name": "attr", "text": "data-controls - Controls are visible." }, { "name": "attr", "text": "data-ended - Playback has ended." }, { "name": "attr", "text": "data-error - Issue with media loading/playback." }, { "name": "attr", "text": "data-fullscreen - Fullscreen mode is active." }, { "name": "attr", "text": "data-google-cast - Whether Google Cast is connected." }, { "name": "attr", "text": "data-ios-controls - iOS controls are visible." }, { "name": "attr", "text": "data-load - Specified load strategy." }, { "name": "attr", "text": "data-live - Media is live stream." }, { "name": "attr", "text": "data-live-edge - Playback is at the live edge." }, { "name": "attr", "text": "data-loop - Media is set to replay on end." }, { "name": "attr", "text": "data-media-type - Current media type (audio/video)." }, { "name": "attr", "text": "data-muted - Whether volume is muted (0)." }, { "name": "attr", "text": "data-orientation - Current screen orientation (landscape/portrait)." }, { "name": "attr", "text": "data-paused - Whether playback is paused." }, { "name": "attr", "text": "data-pip - Picture-in-picture mode is active." }, { "name": "attr", "text": "data-playing - Playback is active." }, { "name": "attr", "text": "data-playsinline - Media should play inline by default (iOS)." }, { "name": "attr", "text": "data-pointer - The user's pointer device type (coarse/fine)." }, { "name": "attr", "text": "data-preview - The user is interacting with the time slider." }, { "name": "attr", "text": "data-remote-type - The remote playback type (airplay/google-cast)." }, { "name": "attr", "text": "data-remote-state - The remote playback state (connecting/connected/disconnected)." }, { "name": "attr", "text": "data-seeking - User is seeking to a new playback position." }, { "name": "attr", "text": "data-started - Media playback has started." }, { "name": "attr", "text": "data-stream-type - Current stream type." }, { "name": "attr", "text": "data-view-type - Current view type (audio/video)." }, { "name": "attr", "text": "data-waiting - Media is waiting for more data to resume playback." }, { "name": "attr", "text": "data-focus - Whether player is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether player is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/media/player" } ], "props": [ { "name": "autoplay", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "deprecated": true }, { "name": "crossorigin", "default": "null", "type": { "primitive": "mixed", "concise": "string | true", "full": "string | true" }, "deprecated": true }, { "name": "crossOrigin", "default": "null", "type": { "primitive": "mixed", "concise": "true | MediaCrossOrigin", "full": "true | MediaCrossOrigin" }, "docs": "Defines how the media element handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] }, { "name": "duration", "default": "-1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A `double` indicating the total playback length of the media in seconds. If this is not\nprovided it will be determined when the media loaded." }, { "name": "src", "default": "''", "type": { "primitive": "string", "concise": "PlayerSrc", "full": "MediaSrc | MediaSrc[]" }, "docs": "The URL and optionally type of the current media resource/s to be considered for playback.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#sources" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject" } ] }, { "name": "logLevel", "default": "__DEV__ ? 'warn' : 'silent'", "type": { "primitive": "string", "concise": "LogLevel", "full": "'error' | 'silent' | 'warn' | 'info' | 'debug'" }, "docs": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`." }, { "name": "load", "default": "'visible'", "type": { "primitive": "string", "concise": "MediaLoadingStrategy", "full": "'play' | 'visible' | 'eager' | 'idle' | 'custom'" }, "docs": "Indicates when the provider can begin loading media.\n\n- `eager`: media will be loaded immediately.\n- `idle`: media will be loaded after the page has loaded and `requestIdleCallback` is fired.\n- `visible`: media will delay loading until the provider has entered the viewport.\n- `custom`: media will wait for the `startLoading()` method or `media-start-loading` event.\n- `play`: media will delay loading until there is a play request.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "posterLoad", "default": "'visible'", "type": { "primitive": "string", "concise": "MediaPosterLoadingStrategy", "full": "'visible' | 'eager' | 'idle' | 'custom'" }, "docs": "Indicates when the player can begin loading the poster.\n\n- `eager`: poster will be loaded immediately.\n- `idle`: poster will be loaded after the page has loaded and `requestIdleCallback` is fired.\n- `visible`: poster will delay loading until the provider has entered the viewport.\n- `custom`: poster will wait for the `startLoadingPoster()` method or `media-poster-start-loading` event.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "controlsDelay", "default": "2000", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The default amount of delay in milliseconds while media playback is progressing without user\nactivity to indicate an idle state and hide controls." }, { "name": "hideControlsOnMouseLeave", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether controls visibility should be toggled when the mouse enters and leaves the player\ncontainer." }, { "name": "fullscreenOrientation", "default": "'landscape'", "type": { "primitive": "string", "concise": "'none' | ScreenOrientationLockType", "full": "'none' | ScreenOrientationLockType" }, "docs": "This method will indicate the orientation to lock the screen to when in fullscreen mode and\nthe Screen Orientation API is available." }, { "name": "googleCast", "default": "{}", "type": { "primitive": "object", "concise": "GoogleCastOptions", "full": "GoogleCastOptions" }, "docs": "Google Cast options.", "doctags": [ { "name": "see", "text": "https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastOptions" } ] }, { "name": "playsinline", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "deprecated": true }, { "name": "preferNativeHLS", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether native HLS support is preferred over using `hls.js`. We recommend setting this to\n`false` to ensure a consistent and configurable experience across browsers. In addition, our\nlive stream support and DVR detection is much better with `hls.js` so choose accordingly.\n\nThis should generally only be set to `true` if (1) you're working with HLS streams, and (2)\nyou want AirPlay to work via the native Safari controls (i.e., `controls` attribute is\npresent on the `<media-player>` element)." }, { "name": "keyDisabled", "default": "'false'", "type": { "p