@flowplayer/spins 0.1.0-rc.4 → 0.1.0-rc.7

package/dist/types.d.ts

@@ -0,0 +1,75 @@
+import { Config } from '@flowplayer/player';
+import { PlayerIMAConfig } from '@flowplayer/player/plugins/ads';
+import { ConsentConfig } from '@flowplayer/player/plugins/consent';
+import { ShareConfig } from '@flowplayer/player/plugins/share';
+import { SubtitlesConfig } from '@flowplayer/player/plugins/subtitles';
+import { ThumbnailsConfig } from '@flowplayer/player/plugins/thumbnails';
+
+/**
+ * Emitted when a new spin is created.
+ */
+declare const SPIN_CREATED = "spin:created";
+/**
+ * Emitted when a different spin enters the viewport.
+ */
+declare const SPIN_IN_VIEWPORT = "spin:viewport";
+
+/**
+ * All supported plugin identifiers for configuring the player.
+ */
+declare const PlayerPlugins: readonly ["subtitles", "vtsel", "ads", "share", "thumbnails", "asel", "qsel"];
+
+interface SpinsConfig {
+    playlist: string | Array<SpinItem>;
+    lang?: Config["lang"];
+    token?: Config["token"];
+    ui?: Config["ui"];
+    ima?: PlayerIMAConfig;
+    share?: ShareConfig["share"];
+    consent?: ConsentConfig["consent"];
+    /**
+     * A list of plugins to configure the player.
+     * @default ["subtitles", "vtsel", "ads", "share", "thumbnails", "asel"]
+     */
+    plugins?: (typeof PlayerPlugins)[number][];
+}
+interface SpinItem {
+    url: string | {
+        src: string;
+        type: string;
+    };
+    title?: Config["title"];
+    poster?: Config["poster"];
+    description?: Config["description"];
+    subtitles?: SubtitlesConfig["subtitles"];
+    thumbnails?: ThumbnailsConfig["thumbnails"];
+}
+type SpinEventData = {
+    config: SpinItem;
+    spin: HTMLElement;
+};
+interface SpinsContainer extends HTMLDivElement {
+    /**
+     * Ads a listener for the SpinsEvents["SPIN_CREATED"] event
+     */
+    on(e: typeof SPIN_CREATED, handler: (e: CustomEvent<SpinEventData>) => void, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Ads a listener for the SpinsEvents["SPIN_IN_VIEWPORT"] event.
+     */
+    on(e: typeof SPIN_IN_VIEWPORT, handler: (e: CustomEvent<SpinEventData>) => void, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * Removes a listener for the SpinsEvents["SPIN_IN_VIEWPORT"] event
+     */
+    off<T>(e: typeof SPIN_IN_VIEWPORT, handler: (e: CustomEvent<T>) => void): void;
+    /**
+     * Removes a listener for the SpinsEvents["SPIN_CREATED"] event
+     */
+    off<T>(e: typeof SPIN_CREATED, handler: (e: CustomEvent<T>) => void): void;
+}
+declare const events: {
+    SPIN_IN_VIEWPORT: typeof SPIN_IN_VIEWPORT;
+    SPIN_CREATED: typeof SPIN_CREATED;
+};
+declare function createSpins(config: SpinsConfig): SpinsContainer;
+
+export { type SpinEventData, type SpinItem, type SpinsConfig, type SpinsContainer, createSpins, events };

package/package.json

@@ -1,11 +1,22 @@
 {
   "name": "@flowplayer/spins",
   "module": "dist/index.js",
-  "version": "0.1.0-rc.4",
+  "version": "0.1.0-rc.7",
   "type": "module",
+  "types": "./dist/types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/**/*"
+  ],
   "scripts": {
-    "build": "rm -rf dist/ && bun ./build.ts && bun run build:dts",
-    "build:dts": "tsc --project tsconfig.npm.json",
+    "build": "rm -rf dist/ && bun ./bundler/bin/build.ts && bun run build:dts",
+    "build:dts": "tsup src/types.ts --dts-only --format esm",
     "storybook": "storybook dev -p 6006",
     "lint": "bunx @biomejs/biome check --write .",
     "fix:unsafe": "bunx @biomejs/biome check --unsafe --write .",
@@ -14,9 +25,6 @@
     "test": "bun run vitest",
     "prepare": "bun run build"
   },
-  "files": [
-    "dist/**/*"
-  ],
   "devDependencies": {
     "@biomejs/biome": "2.1.1",
     "@chromatic-com/storybook": "^4.0.1",
@@ -27,7 +35,9 @@
     "@types/bun": "latest",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
+    "chromatic": "^13.1.2",
     "husky": "^9.1.7",
+    "tsup": "^8.5.0",
     "lit": "^3.3.0",
     "playwright": "^1.53.2",
     "storybook": "^9.0.16",
@@ -38,6 +48,7 @@
   },
   "dependencies": {
     "@flowplayer/player": "^3.28.2",
+    "@flowplayer/translations": "^2.2.0",
     "zod": "^3.25.76"
   }
 }

package/dist/events.d.ts

@@ -1,8 +0,0 @@
-/**
- * @public
- */
-export declare const SPIN_CREATED = "spin:created";
-/**
- * @public
- */
-export declare const SPIN_IN_VIEWPORT = "spin:viewport";

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-import "./style/spins.css";
-import type { SpinsConfig, SpinsContainer } from "./types";
-export declare function spins(config: SpinsConfig): SpinsContainer;

package/dist/loader.d.ts

@@ -1,3 +0,0 @@
-import type { SpinConfig, SpinsConfig, SpinsContainer } from "./types";
-export declare function fetchPlaylistConfig(spinsConfig: SpinsConfig): Promise<SpinsConfig>;
-export declare function createSpins(container: SpinsContainer, items: SpinConfig[]): Promise<void>;

package/dist/ovp/types.d.ts

@@ -1,18 +0,0 @@
-import type { SpinConfig } from "../types";
-export type PlaylistResponse = {
-    playlist: VODResponse[];
-};
-export type VODResponse = SpinConfig & {
-    metadata: OVPMetadata;
-};
-type OVPMetadata = {
-    player_id?: string;
-    media_id?: string;
-    ad_keywords?: string;
-    title?: string;
-    description?: string;
-    category_name?: string;
-    duration?: number;
-    tags?: string;
-};
-export {};

package/dist/ovp/utils.d.ts

@@ -1,5 +0,0 @@
-/**
- * N-ary path building
- */
-export declare function url(...parts: string[]): string;
-export declare function normalize_media_url(src: string): string;

package/dist/ovp/wants.d.ts

@@ -1,5 +0,0 @@
-import type { SourceObj } from "@flowplayer/player";
-export declare function match_flowplayer_ovp_id(src: string, data: SourceObj): boolean;
-export declare function match_legacy_id(src: string, data?: SourceObj): boolean;
-export declare function match_base64(data: SourceObj): boolean;
-export declare function wants(src: string, data: SourceObj): boolean;

package/dist/schemas.d.ts

@@ -1,49 +0,0 @@
-import { z } from "zod";
-export declare const FlowplayerPlaylistSchema: z.ZodObject<{
-    id: z.ZodString;
-    title: z.ZodString;
-    description: z.ZodOptional<z.ZodString>;
-    videos: z.ZodArray<z.ZodObject<{
-        id: z.ZodString;
-        title: z.ZodString;
-        duration: z.ZodNumber;
-        thumbnail: z.ZodString;
-    }, "strip", z.ZodTypeAny, {
-        title: string;
-        duration: number;
-        id: string;
-        thumbnail: string;
-    }, {
-        title: string;
-        duration: number;
-        id: string;
-        thumbnail: string;
-    }>, "many">;
-    created_at: z.ZodString;
-    updated_at: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    title: string;
-    id: string;
-    videos: {
-        title: string;
-        duration: number;
-        id: string;
-        thumbnail: string;
-    }[];
-    created_at: string;
-    updated_at: string;
-    description?: string | undefined;
-}, {
-    title: string;
-    id: string;
-    videos: {
-        title: string;
-        duration: number;
-        id: string;
-        thumbnail: string;
-    }[];
-    created_at: string;
-    updated_at: string;
-    description?: string | undefined;
-}>;
-export type FlowplayerPlaylist = z.infer<typeof FlowplayerPlaylistSchema>;

package/dist/scroll-handler.d.ts

@@ -1,2 +0,0 @@
-import type { SpinConfig, SpinsContainer } from "./types";
-export declare function onScroll(container: SpinsContainer, items: SpinConfig[]): void;

package/dist/source.d.ts

@@ -1,17 +0,0 @@
-import type { SourceList, SourceObj, SourceStr, UnsafeSource } from "@flowplayer/player";
-import type { DRMSource } from "@flowplayer/player/plugins/drm";
-/**
- * fetches the extension name from a path
- */
-export declare function extname(url: string): string | false;
-/**
- * map guessed mime types
- * to valid mime types
- */
-export declare function lookup(type: string): string;
-/**
- * parses a source to a Array<{src, type}>
- */
-export declare function parse(src: SourceStr): Array<DRMSource>;
-export declare function from_obj({ src, type, ...rest }: SourceObj): Array<SourceObj>;
-export declare function normalize_src(sources: UnsafeSource): SourceList;

package/dist/src-manager.d.ts

@@ -1,4 +0,0 @@
-import type { SpinConfig, SpinsContainer } from "./types";
-import type { SpinsPlayer } from "./ui/player";
-export declare function updatePrimaryPlayer(container: SpinsContainer, items: SpinConfig[], player: SpinsPlayer, index: number): void;
-export declare function updateSecondaryPlayer(container: SpinsContainer, items: SpinConfig[], primaryPlayer: SpinsPlayer, secondaryPlayer: SpinsPlayer, index: number): void;

package/dist/ui/container.d.ts

@@ -1,5 +0,0 @@
-import type { SpinsContainer } from "../types";
-import type { SpinsPlayer } from "./player";
-export declare function createContainer(): SpinsContainer;
-export declare function waitUntilInDOM(container: HTMLElement): Promise<void>;
-export declare function onWindowResize(container: HTMLElement, players: SpinsPlayer[]): void;

package/dist/ui/menu-dialog.d.ts

@@ -1,48 +0,0 @@
-import type { SpinsPlayer } from "./player";
-export type FlowplayerMenu = HTMLElement & {
-    menu: HTMLDivElement;
-    menuHeader: HTMLElement;
-};
-declare enum FlowplayerSubtitlesMenuState {
-    main = 0,
-    tracks = 1,
-    style = 2,
-    styleOpt = 3
-}
-declare enum MenuType {
-    asel = 0,
-    subtitles = 1,
-    qsel = 2,
-    vtsel = 3,
-    speed = 4
-}
-type FlowplayerSubtitlesMenu = FlowplayerMenu & {
-    createMenu: (state: FlowplayerSubtitlesMenuState) => void;
-};
-export declare class MenuDialog extends HTMLElement {
-    menuContainer: HTMLDetailsElement;
-    summaryEle: HTMLElement;
-    mainMenu: HTMLDivElement;
-    menuHeader: HTMLDivElement;
-    menuTitle: HTMLHeadElement;
-    olEle: HTMLOListElement;
-    closeEle: HTMLSpanElement;
-    player: SpinsPlayer;
-    constructor(player: SpinsPlayer);
-    appendMenu(menuComponent: FlowplayerMenu): void;
-    createDialogOpt(menuComponent: FlowplayerMenu | FlowplayerSubtitlesMenu): void;
-    toggleDialogOpt(submenu: HTMLDivElement, dialogOpt: HTMLLIElement, type?: MenuType): void;
-    addSubMenuBackButton(menuHeader: HTMLElement): void;
-    openMenu(menu_to_open: HTMLElement): void;
-    toggleMenuDialog(open: boolean): void;
-    toggleVisibility(): void;
-    onMenuClick(ev: MouseEvent): void;
-    onFocus(ev: FocusEvent): void;
-    onOptClick(menuComponent: FlowplayerMenu, ev: MouseEvent): void;
-    onSubtitlesOptClick(menuComponent: FlowplayerSubtitlesMenu, ev: MouseEvent): void;
-    onRootClick(ev: MouseEvent): void;
-    onKeyboardCloseMenu(ev: Event): void;
-    detectSubMenuType(classList: DOMTokenList): MenuType | undefined;
-    findSubMenuOptionsEvent(type: MenuType): "" | "audio:tracks" | "quality:tracks" | "speed:options" | "subs:tracks" | "video:tracks";
-}
-export {};

package/dist/ui/player.d.ts

@@ -1,13 +0,0 @@
-import type { Config, FlowplayerUMDWithPlugins, Player, PlayerState } from "@flowplayer/player";
-import type Hls from "hls.js";
-export type SpinsPlayer = Player & {
-    hls?: Hls;
-    original_src: string;
-    hasState(state: PlayerState): boolean;
-    opts: Config & {
-        is_native?: boolean;
-    };
-    opt?<T>(key: string, fallback?: T): T;
-};
-export declare function createPlayer(umd: FlowplayerUMDWithPlugins, config: Config): SpinsPlayer;
-export declare function adjustControlsBar(player: Player): void;

package/dist/ui/spin-container.d.ts

@@ -1,4 +0,0 @@
-import type { SpinConfig, SpinsContainer } from "../types";
-export declare class SpinContainer extends HTMLElement {
-    constructor(_container: SpinsContainer, config: SpinConfig);
-}

package/dist/utils.d.ts

@@ -1,10 +0,0 @@
-import type { Player } from "@flowplayer/player";
-import type { SpinsPlayer } from "./ui/player";
-export declare function getSpins(): HTMLElement[];
-export declare function getPlayerSpin(player: Player): HTMLElement;
-export declare function getSpinInViewportIndex(container: HTMLElement, spins: HTMLElement[]): number;
-export declare function positionPlayerFromTop(player: SpinsPlayer, container: HTMLElement, spin: HTMLElement): void;
-export declare function getPlayers(container: HTMLElement, currentSpinIndex: string): {
-    primaryPlayer: SpinsPlayer;
-    secondaryPlayer: SpinsPlayer;
-};