@livepeer-frameworks/player-wc 0.1.9 → 0.2.1

package/dist/cjs/components/fw-player.js

@@ -1,832 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var classMap_js = require('lit/directives/class-map.js');
-var playerControllerHost = require('../controllers/player-controller-host.js');
-var sharedStyles = require('../styles/shared-styles.js');
-var utilityStyles = require('../styles/utility-styles.js');
-var index = require('../icons/index.js');
-
-exports.FwPlayer = class FwPlayer extends lit.LitElement {
-    constructor() {
-        super(...arguments);
-        // ---- Public attributes (reflected) ----
-        this.contentId = "";
-        this.autoplay = true;
-        this.muted = true;
-        // React/Svelte use `stockControls` for native controls. Keep `controls` as a
-        // compatibility no-op so WC parity does not hide custom controls/seekbar.
-        this.controls = false;
-        this.stockControls = false;
-        this.nativeControls = false;
-        this.debug = false;
-        this.devMode = false;
-        this.playbackMode = "auto";
-        // ---- Internal state ----
-        this._isStatsOpen = false;
-        this._isDevPanelOpen = false;
-        this._skipDirection = null;
-        this._contextMenuOpen = false;
-        this._contextMenuMounted = false;
-        this._contextMenuState = "closed";
-        this._contextMenuSide = "bottom";
-        this._contextMenuX = 0;
-        this._contextMenuY = 0;
-        // ---- Controller ----
-        this.pc = new playerControllerHost.PlayerControllerHost(this);
-        this._contextMenuTypeahead = "";
-        this._resetContextMenuTypeahead = () => {
-            this._contextMenuTypeahead = "";
-            if (this._contextMenuTypeaheadTimer) {
-                clearTimeout(this._contextMenuTypeaheadTimer);
-                this._contextMenuTypeaheadTimer = undefined;
-            }
-        };
-        this._resolveContextMenuSide = (rawX, rawY, clampedX, clampedY) => {
-            const deltaX = Math.abs(rawX - clampedX);
-            const deltaY = Math.abs(rawY - clampedY);
-            if (deltaX === 0 && deltaY === 0) {
-                return "bottom";
-            }
-            if (deltaY >= deltaX) {
-                return rawY > clampedY ? "top" : "bottom";
-            }
-            return rawX > clampedX ? "left" : "right";
-        };
-        this._closeContextMenu = (restoreFocus = false) => {
-            this._contextMenuOpen = false;
-            this._contextMenuState = "closed";
-            this._resetContextMenuTypeahead();
-            if (this._contextMenuCloseTimer) {
-                clearTimeout(this._contextMenuCloseTimer);
-            }
-            this._contextMenuCloseTimer = setTimeout(() => {
-                if (!this._contextMenuOpen) {
-                    this._contextMenuMounted = false;
-                }
-            }, 170);
-            if (restoreFocus) {
-                const root = this.shadowRoot?.querySelector('[part="root"]');
-                root?.focus();
-            }
-        };
-        this._getQueryRoot = () => {
-            return (this.shadowRoot ?? this.renderRoot ?? null);
-        };
-        this._getContextMenuElement = () => this._getQueryRoot()?.querySelector('[data-context-menu="true"]') ?? null;
-        this._getContextMenuBounds = () => {
-            const root = this._getQueryRoot()?.querySelector('[part="root"]');
-            const rect = root?.getBoundingClientRect() ?? this.getBoundingClientRect();
-            const width = rect.width > 0 ? rect.width : window.innerWidth;
-            const height = rect.height > 0 ? rect.height : window.innerHeight;
-            return {
-                left: rect.left,
-                top: rect.top,
-                right: rect.left + width,
-                bottom: rect.top + height,
-                width,
-                height,
-            };
-        };
-        this._toLocalContextMenuPoint = (clientX, clientY) => {
-            const bounds = this._getContextMenuBounds();
-            return {
-                x: clientX - bounds.left,
-                y: clientY - bounds.top,
-            };
-        };
-        this._getContextMenuItems = () => Array.from(this._getQueryRoot()?.querySelectorAll('[data-context-menu-item="true"][data-context-menu-level="root"]:not([data-disabled="true"])') ?? []);
-        this._focusFirstContextMenuItem = () => {
-            const [firstItem] = this._getContextMenuItems();
-            firstItem?.focus();
-        };
-        this._clampContextMenuPosition = (x, y, width, height) => {
-            const viewportPadding = 8;
-            const bounds = this._getContextMenuBounds();
-            const maxX = Math.max(viewportPadding, bounds.width - width - viewportPadding);
-            const maxY = Math.max(viewportPadding, bounds.height - height - viewportPadding);
-            return {
-                x: Math.max(viewportPadding, Math.min(x, maxX)),
-                y: Math.max(viewportPadding, Math.min(y, maxY)),
-            };
-        };
-        this._syncContextMenuPosition = () => {
-            if (!this._contextMenuMounted)
-                return;
-            const menu = this._getContextMenuElement();
-            if (!menu)
-                return;
-            const rect = menu.getBoundingClientRect();
-            const next = this._clampContextMenuPosition(this._contextMenuX, this._contextMenuY, rect.width, rect.height);
-            this._contextMenuSide = this._resolveContextMenuSide(this._contextMenuX, this._contextMenuY, next.x, next.y);
-            if (next.x !== this._contextMenuX || next.y !== this._contextMenuY) {
-                this._contextMenuX = next.x;
-                this._contextMenuY = next.y;
-            }
-        };
-        this._openContextMenu = (clientX, clientY) => {
-            const local = this._toLocalContextMenuPoint(clientX, clientY);
-            const next = this._clampContextMenuPosition(local.x, local.y, 220, 200);
-            this._contextMenuSide = this._resolveContextMenuSide(local.x, local.y, next.x, next.y);
-            this._contextMenuX = next.x;
-            this._contextMenuY = next.y;
-            this._contextMenuMounted = true;
-            this._contextMenuState = "open";
-            if (this._contextMenuCloseTimer) {
-                clearTimeout(this._contextMenuCloseTimer);
-                this._contextMenuCloseTimer = undefined;
-            }
-            this._resetContextMenuTypeahead();
-            this._contextMenuOpen = true;
-        };
-        this._handleContextMenu = (e) => {
-            const target = e.target;
-            if (target?.closest('[data-context-menu="true"]')) {
-                e.preventDefault();
-                return;
-            }
-            e.preventDefault();
-            this._openContextMenu(e.clientX, e.clientY);
-        };
-        this._handleContextMenuShortcut = (e) => {
-            const isContextMenuKey = e.key === "ContextMenu";
-            const isShiftF10 = e.key === "F10" && e.shiftKey;
-            if (!isContextMenuKey && !isShiftF10)
-                return;
-            e.preventDefault();
-            const rect = this.getBoundingClientRect();
-            const x = rect.left + rect.width / 2;
-            const y = rect.top + rect.height / 2;
-            this._openContextMenu(x, y);
-        };
-        this._handleDocumentPointerDown = (e) => {
-            if (!this._contextMenuOpen)
-                return;
-            const menu = this._getContextMenuElement();
-            const composedPath = e.composedPath();
-            if (menu && composedPath.includes(menu))
-                return;
-            this._closeContextMenu();
-        };
-        this._handleDocumentContextMenu = (e) => {
-            if (!this._contextMenuOpen)
-                return;
-            if (!this.contains(e.target)) {
-                this._closeContextMenu();
-            }
-        };
-        this._handleDocumentKeyDown = (e) => {
-            if (e.key === "Escape" && this._contextMenuOpen) {
-                e.preventDefault();
-                this._closeContextMenu(true);
-            }
-        };
-        this._handleContextMenuKeyDown = (e) => {
-            if (!this._contextMenuOpen)
-                return;
-            const activeElement = this.shadowRoot?.activeElement;
-            if (e.key === "Escape") {
-                e.preventDefault();
-                this._closeContextMenu(true);
-                return;
-            }
-            if (e.key === "Tab") {
-                this._closeContextMenu();
-                return;
-            }
-            const items = this._getContextMenuItems();
-            if (items.length === 0)
-                return;
-            const activeIndex = items.findIndex((item) => item === activeElement);
-            if (e.key === "Home") {
-                e.preventDefault();
-                this._focusFirstContextMenuItem();
-                return;
-            }
-            if (e.key === "End") {
-                e.preventDefault();
-                items[items.length - 1]?.focus();
-                return;
-            }
-            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-                e.preventDefault();
-                const direction = e.key === "ArrowDown" ? 1 : -1;
-                const startIndex = activeIndex === -1 ? (direction === 1 ? 0 : items.length - 1) : activeIndex;
-                const nextIndex = (startIndex + direction + items.length) % items.length;
-                items[nextIndex]?.focus();
-                return;
-            }
-            if (e.key === "Enter" || e.key === " ") {
-                if (activeElement) {
-                    e.preventDefault();
-                    activeElement.click();
-                }
-                return;
-            }
-            if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
-                e.preventDefault();
-                this._contextMenuTypeahead += e.key.toLowerCase();
-                if (this._contextMenuTypeaheadTimer) {
-                    clearTimeout(this._contextMenuTypeaheadTimer);
-                }
-                this._contextMenuTypeaheadTimer = setTimeout(() => {
-                    this._resetContextMenuTypeahead();
-                }, 700);
-                const startIndex = activeIndex === -1 ? 0 : activeIndex + 1;
-                const orderedItems = [...items.slice(startIndex), ...items.slice(0, startIndex)];
-                const match = orderedItems.find((item) => item.textContent?.trim().toLowerCase().startsWith(this._contextMenuTypeahead));
-                match?.focus();
-            }
-        };
-    }
-    // ---- Lifecycle ----
-    willUpdate(changed) {
-        if (changed.has("contentId") ||
-            changed.has("contentType") ||
-            changed.has("gatewayUrl") ||
-            changed.has("mistUrl") ||
-            changed.has("authToken") ||
-            changed.has("autoplay") ||
-            changed.has("muted") ||
-            changed.has("stockControls") ||
-            changed.has("nativeControls") ||
-            changed.has("debug") ||
-            changed.has("thumbnailUrl") ||
-            changed.has("endpoints")) {
-            this.pc.configure({
-                contentId: this.contentId,
-                contentType: this.contentType,
-                endpoints: this.endpoints,
-                gatewayUrl: this.gatewayUrl,
-                mistUrl: this.mistUrl,
-                authToken: this.authToken,
-                autoplay: this.autoplay,
-                muted: this.muted,
-                controls: this.stockControls || this.nativeControls,
-                poster: this.thumbnailUrl,
-                debug: this.debug,
-            });
-        }
-    }
-    firstUpdated() {
-        this.pc.attach(this._containerEl);
-        // Close context menu on outside click
-        document.addEventListener("pointerdown", this._handleDocumentPointerDown);
-        document.addEventListener("contextmenu", this._handleDocumentContextMenu);
-        document.addEventListener("keydown", this._handleDocumentKeyDown);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener("pointerdown", this._handleDocumentPointerDown);
-        document.removeEventListener("contextmenu", this._handleDocumentContextMenu);
-        document.removeEventListener("keydown", this._handleDocumentKeyDown);
-        if (this._contextMenuCloseTimer) {
-            clearTimeout(this._contextMenuCloseTimer);
-            this._contextMenuCloseTimer = undefined;
-        }
-        this._resetContextMenuTypeahead();
-    }
-    updated(changed) {
-        if (this.pc.s.toast) {
-            clearTimeout(this._toastTimer);
-            this._toastTimer = setTimeout(() => this.pc.dismissToast(), 3000);
-        }
-        if ((changed.has("_contextMenuOpen") || changed.has("_contextMenuMounted")) &&
-            this._contextMenuOpen) {
-            queueMicrotask(() => {
-                this._syncContextMenuPosition();
-                this._focusFirstContextMenuItem();
-            });
-        }
-    }
-    // ---- Derived state ----
-    get _showTitleOverlay() {
-        const s = this.pc.s;
-        return (s.isHovering || s.isPaused) && !s.shouldShowIdleScreen && !s.isBuffering && !s.error;
-    }
-    get _showBufferingSpinner() {
-        const s = this.pc.s;
-        return !s.shouldShowIdleScreen && s.isBuffering && !s.error && s.hasPlaybackStarted;
-    }
-    get _showWaitingForEndpoint() {
-        const s = this.pc.s;
-        return !s.endpoints?.primary && s.state !== "booting";
-    }
-    get _waitingMessage() {
-        const s = this.pc.s;
-        if (this.gatewayUrl && s.state === "gateway_loading") {
-            return "Resolving viewing endpoint...";
-        }
-        return "Waiting for endpoint...";
-    }
-    get _useStockControls() {
-        return (this.stockControls ||
-            this.nativeControls ||
-            this.pc.s.currentPlayerInfo?.shortname === "mist-legacy");
-    }
-    // ---- Public API methods ----
-    async play() {
-        await this.pc.play();
-    }
-    pause() {
-        this.pc.pause();
-    }
-    togglePlay() {
-        this.pc.togglePlay();
-    }
-    seek(time) {
-        this.pc.seek(time);
-    }
-    seekBy(delta) {
-        this.pc.seekBy(delta);
-    }
-    jumpToLive() {
-        this.pc.jumpToLive();
-    }
-    setVolume(volume) {
-        this.pc.setVolume(volume);
-    }
-    toggleMute() {
-        this.pc.toggleMute();
-    }
-    toggleLoop() {
-        this.pc.toggleLoop();
-    }
-    async toggleFullscreen() {
-        await this.pc.toggleFullscreen();
-    }
-    async togglePiP() {
-        await this.pc.togglePiP();
-    }
-    toggleSubtitles() {
-        this.pc.toggleSubtitles();
-    }
-    async retry() {
-        await this.pc.retry();
-    }
-    async reload() {
-        await this.pc.reload();
-    }
-    getQualities() {
-        return this.pc.getQualities();
-    }
-    selectQuality(id) {
-        this.pc.selectQuality(id);
-    }
-    destroy() {
-        this.pc.hostDisconnected();
-    }
-    // ---- Render ----
-    render() {
-        const s = this.pc.s;
-        return lit.html `
-      <div
-        part="root"
-        class=${classMap_js.classMap({
-            "fw-player-surface": true,
-            "fw-player-root": true,
-            "w-full": true,
-            "h-full": true,
-            "overflow-hidden": true,
-            flex: this.devMode,
-        })}
-        data-player-container="true"
-        tabindex="0"
-        @mouseenter=${() => this.pc.handleMouseEnter()}
-        @mouseleave=${() => this.pc.handleMouseLeave()}
-        @mousemove=${() => this.pc.handleMouseMove()}
-        @touchstart=${() => this.pc.handleTouchStart()}
-        @keydown=${this._handleContextMenuShortcut}
-        @contextmenu=${this._handleContextMenu}
-      >
-        <!-- Player area -->
-        <div
-          class=${classMap_js.classMap({
-            "player-area": true,
-            "player-area--dev": this.devMode,
-        })}
-        >
-          <!-- Video container -->
-          <div id="container" part="video-container" class="fw-player-container"></div>
-
-          <!-- Subtitle renderer -->
-          ${s.subtitlesEnabled
-            ? lit.html `
-                <fw-subtitle-renderer
-                  .currentTime=${s.currentTime}
-                  .enabled=${s.subtitlesEnabled}
-                ></fw-subtitle-renderer>
-              `
-            : lit.nothing}
-
-          <!-- Title overlay -->
-          ${this._showTitleOverlay
-            ? lit.html `
-                <fw-title-overlay
-                  .title=${s.metadata?.title ?? null}
-                  .description=${s.metadata?.description ?? null}
-                ></fw-title-overlay>
-              `
-            : lit.nothing}
-
-          <!-- Stats panel -->
-          ${this._isStatsOpen
-            ? lit.html `
-                <fw-stats-panel
-                  part="stats-panel"
-                  .pc=${this.pc}
-                  @fw-close=${() => {
-                this._isStatsOpen = false;
-            }}
-                ></fw-stats-panel>
-              `
-            : lit.nothing}
-
-          <!-- Speed indicator -->
-          ${s.isHoldingSpeed
-            ? lit.html ` <fw-speed-indicator .speed=${s.holdSpeed}></fw-speed-indicator> `
-            : lit.nothing}
-
-          <!-- Skip indicator -->
-          <fw-skip-indicator
-            .direction=${this._skipDirection}
-            @fw-hide=${() => {
-            this._skipDirection = null;
-        }}
-          ></fw-skip-indicator>
-
-          <!-- Waiting for endpoint -->
-          ${this._showWaitingForEndpoint
-            ? lit.html `
-                <fw-idle-screen
-                  status="OFFLINE"
-                  .message=${this._waitingMessage}
-                  @fw-retry=${() => {
-                this.pc.clearError();
-                this.pc.retry();
-            }}
-                ></fw-idle-screen>
-              `
-            : lit.nothing}
-
-          <!-- Idle screen -->
-          ${!this._showWaitingForEndpoint && s.shouldShowIdleScreen
-            ? lit.html `
-                <fw-idle-screen
-                  .status=${s.isEffectivelyLive ? s.streamState?.status : undefined}
-                  .message=${s.isEffectivelyLive ? s.streamState?.message : "Loading video..."}
-                  .percentage=${s.isEffectivelyLive ? s.streamState?.percentage : undefined}
-                  @fw-retry=${() => {
-                this.pc.clearError();
-                this.pc.retry();
-            }}
-                ></fw-idle-screen>
-              `
-            : lit.nothing}
-
-          <!-- Buffering spinner -->
-          ${this._showBufferingSpinner
-            ? lit.html `
-                <div
-                  role="status"
-                  aria-live="polite"
-                  class="fw-player-surface absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm z-20"
-                >
-                  <div
-                    class="flex items-center gap-3 rounded-lg border border-white/10 bg-black/70 px-4 py-3 text-sm text-white shadow-lg"
-                  >
-                    <div
-                      class="w-4 h-4 border-2 border-white/10 rounded-full animate-spin"
-                      style="border-top-color: white;"
-                    ></div>
-                    <span>Buffering...</span>
-                  </div>
-                </div>
-              `
-            : lit.nothing}
-
-          <!-- Error overlay -->
-          ${!s.shouldShowIdleScreen && s.error
-            ? lit.html `
-                <div
-                  role="alert"
-                  aria-live="assertive"
-                  class=${classMap_js.classMap({
-                "fw-error-overlay": true,
-                "fw-error-overlay--passive": s.isPassiveError,
-                "fw-error-overlay--fullscreen": !s.isPassiveError,
-            })}
-                >
-                  <div
-                    class=${classMap_js.classMap({
-                "fw-error-popup": true,
-                "fw-error-popup--passive": s.isPassiveError,
-                "fw-error-popup--fullscreen": !s.isPassiveError,
-            })}
-                  >
-                    <div
-                      class=${classMap_js.classMap({
-                "fw-error-header": true,
-                "fw-error-header--warning": s.isPassiveError,
-                "fw-error-header--error": !s.isPassiveError,
-            })}
-                    >
-                      <span
-                        class=${classMap_js.classMap({
-                "fw-error-title": true,
-                "fw-error-title--warning": s.isPassiveError,
-                "fw-error-title--error": !s.isPassiveError,
-            })}
-                        >${s.isPassiveError ? "Warning" : "Error"}</span
-                      >
-                      <button
-                        type="button"
-                        class="fw-error-close"
-                        @click=${() => this.pc.clearError()}
-                        aria-label="Dismiss"
-                      >
-                        ${index.closeIcon()}
-                      </button>
-                    </div>
-                    <div class="fw-error-body">
-                      <p class="fw-error-message">Playback issue</p>
-                    </div>
-                    <div class="fw-error-actions">
-                      <button
-                        type="button"
-                        class="fw-error-btn"
-                        aria-label="Retry playback"
-                        @click=${() => {
-                this.pc.clearError();
-                this.pc.retry();
-            }}
-                      >
-                        Retry
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              `
-            : lit.nothing}
-
-          <!-- Toast notification -->
-          ${s.toast
-            ? lit.html `
-                <div
-                  class="absolute bottom-20 left-1/2 -translate-x-1/2 z-30"
-                  role="status"
-                  aria-live="polite"
-                >
-                  <div
-                    class="flex items-center gap-2 rounded-lg border border-white/10 bg-black/80 px-4 py-2 text-sm text-white shadow-lg backdrop-blur-sm"
-                  >
-                    <span>${s.toast.message}</span>
-                    <button
-                      type="button"
-                      @click=${() => this.pc.dismissToast()}
-                      class="ml-0.5 text-white/60 hover\\:text-white cursor-pointer"
-                      aria-label="Dismiss"
-                    >
-                      ${index.closeIcon()}
-                    </button>
-                  </div>
-                </div>
-              `
-            : lit.nothing}
-
-          <!-- Player controls -->
-          ${!this._useStockControls
-            ? lit.html `
-                <fw-player-controls
-                  part="controls"
-                  .pc=${this.pc}
-                  .playbackMode=${this.playbackMode}
-                  .isContentLive=${s.isEffectivelyLive}
-                  .devMode=${this.devMode}
-                  .isStatsOpen=${this._isStatsOpen}
-                  @fw-stats-toggle=${() => {
-                this._isStatsOpen = !this._isStatsOpen;
-            }}
-                  @fw-mode-change=${(event) => {
-                this.playbackMode = event.detail.mode;
-            }}
-                ></fw-player-controls>
-              `
-            : lit.nothing}
-        </div>
-
-        <!-- Dev mode side panel -->
-        ${this.devMode && this._isDevPanelOpen
-            ? lit.html `
-              <fw-dev-mode-panel
-                .pc=${this.pc}
-                .playbackMode=${this.playbackMode}
-                @fw-close=${() => {
-                this._isDevPanelOpen = false;
-            }}
-                @fw-playback-mode-change=${(event) => {
-                this.playbackMode = event.detail.mode;
-            }}
-              ></fw-dev-mode-panel>
-            `
-            : lit.nothing}
-      </div>
-
-      <!-- Context menu -->
-      <!-- Keep menu in-shadow (no document portal) to preserve host-scoped styling and avoid a global overlay manager. -->
-      ${this._contextMenuMounted
-            ? lit.html `
-            <div
-              data-context-menu="true"
-              data-state=${this._contextMenuState}
-              data-side=${this._contextMenuSide}
-              class="fw-player-surface fw-context-menu"
-              role="menu"
-              aria-label="Player options"
-              tabindex="-1"
-              style="position: absolute; left: ${this._contextMenuX}px; top: ${this
-                ._contextMenuY}px;"
-              @contextmenu=${(e) => e.preventDefault()}
-              @keydown=${this._handleContextMenuKeyDown}
-            >
-              <button
-                type="button"
-                role="menuitem"
-                tabindex="-1"
-                data-context-menu-item="true"
-                data-context-menu-level="root"
-                class="fw-context-menu-item gap-2"
-                @click=${() => {
-                this._isStatsOpen = !this._isStatsOpen;
-                this._closeContextMenu();
-            }}
-              >
-                <span class="opacity-70 shrink-0">${index.statsIcon(14)}</span>
-                <span>${this._isStatsOpen ? "Hide Stats" : "Stats"}</span>
-              </button>
-              ${this.devMode
-                ? lit.html `
-                    <div class="fw-context-menu-separator"></div>
-                    <button
-                      type="button"
-                      role="menuitem"
-                      tabindex="-1"
-                      data-context-menu-item="true"
-                      data-context-menu-level="root"
-                      class="fw-context-menu-item gap-2"
-                      @click=${() => {
-                    this._isDevPanelOpen = !this._isDevPanelOpen;
-                    this._closeContextMenu();
-                }}
-                    >
-                      <span class="opacity-70 shrink-0">${index.settingsIcon(14)}</span>
-                      <span>${this._isDevPanelOpen ? "Hide Settings" : "Settings"}</span>
-                    </button>
-                  `
-                : lit.nothing}
-              <div class="fw-context-menu-separator"></div>
-              <button
-                type="button"
-                role="menuitemcheckbox"
-                aria-checked=${String(s.isPiPActive)}
-                tabindex="-1"
-                data-context-menu-item="true"
-                data-context-menu-level="root"
-                class="fw-context-menu-item gap-2"
-                @click=${() => {
-                this.pc.togglePiP();
-                this._closeContextMenu();
-            }}
-              >
-                <span class="opacity-70 shrink-0">${index.pictureInPictureIcon(14)}</span>
-                <span>Picture-in-Picture</span>
-              </button>
-              <button
-                type="button"
-                role="menuitemcheckbox"
-                aria-checked=${String(s.isLoopEnabled)}
-                tabindex="-1"
-                data-context-menu-item="true"
-                data-context-menu-level="root"
-                class="fw-context-menu-item gap-2"
-                @click=${() => {
-                this.pc.toggleLoop();
-                this._closeContextMenu();
-            }}
-              >
-                <span class="opacity-70 shrink-0">${index.loopIcon(14)}</span>
-                <span>${s.isLoopEnabled ? "Disable Loop" : "Enable Loop"}</span>
-              </button>
-            </div>
-          `
-            : lit.nothing}
-    `;
-    }
-};
-exports.FwPlayer.styles = [
-    sharedStyles.sharedStyles,
-    utilityStyles.utilityStyles,
-    lit.css `
-      :host {
-        display: block;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        contain: layout style;
-      }
-      :host([hidden]) {
-        display: none;
-      }
-      .player-area {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
-      .player-area--dev {
-        flex: 1;
-        min-width: 0;
-        min-height: 0;
-      }
-    `,
-];
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: "content-id" })
-], exports.FwPlayer.prototype, "contentId", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: "content-type" })
-], exports.FwPlayer.prototype, "contentType", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: "gateway-url" })
-], exports.FwPlayer.prototype, "gatewayUrl", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: "mist-url" })
-], exports.FwPlayer.prototype, "mistUrl", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: "auth-token" })
-], exports.FwPlayer.prototype, "authToken", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean })
-], exports.FwPlayer.prototype, "autoplay", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean })
-], exports.FwPlayer.prototype, "muted", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean })
-], exports.FwPlayer.prototype, "controls", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: "stock-controls" })
-], exports.FwPlayer.prototype, "stockControls", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: "native-controls" })
-], exports.FwPlayer.prototype, "nativeControls", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean })
-], exports.FwPlayer.prototype, "debug", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: "dev-mode" })
-], exports.FwPlayer.prototype, "devMode", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: "thumbnail-url" })
-], exports.FwPlayer.prototype, "thumbnailUrl", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: "playback-mode" })
-], exports.FwPlayer.prototype, "playbackMode", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: false })
-], exports.FwPlayer.prototype, "endpoints", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_isStatsOpen", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_isDevPanelOpen", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_skipDirection", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_contextMenuOpen", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_contextMenuMounted", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_contextMenuState", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_contextMenuSide", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_contextMenuX", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwPlayer.prototype, "_contextMenuY", void 0);
-tslib_es6.__decorate([
-    decorators_js.query("#container")
-], exports.FwPlayer.prototype, "_containerEl", void 0);
-exports.FwPlayer = tslib_es6.__decorate([
-    decorators_js.customElement("fw-player")
-], exports.FwPlayer);
-//# sourceMappingURL=fw-player.js.map