@banou/media-player 0.10.8 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.8",
+  "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/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/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'