@livepeer-frameworks/player-wc 0.1.4 → 0.1.6

package/src/components/fw-player.ts

@@ -48,9 +48,6 @@ export class FwPlayer extends LitElement {
   @state() private _contextMenuMounted = false;
   @state() private _contextMenuState: "open" | "closed" = "closed";
   @state() private _contextMenuSide: "top" | "bottom" | "left" | "right" = "bottom";
-  @state() private _contextMenuActiveLevel: "root" | "submenu" = "root";
-  @state() private _contextMenuOpenSubmenu: "playback-mode" | null = null;
-  @state() private _contextMenuSubmenuSide: "left" | "right" = "right";
   @state() private _contextMenuX = 0;
   @state() private _contextMenuY = 0;
 
@@ -82,6 +79,7 @@ export class FwPlayer extends LitElement {
       .player-area--dev {
         flex: 1;
         min-width: 0;
+        min-height: 0;
       }
     `,
   ];
@@ -177,8 +175,6 @@ export class FwPlayer extends LitElement {
   private _closeContextMenu = (restoreFocus = false) => {
     this._contextMenuOpen = false;
     this._contextMenuState = "closed";
-    this._contextMenuActiveLevel = "root";
-    this._contextMenuOpenSubmenu = null;
     this._resetContextMenuTypeahead();
     if (this._contextMenuCloseTimer) {
       clearTimeout(this._contextMenuCloseTimer);
@@ -229,46 +225,18 @@ export class FwPlayer extends LitElement {
     };
   };
 
-  private _getContextMenuItems = (level: "root" | "submenu" = this._contextMenuActiveLevel) =>
+  private _getContextMenuItems = () =>
     Array.from(
       this._getQueryRoot()?.querySelectorAll<HTMLButtonElement>(
-        `[data-context-menu-item="true"][data-context-menu-level="${level}"]:not([data-disabled="true"])`
+        '[data-context-menu-item="true"][data-context-menu-level="root"]:not([data-disabled="true"])'
       ) ?? []
     );
 
-  private _focusFirstContextMenuItem = (
-    level: "root" | "submenu" = this._contextMenuActiveLevel
-  ) => {
-    const [firstItem] = this._getContextMenuItems(level);
+  private _focusFirstContextMenuItem = () => {
+    const [firstItem] = this._getContextMenuItems();
     firstItem?.focus();
   };
 
-  private _focusPlaybackModeTrigger = () => {
-    const trigger = this._getQueryRoot()?.querySelector<HTMLButtonElement>(
-      '[data-context-menu-trigger="playback-mode"]'
-    );
-    trigger?.focus();
-  };
-
-  private _openPlaybackModeSubmenu = () => {
-    this._contextMenuOpenSubmenu = "playback-mode";
-    this._contextMenuActiveLevel = "submenu";
-    this._resetContextMenuTypeahead();
-    queueMicrotask(() => {
-      this._syncPlaybackModeSubmenuSide();
-      this._focusFirstContextMenuItem("submenu");
-    });
-  };
-
-  private _closePlaybackModeSubmenu = (restoreTriggerFocus = false) => {
-    this._contextMenuOpenSubmenu = null;
-    this._contextMenuActiveLevel = "root";
-    this._resetContextMenuTypeahead();
-    if (restoreTriggerFocus) {
-      this._focusPlaybackModeTrigger();
-    }
-  };
-
   private _clampContextMenuPosition = (x: number, y: number, width: number, height: number) => {
     const viewportPadding = 8;
     const bounds = this._getContextMenuBounds();
@@ -305,17 +273,6 @@ export class FwPlayer extends LitElement {
     }
   };
 
-  private _syncPlaybackModeSubmenuSide = () => {
-    if (this._contextMenuOpenSubmenu !== "playback-mode") return;
-    const menu = this._getContextMenuElement();
-    if (!menu) return;
-    const bounds = this._getContextMenuBounds();
-    const rect = menu.getBoundingClientRect();
-    const estimatedSubmenuWidth = 190;
-    this._contextMenuSubmenuSide =
-      rect.right + estimatedSubmenuWidth > bounds.right - 8 ? "left" : "right";
-  };
-
   private _openContextMenu = (clientX: number, clientY: number) => {
     const local = this._toLocalContextMenuPoint(clientX, clientY);
     const next = this._clampContextMenuPosition(local.x, local.y, 220, 200);
@@ -324,8 +281,6 @@ export class FwPlayer extends LitElement {
     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;
@@ -385,11 +340,7 @@ export class FwPlayer extends LitElement {
 
     if (e.key === "Escape") {
       e.preventDefault();
-      if (this._contextMenuActiveLevel === "submenu") {
-        this._closePlaybackModeSubmenu(true);
-      } else {
-        this._closeContextMenu(true);
-      }
+      this._closeContextMenu(true);
       return;
     }
 
@@ -398,27 +349,13 @@ export class FwPlayer extends LitElement {
       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);
+    const items = this._getContextMenuItems();
     if (items.length === 0) return;
     const activeIndex = items.findIndex((item) => item === activeElement);
 
     if (e.key === "Home") {
       e.preventDefault();
-      this._focusFirstContextMenuItem(this._contextMenuActiveLevel);
+      this._focusFirstContextMenuItem();
       return;
     }
 
@@ -481,16 +418,7 @@ export class FwPlayer extends LitElement {
     ) {
       queueMicrotask(() => {
         this._syncContextMenuPosition();
-        this._focusFirstContextMenuItem("root");
-      });
-    }
-
-    if (
-      changed.has("_contextMenuOpenSubmenu") &&
-      this._contextMenuOpenSubmenu === "playback-mode"
-    ) {
-      queueMicrotask(() => {
-        this._syncPlaybackModeSubmenuSide();
+        this._focusFirstContextMenuItem();
       });
     }
   }
@@ -811,14 +739,10 @@ export class FwPlayer extends LitElement {
                   .playbackMode=${this.playbackMode}
                   .isContentLive=${s.isEffectivelyLive}
                   .devMode=${this.devMode}
-                  .isDevPanelOpen=${this._isDevPanelOpen}
                   .isStatsOpen=${this._isStatsOpen}
                   @fw-stats-toggle=${() => {
                     this._isStatsOpen = !this._isStatsOpen;
                   }}
-                  @fw-dev-panel-toggle=${() => {
-                    this._isDevPanelOpen = !this._isDevPanelOpen;
-                  }}
                   @fw-mode-change=${(event: CustomEvent<{ mode: PlaybackMode }>) => {
                     this.playbackMode = event.detail.mode;
                   }}
@@ -929,111 +853,6 @@ export class FwPlayer extends LitElement {
                 <span class="opacity-70 shrink-0">${loopIcon(14)}</span>
                 <span>${s.isLoopEnabled ? "Disable Loop" : "Enable Loop"}</span>
               </button>
-              ${this.devMode
-                ? 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"
-                      ? 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>
-                        `
-                      : nothing}
-                  `
-                : nothing}
             </div>
           `
         : nothing}

package/src/styles/shared-styles.ts

@@ -442,11 +442,20 @@ export const sharedStyles = css`
   .fw-context-menu-item {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition:
@@ -485,11 +494,20 @@ export const sharedStyles = css`
   .fw-context-menu-checkbox {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.5rem 0.5rem 2rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition: