@fmsim/board 2.0.0-beta.6 → 2.0.0-beta.60

package/dist/src/ox-board-viewer.js

@@ -4,9 +4,11 @@ import '@material/web/icon/icon.js';
 import './layers/movement-layer.js';
 import './ox-board-component-info.js';
 import './layers/mcs-mouse-event-handler.js';
-import { css, html, LitElement } from 'lit';
+import './ox-playback-controls.js';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { create, SCENE_MODE } from '@hatiolab/things-scene';
+import { PlaybackEngine } from './playback/playback-engine.js';
+import { create, LoadTracker, LoadingOverlay, SCENE_MODE } from '@hatiolab/things-scene';
 import { isIOS, togglefullscreen } from '@operato/utils';
 import { ScrollbarStyles } from '@operato/styles';
 import { DataStorage } from './data-storage/data-storage.js';
@@ -24,6 +26,8 @@ let BoardViewer = class BoardViewer extends LitElement {
         this._forward = [];
         this._backward = [];
         this._oldtarget = null;
+        this._fabExpanded = false;
+        this._playbackActive = false;
         this.currentBoardId = (_a = this.board) === null || _a === void 0 ? void 0 : _a.id;
         this.popup = null;
         this.lastComponent = null;
@@ -33,7 +37,6 @@ let BoardViewer = class BoardViewer extends LitElement {
             const id = e.detail.value;
             const components = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAll(`#${id}`);
             if (!components || components.length == 0) {
-                console.log('No equipment was found.');
                 return;
             }
             window.dispatchEvent(new CustomEvent('clickComponent', { detail: components[0] }));
@@ -173,22 +176,54 @@ let BoardViewer = class BoardViewer extends LitElement {
             var _a;
             (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.trigger('deco-reset');
         };
+        this._pointerMoveHandler = () => this.transientShowButtons();
         this.resizeHandler = () => {
             this._scene && this._scene.fit();
         };
+        // ── Data Subscription ──
+        this._dataSubscriptionProvider = isRestfulAvailable() ? undefined : new DataSubscriptionProviderImpl();
+    }
+    get _is3dMode() {
+        var _a, _b, _c;
+        return !!((_c = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.rootModel) === null || _c === void 0 ? void 0 : _c.is3dMode);
     }
     render() {
-        var fullscreen = !isIOS() && !this.hideFullscreen
-            ? html `
-            <md-fab
-              id="fullscreen"
-              @click=${(e) => this.onTapFullscreen()}
+        var _a, _b;
+        var fabGroup = this.hideFullscreen
+            ? html ``
+            : html `
+            <div
+              fab-group
+              ?expanded=${this._fabExpanded}
               @mouseover=${(e) => this.transientShowButtons(true)}
               @mouseout=${(e) => this.transientShowButtons()}
-              title="fullscreen"
-            ><md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon></md-fab>
-          `
-            : html ``;
+            >
+              <md-fab
+                class="main-fab"
+                ?expanded=${this._fabExpanded}
+                @click=${() => { this._fabExpanded = !this._fabExpanded; }}
+                title="menu"
+              ><md-icon slot="icon">add</md-icon></md-fab>
+
+              ${isIOS() ? nothing : html `<md-fab
+                class="sub-fab"
+                @click=${() => { this._fabExpanded = false; this.onTapFullscreen(); }}
+                title="fullscreen"
+              ><md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon></md-fab>`}
+
+              <md-fab
+                class="sub-fab"
+                @click=${() => { this._fabExpanded = false; this.onTapPlayback(); }}
+                title=${this._playbackActive ? 'stop playback' : 'start playback'}
+              ><md-icon slot="icon">${this._playbackActive ? 'stop' : 'replay'}</md-icon></md-fab>
+
+              <md-fab
+                class="sub-fab"
+                @click=${() => { this._fabExpanded = false; this.onTapToggle3D(); }}
+                title=${this._is3dMode ? '2D mode' : '3D mode'}
+              ><md-icon slot="icon">${this._is3dMode ? 'view_in_ar' : '3d_rotation'}</md-icon></md-fab>
+            </div>
+          `;
         var prev = !this.hideNavigation
             ? html `
           <md-icon
@@ -216,74 +251,88 @@ let BoardViewer = class BoardViewer extends LitElement {
         return html `
       ${prev}
 
-      <div
-        id="target"
-        @touchstart=${(e) => this.transientShowButtons()}
-        @mousemove=${(e) => this.transientShowButtons()}
-      ></div>
+      <div id="target"></div>
 
       <slot></slot>
-      ${next} ${fullscreen}
+      ${next} ${fabGroup}
+
+      ${this._playbackActive
+            ? html `<ox-playback-controls
+            .playbackState=${((_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.state) === 'playing' ? 'playing' : ((_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.state) === 'paused' ? 'paused' : 'idle'}
+            @playback-start=${this._onPlaybackStart}
+            @playback-pause=${this._onPlaybackPause}
+            @playback-resume=${this._onPlaybackResume}
+            @playback-stop=${this._onPlaybackStop}
+            @playback-seek=${this._onPlaybackSeek}
+            @playback-speed=${this._onPlaybackSpeed}
+          ></ox-playback-controls>`
+            : nothing}
     `;
     }
+    /** connect/disconnect 시 일괄 등록/해제할 window 이벤트 목록 (모니터링 연동) */
+    get _monitoringEvents() {
+        return [
+            ['fetchIFactsData', this.fetchIFactsDataHandler], // 장비 아이디 object를 캔버스 가운데로
+            ['fmbShowMovement', this.fmbShowMovementHandler], // Movement Data 표시
+            ['fmbMonitoringInit', this.fmbMonitoringInitHandler], // 보드 상태 정사이즈 복원
+            ['clickComponent', this.clickComponentHandler], // BoardComponentInfo popup
+            ['fmbStartAnimation', this.fmbStartAnimation], // AnimatedIcon 추가/제거
+            ['fmbStopAnimation', this.fmbStopAnimation],
+            ['fmbResetAnimation', this.fmbResetAnimation],
+            ['fmbShowLegend', this.fmbShowLegendHandler], // 범례 표시
+            ['fmbHideLegend', this.fmbHideLegendHandler],
+            ['fmbShowPopup', this.fmbShowPopupHandler], // 팝업 표시
+            ['fmbHidePopup', this.fmbHidePopupHandler],
+            ['fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler], // FloatingContainer
+            ['fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler]
+        ];
+    }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('resize', this.resizeHandler);
+        // 3D 모드에서도 마우스 움직임 감지 (document 레벨, capture phase)
+        document.addEventListener('pointermove', this._pointerMoveHandler, true);
         this.renderRoot.addEventListener('close-scene', e => {
             e.preventDefault();
             this.onTapPrev();
         }, false);
-        // 모니터링에서 장비 아이디에 해당하는 object를 찾아 캔버스 가운데 위치하도록 조정한다.
-        window.addEventListener('fetchIFactsData', this.fetchIFactsDataHandler);
-        // 모니터링에서 Movement Data를 보여준다.
-        window.addEventListener('fmbShowMovement', this.fmbShowMovementHandler);
-        // 모니터링에서 보드 상태를 원래상태 (정사이즈)로 돌려놓는다.
-        window.addEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
-        // BoardComponentInfo popup을 보여준다.
-        window.addEventListener('clickComponent', this.clickComponentHandler);
-        // AnimatedIcon 을 추가하거나 제거한다.
-        window.addEventListener('fmbStartAnimation', this.fmbStartAnimation);
-        window.addEventListener('fmbStopAnimation', this.fmbStopAnimation);
-        window.addEventListener('fmbResetAnimation', this.fmbResetAnimation);
-        // 모니터링에서 범례를 보여준다.
-        window.addEventListener('fmbShowLegend', this.fmbShowLegendHandler);
-        window.addEventListener('fmbHideLegend', this.fmbHideLegendHandler);
-        // 모니터링에서 범례를 보여준다.
-        window.addEventListener('fmbShowPopup', this.fmbShowPopupHandler);
-        window.addEventListener('fmbHidePopup', this.fmbHidePopupHandler);
-        // 모니터링에서 FloatingContainer를 보여준다.
-        window.addEventListener('fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler);
-        window.addEventListener('fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler);
+        for (const [type, handler] of this._monitoringEvents) {
+            window.addEventListener(type, handler);
+        }
     }
     disconnectedCallback() {
+        var _a, _b, _c;
         super.disconnectedCallback();
         window.removeEventListener('resize', this.resizeHandler);
-        // 모니터링에서 장비 아이디에 해당하는 object를 찾아 캔버스 가운데 위치하도록 조정한다.
-        window.removeEventListener('fetchIFactsData', this.fetchIFactsDataHandler);
-        // 모니터링에서 Movement Data를 보여준다.
-        window.removeEventListener('fmbShowMovement', this.fmbShowMovementHandler);
-        // 모니터링에서 보드 상태를 원래상태 (정사이즈)로 돌려놓는다.
-        window.removeEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
-        // BoardComponentInfo popup을 보여준다.
-        window.removeEventListener('clickComponent', this.clickComponentHandler);
-        // AnimatedIcon을 추가하거나 제거한다.
-        window.removeEventListener('fmbStartAnimation', this.fmbStartAnimation);
-        window.removeEventListener('fmbStopAnimation', this.fmbStopAnimation);
-        window.removeEventListener('fmbResetAnimation', this.fmbResetAnimation);
-        // 모니터링에서 범례를 보여준다.
-        window.removeEventListener('fmbShowLegend', this.fmbShowLegendHandler);
-        window.removeEventListener('fmbHideLegend', this.fmbHideLegendHandler);
-        // 모니터링에서 범례를 보여준다.
-        window.removeEventListener('fmbShowPopup', this.fmbShowPopupHandler);
-        window.removeEventListener('fmbHidePopup', this.fmbHidePopupHandler);
-        // 모니터링에서 FloatingContainer를 보여준다.
-        window.removeEventListener('fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler);
-        window.removeEventListener('fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler);
+        document.removeEventListener('pointermove', this._pointerMoveHandler, true);
+        for (const [type, handler] of this._monitoringEvents) {
+            window.removeEventListener(type, handler);
+        }
         this.lastComponent = null;
+        // 플레이백이 활성 상태면 명시적 stop (provider resume 포함)
+        if (this._playbackActive) {
+            (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.stop();
+            (_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.detachScene();
+            (_c = this._dataSubscriptionProvider) === null || _c === void 0 ? void 0 : _c.resume();
+            this._playbackActive = false;
+        }
+        if (this._playbackEngine) {
+            this._playbackEngine.dispose();
+            this._playbackEngine = undefined;
+        }
         this.closeScene();
     }
     updated(changes) {
+        // loadTracker가 외부에서 전달되면 즉시 overlay 연결 (fetch 중에도 표시)
+        if (changes.has('loadTracker') && this.loadTracker) {
+            this._ensureOverlay(this.loadTracker);
+        }
         if (changes.has('board')) {
+            // tracker: 외부에서 안 왔으면 여기서 생성
+            if (!this.loadTracker) {
+                this.loadTracker = new LoadTracker();
+                this._ensureOverlay(this.loadTracker);
+            }
             this.hidePopup();
             this.closeScene();
             if (this.board && this.board.id) {
@@ -303,32 +352,42 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
     }
     async initSceneAsync() {
-        if (!this.board || !this.board.id)
+        if (!this.board || !this.board.id || !this.provider)
             return;
-        this._scene = await this.provider.create(this.board.id);
-        this.setupScene({ id: this.board.id, scene: this._scene });
+        try {
+            this._scene = await this.provider.create(this.board.id);
+            this.setupScene({ id: this.board.id, scene: this._scene });
+        }
+        catch (e) {
+            console.error('Failed to load scene:', this.board.id, e);
+        }
     }
     initScene() {
-        if (!this.board || !this.board.id) {
+        if (!this.board || !this.board.id || !this.board.model) {
             return;
         }
         this._scene = create({
-            model: {
-                ...this.board.model
-            },
+            model: JSON.parse(JSON.stringify(this.board.model)),
             style: this.board.style,
             mode: SCENE_MODE.VIEW,
             handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'waypoint-handler'],
             layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }],
             refProvider: this.provider,
             dataStorage: this.board.id !== 'preview' ? new DataStorage(this.board.id) : undefined,
-            dataSubscriptionProvider: isRestfulAvailable() ? undefined : new DataSubscriptionProviderImpl()
+            dataSubscriptionProvider: this._dataSubscriptionProvider,
+            loading: this.loadTracker ? { tracker: this.loadTracker } : undefined
         });
         if (this.baseUrl) {
             this._scene.baseUrl = this.baseUrl;
         }
         this.setupScene({ id: this.board.id, scene: this._scene });
     }
+    _ensureOverlay(tracker) {
+        if (!this._loadingOverlay) {
+            this._loadingOverlay = new LoadingOverlay();
+        }
+        this._loadingOverlay.attach(this.renderRoot, tracker);
+    }
     closeScene() {
         if (this._scene) {
             this.unbindSceneEvents(this._scene);
@@ -348,6 +407,10 @@ let BoardViewer = class BoardViewer extends LitElement {
     }
     setupScene({ id, scene }) {
         var _a;
+        // 플레이백 리셋
+        if (this._playbackActive) {
+            this._onPlaybackStop();
+        }
         this._scene = scene;
         const backgroundColor = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.state.fillStyle;
         if (typeof backgroundColor === 'string') {
@@ -371,7 +434,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         this.transientShowButtons();
     }
     async showScene(boardId, bindingData) {
-        if (!boardId)
+        if (!boardId || !this.provider)
             return;
         try {
             var scene = await this.provider.get(boardId, true);
@@ -424,7 +487,7 @@ let BoardViewer = class BoardViewer extends LitElement {
     transientShowButtons(stop) {
         var buttons = [];
         !this.hideNavigation && buttons.push(this._next, this._prev);
-        !this.hideFullscreen && buttons.push(this._fullscreen);
+        !this.hideFullscreen && buttons.push(this._fabGroup);
         if (buttons.length == 0) {
             return;
         }
@@ -447,7 +510,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
         this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden');
         this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden');
-        this._fullscreen && this._fullscreen.removeAttribute('hidden');
+        this._fabGroup && this._fabGroup.removeAttribute('hidden');
         this._fade_animations.forEach(animation => {
             animation.cancel();
             if (stop)
@@ -485,6 +548,182 @@ let BoardViewer = class BoardViewer extends LitElement {
     onTapFullscreen() {
         togglefullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
     }
+    onTapToggle3D() {
+        var _a, _b, _c;
+        const modelLayer = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.rootModel;
+        if (!(modelLayer === null || modelLayer === void 0 ? void 0 : modelLayer.toggleThreeD))
+            return;
+        const entering3D = !modelLayer.is3dMode;
+        modelLayer.toggleThreeD();
+        this.requestUpdate();
+        // fmsim: 3D 진입 시 자동 회전
+        if (entering3D && ((_c = modelLayer._threeCapability) === null || _c === void 0 ? void 0 : _c.isInitialized)) {
+            modelLayer._threeCapability.controlsManager.reset();
+            modelLayer._threeCapability.controlsManager.setAutoRotate(true);
+        }
+    }
+    onTapPlayback() {
+        var _a;
+        if (this._playbackActive) {
+            this._onPlaybackStop();
+        }
+        else {
+            // 플레이백 시작 시 팝업 닫기
+            this.hidePopup();
+            // 1) 라이브 데이터 구독 실제 종료
+            (_a = this._dataSubscriptionProvider) === null || _a === void 0 ? void 0 : _a.pause();
+            this._unsubscribeSceneData();
+            // 2) 라이브 데이터 초기화 (깨끗한 상태에서 playback 시작)
+            this._resetSceneData();
+            this._playbackActive = true;
+            if (!this._playbackEngine) {
+                this._playbackEngine = new PlaybackEngine();
+                this._playbackEngine.on('frame', ({ time }) => {
+                    const controls = this.renderRoot.querySelector('ox-playback-controls');
+                    if (controls)
+                        controls.currentTime = time;
+                });
+                this._playbackEngine.on('state-change', (state) => {
+                    if (state === 'stopped') {
+                        const controls = this.renderRoot.querySelector('ox-playback-controls');
+                        if (controls)
+                            controls.playbackState = 'stopped';
+                    }
+                    this.requestUpdate();
+                });
+                this._playbackEngine.on('buffer-update', ({ bufferedRanges }) => {
+                    const controls = this.renderRoot.querySelector('ox-playback-controls');
+                    if (controls)
+                        controls.bufferedRanges = bufferedRanges;
+                });
+                if (this._fetchPlaybackData) {
+                    this._playbackEngine.setFetchFunction(this._fetchPlaybackData);
+                }
+            }
+            if (this._scene) {
+                this._playbackEngine.attachScene(this._scene);
+            }
+            this.dispatchEvent(new CustomEvent('playback-toggle', {
+                bubbles: true,
+                composed: true,
+                detail: { active: true }
+            }));
+        }
+    }
+    async _onPlaybackStart(e) {
+        const { fromTime, speed } = e.detail;
+        if (!this._playbackEngine)
+            return;
+        const endTime = new Date(fromTime.getTime() + 3600000);
+        if (this._scene)
+            this._scene.playbackMode = true;
+        try {
+            await this._playbackEngine.startChunked(fromTime, endTime, speed);
+        }
+        catch (ex) {
+            console.error('[Playback] load failed:', ex);
+        }
+    }
+    _onPlaybackPause() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+    _onPlaybackResume() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.resume();
+    }
+    _onPlaybackStop() {
+        var _a, _b, _c;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.stop();
+        (_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.detachScene();
+        this._playbackActive = false;
+        // playback 데이터 초기화 + playbackMode 해제 + 라이브 데이터 구독 재개
+        if (this._scene)
+            this._scene.playbackMode = false;
+        this._resetSceneData();
+        this._resubscribeSceneData();
+        (_c = this._dataSubscriptionProvider) === null || _c === void 0 ? void 0 : _c.resume();
+        this.dispatchEvent(new CustomEvent('playback-toggle', {
+            bubbles: true,
+            composed: true,
+            detail: { active: false }
+        }));
+    }
+    /**
+     * 플레이백 시작 시: RESTful data-subscription 컴포넌트의 WebSocket 을 실제 disconnect.
+     * GraphQL 경로는 _dataSubscriptionProvider.pause() 에서 일괄 처리.
+     */
+    _unsubscribeSceneData() {
+        var _a;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // RESTful data-subscription 컴포넌트 — 자체 WebSocket disconnect
+            if (c.subscription) {
+                try {
+                    c.subscription.unsubscribe();
+                }
+                catch (_a) { }
+                c.subscription = null;
+            }
+            if (c.client) {
+                try {
+                    c.client.unsubscribeAll();
+                    c.client.close(true);
+                }
+                catch (_b) { }
+                c.client = null;
+            }
+        });
+    }
+    /**
+     * 플레이백 종료 시: RESTful data-subscription 컴포넌트의 WebSocket 을 재연결.
+     * GraphQL 경로는 _dataSubscriptionProvider.resume() 에서 일괄 처리.
+     */
+    _resubscribeSceneData() {
+        var _a;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // RESTful data-subscription 컴포넌트 — WebSocket 재연결
+            if (typeof c.requestData === 'function' && !c.client) {
+                c.requestData();
+            }
+        });
+    }
+    _resetSceneData() {
+        var _a, _b, _c;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            try {
+                if ('data' in c)
+                    c.data = null;
+            }
+            catch (_a) { }
+        });
+        if ((_b = root.carrierManager) === null || _b === void 0 ? void 0 : _b.dispose)
+            root.carrierManager.dispose();
+        if ((_c = root.transitionEffect) === null || _c === void 0 ? void 0 : _c.dispose)
+            root.transitionEffect.dispose();
+    }
+    _onPlaybackSeek(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.seekTo(e.detail.toTime);
+    }
+    _onPlaybackSpeed(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.setSpeed(e.detail.speed);
+    }
     onRunBoard() {
         this.dispatchEvent(new CustomEvent('run-board', { bubbles: true, composed: true, detail: this.board.id }));
     }
@@ -578,6 +817,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
         if (this.popup) {
             this.popup.component = component;
+            this.popup.playbackMode = this._playbackActive;
         }
     }
     hidePopup() {
@@ -643,10 +883,51 @@ BoardViewer.styles = [
         right: 5px;
       }
 
-      #fullscreen {
+      [fab-group] {
         position: absolute;
         bottom: 15px;
         right: 16px;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        gap: 12px;
+        z-index: 1000;
+      }
+
+      [fab-group] md-fab {
+        transition: transform 0.2s ease, opacity 0.2s ease;
+      }
+
+      [fab-group] md-fab.main-fab md-icon {
+        transition: transform 0.3s ease;
+      }
+
+      [fab-group] md-fab.main-fab[expanded] md-icon {
+        transform: rotate(45deg);
+      }
+
+      [fab-group] md-fab.sub-fab {
+        --md-fab-container-width: 40px;
+        --md-fab-container-height: 40px;
+        --md-icon-size: 20px;
+        transform: scale(0);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      [fab-group][expanded] md-fab.sub-fab {
+        transform: scale(1);
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      [fab-group] md-fab.sub-fab[disabled] {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+
+      ox-playback-controls {
+        transition: opacity 0.3s ease;
       }
 
       [hidden] {
@@ -693,6 +974,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], BoardViewer.prototype, "values", void 0);
+__decorate([
+    property({ type: Object })
+], BoardViewer.prototype, "loadTracker", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' })
 ], BoardViewer.prototype, "hideFullscreen", void 0);
@@ -701,19 +985,10 @@ __decorate([
 ], BoardViewer.prototype, "hideNavigation", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_scene", void 0);
+], BoardViewer.prototype, "_fabExpanded", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_forward", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_backward", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_oldtarget", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_fade_animations", void 0);
+], BoardViewer.prototype, "_playbackActive", void 0);
 __decorate([
     query('#target')
 ], BoardViewer.prototype, "_target", void 0);
@@ -724,8 +999,11 @@ __decorate([
     query('#next')
 ], BoardViewer.prototype, "_next", void 0);
 __decorate([
-    query('#fullscreen')
-], BoardViewer.prototype, "_fullscreen", void 0);
+    query('[fab-group]')
+], BoardViewer.prototype, "_fabGroup", void 0);
+__decorate([
+    property({ attribute: false })
+], BoardViewer.prototype, "_fetchPlaybackData", void 0);
 BoardViewer = __decorate([
     customElement('ox-board-viewer')
 ], BoardViewer);