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

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

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

@ -11,6 +11,7 @@ import { videoparameter } from '@/interface';
import { FlowContext, useVideoFlow } from '@/core/context';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import Broadcast from '@/components/svgIcon';
import { useVideo } from '@/core/useVideo';
// import videoUrl from '@/assets/haiwang.mp4';
import '@/assets/css/reset.scss';
import './index.scss';
@ -64,6 +65,19 @@ const JoLPlayer = function JoLPlayer(
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(() => {
/**
* @description

@ -29,7 +29,9 @@ const Index = memo(function Index(props) {
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();

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

Loading…
Cancel
Save