自定义ui视频组件部分样式抽离

src/components/videoPro/index.module.scss

@@ -2,3 +2,14 @@
   width:750rpx;
   height:600rpx;
 }
+.control{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+}
+.centerBtnBg{
+  width: 50px;
+  height:50px;
+  background-color: rgba(0,0,0,0.5);
+  box-sizing: border-box;
+}

src/components/videoPro/index.tsx

@@ -14,18 +14,6 @@ type Props = {
 }
 
 const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
-  const globalData = Taro.getApp().globalData
-
-  if(onRef){
-    //用useImperativeHandle暴露一些外部ref能访问的属性
-    useImperativeHandle(onRef, () => {
-      return {
-        func: pause,
-      }
-    })
-  }
-
-  // 视频ui控制需要的响应式数据
   const videoContext = useRef<any>()
   const [isPlay, setIsPlay] = useState(false)
   const [duration,setDuration] = useState(0) // 视频长度 单位秒
@@ -37,6 +25,15 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
   const [isFull,setIsFull] = useState(false)
   const time = useRef<any>()
 
+  const globalData = Taro.getApp().globalData
+  if(onRef){
+    //用useImperativeHandle暴露一些外部ref能访问的属性
+    useImperativeHandle(onRef, () => {
+      return {
+        func: pause,
+      }
+    })
+  }
 
   useEffect(() => {
     console.log('组件加载')
@@ -44,7 +41,16 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
     updateState.current = true
   }, []);
 
+  function play(e){
+    e.stopPropagation();
+    videoContext.current.play()
+    setIsPlay(true)
+  }
 
+  function pause(){
+    setIsPlay(false)
+    videoContext.current.pause()
+  }
 
   function onTouchStart(){
     if(!showMenu) {
@@ -60,7 +66,6 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
     time.current = setTimeout(() => {
       setShowMenu(false)
     },5000)
-
   }
 
   function bindTimeupdateFun(e) {
@@ -126,17 +131,6 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
     }
   }
 
-
-  function play(e){
-    e.stopPropagation();
-    videoContext.current.play()
-    setIsPlay(true)
-  }
-
-  function pause(){
-    setIsPlay(false)
-    videoContext.current.pause()
-  }
   function sliderOnChange(e){
     if (duration) {
       // 视频跳转到指定位置
@@ -166,10 +160,18 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
         onEnded={bindEnded}
         onFullScreenChange={onFullScreenChange}
       >
-        <View onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{width:isFull?`${globalData.screenHeight}px`:'750rpx',height:isFull?'750rpx':'600rpx',display:'flex',flexDirection:'column',boxSizing:'border-box',paddingLeft:isFull?`${globalData.statusBarHeight}px`:'0',paddingRight:isFull?`${globalData.statusBarHeight}px`:'0'}}>
-          <View onClick={pause} className="justify-center align-center flex pt-5" style={{flex:'1',boxSizing:'border-box'}}>
+        <View className="control" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{
+          width:isFull?`${globalData.screenHeight}px`:'750rpx',
+          height:isFull?'750rpx':'600rpx',
+          paddingLeft:isFull?`${globalData.statusBarHeight}px`:'0',
+          paddingRight:isFull?`${globalData.statusBarHeight}px`:'0'
+        }}>
+          <View onClick={pause} className="justify-center align-center flex pt-5" style={{
+            flex:'1',
+            boxSizing:'border-box'
+          }}>
             { !isPlay && showMenu &&
-              <View className="flex justify-center align-center rounded-50 pl-1" style={{width:'50px',height:'50px',backgroundColor:'rgba(0,0,0,0.5)',boxSizing:'border-box'}}>
+              <View className="flex justify-center align-center rounded-50 pl-1 centerBtnBg">
                 <Icon onClick={play} name="play" color="#fff" size="35px"></Icon>
               </View>
             }
@@ -189,8 +191,8 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
                 <Text className="text-white font-26 pr-2">{total_duration}</Text>
                 { showFull &&
                   <>
-                    {isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => {videoContext.current.exitFullScreen()}} src={unfull} />
-                    : <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => {videoContext.current.requestFullScreen({direction:90})}}  />}
+                    {isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => videoContext.current.exitFullScreen()} src={unfull} />
+                    : <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => videoContext.current.requestFullScreen({direction:90})}  />}
                   </>
                 }
               </>