@smoove/player 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 shemi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# @smoove/player
+
+A framework-agnostic web component that plays a
+[smoove](https://smoove.dev) `Composition` like an HTML5 `<video>`.
+
+`<smoove-player>` letterbox-scales the stage to its box and adds fullscreen,
+click and keyboard control, an imperative API, and a set of DOM events. Use
+it from plain HTML, React, Vue, Svelte, or anything that can put an element
+on a page.
+
+## Install
+
+```sh
+pnpm add konva @smoove/core @smoove/player
+```
+
+`konva` and `@smoove/core` are peer dependencies (`lit` and `@lit/context`
+are bundled). Import the package once to register the elements, then opt
+into the default styling:
+
+```ts
+import "@smoove/player"; // registers <smoove-player> and the controls
+import "@smoove/player/styles.css"; // opt-in default styling
+```
+
+## Usage
+
+Hand the player a composition in one of two ways.
+
+**Assign it imperatively** — set the `composition` property to a live
+`Composition`; the player owns the canvas and mounts the stage itself:
+
+```html
+<smoove-player controls loop style="width: 640px; aspect-ratio: 16/9"></smoove-player>
+```
+
+```ts
+document.querySelector("smoove-player").composition = comp;
+```
+
+**Point `src` at a module** — like `<video src>`, the player `import()`s
+the URL and resolves its default export (a `Composition`, or a sync/async
+factory returning one):
+
+```html
+<smoove-player src="https://cdn.example/orbit.js" controls loop></smoove-player>
+```
+
+## No bundler? Use the CDN build
+
+A self-contained build bundles Konva and the core authoring API, registers
+every element, and exposes `window.Smoove`:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@smoove/player/dist/player.global.js"></script>
+```
+
+The same file is published on unpkg and through the
+`@smoove/player/standalone` export.
+
+## Docs
+
+Full documentation lives at [smoove.dev](https://smoove.dev).
+
+## License
+
+MIT

package/dist/base.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import { PlayerApi } from './player-api.js';
+import { ReadonlySignal } from './signal.js';
+/**
+ * Base class for **leaf** controls (play button, time, volume, …). Renders its
+ * own markup into light DOM (it has no user children, so rendering into `this`
+ * is safe and lets users style with plain selectors). Resolves the ancestor
+ * `<smoove-player>` on connect and offers {@link watch} to re-render when a player
+ * signal changes.
+ */
+export declare abstract class SmooveControl extends LitElement {
+    /** The resolved player, or `null` if used outside a `<smoove-player>`. */
+    protected api: PlayerApi | null;
+    private _unsubs;
+    protected createRenderRoot(): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Subscribe to a player signal and re-render this control on every change. */
+    protected watch<T>(sig: ReadonlySignal<T>): void;
+    /**
+     * Declare reactive subscriptions here using {@link watch}. Called once on
+     * connect with the resolved {@link PlayerApi}.
+     */
+    protected bind(_api: PlayerApi): void;
+}
+/**
+ * Base class for **layout containers** (overlay, controls, rows, spacer). These
+ * wrap user-authored children, so they must never let a framework re-render
+ * wipe that content — they are bare custom elements that only exist for
+ * semantics + CSS targeting. All styling lives in the opt-in stylesheet.
+ */
+export declare class SmooveContainer extends HTMLElement {
+}

package/dist/containers.d.ts

@@ -0,0 +1,18 @@
+import { SmooveContainer } from './base.js';
+/**
+ * Layout containers. Each is a bare custom element that preserves its
+ * user-authored children and is styled entirely by the opt-in stylesheet.
+ *
+ * - `<smoove-player-overlay>`   — centered overlay layer above the video.
+ * - `<smoove-player-controls>`  — the control bar (one or more rows).
+ * - `<smoove-player-controls-row>` — a flex row of controls.
+ * - `<smoove-player-space grow>` — a spacer; `grow` makes it consume free space.
+ */
+export declare class SmoovePlayerOverlay extends SmooveContainer {
+}
+export declare class SmoovePlayerControls extends SmooveContainer {
+}
+export declare class SmoovePlayerControlsRow extends SmooveContainer {
+}
+export declare class SmoovePlayerSpace extends SmooveContainer {
+}

package/dist/context.d.ts

@@ -0,0 +1,14 @@
+import { PlayerApi } from './player-api.js';
+/**
+ * Context token carrying the {@link PlayerApi}. `<smoove-player>` is the provider;
+ * descendant controls may consume it with `@lit/context`'s `ContextConsumer`.
+ * In light DOM the underlying `context-request` event bubbles through ordinary
+ * DOM ancestors, so no shadow boundary is needed. Controls in this package use
+ * the simpler {@link getPlayerApi} (`closest`) lookup, which also works when a
+ * control is used without a context consumer.
+ */
+export declare const playerContext: {
+    __context__: PlayerApi;
+};
+/** Resolve the nearest ancestor `<smoove-player>` as a {@link PlayerApi}. */
+export declare function getPlayerApi(el: Element): PlayerApi | null;

package/dist/default-controls.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Build the default control bar used when `<smoove-player controls>` has no
+ * user-supplied `<smoove-player-controls>`. It is composed from the same public
+ * sub-components, so it inherits the player context and the opt-in styling.
+ * Tagged `data-smoove-default` so the player can swap it out if the user later
+ * provides their own controls.
+ */
+export declare function createDefaultControls(): HTMLElement;

package/dist/events.d.ts

@@ -0,0 +1,75 @@
+import { Composition } from '@smoove/core';
+/**
+ * Detail payloads for the DOM `CustomEvent`s dispatched by `<smoove-player>`.
+ * All events bubble and are composed. Subscribe with
+ * `player.addEventListener("frameupdate", (e) => e.detail.frame)`.
+ */
+/** `frameupdate` — fires on every frame change (playback + seeking). */
+export interface FrameUpdateDetail {
+    frame: number;
+}
+/** `timeupdate` — throttled (~4/s) periodic update during playback. */
+export interface TimeUpdateDetail {
+    frame: number;
+    time: number;
+    durationInFrames: number;
+    durationInSeconds: number;
+}
+/** `seeked` — an explicit seek (seek bar, `seekTo`, arrow keys). */
+export interface SeekedDetail {
+    frame: number;
+}
+/** `play` / `pause` / `ended`. */
+export interface PlayPauseDetail {
+    frame: number;
+}
+/** `ratechange` — playback speed changed. */
+export interface RateChangeDetail {
+    playbackRate: number;
+}
+/** `volumechange` — volume changed. */
+export interface VolumeChangeDetail {
+    volume: number;
+}
+/** `mutechange` — mute state toggled. */
+export interface MuteChangeDetail {
+    muted: boolean;
+}
+/** `fullscreenchange` — entered/exited fullscreen. */
+export interface FullscreenChangeDetail {
+    isFullscreen: boolean;
+}
+/** `scalechange` — the letterbox scale factor changed. */
+export interface ScaleChangeDetail {
+    scale: number;
+}
+/** `error` — an exception thrown while mounting, starting playback, or loading `src`. */
+export interface PlayerErrorDetail {
+    error: unknown;
+}
+/** `loadstart` — a remote `src` load began. */
+export interface LoadStartDetail {
+    src: string;
+}
+/** `loaded` — a remote `src` resolved and its composition was mounted. */
+export interface LoadedDetail {
+    src: string;
+    composition: Composition;
+}
+/** Maps each event name to its `CustomEvent` detail type. */
+export interface SmoovePlayerEventMap {
+    play: CustomEvent<PlayPauseDetail>;
+    pause: CustomEvent<PlayPauseDetail>;
+    ended: CustomEvent<PlayPauseDetail>;
+    seeked: CustomEvent<SeekedDetail>;
+    frameupdate: CustomEvent<FrameUpdateDetail>;
+    timeupdate: CustomEvent<TimeUpdateDetail>;
+    ratechange: CustomEvent<RateChangeDetail>;
+    volumechange: CustomEvent<VolumeChangeDetail>;
+    mutechange: CustomEvent<MuteChangeDetail>;
+    fullscreenchange: CustomEvent<FullscreenChangeDetail>;
+    scalechange: CustomEvent<ScaleChangeDetail>;
+    error: CustomEvent<PlayerErrorDetail>;
+    loadstart: CustomEvent<LoadStartDetail>;
+    loaded: CustomEvent<LoadedDetail>;
+}

package/dist/fullscreen-button.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { SmooveControl } from './base.js';
+import { PlayerApi } from './player-api.js';
+/** Toggles the player in and out of fullscreen. */
+export declare class SmoovePlayerFullscreenButton extends SmooveControl {
+    protected bind(api: PlayerApi): void;
+    protected render(): TemplateResult;
+}

package/dist/icons.d.ts

@@ -0,0 +1,10 @@
+import { TemplateResult } from 'lit';
+/**
+ * Inline-SVG icon set, ported from the demo studio's icon sheet. Each entry is
+ * the inner markup of an 18×18 viewBox; {@link icon} wraps it in an `<svg>`.
+ * No icon dependency — controls render `${icon("play")}` directly.
+ */
+declare const PATHS: Record<string, TemplateResult>;
+/** Render a named icon as an `<svg>` of the given pixel size. */
+export declare function icon(name: keyof typeof PATHS | string, size?: number): TemplateResult;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { SmoovePlayerControls, SmoovePlayerControlsRow, SmoovePlayerOverlay, SmoovePlayerSpace, } from './containers.js';
+export { getPlayerApi, playerContext } from './context.js';
+export { createDefaultControls } from './default-controls.js';
+export type { FrameUpdateDetail, FullscreenChangeDetail, LoadedDetail, LoadStartDetail, MuteChangeDetail, PlayerErrorDetail, PlayPauseDetail, RateChangeDetail, ScaleChangeDetail, SeekedDetail, SmoovePlayerEventMap, TimeUpdateDetail, VolumeChangeDetail, } from './events.js';
+export { SmoovePlayerFullscreenButton } from './fullscreen-button.js';
+export { SmoovePlayerLoopButton } from './loop-button.js';
+export { SmoovePlayerPlayButton } from './play-button.js';
+export { SmoovePlayerPlayToggleButton } from './play-toggle-button.js';
+export type { PlayerApi, PlayerState } from './player-api.js';
+export { SmoovePlayerProgress } from './progress.js';
+export { SmoovePlayer } from './smoove-player.js';
+export { SmoovePlayerSoundControl } from './sound-control.js';
+export { SmoovePlayerTime } from './time.js';

package/dist/loop-button.d.ts

@@ -0,0 +1,16 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { SmooveControl } from './base.js';
+import { PlayerApi } from './player-api.js';
+/** Toggles loop playback. Reflects an `on` attribute when looping. */
+export declare class SmoovePlayerLoopButton extends SmooveControl {
+    static properties: {
+        on: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    on?: boolean;
+    protected bind(api: PlayerApi): void;
+    protected willUpdate(_changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}

package/dist/node-module-shim.d.ts

@@ -0,0 +1 @@
+export declare function createRequire(_url: string | URL): (id: string) => unknown;

package/dist/play-button.d.ts

@@ -0,0 +1,25 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { SmooveControl } from './base.js';
+import { PlayerApi } from './player-api.js';
+/**
+ * A large, centered play affordance (for use inside `<smoove-player-overlay>`).
+ * `size` is `small | medium | large`. Reflects a `playing` attribute so the
+ * stylesheet can fade it out during playback.
+ */
+export declare class SmoovePlayerPlayButton extends SmooveControl {
+    static properties: {
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        playing: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    size?: "small" | "medium" | "large";
+    playing?: boolean;
+    protected bind(api: PlayerApi): void;
+    protected willUpdate(_changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}

package/dist/play-toggle-button.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { SmooveControl } from './base.js';
+import { PlayerApi } from './player-api.js';
+/** A play/pause toggle button reflecting and driving playback state. */
+export declare class SmoovePlayerPlayToggleButton extends SmooveControl {
+    protected bind(api: PlayerApi): void;
+    protected render(): TemplateResult;
+}

package/dist/player-api.d.ts

@@ -0,0 +1,63 @@
+import { Composition } from '@smoove/core';
+import { ReadonlySignal } from './signal.js';
+/**
+ * The reactive state a `<smoove-player>` exposes to its descendant control
+ * components. These are **stable** signals owned by the player — they survive
+ * the `Composition` being swapped, so a control subscribes once on connect.
+ * Composition-derived values mirror the live comp; `fullscreen` and `scale`
+ * are player-owned (not part of core).
+ */
+export interface PlayerState {
+    readonly frame: ReadonlySignal<number>;
+    readonly playing: ReadonlySignal<boolean>;
+    readonly duration: ReadonlySignal<number>;
+    readonly loop: ReadonlySignal<boolean>;
+    readonly rate: ReadonlySignal<number>;
+    readonly volume: ReadonlySignal<number>;
+    readonly muted: ReadonlySignal<boolean>;
+    readonly fullscreen: ReadonlySignal<boolean>;
+    readonly scale: ReadonlySignal<number>;
+}
+/**
+ * The control surface a `<smoove-player>` provides to its descendants and to
+ * imperative consumers. `<smoove-player>` itself implements this interface, so
+ * `el.closest("smoove-player")` (or the `playerContext`) yields a `PlayerApi`.
+ * Method names mirror Remotion's `PlayerRef`.
+ */
+export interface PlayerApi {
+    /** The mounted composition, or `null` before one is assigned. */
+    readonly composition: Composition | null;
+    /** The composition's frame rate (0 until a composition is mounted). */
+    readonly fps: number;
+    /** Stable reactive state for descendant controls to subscribe to. */
+    readonly state: PlayerState;
+    play(): void;
+    pause(): void;
+    toggle(): void;
+    stop(): void;
+    seekTo(frame: number): void;
+    /** Step the playhead by `delta` frames (negative steps backward). */
+    stepBy(delta: number): void;
+    getCurrentFrame(): number;
+    isPlaying(): boolean;
+    /** Push new props onto the mounted composition; it re-renders the current
+        frame automatically. No-op before a composition is assigned. */
+    setProps(props: Record<string, unknown>): void;
+    setVolume(volume: number): void;
+    getVolume(): number;
+    mute(): void;
+    unmute(): void;
+    setMuted(muted: boolean): void;
+    toggleMute(): void;
+    isMuted(): boolean;
+    setLoop(loop: boolean): void;
+    toggleLoop(): void;
+    isLooping(): boolean;
+    setPlaybackRate(rate: number): void;
+    getPlaybackRate(): number;
+    requestFullscreen(): Promise<void>;
+    exitFullscreen(): Promise<void>;
+    toggleFullscreen(): void;
+    isFullscreen(): boolean;
+    getScale(): number;
+}

package/dist/player.css

@@ -0,0 +1,2 @@
+smoove-player{-webkit-user-select:none;user-select:none;background:#000;outline:none;width:100%;display:block;position:relative;overflow:hidden}:is(smoove-player:fullscreen,smoove-player[fullscreen]){width:100vw;height:100vh}.smoove-player__stage{position:absolute;inset:0;overflow:hidden}.smoove-player__scale{transform-origin:0 0;position:absolute;top:0;left:0}.smoove-player__canvas{width:100%;height:100%}.smoove-player__canvas canvas{display:block}smoove-player-overlay{z-index:1;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}smoove-player-overlay>*{pointer-events:auto}.smoove-player__overlay-play{color:#fff;cursor:pointer;background:#00000073;border:none;border-radius:999px;place-items:center;padding:16px;transition:opacity .2s,background .12s,transform .12s;display:grid}.smoove-player__overlay-play:hover{background:#0000009e;transform:scale(1.05)}smoove-player-play-button{transition:opacity .2s}smoove-player-play-button[playing]{opacity:0;pointer-events:none}smoove-player-controls{z-index:2;background:linear-gradient(#0000,#000000a6);flex-direction:column;gap:2px;padding:4px 10px 8px;font-family:inherit;display:flex;position:absolute;bottom:0;left:0;right:0}smoove-player-controls-row{align-items:center;gap:4px;display:flex}smoove-player-space{display:block}smoove-player-space[grow]{flex:1}.smoove-player__btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:8px;place-items:center;width:34px;height:34px;transition:background .12s,color .12s;display:grid}.smoove-player__btn:hover{background:#ffffff29}smoove-player-loop-button[on] .smoove-player__btn{color:#15cda8}.smoove-player__sound{align-items:center;display:flex}.smoove-player__volume{appearance:none;background:#ffffff47;border-radius:99px;outline:none;width:74px;height:4px;margin:0 4px;transition:width .2s,opacity .2s,margin .2s}.smoove-player__volume::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px}.smoove-player__volume::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:12px;height:12px}smoove-player-sound-control[collapsed] .smoove-player__volume{opacity:0;width:0;margin:0}smoove-player-sound-control[collapsed]:hover .smoove-player__volume,smoove-player-sound-control[collapsed]:focus-within .smoove-player__volume{opacity:1;width:74px;margin:0 4px}.smoove-player__time{color:#fff;white-space:nowrap;align-items:center;gap:3px;padding:0 6px;font:12.5px/1 JetBrains Mono,ui-monospace,monospace;display:inline-flex}.smoove-player__time-sep,.smoove-player__time-dur{opacity:.7}smoove-player-progress{width:100%;display:block}.smoove-player__progress{cursor:pointer;width:100%;padding:6px 0}.smoove-player__track{background:#ffffff42;border-radius:2px;height:4px;transition:height .12s;position:relative}.smoove-player__progress:hover .smoove-player__track,.smoove-player__progress.is-dragging .smoove-player__track{height:6px}.smoove-player__fill{background:linear-gradient(90deg,#ff5640,#15cda8);border-radius:2px;position:absolute;top:0;bottom:0;left:0}.smoove-player__knob{background:#fff;border-radius:50%;width:13px;height:13px;transition:transform .12s;position:absolute;top:50%;transform:translate(-50%,-50%)scale(0);box-shadow:0 1px 4px #00000080}.smoove-player__progress:hover .smoove-player__knob,.smoove-player__progress.is-dragging .smoove-player__knob{transform:translate(-50%,-50%)scale(1)}
+/*$vite$:1*/