@jjlmoya/utils-streaming 1.18.0 → 1.20.0

package/src/tool/videoBitratePlanner/video-bitrate-storage-planner.css

@@ -0,0 +1,612 @@
+:root {
+  --n-paper: #f6f0e6;
+  --n-card: #fffaf2;
+  --n-ink: #1d2630;
+  --n-muted: #69737d;
+  --n-line: #d9cec0;
+  --n-coral: #e35f4d;
+  --n-coral-soft: #f7d8d1;
+  --n-blue: #28699a;
+  --n-blue-soft: #d7e9f2;
+  --n-yellow: #d6a536;
+  --n-green: #398269;
+  --n-shadow: rgba(29, 38, 48, .12);
+}
+
+.theme-dark {
+  --n-paper: #1b2025;
+  --n-card: #252c32;
+  --n-ink: #f4eee3;
+  --n-muted: #aab4bc;
+  --n-line: #49545d;
+  --n-coral: #f17a63;
+  --n-coral-soft: #57332f;
+  --n-blue: #78b8d8;
+  --n-blue-soft: #244452;
+  --n-yellow: #e5bf5c;
+  --n-green: #70bb9b;
+  --n-shadow: rgba(0, 0, 0, .32);
+}
+
+.bitrate-planner {
+  --n-surface: var(--n-card);
+  --n-surface-strong: var(--n-paper);
+  --n-text: var(--n-ink);
+  --n-secondary: var(--n-muted);
+  --n-border: var(--n-line);
+  --n-accent: var(--n-coral);
+  --n-accent-soft: var(--n-coral-soft);
+  --n-cool: var(--n-blue);
+  --n-cool-soft: var(--n-blue-soft);
+
+  color: var(--n-text);
+  background: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: 1.2rem;
+  box-shadow: 0 .7rem 2rem var(--n-shadow);
+  overflow: hidden;
+}
+
+.planner-layout {
+  display: grid;
+  grid-template-columns: minmax(18rem, .92fr) minmax(20rem, 1.08fr);
+  gap: 0;
+}
+
+.planner-controls {
+  display: grid;
+  align-content: start;
+  gap: 1.25rem;
+  padding: 1.5rem;
+  background: var(--n-surface-strong);
+  border-right: 1px solid var(--n-border);
+}
+
+.preset-line,
+.choice-row,
+.control-footer,
+.scene-heading,
+.scene-caption,
+.badge-line,
+.comparison-heading {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  flex-wrap: wrap;
+}
+
+.control-caption,
+.scene-label,
+.number-control > span:first-child,
+.stat-strip span,
+.comparison-heading,
+.world-label,
+.scene-caption,
+.quality-note,
+.local-note,
+.control-note,
+.assumption-panel,
+.main-result span,
+.main-result small {
+  color: var(--n-secondary);
+  font-size: .72rem;
+  letter-spacing: .04em;
+  line-height: 1.45;
+}
+
+.control-caption,
+.scene-label,
+.comparison-heading,
+.world-label {
+  text-transform: uppercase;
+  font-weight: 750;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.preset-button,
+.choice-button,
+.reset-button {
+  color: var(--n-text);
+  background: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: .65rem;
+  min-height: 2.25rem;
+  padding: .45rem .7rem;
+  transition: background .16s ease, border-color .16s ease, transform .16s ease;
+}
+
+.preset-button:hover,
+.choice-button:hover,
+.reset-button:hover {
+  border-color: var(--n-accent);
+  transform: translateY(-1px);
+}
+
+.preset-button.is-active,
+.choice-button.is-active {
+  color: var(--n-surface);
+  background: var(--n-text);
+  border-color: var(--n-text);
+}
+
+.control-fieldset {
+  display: grid;
+  gap: .55rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.control-fieldset legend {
+  margin-bottom: .1rem;
+  color: var(--n-text);
+  font-size: .82rem;
+  font-weight: 750;
+}
+
+.control-note,
+.local-note,
+.quality-note {
+  margin: 0;
+}
+
+.number-grid {
+  display: grid;
+  gap: .75rem;
+}
+
+.number-control {
+  display: grid;
+  gap: .35rem;
+}
+
+.number-input-wrap {
+  display: flex;
+  align-items: center;
+  min-height: 2.8rem;
+  padding: 0 .75rem;
+  background: var(--n-surface);
+  border: 1px solid var(--n-border);
+  border-radius: .65rem;
+}
+
+.number-input-wrap:focus-within {
+  border-color: var(--n-accent);
+  outline: 2px solid var(--n-accent-soft);
+}
+
+.number-input-wrap input {
+  width: 100%;
+  min-width: 0;
+  color: var(--n-text);
+  background: transparent;
+  border: 0;
+  outline: 0;
+}
+
+.number-input-wrap b {
+  color: var(--n-secondary);
+  font-size: .72rem;
+  white-space: nowrap;
+}
+
+.control-footer {
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-top: .2rem;
+}
+
+.reset-button {
+  flex: 0 0 auto;
+  min-height: 1.9rem;
+  padding: .3rem .55rem;
+  font-size: .72rem;
+}
+
+.planner-scene {
+  display: grid;
+  align-content: start;
+  gap: 1rem;
+  min-width: 0;
+  padding: 1.5rem;
+  background: var(--n-surface);
+}
+
+.scene-heading {
+  justify-content: space-between;
+}
+
+.quality-badge,
+.capacity-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.7rem;
+  padding: .25rem .55rem;
+  color: var(--n-text);
+  background: var(--n-accent-soft);
+  border-radius: 999px;
+  font-size: .7rem;
+  font-weight: 750;
+}
+
+.quality-badge[data-tone="excellent"],
+.quality-badge[data-tone="strong"] {
+  background: var(--n-blue-soft);
+}
+
+.quality-badge[data-tone="aggressive"] {
+  background: var(--n-coral-soft);
+}
+
+.capacity-badge[data-tone="medium"] {
+  background: #f1e5be;
+}
+
+.capacity-badge[data-tone="heavy"] {
+  color: var(--n-surface);
+  background: var(--n-coral);
+}
+
+.signal-world {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  min-height: 15rem;
+  padding: 1.25rem .75rem;
+  background: var(--n-surface-strong);
+  border: 1px solid var(--n-border);
+  border-radius: .9rem;
+  overflow: hidden;
+}
+
+.signal-source,
+.signal-reel {
+  display: grid;
+  justify-items: center;
+  gap: .65rem;
+  z-index: 1;
+}
+
+.source-screen {
+  display: grid;
+  place-items: center;
+  width: 7.2rem;
+  height: 5.3rem;
+  color: var(--n-surface);
+  background: var(--n-blue);
+  border: .35rem solid var(--n-text);
+  border-radius: .7rem;
+  font-size: 1.25rem;
+  font-weight: 800;
+  box-shadow: .35rem .35rem 0 var(--n-coral);
+}
+
+.screen-grid {
+  position: absolute;
+  display: grid;
+  grid-template-columns: repeat(2, .65rem);
+  gap: .35rem;
+  opacity: .5;
+}
+
+.screen-grid i {
+  display: block;
+  width: .65rem;
+  height: .65rem;
+  background: var(--n-surface);
+  border-radius: 50%;
+}
+
+.source-screen > span {
+  position: relative;
+  z-index: 1;
+}
+
+.signal-bridge {
+  display: grid;
+  justify-items: center;
+  gap: .45rem;
+  min-width: 3.5rem;
+}
+
+.bridge-line {
+  width: 2rem;
+  height: .15rem;
+  background: var(--n-coral);
+}
+
+.codec-gate {
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  color: var(--n-surface);
+  background: var(--n-text);
+  border: .25rem solid var(--n-coral);
+  border-radius: 50%;
+  font-size: .65rem;
+  font-weight: 800;
+}
+
+.reel-disc {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 7rem;
+  height: 7rem;
+  background: var(--n-coral);
+  border: .55rem solid var(--n-text);
+  border-radius: 50%;
+  box-shadow: .35rem .35rem 0 var(--n-blue);
+}
+
+.reel-hole,
+.reel-groove {
+  position: absolute;
+  display: block;
+  width: 1.4rem;
+  height: 1.4rem;
+  border: .25rem solid var(--n-surface);
+  border-radius: 50%;
+}
+
+.reel-groove {
+  width: 4.1rem;
+  height: 4.1rem;
+  border-width: .12rem;
+  opacity: .65;
+}
+
+.reel-groove-inner {
+  width: 2.7rem;
+  height: 2.7rem;
+  border-width: .18rem;
+  opacity: .8;
+}
+
+.signal-frames {
+  position: absolute;
+  right: 4.8rem;
+  left: 4.8rem;
+  bottom: 1.05rem;
+  display: flex;
+  align-items: flex-end;
+  gap: .22rem;
+  height: 2rem;
+  overflow: hidden;
+  opacity: .9;
+}
+
+.signal-frame {
+  flex: 1 0 .5rem;
+  max-width: 1rem;
+  height: 38%;
+  background: var(--n-blue);
+  border-radius: .15rem .15rem 0 0;
+  animation: pulse-frame 1.7s ease-in-out infinite;
+  animation-delay: var(--frame-delay);
+}
+
+.signal-frame:nth-child(3n) {
+  height: 72%;
+}
+
+.signal-frame:nth-child(4n) {
+  height: 52%;
+}
+
+.signal-frame-accent {
+  background: var(--n-coral);
+}
+
+@keyframes pulse-frame {
+  0%, 100% { transform: scaleY(.8); }
+  50% { transform: scaleY(1); }
+}
+
+.scene-caption {
+  justify-content: space-between;
+  padding-bottom: .65rem;
+  border-bottom: 1px solid var(--n-border);
+}
+
+.scene-caption strong {
+  color: var(--n-text);
+  font-size: .82rem;
+}
+
+.main-result {
+  display: grid;
+  gap: .15rem;
+  padding: .2rem 0;
+}
+
+.main-result strong {
+  max-width: 100%;
+  color: var(--n-text);
+  font-size: clamp(2.5rem, 7vw, 4.8rem);
+  line-height: 1;
+  letter-spacing: -.07em;
+  overflow-wrap: anywhere;
+}
+
+.main-result small {
+  letter-spacing: 0;
+}
+
+.badge-line {
+  align-items: flex-start;
+}
+
+.capacity-note {
+  color: var(--n-secondary);
+  font-size: .72rem;
+  line-height: 1.45;
+}
+
+.planner-lower {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 1rem;
+  padding: 0 1.5rem 1.5rem;
+  background: var(--n-surface);
+}
+
+.stat-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border-top: 1px solid var(--n-border);
+  border-bottom: 1px solid var(--n-border);
+}
+
+.stat-strip > div {
+  display: grid;
+  gap: .25rem;
+  padding: .9rem .75rem;
+  border-right: 1px solid var(--n-border);
+}
+
+.stat-strip > div:last-child {
+  border-right: 0;
+}
+
+.stat-strip strong {
+  color: var(--n-text);
+  font-size: 1rem;
+}
+
+.comparison-panel {
+  display: grid;
+  gap: .65rem;
+}
+
+.comparison-heading {
+  justify-content: space-between;
+  color: var(--n-text);
+  font-size: .8rem;
+}
+
+.comparison-row {
+  display: grid;
+  grid-template-columns: .55rem 1fr auto auto auto;
+  align-items: center;
+  gap: .7rem;
+  min-height: 2.25rem;
+  border-bottom: 1px solid var(--n-border);
+  font-size: .78rem;
+}
+
+.comparison-mark {
+  width: .5rem;
+  height: .5rem;
+  background: var(--n-yellow);
+  border-radius: 50%;
+}
+
+.comparison-row[data-tone="strong"] .comparison-mark,
+.comparison-row[data-tone="excellent"] .comparison-mark {
+  background: var(--n-blue);
+}
+
+.comparison-row[data-tone="aggressive"] .comparison-mark {
+  background: var(--n-coral);
+}
+
+.comparison-name,
+.comparison-quality {
+  color: var(--n-secondary);
+}
+
+.assumption-panel {
+  border-top: 1px solid var(--n-border);
+  padding-top: .85rem;
+}
+
+.assumption-panel summary {
+  color: var(--n-text);
+  cursor: pointer;
+  font-size: .78rem;
+  font-weight: 750;
+}
+
+.assumption-panel p {
+  max-width: 60rem;
+  margin: .65rem 0 0;
+  line-height: 1.6;
+}
+
+@media (max-width: 760px) {
+  .planner-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .planner-controls {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-border);
+  }
+
+  .planner-lower {
+    grid-column: auto;
+  }
+}
+
+@media (max-width: 520px) {
+  .planner-controls,
+  .planner-scene,
+  .planner-lower {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+  .signal-world {
+    min-height: 13rem;
+    padding-right: .25rem;
+    padding-left: .25rem;
+  }
+
+  .source-screen {
+    width: 5.8rem;
+    height: 4.3rem;
+    font-size: 1rem;
+  }
+
+  .reel-disc {
+    width: 5.7rem;
+    height: 5.7rem;
+  }
+
+  .signal-frames {
+    right: 3.6rem;
+    left: 3.6rem;
+  }
+
+  .stat-strip {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .stat-strip > div:nth-child(2) {
+    border-right: 0;
+  }
+
+  .stat-strip > div:nth-child(-n + 2) {
+    border-bottom: 1px solid var(--n-border);
+  }
+
+  .comparison-row {
+    grid-template-columns: .55rem 1fr auto;
+  }
+
+  .comparison-row > span:nth-last-child(-n + 2) {
+    display: none;
+  }
+}

package/src/tools.ts

@@ -2,9 +2,10 @@ export { ALL_ENTRIES } from './entries';
 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';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   SORTEO_TOOL,
   TEBAS_CHECK_TOOL,
+  VIDEO_BITRATE_PLANNER_TOOL,
 ];
-