Remove url resolving from video player

WRadoslaw · Feb 28, 2024 · 7131db5 · 7131db5
1 parent 74a92f1
commit 7131db5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx b/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx
@@ -12,7 +12,6 @@ import {
   useState,
 } from 'react'
 import useResizeObserver from 'use-resize-observer'
-import { VideoJsPlayer } from 'video.js'
 
 import { useFullVideo } from '@/api/hooks/video'
 import { FullVideoFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
@@ -69,7 +68,7 @@ import {
 } from './VideoPlayer.styles'
 import { VideoShare } from './VideoShare'
 import { CustomVideojsEvents, PlayerState, VOLUME_STEP, hotkeysHandler, isFullScreenEnabled } from './utils'
-import { VideoJsConfig, useVideoJsPlayer } from './videoJsPlayer'
+import { VideoJsConfig, VideoJsPlayer, useVideoJsPlayer } from './videoJsPlayer'
 
 export type VideoPlayerProps = {
   channelAvatarUrls?: string[] | null
@@ -781,6 +780,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
           }
         }}
       >
+        <video style={videoStyle} ref={playerRef} className="video-js" onClick={onVideoClick} />
         {needsManualPlay && (
           <BigPlayButtonContainer
             onClick={() => {
@@ -792,7 +792,6 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
             </BigPlayButton>
           </BigPlayButtonContainer>
         )}
-        <video style={videoStyle} ref={playerRef} className="video-js" onClick={onVideoClick} />
         {showPlayerControls && (
           <>
             <ControlsOverlay isSettingsPopoverOpened={isSettingsPopoverOpened} elevated={isFullScreen}>

diff --git a/packages/atlas/src/components/_video/VideoPlayer/videoJsPlayer.ts b/packages/atlas/src/components/_video/VideoPlayer/videoJsPlayer.ts
@@ -1,5 +1,4 @@
 import { RefObject, useEffect, useRef, useState } from 'react'
-import { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
 import videojs from 'video.js/dist/alt/video.core.novtt'
 
 import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
@@ -21,6 +20,7 @@ export type VideoJsConfig = {
   onTimeUpdated?: (time: number) => void
 }
 
+export type VideoJsPlayer = videojs.Player
 type VideoJsPlayerHook = (config: VideoJsConfig) => [VideoJsPlayer | null, RefObject<HTMLVideoElement>]
 export const useVideoJsPlayer: VideoJsPlayerHook = ({
   fill,
@@ -40,13 +40,12 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({
 }) => {
   const playerRef = useRef<HTMLVideoElement | null>(null)
   const [player, setPlayer] = useState<VideoJsPlayer | null>(null)
-  const { url: src } = useGetAssetUrl(videoUrls, 'video')
   const { url: posterUrl } = useGetAssetUrl(posterUrls, 'cover')
   useEffect(() => {
     if (!playerRef.current) {
       return
     }
-    const videoJsOptions: VideoJsPlayerOptions = {
+    const videoJsOptions: videojs.PlayerOptions = {
       controls: true,
       playsinline: true,
       bigPlayButton: false,
@@ -55,7 +54,6 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({
     }
 
     const playerInstance = videojs(playerRef.current as Element, videoJsOptions)
-
     setPlayer(playerInstance)
 
     return () => {
@@ -70,14 +68,17 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({
   }, [])
 
   useEffect(() => {
-    if (!player || !src) {
+    if (!player || !videoUrls) {
       return
     }
-    player.src({
-      src: src,
-      type: 'video/mp4',
-    })
-  }, [player, src])
+
+    player.src(
+      videoUrls.map((url) => ({
+        src: url,
+        type: 'video/mp4',
+      }))
+    )
+  }, [player, videoUrls])
 
   useEffect(() => {
     if (!player || !width) {