@livepeer-frameworks/player-wc 0.1.1 → 0.1.3

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

@@ -25,25 +25,248 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
         this._isDevPanelOpen = false;
         this._skipDirection = null;
         this._contextMenuOpen = false;
+        this._contextMenuMounted = false;
+        this._contextMenuState = "closed";
+        this._contextMenuSide = "bottom";
+        this._contextMenuActiveLevel = "root";
+        this._contextMenuOpenSubmenu = null;
+        this._contextMenuSubmenuSide = "right";
         this._contextMenuX = 0;
         this._contextMenuY = 0;
         // ---- Controller ----
         this.pc = new playerControllerHost.PlayerControllerHost(this);
-        // ---- Context Menu ----
+        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._contextMenuActiveLevel = "root";
+            this._contextMenuOpenSubmenu = null;
+            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._getContextMenuItems = (level = this._contextMenuActiveLevel) => Array.from(this._getQueryRoot()?.querySelectorAll(`[data-context-menu-item="true"][data-context-menu-level="${level}"]:not([data-disabled="true"])`) ?? []);
+        this._focusFirstContextMenuItem = (level = this._contextMenuActiveLevel) => {
+            const [firstItem] = this._getContextMenuItems(level);
+            firstItem?.focus();
+        };
+        this._focusPlaybackModeTrigger = () => {
+            const trigger = this._getQueryRoot()?.querySelector('[data-context-menu-trigger="playback-mode"]');
+            trigger?.focus();
+        };
+        this._openPlaybackModeSubmenu = () => {
+            this._contextMenuOpenSubmenu = "playback-mode";
+            this._contextMenuActiveLevel = "submenu";
+            this._resetContextMenuTypeahead();
+            queueMicrotask(() => {
+                this._syncPlaybackModeSubmenuSide();
+                this._focusFirstContextMenuItem("submenu");
+            });
+        };
+        this._closePlaybackModeSubmenu = (restoreTriggerFocus = false) => {
+            this._contextMenuOpenSubmenu = null;
+            this._contextMenuActiveLevel = "root";
+            this._resetContextMenuTypeahead();
+            if (restoreTriggerFocus) {
+                this._focusPlaybackModeTrigger();
+            }
+        };
+        this._clampContextMenuPosition = (x, y, width, height) => {
+            const viewportPadding = 8;
+            const maxX = Math.max(viewportPadding, window.innerWidth - width - viewportPadding);
+            const maxY = Math.max(viewportPadding, window.innerHeight - 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._syncPlaybackModeSubmenuSide = () => {
+            if (this._contextMenuOpenSubmenu !== "playback-mode")
+                return;
+            const menu = this._getContextMenuElement();
+            if (!menu)
+                return;
+            const rect = menu.getBoundingClientRect();
+            const estimatedSubmenuWidth = 190;
+            this._contextMenuSubmenuSide =
+                rect.right + estimatedSubmenuWidth > window.innerWidth - 8 ? "left" : "right";
+        };
+        this._openContextMenu = (x, y) => {
+            const next = this._clampContextMenuPosition(x, y, 220, 200);
+            this._contextMenuSide = this._resolveContextMenuSide(x, y, next.x, next.y);
+            this._contextMenuX = next.x;
+            this._contextMenuY = next.y;
+            this._contextMenuMounted = true;
+            this._contextMenuState = "open";
+            this._contextMenuActiveLevel = "root";
+            this._contextMenuOpenSubmenu = null;
+            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.getBoundingClientRect();
-            this._contextMenuX = e.clientX;
-            this._contextMenuY = e.clientY;
-            this._contextMenuOpen = true;
+            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._handleDocumentClick = () => {
-            if (this._contextMenuOpen)
-                this._contextMenuOpen = false;
+        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._contextMenuOpen = false;
+                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();
+                if (this._contextMenuActiveLevel === "submenu") {
+                    this._closePlaybackModeSubmenu(true);
+                }
+                else {
+                    this._closeContextMenu(true);
+                }
+                return;
+            }
+            if (e.key === "Tab") {
+                this._closeContextMenu();
+                return;
+            }
+            if (e.key === "ArrowRight" && this._contextMenuActiveLevel === "root") {
+                if (activeElement?.dataset.contextMenuTrigger === "playback-mode") {
+                    e.preventDefault();
+                    this._openPlaybackModeSubmenu();
+                }
+                return;
+            }
+            if (e.key === "ArrowLeft" && this._contextMenuActiveLevel === "submenu") {
+                e.preventDefault();
+                this._closePlaybackModeSubmenu(true);
+                return;
+            }
+            const items = this._getContextMenuItems(this._contextMenuActiveLevel);
+            if (items.length === 0)
+                return;
+            const activeIndex = items.findIndex((item) => item === activeElement);
+            if (e.key === "Home") {
+                e.preventDefault();
+                this._focusFirstContextMenuItem(this._contextMenuActiveLevel);
+                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();
             }
         };
     }
@@ -78,19 +301,39 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
     firstUpdated() {
         this.pc.attach(this._containerEl);
         // Close context menu on outside click
-        document.addEventListener("pointerdown", this._handleDocumentClick);
+        document.addEventListener("pointerdown", this._handleDocumentPointerDown);
         document.addEventListener("contextmenu", this._handleDocumentContextMenu);
+        document.addEventListener("keydown", this._handleDocumentKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener("pointerdown", this._handleDocumentClick);
+        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("root");
+            });
+        }
+        if (changed.has("_contextMenuOpenSubmenu") &&
+            this._contextMenuOpenSubmenu === "playback-mode") {
+            queueMicrotask(() => {
+                this._syncPlaybackModeSubmenuSide();
+            });
+        }
     }
     // ---- Derived state ----
     get _showTitleOverlay() {
@@ -103,7 +346,14 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
     }
     get _showWaitingForEndpoint() {
         const s = this.pc.s;
-        return !s.endpoints && s.state !== "booting";
+        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.controls || this.pc.s.currentPlayerInfo?.shortname === "mist-legacy";
@@ -174,11 +424,13 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
             "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 -->
@@ -191,6 +443,16 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
           <!-- 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 `
@@ -230,7 +492,14 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
           <!-- Waiting for endpoint -->
           ${this._showWaitingForEndpoint
             ? lit.html `
-                <fw-idle-screen status="OFFLINE" message="Waiting for endpoint..."></fw-idle-screen>
+                <fw-idle-screen
+                  status="OFFLINE"
+                  .message=${this._waitingMessage}
+                  @fw-retry=${() => {
+                this.pc.clearError();
+                this.pc.retry();
+            }}
+                ></fw-idle-screen>
               `
             : lit.nothing}
 
@@ -241,6 +510,10 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
                   .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}
@@ -366,6 +639,9 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
                   .isStatsOpen=${this._isStatsOpen}
                   @fw-stats-toggle=${() => {
                 this._isStatsOpen = !this._isStatsOpen;
+            }}
+                  @fw-mode-change=${(event) => {
+                this.playbackMode = event.detail.mode;
             }}
                 ></fw-player-controls>
               `
@@ -380,6 +656,9 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
                 .playbackMode=${this.playbackMode}
                 @fw-close=${() => {
                 this._isDevPanelOpen = false;
+            }}
+                @fw-playback-mode-change=${(event) => {
+                this.playbackMode = event.detail.mode;
             }}
               ></fw-dev-mode-panel>
             `
@@ -387,17 +666,31 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
       </div>
 
       <!-- Context menu -->
-      ${this._contextMenuOpen
+      <!-- Keep menu in-shadow (no document portal) to preserve host-scoped styling and avoid a global overlay manager. -->
+      ${this._contextMenuMounted
             ? lit.html `
             <div
-              class="context-menu"
-              style="left: ${this._contextMenuX}px; top: ${this._contextMenuY}px;"
+              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: fixed; left: ${this._contextMenuX}px; top: ${this._contextMenuY}px;"
+              @contextmenu=${(e) => e.preventDefault()}
+              @keydown=${this._handleContextMenuKeyDown}
             >
               <button
-                class="context-menu-item"
+                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._contextMenuOpen = false;
+                this._closeContextMenu();
             }}
               >
                 <span class="opacity-70 shrink-0">${index.statsIcon(14)}</span>
@@ -405,12 +698,17 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
               </button>
               ${this.devMode
                 ? lit.html `
-                    <div class="context-menu-sep"></div>
+                    <div class="fw-context-menu-separator"></div>
                     <button
-                      class="context-menu-item"
+                      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._contextMenuOpen = false;
+                    this._closeContextMenu();
                 }}
                     >
                       <span class="opacity-70 shrink-0">${index.settingsIcon(14)}</span>
@@ -418,27 +716,145 @@ exports.FwPlayer = class FwPlayer extends lit.LitElement {
                     </button>
                   `
                 : lit.nothing}
-              <div class="context-menu-sep"></div>
+              <div class="fw-context-menu-separator"></div>
               <button
-                class="context-menu-item"
+                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._contextMenuOpen = false;
+                this._closeContextMenu();
             }}
               >
                 <span class="opacity-70 shrink-0">${index.pictureInPictureIcon(14)}</span>
                 <span>Picture-in-Picture</span>
               </button>
               <button
-                class="context-menu-item"
+                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._contextMenuOpen = false;
+                this._closeContextMenu();
             }}
               >
                 <span class="opacity-70 shrink-0">${index.loopIcon(14)}</span>
                 <span>${s.isLoopEnabled ? "Disable Loop" : "Enable Loop"}</span>
               </button>
+              ${this.devMode
+                ? lit.html `
+                    <div class="fw-context-menu-separator"></div>
+                    <button
+                      type="button"
+                      role="menuitem"
+                      aria-haspopup="menu"
+                      aria-expanded=${String(this._contextMenuOpenSubmenu === "playback-mode")}
+                      tabindex="-1"
+                      data-context-menu-item="true"
+                      data-context-menu-level="root"
+                      data-context-menu-trigger="playback-mode"
+                      class="fw-context-menu-item gap-2"
+                      @click=${() => {
+                    if (this._contextMenuOpenSubmenu === "playback-mode") {
+                        this._closePlaybackModeSubmenu();
+                    }
+                    else {
+                        this._openPlaybackModeSubmenu();
+                    }
+                }}
+                    >
+                      <span>Playback Mode</span>
+                      <span class="ml-auto opacity-70">›</span>
+                    </button>
+                    ${this._contextMenuOpenSubmenu === "playback-mode"
+                    ? lit.html `
+                          <div
+                            class="fw-player-surface fw-context-menu"
+                            role="menu"
+                            aria-label="Playback mode options"
+                            data-state="open"
+                            data-side=${this._contextMenuSubmenuSide === "right" ? "right" : "left"}
+                            style=${this._contextMenuSubmenuSide === "right"
+                        ? "position:absolute; top:0; left: calc(100% + 4px);"
+                        : "position:absolute; top:0; right: calc(100% + 4px);"}
+                          >
+                            <button
+                              type="button"
+                              role="menuitemradio"
+                              aria-checked=${String(this.playbackMode === "auto")}
+                              tabindex="-1"
+                              data-context-menu-item="true"
+                              data-context-menu-level="submenu"
+                              class="fw-context-menu-item gap-2"
+                              @click=${() => {
+                        this.playbackMode = "auto";
+                        void this.pc.setDevModeOptions({ playbackMode: "auto" });
+                        this._closeContextMenu();
+                    }}
+                            >
+                              <span>Auto</span>
+                            </button>
+                            <button
+                              type="button"
+                              role="menuitemradio"
+                              aria-checked=${String(this.playbackMode === "low-latency")}
+                              tabindex="-1"
+                              data-context-menu-item="true"
+                              data-context-menu-level="submenu"
+                              class="fw-context-menu-item gap-2"
+                              @click=${() => {
+                        this.playbackMode = "low-latency";
+                        void this.pc.setDevModeOptions({ playbackMode: "low-latency" });
+                        this._closeContextMenu();
+                    }}
+                            >
+                              <span>Low Latency</span>
+                            </button>
+                            <button
+                              type="button"
+                              role="menuitemradio"
+                              aria-checked=${String(this.playbackMode === "quality")}
+                              tabindex="-1"
+                              data-context-menu-item="true"
+                              data-context-menu-level="submenu"
+                              class="fw-context-menu-item gap-2"
+                              @click=${() => {
+                        this.playbackMode = "quality";
+                        void this.pc.setDevModeOptions({ playbackMode: "quality" });
+                        this._closeContextMenu();
+                    }}
+                            >
+                              <span>Quality</span>
+                            </button>
+                            <button
+                              type="button"
+                              role="menuitemradio"
+                              aria-checked=${String(this.playbackMode === "vod")}
+                              tabindex="-1"
+                              data-context-menu-item="true"
+                              data-context-menu-level="submenu"
+                              class="fw-context-menu-item gap-2"
+                              @click=${() => {
+                        this.playbackMode = "vod";
+                        void this.pc.setDevModeOptions({ playbackMode: "vod" });
+                        this._closeContextMenu();
+                    }}
+                            >
+                              <span>VOD</span>
+                            </button>
+                          </div>
+                        `
+                    : lit.nothing}
+                  `
+                : lit.nothing}
             </div>
           `
             : lit.nothing}
@@ -468,40 +884,6 @@ exports.FwPlayer.styles = [
         flex: 1;
         min-width: 0;
       }
-      .context-menu {
-        position: fixed;
-        z-index: 200;
-        min-width: 180px;
-        border-radius: 0.5rem;
-        border: 1px solid rgb(255 255 255 / 0.1);
-        background: rgb(0 0 0 / 0.9);
-        backdrop-filter: blur(8px);
-        padding: 0.25rem;
-        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
-      }
-      .context-menu-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        width: 100%;
-        padding: 0.375rem 0.5rem;
-        border: none;
-        background: none;
-        color: rgb(255 255 255 / 0.8);
-        font-size: 0.8125rem;
-        cursor: pointer;
-        border-radius: 0.25rem;
-        text-align: left;
-      }
-      .context-menu-item:hover {
-        background: rgb(255 255 255 / 0.1);
-        color: white;
-      }
-      .context-menu-sep {
-        height: 1px;
-        background: rgb(255 255 255 / 0.1);
-        margin: 0.25rem 0;
-      }
     `,
 ];
 tslib_es6.__decorate([
@@ -555,6 +937,24 @@ tslib_es6.__decorate([
 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, "_contextMenuActiveLevel", void 0);
+tslib_es6.__decorate([
+    decorators_js.state()
+], exports.FwPlayer.prototype, "_contextMenuOpenSubmenu", void 0);
+tslib_es6.__decorate([
+    decorators_js.state()
+], exports.FwPlayer.prototype, "_contextMenuSubmenuSide", void 0);
 tslib_es6.__decorate([
     decorators_js.state()
 ], exports.FwPlayer.prototype, "_contextMenuX", void 0);