fix(player): hide chapters menu button when disabled

vidstack · Mar 20, 2024 · 9e96b33 · 9e96b33
1 parent edddf3b
commit 9e96b33
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/packages/vidstack/player/styles/default/menus.css b/packages/vidstack/player/styles/default/menus.css
@@ -281,6 +281,7 @@
   overflow: hidden;
 }
 
+.vds-menu-button[aria-disabled='true'],
 .vds-menu-item[aria-disabled='true'],
 .vds-menu-item[data-disabled] {
   display: none;

diff --git a/packages/vidstack/src/components/ui/menu/radio-groups/chapters-radio-group.ts b/packages/vidstack/src/components/ui/menu/radio-groups/chapters-radio-group.ts
@@ -150,6 +150,8 @@ export class ChaptersRadioGroup extends Component<
 
     if (activeCueIndex >= 0) {
       requestScopedAnimationFrame(() => {
+        if (!this.connectScope) return;
+
         const cue = this._cues()[activeCueIndex],
           radio = this.el!.querySelector(`[aria-checked='true']`),
           cueStartTime = Math.max(startTime, cue.startTime),

diff --git a/packages/vidstack/src/core/tracks/text/utils.ts b/packages/vidstack/src/core/tracks/text/utils.ts
@@ -1,4 +1,4 @@
-import { type Dispose } from 'maverick.js';
+import { getScope, onDispose, scoped, type Dispose } from 'maverick.js';
 import { isString, listenEvent } from 'maverick.js/std';
 import type { VTTCue } from 'media-captions';
 
@@ -22,7 +22,8 @@ export function watchActiveTextTrack(
   kind: TextTrackKind | TextTrackKind[],
   onChange: (track: TextTrack | null) => void,
 ): Dispose {
-  let currentTrack: TextTrack | null = null;
+  let currentTrack: TextTrack | null = null,
+    scope = getScope();
 
   function onModeChange() {
     const kinds = isString(kind) ? [kind] : kind,
@@ -42,7 +43,17 @@ export function watchActiveTextTrack(
       onChange(track);
     } else {
       onChange(null);
-      track.addEventListener('load', () => onChange(track), { once: true });
+      scoped(() => {
+        const off = listenEvent(
+          track,
+          'load',
+          () => {
+            onChange(track);
+            off();
+          },
+          { once: true },
+        );
+      }, scope);
     }
 
     currentTrack = track;

diff --git a/packages/vidstack/src/elements/define/layouts/default/ui/menu/chapters-menu.ts b/packages/vidstack/src/elements/define/layouts/default/ui/menu/chapters-menu.ts
@@ -5,7 +5,8 @@ import { isFunction, unwrap } from 'maverick.js/std';
 import { useDefaultLayoutContext } from '../../../../../../components/layouts/default/context';
 import type { MenuPlacement } from '../../../../../../components/ui/menu/menu-items';
 import type { TooltipPlacement } from '../../../../../../components/ui/tooltip/tooltip-content';
-import { useMediaState } from '../../../../../../core/api/media-context';
+import { TextTrack, watchActiveTextTrack } from '../../../../../../core';
+import { useMediaContext, useMediaState } from '../../../../../../core/api/media-context';
 import { $signal } from '../../../../../lit/directives/signal';
 import { IconSlot } from '../../slots';
 import { $i18n } from '../utils';
@@ -20,7 +21,8 @@ export function DefaultChaptersMenu({
   placement: MenuPlacement | ReadSignal<MenuPlacement | null>;
   tooltip: TooltipPlacement | ReadSignal<TooltipPlacement>;
 }) {
-  const { viewType } = useMediaState(),
+  const { textTracks } = useMediaContext(),
+    { viewType, clipStartTime, clipEndTime } = useMediaState(),
     {
       translations,
       thumbnails,
@@ -29,7 +31,23 @@ export function DefaultChaptersMenu({
       menuGroup,
       smallWhen: smWhen,
     } = useDefaultLayoutContext(),
-    $placement = computed(() =>
+    $disabled = computed(() => {
+      const $startTime = clipStartTime(),
+        $endTime = clipEndTime() || Infinity,
+        $track = signal<TextTrack | null>(null);
+
+      watchActiveTextTrack(textTracks, 'chapters', $track.set);
+
+      const cues = $track()?.cues.filter(
+        (cue) => cue.startTime <= $endTime && cue.endTime >= $startTime,
+      );
+
+      return !cues?.length;
+    });
+
+  if ($disabled()) return null;
+
+  const $placement = computed(() =>
       noModal() ? unwrap(placement) : !smWhen() ? unwrap(placement) : null,
     ),
     $offset = computed(() =>