fix: 调整目录结构，支持自定义 hooks，解决拖动进度时控制栏隐藏问题

.travis.yml

@@ -7,7 +7,7 @@ language: node_js
 #   keep-history: true
 
 node_js:
-- 10
+  - 10
 
 cache: yarn
 

docs/TODO

@@ -129,10 +129,11 @@
           ✘ beforeunload @cancelled(19-08-13 15:59)
           ✘ useEffect @cancelled(19-08-13 15:59)
 
-0.7.x:
-  ☐ flv.js/hls.js 按需加载
-  ☐ 进度拖动时 controls 不要自动隐藏
-  ☐ 手机端 controls 不会自动隐藏
+0.8.x:
+  ✔ flv.js/hls.js 按需加载 @done(19-08-27 12:23)
+  ✔ 支持第三方扩展 hooks @done(19-08-27 14:30)
+  ✔ 进度拖动时 controls 不要自动隐藏 @done(19-08-27 14:42)
+  ☐ 手机端 controls 不会自动隐藏问题
   ☐ 手机端 controls 显示时 process 的 handel 强制显示
 
 单元测试:

packages/reactjs-player/__tests__/reactjs-player.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ReactPlayer from '../src/components/ReactPlayer';
+import ReactPlayer from '../src/ReactPlayer';
 
 jest.setTimeout(1000);
 

packages/reactjs-player/src/components/ReactPlayer/index.js → packages/reactjs-player/src/ReactPlayer/index.js

@@ -19,7 +19,7 @@ import styles from './index.module.less';
 
 const noop = () => {};
 
-const getRenderHooks = kernel => {
+const getHooks = (kernel, getCustomHooks) => {
   switch (kernel) {
     case 'native':
       return useNative;
@@ -28,6 +28,9 @@ const getRenderHooks = kernel => {
     case 'flvjs':
       return useFlvjs;
     default:
+      if (getCustomHooks) {
+        return getCustomHooks(kernel);
+      }
       console.error(`ReactPlayer: 暂不支持 kernel(${kernel})`);
       return noop;
   }
@@ -36,6 +39,8 @@ const getRenderHooks = kernel => {
 const ReactPlayer = (
   {
     kernel,
+    getCustomHooks = noop,
+
     live,
 
     config = null,
@@ -110,7 +115,7 @@ const ReactPlayer = (
   const piPProps = usePiP({ src }, getVideoElement);
   const fullscreenProps = useFullscreen({ x5playsinline, onFullscreenChange }, getVideoElement, getPlayerElement);
 
-  const kernelMsg = getRenderHooks(kernel)({ src, config, onKernelError }, getVideoElement);
+  const kernelMsg = getHooks(kernel, getCustomHooks)({ src, config, onKernelError }, getVideoElement);
 
   React.useImperativeHandle(ref, () => ({
     isPlaying: () => !!src && !(stateProps.loading || stateProps.waiting || stateProps.ended || stateProps.paused),
@@ -136,12 +141,6 @@ const ReactPlayer = (
         ref={videoRef}
         controls={'controls' === controls}
         type={type}
-        // webkit-playsinline={props.playsInline}
-        // playsInline={props.playsInline}
-        // x5-playsinline={props.playsInline}
-        // x5-video-player-type="h5"
-        // x5-video-player-fullscreen="true"
-        // x5-video-orientation="landscape|portrait"
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...videoProps}
         // useVideoState
@@ -217,6 +216,7 @@ const ReactPlayer = (
 
 ReactPlayer.propTypes = {
   kernel: PropTypes.oneOf(['hlsjs', 'flvjs', 'native']).isRequired,
+  getCustomHooks: PropTypes.func,
   live: PropTypes.bool.isRequired,
   config: PropTypes.object,
   onKernelError: PropTypes.func,
@@ -266,6 +266,7 @@ ReactPlayer.propTypes = {
 ReactPlayer.defaultProps = {
   config: null,
   onKernelError: noop,
+  getCustomHooks: noop,
 
   src: '',
   controls: true,

packages/reactjs-player/src/components/ReactPlayerSkin/index.js → packages/reactjs-player/src/ReactPlayerSkin/index.js

@@ -146,6 +146,7 @@ const ReactPlayerSkin = React.memo(
             duration={duration}
             currentTime={currentTime}
             buffered={buffered}
+            sliding={sliding}
             setSliding={setSliding}
             onChange={changeCurrentTime}
           />

packages/reactjs-player/src/components/TimeSlider/index.js → packages/reactjs-player/src/TimeSlider/index.js

@@ -60,10 +60,9 @@ const getMouseTranslateX = ({ duration, tooltip, live }) => {
   return ((100 * tooltip) / duration).toFixed(1);
 };
 
-const Slider = React.memo(({ live, currentTime, duration, buffered, onChange }) => {
+const Slider = React.memo(({ live, currentTime, duration, buffered, onChange, sliding, setSliding }) => {
   const [value, setValue] = React.useState(currentTime);
-  const [sliding, setSliding] = React.useState(false);
-  // const [visible, setVisible] = React.useState(false);
+  // const [sliding, setSliding] = React.useState(false);
   const [tooltip, setTooltip] = React.useState(0);
 
   const sliderRef = React.useRef(null);
@@ -81,7 +80,7 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
       onChange(v);
       setSliding(false);
     },
-    [onChange, live, duration],
+    [onChange, live, duration, setSliding],
   );
 
   const onMouseDown = React.useCallback(
@@ -94,7 +93,7 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
       reactRef.current = { left: react.left, width: react.width };
       setSliding(true);
     },
-    [live],
+    [live, setSliding],
   );
 
   const update = React.useCallback(() => {
@@ -121,7 +120,7 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
       }
       setSliding(false);
     },
-    [onChange, duration, update],
+    [onChange, duration, update, setSliding],
   );
 
   const onMouseMove = React.useCallback(
@@ -169,7 +168,6 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
       }
       const react = sliderRef.current.getBoundingClientRect();
       reactRef.current = { left: react.left, width: react.width };
-      // setVisible(true);
     },
     [live],
   );
@@ -249,6 +247,8 @@ Slider.propTypes = {
   duration: PropTypes.number.isRequired,
   buffered: PropTypes.object,
   onChange: PropTypes.func,
+  sliding: PropTypes.bool.isRequired,
+  setSliding: PropTypes.func.isRequired,
 };
 
 Slider.defaultProps = {

packages/reactjs-player/src/index.js

@@ -1,7 +1,7 @@
-import ReactPlayer from './components/ReactPlayer';
-import GrindPlayer from './components/GrindPlayer';
-import ReactPlayerContext from './components/ReactPlayerContext';
-import ReactPlayerSkin from './components/ReactPlayerSkin';
+import ReactPlayer from './ReactPlayer';
+import GrindPlayer from './GrindPlayer';
+import ReactPlayerContext from './ReactPlayerContext';
+import ReactPlayerSkin from './ReactPlayerSkin';
 
 ReactPlayer.GrindPlayer = GrindPlayer;
 ReactPlayer.ReactPlayerContext = ReactPlayerContext;