@glivion/square-screen-js-sdk 0.1.0 → 1.0.1

package/src/renderer/SquareScreenRenderer.ts

@@ -1,282 +0,0 @@
-import { EmergencyAlert, PlaylistItem, TransitionType } from "../core/types";
-import { SquareScreenPlayer, PlayerEventMap } from "../player/SquareScreenPlayer";
-
-export interface SquareScreenRendererConfig {
-  /** Transition to use when an item doesn't specify one. Defaults to `"none"`. */
-  defaultTransition?: TransitionType;
-  /** Duration of transition animations in ms. Defaults to `500`. */
-  transitionDuration?: number;
-  /**
-   * Maximum ms to wait for a video to reach `canplay` before transitioning anyway.
-   * Keeps transitions on-time when media loads from a slow network.
-   * Defaults to `3000`. Set to `0` to transition immediately without waiting.
-   */
-  canPlayTimeout?: number;
-}
-
-/**
- * Optional vanilla JS renderer that wires a {@link SquareScreenPlayer} to a DOM container.
- * Handles `<img>` / `<video>` element lifecycle, autoplay, transitions, and emergency alerts.
- *
- * When an emergency alert is active it renders a full-screen overlay on top of all content.
- * Normal playback resumes automatically once the alert is cleared.
- *
- * @example
- * const player = new SquareScreenPlayer({ ... });
- * const renderer = new SquareScreenRenderer(document.getElementById("screen"), player);
- * renderer.mount();
- * await player.start();
- *
- * // Tear down
- * player.stop();
- * renderer.unmount();
- */
-export class SquareScreenRenderer {
-  private readonly container: HTMLElement;
-  private readonly player: SquareScreenPlayer;
-  private readonly config: Required<SquareScreenRendererConfig>;
-
-  private wrapper: HTMLDivElement | null = null;
-  /** Two slots that alternate as current/next during transitions. */
-  private slots: [HTMLDivElement, HTMLDivElement] | null = null;
-  private activeSlot = 0;
-  private alertOverlay: HTMLDivElement | null = null;
-
-  private readonly onItemChange: (event: PlayerEventMap["itemchange"]) => void;
-  private readonly onEmergencyAlert: (event: PlayerEventMap["emergencyalert"]) => void;
-
-  constructor(
-    container: HTMLElement,
-    player: SquareScreenPlayer,
-    config: SquareScreenRendererConfig = {},
-  ) {
-    this.container = container;
-    this.player = player;
-    this.config = {
-      defaultTransition: "none",
-      transitionDuration: 500,
-      canPlayTimeout: 3000,
-      ...config,
-    };
-    this.onItemChange = (e) => this.handleItemChange(e.detail.item);
-    this.onEmergencyAlert = (e) => this.handleEmergencyAlert(e.detail.alert);
-  }
-
-  /** Injects the renderer DOM into the container and begins listening to the player. */
-  mount(): void {
-    this.buildDOM();
-    this.player.addEventListener("itemchange", this.onItemChange);
-    this.player.addEventListener("emergencyalert", this.onEmergencyAlert);
-  }
-
-  /** Removes the renderer DOM and stops listening to the player. */
-  unmount(): void {
-    this.player.removeEventListener("itemchange", this.onItemChange);
-    this.player.removeEventListener("emergencyalert", this.onEmergencyAlert);
-    if (this.wrapper && this.container.contains(this.wrapper)) {
-      this.container.removeChild(this.wrapper);
-    }
-    this.wrapper = null;
-    this.slots = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // DOM setup
-  // ---------------------------------------------------------------------------
-
-  private buildDOM(): void {
-    this.wrapper = document.createElement("div");
-    Object.assign(this.wrapper.style, {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      backgroundColor: "#000",
-    });
-
-    const slotA = this.createSlot(true);
-    const slotB = this.createSlot(false);
-    this.wrapper.appendChild(slotA);
-    this.wrapper.appendChild(slotB);
-    this.slots = [slotA, slotB];
-
-    this.alertOverlay = document.createElement("div");
-    Object.assign(this.alertOverlay.style, {
-      display: "none",
-      position: "absolute",
-      top: "0",
-      right: "0",
-      bottom: "0",
-      left: "0",
-      zIndex: "9999",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: "2rem",
-      textAlign: "center",
-      boxSizing: "border-box",
-    });
-    this.wrapper.appendChild(this.alertOverlay);
-
-    this.container.appendChild(this.wrapper);
-  }
-
-  private createSlot(visible: boolean): HTMLDivElement {
-    const slot = document.createElement("div");
-    Object.assign(slot.style, {
-      position: "absolute",
-      top: "0",
-      right: "0",
-      bottom: "0",
-      left: "0",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      opacity: visible ? "1" : "0",
-      transition: `opacity ${this.config.transitionDuration}ms ease`,
-    });
-    return slot;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Item rendering
-  // ---------------------------------------------------------------------------
-
-  private async handleItemChange(item: PlaylistItem): Promise<void> {
-    if (!this.slots) return;
-
-    const nextIndex = (this.activeSlot + 1) % 2;
-    const currentSlot = this.slots[this.activeSlot];
-    const nextSlot = this.slots[nextIndex];
-
-    nextSlot.innerHTML = "";
-    const media =
-      item.type === "video"
-        ? this.createVideo(item.url)
-        : this.createImage(item.url);
-    nextSlot.appendChild(media);
-
-    if (item.type === "video") {
-      await this.waitForCanPlay(media as HTMLVideoElement);
-    }
-
-    const transitionType = item.transition ?? this.config.defaultTransition;
-    await this.applyTransition(currentSlot, nextSlot, transitionType);
-
-    this.activeSlot = nextIndex;
-  }
-
-  private handleEmergencyAlert(alert: EmergencyAlert | null): void {
-    if (!this.alertOverlay) return;
-
-    if (!alert) {
-      this.alertOverlay.style.display = "none";
-      this.alertOverlay.innerHTML = "";
-      return;
-    }
-
-    this.alertOverlay.style.display = "flex";
-    this.alertOverlay.style.backgroundColor = alert.backgroundColor;
-    this.alertOverlay.style.color = alert.textColor;
-
-    const title = document.createElement("h1");
-    title.textContent = alert.title;
-    Object.assign(title.style, { margin: "0 0 1rem", fontSize: "2.5rem", fontWeight: "bold" });
-
-    const message = document.createElement("p");
-    message.textContent = alert.message;
-    Object.assign(message.style, { margin: "0", fontSize: "1.5rem" });
-
-    this.alertOverlay.innerHTML = "";
-    this.alertOverlay.appendChild(title);
-    this.alertOverlay.appendChild(message);
-  }
-
-  private createImage(src: string): HTMLImageElement {
-    const img = document.createElement("img");
-    Object.assign(img.style, {
-      maxWidth: "100%",
-      maxHeight: "100%",
-      objectFit: "contain",
-    });
-    img.src = src;
-    return img;
-  }
-
-  private createVideo(src: string): HTMLVideoElement {
-    const video = document.createElement("video");
-    Object.assign(video.style, {
-      width: "100%",
-      height: "100%",
-      objectFit: "contain",
-    });
-    video.src = src;
-    video.autoplay = true;
-    video.muted = true;        // required for autoplay in most browsers
-    video.playsInline = true;  // required on iOS
-    video.loop = true;         // loop within the item's duration window
-    return video;
-  }
-
-  private waitForCanPlay(video: HTMLVideoElement): Promise<void> {
-    return new Promise((resolve) => {
-      if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
-        resolve();
-        return;
-      }
-      const timeout = this.config.canPlayTimeout;
-      const timer = timeout > 0 ? setTimeout(resolve, timeout) : null;
-      const handler = () => {
-        if (timer) clearTimeout(timer);
-        video.removeEventListener("canplay", handler);
-        resolve();
-      };
-      video.addEventListener("canplay", handler);
-    });
-  }
-
-  // ---------------------------------------------------------------------------
-  // Transitions
-  // ---------------------------------------------------------------------------
-
-  private async applyTransition(
-    from: HTMLDivElement,
-    to: HTMLDivElement,
-    type: TransitionType,
-  ): Promise<void> {
-    const duration = this.config.transitionDuration;
-
-    if (type === "none" || duration === 0) {
-      from.style.opacity = "0";
-      to.style.opacity = "1";
-    } else if (type === "fade") {
-      to.style.opacity = "1";
-      from.style.opacity = "0";
-      await this.wait(duration);
-    } else if (type === "slide") {
-      // Snap next slot into position off-screen (no animation), then slide both
-      to.style.transition = "none";
-      to.style.transform = "translateX(100%)";
-      to.style.opacity = "1";
-      void to.offsetWidth; // force reflow so the snap takes effect before animating
-
-      to.style.transition = `transform ${duration}ms ease`;
-      from.style.transition = `transform ${duration}ms ease`;
-      to.style.transform = "translateX(0)";
-      from.style.transform = "translateX(-100%)";
-      await this.wait(duration);
-    }
-
-    // Reset both slots to a clean opacity-only state for the next transition
-    from.style.transition = `opacity ${duration}ms ease`;
-    from.style.transform = "";
-    from.style.opacity = "0";
-    to.style.transition = `opacity ${duration}ms ease`;
-    to.style.transform = "";
-    to.style.opacity = "1";
-  }
-
-  private wait(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-}

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "Preserve",
-    "moduleResolution": "Bundler",
-    "lib": ["ES2020", "DOM"],
-    "strict": true,
-    "skipLibCheck": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "examples"]
-}

package/tsdown.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig } from "tsdown";
-import { readFileSync } from "fs";
-import { resolve, dirname } from "path";
-
-const RAW_PREFIX = "\0raw:";
-
-export default defineConfig({
-  plugins: [
-    {
-      name: "raw-loader",
-      resolveId(id: string, importer?: string) {
-        if (!id.endsWith("?raw") || !importer) return null;
-        const filePath = resolve(dirname(importer), id.slice(0, -4));
-        return RAW_PREFIX + filePath;
-      },
-      load(id: string) {
-        if (!id.startsWith(RAW_PREFIX)) return null;
-        const content = readFileSync(id.slice(RAW_PREFIX.length), "utf-8");
-        return `export default ${JSON.stringify(content)}`;
-      },
-    },
-  ],
-});