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

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

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