itube-modern-player 0.1.0

package/dist/ui/controls.d.ts

@@ -0,0 +1,90 @@
+import { Player } from '../player';
+import { ProgressBar } from './progress';
+/**
+ * Control bar. A single flex row inside the overlay grid. When the player is
+ * too narrow, lower-priority controls collapse into the ⋯ menu dynamically
+ * (ResizeObserver-driven) so nothing ever overflows the player edge.
+ */
+export declare class Controls {
+    private player;
+    readonly root: HTMLElement;
+    readonly progress: ProgressBar;
+    private playBtn;
+    private muteBtn;
+    private volumeSlider;
+    private timeLabel;
+    private chapterLabel;
+    private liveBadge;
+    private fullscreenBtn;
+    private row;
+    private rightGroup;
+    private subtitlesBtn;
+    private settingsBtn;
+    private settingsMenu;
+    private subtitlesMenu;
+    private moreMenu;
+    private moreWrap;
+    private qualityBtn;
+    private qualityMenu;
+    private scenesBtn;
+    private likeBtn;
+    private dislikeBtn;
+    private likeCountEl;
+    private dislikeCountEl;
+    private prevBtn;
+    private nextBtn;
+    private seekBackBtn;
+    private seekFwdBtn;
+    /** Center overlay cluster (prev · −Ns · play · +Ns · next), shown on mobile. */
+    readonly center: HTMLElement;
+    private centerPlayBtn;
+    private centerPrevBtn;
+    private centerNextBtn;
+    /** Controls that live in the center cluster on mobile (not in the bottom bar). */
+    private static readonly CENTER_KEYS;
+    private collapsibles;
+    private overflowed;
+    private resizeObserver;
+    private reflowScheduled;
+    /** Consumer actions (share/report/…) always live in the ⋯ menu. */
+    private actionItems;
+    private wasPlayingBeforeScrub;
+    private disposers;
+    constructor(player: Player);
+    private onWindowResize;
+    private registerCollapsible;
+    /** Center-cluster button — deliberately NOT `.imp-btn` (own sizing/look). */
+    private makeCenterButton;
+    /** like/dislike — visible buttons (collapsible), highlightable via `setLikeState`. */
+    private buildLikeDislike;
+    private attachCountTooltip;
+    private wrapWithTooltip;
+    private setCountText;
+    setLikeCounts(likeCount?: number | string, dislikeCount?: number | string): void;
+    setLikeState(state: 'like' | 'dislike' | null): void;
+    private buildMoreDropdown;
+    /** ⋯ menu = overflowed controls (in display order) + consumer actions. */
+    private buildMoreSections;
+    private simpleSection;
+    private speedSection;
+    private qualitySection;
+    private subtitlesSection;
+    private scheduleReflow;
+    /**
+     * Hide controls that don't fit (lowest priority first) and remember them so
+     * the ⋯ menu can offer them. Unavailable controls are hidden outright.
+     */
+    private reflow;
+    private overflowsRow;
+    private bind;
+    private syncPlayState;
+    private syncVolume;
+    /** Called by the player when per-source data (chapters/quality/subtitles) changes. */
+    syncFeatureButtons(): void;
+    private syncPlaylistButtons;
+    private closeMenus;
+    private toggleSettingsMenu;
+    private toggleQualityMenu;
+    private toggleSubtitlesMenu;
+    destroy(): void;
+}

package/dist/ui/menu.d.ts

@@ -0,0 +1,29 @@
+export interface MenuItem {
+    label: string;
+    value: string;
+    active: boolean;
+    /** Optional icon: raw `<svg>` markup or an image URL. */
+    icon?: string;
+}
+export interface MenuSection {
+    title: string;
+    items: MenuItem[];
+    onSelect(value: string): void;
+}
+/**
+ * Popup menu anchored above a control button. One instance per button;
+ * rebuilt from data on every open, closed on outside click / Escape.
+ */
+export declare class Menu {
+    private anchor;
+    readonly root: HTMLElement;
+    /** Dim layer behind the mobile bottom-sheet; tap to dismiss. Hidden on desktop. */
+    private backdrop;
+    private outsideListener;
+    constructor(anchor: HTMLElement);
+    get open(): boolean;
+    toggle(sections: MenuSection[]): void;
+    show(sections: MenuSection[]): void;
+    close(): void;
+    destroy(): void;
+}

package/dist/ui/overlays.d.ts

@@ -0,0 +1,51 @@
+import { Player } from '../player';
+import { PlayerLabels, RelatedOptions, VideoSource } from '../types';
+/** Preview poster: cover image + big play button, shown until the first play. */
+export declare class PosterOverlay {
+    readonly root: HTMLElement;
+    private image;
+    constructor(player: Player);
+    setSource(source: VideoSource | null): void;
+    show(): void;
+    hide(): void;
+}
+/**
+ * Pause screen "slot". Default content is title + description of the current
+ * source; consumers can replace it with any element (or a factory), and the
+ * Vue wrapper feeds a real <slot> through the same API.
+ */
+export declare class PauseScreen {
+    private labels;
+    readonly root: HTMLElement;
+    private defaultContent;
+    private channel;
+    private channelAvatar;
+    private channelName;
+    private channelUrl;
+    private title;
+    private description;
+    private sponsor;
+    private sponsorLabel;
+    private sponsorText;
+    private custom;
+    constructor(labels: PlayerLabels);
+    setCustomContent(element: HTMLElement | null): void;
+    /** True while consumer-provided custom content is mounted. */
+    get hasCustom(): boolean;
+    setSource(source: VideoSource | null): void;
+    show(): void;
+    hide(): void;
+}
+/** Grid of related videos, shown on pause and/or ended. */
+export declare class RelatedOverlay {
+    private player;
+    readonly root: HTMLElement;
+    private grid;
+    private heading;
+    constructor(player: Player);
+    setOptions(options: RelatedOptions | undefined): void;
+    private buildCard;
+    get visible(): boolean;
+    show(): void;
+    hide(): void;
+}

package/dist/ui/playlistPanel.d.ts

@@ -0,0 +1,16 @@
+import { Player } from '../player';
+/** Slide-in panel listing playlist items; survives source changes. */
+export declare class PlaylistPanel {
+    private player;
+    readonly root: HTMLElement;
+    private list;
+    private shuffleBtn;
+    private repeatBtn;
+    constructor(player: Player, layout?: 'sidebar' | 'bottom', playlistTitle?: string);
+    private syncModes;
+    rebuild(): void;
+    get visible(): boolean;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+}

package/dist/ui/progress.d.ts

@@ -0,0 +1,41 @@
+import { NormalizedChapter } from '../features/chapters';
+import { ThumbnailTrack } from '../features/thumbnails';
+interface ProgressCallbacks {
+    onSeek(time: number): void;
+    onScrubStart(): void;
+    onScrubEnd(): void;
+}
+/**
+ * Seek bar. Chapters render as flex segments (YouTube-style), each with its
+ * own fill — no absolutely positioned tick marks.
+ */
+export declare class ProgressBar {
+    private cb;
+    readonly root: HTMLElement;
+    private track;
+    private buffered;
+    private segments;
+    private handle;
+    private heatmap;
+    private tooltip;
+    private tooltipThumb;
+    private tooltipChapter;
+    private tooltipTime;
+    private duration;
+    private chapters;
+    private thumbnails;
+    private scrubbing;
+    constructor(cb: ProgressCallbacks);
+    /** Render the popularity curve (empty array hides it). */
+    setHeatmap(values: number[]): void;
+    setDuration(duration: number): void;
+    setChapters(chapters: NormalizedChapter[]): void;
+    setThumbnails(track: ThumbnailTrack | null): void;
+    update(currentTime: number, duration: number, bufferedEnd: number): void;
+    private render;
+    private timeFromEvent;
+    private bindPointer;
+    private showTooltip;
+    private hideTooltip;
+}
+export {};

package/dist/ui/scenesPanel.d.ts

@@ -0,0 +1,19 @@
+import { Player } from '../player';
+/**
+ * Scene list — the chapters of the current video as a clickable panel, each
+ * with a preview cropped from the VTT sprite at the scene start.
+ */
+export declare class ScenesPanel {
+    private player;
+    readonly root: HTMLElement;
+    private list;
+    private items;
+    constructor(player: Player, layout?: 'sidebar' | 'bottom');
+    /** Re-render from the player's current chapters + thumbnail track. */
+    rebuild(): void;
+    private syncActive;
+    get visible(): boolean;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+}

package/dist/vue.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("./index.cjs");const c=require("./core.cjs"),s=["ready","play","pause","ended","timeupdate","progress","volumechange","ratechange","seeking","seeked","sourcechange","playlistitemchange","chapterchange","fullscreenchange","pipchange","qualitychange","subtitlechange","relatedshow","relatedclick","action","customaction","adstart","adend","adskip","adclick","adpause","adresume","aderror","error","destroy"],i=e.defineComponent({name:"ITubePlayer",props:{source:{type:[Object,Array],required:!1,default:void 0},options:{type:Object,default:()=>({})}},emits:[...s],setup(n,{emit:d,slots:u,expose:p}){const t=e.ref(null),l=e.ref(null),a=e.shallowRef(null);e.onMounted(()=>{if(!t.value)return;const r=new c.Player(t.value,{...n.options,source:n.source,...u.pauseScreen?{pauseScreen:!0}:{}}),f=d;for(const o of s)r.on(o,y=>f(o,y));u.pauseScreen&&l.value&&r.setPauseScreenContent(l.value),a.value=r}),e.watch(()=>n.source,r=>{r&&a.value&&a.value.load(r)},{deep:!0}),e.onBeforeUnmount(()=>{a.value?.destroy(),a.value=null}),p({player:a});const v=()=>{a.value?.play()};return()=>e.h("div",{class:"imp-vue-host"},[e.h("div",{ref:t}),u.pauseScreen?e.h("div",{ref:l,class:"imp-vue-pause-slot"},u.pauseScreen({player:a.value,close:v})):null])}});exports.Player=c.Player;exports.ITubePlayer=i;exports.default=i;
+//# sourceMappingURL=vue.cjs.map

package/dist/vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.cjs","sources":["../src/vue.ts"],"sourcesContent":["/**\n * Vue 3 wrapper — a separate entry (`itube-modern-player/vue`) so that plain\n * JS consumers never pull Vue into their graph.\n *\n * ```vue\n * <ITubePlayer :source=\"video\" :options=\"{ seekStep: 5 }\" @ended=\"onEnded\">\n *   <template #pauseScreen>\n *     <MyPromo />\n *   </template>\n * </ITubePlayer>\n * ```\n */\nimport {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n  type PropType,\n} from 'vue'\n// Import via the main entry so the built-in locales are registered for Vue users too.\nimport { Player } from './index'\nimport type { PlayerEventMap, PlayerOptions, VideoSource } from './types'\n\nconst EVENT_NAMES = [\n  'ready', 'play', 'pause', 'ended', 'timeupdate', 'progress', 'volumechange',\n  'ratechange', 'seeking', 'seeked', 'sourcechange', 'playlistitemchange',\n  'chapterchange', 'fullscreenchange', 'pipchange', 'qualitychange',\n  'subtitlechange', 'relatedshow', 'relatedclick', 'action', 'customaction',\n  'adstart', 'adend', 'adskip', 'adclick', 'adpause', 'adresume', 'aderror', 'error', 'destroy',\n] as const satisfies ReadonlyArray<keyof PlayerEventMap>\n\nexport const ITubePlayer = defineComponent({\n  name: 'ITubePlayer',\n  props: {\n    /** Single video or a playlist array. */\n    source: {\n      type: [Object, Array] as PropType<VideoSource | VideoSource[]>,\n      required: false,\n      default: undefined,\n    },\n    /** Everything else from PlayerOptions (source inside is ignored in favor of the prop). */\n    options: {\n      type: Object as PropType<Omit<PlayerOptions, 'source'>>,\n      default: () => ({}),\n    },\n  },\n  emits: [...EVENT_NAMES] as unknown as Record<(typeof EVENT_NAMES)[number], (payload: unknown) => boolean>,\n  setup(props, { emit, slots, expose }) {\n    const mountEl = ref<HTMLElement | null>(null)\n    const slotEl = ref<HTMLElement | null>(null)\n    const player = shallowRef<Player | null>(null)\n\n    onMounted(() => {\n      if (!mountEl.value) return\n      const instance = new Player(mountEl.value, {\n        ...props.options,\n        source: props.source,\n        // The slot wins over whatever was passed in options.\n        ...(slots.pauseScreen ? { pauseScreen: true } : {}),\n      })\n      const forward = emit as (event: string, payload?: unknown) => void\n      for (const name of EVENT_NAMES) {\n        instance.on(name, (payload) => forward(name, payload))\n      }\n      if (slots.pauseScreen && slotEl.value) {\n        instance.setPauseScreenContent(slotEl.value)\n      }\n      player.value = instance\n    })\n\n    watch(\n      () => props.source,\n      (next) => {\n        if (next && player.value) player.value.load(next)\n      },\n      { deep: true },\n    )\n\n    onBeforeUnmount(() => {\n      player.value?.destroy()\n      player.value = null\n    })\n\n    expose({ player })\n\n    // \"Close & continue\" — resume playback; the player hides the pause screen\n    // on the `play` event, so this both closes the custom block and plays.\n    const close = () => {\n      void player.value?.play()\n    }\n\n    return () =>\n      h('div', { class: 'imp-vue-host' }, [\n        h('div', { ref: mountEl }),\n        // Scoped slot: `player` (reactive — null until mounted, then the\n        // instance) and `close()` are available to the custom pause content.\n        slots.pauseScreen\n          ? h('div', { ref: slotEl, class: 'imp-vue-pause-slot' }, slots.pauseScreen({ player: player.value, close }))\n          : null,\n      ])\n  },\n})\n\nexport default ITubePlayer\nexport { Player }\nexport type * from './types'\n"],"names":["EVENT_NAMES","ITubePlayer","defineComponent","props","emit","slots","expose","mountEl","ref","slotEl","player","shallowRef","onMounted","instance","Player","forward","name","payload","watch","next","onBeforeUnmount","close","h"],"mappings":"wLA0BMA,EAAc,CAClB,QAAS,OAAQ,QAAS,QAAS,aAAc,WAAY,eAC7D,aAAc,UAAW,SAAU,eAAgB,qBACnD,gBAAiB,mBAAoB,YAAa,gBAClD,iBAAkB,cAAe,eAAgB,SAAU,eAC3D,UAAW,QAAS,SAAU,UAAW,UAAW,WAAY,UAAW,QAAS,SACtF,EAEaC,EAAcC,EAAAA,gBAAgB,CACzC,KAAM,cACN,MAAO,CAEL,OAAQ,CACN,KAAM,CAAC,OAAQ,KAAK,EACpB,SAAU,GACV,QAAS,MAAA,EAGX,QAAS,CACP,KAAM,OACN,QAAS,KAAO,CAAA,EAAC,CACnB,EAEF,MAAO,CAAC,GAAGF,CAAW,EACtB,MAAMG,EAAO,CAAE,KAAAC,EAAM,MAAAC,EAAO,OAAAC,GAAU,CACpC,MAAMC,EAAUC,EAAAA,IAAwB,IAAI,EACtCC,EAASD,EAAAA,IAAwB,IAAI,EACrCE,EAASC,EAAAA,WAA0B,IAAI,EAE7CC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACL,EAAQ,MAAO,OACpB,MAAMM,EAAW,IAAIC,SAAOP,EAAQ,MAAO,CACzC,GAAGJ,EAAM,QACT,OAAQA,EAAM,OAEd,GAAIE,EAAM,YAAc,CAAE,YAAa,EAAA,EAAS,CAAA,CAAC,CAClD,EACKU,EAAUX,EAChB,UAAWY,KAAQhB,EACjBa,EAAS,GAAGG,EAAOC,GAAYF,EAAQC,EAAMC,CAAO,CAAC,EAEnDZ,EAAM,aAAeI,EAAO,OAC9BI,EAAS,sBAAsBJ,EAAO,KAAK,EAE7CC,EAAO,MAAQG,CACjB,CAAC,EAEDK,EAAAA,MACE,IAAMf,EAAM,OACXgB,GAAS,CACJA,GAAQT,EAAO,OAAOA,EAAO,MAAM,KAAKS,CAAI,CAClD,EACA,CAAE,KAAM,EAAA,CAAK,EAGfC,EAAAA,gBAAgB,IAAM,CACpBV,EAAO,OAAO,QAAA,EACdA,EAAO,MAAQ,IACjB,CAAC,EAEDJ,EAAO,CAAE,OAAAI,EAAQ,EAIjB,MAAMW,EAAQ,IAAM,CACbX,EAAO,OAAO,KAAA,CACrB,EAEA,MAAO,IACLY,EAAAA,EAAE,MAAO,CAAE,MAAO,gBAAkB,CAClCA,EAAAA,EAAE,MAAO,CAAE,IAAKf,EAAS,EAGzBF,EAAM,YACFiB,IAAE,MAAO,CAAE,IAAKb,EAAQ,MAAO,oBAAA,EAAwBJ,EAAM,YAAY,CAAE,OAAQK,EAAO,MAAO,MAAAW,CAAA,CAAO,CAAC,EACzG,IAAA,CACL,CACL,CACF,CAAC"}

package/dist/vue.d.ts

@@ -0,0 +1,67 @@
+import { PropType } from 'vue';
+import { Player } from './index';
+import { PlayerOptions, VideoSource } from './types';
+export declare const ITubePlayer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Single video or a playlist array. */
+    source: {
+        type: PropType<VideoSource | VideoSource[]>;
+        required: false;
+        default: undefined;
+    };
+    /** Everything else from PlayerOptions (source inside is ignored in favor of the prop). */
+    options: {
+        type: PropType<Omit<PlayerOptions, "source">>;
+        default: () => {};
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<"progress" | "pause" | "ended" | "play" | "aderror" | "ready" | "timeupdate" | "volumechange" | "ratechange" | "seeking" | "seeked" | "sourcechange" | "playlistitemchange" | "chapterchange" | "fullscreenchange" | "pipchange" | "qualitychange" | "subtitlechange" | "relatedshow" | "relatedclick" | "action" | "customaction" | "adstart" | "adend" | "adskip" | "adclick" | "adpause" | "adresume" | "error" | "destroy", (payload: unknown) => boolean>, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Single video or a playlist array. */
+    source: {
+        type: PropType<VideoSource | VideoSource[]>;
+        required: false;
+        default: undefined;
+    };
+    /** Everything else from PlayerOptions (source inside is ignored in favor of the prop). */
+    options: {
+        type: PropType<Omit<PlayerOptions, "source">>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onProgress?: ((payload: unknown) => any) | undefined;
+    onPause?: ((payload: unknown) => any) | undefined;
+    onEnded?: ((payload: unknown) => any) | undefined;
+    onPlay?: ((payload: unknown) => any) | undefined;
+    onAderror?: ((payload: unknown) => any) | undefined;
+    onReady?: ((payload: unknown) => any) | undefined;
+    onTimeupdate?: ((payload: unknown) => any) | undefined;
+    onVolumechange?: ((payload: unknown) => any) | undefined;
+    onRatechange?: ((payload: unknown) => any) | undefined;
+    onSeeking?: ((payload: unknown) => any) | undefined;
+    onSeeked?: ((payload: unknown) => any) | undefined;
+    onSourcechange?: ((payload: unknown) => any) | undefined;
+    onPlaylistitemchange?: ((payload: unknown) => any) | undefined;
+    onChapterchange?: ((payload: unknown) => any) | undefined;
+    onFullscreenchange?: ((payload: unknown) => any) | undefined;
+    onPipchange?: ((payload: unknown) => any) | undefined;
+    onQualitychange?: ((payload: unknown) => any) | undefined;
+    onSubtitlechange?: ((payload: unknown) => any) | undefined;
+    onRelatedshow?: ((payload: unknown) => any) | undefined;
+    onRelatedclick?: ((payload: unknown) => any) | undefined;
+    onAction?: ((payload: unknown) => any) | undefined;
+    onCustomaction?: ((payload: unknown) => any) | undefined;
+    onAdstart?: ((payload: unknown) => any) | undefined;
+    onAdend?: ((payload: unknown) => any) | undefined;
+    onAdskip?: ((payload: unknown) => any) | undefined;
+    onAdclick?: ((payload: unknown) => any) | undefined;
+    onAdpause?: ((payload: unknown) => any) | undefined;
+    onAdresume?: ((payload: unknown) => any) | undefined;
+    onError?: ((payload: unknown) => any) | undefined;
+    onDestroy?: ((payload: unknown) => any) | undefined;
+}>, {
+    source: VideoSource | VideoSource[];
+    options: Omit<PlayerOptions, "source">;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default ITubePlayer;
+export { Player };
+export type * from './types';

package/dist/vue.js

@@ -0,0 +1,89 @@
+import { defineComponent as m, ref as s, shallowRef as h, onMounted as y, watch as g, onBeforeUnmount as S, h as o } from "vue";
+import "./index.js";
+import { Player as b } from "./core.js";
+const c = [
+  "ready",
+  "play",
+  "pause",
+  "ended",
+  "timeupdate",
+  "progress",
+  "volumechange",
+  "ratechange",
+  "seeking",
+  "seeked",
+  "sourcechange",
+  "playlistitemchange",
+  "chapterchange",
+  "fullscreenchange",
+  "pipchange",
+  "qualitychange",
+  "subtitlechange",
+  "relatedshow",
+  "relatedclick",
+  "action",
+  "customaction",
+  "adstart",
+  "adend",
+  "adskip",
+  "adclick",
+  "adpause",
+  "adresume",
+  "aderror",
+  "error",
+  "destroy"
+], P = m({
+  name: "ITubePlayer",
+  props: {
+    /** Single video or a playlist array. */
+    source: {
+      type: [Object, Array],
+      required: !1,
+      default: void 0
+    },
+    /** Everything else from PlayerOptions (source inside is ignored in favor of the prop). */
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: [...c],
+  setup(n, { emit: d, slots: r, expose: i }) {
+    const t = s(null), u = s(null), e = h(null);
+    y(() => {
+      if (!t.value) return;
+      const a = new b(t.value, {
+        ...n.options,
+        source: n.source,
+        // The slot wins over whatever was passed in options.
+        ...r.pauseScreen ? { pauseScreen: !0 } : {}
+      }), f = d;
+      for (const l of c)
+        a.on(l, (v) => f(l, v));
+      r.pauseScreen && u.value && a.setPauseScreenContent(u.value), e.value = a;
+    }), g(
+      () => n.source,
+      (a) => {
+        a && e.value && e.value.load(a);
+      },
+      { deep: !0 }
+    ), S(() => {
+      e.value?.destroy(), e.value = null;
+    }), i({ player: e });
+    const p = () => {
+      e.value?.play();
+    };
+    return () => o("div", { class: "imp-vue-host" }, [
+      o("div", { ref: t }),
+      // Scoped slot: `player` (reactive — null until mounted, then the
+      // instance) and `close()` are available to the custom pause content.
+      r.pauseScreen ? o("div", { ref: u, class: "imp-vue-pause-slot" }, r.pauseScreen({ player: e.value, close: p })) : null
+    ]);
+  }
+});
+export {
+  P as ITubePlayer,
+  b as Player,
+  P as default
+};
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","sources":["../src/vue.ts"],"sourcesContent":["/**\n * Vue 3 wrapper — a separate entry (`itube-modern-player/vue`) so that plain\n * JS consumers never pull Vue into their graph.\n *\n * ```vue\n * <ITubePlayer :source=\"video\" :options=\"{ seekStep: 5 }\" @ended=\"onEnded\">\n *   <template #pauseScreen>\n *     <MyPromo />\n *   </template>\n * </ITubePlayer>\n * ```\n */\nimport {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n  type PropType,\n} from 'vue'\n// Import via the main entry so the built-in locales are registered for Vue users too.\nimport { Player } from './index'\nimport type { PlayerEventMap, PlayerOptions, VideoSource } from './types'\n\nconst EVENT_NAMES = [\n  'ready', 'play', 'pause', 'ended', 'timeupdate', 'progress', 'volumechange',\n  'ratechange', 'seeking', 'seeked', 'sourcechange', 'playlistitemchange',\n  'chapterchange', 'fullscreenchange', 'pipchange', 'qualitychange',\n  'subtitlechange', 'relatedshow', 'relatedclick', 'action', 'customaction',\n  'adstart', 'adend', 'adskip', 'adclick', 'adpause', 'adresume', 'aderror', 'error', 'destroy',\n] as const satisfies ReadonlyArray<keyof PlayerEventMap>\n\nexport const ITubePlayer = defineComponent({\n  name: 'ITubePlayer',\n  props: {\n    /** Single video or a playlist array. */\n    source: {\n      type: [Object, Array] as PropType<VideoSource | VideoSource[]>,\n      required: false,\n      default: undefined,\n    },\n    /** Everything else from PlayerOptions (source inside is ignored in favor of the prop). */\n    options: {\n      type: Object as PropType<Omit<PlayerOptions, 'source'>>,\n      default: () => ({}),\n    },\n  },\n  emits: [...EVENT_NAMES] as unknown as Record<(typeof EVENT_NAMES)[number], (payload: unknown) => boolean>,\n  setup(props, { emit, slots, expose }) {\n    const mountEl = ref<HTMLElement | null>(null)\n    const slotEl = ref<HTMLElement | null>(null)\n    const player = shallowRef<Player | null>(null)\n\n    onMounted(() => {\n      if (!mountEl.value) return\n      const instance = new Player(mountEl.value, {\n        ...props.options,\n        source: props.source,\n        // The slot wins over whatever was passed in options.\n        ...(slots.pauseScreen ? { pauseScreen: true } : {}),\n      })\n      const forward = emit as (event: string, payload?: unknown) => void\n      for (const name of EVENT_NAMES) {\n        instance.on(name, (payload) => forward(name, payload))\n      }\n      if (slots.pauseScreen && slotEl.value) {\n        instance.setPauseScreenContent(slotEl.value)\n      }\n      player.value = instance\n    })\n\n    watch(\n      () => props.source,\n      (next) => {\n        if (next && player.value) player.value.load(next)\n      },\n      { deep: true },\n    )\n\n    onBeforeUnmount(() => {\n      player.value?.destroy()\n      player.value = null\n    })\n\n    expose({ player })\n\n    // \"Close & continue\" — resume playback; the player hides the pause screen\n    // on the `play` event, so this both closes the custom block and plays.\n    const close = () => {\n      void player.value?.play()\n    }\n\n    return () =>\n      h('div', { class: 'imp-vue-host' }, [\n        h('div', { ref: mountEl }),\n        // Scoped slot: `player` (reactive — null until mounted, then the\n        // instance) and `close()` are available to the custom pause content.\n        slots.pauseScreen\n          ? h('div', { ref: slotEl, class: 'imp-vue-pause-slot' }, slots.pauseScreen({ player: player.value, close }))\n          : null,\n      ])\n  },\n})\n\nexport default ITubePlayer\nexport { Player }\nexport type * from './types'\n"],"names":["EVENT_NAMES","ITubePlayer","defineComponent","props","emit","slots","expose","mountEl","ref","slotEl","player","shallowRef","onMounted","instance","Player","forward","name","payload","watch","next","onBeforeUnmount","close","h"],"mappings":";;;AA0BA,MAAMA,IAAc;AAAA,EAClB;AAAA,EAAS;AAAA,EAAQ;AAAA,EAAS;AAAA,EAAS;AAAA,EAAc;AAAA,EAAY;AAAA,EAC7D;AAAA,EAAc;AAAA,EAAW;AAAA,EAAU;AAAA,EAAgB;AAAA,EACnD;AAAA,EAAiB;AAAA,EAAoB;AAAA,EAAa;AAAA,EAClD;AAAA,EAAkB;AAAA,EAAe;AAAA,EAAgB;AAAA,EAAU;AAAA,EAC3D;AAAA,EAAW;AAAA,EAAS;AAAA,EAAU;AAAA,EAAW;AAAA,EAAW;AAAA,EAAY;AAAA,EAAW;AAAA,EAAS;AACtF,GAEaC,IAAcC,EAAgB;AAAA,EACzC,MAAM;AAAA,EACN,OAAO;AAAA;AAAA,IAEL,QAAQ;AAAA,MACN,MAAM,CAAC,QAAQ,KAAK;AAAA,MACpB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IAAC;AAAA,EACnB;AAAA,EAEF,OAAO,CAAC,GAAGF,CAAW;AAAA,EACtB,MAAMG,GAAO,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,KAAU;AACpC,UAAMC,IAAUC,EAAwB,IAAI,GACtCC,IAASD,EAAwB,IAAI,GACrCE,IAASC,EAA0B,IAAI;AAE7C,IAAAC,EAAU,MAAM;AACd,UAAI,CAACL,EAAQ,MAAO;AACpB,YAAMM,IAAW,IAAIC,EAAOP,EAAQ,OAAO;AAAA,QACzC,GAAGJ,EAAM;AAAA,QACT,QAAQA,EAAM;AAAA;AAAA,QAEd,GAAIE,EAAM,cAAc,EAAE,aAAa,GAAA,IAAS,CAAA;AAAA,MAAC,CAClD,GACKU,IAAUX;AAChB,iBAAWY,KAAQhB;AACjB,QAAAa,EAAS,GAAGG,GAAM,CAACC,MAAYF,EAAQC,GAAMC,CAAO,CAAC;AAEvD,MAAIZ,EAAM,eAAeI,EAAO,SAC9BI,EAAS,sBAAsBJ,EAAO,KAAK,GAE7CC,EAAO,QAAQG;AAAA,IACjB,CAAC,GAEDK;AAAA,MACE,MAAMf,EAAM;AAAA,MACZ,CAACgB,MAAS;AACR,QAAIA,KAAQT,EAAO,SAAOA,EAAO,MAAM,KAAKS,CAAI;AAAA,MAClD;AAAA,MACA,EAAE,MAAM,GAAA;AAAA,IAAK,GAGfC,EAAgB,MAAM;AACpB,MAAAV,EAAO,OAAO,QAAA,GACdA,EAAO,QAAQ;AAAA,IACjB,CAAC,GAEDJ,EAAO,EAAE,QAAAI,GAAQ;AAIjB,UAAMW,IAAQ,MAAM;AAClB,MAAKX,EAAO,OAAO,KAAA;AAAA,IACrB;AAEA,WAAO,MACLY,EAAE,OAAO,EAAE,OAAO,kBAAkB;AAAA,MAClCA,EAAE,OAAO,EAAE,KAAKf,GAAS;AAAA;AAAA;AAAA,MAGzBF,EAAM,cACFiB,EAAE,OAAO,EAAE,KAAKb,GAAQ,OAAO,qBAAA,GAAwBJ,EAAM,YAAY,EAAE,QAAQK,EAAO,OAAO,OAAAW,EAAA,CAAO,CAAC,IACzG;AAAA,IAAA,CACL;AAAA,EACL;AACF,CAAC;"}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "itube-modern-player",
+  "version": "0.1.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",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs"
+    },
+    "./core": {
+      "types": "./dist/coreEntry.d.ts",
+      "import": "./dist/core.js",
+      "require": "./dist/core.cjs"
+    },
+    "./locales": {
+      "types": "./dist/localesEntry.d.ts",
+      "import": "./dist/locales.js",
+      "require": "./dist/locales.cjs"
+    },
+    "./lazy": {
+      "types": "./dist/lazy.d.ts",
+      "import": "./dist/lazy.js",
+      "require": "./dist/lazy.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "unpkg": "./dist/itube-modern-player.iife.js",
+  "jsdelivr": "./dist/itube-modern-player.iife.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vite build --config vite.config.iife.ts",
+    "typecheck": "tsc --noEmit",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run typecheck"
+  },
+  "dependencies": {
+    "hls.js": "^1.5.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "^3.5.0"
+  },
+  "keywords": [
+    "video",
+    "player",
+    "html5",
+    "hls",
+    "m3u8",
+    "vast",
+    "playlist",
+    "chapters",
+    "vue",
+    "typescript"
+  ],
+  "author": "Aleksandr Shevchenko <aleksandr.shevchenko.forwork@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/luckytube/itube-modern-player.git"
+  },
+  "homepage": "https://bitbucket.org/luckytube/itube-modern-player#readme",
+  "bugs": {
+    "url": "https://bitbucket.org/luckytube/itube-modern-player/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}