ogplayer 0.1.0

package/dist/ui/icons.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Control glyphs — the EXACT vector paths from the Android SDK's
+ * `og_ic_*.xml` drawables (24×24 viewport, stroked, round caps/joins), so
+ * the three platforms render identical iconography. `filled` paths use fill
+ * instead of stroke (play/pause/volume body).
+ */
+export interface IconDef {
+    strokes?: string[];
+    fills?: string[];
+}
+export declare const icons: Record<string, IconDef>;
+export declare function iconSvg(name: string, size: number, color: string, strokeWidth?: number): string;
+/** The OGPlayer identity mark (aperture + play triangle) — watermark lockup. */
+export declare function brandMarkSvg(size: number, frameColor: string, accent: string): string;

package/dist/ui/og-player.d.ts

@@ -0,0 +1,167 @@
+import type { OGPlayer } from "../core/player.js";
+import type { OGPlayerError } from "../core/types.js";
+import { type OGControlColors, type OGControlDimens } from "./tokens.js";
+/** A host-supplied icon button rendered left of the (future) cast position —
+ * icon-only, max 8, part of the chrome (mirrors Android/iOS `CustomAction`). */
+export interface CustomAction {
+    /** Inline SVG markup (24×24 recommended); rendered with the chrome tint. */
+    svg: string;
+    accessibilityLabel?: string;
+    onClick: () => void;
+}
+/** Per-control visibility + behavior — Android's `OGUiConfig` counterpart. */
+export interface OGUIConfig {
+    showProgressBar: boolean;
+    showTimeLabels: boolean;
+    showSeekButtons: boolean;
+    showVolumeButton: boolean;
+    showSpeedButton: boolean;
+    showQualityButton: boolean;
+    showAudioTrackButton: boolean;
+    showSubtitleButton: boolean;
+    showFullscreenButton: boolean;
+    showTitle: boolean;
+    showContentRatings: boolean;
+    controlsTimeoutMs: number;
+    titleTimeoutMs: number;
+    contentRatingsTimeoutMs: number;
+    doubleClickToSeek: boolean;
+    /** Yellow VMAP break dots on the scrubber (mobile parity). */
+    showAdCueMarkers: boolean;
+    customActions: CustomAction[];
+    /** Chrome theming — partial overrides merged over the OGPlayer defaults
+     * (mobile parity: OGControlColors / OGControlDimens). */
+    colors?: Partial<OGControlColors>;
+    dimens?: Partial<OGControlDimens>;
+    /** Extra CSS applied to the title overlay (mobile parity: titleTextStyle /
+     * titleFont), e.g. `font-size:22px; font-family:Georgia;`. */
+    titleStyle?: string;
+    /** Glyph overrides — inline SVG markup, tinted like the chrome
+     * (mobile parity: setPlayIcon / setPauseIcon / setSeekForwardIcon …). */
+    playIconSvg?: string;
+    pauseIconSvg?: string;
+    replayIconSvg?: string;
+    seekForwardIconSvg?: string;
+    seekBackwardIconSvg?: string;
+    fullscreenEnterIconSvg?: string;
+    fullscreenExitIconSvg?: string;
+    subtitlesIconSvg?: string;
+    audioTrackIconSvg?: string;
+    speedIconSvg?: string;
+    qualityIconSvg?: string;
+    volumeOnIconSvg?: string;
+    volumeMuteIconSvg?: string;
+    adPlayIconSvg?: string;
+    adPauseIconSvg?: string;
+    /** What happens when an ad blocker is detected (error 902):
+     *  - "notice": content plays ad-free with a dismissible nudge (default)
+     *  - "block":  playback stops and the video is hidden until the viewer
+     *              disables the blocker and reloads — the hard broadcaster line
+     *  - "none":   the SDK stays quiet; the host handles the 902 event itself */
+    adBlockerPolicy: "none" | "notice" | "block";
+    /** When set, the fullscreen-exit button calls this instead of leaving
+     * fullscreen — the host decides (typically: close the screen). Mobile
+     * parity: `onFullscreenExitRequest`. The browser's own Esc key still
+     * exits directly (platform behavior that cannot be intercepted). */
+    onFullscreenExitRequest?: () => void;
+    /** Show a Retry button on the error overlay (default true). Retry
+     * reloads the failed item — VOD resumes where playback stopped. */
+    showRetryButton: boolean;
+    /** Label of the Retry button (default "Retry"). */
+    retryButtonLabel: string;
+    /** Your own error-overlay text, in any language — called with the full
+     * OGPlayerError (stable codes: 2000 network, 3000 source, 4000 DRM,
+     * 5000 renderer, 6000 live, 9000 unknown). Return null/undefined for the
+     * SDK default. The error object still reaches onError unchanged. */
+    errorMessageProvider?: (error: OGPlayerError) => string | null | undefined;
+}
+export declare const defaultUIConfig: OGUIConfig;
+/** Every control flag off — headless chrome in one call (mobile parity:
+ * `hideAllControls()`). Title/ratings stay, exactly like Android/iOS. */
+export declare function hidingAllControls(overrides?: Partial<OGUIConfig>): Partial<OGUIConfig>;
+/**
+ * `<og-player>` — the OGPlayer UI as a framework-agnostic custom element
+ * (works in plain HTML, React, Vue, Angular alike). Attach an `OGPlayer`
+ * engine via the `player` property; overlays (watermarks, logos) go into the
+ * nine named slots (`slot="top-end"` …), mirroring the Android/iOS
+ * `OverlaySlot` system including the clearance choreography.
+ */
+export declare class OGPlayerElement extends HTMLElement {
+    private playerRef;
+    private cfg;
+    private root;
+    private controlsVisible;
+    private hideTimer;
+    private bufferingTimer;
+    private scrubbing;
+    private openMenu;
+    private titleShownGeneration;
+    private ratingsShownGeneration;
+    private ratingRowVisible;
+    private lastSeenGeneration;
+    /** True after a fatal error: the chrome stays hidden until the next load. */
+    private errored;
+    private lastOverlayGeneration;
+    private lastCueKey;
+    private lastAdCueKey;
+    private col;
+    private dimE;
+    private dimF;
+    private overlayTimers;
+    private detachFns;
+    constructor();
+    get player(): OGPlayer | null;
+    set player(p: OGPlayer | null);
+    get config(): OGUIConfig;
+    set config(c: Partial<OGUIConfig>);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get dims();
+    /** Configured override for a glyph, or the built-in vector. */
+    private glyph;
+    private mount;
+    private q;
+    private css;
+    private buildButtons;
+    private buildTopEnd;
+    private toggleMenu;
+    private closeMenu;
+    private bind;
+    private bindScrub;
+    /** Storyboard preview above the scrubber (mobile trick-play parity). */
+    private thumbPreviewSeq;
+    private showThumbPreview;
+    private hideThumbPreview;
+    private paintScrub;
+    private onState;
+    /** Title + content ratings: once per load, at content start, timed fade. */
+    private maybeShowOnceOverlays;
+    private ratingHtml;
+    /** While the rating row is shown, the top-end button row drops below it
+     * and top-row overlays clear both — the Android/iOS choreography. */
+    private setRatingRow;
+    private applyOverlayInsets;
+    private showControls;
+    private hideControls;
+    private armAutoHide;
+    private cancelAutoHide;
+    private syncAll;
+    private syncButtons;
+    private syncProgress;
+    /** Yellow dots on the track where VMAP breaks will play (mobile parity). */
+    private paintAdCues;
+    private syncPeriodic;
+    /** Break-mode UI: the SDK yields the chrome to the ad layer and draws its
+     * own yellow bar + AD chip + centered transport (mobile parity — IMA
+     * renders its own skip/clickthrough on top of its layer). */
+    private syncAdUi;
+    private syncWatermark;
+    private applyCueSize;
+    /** Enter fullscreen — must be called from a user gesture (browser policy);
+     * a "starts in fullscreen" flow calls this from its start button. */
+    enterFullscreen(): Promise<void>;
+    exitFullscreen(): void;
+    private toggleFullscreen;
+    private detach;
+}
+export declare function defineOGPlayerElement(): void;

package/dist/ui/tokens.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Design tokens — Android's `OGControlColors` / `OGControlDimens`,
+ * token-for-token (dp → px at CSS-pixel scale, which is the same unit
+ * philosophy the Android/iOS SDKs use).
+ */
+export interface OGControlColors {
+    foreground: string;
+    foregroundMuted: string;
+    foregroundFaint: string;
+    trackPlayed: string;
+    trackBuffered: string;
+    trackRemaining: string;
+    thumb: string;
+    thumbHalo: string;
+    pressed: string;
+    liveEdge: string;
+    liveBehind: string;
+    adAccent: string;
+    menuSurface: string;
+    menuSelected: string;
+    menuBorder: string;
+    chipSurface: string;
+}
+export declare const defaultColors: OGControlColors;
+export interface OGControlDimens {
+    trackHeight: number;
+    trackHeightActive: number;
+    thumbSize: number;
+    thumbSizeActive: number;
+    thumbHaloSize: number;
+    scrubTouchHeight: number;
+    iconSize: number;
+    playButtonSize: number;
+    playGlyphSize: number;
+    seekButtonSize: number;
+    seekGlyphSize: number;
+    clusterGap: number;
+    bottomBarHeight: number;
+    edgeInset: number;
+    bottomScrimHeight: number;
+    topScrimHeight: number;
+    menuMinWidth: number;
+    menuMaxWidth: number;
+    menuItemHeight: number;
+    menuCorner: number;
+    chipHeight: number;
+    adCueMarkerSize: number;
+}
+export declare const embeddedDimens: OGControlDimens;
+/** Fullscreen step-up (Android `forFullscreen()`). */
+export declare const fullscreenDimens: OGControlDimens;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "ogplayer",
+  "version": "0.1.0",
+  "description": "OGPlayer web SDK — one video player API across Android, iOS and the web.",
+  "type": "module",
+  "main": "./dist/ogplayer.js",
+  "module": "./dist/ogplayer.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ogplayer.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node build.mjs && tsc -p tsconfig.json --emitDeclarationOnly --outDir dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --test test/",
+    "dev": "node build.mjs --serve",
+    "smoke": "node scripts/smoke.mjs"
+  },
+  "dependencies": {
+    "hls.js": "^1.5.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.23.0",
+    "playwright": "^1.62.1",
+    "typedoc": "^0.28.20",
+    "typescript": "^5.5.0"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://ogplayer.tv",
+  "repository": { "type": "git", "url": "https://github.com/ogplayer-sdk/ogplayer-web.git" },
+  "keywords": ["video", "player", "hls", "drm", "widevine", "fairplay", "ima", "ads", "web-component"],
+  "author": "OGPlayer (Inverse DOO) <hello@ogplayer.tv>"
+}