@operato/board 10.0.0-beta.27 → 10.0.0-beta.29

package/dist/src/graphql/playback-subscription.js

@@ -1,36 +1,56 @@
 import gql from 'graphql-tag';
-import { subscribe } from '@operato/graphql';
+import { PlaybackBuffer } from './playback-buffer.js';
 /**
- * PlaybackProvider
+ * PlaybackProvider — YouTube 스트리밍 방식의 청크 기반 플레이백
  *
- * 백엔드 플레이백 서비스와 point-to-point 구독으로 통신하는 DataSubscriptionProvider.
- * 백엔드가 요청된 시점/배속으로 스냅샷을 실시간처럼 푸시하면,
- * 이를 받아서 등록된 컴포넌트에 전달한다.
- *
- * 실시간 DataSubscriptionProviderImpl과 동일한 인터페이스를 구현하므로
- * Scene 입장에서는 실시간/플레이백을 구분하지 않는다.
+ * - 10분 단위로 데이터를 fetch하여 버퍼에 적재
+ * - 남은 데이터 1분 이하 시 다음 10분 prefetch
+ * - seek 시 기존 버퍼 전체 폐기 후 fresh fetch
+ * - requestAnimationFrame 기반 재생 루프
  */
 export class PlaybackProvider {
     constructor(onStatusChange) {
         this._components = new Map();
-        this._subscription = null;
+        this._buffer = null;
         this._state = 'idle';
         this._speed = 1;
-        this._currentTime = '';
+        this._playHead = 0;
+        this._lastFrameTime = 0;
+        this._rafId = 0;
+        this._lastDistributedSnapshot = null;
+        this._totalRange = null;
+        this._playLoop = (now) => {
+            if (this._state !== 'playing' || !this._buffer)
+                return;
+            const delta = (now - this._lastFrameTime) * this._speed;
+            this._lastFrameTime = now;
+            this._playHead += delta;
+            // 전체 범위 끝 도달 체크
+            if (this._totalRange && this._playHead >= this._totalRange.to.getTime()) {
+                this._playHead = this._totalRange.to.getTime();
+                this._state = 'stopped';
+                this._notifyStatus();
+                return;
+            }
+            // 현재 스냅샷 배포
+            const snap = this._buffer.getSnapshotAt(this._playHead);
+            if (snap && snap !== this._lastDistributedSnapshot) {
+                this._distributeSnapshot(snap.data);
+                this._lastDistributedSnapshot = snap;
+            }
+            // prefetch 체크 (비동기, 루프 블로킹 안 함)
+            this._buffer.checkPrefetch(this._playHead);
+            this._notifyStatus();
+            // 다음 프레임
+            this._rafId = requestAnimationFrame(this._playLoop);
+        };
         this._onStatusChange = onStatusChange;
     }
-    get state() {
-        return this._state;
-    }
-    get speed() {
-        return this._speed;
-    }
-    get currentTime() {
-        return this._currentTime;
-    }
+    get state() { return this._state; }
+    get speed() { return this._speed; }
+    get currentTime() { return this._playHead ? new Date(this._playHead).toISOString() : ''; }
     /**
      * DataSubscriptionProvider.subscribe 구현
-     * 컴포넌트를 tag별로 등록한다. 실제 데이터는 백엔드 구독을 통해 수신된다.
      */
     async subscribe(tag, component) {
         if (!this._components.has(tag)) {
@@ -50,94 +70,85 @@ export class PlaybackProvider {
         };
     }
     /**
-     * 플레이백 시작 — 백엔드에 point-to-point 구독을 개시한다.
+     * 플레이백 시작
      */
-    async start(fromTime, speed = 1) {
-        var _a;
-        // 기존 구독이 있으면 정리
-        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    async start(fromTime, speed = 1, totalRange) {
+        this.stop();
         this._speed = speed;
+        this._totalRange = totalRange || { from: fromTime, to: new Date(fromTime.getTime() + 3600000) };
+        // 버퍼 생성 + 초기 로드
+        this._buffer = new PlaybackBuffer(this._createFetcher(), this._totalRange);
+        await this._buffer.loadInitial(fromTime.getTime());
+        this._playHead = fromTime.getTime();
         this._state = 'playing';
-        this._subscription = await subscribe({
-            query: gql `
-          subscription Playback($fromTime: String!, $speed: Float!) {
-            playback(fromTime: $fromTime, speed: $speed) {
-              timestamp
-              data
-            }
-          }
-        `,
-            variables: {
-                fromTime: fromTime.toISOString(),
-                speed
-            }
-        }, {
-            next: ({ data }) => {
-                if (!(data === null || data === void 0 ? void 0 : data.playback))
-                    return;
-                const { timestamp, data: snapshotData } = data.playback;
-                this._currentTime = timestamp;
-                // 스냅샷 데이터를 tag별로 분배
-                this._distributeSnapshot(snapshotData);
-                this._notifyStatus();
-            },
-            error: (err) => {
-                console.error('[PlaybackProvider] subscription error:', err);
-                this._state = 'stopped';
-                this._notifyStatus();
-            },
-            complete: () => {
-                this._state = 'stopped';
-                this._notifyStatus();
-            }
-        });
+        this._lastFrameTime = performance.now();
+        this._startPlayLoop();
         this._notifyStatus();
     }
     /**
      * 일시정지
      */
-    async pause() {
+    pause() {
         if (this._state !== 'playing')
             return;
         this._state = 'paused';
-        // 백엔드에 pause 명령 전송 (mutation)
-        await this._sendCommand('pause');
+        this._stopPlayLoop();
         this._notifyStatus();
     }
     /**
      * 재개
      */
-    async resume() {
+    resume() {
         if (this._state !== 'paused')
             return;
         this._state = 'playing';
-        await this._sendCommand('resume');
+        this._lastFrameTime = performance.now();
+        this._startPlayLoop();
         this._notifyStatus();
     }
     /**
-     * 특정 시점으로 이동
+     * seek — 기존 버퍼 폐기 + 새 위치에서 fresh fetch
      */
     async seek(toTime) {
-        await this._sendCommand('seek', { toTime: toTime.toISOString() });
-        this._currentTime = toTime.toISOString();
+        if (!this._buffer)
+            return;
+        const wasPlaying = this._state === 'playing';
+        this._stopPlayLoop();
+        // 버퍼 전체 폐기 + 새 위치 로드
+        await this._buffer.seek(toTime.getTime());
+        this._playHead = toTime.getTime();
+        this._lastDistributedSnapshot = null;
+        // 새 위치의 첫 스냅샷 즉시 배포
+        const snap = this._buffer.getSnapshotAt(this._playHead);
+        if (snap) {
+            this._distributeSnapshot(snap.data);
+            this._lastDistributedSnapshot = snap;
+        }
+        if (wasPlaying) {
+            this._state = 'playing';
+            this._lastFrameTime = performance.now();
+            this._startPlayLoop();
+        }
         this._notifyStatus();
     }
     /**
      * 배속 변경
      */
-    async setSpeed(speed) {
+    setSpeed(speed) {
         this._speed = speed;
-        await this._sendCommand('speed', { speed });
         this._notifyStatus();
     }
     /**
-     * 플레이백 중지 및 구독 해제
+     * 중지
      */
     stop() {
         var _a;
-        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        this._subscription = null;
+        this._stopPlayLoop();
+        (_a = this._buffer) === null || _a === void 0 ? void 0 : _a.clear();
+        this._buffer = null;
         this._state = 'stopped';
+        this._playHead = 0;
+        this._lastDistributedSnapshot = null;
         this._notifyStatus();
     }
     /**
@@ -145,12 +156,23 @@ export class PlaybackProvider {
      */
     dispose() {
         this.stop();
+        this._state = 'idle';
         this._components.clear();
     }
+    // --- 재생 루프 ---
+    _startPlayLoop() {
+        this._rafId = requestAnimationFrame(this._playLoop);
+    }
+    _stopPlayLoop() {
+        if (this._rafId) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = 0;
+        }
+    }
+    // --- 데이터 배포 ---
     _distributeSnapshot(snapshotData) {
         if (!snapshotData || typeof snapshotData !== 'object')
             return;
-        // snapshotData: { tag1: value1, tag2: value2, ... }
         for (const [tag, value] of Object.entries(snapshotData)) {
             const components = this._components.get(tag);
             if (components) {
@@ -160,31 +182,76 @@ export class PlaybackProvider {
             }
         }
     }
-    async _sendCommand(command, params = {}) {
-        try {
-            const { client } = await import('@operato/graphql');
-            await client.mutate({
-                mutation: gql `
-          mutation PlaybackControl($command: String!, $params: String) {
-            playbackControl(command: $command, params: $params)
-          }
-        `,
-                variables: {
-                    command,
-                    params: JSON.stringify(params)
+    // --- 데이터 fetcher ---
+    _createFetcher() {
+        return async (fromTime, toTime) => {
+            var _a;
+            try {
+                const { client } = await import('@operato/graphql');
+                const response = await client.query({
+                    query: gql `
+            query PlaybackChunk($startTime: String!, $endTime: String!) {
+              playback(startTime: $startTime, endTime: $endTime) {
+                status
+                playback {
+                  scenarios {
+                    scenarioName
+                    snapshots {
+                      type
+                      time
+                      data
+                    }
+                  }
                 }
-            });
-        }
-        catch (e) {
-            console.error('[PlaybackProvider] command failed:', command, e);
+              }
+            }
+          `,
+                    variables: {
+                        startTime: fromTime.toISOString().replace('T', ' ').replace(/\.\d+Z$/, ''),
+                        endTime: toTime.toISOString().replace('T', ' ').replace(/\.\d+Z$/, '')
+                    },
+                    fetchPolicy: 'no-cache'
+                });
+                return this._parsePlaybackResponse((_a = response.data) === null || _a === void 0 ? void 0 : _a.playback);
+            }
+            catch (e) {
+                console.error('[PlaybackProvider] chunk fetch error:', e);
+                return [];
+            }
+        };
+    }
+    /**
+     * 백엔드 응답을 PlaybackSnapshot[] 형식으로 변환
+     */
+    _parsePlaybackResponse(response) {
+        var _a;
+        if (!(response === null || response === void 0 ? void 0 : response.status) || !((_a = response === null || response === void 0 ? void 0 : response.playback) === null || _a === void 0 ? void 0 : _a.scenarios))
+            return [];
+        const snapshotMap = new Map();
+        for (const scenario of response.playback.scenarios) {
+            for (const record of scenario.snapshots) {
+                const time = new Date(record.time.replace(' ', 'T')).getTime();
+                const data = typeof record.data === 'string' ? JSON.parse(record.data) : record.data;
+                if (!snapshotMap.has(time)) {
+                    snapshotMap.set(time, {});
+                }
+                const merged = snapshotMap.get(time);
+                // scenarioName을 tag로 사용
+                merged[scenario.scenarioName] = data;
+            }
         }
+        return Array.from(snapshotMap.entries())
+            .map(([timestamp, data]) => ({ timestamp, data }))
+            .sort((a, b) => a.timestamp - b.timestamp);
     }
+    // --- 상태 통보 ---
     _notifyStatus() {
-        var _a;
+        var _a, _b;
         (_a = this._onStatusChange) === null || _a === void 0 ? void 0 : _a.call(this, {
             state: this._state,
-            currentTime: this._currentTime,
-            speed: this._speed
+            currentTime: this._playHead ? new Date(this._playHead).toISOString() : '',
+            speed: this._speed,
+            bufferedRanges: (_b = this._buffer) === null || _b === void 0 ? void 0 : _b.getBufferedRanges()
         });
     }
 }

package/dist/src/graphql/playback-subscription.js.map

@@ -1 +1 @@
-{"version":3,"file":"playback-subscription.js","sourceRoot":"","sources":["../../../src/graphql/playback-subscription.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'\n\nimport gql from 'graphql-tag'\nimport { subscribe } from '@operato/graphql'\n\nexport type PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped'\n\nexport interface PlaybackStatus {\n  state: PlaybackState\n  currentTime: string\n  speed: number\n}\n\nexport interface PlaybackConfig {\n  /** 플레이백 가능한 시간 범위 */\n  timeRange?: { from: Date; to: Date }\n}\n\n/**\n * PlaybackProvider\n *\n * 백엔드 플레이백 서비스와 point-to-point 구독으로 통신하는 DataSubscriptionProvider.\n * 백엔드가 요청된 시점/배속으로 스냅샷을 실시간처럼 푸시하면,\n * 이를 받아서 등록된 컴포넌트에 전달한다.\n *\n * 실시간 DataSubscriptionProviderImpl과 동일한 인터페이스를 구현하므로\n * Scene 입장에서는 실시간/플레이백을 구분하지 않는다.\n */\nexport class PlaybackProvider implements DataSubscriptionProvider {\n  private _components: Map<string, Set<Component>> = new Map()\n  private _subscription: { unsubscribe: () => void } | null = null\n  private _state: PlaybackState = 'idle'\n  private _speed: number = 1\n  private _currentTime: string = ''\n  private _onStatusChange?: (status: PlaybackStatus) => void\n\n  constructor(onStatusChange?: (status: PlaybackStatus) => void) {\n    this._onStatusChange = onStatusChange\n  }\n\n  get state() {\n    return this._state\n  }\n\n  get speed() {\n    return this._speed\n  }\n\n  get currentTime() {\n    return this._currentTime\n  }\n\n  /**\n   * DataSubscriptionProvider.subscribe 구현\n   * 컴포넌트를 tag별로 등록한다. 실제 데이터는 백엔드 구독을 통해 수신된다.\n   */\n  async subscribe(tag: string, component: Component) {\n    if (!this._components.has(tag)) {\n      this._components.set(tag, new Set())\n    }\n    this._components.get(tag)!.add(component)\n\n    return {\n      unsubscribe: () => {\n        const components = this._components.get(tag)\n        if (components) {\n          components.delete(component)\n          if (components.size === 0) {\n            this._components.delete(tag)\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * 플레이백 시작 — 백엔드에 point-to-point 구독을 개시한다.\n   */\n  async start(fromTime: Date, speed: number = 1) {\n    // 기존 구독이 있으면 정리\n    this._subscription?.unsubscribe()\n\n    this._speed = speed\n    this._state = 'playing'\n\n    this._subscription = await subscribe(\n      {\n        query: gql`\n          subscription Playback($fromTime: String!, $speed: Float!) {\n            playback(fromTime: $fromTime, speed: $speed) {\n              timestamp\n              data\n            }\n          }\n        `,\n        variables: {\n          fromTime: fromTime.toISOString(),\n          speed\n        }\n      },\n      {\n        next: ({ data }: { data: any }) => {\n          if (!data?.playback) return\n\n          const { timestamp, data: snapshotData } = data.playback\n          this._currentTime = timestamp\n\n          // 스냅샷 데이터를 tag별로 분배\n          this._distributeSnapshot(snapshotData)\n\n          this._notifyStatus()\n        },\n        error: (err: any) => {\n          console.error('[PlaybackProvider] subscription error:', err)\n          this._state = 'stopped'\n          this._notifyStatus()\n        },\n        complete: () => {\n          this._state = 'stopped'\n          this._notifyStatus()\n        }\n      }\n    )\n\n    this._notifyStatus()\n  }\n\n  /**\n   * 일시정지\n   */\n  async pause() {\n    if (this._state !== 'playing') return\n\n    this._state = 'paused'\n\n    // 백엔드에 pause 명령 전송 (mutation)\n    await this._sendCommand('pause')\n    this._notifyStatus()\n  }\n\n  /**\n   * 재개\n   */\n  async resume() {\n    if (this._state !== 'paused') return\n\n    this._state = 'playing'\n\n    await this._sendCommand('resume')\n    this._notifyStatus()\n  }\n\n  /**\n   * 특정 시점으로 이동\n   */\n  async seek(toTime: Date) {\n    await this._sendCommand('seek', { toTime: toTime.toISOString() })\n    this._currentTime = toTime.toISOString()\n    this._notifyStatus()\n  }\n\n  /**\n   * 배속 변경\n   */\n  async setSpeed(speed: number) {\n    this._speed = speed\n    await this._sendCommand('speed', { speed })\n    this._notifyStatus()\n  }\n\n  /**\n   * 플레이백 중지 및 구독 해제\n   */\n  stop() {\n    this._subscription?.unsubscribe()\n    this._subscription = null\n    this._state = 'stopped'\n    this._notifyStatus()\n  }\n\n  /**\n   * DataSubscriptionProvider.dispose 구현\n   */\n  dispose() {\n    this.stop()\n    this._components.clear()\n  }\n\n  private _distributeSnapshot(snapshotData: any) {\n    if (!snapshotData || typeof snapshotData !== 'object') return\n\n    // snapshotData: { tag1: value1, tag2: value2, ... }\n    for (const [tag, value] of Object.entries(snapshotData)) {\n      const components = this._components.get(tag)\n      if (components) {\n        for (const component of components) {\n          component.data = value\n        }\n      }\n    }\n  }\n\n  private async _sendCommand(command: string, params: Record<string, any> = {}) {\n    try {\n      const { client } = await import('@operato/graphql')\n      await client.mutate({\n        mutation: gql`\n          mutation PlaybackControl($command: String!, $params: String) {\n            playbackControl(command: $command, params: $params)\n          }\n        `,\n        variables: {\n          command,\n          params: JSON.stringify(params)\n        }\n      })\n    } catch (e) {\n      console.error('[PlaybackProvider] command failed:', command, e)\n    }\n  }\n\n  private _notifyStatus() {\n    this._onStatusChange?.({\n      state: this._state,\n      currentTime: this._currentTime,\n      speed: this._speed\n    })\n  }\n}\n"]}
+{"version":3,"file":"playback-subscription.js","sourceRoot":"","sources":["../../../src/graphql/playback-subscription.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,cAAc,EAA4C,MAAM,sBAAsB,CAAA;AAgB/F;;;;;;;GAOG;AACH,MAAM,OAAO,gBAAgB;IAY3B,YAAY,cAAiD;QAXrD,gBAAW,GAAgC,IAAI,GAAG,EAAE,CAAA;QACpD,YAAO,GAA0B,IAAI,CAAA;QACrC,WAAM,GAAkB,MAAM,CAAA;QAC9B,WAAM,GAAW,CAAC,CAAA;QAClB,cAAS,GAAW,CAAC,CAAA;QACrB,mBAAc,GAAW,CAAC,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAA;QAClB,6BAAwB,GAA4B,IAAI,CAAA;QAExD,gBAAW,GAAoC,IAAI,CAAA;QAmJnD,cAAS,GAAG,CAAC,GAAW,EAAE,EAAE;YAClC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAM;YAEtD,MAAM,KAAK,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YACvD,IAAI,CAAC,cAAc,GAAG,GAAG,CAAA;YACzB,IAAI,CAAC,SAAS,IAAI,KAAK,CAAA;YAEvB,gBAAgB;YAChB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC;gBACxE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAA;gBAC9C,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;gBACvB,IAAI,CAAC,aAAa,EAAE,CAAA;gBACpB,OAAM;YACR,CAAC;YAED,YAAY;YACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YACvD,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBACnD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBACnC,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAA;YACtC,CAAC;YAED,gCAAgC;YAChC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YAE1C,IAAI,CAAC,aAAa,EAAE,CAAA;YAEpB,SAAS;YACT,IAAI,CAAC,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACrD,CAAC,CAAA;QA7KC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAA;IACvC,CAAC;IAED,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,MAAM,CAAA,CAAC,CAAC;IAClC,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,MAAM,CAAA,CAAC,CAAC;IAClC,IAAI,WAAW,KAAK,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA,CAAC,CAAC;IAEzF;;OAEG;IACH,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,SAAoB;QAC/C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,CAAA;QACtC,CAAC;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QAEzC,OAAO;YACL,WAAW,EAAE,GAAG,EAAE;gBAChB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;gBAC5C,IAAI,UAAU,EAAE,CAAC;oBACf,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;oBAC5B,IAAI,UAAU,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;wBAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;oBAC9B,CAAC;gBACH,CAAC;YACH,CAAC;SACF,CAAA;IACH,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,KAAK,CAAC,QAAc,EAAE,QAAgB,CAAC,EAAE,UAAqC;QAClF,IAAI,CAAC,IAAI,EAAE,CAAA;QAEX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,WAAW,GAAG,UAAU,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,CAAA;QAE/F,gBAAgB;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAC1E,MAAM,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;QAElD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAA;QACnC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QACvB,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAEvC,IAAI,CAAC,cAAc,EAAE,CAAA;QACrB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;YAAE,OAAM;QACrC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAA;QACtB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAM;QACpC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QACvB,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QACvC,IAAI,CAAC,cAAc,EAAE,CAAA;QACrB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,IAAI,CAAC,MAAY;QACrB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,CAAA;QAC5C,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,qBAAqB;QACrB,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAA;QACzC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,OAAO,EAAE,CAAA;QACjC,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAA;QAEpC,oBAAoB;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACvD,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACnC,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAA;QACtC,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;YACvB,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;YACvC,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,QAAQ,CAAC,KAAa;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,IAAI;;QACF,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;QACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QACvB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;QAClB,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAA;QACpC,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAA;QACX,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC;IAED,gBAAgB;IAER,cAAc;QACpB,IAAI,CAAC,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACrD,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;QACjB,CAAC;IACH,CAAC;IAiCD,iBAAiB;IAET,mBAAmB,CAAC,YAAiB;QAC3C,IAAI,CAAC,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ;YAAE,OAAM;QAE7D,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YACxD,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;YAC5C,IAAI,UAAU,EAAE,CAAC;gBACf,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;oBACnC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAA;gBACxB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,sBAAsB;IAEd,cAAc;QACpB,OAAO,KAAK,EAAE,QAAc,EAAE,MAAY,EAA+B,EAAE;;YACzE,IAAI,CAAC;gBACH,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAA;gBACnD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;oBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;WAgBT;oBACD,SAAS,EAAE;wBACT,SAAS,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;wBAC1E,OAAO,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;qBACvE;oBACD,WAAW,EAAE,UAAU;iBACxB,CAAC,CAAA;gBAEF,OAAO,IAAI,CAAC,sBAAsB,CAAC,MAAA,QAAQ,CAAC,IAAI,0CAAE,QAAQ,CAAC,CAAA;YAC7D,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,CAAC,CAAC,CAAA;gBACzD,OAAO,EAAE,CAAA;YACX,CAAC;QACH,CAAC,CAAA;IACH,CAAC;IAED;;OAEG;IACK,sBAAsB,CAAC,QAAa;;QAC1C,IAAI,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,CAAA,IAAI,CAAC,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,0CAAE,SAAS,CAAA;YAAE,OAAO,EAAE,CAAA;QAElE,MAAM,WAAW,GAAG,IAAI,GAAG,EAA+B,CAAA;QAE1D,KAAK,MAAM,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;YACnD,KAAK,MAAM,MAAM,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAC;gBACxC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,CAAA;gBAC9D,MAAM,IAAI,GAAG,OAAO,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA;gBAEpF,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;oBAC3B,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;gBAC3B,CAAC;gBACD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAE,CAAA;gBACrC,wBAAwB;gBACxB,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA;YACtC,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;aACrC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;aACjD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,CAAA;IAC9C,CAAC;IAED,gBAAgB;IAER,aAAa;;QACnB,MAAA,IAAI,CAAC,eAAe,qDAAG;YACrB,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE;YACzE,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,cAAc,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,EAAE;SAClD,CAAC,CAAA;IACJ,CAAC;CACF","sourcesContent":["import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'\nimport gql from 'graphql-tag'\nimport { PlaybackBuffer, type PlaybackSnapshot, type ChunkFetcher } from './playback-buffer.js'\n\nexport type PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped'\n\nexport interface PlaybackStatus {\n  state: PlaybackState\n  currentTime: string\n  speed: number\n  bufferedRanges?: { from: number; to: number }[]\n}\n\nexport interface PlaybackConfig {\n  /** 플레이백 가능한 시간 범위 */\n  timeRange?: { from: Date; to: Date }\n}\n\n/**\n * PlaybackProvider — YouTube 스트리밍 방식의 청크 기반 플레이백\n *\n * - 10분 단위로 데이터를 fetch하여 버퍼에 적재\n * - 남은 데이터 1분 이하 시 다음 10분 prefetch\n * - seek 시 기존 버퍼 전체 폐기 후 fresh fetch\n * - requestAnimationFrame 기반 재생 루프\n */\nexport class PlaybackProvider implements DataSubscriptionProvider {\n  private _components: Map<string, Set<Component>> = new Map()\n  private _buffer: PlaybackBuffer | null = null\n  private _state: PlaybackState = 'idle'\n  private _speed: number = 1\n  private _playHead: number = 0\n  private _lastFrameTime: number = 0\n  private _rafId: number = 0\n  private _lastDistributedSnapshot: PlaybackSnapshot | null = null\n  private _onStatusChange?: (status: PlaybackStatus) => void\n  private _totalRange: { from: Date; to: Date } | null = null\n\n  constructor(onStatusChange?: (status: PlaybackStatus) => void) {\n    this._onStatusChange = onStatusChange\n  }\n\n  get state() { return this._state }\n  get speed() { return this._speed }\n  get currentTime() { return this._playHead ? new Date(this._playHead).toISOString() : '' }\n\n  /**\n   * DataSubscriptionProvider.subscribe 구현\n   */\n  async subscribe(tag: string, component: Component) {\n    if (!this._components.has(tag)) {\n      this._components.set(tag, new Set())\n    }\n    this._components.get(tag)!.add(component)\n\n    return {\n      unsubscribe: () => {\n        const components = this._components.get(tag)\n        if (components) {\n          components.delete(component)\n          if (components.size === 0) {\n            this._components.delete(tag)\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * 플레이백 시작\n   */\n  async start(fromTime: Date, speed: number = 1, totalRange?: { from: Date; to: Date }) {\n    this.stop()\n\n    this._speed = speed\n    this._totalRange = totalRange || { from: fromTime, to: new Date(fromTime.getTime() + 3600000) }\n\n    // 버퍼 생성 + 초기 로드\n    this._buffer = new PlaybackBuffer(this._createFetcher(), this._totalRange)\n    await this._buffer.loadInitial(fromTime.getTime())\n\n    this._playHead = fromTime.getTime()\n    this._state = 'playing'\n    this._lastFrameTime = performance.now()\n\n    this._startPlayLoop()\n    this._notifyStatus()\n  }\n\n  /**\n   * 일시정지\n   */\n  pause() {\n    if (this._state !== 'playing') return\n    this._state = 'paused'\n    this._stopPlayLoop()\n    this._notifyStatus()\n  }\n\n  /**\n   * 재개\n   */\n  resume() {\n    if (this._state !== 'paused') return\n    this._state = 'playing'\n    this._lastFrameTime = performance.now()\n    this._startPlayLoop()\n    this._notifyStatus()\n  }\n\n  /**\n   * seek — 기존 버퍼 폐기 + 새 위치에서 fresh fetch\n   */\n  async seek(toTime: Date) {\n    if (!this._buffer) return\n\n    const wasPlaying = this._state === 'playing'\n    this._stopPlayLoop()\n\n    // 버퍼 전체 폐기 + 새 위치 로드\n    await this._buffer.seek(toTime.getTime())\n    this._playHead = toTime.getTime()\n    this._lastDistributedSnapshot = null\n\n    // 새 위치의 첫 스냅샷 즉시 배포\n    const snap = this._buffer.getSnapshotAt(this._playHead)\n    if (snap) {\n      this._distributeSnapshot(snap.data)\n      this._lastDistributedSnapshot = snap\n    }\n\n    if (wasPlaying) {\n      this._state = 'playing'\n      this._lastFrameTime = performance.now()\n      this._startPlayLoop()\n    }\n\n    this._notifyStatus()\n  }\n\n  /**\n   * 배속 변경\n   */\n  setSpeed(speed: number) {\n    this._speed = speed\n    this._notifyStatus()\n  }\n\n  /**\n   * 중지\n   */\n  stop() {\n    this._stopPlayLoop()\n    this._buffer?.clear()\n    this._buffer = null\n    this._state = 'stopped'\n    this._playHead = 0\n    this._lastDistributedSnapshot = null\n    this._notifyStatus()\n  }\n\n  /**\n   * DataSubscriptionProvider.dispose 구현\n   */\n  dispose() {\n    this.stop()\n    this._state = 'idle'\n    this._components.clear()\n  }\n\n  // --- 재생 루프 ---\n\n  private _startPlayLoop() {\n    this._rafId = requestAnimationFrame(this._playLoop)\n  }\n\n  private _stopPlayLoop() {\n    if (this._rafId) {\n      cancelAnimationFrame(this._rafId)\n      this._rafId = 0\n    }\n  }\n\n  private _playLoop = (now: number) => {\n    if (this._state !== 'playing' || !this._buffer) return\n\n    const delta = (now - this._lastFrameTime) * this._speed\n    this._lastFrameTime = now\n    this._playHead += delta\n\n    // 전체 범위 끝 도달 체크\n    if (this._totalRange && this._playHead >= this._totalRange.to.getTime()) {\n      this._playHead = this._totalRange.to.getTime()\n      this._state = 'stopped'\n      this._notifyStatus()\n      return\n    }\n\n    // 현재 스냅샷 배포\n    const snap = this._buffer.getSnapshotAt(this._playHead)\n    if (snap && snap !== this._lastDistributedSnapshot) {\n      this._distributeSnapshot(snap.data)\n      this._lastDistributedSnapshot = snap\n    }\n\n    // prefetch 체크 (비동기, 루프 블로킹 안 함)\n    this._buffer.checkPrefetch(this._playHead)\n\n    this._notifyStatus()\n\n    // 다음 프레임\n    this._rafId = requestAnimationFrame(this._playLoop)\n  }\n\n  // --- 데이터 배포 ---\n\n  private _distributeSnapshot(snapshotData: any) {\n    if (!snapshotData || typeof snapshotData !== 'object') return\n\n    for (const [tag, value] of Object.entries(snapshotData)) {\n      const components = this._components.get(tag)\n      if (components) {\n        for (const component of components) {\n          component.data = value\n        }\n      }\n    }\n  }\n\n  // --- 데이터 fetcher ---\n\n  private _createFetcher(): ChunkFetcher {\n    return async (fromTime: Date, toTime: Date): Promise<PlaybackSnapshot[]> => {\n      try {\n        const { client } = await import('@operato/graphql')\n        const response = await client.query({\n          query: gql`\n            query PlaybackChunk($startTime: String!, $endTime: String!) {\n              playback(startTime: $startTime, endTime: $endTime) {\n                status\n                playback {\n                  scenarios {\n                    scenarioName\n                    snapshots {\n                      type\n                      time\n                      data\n                    }\n                  }\n                }\n              }\n            }\n          `,\n          variables: {\n            startTime: fromTime.toISOString().replace('T', ' ').replace(/\\.\\d+Z$/, ''),\n            endTime: toTime.toISOString().replace('T', ' ').replace(/\\.\\d+Z$/, '')\n          },\n          fetchPolicy: 'no-cache'\n        })\n\n        return this._parsePlaybackResponse(response.data?.playback)\n      } catch (e) {\n        console.error('[PlaybackProvider] chunk fetch error:', e)\n        return []\n      }\n    }\n  }\n\n  /**\n   * 백엔드 응답을 PlaybackSnapshot[] 형식으로 변환\n   */\n  private _parsePlaybackResponse(response: any): PlaybackSnapshot[] {\n    if (!response?.status || !response?.playback?.scenarios) return []\n\n    const snapshotMap = new Map<number, Record<string, any>>()\n\n    for (const scenario of response.playback.scenarios) {\n      for (const record of scenario.snapshots) {\n        const time = new Date(record.time.replace(' ', 'T')).getTime()\n        const data = typeof record.data === 'string' ? JSON.parse(record.data) : record.data\n\n        if (!snapshotMap.has(time)) {\n          snapshotMap.set(time, {})\n        }\n        const merged = snapshotMap.get(time)!\n        // scenarioName을 tag로 사용\n        merged[scenario.scenarioName] = data\n      }\n    }\n\n    return Array.from(snapshotMap.entries())\n      .map(([timestamp, data]) => ({ timestamp, data }))\n      .sort((a, b) => a.timestamp - b.timestamp)\n  }\n\n  // --- 상태 통보 ---\n\n  private _notifyStatus() {\n    this._onStatusChange?.({\n      state: this._state,\n      currentTime: this._playHead ? new Date(this._playHead).toISOString() : '',\n      speed: this._speed,\n      bufferedRanges: this._buffer?.getBufferedRanges()\n    })\n  }\n}\n"]}

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

@@ -20,6 +20,10 @@ export declare class PlaybackControls extends LitElement {
     playbackState: PlaybackState;
     speed: number;
     currentTime: string;
+    bufferedRanges: {
+        from: number;
+        to: number;
+    }[];
     /** 외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산) */
     timeRange: {
         from: Date;
@@ -27,6 +31,8 @@ export declare class PlaybackControls extends LitElement {
     };
     private _startTime;
     private _seekValue;
+    private _seeking;
+    private _seekPreviewTime;
     private _speeds;
     private get _endTime();
     private static _floorToHour;
@@ -39,10 +45,12 @@ export declare class PlaybackControls extends LitElement {
     private _onDateChange;
     private _onHourChange;
     private _shiftTime;
+    private _shiftStartTime;
     private _onStart;
     private _onTogglePlayPause;
     private _onStop;
     private _onSeekInput;
     private _onSeekChange;
+    private _renderBufferBars;
     private _onSpeedChange;
 }

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

@@ -24,6 +24,7 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         this.playbackState = 'idle';
         this.speed = 1;
         this.currentTime = '';
+        this.bufferedRanges = [];
         /** 외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산) */
         this.timeRange = {
             from: new Date(Date.now() - ONE_HOUR),
@@ -31,6 +32,8 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         };
         this._startTime = PlaybackControls_1._floorToHour(new Date(Date.now() - ONE_HOUR));
         this._seekValue = 0;
+        this._seeking = false;
+        this._seekPreviewTime = null;
         this._speeds = [1, 2, 4, 8];
     }
     get _endTime() {
@@ -49,7 +52,7 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         if (changes.has('timeRange') && this.timeRange) {
             this._startTime = PlaybackControls_1._floorToHour(this.timeRange.from);
         }
-        if (changes.has('currentTime') && this.currentTime) {
+        if (changes.has('currentTime') && this.currentTime && !this._seeking) {
             this._updateSeekPosition();
         }
     }
@@ -115,15 +118,19 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
               `}
 
           <div class="timeline">
-            <input
-              type="range"
-              class="seek-bar"
-              min="0"
-              max="1000"
-              .value=${String(this._seekValue)}
-              @input=${this._onSeekInput}
-              @change=${this._onSeekChange}
-            />
+            <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._startTime)}</span>
               <span>${this._formatTime(this._endTime)}</span>
@@ -131,7 +138,9 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
           </div>
 
           <span class="current-time">
-            ${this.currentTime ? this._formatTime(new Date(this.currentTime)) : '--:--:--'}
+            ${this._seeking && this._seekPreviewTime
+            ? this._formatTime(this._seekPreviewTime)
+            : this.currentTime ? this._formatTime(new Date(this.currentTime)) : '--:--:--'}
           </span>
 
           <md-icon-button @click=${this._onStop}>
@@ -149,7 +158,7 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
     }
     _updateSeekPosition() {
-        if (!this.currentTime)
+        if (!this.currentTime || this._seeking)
             return;
         const current = new Date(this.currentTime).getTime();
         const from = this._startTime.getTime();
@@ -166,19 +175,35 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         const [year, month, day] = value.split('-').map(Number);
         const t = new Date(this._startTime);
         t.setFullYear(year, month - 1, day);
-        this._startTime = t;
+        this._shiftStartTime(t);
     }
     _onHourChange(e) {
         const hour = Number(e.target.value);
         const t = new Date(this._startTime);
         t.setHours(hour, 0, 0, 0);
-        this._startTime = t;
+        this._shiftStartTime(t);
     }
     _shiftTime(hours) {
         return () => {
-            this._startTime = new Date(this._startTime.getTime() + hours * ONE_HOUR);
+            this._shiftStartTime(new Date(this._startTime.getTime() + hours * ONE_HOUR));
         };
     }
+    _shiftStartTime(newStart) {
+        const wasPlaying = this.playbackState === 'playing';
+        const wasPaused = this.playbackState === 'paused';
+        this._startTime = newStart;
+        this._seekValue = 0;
+        if (wasPlaying) {
+            this._onStart();
+        }
+        else if (wasPaused) {
+            this.dispatchEvent(new CustomEvent('playback-seek', {
+                detail: { toTime: new Date(newStart) },
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
     _onStart() {
         this.dispatchEvent(new CustomEvent('playback-start', {
             detail: { fromTime: this._startTime, speed: this.speed },
@@ -198,19 +223,42 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         this.dispatchEvent(new CustomEvent('playback-stop', { bubbles: true, composed: true }));
     }
     _onSeekInput(e) {
+        this._seeking = true;
         this._seekValue = Number(e.target.value);
+        const ratio = this._seekValue / 1000;
+        const from = this._startTime.getTime();
+        const to = this._endTime.getTime();
+        this._seekPreviewTime = new Date(from + (to - from) * ratio);
     }
     _onSeekChange(e) {
+        this._seeking = false;
         const ratio = Number(e.target.value) / 1000;
         const from = this._startTime.getTime();
         const to = this._endTime.getTime();
         const targetTime = new Date(from + (to - from) * ratio);
+        this._seekPreviewTime = null;
         this.dispatchEvent(new CustomEvent('playback-seek', {
             detail: { toTime: targetTime },
             bubbles: true,
             composed: true
         }));
     }
+    _renderBufferBars() {
+        var _a;
+        if (!((_a = this.bufferedRanges) === null || _a === void 0 ? void 0 : _a.length))
+            return '';
+        const from = this._startTime.getTime();
+        const to = this._endTime.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.dispatchEvent(new CustomEvent('playback-speed', {
             detail: { speed },
@@ -351,6 +399,10 @@ PlaybackControls.styles = css `
       --md-icon-button-container-height: 40px;
     }
 
+    .row-seek md-icon {
+      font-variation-settings: 'FILL' 1;
+    }
+
     .timeline {
       flex: 1;
       display: flex;
@@ -360,14 +412,23 @@ PlaybackControls.styles = css `
     }
 
     .seek-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
-      height: 4px;
+      height: 12px;
       -webkit-appearance: none;
       appearance: none;
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 2px;
+      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 {
@@ -379,6 +440,32 @@ PlaybackControls.styles = css `
       cursor: pointer;
     }
 
+    .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-labels {
       display: flex;
       justify-content: space-between;
@@ -403,6 +490,9 @@ __decorate([
 __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);
@@ -412,6 +502,12 @@ __decorate([
 __decorate([
     state()
 ], PlaybackControls.prototype, "_seekValue", 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);