@fmsim/board 2.0.0-beta.11 → 2.0.0-beta.111

package/dist/src/ox-playback-controls.d.ts

@@ -5,14 +5,28 @@ type PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped';
 /**
  * 플레이백 컨트롤 오버레이 바 (2행 구조)
  *
- * 1행: 시작 시점 설정 (datetime + ±1h 버튼) + 배속 선택
- * 2행: 재생 제어 (play/pause/stop) + 1시간 범위 시크바 + 닫기
+ * 1행 (config): Range 선택 (10m / 30m / 1H / 2H / Range) + ←/→ shift
+ *   + FROM/TO datetime 입력 (date 캘린더 + time 키인) + Apply 버튼
+ *   + 배속 (×1 ×2 ×4)
  *
- * @fires playback-start - 플레이백 시작 요청 { fromTime, speed }
+ *   - Fixed presets: TO 가 anchor (←/→ 로 shift), FROM = TO − range.
+ *     입력 disabled. 초기 TO = 현재시간.
+ *   - Range mode: 양쪽 직접 입력. 2H cap, 10m min, future clamp,
+ *     마지막 편집한 쪽이 anchor.
+ *   - 상단 변경은 PENDING tier 만 갱신 — Apply 누르기 전에는 하단
+ *     슬라이더/엔진에 영향 없음.
+ *
+ * 2행 (control): play / pause / 시크바 (적용된 range 만큼 span) /
+ *   현재 재생 시각 / 닫기.
+ *
+ * @fires playback-start - 플레이백 시작 요청 { fromTime, toTime, speed }
+ *   toTime 은 window END — 엔진이 chunked fetch 의 상한으로 사용.
  * @fires playback-pause - 일시정지 요청
  * @fires playback-resume - 재개 요청
  * @fires playback-stop - 중지 요청
- * @fires playback-seek - 시크 요청 { toTime }
+ * @fires playback-seek - 드래그 릴리즈 시 시크 요청 { toTime }
+ * @fires playback-seek-start - 드래그 첫 input 시 즉시 발행 (엔진 타이머·애니메이션 정지 신호, detail 없음)
+ * @fires playback-seek-preview - 드래그 중 throttle (leading+trailing, 200ms) 된 스크러빙 요청 { toTime }
  * @fires playback-speed - 배속 변경 요청 { speed }
  */
 export declare class PlaybackControls extends LitElement {
@@ -20,41 +34,124 @@ export declare class PlaybackControls extends LitElement {
     playbackState: PlaybackState;
     speed: number;
     currentTime: string;
+    bufferedRanges: {
+        from: number;
+        to: number;
+    }[];
     /** 외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산) */
     timeRange: {
         from: Date;
         to: Date;
     };
-    private _startTime;
+    /**
+     * Two-tier state model:
+     *
+     *   PENDING (`_pendingRange`, `_pendingFrom`, `_pendingTo`)
+     *     The upper bar's draft. User edits these via the range dropdown,
+     *     ←/→ shift, or direct date/time inputs (Range mode only). The
+     *     lower seekbar is NOT driven by these — they only become live
+     *     when the user clicks "적용".
+     *
+     *   APPLIED (`_appliedFrom`, `_appliedTo`)
+     *     The window the seekbar visualizes and the engine fetches data
+     *     for. Updated only by `_onApply()`, which mirrors pending values
+     *     here and dispatches a `playback-start` to refresh the engine
+     *     with the new window (when playing/paused).
+     *
+     * Splitting these prevents mid-edit churn: typing into the time input
+     * doesn't refetch on every keystroke, and the slider doesn't jiggle
+     * while the user picks a date.
+     */
+    private _pendingRange;
+    private _pendingFrom;
+    private _pendingTo;
+    /**
+     * Which side did the user touch most recently in Range mode? Anchors
+     * the auto-adjust when the resulting gap violates min/max — the
+     * unedited side is what gets pushed to a legal value, so the user's
+     * latest intent is preserved.
+     */
+    private _lastEdited;
+    private _appliedFrom;
+    private _appliedTo;
     private _seekValue;
     private _currentPlayTime;
+    private _seeking;
+    private _seekPreviewTime;
     private _speeds;
-    private _timer?;
-    private get _endTime();
-    private static _floorToHour;
+    /** 드래그 중 playback-seek-preview throttle 타이머 (leading+trailing) */
+    private _previewThrottle?;
+    /** 드래그 중 가장 최근 seekbar 위치 시각 */
+    private _latestPreviewTime;
+    /** 가장 최근에 실제 emit 한 preview 시각 (dedupe 용) */
+    private _lastEmittedPreviewTime;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changes: Map<string, any>): void;
+    /**
+     * Map a millisecond gap to the matching preset key, or `'Range'` if
+     * the gap doesn't match any preset (custom window already in effect).
+     */
+    private _inferRangeKey;
     render(): import("lit-html").TemplateResult<1>;
     private _formatTime;
     private _toDateString;
-    private _updateSeekPosition;
-    private _onDateChange;
-    private _onHourChange;
-    private _shiftTime;
+    /** "HH:MM:SS" — what `<input type="time" step="1">` reads/writes. */
+    private _toTimeString;
+    /**
+     * "YYYY-MM-DDTHH:MM:SS" — what `<input type="datetime-local" step="1">`
+     * reads/writes. Local time (no Z suffix), matches the input element's
+     * own convention.
+     */
+    private _toDatetimeLocalString;
+    /**
+     * 엔진 프레임(currentTime 프로프) 을 유일한 시간 소스로 사용하여
+     * _currentPlayTime 및 _seekValue 동기화.
+     */
+    private _syncFromEngine;
+    private _onRangeChange;
+    private _shiftPending;
+    private _pad;
+    private _onTimeKeydown;
+    private _onTimeInput;
+    private _onCompositeChange;
+    /**
+     * Commit a side's new value, then enforce the gap envelope.
+     *
+     * Rules (per spec):
+     *   - `to` clamped to now (no future).
+     *   - `to − from ≥ 10m` (no zero/negative window).
+     *   - `to − from ≤ 2h`.
+     *   - The side just edited (`side`) is the anchor; the OTHER side
+     *     gets pushed to satisfy the envelope.
+     *   - If anchoring `from` would push `to` past now, fall back to
+     *     anchoring `to = now` and shrink `from`.
+     */
+    private _writePendingSide;
     /**
-     * 시작 시간 변경 시 현재 재생 시간도 같은 offset만큼 이동.
-     * 재생 중이면 타이머 유지.
+     * "적용" — copy pending → applied, reset seek to window start, and
+     * (re)start the engine so it refetches data for the new window.
+     *
+     * Behavior by prior state:
+     *   - playing: dispatch `playback-start` → engine restarts in new window.
+     *   - paused : same — engine refetches; we leave the user in 'playing'
+     *     state because the alternative (carry "paused" through a window
+     *     change) ends up showing stale buffered data while the new fetch
+     *     completes, which reads as a stuck UI.
+     *   - idle   : window updated silently; no engine activity until user
+     *     presses play.
      */
-    private _shiftStartTime;
+    private _onApply;
     private _onStart;
     private _onTogglePlayPause;
     private _onStop;
     private _onSeekInput;
+    /** latest 위치 시각으로 playback-seek-preview 를 발행 (dedupe). */
+    private _emitPreview;
     private _onSeekChange;
+    private static readonly PREVIEW_THROTTLE_MS;
+    private _cancelPreviewThrottle;
+    private _renderBufferBars;
     private _onSpeedChange;
-    private _startTimer;
-    private _stopTimer;
-    private _updateSeekFromPlayTime;
 }
 export {};