@banou/media-player 0.10.7 → 0.10.8

package/dist/react/player.d.ts

@@ -7,6 +7,7 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     thumbnails: import("..").ThumbnailImage[];
     thumbnailAt?: (time: number) => import("..").ThumbnailImage | undefined;
     requestThumbnail: (time: number | undefined) => void;
+    seekPreview: boolean;
     subtitleTracks: import("./source-feature").TrackChoice[];
     selectedSubtitleTrack: string | number | undefined;
     selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>;

package/dist/react/source-feature.d.ts

@@ -130,6 +130,13 @@ export type SourceState = {
      * A no-op on a source that brings its own storyboard, and until the generator has booted.
      */
     requestThumbnail: (time: number | undefined) => void;
+    /**
+     * True while the seekbar shows what is under the pointer: the time, the chapter and the thumbnail.
+     *
+     * Written by the seekbar when that opens and closes, never per move, for the reason above. Read by
+     * whatever else the chrome draws in the space above the bar, which steps aside meanwhile.
+     */
+    seekPreview: boolean;
     /**
      * Both selectors may answer with a promise, and the menu waits on it.
      *
@@ -266,6 +273,13 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
      * A no-op on a source that brings its own storyboard, and until the generator has booted.
      */
     requestThumbnail: (time: number | undefined) => void;
+    /**
+     * True while the seekbar shows what is under the pointer: the time, the chapter and the thumbnail.
+     *
+     * Written by the seekbar when that opens and closes, never per move, for the reason above. Read by
+     * whatever else the chrome draws in the space above the bar, which steps aside meanwhile.
+     */
+    seekPreview: boolean;
     /**
      * Both selectors may answer with a promise, and the menu waits on it.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/react/components/progress-bar.tsx

@@ -248,6 +248,8 @@ export const ProgressBar = () => {
   const requestThumbnail = usePlayer((state) => state.requestThumbnail)
   const chapters = usePlayer((state) => state.chapters)
   const seekingTo = usePlayer((state) => state.seekingTo)
+  const setSourceState = usePlayer((state) => state.setSourceState)
+  const hideUI = usePlayer((state) => state.hideUI)
 
   const progressBarRef = useRef<HTMLDivElement>(null)
 
@@ -266,6 +268,19 @@ export const ProgressBar = () => {
     requestThumbnail(time)
   }
 
+  // the same truthiness the readout and the thumbnail below are drawn on
+  const previewing = !!progressBarHoverTime
+  useEffect(() => {
+    if (!previewing) return
+    setSourceState({ seekPreview: true })
+    return () => setSourceState({ seekPreview: false })
+  }, [setSourceState, previewing])
+
+  // faded out with the chrome, the readout is off screen while it would still hold the offer back
+  useEffect(() => {
+    if (hideUI) showPreviewAt(undefined)
+  }, [hideUI])
+
   // onChange reports a bare fraction, so the device that opened the gesture is recorded on press
   const dragPointerType = useRef<string | undefined>(undefined)
 
@@ -346,7 +361,20 @@ export const ProgressBar = () => {
     return fraction * duration
   }
 
+  /*
+   * A browser follows a tap with a mouseover and a mousemove at the tap, after the lift has closed
+   * the preview, and on a phone no mouse ever moves away to close it again: the readout stays up and
+   * the skip offer stays hidden behind it. Those are the only mouse events here with no pointer event
+   * of type mouse before them. Mouse events stay the trigger, since a host's jsdom suite hovers with
+   * them.
+   */
+  const lastPointerType = useRef('mouse')
+  const onPointer: DOMAttributes<HTMLDivElement>['onPointerMove'] = (ev) => {
+    lastPointerType.current = ev.pointerType
+  }
+
   const onProgressBarOver: DOMAttributes<HTMLDivElement>['onMouseMove'] = (ev) => {
+    if (lastPointerType.current === 'touch') return
     showPreviewAt(timeAtClientX(ev.clientX))
   }
 
@@ -495,6 +523,8 @@ export const ProgressBar = () => {
         dragging ? 'dragging' : '',
         segmented ? 'segmented' : '',
       ].filter(Boolean).join(' ')}
+      onPointerDown={onPointer}
+      onPointerMove={onPointer}
       onMouseMove={onProgressBarOver}
       onMouseOut={hideProgressBarTime}
     >

package/src/lib/react/components/skip-chapter.tsx

@@ -93,6 +93,12 @@ export const SkipChapter = () => {
   const chapters = usePlayer((state) => state.chapters)
   const currentTime = usePlayer((state) => state.currentTime)
   const requestSeek = usePlayer((state) => state.requestSeek)
+  /*
+   * The seekbar's readout rises into this corner when the pointer nears the end of the bar, and this
+   * layer is drawn over the control bar, so the offer steps aside while it is up rather than cover
+   * the chapter name. The timer below keeps running: a look at the bar does not extend the offer.
+   */
+  const seekPreview = usePlayer((state) => state.seekPreview)
   const player = usePlayer()
 
   const kinds = useMemo(() => classifyChapters(chapters), [chapters])
@@ -155,7 +161,7 @@ export const SkipChapter = () => {
   }
 
   return (
-    <div css={style} className={show ? 'show' : ''}>
+    <div css={style} className={show && !seekPreview ? 'show' : ''}>
       <button type='button' className='skip-chapter' onClick={skip}>
         {LABELS[skippable.kind]}
       </button>

package/src/lib/react/source-feature.ts

@@ -139,6 +139,13 @@ export type SourceState = {
    * A no-op on a source that brings its own storyboard, and until the generator has booted.
    */
   requestThumbnail: (time: number | undefined) => void
+  /**
+   * True while the seekbar shows what is under the pointer: the time, the chapter and the thumbnail.
+   *
+   * Written by the seekbar when that opens and closes, never per move, for the reason above. Read by
+   * whatever else the chrome draws in the space above the bar, which steps aside meanwhile.
+   */
+  seekPreview: boolean
 
   /**
    * Both selectors may answer with a promise, and the menu waits on it.
@@ -258,6 +265,7 @@ const initialState: SourceState = {
   chapters: [],
   thumbnails: [],
   requestThumbnail: () => {},
+  seekPreview: false,
   subtitleTracks: [],
   selectedSubtitleTrack: undefined,
   selectSubtitleTrack: () => {},

package/src/lib/utils/chapters.ts

@@ -151,7 +151,7 @@ const LABEL_SEPARATORS = /[-:|~/\\[\]()「」『』【】,.!?"'’]|\s+by\s+/u
 /** Titles a container writes when it has nothing to say, which must never look like a marker. */
 const isPlaceholder = (title: string): boolean =>
   // "Chapter 07", and the timestamps one muxer writes as titles, which are 300 markers in the sample
-  /^chapter\s*\d+$/i.test(title.trim()) || /^\d{1,2}:\d{2}:\d{2}([.,]\d+)?$/.test(title.trim())
+  !title.trim() || /^chapter\s*\d+$/i.test(title.trim()) || /^\d{1,2}:\d{2}:\d{2}([.,]\d+)?$/.test(title.trim())
 
 const normalise = (title: string): string =>
   (title.trim().toLowerCase().split(LABEL_SEPARATORS)[0] ?? '').trim().replace(/\s+/gu, ' ')
@@ -297,6 +297,10 @@ export const classifyChapters = (chapters: MediaChapter[]): (ChapterKind | undef
     return guess && !plain.includes(guess) ? guess : undefined
   })
 
-  // shape is the last resort, and only for a file whose titles said nothing whatsoever
-  return named.some(Boolean) ? named : guessFromShape(chapters)
+  /*
+   * Shape is the last resort, and only for a file where no person named anything. A name that is not
+   * a theme still answers for its chapter: a theme-length Recap in the first half would otherwise be
+   * offered as the opening, and a Preview in the second as the ending.
+   */
+  return chapters.every(({ title }) => isPlaceholder(title)) ? guessFromShape(chapters) : named
 }