@jjlmoya/utils-streaming 1.21.0 → 1.22.1

package/src/tool/streamSceneCountdownClock/stream-url-view.ts

@@ -0,0 +1,32 @@
+import { buildStreamingUrl } from './url-state';
+import type { SavedClockSettings } from './storage';
+import type { StreamSceneCountdownClockUI } from './ui';
+
+function getElement<T extends HTMLElement>(root: HTMLElement, selector: string): T | null {
+  return root.querySelector<T>(selector);
+}
+
+export function renderStreamingUrl(root: HTMLElement, settings: SavedClockSettings): void {
+  const element = getElement<HTMLAnchorElement>(root, '[data-stream-url]');
+  if (!element) return;
+  const url = buildStreamingUrl(settings, window.location.origin, window.location.pathname);
+  element.href = url;
+  element.textContent = url;
+}
+
+export function bindCopyUrlButton(root: HTMLElement, settings: () => SavedClockSettings, ui: StreamSceneCountdownClockUI): void {
+  const button = getElement<HTMLButtonElement>(root, '[data-copy-url]');
+  if (!button) return;
+  button.addEventListener('click', async () => {
+    const current = settings();
+    const url = buildStreamingUrl(current, window.location.origin, window.location.pathname);
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {}
+    const stateElement = getElement<HTMLElement>(root, '[data-copy-state]');
+    if (stateElement) stateElement.textContent = ui.copiedUrlText;
+    window.setTimeout(() => {
+      if (stateElement) stateElement.textContent = '';
+    }, 1800);
+  });
+}

package/src/tool/streamSceneCountdownClock/text-input-state.ts

@@ -0,0 +1,31 @@
+import { collectSettings } from './settings-state';
+import { saveSettings, type SavedClockSettings } from './storage';
+import type { StreamSceneCountdownClockUI } from './ui';
+
+interface InputState {
+  settings: SavedClockSettings;
+  startAtMs: number | null;
+}
+
+interface InputContext {
+  root: HTMLElement;
+  state: InputState;
+  ui: StreamSceneCountdownClockUI;
+  render: (root: HTMLElement, state: InputState, ui: StreamSceneCountdownClockUI) => void;
+}
+
+function bindTextInput(context: InputContext, selector: string): void {
+  const element = context.root.querySelector<HTMLInputElement>(selector);
+  element?.addEventListener('input', () => {
+    context.state.settings = collectSettings(context.root, context.state.settings);
+    saveSettings(context.state.settings);
+    context.render(context.root, context.state, context.ui);
+  });
+}
+
+export function bindTextInputs(context: InputContext): void {
+  bindTextInput(context, '[data-scene-title]');
+  bindTextInput(context, '[data-message]');
+  bindTextInput(context, '[data-duration-input]');
+  bindTextInput(context, '[data-start-time-input]');
+}

package/src/tool/streamSceneCountdownClock/ui.ts

@@ -0,0 +1,69 @@
+export type SceneKey = 'brb' | 'starting' | 'raid' | 'intermission';
+export type DesignKey = 'aurora' | 'type' | 'pulse' | 'glitch' | 'sunset';
+
+export interface StreamSceneCountdownClockUI extends Record<string, string | string[]> {
+  sceneLabel: string;
+  sceneBrb: string;
+  sceneStarting: string;
+  sceneRaid: string;
+  sceneIntermission: string;
+  sceneTitleLabel: string;
+  sceneTitlePlaceholder: string;
+  designLabel: string;
+  designAurora: string;
+  designType: string;
+  designPulse: string;
+  designGlitch: string;
+  designSunset: string;
+  accentColorLabel: string;
+  glowColorLabel: string;
+  messageLabel: string;
+  messagePlaceholder: string;
+  durationLabel: string;
+  duration60: string;
+  duration300: string;
+  duration600: string;
+  durationCustom: string;
+  secondsLabel: string;
+  startLabel: string;
+  startNow: string;
+  scheduleTime: string;
+  timeLabel: string;
+  startAction: string;
+  focusAction: string;
+  exitFocusAction: string;
+  resetAction: string;
+  flowText: string;
+  obsTitle: string;
+  obsText: string;
+  obsStepCopy: string;
+  obsStepAdd: string;
+  obsStepPaste: string;
+  copyUrlAction: string;
+  copiedUrlText: string;
+  streamUrlAria: string;
+  previewTitle: string;
+  previewHint: string;
+  previewAria: string;
+  stageEyebrow: string;
+  stageCaption: string;
+  readyBadge: string;
+  waitingBadge: string;
+  liveBadge: string;
+  endedBadge: string;
+  readyText: string;
+  waitingText: string;
+  liveText: string;
+  endedText: string;
+  remainingLabel: string;
+  startTimeLabel: string;
+  endTimeLabel: string;
+  progressLabel: string;
+  assumptionTitle: string;
+  assumptionText: string;
+  warningTitle: string;
+  warningText: string;
+  invalidTime: string;
+  clockAria: string;
+  statusAria: string;
+}

package/src/tool/streamSceneCountdownClock/url-state.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { buildStreamingUrl, readUrlState } from './url-state';
+
+describe('stream scene countdown URL state', () => {
+  it('loads an overlay with case insensitive streaming flag and inputs', () => {
+    const state = readUrlState('?STREAMING&scene=raid&message=Back%20soon&duration=90');
+    expect(state.streaming).toBe(true);
+    expect(state.autoStart).toBe(true);
+    expect(state.settings).toEqual({ scene: 'raid', message: 'Back soon', durationSeconds: 90, startMode: 'now' });
+  });
+
+  it('supports a scheduled start in a browser source URL', () => {
+    const state = readUrlState('?streaming&scene=starting&start=scheduled&time=23%3A45');
+    expect(state.settings.startMode).toBe('scheduled');
+    expect(state.settings.startTime).toBe('23:45');
+  });
+
+  it('does not auto-start a normal page without a start flag', () => {
+    const state = readUrlState('?scene=brb&duration=600');
+    expect(state.streaming).toBe(false);
+    expect(state.autoStart).toBe(false);
+  });
+
+  it('loads a visual design and its custom colors', () => {
+    const state = readUrlState('?STREAMING&design=type&accent=%23ffb84d&glow=%23ff5f91');
+    expect(state.settings).toMatchObject({ design: 'type', accentColor: '#ffb84d', glowColor: '#ff5f91' });
+  });
+
+  it('loads a custom scene title for the browser source', () => {
+    const state = readUrlState('?STREAMING&scene=starting&title=Back%20in%20a%20moment');
+    expect(state.settings.sceneTitle).toBe('Back in a moment');
+  });
+
+  it('builds a ready-to-paste OBS URL from the streamer settings', () => {
+    const url = buildStreamingUrl({
+      scene: 'raid',
+      sceneTitle: 'Raid starts soon',
+      design: 'aurora',
+      accentColor: '#a78bfa',
+      glowColor: '#8ff5d7',
+      message: 'Raid incoming',
+      durationSeconds: 90,
+      startMode: 'scheduled',
+      startTime: '23:45',
+    }, 'https://example.com', '/en/stream-scene-countdown-clock/');
+    expect(url).toBe('https://example.com/en/stream-scene-countdown-clock/?STREAMING&scene=raid&duration=90&design=aurora&accent=%23a78bfa&glow=%238ff5d7&title=Raid+starts+soon&message=Raid+incoming&start=scheduled&time=23%3A45');
+  });
+});

package/src/tool/streamSceneCountdownClock/url-state.ts

@@ -0,0 +1,118 @@
+import { clampDuration } from './logic';
+import type { DesignKey, SceneKey } from './ui';
+import type { SavedClockSettings } from './storage';
+
+export interface UrlClockState {
+  streaming: boolean;
+  autoStart: boolean;
+  settings: Partial<SavedClockSettings>;
+}
+
+const scenes: SceneKey[] = ['brb', 'starting', 'raid', 'intermission'];
+const designs: DesignKey[] = ['aurora', 'type', 'pulse', 'glitch', 'sunset'];
+
+function getParam(params: URLSearchParams, name: string): string | null {
+  for (const [key, value] of params.entries()) {
+    if (key.toLowerCase() === name) return value;
+  }
+  return null;
+}
+
+function getScene(value: string | null): SceneKey | null {
+  return value && scenes.includes(value as SceneKey) ? value as SceneKey : null;
+}
+
+function getDesign(value: string | null): DesignKey | null {
+  if (value === 'neon') return 'aurora';
+  if (value === 'cyber') return 'glitch';
+  if (value === 'studio') return 'glitch';
+  return value && designs.includes(value as DesignKey) ? value as DesignKey : null;
+}
+
+function getColor(value: string | null): string | null {
+  return value && /^#[\da-f]{6}$/i.test(value) ? value : null;
+}
+
+function getDuration(value: string | null): number | null {
+  if (!value) return null;
+  const duration = Number(value);
+  return Number.isFinite(duration) ? clampDuration(duration) : null;
+}
+
+function getStartSettings(params: URLSearchParams, streaming: boolean): { startMode?: SavedClockSettings['startMode']; startTime?: string; autoStart: boolean } {
+  const start = getParam(params, 'start');
+  const time = getParam(params, 'time');
+  if (start && /^\d{2}:\d{2}$/.test(start)) return { startMode: 'scheduled', startTime: start, autoStart: true };
+  if (start === 'scheduled' && time) return { startMode: 'scheduled', startTime: time, autoStart: true };
+  if (start === 'now' || streaming) return { startMode: 'now', autoStart: true };
+  return { autoStart: false };
+}
+
+function readSceneAndDesign(params: URLSearchParams): Partial<SavedClockSettings> {
+  const scene = getScene(getParam(params, 'scene'));
+  const design = getDesign(getParam(params, 'design') ?? getParam(params, 'style'));
+  return {
+    ...(scene ? { scene } : {}),
+    ...(design ? { design } : {}),
+  };
+}
+
+function readColors(params: URLSearchParams): Partial<SavedClockSettings> {
+  const accentColor = getColor(getParam(params, 'accent'));
+  const glowColor = getColor(getParam(params, 'glow'));
+  return {
+    ...(accentColor ? { accentColor } : {}),
+    ...(glowColor ? { glowColor } : {}),
+  };
+}
+
+function readContent(params: URLSearchParams): Partial<SavedClockSettings> {
+  const sceneTitle = getParam(params, 'title');
+  const message = getParam(params, 'message');
+  const durationSeconds = getDuration(getParam(params, 'duration'));
+  return {
+    ...(sceneTitle !== null ? { sceneTitle } : {}),
+    ...(message !== null ? { message } : {}),
+    ...(durationSeconds !== null ? { durationSeconds } : {}),
+  };
+}
+
+function readTimingSettings(timing: ReturnType<typeof getStartSettings>): Partial<SavedClockSettings> {
+  return {
+    ...(timing.startMode ? { startMode: timing.startMode } : {}),
+    ...(timing.startTime ? { startTime: timing.startTime } : {}),
+  };
+}
+
+export function readUrlState(search: string): UrlClockState {
+  const params = new URLSearchParams(search);
+  const streaming = Array.from(params.keys()).some((key) => key.toLowerCase() === 'streaming');
+  const timing = getStartSettings(params, streaming);
+  return {
+    streaming,
+    autoStart: timing.autoStart,
+    settings: {
+      ...readSceneAndDesign(params),
+      ...readColors(params),
+      ...readContent(params),
+      ...readTimingSettings(timing),
+    },
+  };
+}
+
+export function buildStreamingUrl(settings: SavedClockSettings, origin: string, pathname: string): string {
+  const params = new URLSearchParams({
+    scene: settings.scene,
+    duration: String(settings.durationSeconds),
+    design: settings.design,
+    accent: settings.accentColor,
+    glow: settings.glowColor,
+  });
+  if (settings.sceneTitle.trim()) params.set('title', settings.sceneTitle.trim());
+  if (settings.message.trim()) params.set('message', settings.message.trim());
+  if (settings.startMode === 'scheduled') {
+    params.set('start', 'scheduled');
+    params.set('time', settings.startTime);
+  }
+  return `${origin}${pathname}?STREAMING&${params.toString()}`;
+}

package/src/tools.ts

@@ -3,9 +3,11 @@ import type { ToolDefinition } from './types';
 import { SORTEO_TOOL } from './tool/sorteo/index';
 import { TEBAS_CHECK_TOOL } from './tool/tebasCheck/index';
 import { VIDEO_BITRATE_PLANNER_TOOL } from './tool/videoBitratePlanner/index';
+import { STREAM_SCENE_COUNTDOWN_CLOCK_TOOL } from './tool/streamSceneCountdownClock/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   SORTEO_TOOL,
   TEBAS_CHECK_TOOL,
   VIDEO_BITRATE_PLANNER_TOOL,
+  STREAM_SCENE_COUNTDOWN_CLOCK_TOOL,
 ];