lgf 3 years ago
parent 13b04e0212
commit 88b4981160
  1. 49
      src/appComponent.tsx
  2. 40
      src/core/controller/index.tsx
  3. 15
      src/core/controls/index.tsx
  4. 14
      src/core/index.tsx
  5. 4
      src/core/progress/index.tsx
  6. 23
      src/core/useVideo.ts

@ -1,36 +1,43 @@
import React, { memo, useRef, useEffect } from 'react'; import React, { memo, useRef, useEffect } from 'react';
import JoLPlayer, { useVideo } from './app'; import JoLPlayer, { useVideo } from './app';
import useWindowClient from '@/utils/useWindowClient';
import '@/icons/'; import '@/icons/';
const AppComponent = memo(function AppComponent(props) { const AppComponent = memo(function AppComponent(props) {
const videoRef = useRef<HTMLVideoElement>(null!); const videoRef = useRef<HTMLVideoElement>(null!);
const xx = useRef(false); const { clientX } = useWindowClient();
const { isPlay, handleChangePlayState, currentTime } = useVideo({ const xx = useRef<any>();
videoElement:
videoRef.current && const { isPlay, handleChangePlayState, currentTime } = useVideo(
(videoRef.current as HTMLVideoElement & { video: HTMLVideoElement }).video, {
// onPause: (val: any) => { videoElement:
// console.log(val, xx.current); videoRef.current &&
// }, (videoRef.current as HTMLVideoElement & { video: HTMLVideoElement }).video,
// onPlay: (val: any) => { // onPause: (val: any) => {
// console.log(val, xx.current); // console.log(val, xx.current);
// }, // },
// onTimeChange: (val: any) => { // onPlay: (val: any) => {
// console.log(val); // console.log(val, xx.current);
// }, // },
// onEndEd: (val: any) => { // onTimeChange: (val: any) => {
// console.log('结束', val); // console.log(val);
// }, // },
onProgressSlide(val: any) { // onEndEd: (val: any) => {
console.log(`童东风`, val); // console.log('结束', val);
// },
onProgressSlide: (val: any) => {
console.log(`童东风`, val);
},
}, },
}); [videoRef.current],
);
xx.current = clientX;
return ( return (
<> <>
{isPlay ? '播放' : '暂停'} {isPlay ? '播放' : '暂停'}
<JoLPlayer ref={videoRef} /> <JoLPlayer ref={videoRef} />
<JoLPlayer /> {/* <JoLPlayer /> */}
</> </>
); );
}); });

@ -15,24 +15,28 @@ const Index = memo(function Index(props) {
const { dispatch } = reviceProps; const { dispatch } = reviceProps;
const { isPlay, handleChangePlayState, currentTime } = useVideo({ const { isPlay, handleChangePlayState, currentTime } = useVideo(
videoElement: reviceProps.videoRef, {
// onPause: (val: any) => { videoElement: reviceProps.videoRef,
// console.log(val); // onPause: (val: any) => {
// }, // console.log(val);
// onPlay: (val: any) => { // },
// console.log(val); // onPlay: (val: any) => {
// }, // console.log(val);
// onTimeChange: (val: any) => { // },
// console.log(val); // onTimeChange: (val: any) => {
// }, // console.log(val);
// onEndEd: (val: any) => { // },
// console.log('结束', val); // onEndEd: (val: any) => {
// }, // console.log('结束', val);
// onProgressSlide: (val: any) => { // },
// console.log(`童东风`, val); // onProgressSlide: (val: any) => {
// }, // console.log(`童东风`, val);
}); // },
},
[reviceProps.videoRef],
);
const timer = useRef<NodeJS.Timeout | null>(null!); const timer = useRef<NodeJS.Timeout | null>(null!);
const viewClientX = useRef<number>(null!); const viewClientX = useRef<number>(null!);

@ -30,9 +30,18 @@ const Index = memo(function Index(props) {
const revicePropsData = useRef<any>(); const revicePropsData = useRef<any>();
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({ const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
videoElement: reviceProps.videoRef, {
}); videoElement: reviceProps.videoRef,
// onPause: (val: any) => {
// console.log(val);
// },
// onPlay: (val: any) => {
// console.log(val);
// },
},
[reviceProps.videoRef],
);
const { controlsState, dispatch } = useControls(); const { controlsState, dispatch } = useControls();

@ -11,6 +11,7 @@ import { videoparameter } from '@/interface';
import { FlowContext, useVideoFlow } from '@/core/context'; import { FlowContext, useVideoFlow } from '@/core/context';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate'; import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import Broadcast from '@/components/svgIcon'; import Broadcast from '@/components/svgIcon';
import { useVideo } from '@/core/useVideo';
// import videoUrl from '@/assets/haiwang.mp4'; // import videoUrl from '@/assets/haiwang.mp4';
import '@/assets/css/reset.scss'; import '@/assets/css/reset.scss';
import './index.scss'; import './index.scss';
@ -64,6 +65,19 @@ const JoLPlayer = function JoLPlayer(
video: videoRef.current, video: videoRef.current,
})); }));
const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
{
videoElement: videoRef.current,
// onPause: (val: any) => {
// console.log(val);
// },
// onPlay: (val: any) => {
// console.log(val);
// },
},
[videoRef.current],
);
useEffect(() => { useEffect(() => {
/** /**
* @description * @description

@ -29,7 +29,9 @@ const Index = memo(function Index(props) {
const reviceProps = useContext(FlowContext); const reviceProps = useContext(FlowContext);
const { currentTime, duration, bufferedTime } = useVideo({ videoElement: reviceProps.videoRef }); const { currentTime, duration, bufferedTime } = useVideo({ videoElement: reviceProps.videoRef }, [
reviceProps.videoRef,
]);
const { progressState, dispatch } = useProgress(); const { progressState, dispatch } = useProgress();

@ -1,11 +1,13 @@
import { useRef, useMemo, useEffect, useState, useReducer, useContext, useCallback } from 'react'; import { useRef, useMemo, useEffect, useState, useReducer, useContext, useCallback } from 'react';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate'; import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import { FlowContext } from '@/core/context'; import { FlowContext } from '@/core/context';
import useWindowClient from '@/utils/useWindowClient';
export const useVideo = (props: any, dep: any[] = []) => {
const { clientX } = useWindowClient();
const { videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide } = props;
export const useVideo = (
{ videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide }: any,
dep?: any,
) => {
const forceUpdate = useMandatoryUpdate(); const forceUpdate = useMandatoryUpdate();
const reviceProps = useContext(FlowContext); const reviceProps = useContext(FlowContext);
@ -29,7 +31,10 @@ export const useVideo = (
videoRef.current = videoElement; videoRef.current = videoElement;
useEffect(() => { useEffect(() => {
forceUpdate(); /**
* @description
*/
// forceUpdate();
if (videoRef.current) { if (videoRef.current) {
/** /**
* @description * @description
@ -62,7 +67,7 @@ export const useVideo = (
/** /**
* *
*/ */
forceUpdate(); // forceUpdate();
torture({ torture({
currentTime: videoRef.current.currentTime, currentTime: videoRef.current.currentTime,
isPlay: videoRef.current.paused ? false : true, isPlay: videoRef.current.paused ? false : true,
@ -78,11 +83,11 @@ export const useVideo = (
return () => { return () => {
interval.current && clearInterval(interval.current); interval.current && clearInterval(interval.current);
}; };
}, [videoRef.current, dep, videoElement]); }, dep);
const ProgressSlideChange = useCallback( const ProgressSlideChange = useCallback(
(onProgressSlide: any) => { (onProgressSlide: any) => {
// console.log(`onProgressSlide`, onProgressSlide); console.log(`onProgressSlide`, onProgressSlide, videoFlow.progressSliderChangeVal);
onProgressSlide && onProgressSlide(videoParameter.current); onProgressSlide && onProgressSlide(videoParameter.current);
}, },
[videoFlow.progressSliderChangeVal], [videoFlow.progressSliderChangeVal],
@ -92,7 +97,7 @@ export const useVideo = (
if (videoFlow.progressSliderChangeVal) { if (videoFlow.progressSliderChangeVal) {
ProgressSlideChange(onProgressSlide); ProgressSlideChange(onProgressSlide);
} }
}, [ProgressSlideChange]); }, [ProgressSlideChange, onProgressSlide]);
const torture = (val: any) => { const torture = (val: any) => {
videoParameter.current = { ...videoParameter.current, ...val }; videoParameter.current = { ...videoParameter.current, ...val };

Loading…
Cancel
Save