Skip to content

Commit 27f257f

Browse files
fix: 调整目录结构,支持自定义 hooks,解决拖动进度时控制栏隐藏问题
1 parent c8beeb1 commit 27f257f

File tree

20 files changed

+28
-25
lines changed

20 files changed

+28
-25
lines changed

.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ language: node_js
77
# keep-history: true
88

99
node_js:
10-
- 10
10+
- 10
1111

1212
cache: yarn
1313

docs/TODO

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,10 +129,11 @@
129129
✘ beforeunload @cancelled(19-08-13 15:59)
130130
✘ useEffect @cancelled(19-08-13 15:59)
131131

132-
0.7.x:
133-
☐ flv.js/hls.js 按需加载
134-
☐ 进度拖动时 controls 不要自动隐藏
135-
☐ 手机端 controls 不会自动隐藏
132+
0.8.x:
133+
✔ flv.js/hls.js 按需加载 @done(19-08-27 12:23)
134+
✔ 支持第三方扩展 hooks @done(19-08-27 14:30)
135+
✔ 进度拖动时 controls 不要自动隐藏 @done(19-08-27 14:42)
136+
☐ 手机端 controls 不会自动隐藏问题
136137
☐ 手机端 controls 显示时 process 的 handel 强制显示
137138

138139
单元测试:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3-
import ReactPlayer from '../src/components/ReactPlayer';
3+
import ReactPlayer from '../src/ReactPlayer';
44

55
jest.setTimeout(1000);
66

packages/reactjs-player/src/components/ReactPlayer/index.js renamed to packages/reactjs-player/src/ReactPlayer/index.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import styles from './index.module.less';
1919

2020
const noop = () => {};
2121

22-
const getRenderHooks = kernel => {
22+
const getHooks = (kernel, getCustomHooks) => {
2323
switch (kernel) {
2424
case 'native':
2525
return useNative;
@@ -28,6 +28,9 @@ const getRenderHooks = kernel => {
2828
case 'flvjs':
2929
return useFlvjs;
3030
default:
31+
if (getCustomHooks) {
32+
return getCustomHooks(kernel);
33+
}
3134
console.error(`ReactPlayer: 暂不支持 kernel(${kernel})`);
3235
return noop;
3336
}
@@ -36,6 +39,8 @@ const getRenderHooks = kernel => {
3639
const ReactPlayer = (
3740
{
3841
kernel,
42+
getCustomHooks = noop,
43+
3944
live,
4045

4146
config = null,
@@ -110,7 +115,7 @@ const ReactPlayer = (
110115
const piPProps = usePiP({ src }, getVideoElement);
111116
const fullscreenProps = useFullscreen({ x5playsinline, onFullscreenChange }, getVideoElement, getPlayerElement);
112117

113-
const kernelMsg = getRenderHooks(kernel)({ src, config, onKernelError }, getVideoElement);
118+
const kernelMsg = getHooks(kernel, getCustomHooks)({ src, config, onKernelError }, getVideoElement);
114119

115120
React.useImperativeHandle(ref, () => ({
116121
isPlaying: () => !!src && !(stateProps.loading || stateProps.waiting || stateProps.ended || stateProps.paused),
@@ -136,12 +141,6 @@ const ReactPlayer = (
136141
ref={videoRef}
137142
controls={'controls' === controls}
138143
type={type}
139-
// webkit-playsinline={props.playsInline}
140-
// playsInline={props.playsInline}
141-
// x5-playsinline={props.playsInline}
142-
// x5-video-player-type="h5"
143-
// x5-video-player-fullscreen="true"
144-
// x5-video-orientation="landscape|portrait"
145144
// eslint-disable-next-line react/jsx-props-no-spreading
146145
{...videoProps}
147146
// useVideoState
@@ -217,6 +216,7 @@ const ReactPlayer = (
217216

218217
ReactPlayer.propTypes = {
219218
kernel: PropTypes.oneOf(['hlsjs', 'flvjs', 'native']).isRequired,
219+
getCustomHooks: PropTypes.func,
220220
live: PropTypes.bool.isRequired,
221221
config: PropTypes.object,
222222
onKernelError: PropTypes.func,
@@ -266,6 +266,7 @@ ReactPlayer.propTypes = {
266266
ReactPlayer.defaultProps = {
267267
config: null,
268268
onKernelError: noop,
269+
getCustomHooks: noop,
269270

270271
src: '',
271272
controls: true,

packages/reactjs-player/src/components/ReactPlayerSkin/index.js renamed to packages/reactjs-player/src/ReactPlayerSkin/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ const ReactPlayerSkin = React.memo(
146146
duration={duration}
147147
currentTime={currentTime}
148148
buffered={buffered}
149+
sliding={sliding}
149150
setSliding={setSliding}
150151
onChange={changeCurrentTime}
151152
/>

packages/reactjs-player/src/components/TimeSlider/index.js renamed to packages/reactjs-player/src/TimeSlider/index.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,9 @@ const getMouseTranslateX = ({ duration, tooltip, live }) => {
6060
return ((100 * tooltip) / duration).toFixed(1);
6161
};
6262

63-
const Slider = React.memo(({ live, currentTime, duration, buffered, onChange }) => {
63+
const Slider = React.memo(({ live, currentTime, duration, buffered, onChange, sliding, setSliding }) => {
6464
const [value, setValue] = React.useState(currentTime);
65-
const [sliding, setSliding] = React.useState(false);
66-
// const [visible, setVisible] = React.useState(false);
65+
// const [sliding, setSliding] = React.useState(false);
6766
const [tooltip, setTooltip] = React.useState(0);
6867

6968
const sliderRef = React.useRef(null);
@@ -81,7 +80,7 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
8180
onChange(v);
8281
setSliding(false);
8382
},
84-
[onChange, live, duration],
83+
[onChange, live, duration, setSliding],
8584
);
8685

8786
const onMouseDown = React.useCallback(
@@ -94,7 +93,7 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
9493
reactRef.current = { left: react.left, width: react.width };
9594
setSliding(true);
9695
},
97-
[live],
96+
[live, setSliding],
9897
);
9998

10099
const update = React.useCallback(() => {
@@ -121,7 +120,7 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
121120
}
122121
setSliding(false);
123122
},
124-
[onChange, duration, update],
123+
[onChange, duration, update, setSliding],
125124
);
126125

127126
const onMouseMove = React.useCallback(
@@ -169,7 +168,6 @@ const Slider = React.memo(({ live, currentTime, duration, buffered, onChange })
169168
}
170169
const react = sliderRef.current.getBoundingClientRect();
171170
reactRef.current = { left: react.left, width: react.width };
172-
// setVisible(true);
173171
},
174172
[live],
175173
);
@@ -249,6 +247,8 @@ Slider.propTypes = {
249247
duration: PropTypes.number.isRequired,
250248
buffered: PropTypes.object,
251249
onChange: PropTypes.func,
250+
sliding: PropTypes.bool.isRequired,
251+
setSliding: PropTypes.func.isRequired,
252252
};
253253

254254
Slider.defaultProps = {

packages/reactjs-player/src/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import ReactPlayer from './components/ReactPlayer';
2-
import GrindPlayer from './components/GrindPlayer';
3-
import ReactPlayerContext from './components/ReactPlayerContext';
4-
import ReactPlayerSkin from './components/ReactPlayerSkin';
1+
import ReactPlayer from './ReactPlayer';
2+
import GrindPlayer from './GrindPlayer';
3+
import ReactPlayerContext from './ReactPlayerContext';
4+
import ReactPlayerSkin from './ReactPlayerSkin';
55

66
ReactPlayer.GrindPlayer = GrindPlayer;
77
ReactPlayer.ReactPlayerContext = ReactPlayerContext;

0 commit comments

Comments
 (0)