@glivion/square-screen-js-sdk 0.1.0 → 0.1.1-alpha.0

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

@@ -1,183 +0,0 @@
-*, *::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

@@ -1,10 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,25 +0,0 @@
-{
-  "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

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

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

@@ -1,24 +0,0 @@
-{
-  "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

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