itube-modern-player 0.3.1 → 0.4.0

package/dist/types.d.ts

@@ -22,6 +22,21 @@ export interface Chapter {
     /** Chapter title shown in the seek tooltip and the chapter label. */
     title: string;
 }
+/**
+ * A named breakdown of the video into scenes of one type (actors, locations,
+ * actions, …). Several groups can be attached to a source; the scene-type
+ * control switches the active one, rebuilding the timeline + scenes panel.
+ */
+export interface SceneGroup {
+    /** Stable id, e.g. `"actions"` / `"locations"`. */
+    id: string;
+    /** Label shown on the scene-type control and in its dropdown. */
+    title: string;
+    /** Icon for the control/dropdown: raw `<svg>` markup or an image URL. */
+    icon?: string;
+    /** Scenes (chapters) for this type. */
+    scenes: Chapter[];
+}
 /** An alternative quality rendition for progressive (non-HLS) sources. */
 export interface QualityLevel {
     /** Stream / file URL for this rendition. */
@@ -96,6 +111,13 @@ export interface VideoSource {
     sponsor?: SponsorLink;
     /** Chapters as an array, or a URL of a WebVTT chapters file. */
     chapters?: Chapter[] | string;
+    /**
+     * Typed scene breakdowns (actors / locations / actions / …). When set, the
+     * scene-type control lets the viewer switch between them, and the active
+     * group's `scenes` drive the timeline segments + scenes panel (taking
+     * precedence over `chapters`).
+     */
+    sceneGroups?: SceneGroup[];
     /** Alternative renditions for progressive sources. Ignored for HLS (levels come from the manifest). */
     qualities?: QualityLevel[];
     /**
@@ -214,6 +236,13 @@ export interface ActionsOptions {
  * - `false`: off. `true` is an alias for `"gear"`.
  */
 export type SettingPlacement = boolean | 'gear' | 'bar';
+/** Formats the seek-button caption. `seconds` is the step; `direction` the arrow. */
+export type SeekLabelFormat = (seconds: number, direction: 'back' | 'forward') => string;
+/**
+ * Stable keys of the right-cluster controls (for `controls.order`). Custom
+ * action buttons placed in the bar are addressed as `` `custom:${id}` ``.
+ */
+export type ControlBarItem = 'like' | 'dislike' | 'speed' | 'quality' | 'subtitles' | 'gear' | 'scenes' | 'sceneTypes' | 'playlist' | 'pip' | 'fullscreen' | `custom:${string}`;
 /** What the "next video" hover preview shows. `true`/`false` toggle all of it. */
 export interface NextPreviewOptions {
     /** Thumbnail (next source's `poster`). Default true. */
@@ -240,14 +269,21 @@ export interface ControlsOptions {
     quality?: SettingPlacement;
     /** Scene list button — appears when the source has chapters. Default true. */
     scenes?: boolean;
+    /** Scene-type selector (dropdown) — appears when the source has `sceneGroups`. Default true. */
+    sceneTypes?: boolean;
     /** Popularity heatmap above the progress bar (needs `source.heatmap` data). Default true. */
     heatmap?: boolean;
     /** Subtitles. Default `"gear"` (inside the settings dropdown). */
     subtitles?: SettingPlacement;
-    /** Skip-back / skip-forward buttons. Pass an object to change the step (seconds). */
+    /**
+     * Skip-back / skip-forward buttons. Pass an object to change the step (seconds)
+     * and/or the caption format. `label` is a formatter — the most flexible option
+     * (a regex matches, it doesn't format); default → `"−15s"` / `"+15s"`.
+     */
     seekButtons?: boolean | {
         back?: number;
         forward?: number;
+        label?: SeekLabelFormat;
     };
     /**
      * Where the prev/seek/play/next cluster lives:
@@ -256,6 +292,12 @@ export interface ControlsOptions {
      *   over the video on mobile). This is the pre-0.3 desktop behaviour.
      */
     seekPlacement?: 'overlay' | 'bar';
+    /**
+     * Left-to-right order of the right-cluster controls (gear, pip, playlist, …).
+     * Omit / empty → built-in order. Listed keys go first (in this order); any not
+     * listed keep their default position after them. The ⋯ menu stays last.
+     */
+    order?: ControlBarItem[];
     /** Previous / next / list buttons (only rendered when a playlist is present). */
     playlist?: boolean;
     /**
@@ -319,6 +361,12 @@ export interface PlayerLabels {
     previous: string;
     playlist: string;
     scenes: string;
+    /** Header of the scene-type selector dropdown. */
+    sceneTypes: string;
+    /** Autoplay toggle in the settings dropdown. */
+    autoplay: string;
+    /** "Play next" button on the up-next end overlay. */
+    playNext: string;
     shuffle: string;
     repeat: string;
     like: string;
@@ -465,6 +513,10 @@ export interface PlayerEventMap {
     chapterchange: {
         chapter: Chapter | null;
     };
+    /** Fired when the active scene type (group) changes. */
+    scenetypechange: {
+        group: SceneGroup | null;
+    };
     fullscreenchange: {
         active: boolean;
     };

package/dist/ui/controls.d.ts

@@ -18,6 +18,9 @@ export declare class Controls {
     private fullscreenBtn;
     private row;
     private rightGroup;
+    private seekLabelFn?;
+    /** Right-cluster controls keyed for ordering; appended in `controls.order`. */
+    private rightItems;
     private subtitlesBtn;
     private settingsBtn;
     private settingsMenu;
@@ -35,6 +38,8 @@ export declare class Controls {
     private nextPreviewEl;
     private nextPreviewOpts;
     private scenesBtn;
+    private sceneTypeBtn;
+    private sceneTypeMenu;
     private likeBtn;
     private dislikeBtn;
     private likeCountEl;
@@ -59,14 +64,24 @@ export declare class Controls {
     constructor(player: Player);
     private onWindowResize;
     private registerCollapsible;
+    /**
+     * Append the right-cluster controls. Built-in order = creation order; if
+     * `controls.order` is set, its keys go first (in that order), then any
+     * unlisted controls keep their default position. (⋯ is appended separately.)
+     */
+    private layoutRightCluster;
     /** Center-cluster button — deliberately NOT `.imp-btn` (own sizing/look). */
     private makeCenterButton;
-    /** Caption under the seek arrow showing the signed step, e.g. "−15s" / "+15s". */
+    /** Caption under the seek arrow. Default "−15s"/"+15s"; overridable via `controls.seekButtons.label`. */
     private addStepBadge;
     /** Sections for the gear when overflowed into ⋯ (expanded, no drill-down). */
     private gearSections;
     /** Gear drill-down rows: one per setting, each showing its current value. */
     private gearEntries;
+    /** Update the scene-type button to the active group's icon + title. */
+    private refreshSceneTypeButton;
+    private sceneTypeSection;
+    private toggleSceneTypeMenu;
     private toggleGearMenu;
     private setupNextPreview;
     private bindNextPreview;

package/dist/ui/menu.d.ts

@@ -10,14 +10,22 @@ export interface MenuSection {
     items: MenuItem[];
     onSelect(value: string): void;
 }
-/** One row in the settings (gear) drill-down: label + current value → options. */
+/**
+ * One row in the settings (gear) drill-down. Either a drill row (label + current
+ * value → options) or a toggle row (label + on/off switch).
+ */
 export interface SettingEntry {
     key: string;
     label: string;
-    /** Current value shown on the row, e.g. "Auto", "1×", "Off". */
-    value: string;
-    /** The options panel to drill into when the row is clicked. */
-    section(): MenuSection;
+    /** Current value shown on a drill row, e.g. "Auto", "1×", "Off". */
+    value?: string;
+    /** The options panel to drill into when a drill row is clicked. */
+    section?(): MenuSection;
+    /** Present → render a toggle switch instead of a drill row. */
+    toggle?: {
+        value: boolean;
+        onChange(next: boolean): void;
+    };
 }
 /**
  * Popup menu anchored above a control button. One instance per button;
@@ -37,6 +45,8 @@ export declare class Menu {
     toggleSettings(title: string, entries: SettingEntry[]): void;
     showSettings(_title: string, entries: SettingEntry[]): void;
     private renderSettingsRoot;
+    /** Toggle row: label + an on/off switch. Stays in the menu (no close). */
+    private buildToggleRow;
     private renderSettingsDetail;
     /** Build one option block (radio items) from a section. */
     private renderSection;

package/dist/ui/overlays.d.ts

@@ -61,3 +61,15 @@ export declare class RelatedOverlay {
     show(): void;
     hide(): void;
 }
+/**
+ * End-of-video "up next" overlay shown when autoplay is OFF and a next item
+ * exists: a preview card of the next video + a "Play next" button.
+ */
+export declare class UpNextOverlay {
+    private player;
+    readonly root: HTMLElement;
+    constructor(player: Player);
+    get visible(): boolean;
+    show(): void;
+    hide(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itube-modern-player",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Lightweight, framework-agnostic HTML5 video player: HLS streams, playlists, chapters, VTT subtitles, sprite previews, VAST ads. Ships with a Vue 3 wrapper.",
   "type": "module",
   "main": "./dist/index.cjs",

package/dist/labels-AHLc5npk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"labels-AHLc5npk.js","sources":["../src/core/labels.ts"],"sourcesContent":["import type { PlayerLabels } from '../types'\n\nexport const defaultLabels: PlayerLabels = {\n  play: 'Play',\n  pause: 'Pause',\n  replay: 'Replay',\n  mute: 'Mute',\n  unmute: 'Unmute',\n  fullscreen: 'Fullscreen',\n  exitFullscreen: 'Exit fullscreen',\n  pip: 'Picture-in-picture',\n  settings: 'Playback speed',\n  scenes: 'Scenes',\n  shuffle: 'Shuffle',\n  repeat: 'Repeat',\n  subtitles: 'Subtitles',\n  subtitlesOff: 'Off',\n  speed: 'Speed',\n  quality: 'Quality',\n  qualityAuto: 'Auto',\n  next: 'Next',\n  previous: 'Previous',\n  playlist: 'Playlist',\n  like: 'Like',\n  dislike: 'Dislike',\n  addTo: 'Save to…',\n  share: 'Share',\n  report: 'Report',\n  more: 'More actions',\n  seekForward: 'Seek forward',\n  seekBack: 'Seek back',\n  secondsShort: 's',\n  live: 'LIVE',\n  related: 'More videos',\n  adLabel: 'Ad',\n  skipAd: 'Skip ad',\n  skipAdIn: 'Skip in',\n  visitAdvertiser: 'Visit advertiser',\n  sponsored: 'Sponsored',\n}\n"],"names":["defaultLabels"],"mappings":"AAEO,MAAMA,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb,UAAU;AAAA,EACV,cAAc;AAAA,EACd,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,WAAW;AACb;"}

package/dist/labels-BVAa_H4n.cjs

@@ -1,2 +0,0 @@
-"use strict";const e={play:"Play",pause:"Pause",replay:"Replay",mute:"Mute",unmute:"Unmute",fullscreen:"Fullscreen",exitFullscreen:"Exit fullscreen",pip:"Picture-in-picture",settings:"Playback speed",scenes:"Scenes",shuffle:"Shuffle",repeat:"Repeat",subtitles:"Subtitles",subtitlesOff:"Off",speed:"Speed",quality:"Quality",qualityAuto:"Auto",next:"Next",previous:"Previous",playlist:"Playlist",like:"Like",dislike:"Dislike",addTo:"Save to…",share:"Share",report:"Report",more:"More actions",seekForward:"Seek forward",seekBack:"Seek back",secondsShort:"s",live:"LIVE",related:"More videos",adLabel:"Ad",skipAd:"Skip ad",skipAdIn:"Skip in",visitAdvertiser:"Visit advertiser",sponsored:"Sponsored"};exports.defaultLabels=e;
-//# sourceMappingURL=labels-BVAa_H4n.cjs.map

package/dist/labels-BVAa_H4n.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"labels-BVAa_H4n.cjs","sources":["../src/core/labels.ts"],"sourcesContent":["import type { PlayerLabels } from '../types'\n\nexport const defaultLabels: PlayerLabels = {\n  play: 'Play',\n  pause: 'Pause',\n  replay: 'Replay',\n  mute: 'Mute',\n  unmute: 'Unmute',\n  fullscreen: 'Fullscreen',\n  exitFullscreen: 'Exit fullscreen',\n  pip: 'Picture-in-picture',\n  settings: 'Playback speed',\n  scenes: 'Scenes',\n  shuffle: 'Shuffle',\n  repeat: 'Repeat',\n  subtitles: 'Subtitles',\n  subtitlesOff: 'Off',\n  speed: 'Speed',\n  quality: 'Quality',\n  qualityAuto: 'Auto',\n  next: 'Next',\n  previous: 'Previous',\n  playlist: 'Playlist',\n  like: 'Like',\n  dislike: 'Dislike',\n  addTo: 'Save to…',\n  share: 'Share',\n  report: 'Report',\n  more: 'More actions',\n  seekForward: 'Seek forward',\n  seekBack: 'Seek back',\n  secondsShort: 's',\n  live: 'LIVE',\n  related: 'More videos',\n  adLabel: 'Ad',\n  skipAd: 'Skip ad',\n  skipAdIn: 'Skip in',\n  visitAdvertiser: 'Visit advertiser',\n  sponsored: 'Sponsored',\n}\n"],"names":["defaultLabels"],"mappings":"aAEO,MAAMA,EAA8B,CACzC,KAAM,OACN,MAAO,QACP,OAAQ,SACR,KAAM,OACN,OAAQ,SACR,WAAY,aACZ,eAAgB,kBAChB,IAAK,qBACL,SAAU,iBACV,OAAQ,SACR,QAAS,UACT,OAAQ,SACR,UAAW,YACX,aAAc,MACd,MAAO,QACP,QAAS,UACT,YAAa,OACb,KAAM,OACN,SAAU,WACV,SAAU,WACV,KAAM,OACN,QAAS,UACT,MAAO,WACP,MAAO,QACP,OAAQ,SACR,KAAM,eACN,YAAa,eACb,SAAU,YACV,aAAc,IACd,KAAM,OACN,QAAS,cACT,QAAS,KACT,OAAQ,UACR,SAAU,UACV,gBAAiB,mBACjB,UAAW,WACb"}