Revert "Replace react-player with native HTML5 video element"

README.md

@@ -10,39 +10,3 @@ pinned: false
 
 # Streamer
 A synced video/music room app based on Web-SyncPlay.
-
-## Video Player
-
-This app uses a native HTML5 `<video>` element for video playback with the following features:
-
-### Supported Features
-- **Native Browser Controls**: Play/pause, seek, volume, fullscreen
-- **Picture-in-Picture (PiP)**: Native browser PiP support where available
-- **HLS Streaming**: Automatic HLS support using hls.js for browsers without native support
-- **Synchronized Playback**: Real-time sync across multiple clients in the same room
-- **Error Handling**: Graceful fallback using yt-dlp for unsupported formats
-
-### Supported Video Formats
-- Direct video URLs (mp4, webm, ogg, etc.)
-- HLS streams (.m3u8)
-- Any format playable in modern browsers
-
-### Note on YouTube Videos
-For YouTube videos, the app uses a fallback API (yt-dlp) to extract direct video URLs since YouTube's iframe player cannot be used with native HTML5 `<video>` elements.
-
-## Development
-
-```bash
-npm install
-npm run dev
-```
-
-Build for production:
-```bash
-npm run build
-```
-
-Lint code:
-```bash
-npm run lint
-```

components/player/Html5PlayerWrapper.tsx

@@ -1,119 +0,0 @@
-"use client"
-import React, { forwardRef, useImperativeHandle, useRef, useState } from "react"
-import Html5VideoPlayer from "./Html5VideoPlayer"
-
-export interface Html5PlayerWrapperHandle {
-  seekTo: (seconds: number, type?: string) => void
-  getCurrentTime: () => number
-  getInternalPlayer: () => HTMLVideoElement | null
-}
-
-interface Html5PlayerWrapperProps {
-  url: string
-  playing?: boolean
-  volume?: number
-  muted?: boolean
-  playbackRate?: number
-  loop?: boolean
-  pip?: boolean
-  controls?: boolean
-  width?: string | number
-  height?: string | number
-  style?: React.CSSProperties
-  config?: any
-  onReady?: () => void
-  onPlay?: () => void
-  onPause?: () => void
-  onEnded?: () => void
-  onError?: (error: any) => void
-  onProgress?: (state: { playedSeconds: number }) => void
-  onDuration?: (duration: number) => void
-  onBuffer?: () => void
-  onBufferEnd?: () => void
-}
-
-const Html5PlayerWrapper = forwardRef<Html5PlayerWrapperHandle, Html5PlayerWrapperProps>(
-  (props, ref) => {
-    const {
-      url,
-      playing = false,
-      volume = 1,
-      muted = false,
-      playbackRate = 1,
-      loop = false,
-      pip = false,
-      width = "100%",
-      height = "100%",
-      style = {},
-      onReady = () => {},
-      onPlay = () => {},
-      onPause = () => {},
-      onEnded = () => {},
-      onError = () => {},
-      onProgress = () => {},
-      onDuration = () => {},
-      onBuffer = () => {},
-      onBufferEnd = () => {},
-    } = props
-
-    const internalVideoRef = useRef<HTMLVideoElement | null>(null)
-    const [seekToValue, setSeekToValue] = useState<number | undefined>(undefined)
-
-    useImperativeHandle(ref, () => ({
-      seekTo: (seconds: number) => {
-        setSeekToValue(seconds)
-        // Reset after a frame to allow re-seeking to the same position
-        setTimeout(() => setSeekToValue(undefined), 0)
-      },
-      getCurrentTime: () => {
-        return internalVideoRef.current?.currentTime || 0
-      },
-      getInternalPlayer: () => {
-        return internalVideoRef.current
-      },
-    }))
-
-    const containerStyle: React.CSSProperties = {
-      width: typeof width === 'number' ? `${width}px` : width,
-      height: typeof height === 'number' ? `${height}px` : height,
-      ...style,
-    }
-
-    const videoStyle: React.CSSProperties = {
-      width: '100%',
-      height: '100%',
-      objectFit: 'contain',
-      backgroundColor: '#000',
-    }
-
-    return (
-      <div style={containerStyle} className="html5-player-wrapper">
-        <Html5VideoPlayer
-          url={url}
-          playing={playing}
-          volume={volume}
-          muted={muted}
-          playbackRate={playbackRate}
-          loop={loop}
-          pip={pip}
-          seekTo={seekToValue}
-          style={videoStyle}
-          videoRef={internalVideoRef}
-          onReady={onReady}
-          onPlay={onPlay}
-          onPause={onPause}
-          onEnded={onEnded}
-          onError={onError}
-          onProgress={onProgress}
-          onDuration={onDuration}
-          onBuffer={onBuffer}
-          onBufferEnd={onBufferEnd}
-        />
-      </div>
-    )
-  }
-)
-
-Html5PlayerWrapper.displayName = "Html5PlayerWrapper"
-
-export default Html5PlayerWrapper

components/player/Html5VideoPlayer.tsx

@@ -1,302 +0,0 @@
-"use client"
-import React, { FC, useEffect, useRef, useState, useCallback } from "react"
-import Hls from "hls.js"
-
-interface Html5VideoPlayerProps {
-  url: string
-  playing: boolean
-  volume: number
-  muted: boolean
-  playbackRate: number
-  loop: boolean
-  onReady: () => void
-  onPlay: () => void
-  onPause: () => void
-  onEnded: () => void
-  onError: (error: any) => void
-  onProgress: (state: { playedSeconds: number }) => void
-  onDuration: (duration: number) => void
-  onBuffer: () => void
-  onBufferEnd: () => void
-  seekTo?: number
-  pip?: boolean
-  style?: React.CSSProperties
-  className?: string
-  videoRef?: React.RefObject<HTMLVideoElement>
-}
-
-const Html5VideoPlayer: FC<Html5VideoPlayerProps> = ({
-  url,
-  playing,
-  volume,
-  muted,
-  playbackRate,
-  loop,
-  onReady,
-  onPlay,
-  onPause,
-  onEnded,
-  onError,
-  onProgress,
-  onDuration,
-  onBuffer,
-  onBufferEnd,
-  seekTo,
-  pip = false,
-  style,
-  className,
-  videoRef: externalVideoRef,
-}) => {
-  const internalVideoRef = useRef<HTMLVideoElement>(null)
-  const videoRef = externalVideoRef || internalVideoRef
-  const [isReady, setIsReady] = useState(false)
-  const [currentUrl, setCurrentUrl] = useState(url)
-  const progressIntervalRef = useRef<NodeJS.Timeout | null>(null)
-  const seekingRef = useRef(false)
-  const lastSeekToRef = useRef<number | undefined>(undefined)
-  const hlsRef = useRef<Hls | null>(null)
-
-  // Handle PiP state
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video || !document.pictureInPictureEnabled) return
-
-    const handlePiP = async () => {
-      try {
-        if (pip && document.pictureInPictureElement !== video) {
-          await video.requestPictureInPicture()
-        } else if (!pip && document.pictureInPictureElement === video) {
-          await document.exitPictureInPicture()
-        }
-      } catch (error) {
-        console.error("PiP error:", error)
-      }
-    }
-
-    handlePiP()
-  }, [pip])
-
-  // Handle URL changes
-  useEffect(() => {
-    if (url !== currentUrl) {
-      setIsReady(false)
-      setCurrentUrl(url)
-      
-      // Clean up HLS instance if it exists
-      if (hlsRef.current) {
-        hlsRef.current.destroy()
-        hlsRef.current = null
-      }
-
-      const video = videoRef.current
-      if (!video) return
-
-      // Check if URL is HLS - look for .m3u8 extension or m3u8 in query params
-      const isHLS = /\.m3u8($|\?)/i.test(url) || /[?&]format=m3u8/i.test(url)
-      
-      if (isHLS) {
-        // Try native HLS support first (Safari)
-        if (video.canPlayType('application/vnd.apple.mpegurl')) {
-          video.src = url
-        } else if (Hls.isSupported()) {
-          // Use hls.js for browsers that don't support native HLS
-          const hls = new Hls()
-          hls.loadSource(url)
-          hls.attachMedia(video)
-          hls.on(Hls.Events.MANIFEST_PARSED, () => {
-            console.log("HLS manifest parsed")
-          })
-          hls.on(Hls.Events.ERROR, (_event: any, data: any) => {
-            console.error("HLS error:", data)
-            if (data.fatal) {
-              onError(new Error(`HLS Error: ${data.type}`))
-            }
-          })
-          hlsRef.current = hls
-        } else {
-          // Fallback to direct source
-          video.src = url
-        }
-      } else {
-        video.src = url
-      }
-    }
-  }, [url, currentUrl, onError])
-
-  // Handle play/pause
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video || !isReady) return
-
-    if (playing) {
-      const playPromise = video.play()
-      if (playPromise !== undefined) {
-        playPromise.catch((error) => {
-          console.warn("Play interrupted:", error)
-        })
-      }
-    } else {
-      video.pause()
-    }
-  }, [playing, isReady])
-
-  // Handle volume
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
-    video.volume = volume
-  }, [volume])
-
-  // Handle muted
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
-    video.muted = muted
-  }, [muted])
-
-  // Handle playback rate
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
-    video.playbackRate = playbackRate
-  }, [playbackRate])
-
-  // Handle loop
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
-    video.loop = loop
-  }, [loop])
-
-  // Handle seeking
-  useEffect(() => {
-    if (seekTo !== undefined && seekTo !== lastSeekToRef.current) {
-      const video = videoRef.current
-      if (video && !seekingRef.current) {
-        lastSeekToRef.current = seekTo
-        video.currentTime = seekTo
-      }
-    }
-  }, [seekTo])
-
-  // Progress reporting
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video || !isReady) return
-
-    const reportProgress = () => {
-      if (!seekingRef.current) {
-        onProgress({ playedSeconds: video.currentTime })
-      }
-    }
-
-    // Report progress every 250ms when playing
-    if (playing) {
-      progressIntervalRef.current = setInterval(reportProgress, 250)
-    } else {
-      if (progressIntervalRef.current) {
-        clearInterval(progressIntervalRef.current)
-        progressIntervalRef.current = null
-      }
-    }
-
-    return () => {
-      if (progressIntervalRef.current) {
-        clearInterval(progressIntervalRef.current)
-        progressIntervalRef.current = null
-      }
-    }
-  }, [isReady, playing, onProgress])
-
-  // Video element event handlers
-  const handleLoadedMetadata = useCallback(() => {
-    const video = videoRef.current
-    if (video) {
-      onDuration(video.duration)
-    }
-  }, [onDuration])
-
-  const handleCanPlay = useCallback(() => {
-    if (!isReady) {
-      setIsReady(true)
-      onReady()
-    }
-    onBufferEnd()
-  }, [isReady, onReady, onBufferEnd])
-
-  const handlePlay = useCallback(() => {
-    onPlay()
-  }, [onPlay])
-
-  const handlePause = useCallback(() => {
-    onPause()
-  }, [onPause])
-
-  const handleEnded = useCallback(() => {
-    onEnded()
-  }, [onEnded])
-
-  const handleError = useCallback((e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
-    const video = e.currentTarget
-    const error = video.error
-    console.error("Video error:", error)
-    onError(error || new Error("Unknown video error"))
-  }, [onError])
-
-  const handleWaiting = useCallback(() => {
-    onBuffer()
-  }, [onBuffer])
-
-  const handleSeeking = useCallback(() => {
-    seekingRef.current = true
-  }, [])
-
-  const handleSeeked = useCallback(() => {
-    seekingRef.current = false
-    const video = videoRef.current
-    if (video) {
-      onProgress({ playedSeconds: video.currentTime })
-    }
-  }, [onProgress])
-
-  const handleStalled = useCallback(() => {
-    console.warn("Video stalled")
-    onBuffer()
-  }, [onBuffer])
-
-  // Cleanup
-  useEffect(() => {
-    return () => {
-      if (hlsRef.current) {
-        hlsRef.current.destroy()
-        hlsRef.current = null
-      }
-      if (progressIntervalRef.current) {
-        clearInterval(progressIntervalRef.current)
-        progressIntervalRef.current = null
-      }
-    }
-  }, [])
-
-  return (
-    <video
-      ref={videoRef}
-      style={style}
-      className={className}
-      playsInline
-      crossOrigin="anonymous"
-      onLoadedMetadata={handleLoadedMetadata}
-      onCanPlay={handleCanPlay}
-      onPlay={handlePlay}
-      onPause={handlePause}
-      onEnded={handleEnded}
-      onError={handleError}
-      onWaiting={handleWaiting}
-      onSeeking={handleSeeking}
-      onSeeked={handleSeeked}
-      onStalled={handleStalled}
-    />
-  )
-}
-
-export default Html5VideoPlayer

components/player/Player.tsx

@@ -12,7 +12,7 @@ import {
   FullScreenProps,
   useFullScreenHandle,
 } from "react-full-screen"
-import Html5PlayerWrapper, { Html5PlayerWrapperHandle } from "./Html5PlayerWrapper"
+import ReactPlayer from "react-player"
 import {
   MediaElement,
   MediaOption,
@@ -133,7 +133,7 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
   const [pipEnabled, setPipEnabled] = useState(false)
   const [musicMode, setMusicMode] = useState(false)
   const fullscreenHandle = useFullScreenHandle()
-  const player = useRef<Html5PlayerWrapperHandle>(null)
+  const player = useRef<ReactPlayer>(null)
 
   useEffect(() => {
     if (!muted && !unmuted) {
@@ -264,7 +264,7 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
           </div>
         </div>
       )}
-      <Html5PlayerWrapper
+      <ReactPlayer
         style={{
           maxHeight: fullscreen || fullHeight ? "100vh" : "calc(100vh - 210px)",
           visibility: musicMode ? "hidden" : "visible",
@@ -273,6 +273,20 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         ref={player}
         width={"100%"}
         height={fullscreen || fullHeight ? "100vh" : "calc((9 / 16) * 100vw)"}
+        config={{
+          youtube: {
+            playerVars: {
+              disablekb: 1,
+              modestbranding: 1,
+              origin: window.location.host,
+            },
+          },
+          file: {
+            hlsVersion: "1.1.3",
+            dashVersion: "4.2.1",
+            flvVersion: "1.6.2",
+          },
+        }}
         url={currentSrc.src}
         pip={pipEnabled}
         playing={!paused}
@@ -282,17 +296,35 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         volume={volume}
         muted={muted}
         onReady={() => {
-          console.log("HTML5 Video Player is ready")
+          console.log("React-Player is ready")
           setReady(true)
           setBuffering(false)
+          // need "long" timeout for yt to be ready
+          setTimeout(() => {
+            const internalPlayer = player.current?.getInternalPlayer()
+            console.log("Internal player:", player)
+            if (
+              typeof internalPlayer !== "undefined" &&
+              internalPlayer.unloadModule
+            ) {
+              console.log("Unloading cc of youtube player")
+              internalPlayer.unloadModule("cc") // Works for AS3 ignored by html5
+              internalPlayer.unloadModule("captions") // Works for html5 ignored by AS3
+            }
+          }, 1000)
         }}
         onPlay={() => {
           console.log("player started to play")
           if (paused) {
             const internalPlayer = player.current?.getInternalPlayer()
             console.warn("Started to play despite being paused", internalPlayer)
-            if (internalPlayer) {
-              internalPlayer.pause()
+            if (typeof internalPlayer !== "undefined") {
+              if ("pause" in internalPlayer) {
+                internalPlayer.pause()
+              }
+              if ("pauseVideo" in internalPlayer) {
+                internalPlayer.pauseVideo()
+              }
             }
           }
         }}
@@ -304,8 +336,13 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
               "Started to pause despite being not paused",
               internalPlayer
             )
-            if (internalPlayer) {
-              internalPlayer.play()
+            if (typeof internalPlayer !== "undefined") {
+              if ("play" in internalPlayer) {
+                internalPlayer.play()
+              }
+              if ("playVideo" in internalPlayer) {
+                internalPlayer.playVideo()
+              }
             }
           }
         }}
@@ -314,72 +351,42 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         onEnded={() => socket?.emit("playEnded")}
         onError={(e) => {
           console.error("playback error", e)
-          // For HTML5 video, we get MediaError objects or Error instances
-          const isMediaError = (error: any): error is MediaError => {
-            return error && typeof error === 'object' && 
-                   'code' in error && 
-                   typeof error.code === 'number' &&
-                   error.code >= MediaError.MEDIA_ERR_ABORTED && 
-                   error.code <= MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
-          }
-          
-          if (isMediaError(e)) {
-            const mediaError = e
-            let errorMessage = "Video playback error"
-            switch (mediaError.code) {
-              case MediaError.MEDIA_ERR_ABORTED:
-                errorMessage = "Video playback aborted"
-                break
-              case MediaError.MEDIA_ERR_NETWORK:
-                errorMessage = "Network error while loading video"
-                break
-              case MediaError.MEDIA_ERR_DECODE:
-                errorMessage = "Video decoding error"
-                break
-              case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
-                errorMessage = "Video format not supported"
-                break
-            }
-            console.error(errorMessage, mediaError)
-            
-            // Try to get video url via yt-dlp for unsupported sources
-            if (mediaError.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
-              console.log("Trying to get video url via yt-dlp...")
-              fetch("/api/source", { method: "POST", body: currentSrc.src })
-                .then((res) => {
-                  if (res.status === 200) {
-                    return res.json()
-                  }
-                  return res.text()
-                })
-                .then((data) => {
-                  console.log("Received data", data)
-                  if (typeof data === "string") {
-                    throw new Error(data)
-                  }
-                  if (data.error) {
-                    throw new Error(data.stderr)
-                  }
+          if ("target" in e && "type" in e && e.type === "error") {
+            console.log("Trying to get video url via yt-dlp...")
+            fetch("/api/source", { method: "POST", body: currentSrc.src })
+              .then((res) => {
+                if (res.status === 200) {
+                  return res.json()
+                }
+                return res.text()
+              })
+              .then((data) => {
+                console.log("Received data", data)
+                if (typeof data === "string") {
+                  throw new Error(data)
+                }
+                if (data.error) {
+                  throw new Error(data.stderr)
+                }
 
-                  const videoSrc: string[] = data.stdout
-                    .split("\n")
-                    .filter((v: string) => v !== "")
-                  setCurrentSrc({
-                    src: videoSrc[0],
-                    resolution: "",
-                  })
+                const videoSrc: string[] = data.stdout
+                  .split("\n")
+                  .filter((v: string) => v !== "")
+                setCurrentSrc({
+                  src: videoSrc[0],
+                  resolution: "",
                 })
-                .catch((error) => {
-                  console.error("Failed to get video url", error)
-                })
-            }
+              })
+              .catch((error) => {
+                console.error("Failed to get video url", error)
+              })
+            setError(e)
           }
-          setError(e)
         }}
         onProgress={({ playedSeconds }) => {
           if (!ready) {
             console.warn(
-              "HTML5 Video Player did not report it being ready, but already playing"
+              "React-Player did not report it being ready, but already playing"
             )
             // sometimes onReady doesn't fire, but if there's playback...
             setReady(true)

package-lock.json

@@ -5,7 +5,6 @@
   "packages": {
     "": {
       "dependencies": {
-        "hls.js": "^1.6.15",
         "next": "14.2.10",
         "react": "^18.2.0",
         "react-beautiful-dnd": "^13.1.1",
@@ -3403,12 +3402,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hls.js": {
-      "version": "1.6.15",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
-      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
-      "license": "Apache-2.0"
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",

package.json

@@ -7,7 +7,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "hls.js": "^1.6.15",
     "next": "14.2.10",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
@@ -38,4 +37,4 @@
     "ts-node": "^10.9.2",
     "typescript": "5.3.3"
   }
-}
+}

yarn.lock

@@ -1620,11 +1620,6 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
-hls.js@^1.6.15:
-  version "1.6.15"
-  resolved "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz"
-  integrity sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==
-
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"