@linktr.ee/messaging-react 1.27.0 → 1.28.0-rc-1776231821

package/src/components/LockedAttachment/components/MediaPlayer.tsx

@@ -1,10 +1,5 @@
-import {
-  CircleNotchIcon,
-  PauseIcon,
-  PlayIcon,
-} from '@phosphor-icons/react'
+import { CircleNotchIcon, PauseIcon, PlayIcon } from '@phosphor-icons/react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import ReactPlayer from 'react-player'
 
 import { isDevBuild } from '../../../utils/isDevBuild'
 import { renderTypeIcon } from '../utils/icons'
@@ -27,6 +22,8 @@ export interface MediaPlayerProps {
   mimeType: string
   poster?: string
   autoPlay?: boolean
+  /** Controlled playing state. When provided, syncs to internal play/pause. */
+  playing?: boolean
   loop?: boolean
   controls?: boolean
   showProgress?: boolean
@@ -40,6 +37,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   mimeType,
   poster,
   autoPlay = false,
+  playing: playingProp,
   loop = false,
   controls = true,
   showProgress = false,
@@ -48,6 +46,18 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
 }) => {
   const sourceType = getSourceType(mimeType)
   const [playing, setPlaying] = useState(autoPlay)
+
+  // Sync controlled playing prop to internal state
+  const prevPlayingPropRef = useRef(playingProp)
+  useEffect(() => {
+    if (
+      playingProp !== undefined &&
+      playingProp !== prevPlayingPropRef.current
+    ) {
+      prevPlayingPropRef.current = playingProp
+      setPlaying(playingProp)
+    }
+  }, [playingProp])
   const [played, setPlayed] = useState(0)
   const [seeking, setSeeking] = useState(false)
   const [scrubberHovered, setScrubberHovered] = useState(false)
@@ -55,7 +65,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   const [buffering, setBuffering] = useState(false)
   /** Set when autoplay/play() was rejected so user can start via gesture (no controls UI). */
   const [manualPlayRequired, setManualPlayRequired] = useState(false)
-  const playerRef = useRef<HTMLVideoElement>(null)
+  const playerRef = useRef<HTMLMediaElement>(null)
   const trackRef = useRef<HTMLDivElement>(null)
   const rafRef = useRef<number | null>(null)
 
@@ -123,7 +133,9 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
     if (el && el.duration) el.currentTime = fraction * el.duration
   }, [])
 
-  const handleTrackPointerDown = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
+  const handleTrackPointerDown = (
+    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
+  ) => {
     e.stopPropagation()
     setSeeking(true)
     const fraction = getFraction(e)
@@ -151,7 +163,9 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   }, [seeking, getFraction, seekTo])
 
   // Use natural aspect ratio once metadata loads, fall back to 16:9 before then.
-  const aspectStyle = videoAspect ? { aspectRatio: String(videoAspect) } : undefined
+  const aspectStyle = videoAspect
+    ? { aspectRatio: String(videoAspect) }
+    : undefined
   const aspectClass = !videoAspect ? ' aspect-video' : ''
   const scrubberPercent = Math.round(played * 100)
 
@@ -163,7 +177,10 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       style={aspectStyle}
       onClick={() => {
         if (manualPlayRequired) return
-        if (onContainerClick) { onContainerClick(); return }
+        if (onContainerClick) {
+          onContainerClick()
+          return
+        }
         if (controls) setPlaying((p) => !p)
       }}
       onKeyDown={(e) => {
@@ -178,45 +195,78 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       }}
     >
       {poster && (
-        <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
+        <img
+          src={poster}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover"
+        />
       )}
       {!poster && (
         <div className="absolute inset-0 flex items-center justify-center">
-          {renderTypeIcon(mimeType, { className: 'size-12 text-black/20', weight: 'regular' })}
+          {renderTypeIcon(mimeType, {
+            className: 'size-12 text-black/20',
+            weight: 'regular',
+          })}
         </div>
       )}
       <div className="absolute inset-0">
-        <ReactPlayer
-          ref={playerRef}
-          src={source}
-          poster={poster}
-          loop={loop}
-          muted={muted}
-          playsInline
-          width="100%"
-          height="100%"
-          onLoadStart={() => setBuffering(true)}
-          onCanPlay={() => setBuffering(false)}
-          onWaiting={() => setBuffering(true)}
-          onPlay={() => setManualPlayRequired(false)}
-          onLoadedMetadata={() => {
-            const el = playerRef.current
-            if (el && el.videoWidth && el.videoHeight) {
-              setVideoAspect(el.videoWidth / el.videoHeight)
-            }
-          }}
-          onEnded={() => {
-            if (!loop) {
-              setPlaying(false)
-              setPlayed(0)
-            }
-          }}
-        />
+        {sourceType === 'audio' ? (
+          <audio
+            ref={playerRef as React.RefObject<HTMLAudioElement>}
+            src={source}
+            loop={loop}
+            muted={muted}
+            style={{ width: '100%', height: '100%' }}
+            onLoadStart={() => setBuffering(true)}
+            onCanPlay={() => setBuffering(false)}
+            onWaiting={() => setBuffering(true)}
+            onPlay={() => setManualPlayRequired(false)}
+            onEnded={() => {
+              if (!loop) {
+                setPlaying(false)
+                setPlayed(0)
+              }
+            }}
+          >
+            <track kind="captions" />
+          </audio>
+        ) : (
+          <video
+            ref={playerRef as React.RefObject<HTMLVideoElement>}
+            src={source}
+            poster={poster}
+            loop={loop}
+            muted={muted}
+            playsInline
+            style={{ width: '100%', height: '100%' }}
+            onLoadStart={() => setBuffering(true)}
+            onCanPlay={() => setBuffering(false)}
+            onWaiting={() => setBuffering(true)}
+            onPlay={() => setManualPlayRequired(false)}
+            onLoadedMetadata={() => {
+              const el = playerRef.current
+              if (el instanceof HTMLVideoElement && el.videoWidth && el.videoHeight) {
+                setVideoAspect(el.videoWidth / el.videoHeight)
+              }
+            }}
+            onEnded={() => {
+              if (!loop) {
+                setPlaying(false)
+                setPlayed(0)
+              }
+            }}
+          >
+            <track kind="captions" />
+          </video>
+        )}
       </div>
 
       {buffering && !manualPlayRequired && (
         <div className="absolute inset-0 z-10 flex items-center justify-center">
-          <CircleNotchIcon className="size-8 animate-spin text-white/80" weight="bold" />
+          <CircleNotchIcon
+            className="size-8 animate-spin text-white/80"
+            weight="bold"
+          />
         </div>
       )}
 
@@ -244,54 +294,86 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       )}
 
       {showProgress && !controls && (
-        <div className="absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent pointer-events-none">
-          <div className="h-1 w-full overflow-hidden rounded-full bg-white/30">
-            <div className="h-full rounded-full bg-white" style={{ width: `${scrubberPercent}%` }} />
+        <div className="absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent">
+          <div
+            role="slider"
+            aria-label="Playback position"
+            aria-valuenow={scrubberPercent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            tabIndex={0}
+            ref={trackRef}
+            className="relative flex h-4 w-full cursor-pointer items-center"
+            onMouseDown={handleTrackPointerDown}
+            onTouchStart={handleTrackPointerDown}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))
+              if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))
+            }}
+          >
+            <div className="w-full overflow-hidden rounded-full bg-white/30 h-1">
+              <div
+                className="h-full rounded-full bg-white"
+                style={{ width: `${scrubberPercent}%` }}
+              />
+            </div>
           </div>
         </div>
       )}
 
-      {controls && <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200">
-        <button
-          type="button"
-          onClick={(e) => { e.stopPropagation(); setPlaying((p) => !p) }}
-          className="shrink-0 text-white"
-          aria-label={playing ? 'Pause' : 'Play'}
-        >
-          {playing
-            ? <PauseIcon className="size-5" weight="fill" />
-            : <PlayIcon className="size-5 translate-x-px" weight="fill" />
-          }
-        </button>
+      {controls && (
+        <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              setPlaying((p) => !p)
+            }}
+            className="shrink-0 text-white"
+            aria-label={playing ? 'Pause' : 'Play'}
+          >
+            {playing ? (
+              <PauseIcon className="size-5" weight="fill" />
+            ) : (
+              <PlayIcon className="size-5 translate-x-px" weight="fill" />
+            )}
+          </button>
 
-        <div
-          role="slider"
-          aria-label="Playback position"
-          aria-valuenow={scrubberPercent}
-          aria-valuemin={0}
-          aria-valuemax={100}
-          tabIndex={0}
-          ref={trackRef}
-          className="relative flex h-4 w-full cursor-pointer items-center"
-          onMouseDown={handleTrackPointerDown}
-          onTouchStart={handleTrackPointerDown}
-          onClick={(e) => e.stopPropagation()}
-          onMouseEnter={() => setScrubberHovered(true)}
-          onMouseLeave={() => setScrubberHovered(false)}
-          onKeyDown={(e) => {
-            if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))
-            if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))
-          }}
-        >
-          <div className={`w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${scrubberHovered || seeking ? 'h-1.5' : 'h-1'}`}>
-            <div className="h-full rounded-full bg-white" style={{ width: `${scrubberPercent}%` }} />
-          </div>
           <div
-            className={`absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${scrubberHovered || seeking ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
-            style={{ left: `${scrubberPercent}%` }}
-          />
+            role="slider"
+            aria-label="Playback position"
+            aria-valuenow={scrubberPercent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            tabIndex={0}
+            ref={trackRef}
+            className="relative flex h-4 w-full cursor-pointer items-center"
+            onMouseDown={handleTrackPointerDown}
+            onTouchStart={handleTrackPointerDown}
+            onClick={(e) => e.stopPropagation()}
+            onMouseEnter={() => setScrubberHovered(true)}
+            onMouseLeave={() => setScrubberHovered(false)}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))
+              if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))
+            }}
+          >
+            <div
+              className={`w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${scrubberHovered || seeking ? 'h-1.5' : 'h-1'}`}
+            >
+              <div
+                className="h-full rounded-full bg-white"
+                style={{ width: `${scrubberPercent}%` }}
+              />
+            </div>
+            <div
+              className={`absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${scrubberHovered || seeking ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
+              style={{ left: `${scrubberPercent}%` }}
+            />
+          </div>
         </div>
-      </div>}
+      )}
     </div>
   )
 }