@f8team/reel-core 1.0.5 → 1.1.1

package/dist/index.d.cts

@@ -798,6 +798,33 @@ interface FocusTrap {
  */
 declare function createFocusTrap(container: HTMLElement): FocusTrap;
 
+/**
+ * Focus helpers for the auto-hiding controls chrome.
+ *
+ * The themes keep the controls bar visible while the player matches
+ * `:focus-within`, so keyboard users never lose the control they are on.
+ * A pointer click focuses that control too, which used to latch the chrome
+ * open forever - most visibly after tapping the fullscreen button, the only
+ * way into fullscreen. `shouldKeepControlsVisible` tells the auto-hide timer
+ * which of the two it is looking at, and `blurFocusInside` releases the
+ * pointer-induced focus so `:focus-within` stops matching.
+ */
+/**
+ * Clears focus from any focused descendant of `container`.
+ *
+ * Used on pointer leave of the `[data-reel]` wrapper and when the auto-hide
+ * timer fires, so `:focus-within` does not keep the controls bar visible
+ * after a mouse click or tap on a control.
+ */
+declare function blurFocusInside(container: Element): void;
+/**
+ * `true` when the controls must stay on screen even though the idle timer
+ * expired: an open menu, or a control the user reached with the keyboard.
+ *
+ * Pointer focus deliberately returns `false` - a tap must not pin the chrome.
+ */
+declare function shouldKeepControlsVisible(container: Element): boolean;
+
 /**
  * Time helpers shared by the seek bar, transcript markers (G8), and the
  * keyboard / commands layer.
@@ -870,4 +897,4 @@ declare function looksLikeProgressive(input: string | undefined | null): boolean
  */
 declare function detectSourceType(source: SourceDescriptor): SourceType;
 
-export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type PluginMediaAttachment, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceTransform, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, areSourceDescriptorsEquivalent, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };
+export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type PluginMediaAttachment, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceTransform, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, areSourceDescriptorsEquivalent, blurFocusInside, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, shouldKeepControlsVisible, toSeconds };

package/dist/index.d.ts

@@ -798,6 +798,33 @@ interface FocusTrap {
  */
 declare function createFocusTrap(container: HTMLElement): FocusTrap;
 
+/**
+ * Focus helpers for the auto-hiding controls chrome.
+ *
+ * The themes keep the controls bar visible while the player matches
+ * `:focus-within`, so keyboard users never lose the control they are on.
+ * A pointer click focuses that control too, which used to latch the chrome
+ * open forever - most visibly after tapping the fullscreen button, the only
+ * way into fullscreen. `shouldKeepControlsVisible` tells the auto-hide timer
+ * which of the two it is looking at, and `blurFocusInside` releases the
+ * pointer-induced focus so `:focus-within` stops matching.
+ */
+/**
+ * Clears focus from any focused descendant of `container`.
+ *
+ * Used on pointer leave of the `[data-reel]` wrapper and when the auto-hide
+ * timer fires, so `:focus-within` does not keep the controls bar visible
+ * after a mouse click or tap on a control.
+ */
+declare function blurFocusInside(container: Element): void;
+/**
+ * `true` when the controls must stay on screen even though the idle timer
+ * expired: an open menu, or a control the user reached with the keyboard.
+ *
+ * Pointer focus deliberately returns `false` - a tap must not pin the chrome.
+ */
+declare function shouldKeepControlsVisible(container: Element): boolean;
+
 /**
  * Time helpers shared by the seek bar, transcript markers (G8), and the
  * keyboard / commands layer.
@@ -870,4 +897,4 @@ declare function looksLikeProgressive(input: string | undefined | null): boolean
  */
 declare function detectSourceType(source: SourceDescriptor): SourceType;
 
-export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type PluginMediaAttachment, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceTransform, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, areSourceDescriptorsEquivalent, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };
+export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type PluginMediaAttachment, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceTransform, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, areSourceDescriptorsEquivalent, blurFocusInside, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, shouldKeepControlsVisible, toSeconds };

package/dist/index.js

@@ -398,6 +398,12 @@ var HlsLoader = class {
     this.rejectAttach = null;
     this.manifestTimeout = null;
     this.aborted = false;
+    /**
+     * Bumped by every abort/detach. `detach()` clears `aborted` so the loader can be reused, so a
+     * source switch (abort, then detach) used to let an attach that was still awaiting the runtime
+     * carry on and bind a stale hls.js instance to the <video>. Each attach keeps its own value.
+     */
+    this.generation = 0;
     this.lastLoadingFragmentKey = null;
     this.repeatedFragmentLoadCount = 0;
     this.repeatedFragmentErrorFired = false;
@@ -416,11 +422,12 @@ var HlsLoader = class {
   async attach(video, source) {
     this.detach();
     this.aborted = false;
+    const generation = this.generation;
     this.video = video;
     this.currentSource = source;
     this.unauthorizedFired = false;
     const Hls = await (this.options.loadRuntime ?? defaultLoad)();
-    if (this.aborted) {
+    if (this.aborted || generation !== this.generation) {
       throw makeAbortError();
     }
     if (!Hls.isSupported()) {
@@ -731,6 +738,7 @@ var HlsLoader = class {
     this.abortLiveXhrs();
   }
   abort() {
+    this.generation += 1;
     if (this.aborted) return;
     this.aborted = true;
     this.clearManifestTimeout();
@@ -1064,17 +1072,24 @@ var YouTubeLoader = class {
     this.duration = 0;
     this.rejectAttach = null;
     this.aborted = false;
+    /**
+     * Bumped by every abort/detach. `detach()` clears `aborted` so the loader can be reused, so a
+     * source switch (abort, then detach) used to let an attach that was still awaiting the runtime
+     * carry on and mount a second iframe. Each attach keeps the value it started with instead.
+     */
+    this.generation = 0;
   }
   async attach(video, source) {
     this.detach();
     this.aborted = false;
+    const generation = this.generation;
     const id = extractYouTubeId(source.src);
     if (!id) {
       throw new Error(`Cannot extract YouTube videoId from "${source.src}"`);
     }
     this.video = video;
     const YT = await (this.options.loadRuntime ?? defaultLoad2)();
-    if (this.aborted) {
+    if (this.aborted || generation !== this.generation) {
       throw makeYtAbortError();
     }
     const parent = video.parentElement;
@@ -1170,6 +1185,7 @@ var YouTubeLoader = class {
     });
   }
   abort() {
+    this.generation += 1;
     if (this.aborted) return;
     this.aborted = true;
     const reject = this.rejectAttach;
@@ -2392,6 +2408,27 @@ function createFocusTrap(container) {
   return { activate, deactivate };
 }
 
+// src/a11y/controlsFocus.ts
+var OPEN_MENU_SELECTOR = "[data-reel-menu-open]";
+function activeElementInside(container) {
+  const active = (container.ownerDocument ?? document).activeElement;
+  if (!(active instanceof HTMLElement)) return null;
+  return container.contains(active) ? active : null;
+}
+function blurFocusInside(container) {
+  activeElementInside(container)?.blur();
+}
+function shouldKeepControlsVisible(container) {
+  if (container.querySelector(OPEN_MENU_SELECTOR) !== null) return true;
+  const active = activeElementInside(container);
+  if (!active) return false;
+  try {
+    return active.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+}
+
 // src/util/time.ts
 var TIME_RE = /^(?:(\d+):)?(\d{1,2}):(\d{1,2})(?:\.(\d+))?$/;
 function parseTime(input) {
@@ -2425,6 +2462,6 @@ function toSeconds(input) {
   return parseTime(input);
 }
 
-export { DEFAULT_TOKENS, THEME_PRESETS, TOKEN_TO_CSS_VAR, announce, applyTheme, areSourceDescriptorsEquivalent, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };
+export { DEFAULT_TOKENS, THEME_PRESETS, TOKEN_TO_CSS_VAR, announce, applyTheme, areSourceDescriptorsEquivalent, blurFocusInside, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, shouldKeepControlsVisible, toSeconds };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map