@banou/media-player 0.10.7 → 0.10.9

package/dist/react/components/icons.d.ts

@@ -1,7 +1,4 @@
 import type { SVGProps } from 'react';
-export declare const Captions: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
-/** The slash is Feather's own convention for an off state, the line `MicOff` and `BellOff` draw. */
-export declare const CaptionsOff: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * Subtitles inside the picture: the picture-in-picture frame with caption bars in the inset.
  *
@@ -16,6 +13,6 @@ export declare const SubtitlesInPicture: (props: SVGProps<SVGSVGElement>) => imp
  * The pair exists because that control is the one button in the bar whose glyph did not move with its
  * state, so the state was carried by an accent colour and by nothing else. A pair, not a slash: a
  * slashed resting state reads as unavailable, and the subtitles button beside it already draws
- * Feather's slash for its own off state.
+ * Lucide's slash for its own off state.
  */
 export declare const SubtitlesOutsidePicture: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

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.9",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",
@@ -46,8 +46,8 @@
     "ass-compiler": "^0.1.16",
     "jassub": "^2.5.16",
     "libav-wasm": "^0.8.7",
+    "lucide-react": "^0.536.0",
     "osra": "^0.6.12",
-    "react-feather": "^2.0.10",
     "react-tooltip": "^5.28.0"
   },
   "peerDependencies": {

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

@@ -1,7 +1,7 @@
 /// <reference types="@emotion/react/types/css-prop" />
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { css } from '@emotion/react'
-import { Maximize, Minimize, Pause, Play, RotateCcw } from 'react-feather'
+import { Maximize, Minimize, Pause, Play, RotateCcw } from 'lucide-react'
 
 import { linearToLogVolume, logToLinearVolume } from '../../utils/volume-utils'
 import { formatMediaTime } from '../../utils/time'

package/src/lib/react/components/errors.tsx

@@ -3,7 +3,7 @@ import type { PlaybackErrorEntry } from '../source-feature'
 
 import { useState } from 'react'
 import { css } from '@emotion/react'
-import { AlertTriangle, Check, Copy } from 'react-feather'
+import { Check, Copy, TriangleAlert } from 'lucide-react'
 
 import { fonts } from '../../utils/fonts'
 import { formatTime } from '../../utils/time'
@@ -173,7 +173,7 @@ export const ErrorsAction = () => {
             aria-label={label}
             aria-expanded={open}
           >
-            <AlertTriangle className='alert-triangle' />
+            <TriangleAlert className='alert-triangle' />
           </button>
         }
         toolTipText={<span>{label}</span>}

package/src/lib/react/components/icons.tsx

@@ -1,13 +1,12 @@
 import type { SVGProps } from 'react'
 
 /**
- * The captions glyph, drawn here because react-feather does not have one.
+ * The two burn-in glyphs, drawn here because Lucide has no "subtitles in the picture in picture
+ * window": its `PictureInPicture` has no caption bars and its `Captions` has no inset.
  *
- * Checked against react-feather 2.0.10's 287 icons: there is no captions, subtitles or CC glyph, and
- * nothing it does have reads as one (`Type` is a text-formatting T, `MessageSquare` is a chat bubble,
- * `FileText` is a document). Drawn on Feather's own 24 grid at stroke-width 2 with round caps and
- * carrying no size or colour of its own, so the control bar's `svg` rules size and stroke it exactly
- * as they do `Play` and `Settings`.
+ * Drawn on Lucide's own 24 grid at stroke-width 2 with round caps and carrying no size or colour of
+ * their own, so the control bar's `svg` rules size and stroke them exactly as they do `Play` and
+ * `Settings`.
  */
 const iconProps = {
   xmlns: 'http://www.w3.org/2000/svg',
@@ -21,22 +20,6 @@ const iconProps = {
   strokeLinejoin: 'round',
 } as const
 
-export const Captions = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...iconProps} {...props}>
-    <rect x='3' y='5' width='18' height='14' rx='2' ry='2' />
-    <path d='M7 15h4m4 0h2M7 11h2m4 0h4' />
-  </svg>
-)
-
-/** The slash is Feather's own convention for an off state, the line `MicOff` and `BellOff` draw. */
-export const CaptionsOff = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...iconProps} {...props}>
-    <rect x='3' y='5' width='18' height='14' rx='2' ry='2' />
-    <path d='M7 15h4m4 0h2M7 11h2m4 0h4' />
-    <line x1='2' y1='2' x2='22' y2='22' />
-  </svg>
-)
-
 /**
  * Subtitles inside the picture: the picture-in-picture frame with caption bars in the inset.
  *
@@ -58,7 +41,7 @@ export const SubtitlesInPicture = (props: SVGProps<SVGSVGElement>) => (
  * The pair exists because that control is the one button in the bar whose glyph did not move with its
  * state, so the state was carried by an accent colour and by nothing else. A pair, not a slash: a
  * slashed resting state reads as unavailable, and the subtitles button beside it already draws
- * Feather's slash for its own off state.
+ * Lucide's slash for its own off state.
  */
 export const SubtitlesOutsidePicture = (props: SVGProps<SVGSVGElement>) => (
   <svg {...iconProps} {...props}>

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/settings.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@emotion/react/types/css-prop" />
 import { useState } from 'react'
 import { css } from '@emotion/react'
-import { ChevronLeft, ChevronRight, Settings } from 'react-feather'
+import { ChevronLeft, ChevronRight, Settings } from 'lucide-react'
 
 import { usePlayer } from '../player'
 import { TooltipDisplay } from './tooltip-display'

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/components/sound.tsx

@@ -3,7 +3,7 @@ import type { Ref } from 'react'
 
 import { useMemo } from 'react'
 import { css } from '@emotion/react'
-import { Volume1, Volume2, VolumeX } from 'react-feather'
+import { Volume1, Volume2, VolumeX } from 'lucide-react'
 
 import { usePlayer } from '../player'
 import { TooltipDisplay } from './tooltip-display'

package/src/lib/react/components/subtitles.tsx

@@ -1,9 +1,9 @@
 /// <reference types="@emotion/react/types/css-prop" />
 import { css } from '@emotion/react'
+import { Captions, CaptionsOff } from 'lucide-react'
 
 import { usePlayer } from '../player'
 import { TooltipDisplay } from './tooltip-display'
-import { Captions, CaptionsOff } from './icons'
 import { TrackMenu, popoverStyle, useTrackMenu } from './track-menu'
 
 const style = css`

package/src/lib/react/components/track-menu.tsx

@@ -3,7 +3,7 @@ import type { TrackChoice } from '../source-feature'
 
 import { useEffect, useRef, useState } from 'react'
 import { css } from '@emotion/react'
-import { ChevronLeft } from 'react-feather'
+import { ChevronLeft } from 'lucide-react'
 
 import { fonts } from '../../utils/fonts'
 

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
 }