@grizzshutsdown/simpleplayer 0.1.0 → 0.1.2

package/README.md

@@ -77,6 +77,7 @@ declare module 'react' {
         'preload-margin'?: string;
         controls?: boolean;
         'disable-autoplay'?: boolean;
+        'show-time'?: boolean;
       };
     }
   }
@@ -98,6 +99,7 @@ declare module 'react' {
 - `preload-margin`: lazy-load margin before the video enters view. Default: `360px 0px`.
 - `controls`: add volume, Picture-in-Picture, and fullscreen controls.
 - `disable-autoplay`: turn off default autoplay. Autoplay starts muted so browsers allow it.
+- `show-time`: keep the timestamp visible in a left glass holder when `controls` is enabled.
 
 The default player matches the simple preview: play/pause, scrubber, muted autoplay, and no extra side controls.
 
@@ -111,6 +113,7 @@ player.aspectRatio = '1 / 1';
 player.preloadMargin = '240px 0px';
 player.autoplayEnabled = false;
 player.controlsEnabled = true;
+player.timeVisible = true;
 player.volumeEnabled = true;
 player.volumeSliderEnabled = false;
 player.pictureInPictureEnabled = true;
@@ -124,12 +127,23 @@ npm install
 npm run dev
 ```
 
-The dev playground lives in `dev/` and imports `src/simple-player.ts` directly. Use it when changing the player itself. The production site demo is separate and runs with:
+The dev playground lives in `dev/` and imports `src/simple-player.ts` directly. Use it when changing the player itself.
+
+The hosted demo is separate from the package source. It has its own consumer install in `site/`, then imports the published package the same way a user would:
 
 ```bash
+npm install --prefix site
 npm run demo
 ```
 
+Cloudflare Pages uses:
+
+```bash
+npm run build
+```
+
+with `site-dist` as the output directory.
+
 Before opening a pull request, run:
 
 ```bash

package/dist/player/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_ASPECT_RATIO = "16 / 9";
+export declare const DEFAULT_PRELOAD_MARGIN = "360px 0px";
+export declare const OBSERVED_ATTRIBUTES: readonly ["src", "aspect-ratio", "preload-margin", "controls", "disable-autoplay", "enable-volume", "disable-volume", "disable-volume-slider", "enable-picture-in-picture", "disable-picture-in-picture", "enable-fullscreen", "disable-fullscreen", "show-time", "no-autoplay", "no-volume", "no-volume-slider", "no-picture-in-picture", "no-fullscreen"];

package/dist/player/fullscreen.d.ts

@@ -0,0 +1,6 @@
+export declare function getFullscreenElement(root: ShadowRoot): Element | null;
+export declare function isFullscreenSupported(fullscreenEnabled: boolean, player: HTMLElement, video: HTMLVideoElement): boolean;
+export declare function requestPlayerFullscreen(player: HTMLElement): Promise<void>;
+export declare function canRequestPlayerFullscreen(player: HTMLElement): boolean;
+export declare function requestVideoFullscreen(video: HTMLVideoElement): void;
+export declare function exitFullscreen(): Promise<void>;

package/dist/player/media.d.ts

@@ -0,0 +1,2 @@
+export declare function formatVideoTime(time: number): string;
+export declare function detectAudioAvailability(video: HTMLVideoElement, fallback: boolean): boolean;

package/dist/player/progress.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressMetrics } from './types';
+export declare function getProgressMetrics(rect: DOMRect): ProgressMetrics;
+export declare function getProgressXFromPercent(percent: number, rect: DOMRect): number;
+export declare function getProgressPercentFromClientX(clientX: number, rect: DOMRect): number;

package/dist/player/simple-player-element.d.ts

@@ -0,0 +1,28 @@
+export declare class SimplePlayer extends HTMLElement {
+    #private;
+    static observedAttributes: readonly ["src", "aspect-ratio", "preload-margin", "controls", "disable-autoplay", "enable-volume", "disable-volume", "disable-volume-slider", "enable-picture-in-picture", "disable-picture-in-picture", "enable-fullscreen", "disable-fullscreen", "show-time", "no-autoplay", "no-volume", "no-volume-slider", "no-picture-in-picture", "no-fullscreen"];
+    constructor();
+    get src(): string;
+    set src(value: string);
+    get aspectRatio(): string;
+    set aspectRatio(value: string);
+    get preloadMargin(): string;
+    set preloadMargin(value: string);
+    get autoplayEnabled(): boolean;
+    set autoplayEnabled(value: boolean);
+    get controlsEnabled(): boolean;
+    set controlsEnabled(value: boolean);
+    get timeVisible(): boolean;
+    set timeVisible(value: boolean);
+    get volumeEnabled(): boolean;
+    set volumeEnabled(value: boolean);
+    get volumeSliderEnabled(): boolean;
+    set volumeSliderEnabled(value: boolean);
+    get pictureInPictureEnabled(): boolean;
+    set pictureInPictureEnabled(value: boolean);
+    get fullscreenEnabled(): boolean;
+    set fullscreenEnabled(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/player/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: string;

package/dist/player/template.d.ts

@@ -0,0 +1 @@
+export declare const template: HTMLTemplateElement;

package/dist/player/types.d.ts

@@ -0,0 +1,33 @@
+export type FullscreenDocument = Document & {
+    webkitFullscreenElement?: Element | null;
+    webkitFullscreenEnabled?: boolean;
+    webkitExitFullscreen?: () => Promise<void> | void;
+    mozFullScreenElement?: Element | null;
+    mozFullScreenEnabled?: boolean;
+    mozCancelFullScreen?: () => Promise<void> | void;
+    msFullscreenElement?: Element | null;
+    msFullscreenEnabled?: boolean;
+    msExitFullscreen?: () => Promise<void> | void;
+};
+export type FullscreenPlayer = HTMLElement & {
+    webkitRequestFullscreen?: () => Promise<void> | void;
+    mozRequestFullScreen?: () => Promise<void> | void;
+    msRequestFullscreen?: () => Promise<void> | void;
+};
+export type FullscreenVideo = HTMLVideoElement & {
+    webkitEnterFullscreen?: () => void;
+    webkitEnterFullScreen?: () => void;
+    webkitSupportsFullscreen?: boolean;
+    webkitDisplayingFullscreen?: boolean;
+};
+export type Cleanup = () => void;
+export type PlaybackState = 'playing' | 'paused' | null;
+export type ProgressMetrics = {
+    rect: DOMRect;
+    sideInset: number;
+    innerWidth: number;
+};
+export type ScrubPoint = {
+    percent: number;
+    targetTime: number;
+};

package/dist/simple-player.d.ts

@@ -1,29 +1,5 @@
-export declare class SimplePlayer extends HTMLElement {
-    #private;
-    static observedAttributes: string[];
-    constructor();
-    get src(): string;
-    set src(value: string);
-    get aspectRatio(): string;
-    set aspectRatio(value: string);
-    get preloadMargin(): string;
-    set preloadMargin(value: string);
-    get autoplayEnabled(): boolean;
-    set autoplayEnabled(value: boolean);
-    get controlsEnabled(): boolean;
-    set controlsEnabled(value: boolean);
-    get volumeEnabled(): boolean;
-    set volumeEnabled(value: boolean);
-    get volumeSliderEnabled(): boolean;
-    set volumeSliderEnabled(value: boolean);
-    get pictureInPictureEnabled(): boolean;
-    set pictureInPictureEnabled(value: boolean);
-    get fullscreenEnabled(): boolean;
-    set fullscreenEnabled(value: boolean);
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-}
+import { SimplePlayer } from './player/simple-player-element';
+export { SimplePlayer } from './player/simple-player-element';
 declare global {
     interface HTMLElementTagNameMap {
         'simple-player': SimplePlayer;