@glivion/square-screen-js-sdk 0.1.0

package/examples/react-app/src/index.css

@@ -0,0 +1,183 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: system-ui, sans-serif;
+  background: #0f0f0f;
+  color: #f0f0f0;
+  min-height: 100dvh;
+}
+
+.app {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
+.subtitle { color: #888; font-size: 0.9rem; margin-bottom: 2rem; }
+
+.tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #333;
+  padding-bottom: 0.5rem;
+}
+
+.tabs button {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 0.95rem;
+  padding: 0.4rem 0.8rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.tabs button.active {
+  background: #1e1e1e;
+  color: #fff;
+}
+
+.config-form {
+  display: grid;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  background: #1a1a1a;
+  padding: 1.25rem;
+  border-radius: 8px;
+}
+
+.config-form label { font-size: 0.8rem; color: #aaa; display: block; margin-bottom: 0.25rem; }
+
+.config-form input {
+  width: 100%;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 4px;
+  color: #f0f0f0;
+  font-size: 0.9rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.config-form input:focus { outline: none; border-color: #555; }
+
+.actions { display: flex; gap: 0.5rem; }
+
+button.primary {
+  background: #fff;
+  color: #000;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+button.secondary {
+  background: #2a2a2a;
+  color: #f0f0f0;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.screen-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #000;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.status-bar {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  font-size: 0.8rem;
+  color: #888;
+  margin-bottom: 1rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #555;
+  display: inline-block;
+  margin-right: 0.4rem;
+}
+.dot.online     { background: #4caf50; }
+.dot.offline    { background: #f44336; }
+.dot.connecting { background: #ff9800; }
+.dot.syncing    { background: #2196f3; }
+
+.item-info {
+  background: #1a1a1a;
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  color: #aaa;
+}
+
+.item-info strong { color: #fff; }
+
+.emergency-ticker {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 72px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.emergency-ticker-track {
+  display: flex;
+  width: max-content;
+  animation: emergency-scroll 18s linear infinite;
+}
+
+.emergency-ticker-text {
+  white-space: nowrap;
+  font-size: 1.1rem;
+  font-weight: 600;
+  padding-right: 6rem;
+}
+
+@keyframes emergency-scroll {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #555;
+  font-size: 0.9rem;
+}
+
+.headless-media {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.headless-media img,
+.headless-media video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}

package/examples/react-app/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/examples/react-app/src/mockNetworkDataSource.ts

@@ -0,0 +1,116 @@
+import type {
+  NetworkDataSource,
+  Playlist,
+  SquareScreenResult,
+  EmergencyAlert,
+  HeartbeatPayload,
+  HeartbeatAck,
+  VideoPlaylistParams,
+  ImagePlaylistParams,
+  PlaybackEvent,
+} from "square-screen-js-sdk";
+
+const MOCK_PLAYLIST: Playlist = {
+  uuid: "mock-playlist-001",
+  cachedAt: Date.now(),
+  playlistMeta: { uuid: "mock-playlist-001", name: "Demo Playlist" },
+  strategy: { loop: true, shuffle: false, preloadCount: 1 },
+  items: [
+    {
+      uuid: "item-001",
+      name: "Mountain landscape",
+      type: "image",
+      url: "https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",
+      duration: 5,
+      transition: "fade",
+    },
+    {
+      uuid: "item-002",
+      name: "Nature video",
+      type: "video",
+      url: "https://lorem.video/480p",
+      duration: 10,
+      transition: "slide",
+    },
+    {
+      uuid: "item-004",
+      name: "Cat video",
+      type: "video",
+      url: "https://lorem.video/cat",
+      duration: 12,
+      transition: "slide",
+    },
+    {
+      uuid: "item-003",
+      name: "Forest path",
+      type: "image",
+      url: "https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",
+      duration: 5,
+      transition: "fade",
+    },
+  ],
+};
+const MOCK_EMERGENCY: EmergencyAlert = {
+  uuid: "emergency-001",
+  title: "Emergency Broadcast",
+  message:
+    "This is a test emergency alert. Normal playback will resume shortly.",
+  backgroundColor: "#cc0000",
+  textColor: "#ffffff",
+  targetScope: "all",
+};
+
+let emergencyActive = false;
+
+export function setMockEmergency(active: boolean) {
+  emergencyActive = active;
+}
+
+export const mockNetworkDataSource: NetworkDataSource = {
+  fetchPlaylist: async (): Promise<SquareScreenResult<Playlist>> => ({
+    success: true,
+    data: { ...MOCK_PLAYLIST, cachedAt: Date.now() },
+  }),
+
+  fetchVideoPlaylist: async (
+    _params: VideoPlaylistParams,
+  ): Promise<SquareScreenResult<Playlist>> => ({
+    success: true,
+    data: {
+      ...MOCK_PLAYLIST,
+      items: MOCK_PLAYLIST.items.filter((i) => i.type === "video"),
+      cachedAt: Date.now(),
+    },
+  }),
+
+  fetchImagePlaylist: async (
+    _params: ImagePlaylistParams,
+  ): Promise<SquareScreenResult<Playlist>> => ({
+    success: true,
+    data: {
+      ...MOCK_PLAYLIST,
+      items: MOCK_PLAYLIST.items.filter((i) => i.type === "image"),
+      cachedAt: Date.now(),
+    },
+  }),
+
+  checkForEmergencyAlert: async (): Promise<
+    SquareScreenResult<EmergencyAlert | null>
+  > => ({
+    success: true,
+    data: emergencyActive ? MOCK_EMERGENCY : null,
+  }),
+
+  healthCheck: async (
+    _payload: HeartbeatPayload,
+  ): Promise<SquareScreenResult<HeartbeatAck>> => ({
+    success: true,
+    data: { received: true },
+  }),
+  reportPlaybackEvent: async (
+    _event: PlaybackEvent,
+  ): Promise<SquareScreenResult<{ recorded: boolean }>> => ({
+    success: true,
+    data: { recorded: true },
+  }),
+};

package/examples/react-app/src/usePlayer.ts

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  SquareScreenPlayer,
+  type SquareScreenPlayerConfig,
+  type DeviceStatus,
+  type EmergencyAlert,
+  type PlaylistItem,
+} from "square-screen-js-sdk";
+
+export interface PlayerState {
+  status: DeviceStatus;
+  currentItem: PlaylistItem | null;
+  currentIndex: number;
+  total: number;
+  alert: EmergencyAlert | null;
+}
+
+/**
+ * Creates and manages a SquareScreenPlayer instance for the lifetime of the component.
+ * Returns the player instance and reactive state derived from player events.
+ */
+export function usePlayer(config: SquareScreenPlayerConfig | null): {
+  player: SquareScreenPlayer | null;
+  state: PlayerState;
+} {
+  const playerRef = useRef<SquareScreenPlayer | null>(null);
+  const [state, setState] = useState<PlayerState>({
+    status: "connecting",
+    currentItem: null,
+    currentIndex: 0,
+    total: 0,
+    alert: null,
+  });
+
+  useEffect(() => {
+    if (!config) return;
+
+    const player = new SquareScreenPlayer(config);
+    playerRef.current = player;
+
+    const onStatus: Parameters<typeof player.addEventListener<"statuschange">>[1] = (e) =>
+      setState((s) => ({ ...s, status: e.detail.status }));
+
+    const onItem: Parameters<typeof player.addEventListener<"itemchange">>[1] = (e) =>
+      setState((s) => ({
+        ...s,
+        currentItem: e.detail.item,
+        currentIndex: e.detail.index,
+        total: e.detail.total,
+      }));
+
+    const onAlert: Parameters<typeof player.addEventListener<"emergencyalert">>[1] = (e) =>
+      setState((s) => ({ ...s, alert: e.detail.alert }));
+
+    player.addEventListener("statuschange", onStatus);
+    player.addEventListener("itemchange", onItem);
+    player.addEventListener("emergencyalert", onAlert);
+
+    player.start();
+
+    return () => {
+      player.removeEventListener("statuschange", onStatus);
+      player.removeEventListener("itemchange", onItem);
+      player.removeEventListener("emergencyalert", onAlert);
+      player.stop();
+      playerRef.current = null;
+    };
+  }, [config]);
+
+  return { player: playerRef.current, state };
+}

package/examples/react-app/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/examples/react-app/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/examples/react-app/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/react-app/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})