add other file

master
lgf 3 years ago
parent 2abb5e7095
commit 043096bc17
  1. 2
      src/app.ts
  2. 47
      src/appComponent.tsx
  3. 2
      src/core/config/index.ts
  4. 22
      src/core/controls/index.tsx
  5. 4
      src/core/controls/variable.ts
  6. 18
      src/core/index.tsx
  7. 2
      src/core/progress/index.tsx
  8. 21
      src/core/useVideo.ts
  9. 32
      src/interface/index.ts

@ -1,4 +1,6 @@
import { useVideo } from '@/core/useVideo'; import { useVideo } from '@/core/useVideo';
import * as JoLPlayerType from '@/interface';
import JoLPlayer from '@/core/index'; import JoLPlayer from '@/core/index';
export { useVideo }; export { useVideo };
export { JoLPlayerType };
export default JoLPlayer; export default JoLPlayer;

@ -1,12 +1,11 @@
import React, { memo, useRef, useEffect } from 'react'; import React, { memo, useRef, useEffect, useMemo } from 'react';
import JoLPlayer, { useVideo } from './app'; import JoLPlayer, { JoLPlayerType } 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<JoLPlayerType.JoLPlayerRef>(null!);
const onProgressMouseDown = (val: any) => { const onProgressMouseDown: JoLPlayerType.callBackType = (val) => {
// console.log(`val`, val); // console.log(`val`, val);
}; };
const onProgressMouseUp = (val: any) => { const onProgressMouseUp = (val: any) => {
@ -19,6 +18,9 @@ const AppComponent = memo(function AppComponent(props) {
console.log(`暂停`, val); console.log(`暂停`, val);
}; };
const onTimeChange = (val: any) => { const onTimeChange = (val: any) => {
// if (val.currentTime > 50) {
// videoRef.current.pause();
// }
// console.log(`onTimeChange`, val); // console.log(`onTimeChange`, val);
}; };
const onEndEd = (val: any) => { const onEndEd = (val: any) => {
@ -30,6 +32,35 @@ const AppComponent = memo(function AppComponent(props) {
const onvolumechange = (val: any) => { const onvolumechange = (val: any) => {
console.log(`onvolumechange`, val); console.log(`onvolumechange`, val);
}; };
const videoMethod = (status: string) => {
if (status === 'play') {
videoRef.current.play();
} else if (status === 'pause') {
videoRef.current.pause();
} else if (status === 'load') {
videoRef.current.load();
} else if (status === 'volume') {
videoRef.current.setVolume(86);
} else if (status === 'seek') {
videoRef.current.seek(500);
}
};
const xx = () => {
console.log(`videoRef.current`, videoRef.current);
};
useEffect(() => {
if (videoRef.current) {
setTimeout(() => {
videoRef.current.video.play();
}, 1000);
console.log(`object`, videoRef.current.play);
// videoRef.current.play();
}
console.log(`videoRef.current`, videoRef.current);
}, [videoRef.current]);
return ( return (
<> <>
<JoLPlayer <JoLPlayer
@ -51,6 +82,12 @@ const AppComponent = memo(function AppComponent(props) {
onvolumechange={onvolumechange} onvolumechange={onvolumechange}
/> />
{/* <JoLPlayer /> */} {/* <JoLPlayer /> */}
<button onClick={() => videoMethod('play')}></button>
<button onClick={() => videoMethod('pause')}></button>
<button onClick={() => videoMethod('load')}></button>
<button onClick={() => videoMethod('volume')}>80</button>
<button onClick={() => videoMethod('seek')}>500s</button>
<button onClick={xx}>3333</button>
</> </>
); );
}); });

@ -8,3 +8,5 @@ export const multipleList = [
]; ];
export const defaultTheme: string = 'blue'; export const defaultTheme: string = 'blue';
export const defaultVolume: number = 60;

@ -8,8 +8,6 @@ import { useControls } from './variable';
import useWindowClient from '@/utils/useWindowClient'; import useWindowClient from '@/utils/useWindowClient';
import screenfull, { Screenfull } from 'screenfull'; import screenfull, { Screenfull } from 'screenfull';
import { multipleList } from '@/core/config'; import { multipleList } from '@/core/config';
import Switch from '@/components/switch';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import SetComponent from './set'; import SetComponent from './set';
import MultipleComponent from './multiple'; import MultipleComponent from './multiple';
import VolumeComponent from './volume'; import VolumeComponent from './volume';
@ -30,12 +28,13 @@ 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, volume } =
{ useVideo(
videoElement: reviceProps.videoRef, {
}, videoElement: reviceProps.videoRef,
[reviceProps.videoRef], },
); [reviceProps.videoRef],
);
const { controlsState, dispatch } = useControls(); const { controlsState, dispatch } = useControls();
@ -45,6 +44,13 @@ const Index = memo(function Index(props) {
revicePropsData.current = reviceProps; revicePropsData.current = reviceProps;
useEffect(() => {
/**
* @description setVolume函数video的数据一致
*/
dispatch({ type: 'volume', data: Math.floor(volume * 100) });
}, [volume]);
useEffect(() => { useEffect(() => {
// 为了防止音量滑动元素计时器不暂停 // 为了防止音量滑动元素计时器不暂停
window.addEventListener('mouseup', whenMouseUpDo); window.addEventListener('mouseup', whenMouseUpDo);

@ -1,5 +1,5 @@
import { useReducer } from 'react'; import { useReducer } from 'react';
import { defaultVolume } from '@/core/config';
export interface controlsVariableType<T = number, K = boolean> { export interface controlsVariableType<T = number, K = boolean> {
/** /**
* @description * @description
@ -61,7 +61,7 @@ export type mergeAction =
export const useControls = () => { export const useControls = () => {
const initialState = { const initialState = {
volume: 0, volume: defaultVolume,
isMuted: false, isMuted: false,
isSlideVolume: false, isSlideVolume: false,
isScreentFull: false, isScreentFull: false,

@ -7,7 +7,7 @@ import React, {
useImperativeHandle, useImperativeHandle,
} from 'react'; } from 'react';
import Controller from './controller'; import Controller from './controller';
import { videoparameter } from '@/interface'; import { videoparameter, JoLPlayerRef } 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';
@ -68,11 +68,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
setIsBufferring(false); setIsBufferring(false);
}; };
useImperativeHandle(ref, () => ({ const { videoAttributes, videoMethod, currentTime, isPlay } = useVideo(
video: videoRef.current,
}));
const { videoAttributes } = useVideo(
{ {
videoElement: videoRef.current, videoElement: videoRef.current,
}, },
@ -122,6 +118,14 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
}; };
}, [videoRef.current, option]); }, [videoRef.current, option]);
useImperativeHandle(ref, () => {
return {
video: videoRef.current,
...videoMethod,
...videoAttributes,
};
});
const returnVideoSource = useMemo(() => { const returnVideoSource = useMemo(() => {
return ( return (
<> <>
@ -168,6 +172,6 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
); );
}; };
const JoLPlayerComponent = forwardRef<HTMLVideoElement, videoparameter>(JoLPlayer); const JoLPlayerComponent = forwardRef<JoLPlayerRef, videoparameter>(JoLPlayer);
export default JoLPlayerComponent; export default JoLPlayerComponent;

@ -172,7 +172,7 @@ const Index = memo(function Index(props) {
return ( return (
<div <div
className="progress-container" className="progress-container"
// style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }} style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
> >
<div className="progress-bg" ref={progressBgRef}> <div className="progress-bg" ref={progressBgRef}>
<div className="progress-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div> <div className="progress-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div>

@ -1,10 +1,11 @@
import { useRef, useMemo, useEffect, DependencyList } from 'react'; import { useRef, useMemo, useEffect, DependencyList } from 'react';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate'; import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import { videoAttributes } from '@/interface'; import { videoAttributes, videoMethod, parVoid } from '@/interface';
import { defaultVolume } from '@/core/config';
export interface useVideoType extends videoAttributes { export interface useVideoType extends videoAttributes {
handleChangePlayState: () => void; handleChangePlayState: () => void;
videoAttributes: videoAttributes; videoAttributes: videoAttributes;
videoMethod: videoMethod;
} }
export const useVideo = (props: any, dep: DependencyList = []) => { export const useVideo = (props: any, dep: DependencyList = []) => {
@ -32,6 +33,7 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
useEffect(() => { useEffect(() => {
if (videoRef.current) { if (videoRef.current) {
setVolume(defaultVolume);
/** /**
* @description * @description
*/ */
@ -108,12 +110,27 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
videoRef.current.play(); videoRef.current.play();
} }
}; };
const setVolume: parVoid<number> = (val) => {
videoRef.current.volume = val < 1 ? val : val / 100;
};
const videoMethod = useMemo<videoMethod>(() => {
return {
load: () => videoRef.current.load(),
play: () => videoRef.current.play(),
pause: () => videoRef.current.pause(),
setVolume,
seek: (currentTime) => {
videoRef.current.currentTime = currentTime;
},
};
}, [dep]);
return useMemo<useVideoType>( return useMemo<useVideoType>(
() => ({ () => ({
handleChangePlayState, handleChangePlayState,
...videoParameter.current, ...videoParameter.current,
videoAttributes: videoParameter.current, videoAttributes: videoParameter.current,
videoMethod,
}), }),
[videoParameter.current], [videoParameter.current],
); );

@ -62,6 +62,32 @@ export interface videoAttributes<T = number, K = boolean> {
*/ */
error: null | T; error: null | T;
} }
export type noParVoid = () => void;
export type parVoid<T> = (par: T) => void;
export interface videoMethod<T = noParVoid> {
/**
* @description
*/
load: T;
/**
* @description
*/
play: T;
/**
* @description
*/
pause: T;
/**
* @description
*/
setVolume: parVoid<number>;
/**
* @description /s
*/
seek: parVoid<number>;
}
export type callBackType = (e: videoAttributes) => void; export type callBackType = (e: videoAttributes) => void;
export interface videoCallback<T = callBackType> { export interface videoCallback<T = callBackType> {
/** /**
@ -91,7 +117,7 @@ export interface videoCallback<T = callBackType> {
/** /**
* @description * @description
*/ */
onError: () => void; onError: noParVoid;
/** /**
* @description * @description
*/ */
@ -105,3 +131,7 @@ export interface videoparameter extends Partial<videoCallback> {
option: videoOption; option: videoOption;
className?: string; className?: string;
} }
export type JoLPlayerRef = videoMethod &
videoAttributes & {
video: HTMLVideoElement;
};

Loading…
Cancel
Save