@jjlmoya/utils-streaming 1.19.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-streaming",
-    "version": "1.19.0",
+    "version": "1.21.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,9 +1,10 @@
 import { sorteo } from '../tool/sorteo/entry';
 import { tebasCheck } from '../tool/tebasCheck/entry';
+import { videoBitratePlanner } from '../tool/videoBitratePlanner/entry';
 
 export const streamingCategory: StreamingCategoryEntry = {
   icon: 'mdi:broadcast',
-  tools: [sorteo, tebasCheck],
+  tools: [sorteo, tebasCheck, videoBitratePlanner],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -2,7 +2,10 @@ export { sorteo } from './tool/sorteo/entry';
 export type { SorteoLocaleContent } from './tool/sorteo/entry';
 export { tebasCheck } from './tool/tebasCheck/entry';
 export type { TebasCheckLocaleContent } from './tool/tebasCheck/entry';
+export { videoBitratePlanner } from './tool/videoBitratePlanner/entry';
+export type { VideoBitratePlannerLocaleContent } from './tool/videoBitratePlanner/entry';
 export { streamingCategory } from './category';
 import { sorteo } from './tool/sorteo/entry';
 import { tebasCheck } from './tool/tebasCheck/entry';
-export const ALL_ENTRIES = [sorteo, tebasCheck];
+import { videoBitratePlanner } from './tool/videoBitratePlanner/entry';
+export const ALL_ENTRIES = [sorteo, tebasCheck, videoBitratePlanner];

package/src/index.ts

@@ -20,3 +20,5 @@ export { ALL_ENTRIES, ALL_TOOLS } from './tools';
 export { SORTEO_TOOL } from './tool/sorteo/index';
 
 export { TEBAS_CHECK_TOOL } from './tool/tebasCheck/index';
+
+export { VIDEO_BITRATE_PLANNER_TOOL } from './tool/videoBitratePlanner/index';

package/src/tests/locale_completeness.test.ts

@@ -19,8 +19,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 2 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(2);
+  it('all 3 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(3);
   });
 });
-

package/src/tests/seo_component_contract.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const toolSeoFiles = [
+  'sorteo/seo.astro',
+  'tebasCheck/seo.astro',
+  'videoBitratePlanner/seo.astro',
+];
+
+describe('SEO component contract', () => {
+  for (const relativePath of toolSeoFiles) {
+    it(`${relativePath} loads localized SEO sections from locale`, async () => {
+      const source = await readFile(resolve(__dirname, '../tool', relativePath), 'utf8');
+
+      expect(source).toMatch(/locale\?: KnownLocale/);
+      expect(source).toMatch(/locale = 'es'/);
+      expect(source).toMatch(/entry\.i18n\[locale\]\?\.\(\)/);
+      expect(source).toMatch(/sections: content\.seo/);
+    });
+  }
+});

package/src/tests/tool_validation.test.ts

@@ -1,17 +1,17 @@
-import { describe, it, expect } from 'vitest';
-import { ALL_TOOLS } from '../tools';
-import { streamingCategory } from '../data';
-
-describe('Tool Validation Suite', () => {
-  describe('Library Registration', () => {
-    it('should have at least 2 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(2);
-    });
-
-    it('streamingCategory should be defined', () => {
-      expect(streamingCategory).toBeDefined();
-      expect(streamingCategory.i18n).toBeDefined();
-    });
-  });
-});
-
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { streamingCategory } from '../data';
+
+describe('Tool Validation Suite', () => {
+  describe('Library Registration', () => {
+    it('should have at least 2 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(3);
+    });
+
+    it('streamingCategory should be defined', () => {
+      expect(streamingCategory).toBeDefined();
+      expect(streamingCategory.i18n).toBeDefined();
+    });
+  });
+});
+

package/src/tool/videoBitratePlanner/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/videoBitratePlanner/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'YouTube recommended live encoder settings',
+    url: 'https://support.google.com/youtube/answer/2853702?hl=en',
+  },
+  {
+    name: 'YouTube recommended upload encoding settings',
+    url: 'https://support.google.com/youtube/answer/1722171?hl=en',
+  },
+];

package/src/tool/videoBitratePlanner/component.astro

@@ -0,0 +1,122 @@
+---
+import type { VideoBitratePlannerUI } from './ui';
+
+interface Props {
+  ui: VideoBitratePlannerUI;
+}
+
+const { ui } = Astro.props;
+const uiJson = JSON.stringify(ui).replace(/</g, '\\u003c');
+---
+
+<div class="bitrate-planner" data-video-bitrate-planner data-resolution="1080p" data-fps="60" data-codec="h264">
+  <script is:inline type="application/json" data-planner-ui set:html={uiJson}></script>
+  <form class="planner-layout" data-planner-form>
+    <div class="planner-controls">
+      <div class="preset-line">
+        <span class="control-caption">{ui.presetLabel}</span>
+        <button type="button" class="preset-button" data-preset="fast">{ui.presetFast}</button>
+        <button type="button" class="preset-button is-active" data-preset="upload">{ui.presetUpload}</button>
+        <button type="button" class="preset-button" data-preset="archive">{ui.presetArchive}</button>
+      </div>
+
+      <fieldset class="control-fieldset">
+        <legend>{ui.resolutionLabel}</legend>
+        <div class="choice-row">
+          <button type="button" class="choice-button" data-resolution="720p" aria-pressed="false">720p</button>
+          <button type="button" class="choice-button is-active" data-resolution="1080p" aria-pressed="true">1080p</button>
+          <button type="button" class="choice-button" data-resolution="1440p" aria-pressed="false">1440p</button>
+          <button type="button" class="choice-button" data-resolution="2160p" aria-pressed="false">4K</button>
+        </div>
+      </fieldset>
+
+      <fieldset class="control-fieldset">
+        <legend>{ui.frameRateLabel}</legend>
+        <div class="choice-row">
+          <button type="button" class="choice-button" data-fps="30" aria-pressed="false">30 fps</button>
+          <button type="button" class="choice-button is-active" data-fps="60" aria-pressed="true">60 fps</button>
+          <button type="button" class="choice-button" data-fps="120" aria-pressed="false">120 fps</button>
+        </div>
+      </fieldset>
+
+      <fieldset class="control-fieldset">
+        <legend>{ui.codecLabel}</legend>
+        <div class="choice-row">
+          <button type="button" class="choice-button" data-codec="h264" aria-pressed="true">{ui.h264}</button>
+          <button type="button" class="choice-button" data-codec="h265" aria-pressed="false">{ui.h265}</button>
+          <button type="button" class="choice-button" data-codec="av1" aria-pressed="false">{ui.av1}</button>
+        </div>
+        <p class="control-note">{ui.codecNote}</p>
+      </fieldset>
+
+      <div class="number-grid">
+        <label class="number-control">
+          <span>{ui.bitrateLabel}</span>
+          <span class="number-input-wrap"><input name="bitrate" type="number" inputmode="decimal" min="0.1" max="500" step="0.1" value="8" aria-label={ui.bitrateLabel} /><b>Mbps</b></span>
+        </label>
+        <label class="number-control">
+          <span>{ui.durationLabel}</span>
+          <span class="number-input-wrap"><input name="duration" type="number" inputmode="numeric" min="1" max="10080" step="1" value="60" aria-label={ui.durationLabel} /><b>{ui.minutesLabel}</b></span>
+        </label>
+        <label class="number-control">
+          <span>{ui.copiesLabel}</span>
+          <span class="number-input-wrap"><input name="copies" type="number" inputmode="numeric" min="1" max="99" step="1" value="1" aria-label={ui.copiesLabel} /><b>{ui.copiesShort}</b></span>
+        </label>
+      </div>
+      <div class="control-footer">
+        <p class="local-note">{ui.localNote}</p>
+        <button type="button" class="reset-button" data-reset>{ui.reset}</button>
+      </div>
+    </div>
+
+    <section class="planner-scene" aria-live="polite" aria-label={ui.sceneLabel}>
+      <div class="scene-heading">
+        <span class="scene-label">{ui.sceneLabel}</span>
+        <span class="quality-badge" data-quality-badge></span>
+      </div>
+      <div class="signal-world">
+        <div class="signal-source">
+          <div class="source-screen"><div class="screen-grid"><i></i><i></i><i></i><i></i></div><span data-resolution-value>1080p</span></div>
+          <span class="world-label">{ui.signalSource}</span>
+        </div>
+        <div class="signal-bridge"><span class="bridge-line"></span><span class="codec-gate" data-codec-value>H264</span><span class="bridge-line"></span></div>
+        <div class="signal-reel">
+          <div class="reel-disc"><span class="reel-hole"></span><span class="reel-groove"></span><span class="reel-groove reel-groove-inner"></span></div>
+          <span class="world-label">{ui.storageReel}</span>
+        </div>
+        <div class="signal-frames" data-signal-frames aria-hidden="true"></div>
+      </div>
+      <div class="scene-caption"><span>{ui.codecGate}</span><strong data-fps-value>60 fps</strong></div>
+      <div class="main-result">
+        <span>{ui.storageEstimate}</span>
+        <strong data-total-storage>3.6 GB</strong>
+        <small data-storage-caption>{ui.allCopies}: 3.6 GB {ui.copiesShort}</small>
+      </div>
+      <p class="quality-note" data-quality-note></p>
+      <div class="badge-line"><span class="capacity-badge" data-capacity-badge></span><span class="capacity-note">{ui.capacityNote}</span></div>
+    </section>
+
+    <div class="planner-lower">
+      <div class="stat-strip">
+        <div><span>{ui.perCopy}</span><strong data-per-copy>3.6 GB</strong></div>
+        <div><span>{ui.perHour}</span><strong data-per-hour>60 GB</strong></div>
+        <div><span>{ui.frameTime}</span><strong data-frame-time>16.67 ms</strong></div>
+        <div><span>{ui.dataPerFrame}</span><strong data-data-per-frame>16.67 KB</strong></div>
+      </div>
+      <div class="comparison-panel">
+        <div class="comparison-heading"><span>{ui.comparisonLabel}</span><span data-resolution-value>1080p</span></div>
+        <div data-comparison></div>
+      </div>
+      <details class="assumption-panel">
+        <summary>{ui.assumptionTitle}</summary>
+        <p>{ui.assumptionText}</p>
+        <p>{ui.warningText}</p>
+      </details>
+    </div>
+  </form>
+</div>
+
+<script>
+  import { mountVideoBitratePlanner } from './controller';
+  mountVideoBitratePlanner();
+</script>

package/src/tool/videoBitratePlanner/controller.ts

@@ -0,0 +1,134 @@
+import { calculatePlan, type PlannerInput, type VideoCodec } from './logic';
+import { clearPlannerInput, loadPlannerInput, savePlannerInput } from './storage';
+import { renderPlanner } from './dom-views';
+import type { VideoBitratePlannerUI } from './ui';
+
+const defaults: PlannerInput = {
+  resolutionId: '1080p',
+  fps: 60,
+  codec: 'h264',
+  bitrateMbps: 8,
+  durationMinutes: 60,
+  copies: 1,
+};
+
+const labels = {
+  quality: {
+    aggressive: 'Aggressive compression',
+    lean: 'Lean and light',
+    balanced: 'Balanced signal',
+    strong: 'Strong detail',
+    excellent: 'Excellent headroom',
+  },
+  capacity: {
+    light: 'Light storage footprint',
+    medium: 'Medium storage footprint',
+    heavy: 'Heavy storage footprint',
+  },
+};
+
+function getInput(root: HTMLElement): PlannerInput {
+  const mode = getMode(root);
+  return {
+    ...mode,
+    bitrateMbps: getNumberInput(root, '[name="bitrate"]', defaults.bitrateMbps),
+    durationMinutes: getNumberInput(root, '[name="duration"]', defaults.durationMinutes),
+    copies: getNumberInput(root, '[name="copies"]', defaults.copies),
+  };
+}
+
+function getMode(root: HTMLElement): Pick<PlannerInput, 'resolutionId' | 'fps' | 'codec'> {
+  return {
+    resolutionId: root.dataset.resolution || defaults.resolutionId,
+    fps: Number(root.dataset.fps || defaults.fps),
+    codec: (root.dataset.codec || defaults.codec) as VideoCodec,
+  };
+}
+
+function getNumberInput(root: HTMLElement, selector: string, fallback: number): number {
+  const input = root.querySelector<HTMLInputElement>(selector);
+  return Number(input?.value || fallback);
+}
+
+function setInput(root: HTMLElement, input: PlannerInput): void {
+  root.dataset.resolution = input.resolutionId;
+  root.dataset.fps = String(input.fps);
+  root.dataset.codec = input.codec;
+  setValue(root, '[name="bitrate"]', input.bitrateMbps.toString());
+  setValue(root, '[name="duration"]', input.durationMinutes.toString());
+  setValue(root, '[name="copies"]', input.copies.toString());
+  syncActiveButtons(root);
+}
+
+function setValue(root: HTMLElement, selector: string, value: string): void {
+  const input = root.querySelector<HTMLInputElement>(selector);
+  if (input) input.value = value;
+}
+
+function syncActiveButtons(root: HTMLElement): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-resolution], [data-fps], [data-codec]').forEach((button) => {
+    const key = isActiveButton(root, button);
+    button.classList.toggle('is-active', Boolean(key));
+    button.setAttribute('aria-pressed', String(Boolean(key)));
+  });
+}
+
+function isActiveButton(root: HTMLElement, button: HTMLButtonElement): boolean {
+  if (button.dataset.resolution) return root.dataset.resolution === button.dataset.resolution;
+  if (button.dataset.fps) return root.dataset.fps === button.dataset.fps;
+  return root.dataset.codec === button.dataset.codec;
+}
+
+function update(root: HTMLElement, ui: VideoBitratePlannerUI): void {
+  const input = getInput(root);
+  const result = calculatePlan(input);
+  renderPlanner(root, result, ui, labels);
+  savePlannerInput(result.input);
+}
+
+function applyPreset(root: HTMLElement, preset: string): void {
+  const presets: Record<string, PlannerInput> = {
+    fast: { ...defaults, resolutionId: '720p', fps: 30, bitrateMbps: 4 },
+    upload: { ...defaults, resolutionId: '1080p', fps: 60, bitrateMbps: 8 },
+    archive: { ...defaults, resolutionId: '2160p', fps: 30, codec: 'av1', bitrateMbps: 35 },
+  };
+  const selected = presets[preset];
+  if (selected) setInput(root, selected);
+}
+
+function handleClick(event: Event, root: HTMLElement, ui: VideoBitratePlannerUI): void {
+  const target = event.target as HTMLElement;
+  const button = target.closest<HTMLButtonElement>('button');
+  if (!button) return;
+  const preset = button.dataset.preset;
+  if (preset) applyPreset(root, preset);
+  if (button.dataset.resolution) root.dataset.resolution = button.dataset.resolution;
+  if (button.dataset.fps) root.dataset.fps = button.dataset.fps;
+  if (button.dataset.codec) root.dataset.codec = button.dataset.codec as VideoCodec;
+  if (button.dataset.reset !== undefined) {
+    clearPlannerInput();
+    setInput(root, defaults);
+  }
+  syncActiveButtons(root);
+  update(root, ui);
+}
+
+function start(root: HTMLElement): void {
+  const uiScript = root.querySelector<HTMLScriptElement>('[data-planner-ui]');
+  if (!uiScript) return;
+  const ui = JSON.parse(uiScript.textContent ?? '{}') as VideoBitratePlannerUI;
+  const saved = loadPlannerInput(defaults);
+  setInput(root, saved);
+  root.addEventListener('click', (event) => handleClick(event, root, ui));
+  root.addEventListener('input', () => update(root, ui));
+  root.addEventListener('change', () => update(root, ui));
+  update(root, ui);
+}
+
+export function mountVideoBitratePlanner(): void {
+  document.querySelectorAll<HTMLElement>('[data-video-bitrate-planner]').forEach((root) => {
+    if (root.dataset.mounted) return;
+    root.dataset.mounted = 'true';
+    start(root);
+  });
+}

package/src/tool/videoBitratePlanner/dom-views.ts

@@ -0,0 +1,77 @@
+import type { VideoBitratePlannerUI } from './ui';
+import type { PlannerResult } from './logic';
+import { getCapacityLabel, getQualityLabel, type EvaluatorLabels } from './evaluator';
+
+function number(value: number, digits = 2): string {
+  return new Intl.NumberFormat('en-US', { maximumFractionDigits: digits }).format(value);
+}
+
+function storage(value: number): string {
+  if (value >= 1000) return `${number(value / 1000)} TB`;
+  return `${number(value)} GB`;
+}
+
+function qualityTone(result: PlannerResult): string {
+  return result.quality.tone;
+}
+
+function renderFrames(root: HTMLElement, result: PlannerResult): void {
+  const frameCount = Math.min(18, Math.max(6, Math.round(result.input.bitrateMbps * 1.4)));
+  const frames = Array.from({ length: frameCount }, (_, index) => {
+    const active = index % 4 === 0 ? ' frame-accent' : '';
+    return `<span class="signal-frame${active}" style="--frame-delay:${index * 55}ms"></span>`;
+  }).join('');
+  const target = root.querySelector<HTMLElement>('[data-signal-frames]');
+  if (target) target.innerHTML = frames;
+}
+
+function renderResultText(root: HTMLElement, result: PlannerResult, ui: VideoBitratePlannerUI, labels: EvaluatorLabels): void {
+  const quality = root.querySelector<HTMLElement>('[data-quality-badge]');
+  const qualityNote = root.querySelector<HTMLElement>('[data-quality-note]');
+  const capacity = root.querySelector<HTMLElement>('[data-capacity-badge]');
+  if (quality) {
+    quality.textContent = getQualityLabel(result, labels);
+    quality.dataset.tone = qualityTone(result);
+  }
+  if (qualityNote) qualityNote.textContent = `${ui.qualityEstimate}: ${result.quality.guidance}`;
+  if (capacity) {
+    capacity.textContent = getCapacityLabel(result, labels);
+    capacity.dataset.tone = result.capacityTone;
+  }
+  setText(root, '[data-total-storage]', storage(result.allCopiesGb));
+  setText(root, '[data-per-copy]', storage(result.perCopyGb));
+  setText(root, '[data-per-hour]', storage(result.bitratePerHourGb));
+  setText(root, '[data-frame-time]', `${number(result.frameTimeMs)} ms`);
+  setText(root, '[data-data-per-frame]', `${number(result.dataPerFrameKb)} KB`);
+  setText(root, '[data-storage-caption]', `${ui.allCopies}: ${storage(result.allCopiesGb)} total`);
+  setText(root, '[data-codec-value]', result.input.codec.toUpperCase());
+  setText(root, '[data-resolution-value]', result.resolution.label);
+  setText(root, '[data-fps-value]', `${result.input.fps} fps`);
+}
+
+function setText(root: HTMLElement, selector: string, value: string): void {
+  const target = root.querySelector<HTMLElement>(selector);
+  if (target) target.textContent = value;
+}
+
+function renderComparison(root: HTMLElement, result: PlannerResult, ui: VideoBitratePlannerUI): void {
+  const target = root.querySelector<HTMLElement>('[data-comparison]');
+  if (!target) return;
+  const names: Record<string, string> = { lean: ui.lean, balanced: ui.balanced, crisp: ui.crisp };
+  target.innerHTML = result.comparison.map((row) => `
+    <div class="comparison-row" data-tone="${row.tone}">
+      <span class="comparison-mark"></span>
+      <span class="comparison-name">${names[row.label]}</span>
+      <strong>${number(row.bitrateMbps)} Mbps</strong>
+      <span>${storage(row.storageGb)}</span>
+      <span class="comparison-quality">${row.quality}</span>
+    </div>`).join('');
+}
+
+export function renderPlanner(root: HTMLElement, result: PlannerResult, ui: VideoBitratePlannerUI, labels: EvaluatorLabels): void {
+  renderFrames(root, result);
+  renderResultText(root, result, ui, labels);
+  renderComparison(root, result, ui);
+  root.dataset.qualityTone = result.quality.tone;
+  root.dataset.capacityTone = result.capacityTone;
+}

package/src/tool/videoBitratePlanner/entry.ts

@@ -0,0 +1,29 @@
+import type { StreamingToolEntry, ToolLocaleContent } from '../../types';
+import type { VideoBitratePlannerUI } from './ui';
+
+export type VideoBitratePlannerLocaleContent = ToolLocaleContent<VideoBitratePlannerUI>;
+
+export const videoBitratePlanner: StreamingToolEntry<VideoBitratePlannerUI> = {
+  id: 'video-bitrate-planner',
+  icons: {
+    bg: 'mdi:video-outline',
+    fg: 'mdi:harddisk',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/videoBitratePlanner/evaluator.ts

@@ -0,0 +1,19 @@
+import type { PlannerResult, QualityResult } from './logic';
+
+export interface EvaluatorLabels {
+  quality: Record<QualityResult['tone'], string>;
+  capacity: Record<PlannerResult['capacityTone'], string>;
+}
+
+export function getQualityLabel(result: PlannerResult, labels: EvaluatorLabels): string {
+  return labels.quality[result.quality.tone];
+}
+
+export function getCapacityLabel(result: PlannerResult, labels: EvaluatorLabels): string {
+  return labels.capacity[result.capacityTone];
+}
+
+export function getNetworkNote(result: PlannerResult): string {
+  const headroom = Math.max(1, result.input.bitrateMbps * 1.2);
+  return `Plan at least ${headroom.toFixed(1)} Mbps of upload headroom for a ${result.input.bitrateMbps.toFixed(1)} Mbps stream.`;
+}

package/src/tool/videoBitratePlanner/i18n/de.ts

@@ -0,0 +1,39 @@
+import { createLocalizedContent } from '../locale-content';
+
+export const content = createLocalizedContent({
+  language: 'de',
+  slug: 'video-bitrate-speicherplaner',
+  title: 'Video Bitrate und Speicherplaner',
+  description: 'Schätze Videospeicher, Bildzeiten und praktische Bitraten für Streaming oder Aufnahmen.',
+  ui: {
+    presetLabel: 'Mit einer Szene starten', presetFast: 'Schneller Webstream', presetUpload: 'Alltäglicher Livestream', presetArchive: '4K Archiv',
+    resolutionLabel: 'Auflösung', frameRateLabel: 'Bildrate', codecLabel: 'Codec', bitrateLabel: 'Video Bitrate', durationLabel: 'Sitzungsdauer', copiesLabel: 'Gespeicherte Kopien', minutesLabel: 'Minuten', copiesShort: 'Kopien',
+    h264: 'H.264', h265: 'H.265', av1: 'AV1', codecNote: 'Die Codec Effizienz verändert die Qualitätsbewertung, nicht die Speicherrechnung.', sceneLabel: 'Signal zum Speicher', signalSource: 'Bild', codecGate: 'Kodierung', storageReel: 'Speicher', qualityEstimate: 'Qualitätsbewertung', storageEstimate: 'Geschätzter Speicher', perCopy: 'Eine Kopie', allCopies: 'Alle Kopien', perHour: 'Pro Stunde', frameTime: 'Bildzeit', dataPerFrame: 'Daten pro Bild', comparisonLabel: 'Speichervergleich', lean: 'Sparsam', balanced: 'Ausgewogen', crisp: 'Scharf', qualityLean: 'Sparsam und leicht', qualityBalanced: 'Ausgewogenes Signal', qualityStrong: 'Viele Details', qualityExcellent: 'Sehr viel Spielraum', qualityAggressive: 'Starke Kompression', qualityGuidance: 'Eine visuelle Schätzung zum Vergleich der Einstellungen.', capacityLight: 'Geringer Speicherbedarf', capacityMedium: 'Mittlerer Speicherbedarf', capacityHeavy: 'Hoher Speicherbedarf', capacityNote: 'Der Speicherstatus basiert auf allen oben angezeigten Kopien.', reset: 'Werte zurücksetzen', localNote: 'Läuft lokal im Browser. Nichts wird hochgeladen.', assumptionTitle: 'Annahmen lesen', assumptionText: 'Der Speicher nutzt dezimale Gigabyte und die eingegebene Videobitrate. Audio, Container-Overhead, Spitzen variabler Bitraten und Dateisystem-Padding werden nicht addiert.', warningText: 'Die Qualitätsstufen sind Planungswerte. Bewegung, Körnung, Keyframes, Encoder-Presets, Plattform-Transkodierung und Netzwerkreserven verändern das echte Ergebnis.', readyText: 'Ändere einen Wert, um das Signal neu zu zeichnen.', calculateAria: 'Videoplan aktualisieren',
+  },
+  faq: [
+    { question: 'Lädt oder untersucht dieser Planer mein Video?', answer: 'Nein. Er verwendet nur die Werte, die du im Browser eingibst. Es werden keine Dateien hochgeladen, keine Kamera untersucht und kein Streamingdienst abgefragt.' },
+    { question: 'Wie wird der Speicher berechnet?', answer: 'Die Bitrate wird mit der Dauer multipliziert und durch acht geteilt, um Bits in Bytes umzuwandeln. Das Ergebnis nutzt dezimale Gigabyte und wird mit der Anzahl der Kopien multipliziert.' },
+    { question: 'Was bedeutet die Qualitätsbewertung?', answer: 'Sie ist eine Faustregel aus Pixeln, Bildern pro Sekunde, Bitrate und einem groben Codec Faktor. Sie garantiert keine Bildqualität, da Bewegung, Körnung und Encoder Einstellungen ebenfalls zählen.' },
+    { question: 'Warum ändert sich dieselbe Bitrate bei anderer Auflösung oder Bildrate?', answer: 'Eine höhere Auflösung beschreibt mehr Pixel und eine höhere Bildrate sendet mehr Bilder pro Sekunde. Dadurch konkurriert mehr Bildinformation um dieselbe Bitrate.' },
+    { question: 'Kann ich das Ergebnis als Plattformvorgabe verwenden?', answer: 'Nutze es für Kapazitätsplanung und Vergleiche. Plattformvorgaben ändern sich, deshalb prüfe die aktuelle Encoder Anleitung des Ziels und lasse beim Livestream Upload Reserve.' },
+  ],
+  howTo: [
+    { name: 'Bildformat wählen', text: 'Wähle die Auflösung und Bildrate, die zu deinem geplanten Stream oder deiner Aufnahme passen.' },
+    { name: 'Kodierung festlegen', text: 'Wähle den Codec und gib die Videobitrate in Megabit pro Sekunde ein. Ein Preset ist ein guter Startpunkt.' },
+    { name: 'Sitzung beschreiben', text: 'Gib die Dauer in Minuten und die Anzahl der Kopien ein, die du behalten, bearbeiten oder ausliefern möchtest.' },
+    { name: 'Abwägung lesen', text: 'Vergleiche sparsame, ausgewogene und scharfe Stufen, um den Speicherbedarf vor der Aufnahme zu prüfen.' },
+  ],
+  seo: [
+    { type: 'title', text: 'Videospeicher vor dem Stream oder der Aufnahme schätzen', level: 2 },
+    { type: 'paragraph', html: 'Ein Video Bitraten Rechner hilft, wenn eine Aufnahme einen realistischen Speicherplan braucht. Gib Bitrate, Dauer und Kopien ein und vergleiche anschließend drei Signalstufen für dasselbe Bildformat.' },
+    { type: 'title', text: 'Was der Planer berechnet', level: 3 },
+    { type: 'list', items: ['<strong>Speicher:</strong> Bitrate mal Zeit, von Bits in dezimale Gigabyte umgerechnet und mit den Kopien multipliziert.', '<strong>Bildzeit:</strong> Millisekunden pro Bild bei der gewählten FPS Zahl sowie eine Schätzung der Daten pro Bild.', '<strong>Qualitätsbewertung:</strong> ein Pixel pro Bild Vergleich mit einem groben Codec Faktor.'] },
+    { type: 'title', text: 'Wie Auflösung und FPS die Abwägung ändern', level: 3 },
+    { type: 'paragraph', html: 'Eine höhere Auflösung erhöht die Pixelzahl pro Bild. Eine höhere Bildrate erhöht die Bildzahl pro Sekunde. Bleibt die Bitrate gleich, erhält jedes Bild weniger Daten und die Kompression wird anspruchsvoller.' },
+    { type: 'tip', title: 'Reserve für Livestreams lassen', html: 'Behandle die Videobitrate nicht als gesamte Leitungskapazität. Lass Platz für Audio, Protokoll-Overhead und Netzschwankungen und teste eine Szene mit ähnlicher Bewegung.' },
+    { type: 'title', text: 'Für die letzte Einstellung Plattformvorgaben nutzen', level: 3 },
+    { type: 'paragraph', html: 'Dieser Planer bleibt plattformneutral. YouTube veröffentlicht Bitratenbereiche nach Auflösung und Bildrate. Nutze die aktuellen Regeln deines Ziels, um das hier modellierte Szenario zu prüfen.' },
+    { type: 'title', text: 'Warum das Speicherergebnis eine Schätzung ist', level: 3 },
+    { type: 'paragraph', html: 'Eine nominelle Bitrate beschreibt nicht jedes Byte einer fertigen Datei. Variable Bitrate, Audio, Containerdaten, Keyframes, Transkodierung und Dateieinheiten können die Endgröße verändern.' },
+  ],
+});