@fmsim/board 2.0.0-beta.7 → 2.0.0-beta.75

package/dist/src/ox-playback-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-playback-controls.js","sourceRoot":"","sources":["../../src/ox-playback-controls.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/iconbutton/icon-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\ntype PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped'\n\n/**\n * Window-length presets shown in the range dropdown. Values are durations\n * in milliseconds; `'Range'` is the sentinel for \"user picks both bounds\n * directly\". The fixed presets cap at 2H — same as the explicit Range\n * mode max gap — so any preset switch produces a window already inside\n * the allowed envelope.\n */\nconst RANGE_DURATIONS: Record<string, number> = {\n  '10m': 10 * 60 * 1000,\n  '30m': 30 * 60 * 1000,\n  '1H': 60 * 60 * 1000,\n  '2H': 2 * 60 * 60 * 1000\n}\nconst ONE_HOUR = RANGE_DURATIONS['1H']\nconst MAX_GAP_MS = RANGE_DURATIONS['2H'] // 2H upper bound on (to − from)\nconst MIN_GAP_MS = RANGE_DURATIONS['10m'] // 10m lower bound (prevents reversal / zero-window)\n\ntype RangeKey = '10m' | '30m' | '1H' | '2H' | 'Range'\n\n/**\n * 플레이백 컨트롤 오버레이 바 (2행 구조)\n *\n * 1행 (config): Range 선택 (10m / 30m / 1H / 2H / Range) + ←/→ shift\n *   + FROM/TO datetime 입력 (date 캘린더 + time 키인) + Apply 버튼\n *   + 배속 (×1 ×2 ×4)\n *\n *   - Fixed presets: TO 가 anchor (←/→ 로 shift), FROM = TO − range.\n *     입력 disabled. 초기 TO = 현재시간.\n *   - Range mode: 양쪽 직접 입력. 2H cap, 10m min, future clamp,\n *     마지막 편집한 쪽이 anchor.\n *   - 상단 변경은 PENDING tier 만 갱신 — Apply 누르기 전에는 하단\n *     슬라이더/엔진에 영향 없음.\n *\n * 2행 (control): play / pause / 시크바 (적용된 range 만큼 span) /\n *   현재 재생 시각 / 닫기.\n *\n * @fires playback-start - 플레이백 시작 요청 { fromTime, toTime, speed }\n *   toTime 은 window END — 엔진이 chunked fetch 의 상한으로 사용.\n * @fires playback-pause - 일시정지 요청\n * @fires playback-resume - 재개 요청\n * @fires playback-stop - 중지 요청\n * @fires playback-seek - 드래그 릴리즈 시 시크 요청 { toTime }\n * @fires playback-seek-start - 드래그 첫 input 시 즉시 발행 (엔진 타이머·애니메이션 정지 신호, detail 없음)\n * @fires playback-seek-preview - 드래그 중 throttle (leading+trailing, 200ms) 된 스크러빙 요청 { toTime }\n * @fires playback-speed - 배속 변경 요청 { speed }\n */\n@customElement('ox-playback-controls')\nexport class PlaybackControls extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      justify-content: center;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      z-index: 1001;\n      pointer-events: none;\n    }\n\n    .control-bar {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 10px 16px;\n      margin: 12px;\n      max-width: 560px;\n      width: 100%;\n      background: rgba(0, 0, 0, 0.75);\n      backdrop-filter: blur(8px);\n      border-radius: 12px;\n      color: #fff;\n      pointer-events: auto;\n      font-size: 13px;\n      box-sizing: border-box;\n    }\n\n    /* 1행: 시점 설정 + 배속 */\n    .row-time {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    md-icon-button {\n      --md-icon-button-icon-color: #fff;\n      --md-icon-button-hover-icon-color: #fff;\n      --md-icon-button-pressed-icon-color: #fff;\n      --md-icon-button-focus-icon-color: #fff;\n      --md-icon-button-state-layer-color: rgba(255, 255, 255, 0.2);\n    }\n\n    md-icon-button:hover {\n      background: rgba(255, 255, 255, 0.15);\n      border-radius: 50%;\n    }\n\n    /*\n     * shift 버튼 (←/→) — Material Web 의 md-icon-button 은 shadow DOM\n     * 내 ripple/focus-ring/touch-target 영역이 visible 32px 컨테이너\n     * 너머로 hit area 를 확장해서 인접 버튼끼리 호버 영역이 겹친다.\n     * (사용자 보고: > 의 hover 가 < 의 오른쪽 영역까지 침범) plain\n     * <button> 으로 교체해 hit area 를 정확히 32×32px 로 한정.\n     */\n    .shift-btn {\n      width: 22px;\n      height: 28px;\n      padding: 0;\n      border: none;\n      background: transparent;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: #fff;\n      flex-shrink: 0;\n    }\n\n    /*\n     * shift 버튼 묶음 — 두 chevron 이 시각적으로 한 쌍으로 보이도록\n     * 사이 여백을 완전히 제거 (row-time 의 6px gap 전체를 negative\n     * margin 으로 상쇄). 양쪽 인접 요소와의 간격은 row gap 으로 유지.\n     */\n    .shift-btn + .shift-btn {\n      margin-left: -6px;\n    }\n\n    .shift-btn md-icon {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n    }\n\n    .shift-btn:hover:not(:disabled) {\n      color: #ffb766;\n    }\n\n    .shift-btn:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    .date-input {\n      background: rgba(255, 255, 255, 0.15);\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 6px;\n      color: #fff;\n      font-size: 13px;\n      padding: 4px 8px;\n      outline: none;\n      color-scheme: dark;\n      width: 130px;\n    }\n\n    .date-input:focus {\n      border-color: rgba(255, 255, 255, 0.6);\n    }\n\n    .hour-select,\n    .range-select {\n      background: rgba(255, 255, 255, 0.15);\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 6px;\n      color: #fff;\n      font-size: 13px;\n      padding: 4px 6px;\n      outline: none;\n      color-scheme: dark;\n      cursor: pointer;\n    }\n\n    .hour-select:focus,\n    .range-select:focus {\n      border-color: rgba(255, 255, 255, 0.6);\n    }\n\n    .range-select {\n      min-width: 64px;\n    }\n\n    .datetime-input {\n      background: rgba(255, 255, 255, 0.15);\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 6px;\n      color: #fff;\n      font-size: 12px;\n      padding: 4px 6px;\n      outline: none;\n      color-scheme: dark;\n      font-family: inherit;\n      /*\n       * 브라우저 기본 너비가 컨텐츠 (YYYY-MM-DD HH:MM:SS + 캘린더\n       * 아이콘) 보다 넓게 잡혀서 우측에 빈 공간이 생긴다. content\n       * 폭에 거의 fit 시키는 명시 너비. 12px 폰트 기준 19자 + 캘린더\n       * 아이콘 공간 ≈ 170px (실측 기준).\n       */\n      width: 170px;\n      box-sizing: border-box;\n    }\n\n    /*\n     * inner sub-fields (YYYY/MM/DD/HH/MM/SS) 사이 spacing 도 일부\n     * Chromium 빌드에서 과하게 잡혀 있어 0으로 줄여 합본 시각적\n     * 폭을 더 줄임. 다른 엔진은 selector 무시.\n     */\n    .datetime-input::-webkit-datetime-edit-fields-wrapper {\n      padding: 0;\n    }\n    .datetime-input::-webkit-datetime-edit-text {\n      padding: 0 1px;\n    }\n\n    .datetime-input:focus {\n      border-color: rgba(255, 255, 255, 0.6);\n    }\n\n    /*\n     * 24시간제 강제 — lang=\"ko-KR\" 만으로 안 먹는 브라우저(Chrome/Edge 일부\n     * 버전, OS locale 우선) 대비, AM/PM 필드를 CSS 레벨에서 비표시.\n     * Chromium/WebKit 의 -webkit-datetime-edit shadow DOM 만 이름이\n     * 노출되어 있어 다른 엔진은 자동으로 무시 (no-op).\n     */\n    .datetime-input::-webkit-datetime-edit-ampm-field {\n      display: none;\n    }\n\n    .datetime-input:disabled,\n    .date-input:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .apply-btn {\n      padding: 4px 12px;\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 4px;\n      background: transparent;\n      color: #fff;\n      font-size: 12px;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    .apply-btn.dirty {\n      background: rgba(255, 165, 0, 0.4);\n      border-color: rgba(255, 165, 0, 0.8);\n    }\n\n    .apply-btn:hover:not(:disabled) {\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    .apply-btn:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    .time-label {\n      font-size: 12px;\n      opacity: 0.7;\n      white-space: nowrap;\n    }\n\n    .spacer {\n      flex: 1;\n    }\n\n    .speed-group {\n      display: flex;\n      gap: 2px;\n    }\n\n    .speed-btn {\n      padding: 4px 8px;\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 4px;\n      background: transparent;\n      color: #fff;\n      font-size: 12px;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    .speed-btn:hover {\n      background: rgba(255, 255, 255, 0.15);\n    }\n\n    .speed-btn.active {\n      background: rgba(255, 255, 255, 0.3);\n      border-color: #fff;\n    }\n\n    /* 2행: 재생 제어 + 시크바 */\n    .row-seek {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .row-seek md-icon-button {\n      --md-icon-button-icon-size: 20px;\n      --md-icon-button-container-width: 36px;\n      --md-icon-button-container-height: 36px;\n    }\n\n    .row-seek md-icon-button.primary {\n      --md-icon-button-icon-size: 24px;\n      --md-icon-button-container-width: 40px;\n      --md-icon-button-container-height: 40px;\n    }\n\n    .row-seek md-icon {\n      font-variation-settings: 'FILL' 1;\n    }\n\n    .timeline {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-width: 0;\n    }\n\n    .seek-track {\n      position: relative;\n      width: 100%;\n      height: 12px;\n    }\n\n    .seek-rail {\n      position: absolute;\n      top: 4px;\n      left: 0;\n      right: 0;\n      height: 4px;\n      background: rgba(255, 255, 255, 0.15);\n      border-radius: 2px;\n    }\n\n    .buffer-bar {\n      position: absolute;\n      top: 4px;\n      height: 4px;\n      background: rgba(255, 255, 255, 0.4);\n      border-radius: 2px;\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    .seek-bar {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 12px;\n      -webkit-appearance: none;\n      appearance: none;\n      background: transparent;\n      outline: none;\n      cursor: pointer;\n      z-index: 2;\n      margin: 0;\n    }\n\n    .seek-bar::-webkit-slider-runnable-track {\n      height: 12px;\n      background: transparent;\n    }\n\n    .seek-bar::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: #fff;\n      cursor: pointer;\n    }\n\n    .seek-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 11px;\n      opacity: 0.8;\n    }\n\n    .current-time {\n      font-size: 12px;\n      opacity: 0.9;\n      white-space: nowrap;\n      min-width: 60px;\n      text-align: center;\n    }\n  `\n\n  @property({ type: String }) playbackState: PlaybackState = 'idle'\n  @property({ type: Number }) speed: number = 1\n  @property({ type: String }) currentTime: string = ''\n  @property({ type: Array }) bufferedRanges: { from: number; to: number }[] = []\n\n  /** 외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산) */\n  @property({ type: Object }) timeRange: { from: Date; to: Date } = {\n    from: new Date(Date.now() - ONE_HOUR),\n    to: new Date()\n  }\n\n  /**\n   * Two-tier state model:\n   *\n   *   PENDING (`_pendingRange`, `_pendingFrom`, `_pendingTo`)\n   *     The upper bar's draft. User edits these via the range dropdown,\n   *     ←/→ shift, or direct date/time inputs (Range mode only). The\n   *     lower seekbar is NOT driven by these — they only become live\n   *     when the user clicks \"적용\".\n   *\n   *   APPLIED (`_appliedFrom`, `_appliedTo`)\n   *     The window the seekbar visualizes and the engine fetches data\n   *     for. Updated only by `_onApply()`, which mirrors pending values\n   *     here and dispatches a `playback-start` to refresh the engine\n   *     with the new window (when playing/paused).\n   *\n   * Splitting these prevents mid-edit churn: typing into the time input\n   * doesn't refetch on every keystroke, and the slider doesn't jiggle\n   * while the user picks a date.\n   */\n  @state() private _pendingRange: RangeKey = '1H'\n  @state() private _pendingFrom: Date = new Date(Date.now() - ONE_HOUR)\n  @state() private _pendingTo: Date = new Date()\n  /**\n   * Which side did the user touch most recently in Range mode? Anchors\n   * the auto-adjust when the resulting gap violates min/max — the\n   * unedited side is what gets pushed to a legal value, so the user's\n   * latest intent is preserved.\n   */\n  @state() private _lastEdited: 'from' | 'to' = 'to'\n\n  @state() private _appliedFrom: Date = new Date(Date.now() - ONE_HOUR)\n  @state() private _appliedTo: Date = new Date()\n\n  @state() declare private _seekValue: number\n  @state() declare private _currentPlayTime: Date | null\n  @state() private _seeking = false\n  @state() private _seekPreviewTime: Date | null = null\n\n  private _speeds = [1, 2, 4]\n  /** 드래그 중 playback-seek-preview throttle 타이머 (leading+trailing) */\n  private _previewThrottle?: number\n  /** 드래그 중 가장 최근 seekbar 위치 시각 */\n  private _latestPreviewTime: Date | null = null\n  /** 가장 최근에 실제 emit 한 preview 시각 (dedupe 용) */\n  private _lastEmittedPreviewTime: Date | null = null\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Initialize both pending and applied from the incoming timeRange.\n    // Default range = 1H (matches the previous fixed-window behavior),\n    // so the seekbar covers a 1H window from the start.\n    const initFrom = new Date(this.timeRange.from)\n    const initTo = new Date(this.timeRange.to)\n    this._appliedFrom = initFrom\n    this._appliedTo = initTo\n    this._pendingFrom = new Date(initFrom)\n    this._pendingTo = new Date(initTo)\n    this._pendingRange = this._inferRangeKey(initTo.getTime() - initFrom.getTime())\n    this._seekValue = 0\n    this._currentPlayTime = null\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this._cancelPreviewThrottle()\n  }\n\n  updated(changes: Map<string, any>) {\n    if (changes.has('timeRange') && this.timeRange) {\n      // Resync both tiers from the externally-supplied window.\n      this._appliedFrom = new Date(this.timeRange.from)\n      this._appliedTo = new Date(this.timeRange.to)\n      this._pendingFrom = new Date(this._appliedFrom)\n      this._pendingTo = new Date(this._appliedTo)\n      this._pendingRange = this._inferRangeKey(this._appliedTo.getTime() - this._appliedFrom.getTime())\n    }\n    // 엔진 프레임(currentTime 프로프 변경)이 유일한 시간 소스.\n    // drag 중에는 _seeking 가 true 이므로 엔진 업데이트 무시 (스크러빙 중 UI 튐 방지).\n    if (changes.has('currentTime') && this.currentTime && !this._seeking) {\n      this._syncFromEngine()\n    }\n  }\n\n  /**\n   * Map a millisecond gap to the matching preset key, or `'Range'` if\n   * the gap doesn't match any preset (custom window already in effect).\n   */\n  private _inferRangeKey(gapMs: number): RangeKey {\n    for (const k of ['10m', '30m', '1H', '2H'] as const) {\n      if (RANGE_DURATIONS[k] === gapMs) return k\n    }\n    return 'Range'\n  }\n\n  render() {\n    const isPlaying = this.playbackState === 'playing'\n    const isPaused = this.playbackState === 'paused'\n    const isActive = isPlaying || isPaused\n\n    const isRangeMode = this._pendingRange === 'Range'\n    const isDirty =\n      this._pendingFrom.getTime() !== this._appliedFrom.getTime() ||\n      this._pendingTo.getTime() !== this._appliedTo.getTime()\n\n    return html`\n      <div class=\"control-bar\">\n        <!-- 1행 (config): Range 선택 + ←/→ shift + datetime 입력 + Apply -->\n        <div class=\"row-time\">\n          <select class=\"range-select\" .value=${this._pendingRange} @change=${this._onRangeChange}>\n            ${(['10m', '30m', '1H', '2H', 'Range'] as RangeKey[]).map(\n              k => html`<option value=${k} ?selected=${this._pendingRange === k}>${k}</option>`\n            )}\n          </select>\n\n          <button\n            class=\"shift-btn\"\n            @click=${this._shiftPending(-1)}\n            ?disabled=${isRangeMode}\n            title=\"이전 ${this._pendingRange}\"\n          >\n            <md-icon>chevron_left</md-icon>\n          </button>\n          <button\n            class=\"shift-btn\"\n            @click=${this._shiftPending(1)}\n            ?disabled=${isRangeMode}\n            title=\"다음 ${this._pendingRange}\"\n          >\n            <md-icon>chevron_right</md-icon>\n          </button>\n\n          <!-- FROM datetime — single compact widget (date via calendar\n               popup, time via key-in, browser-native). In Fixed mode\n               disabled (derived from to − range); in Range mode editable. -->\n          <input\n            type=\"datetime-local\"\n            step=\"1\"\n            lang=\"ko-KR\"\n            class=\"datetime-input\"\n            .value=${this._toDatetimeLocalString(this._pendingFrom)}\n            ?disabled=${!isRangeMode}\n            @change=${(e: Event) => this._onPendingDatetimeChange('from', e)}\n          />\n\n          <span class=\"time-label\">~</span>\n\n          <!-- TO datetime. In Fixed mode disabled (←/→ moves it).\n               In Range mode editable. -->\n          <input\n            type=\"datetime-local\"\n            step=\"1\"\n            lang=\"ko-KR\"\n            class=\"datetime-input\"\n            .value=${this._toDatetimeLocalString(this._pendingTo)}\n            ?disabled=${!isRangeMode}\n            @change=${(e: Event) => this._onPendingDatetimeChange('to', e)}\n          />\n\n          <button class=\"apply-btn ${isDirty ? 'dirty' : ''}\" ?disabled=${!isDirty} @click=${this._onApply}>\n            적용\n          </button>\n\n          <span class=\"spacer\"></span>\n        </div>\n\n        <!-- 2행: 재생 제어 + 시크바 + 배속 + 닫기 -->\n        <div class=\"row-seek\">\n          <md-icon-button class=\"primary\" @click=${isActive ? this._onTogglePlayPause : this._onStart}>\n            <md-icon>${isPlaying ? 'pause' : 'play_arrow'}</md-icon>\n          </md-icon-button>\n\n          <div class=\"timeline\">\n            <div class=\"seek-track\">\n              <div class=\"seek-rail\"></div>\n              ${this._renderBufferBars()}\n              <input\n                type=\"range\"\n                class=\"seek-bar\"\n                min=\"0\"\n                max=\"1000\"\n                .value=${String(this._seekValue)}\n                @input=${this._onSeekInput}\n                @change=${this._onSeekChange}\n              />\n            </div>\n            <div class=\"seek-labels\">\n              <span>${this._formatTime(this._appliedFrom)}</span>\n              <span>${this._formatTime(this._appliedTo)}</span>\n            </div>\n          </div>\n\n          <span class=\"current-time\">\n            ${this._seeking && this._seekPreviewTime\n              ? this._formatTime(this._seekPreviewTime)\n              : this._currentPlayTime ? this._formatTime(this._currentPlayTime) : '--:--:--'}\n          </span>\n\n          <div class=\"speed-group\">\n            ${this._speeds.map(\n              s => html`\n                <button class=\"speed-btn ${this.speed === s ? 'active' : ''}\" @click=${() => this._onSpeedChange(s)}>\n                  ×${s}\n                </button>\n              `\n            )}\n          </div>\n\n          <md-icon-button @click=${this._onStop}>\n            <md-icon>close</md-icon>\n          </md-icon-button>\n        </div>\n      </div>\n    `\n  }\n\n  private _formatTime(date: Date): string {\n    return date.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })\n  }\n\n  private _toDateString(date: Date): string {\n    const pad = (n: number) => String(n).padStart(2, '0')\n    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`\n  }\n\n  /** \"HH:MM:SS\" — what `<input type=\"time\" step=\"1\">` reads/writes. */\n  private _toTimeString(date: Date): string {\n    const pad = (n: number) => String(n).padStart(2, '0')\n    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`\n  }\n\n  /**\n   * \"YYYY-MM-DDTHH:MM:SS\" — what `<input type=\"datetime-local\" step=\"1\">`\n   * reads/writes. Local time (no Z suffix), matches the input element's\n   * own convention.\n   */\n  private _toDatetimeLocalString(date: Date): string {\n    return `${this._toDateString(date)}T${this._toTimeString(date)}`\n  }\n\n  /**\n   * 엔진 프레임(currentTime 프로프) 을 유일한 시간 소스로 사용하여\n   * _currentPlayTime 및 _seekValue 동기화.\n   */\n  private _syncFromEngine() {\n    if (!this.currentTime || this._seeking) return\n    const currentMs = new Date(this.currentTime).getTime()\n    if (!Number.isFinite(currentMs)) return\n\n    this._currentPlayTime = new Date(currentMs)\n\n    const from = this._appliedFrom.getTime()\n    const to = this._appliedTo.getTime()\n    const range = to - from\n    if (range <= 0) return\n    this._seekValue = Math.max(0, Math.min(1000, Math.round(((currentMs - from) / range) * 1000)))\n  }\n\n  // ── Pending-tier handlers (upper config bar) ──────────────────────\n\n  private _onRangeChange(e: Event) {\n    const newKey = (e.target as HTMLSelectElement).value as RangeKey\n    this._pendingRange = newKey\n    if (newKey === 'Range') {\n      // Switching to Range: keep current pending bounds, just unlock the\n      // inputs. Auto-adjust will kick in when the user edits one side.\n      return\n    }\n    // Fixed preset: end stays where it is (clamped to now), start = end − range.\n    const dur = RANGE_DURATIONS[newKey]\n    const now = Date.now()\n    const newTo = Math.min(this._pendingTo.getTime(), now)\n    this._pendingTo = new Date(newTo)\n    this._pendingFrom = new Date(newTo - dur)\n    this._lastEdited = 'to'\n  }\n\n  private _shiftPending(direction: -1 | 1) {\n    return () => {\n      // Only meaningful in Fixed mode — Range mode disables the buttons.\n      if (this._pendingRange === 'Range') return\n      const dur = RANGE_DURATIONS[this._pendingRange]\n      const now = Date.now()\n      let newToMs = this._pendingTo.getTime() + direction * dur\n      newToMs = Math.min(newToMs, now) // future clamp on forward shift\n      this._pendingTo = new Date(newToMs)\n      this._pendingFrom = new Date(newToMs - dur)\n      this._lastEdited = 'to'\n    }\n  }\n\n  private _onPendingDatetimeChange(side: 'from' | 'to', e: Event) {\n    // value is \"YYYY-MM-DDTHH:MM:SS\" (datetime-local with step=1).\n    // Parsed as LOCAL time — `new Date(...)` on this format is local\n    // (intentional, user picks wall-clock time, not UTC).\n    const value = (e.target as HTMLInputElement).value\n    if (!value) return\n    const next = new Date(value)\n    if (Number.isNaN(next.getTime())) return\n    this._writePendingSide(side, next)\n  }\n\n  /**\n   * Commit a side's new value, then enforce the gap envelope.\n   *\n   * Rules (per spec):\n   *   - `to` clamped to now (no future).\n   *   - `to − from ≥ 10m` (no zero/negative window).\n   *   - `to − from ≤ 2h`.\n   *   - The side just edited (`side`) is the anchor; the OTHER side\n   *     gets pushed to satisfy the envelope.\n   *   - If anchoring `from` would push `to` past now, fall back to\n   *     anchoring `to = now` and shrink `from`.\n   */\n  private _writePendingSide(side: 'from' | 'to', next: Date) {\n    this._lastEdited = side\n    const now = Date.now()\n\n    if (side === 'to') {\n      const toMs = Math.min(next.getTime(), now)\n      this._pendingTo = new Date(toMs)\n      const fromMs = this._pendingFrom.getTime()\n      const gap = toMs - fromMs\n      if (gap < MIN_GAP_MS) this._pendingFrom = new Date(toMs - MIN_GAP_MS)\n      else if (gap > MAX_GAP_MS) this._pendingFrom = new Date(toMs - MAX_GAP_MS)\n    } else {\n      const fromMs = next.getTime()\n      this._pendingFrom = new Date(fromMs)\n      const toMs = this._pendingTo.getTime()\n      const gap = toMs - fromMs\n      if (gap < MIN_GAP_MS) {\n        let adj = fromMs + MIN_GAP_MS\n        if (adj > now) {\n          // Pushing `to` would land in the future — re-anchor on `to=now`\n          // and shrink `from` instead.\n          adj = now\n          this._pendingFrom = new Date(adj - MIN_GAP_MS)\n        }\n        this._pendingTo = new Date(adj)\n      } else if (gap > MAX_GAP_MS) {\n        let adj = fromMs + MAX_GAP_MS\n        if (adj > now) {\n          adj = now\n          this._pendingFrom = new Date(adj - MAX_GAP_MS)\n        }\n        this._pendingTo = new Date(adj)\n      }\n    }\n  }\n\n  /**\n   * \"적용\" — copy pending → applied, reset seek to window start, and\n   * (re)start the engine so it refetches data for the new window.\n   *\n   * Behavior by prior state:\n   *   - playing: dispatch `playback-start` → engine restarts in new window.\n   *   - paused : same — engine refetches; we leave the user in 'playing'\n   *     state because the alternative (carry \"paused\" through a window\n   *     change) ends up showing stale buffered data while the new fetch\n   *     completes, which reads as a stuck UI.\n   *   - idle   : window updated silently; no engine activity until user\n   *     presses play.\n   */\n  private _onApply() {\n    this._appliedFrom = new Date(this._pendingFrom)\n    this._appliedTo = new Date(this._pendingTo)\n    this._seekValue = 0\n    this._currentPlayTime = new Date(this._appliedFrom)\n    this._seekPreviewTime = null\n\n    if (this.playbackState === 'playing' || this.playbackState === 'paused') {\n      this._onStart()\n    }\n  }\n\n  private _onStart() {\n    // 현재 seekbar 위치에서 재생 시작 (_seekValue 가 유일한 슬라이더 위치 소스)\n    const ratio = this._seekValue / 1000\n    const from = this._appliedFrom.getTime()\n    const to = this._appliedTo.getTime()\n    const fromTime = new Date(from + (to - from) * ratio)\n    const toTime = new Date(to)\n\n    this._currentPlayTime = fromTime\n    this.playbackState = 'playing'\n\n    // toTime is the window END (= _appliedTo), NOT a hardcoded\n    // fromTime + 1h. The engine uses it as the chunked-fetch upper\n    // bound — without it, variable ranges (10m / 30m / Range mode)\n    // would silently overshoot the user-selected window.\n    this.dispatchEvent(\n      new CustomEvent('playback-start', {\n        detail: { fromTime, toTime, speed: this.speed },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onTogglePlayPause() {\n    if (this.playbackState === 'playing') {\n      this.playbackState = 'paused'\n      this.dispatchEvent(new CustomEvent('playback-pause', { bubbles: true, composed: true }))\n    } else {\n      this.playbackState = 'playing'\n      this.dispatchEvent(new CustomEvent('playback-resume', { bubbles: true, composed: true }))\n    }\n  }\n\n  private _onStop() {\n    this._cancelPreviewThrottle()\n    this._currentPlayTime = null\n    this._seekValue = 0\n    this.playbackState = 'idle'\n    this.dispatchEvent(new CustomEvent('playback-stop', { bubbles: true, composed: true }))\n  }\n\n  private _onSeekInput(e: Event) {\n    // 드래그 시작(첫 input) 탐지\n    const justStartedDrag = !this._seeking\n    this._seeking = true\n    this._seekValue = Number((e.target as HTMLInputElement).value)\n\n    // 드래그 중 preview 시간 계산 + UI 표시\n    const ratio = this._seekValue / 1000\n    const from = this._appliedFrom.getTime()\n    const to = this._appliedTo.getTime()\n    const previewTime = new Date(from + (to - from) * ratio)\n    this._seekPreviewTime = previewTime\n    this._latestPreviewTime = previewTime\n\n    if (justStartedDrag) {\n      // 즉시 이벤트 — 재생 타이머 정지\n      this.dispatchEvent(\n        new CustomEvent('playback-seek-start', {\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n\n    // throttle: leading-edge 에서 즉시 emit, 이후 200ms 내 input 은 latest 만 갱신.\n    // throttle 만료 시점에 latest 가 마지막 emit 과 다르면 trailing emit.\n    if (this._previewThrottle === undefined) {\n      // leading emit\n      this._emitPreview()\n      // trailing 예약\n      this._previewThrottle = window.setTimeout(() => {\n        this._previewThrottle = undefined\n        // 드래그가 끝났거나 (_seeking=false) 새 throttle 이 이미 있으면 스킵\n        if (!this._seeking) return\n        // latest 가 마지막 emit 과 같으면 중복 skip\n        const latest = this._latestPreviewTime\n        if (latest && latest.getTime() !== this._lastEmittedPreviewTime?.getTime()) {\n          this._emitPreview()\n        }\n      }, PlaybackControls.PREVIEW_THROTTLE_MS)\n    }\n    // else: 이미 throttle 진행 중 → _latestPreviewTime 만 업데이트됨 (위에서 처리됨)\n  }\n\n  /** latest 위치 시각으로 playback-seek-preview 를 발행 (dedupe). */\n  private _emitPreview() {\n    const time = this._latestPreviewTime\n    if (!time) return\n    if (this._lastEmittedPreviewTime?.getTime() === time.getTime()) return\n    this._lastEmittedPreviewTime = time\n    this.dispatchEvent(\n      new CustomEvent('playback-seek-preview', {\n        detail: { toTime: time },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onSeekChange(e: Event) {\n    this._seeking = false\n    this._cancelPreviewThrottle()\n\n    const ratio = Number((e.target as HTMLInputElement).value) / 1000\n    const from = this._appliedFrom.getTime()\n    const to = this._appliedTo.getTime()\n    const targetTime = new Date(from + (to - from) * ratio)\n\n    this._seekPreviewTime = null\n    this._currentPlayTime = targetTime\n\n    this.dispatchEvent(\n      new CustomEvent('playback-seek', {\n        detail: { toTime: targetTime },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private static readonly PREVIEW_THROTTLE_MS = 200\n\n  private _cancelPreviewThrottle() {\n    if (this._previewThrottle != null) {\n      clearTimeout(this._previewThrottle)\n      this._previewThrottle = undefined\n    }\n    this._latestPreviewTime = null\n    this._lastEmittedPreviewTime = null\n  }\n\n  private _renderBufferBars() {\n    if (!this.bufferedRanges?.length) return ''\n\n    const from = this._appliedFrom.getTime()\n    const to = this._appliedTo.getTime()\n    const range = to - from\n    if (range <= 0) return ''\n\n    return this.bufferedRanges.map(r => {\n      const left = Math.max(0, (r.from - from) / range) * 100\n      const right = Math.min(1, (r.to - from) / range) * 100\n      const width = right - left\n      return html`<div class=\"buffer-bar\" style=\"left:${left}%;width:${width}%\"></div>`\n    })\n  }\n\n  private _onSpeedChange(speed: number) {\n    this.speed = speed\n\n    this.dispatchEvent(\n      new CustomEvent('playback-speed', {\n        detail: { speed },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

package/dist/src/playback/playback-engine.d.ts

@@ -0,0 +1,106 @@
+/**
+ * PlaybackEngine — YouTube 스트리밍 방식의 청크 기반 플레이백
+ *
+ * - 10분 단위로 데이터를 fetch하여 버퍼에 적재
+ * - 남은 데이터 1분 이하 시 다음 10분 prefetch
+ * - seek 시 기존 버퍼 폐기 후 fresh fetch (보드 리셋 없음 — snapshot 이 모든 data 덮어씀)
+ * - seekPreview: count=1 snapshot 만 요청해 scene 에 적용 (드래그 스크러빙)
+ * - pauseForSeek / seekTo 가 scene.suppressAnimations 를 ON/OFF 토글
+ * - setInterval 기반 프레임 진행 (배속 반영)
+ */
+import type { PlaybackScenario } from '@fmsim/api';
+export type PlaybackState = 'idle' | 'loading' | 'playing' | 'paused' | 'stopped';
+export interface PlaybackEventMap {
+    'state-change': PlaybackState;
+    'frame': {
+        time: string;
+        index: number;
+        total: number;
+    };
+    'error': string;
+    'load-complete': {
+        totalFrames: number;
+        scenarios: string[];
+    };
+    'buffer-update': {
+        bufferedRanges: {
+            from: number;
+            to: number;
+        }[];
+    };
+}
+type PlaybackListener<K extends keyof PlaybackEventMap> = (detail: PlaybackEventMap[K]) => void;
+export declare class PlaybackEngine {
+    private _state;
+    private _frames;
+    private _currentIndex;
+    private _timer?;
+    private _speed;
+    private _scene;
+    private _scenarioNames;
+    private _listeners;
+    private _fetchFn?;
+    private _totalRange?;
+    private _prefetching;
+    private _bufferedEnd;
+    get state(): PlaybackState;
+    get currentIndex(): number;
+    get totalFrames(): number;
+    get currentTime(): string | null;
+    get scenarioNames(): string[];
+    /**
+     * fetch 함수 주입 (페이지에서 제공)
+     * - 2-arg 호출: 청크 프리페치 (includeSnapshot 기본 true)
+     * - 4-arg 호출: 프리뷰용 snapshot-only (count=1)
+     */
+    setFetchFunction(fn: (startTime: string, endTime?: string, includeSnapshot?: boolean, count?: number) => Promise<any>): void;
+    /**
+     * 청크 기반 시작: fromTime에서 10분 분량을 가져와 재생 시작
+     */
+    startChunked(fromTime: Date, endTime: Date, speed?: number): Promise<void>;
+    /**
+     * 이전 방식 호환: 전체 데이터를 한번에 로드
+     */
+    loadData(scenarios: PlaybackScenario[]): void;
+    attachScene(scene: any): void;
+    detachScene(): void;
+    play(speed?: number): void;
+    pause(): void;
+    resume(): void;
+    stop(): void;
+    setSpeed(speed: number): void;
+    /**
+     * seek — 기존 버퍼 폐기 + 새 위치에서 snapshot+delta fresh fetch.
+     * 보드 상태 리셋 없음 — snapshot 이 모든 컴포넌트 data 를 덮어쓰므로 불필요.
+     * (드래그로 들어온 경우 pauseForSeek 에서 이미 suppressAnimations = true)
+     */
+    seekTo(time: Date): Promise<void>;
+    /**
+     * 드래그 시작: 재생 타이머 정지 + 애니메이션 억제 ON.
+     * 논리 상태(_state)는 유지 — seekTo 가 상태 기반으로 타이머 복원.
+     */
+    pauseForSeek(): void;
+    /**
+     * seekPreview — 드래그 중 호출. 해당 시간의 snapshot 1프레임만 요청해서
+     * 현재 보드에 적용. 버퍼/상태 변경 없음.
+     * (pauseForSeek 에서 이미 suppressAnimations = true 가 걸려 있음)
+     */
+    seekPreview(time: Date): Promise<void>;
+    on<K extends keyof PlaybackEventMap>(event: K, listener: PlaybackListener<K>): void;
+    off<K extends keyof PlaybackEventMap>(event: K, listener: PlaybackListener<K>): void;
+    dispose(): void;
+    private _fetchAndAppend;
+    private _appendScenarios;
+    private _mergeScenarios;
+    private _checkPrefetch;
+    private _startTimer;
+    private _stopTimer;
+    private _applyCurrentFrame;
+    private _applyFrame;
+    private _emitFrame;
+    private _emitBufferUpdate;
+    private _setState;
+    private _emit;
+    private _formatTime;
+}
+export {};

package/dist/src/playback/playback-engine.js

@@ -0,0 +1,395 @@
+/**
+ * PlaybackEngine — YouTube 스트리밍 방식의 청크 기반 플레이백
+ *
+ * - 10분 단위로 데이터를 fetch하여 버퍼에 적재
+ * - 남은 데이터 1분 이하 시 다음 10분 prefetch
+ * - seek 시 기존 버퍼 폐기 후 fresh fetch (보드 리셋 없음 — snapshot 이 모든 data 덮어씀)
+ * - seekPreview: count=1 snapshot 만 요청해 scene 에 적용 (드래그 스크러빙)
+ * - pauseForSeek / seekTo 가 scene.suppressAnimations 를 ON/OFF 토글
+ * - setInterval 기반 프레임 진행 (배속 반영)
+ */
+const CHUNK_DURATION = 10 * 60 * 1000; // 10분
+const PREFETCH_THRESHOLD = 1 * 60 * 1000; // 1분
+export class PlaybackEngine {
+    constructor() {
+        this._state = 'idle';
+        this._frames = [];
+        this._currentIndex = 0;
+        this._speed = 1;
+        this._scene = null;
+        this._scenarioNames = [];
+        this._listeners = new Map();
+        this._prefetching = false;
+        this._bufferedEnd = 0;
+    }
+    // ── 공개 API ──
+    get state() { return this._state; }
+    get currentIndex() { return this._currentIndex; }
+    get totalFrames() { return this._frames.length; }
+    get currentTime() { var _a, _b; return (_b = (_a = this._frames[this._currentIndex]) === null || _a === void 0 ? void 0 : _a.time) !== null && _b !== void 0 ? _b : null; }
+    get scenarioNames() { return this._scenarioNames; }
+    /**
+     * fetch 함수 주입 (페이지에서 제공)
+     * - 2-arg 호출: 청크 프리페치 (includeSnapshot 기본 true)
+     * - 4-arg 호출: 프리뷰용 snapshot-only (count=1)
+     */
+    setFetchFunction(fn) {
+        this._fetchFn = fn;
+    }
+    /**
+     * 청크 기반 시작: fromTime에서 10분 분량을 가져와 재생 시작
+     */
+    async startChunked(fromTime, endTime, speed = 1) {
+        this._stopTimer();
+        this._frames = [];
+        this._currentIndex = 0;
+        this._speed = speed;
+        this._totalRange = { from: fromTime.getTime(), to: endTime.getTime() };
+        this._bufferedEnd = 0;
+        this._prefetching = false;
+        this._setState('loading');
+        const chunkEnd = Math.min(fromTime.getTime() + CHUNK_DURATION, endTime.getTime());
+        await this._fetchAndAppend(fromTime.getTime(), chunkEnd);
+        if (this._frames.length === 0) {
+            this._setState('stopped');
+            return;
+        }
+        // 첫 프레임 즉시 적용
+        this._applyCurrentFrame();
+        this._setState('playing');
+        this._startTimer();
+    }
+    /**
+     * 이전 방식 호환: 전체 데이터를 한번에 로드
+     */
+    loadData(scenarios) {
+        this._setState('loading');
+        this._mergeScenarios(scenarios);
+        this._currentIndex = 0;
+        this._setState('stopped');
+        this._emit('load-complete', {
+            totalFrames: this._frames.length,
+            scenarios: this._scenarioNames
+        });
+    }
+    attachScene(scene) {
+        this._scene = scene;
+    }
+    detachScene() {
+        this._scene = null;
+    }
+    play(speed) {
+        if (this._frames.length === 0)
+            return;
+        if (speed != null)
+            this._speed = speed;
+        this._applyCurrentFrame();
+        this._setState('playing');
+        this._startTimer();
+    }
+    pause() {
+        this._stopTimer();
+        this._setState('paused');
+    }
+    resume() {
+        if (this._state !== 'paused')
+            return;
+        this._setState('playing');
+        this._startTimer();
+    }
+    stop() {
+        this._stopTimer();
+        this._currentIndex = 0;
+        this._frames = [];
+        this._bufferedEnd = 0;
+        this._prefetching = false;
+        this._speed = 1; // 다음 세션이 기본 1x 로 시작하도록 리셋
+        this._setState('stopped');
+    }
+    setSpeed(speed) {
+        this._speed = speed;
+        if (this._state === 'playing') {
+            this._stopTimer();
+            this._startTimer();
+        }
+    }
+    /**
+     * seek — 기존 버퍼 폐기 + 새 위치에서 snapshot+delta fresh fetch.
+     * 보드 상태 리셋 없음 — snapshot 이 모든 컴포넌트 data 를 덮어쓰므로 불필요.
+     * (드래그로 들어온 경우 pauseForSeek 에서 이미 suppressAnimations = true)
+     */
+    async seekTo(time) {
+        const wasPlaying = this._state === 'playing';
+        this._stopTimer();
+        // 버퍼 전체 폐기
+        this._frames = [];
+        this._currentIndex = 0;
+        this._bufferedEnd = 0;
+        this._prefetching = false;
+        if (this._fetchFn && this._totalRange) {
+            this._setState('loading');
+            const chunkEnd = Math.min(time.getTime() + CHUNK_DURATION, this._totalRange.to);
+            await this._fetchAndAppend(time.getTime(), chunkEnd);
+            // 첫 프레임 적용
+            if (this._frames.length > 0) {
+                this._applyCurrentFrame();
+                this._emitFrame();
+            }
+        }
+        else {
+            // 이전 방식: 메모리 내 탐색 (fallback, 사용되지 않음)
+            const target = this._formatTime(time);
+            for (let i = 0; i < this._frames.length; i++) {
+                if (this._frames[i].time <= target) {
+                    this._currentIndex = i;
+                }
+                else {
+                    break;
+                }
+            }
+            this._applyCurrentFrame();
+        }
+        if (wasPlaying && this._frames.length > 0) {
+            this._setState('playing');
+            this._startTimer();
+        }
+        else if (this._frames.length > 0) {
+            this._setState('paused');
+        }
+        // 드래그 종료 — 애니메이션 억제 OFF
+        if (this._scene)
+            this._scene.suppressAnimations = false;
+    }
+    /**
+     * 드래그 시작: 재생 타이머 정지 + 애니메이션 억제 ON.
+     * 논리 상태(_state)는 유지 — seekTo 가 상태 기반으로 타이머 복원.
+     */
+    pauseForSeek() {
+        this._stopTimer();
+        if (this._scene)
+            this._scene.suppressAnimations = true;
+    }
+    /**
+     * seekPreview — 드래그 중 호출. 해당 시간의 snapshot 1프레임만 요청해서
+     * 현재 보드에 적용. 버퍼/상태 변경 없음.
+     * (pauseForSeek 에서 이미 suppressAnimations = true 가 걸려 있음)
+     */
+    async seekPreview(time) {
+        var _a, _b, _c;
+        if (!this._fetchFn || !this._scene)
+            return;
+        try {
+            // count=1 로 해당 시점의 snapshot 한 프레임만 요청
+            const result = await this._fetchFn(this._formatTime(time), undefined, true, // includeSnapshot
+            1 // count
+            );
+            // await 동안 scene 이 detach 된 경우 무시 (stop/dispose)
+            if (!this._scene)
+                return;
+            if (!(result === null || result === void 0 ? void 0 : result.status) || !result.playback)
+                return;
+            const scenarios = result.playback.scenarios;
+            if (!(scenarios === null || scenarios === void 0 ? void 0 : scenarios.length))
+                return;
+            for (const scenario of scenarios) {
+                const frame = (_a = scenario.snapshots) === null || _a === void 0 ? void 0 : _a[0];
+                if (!(frame === null || frame === void 0 ? void 0 : frame.data))
+                    continue;
+                for (const record of frame.data) {
+                    if (!(record === null || record === void 0 ? void 0 : record.NAME))
+                        continue;
+                    const components = ((_c = (_b = this._scene) === null || _b === void 0 ? void 0 : _b.findAllById) === null || _c === void 0 ? void 0 : _c.call(_b, record.NAME)) || [];
+                    for (const component of components) {
+                        component.data = record;
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error('[PlaybackEngine] seekPreview error:', e);
+        }
+    }
+    on(event, listener) {
+        if (!this._listeners.has(event))
+            this._listeners.set(event, new Set());
+        this._listeners.get(event).add(listener);
+    }
+    off(event, listener) {
+        var _a;
+        (_a = this._listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(listener);
+    }
+    dispose() {
+        this._stopTimer();
+        if (this._scene)
+            this._scene.suppressAnimations = false;
+        this._scene = null;
+        this._frames = [];
+        this._listeners.clear();
+    }
+    // ── 내부: 청크 관리 ──
+    async _fetchAndAppend(fromMs, toMs) {
+        if (!this._fetchFn)
+            return;
+        try {
+            const result = await this._fetchFn(this._formatTime(new Date(fromMs)), this._formatTime(new Date(toMs)));
+            // stop 후 응답이 돌아온 경우 무시 (잔여 diff 프레임 방지)
+            if (this._state === 'stopped')
+                return;
+            if ((result === null || result === void 0 ? void 0 : result.status) && result.playback) {
+                this._appendScenarios(result.playback.scenarios);
+                this._bufferedEnd = Math.max(this._bufferedEnd, toMs);
+                this._emitBufferUpdate();
+            }
+        }
+        catch (e) {
+            console.error('[PlaybackEngine] chunk fetch error:', e);
+            this._emit('error', String(e));
+        }
+    }
+    _appendScenarios(scenarios) {
+        if (!this._scenarioNames.length) {
+            this._scenarioNames = scenarios.map(s => s.scenarioName);
+        }
+        const existingTimes = new Set(this._frames.map(f => f.time));
+        for (const scenario of scenarios) {
+            for (const frame of scenario.snapshots) {
+                if (existingTimes.has(frame.time)) {
+                    // 기존 프레임에 시나리오 데이터 추가
+                    const existing = this._frames.find(f => f.time === frame.time);
+                    if (existing) {
+                        existing.data.set(scenario.scenarioName, frame.data);
+                    }
+                }
+                else {
+                    const data = new Map();
+                    data.set(scenario.scenarioName, frame.data);
+                    this._frames.push({
+                        time: frame.time,
+                        timeMs: new Date(frame.time.replace(' ', 'T')).getTime() || new Date(frame.time).getTime(),
+                        data
+                    });
+                    existingTimes.add(frame.time);
+                }
+            }
+        }
+        // 시간순 재정렬
+        this._frames.sort((a, b) => a.time.localeCompare(b.time));
+    }
+    _mergeScenarios(scenarios) {
+        this._scenarioNames = scenarios.map(s => s.scenarioName);
+        this._frames = [];
+        this._appendScenarios(scenarios);
+    }
+    async _checkPrefetch() {
+        if (this._prefetching || !this._fetchFn || !this._totalRange)
+            return;
+        const currentFrame = this._frames[this._currentIndex];
+        if (!currentFrame)
+            return;
+        const remaining = this._bufferedEnd - currentFrame.timeMs;
+        if (remaining <= PREFETCH_THRESHOLD && this._bufferedEnd < this._totalRange.to) {
+            this._prefetching = true;
+            try {
+                const chunkEnd = Math.min(this._bufferedEnd + CHUNK_DURATION, this._totalRange.to);
+                await this._fetchAndAppend(this._bufferedEnd, chunkEnd);
+            }
+            finally {
+                this._prefetching = false;
+            }
+        }
+    }
+    // ── 내부: 타이머 ──
+    _startTimer() {
+        this._stopTimer();
+        const intervalMs = 1000 / this._speed;
+        this._timer = window.setInterval(() => {
+            this._currentIndex++;
+            if (this._currentIndex >= this._frames.length) {
+                // 버퍼 끝 도달
+                if (this._totalRange && this._bufferedEnd < this._totalRange.to) {
+                    // 아직 더 가져올 데이터 있음 — 대기
+                    this._currentIndex = this._frames.length - 1;
+                    this._checkPrefetch();
+                    return;
+                }
+                // 전체 재생 완료
+                this._currentIndex = this._frames.length - 1;
+                this._stopTimer();
+                this._setState('stopped');
+                return;
+            }
+            this._applyCurrentFrame();
+            this._emitFrame();
+            // prefetch 체크 (비동기)
+            this._checkPrefetch();
+        }, intervalMs);
+    }
+    _stopTimer() {
+        if (this._timer != null) {
+            clearInterval(this._timer);
+            this._timer = undefined;
+        }
+    }
+    // ── 내부: 프레임 적용 ──
+    _applyCurrentFrame() {
+        this._applyFrame(this._currentIndex);
+        this._emitFrame();
+    }
+    _applyFrame(index) {
+        var _a, _b;
+        // detach 후(=stop 경로) scene 이 null 이면 no-op
+        const frame = this._frames[index];
+        if (!frame || !this._scene)
+            return;
+        for (const [_scenarioName, records] of frame.data) {
+            for (const record of records) {
+                if (!record.NAME)
+                    continue;
+                const components = ((_b = (_a = this._scene).findAllById) === null || _b === void 0 ? void 0 : _b.call(_a, record.NAME)) || [];
+                for (const component of components) {
+                    component.data = record;
+                }
+            }
+        }
+    }
+    _emitFrame() {
+        const frame = this._frames[this._currentIndex];
+        if (frame) {
+            this._emit('frame', {
+                time: frame.time,
+                index: this._currentIndex,
+                total: this._frames.length
+            });
+        }
+    }
+    _emitBufferUpdate() {
+        if (!this._totalRange)
+            return;
+        const ranges = [];
+        if (this._frames.length > 0) {
+            ranges.push({
+                from: this._frames[0].timeMs,
+                to: this._bufferedEnd
+            });
+        }
+        this._emit('buffer-update', { bufferedRanges: ranges });
+    }
+    // ── 유틸 ──
+    _setState(state) {
+        this._state = state;
+        this._emit('state-change', state);
+    }
+    _emit(event, detail) {
+        const listeners = this._listeners.get(event);
+        if (listeners) {
+            for (const fn of listeners) {
+                fn(detail);
+            }
+        }
+    }
+    _formatTime(date) {
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+    }
+}
+//# sourceMappingURL=playback-engine.js.map