[front] Use original video controller in edit content

close #30
Kogepan229 · Mar 2, 2024 · 9151549 · 9151549
1 parent 76a6420
commit 9151549
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 26 deletions.
diff --git a/next_app/src/components/VideoPlayer/VideoPlayer.tsx b/next_app/src/components/VideoPlayer/VideoPlayer.tsx
@@ -1,31 +1,18 @@
 'use client'
 import 'client-only'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { browserName, detectOS, Browser } from 'detect-browser'
-import Hls from 'hls.js'
+import { DetailedHTMLProps, RefObject, VideoHTMLAttributes, useRef } from 'react'
+import { browserName } from 'detect-browser'
 import css from './VideoPlayer.module.scss'
 import VideoControl from './VideoControl'
 
-type Props = {
-  src: string
+type Props = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {
+  videoRef: RefObject<HTMLVideoElement>
 }
 
 const VideoPlayer = (props: Props) => {
   const videoContainerRef = useRef<HTMLDivElement>(null)
-  const videoRef = useRef<HTMLVideoElement>(null)
 
-  useEffect(() => {
-    var hls = new Hls({ enableWorker: false })
-    hls.attachMedia(videoRef.current!)
-    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-      hls.loadSource(props.src)
-    })
-
-    return () => {
-      hls.removeAllListeners()
-      hls.stopLoad()
-    }
-  }, [])
+  const { ['videoRef']: {} = {}, ...p2 } = props
 
   return (
     <div className={css.video_container} ref={videoContainerRef}>
@@ -34,12 +21,12 @@ const VideoPlayer = (props: Props) => {
           if (typeof window !== 'undefined' && browserName(window.navigator.userAgent) !== 'ios') {
             return (
               <>
-                <video className={css.video} ref={videoRef}></video>
-                <VideoControl videoRef={videoRef} videoContainerRef={videoContainerRef}></VideoControl>
+                <video {...p2} className={css.video} ref={props.videoRef} controls={false}></video>
+                <VideoControl videoRef={props.videoRef} videoContainerRef={videoContainerRef}></VideoControl>
               </>
             )
           } else {
-            return <video className={css.video} src={props.src} poster={props.src.replace('m3u8', 'webp')} controls playsInline></video>
+            return <video {...p2} className={css.video} ref={props.videoRef} controls playsInline></video>
           }
         })()}
       </div>

diff --git a/next_app/src/components/VideoPlayer/VideoPlayerHls.tsx b/next_app/src/components/VideoPlayer/VideoPlayerHls.tsx
@@ -0,0 +1,50 @@
+'use client'
+import 'client-only'
+import { useEffect, useRef } from 'react'
+import { browserName } from 'detect-browser'
+import Hls from 'hls.js'
+import css from './VideoPlayer.module.scss'
+import VideoControl from './VideoControl'
+
+type Props = {
+  src: string
+}
+
+const VideoPlayer = (props: Props) => {
+  const videoContainerRef = useRef<HTMLDivElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    var hls = new Hls({ enableWorker: false })
+    hls.attachMedia(videoRef.current!)
+    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      hls.loadSource(props.src)
+    })
+
+    return () => {
+      hls.removeAllListeners()
+      hls.stopLoad()
+    }
+  }, [])
+
+  return (
+    <div className={css.video_container} ref={videoContainerRef}>
+      <div className={css.video_wrapper}>
+        {(() => {
+          if (typeof window !== 'undefined' && browserName(window.navigator.userAgent) !== 'ios') {
+            return (
+              <>
+                <video className={css.video} ref={videoRef}></video>
+                <VideoControl videoRef={videoRef} videoContainerRef={videoContainerRef}></VideoControl>
+              </>
+            )
+          } else {
+            return <video className={css.video} src={props.src} poster={props.src.replace('m3u8', 'webp')} controls playsInline></video>
+          }
+        })()}
+      </div>
+    </div>
+  )
+}
+
+export default VideoPlayer
diff --git a/next_app/src/features/room_video/components/pages/content.tsx b/next_app/src/features/room_video/components/pages/content.tsx
@@ -8,7 +8,7 @@ import css from './content.module.scss'
 import reactStringReplace from 'react-string-replace'
 import SimpleButton from 'components/SimpleButton'
 
-const VideoPlayer = dynamic(() => import('components/VideoPlayer/VideoPlayer'), { ssr: false, suspense: true })
+const VideoPlayerHls = dynamic(() => import('components/VideoPlayer/VideoPlayerHls'), { ssr: false, suspense: true })
 
 type ContentData = {
   id?: string
@@ -49,7 +49,7 @@ const ContentPage = async ({ roomName, roomId, contentId }: { roomName: string;
       <div className={css.content_container}>
         <div className={css.video_container}>
           <Suspense fallback={null}>
-            <VideoPlayer
+            <VideoPlayerHls
               src={process.env.NEXT_PUBLIC_FILESERVER_URL + '/video/contents/' + contentData.id + '/' + contentData.id + '.m3u8'}
             />
           </Suspense>

diff --git a/next_app/src/features/rooms/components/editForm/EditVideo.tsx b/next_app/src/features/rooms/components/editForm/EditVideo.tsx
@@ -1,7 +1,10 @@
 'use client'
+import dynamic from 'next/dynamic'
 import css from './EditContentForm.module.scss'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 
+const VideoPlayer = dynamic(() => import('components/VideoPlayer/VideoPlayer'), { ssr: false, suspense: true })
+
 const EditVideo = ({
   videoRef,
   videoSrc,
@@ -58,18 +61,18 @@ const EditVideo = ({
         </div>
       </div>
       <div className={css.video_div}>
-        <video
+        <VideoPlayer
           src={_videoSrc}
           controls
-          ref={videoRef}
+          videoRef={videoRef}
           onPause={onStopVideo}
           onSeeked={onStopVideo}
           onPlay={onPlayingVideo}
           onSeeking={onPlayingVideo}
           onDragOver={e => e.preventDefault()}
           onDrop={handleDrop}
           crossOrigin="anonymous"
-        ></video>
+        />
       </div>
     </div>
   )