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 * as JoLPlayerType from '@/interface';
import JoLPlayer from '@/core/index';
export { useVideo };
export { JoLPlayerType };
export default JoLPlayer;

@ -1,12 +1,11 @@
import React, { memo, useRef, useEffect } from 'react';
import JoLPlayer, { useVideo } from './app';
import useWindowClient from '@/utils/useWindowClient';
import React, { memo, useRef, useEffect, useMemo } from 'react';
import JoLPlayer, { JoLPlayerType } from './app';
import '@/icons/';
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);
};
const onProgressMouseUp = (val: any) => {
@ -19,6 +18,9 @@ const AppComponent = memo(function AppComponent(props) {
console.log(`暂停`, val);
};
const onTimeChange = (val: any) => {
// if (val.currentTime > 50) {
// videoRef.current.pause();
// }
// console.log(`onTimeChange`, val);
};
const onEndEd = (val: any) => {
@ -30,6 +32,35 @@ const AppComponent = memo(function AppComponent(props) {
const onvolumechange = (val: any) => {
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 (
<>
<JoLPlayer
@ -51,6 +82,12 @@ const AppComponent = memo(function AppComponent(props) {
onvolumechange={onvolumechange}
/>
{/* <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 defaultVolume: number = 60;

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

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

@ -7,7 +7,7 @@ import React, {
useImperativeHandle,
} from 'react';
import Controller from './controller';
import { videoparameter } from '@/interface';
import { videoparameter, JoLPlayerRef } from '@/interface';
import { FlowContext, useVideoFlow } from '@/core/context';
import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
import Broadcast from '@/components/svgIcon';
@ -68,11 +68,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
setIsBufferring(false);
};
useImperativeHandle(ref, () => ({
video: videoRef.current,
}));
const { videoAttributes } = useVideo(
const { videoAttributes, videoMethod, currentTime, isPlay } = useVideo(
{
videoElement: videoRef.current,
},
@ -122,6 +118,14 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
};
}, [videoRef.current, option]);
useImperativeHandle(ref, () => {
return {
video: videoRef.current,
...videoMethod,
...videoAttributes,
};
});
const returnVideoSource = useMemo(() => {
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;

@ -172,7 +172,7 @@ const Index = memo(function Index(props) {
return (
<div
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-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div>

@ -1,10 +1,11 @@
import { useRef, useMemo, useEffect, DependencyList } from 'react';
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 {
handleChangePlayState: () => void;
videoAttributes: videoAttributes;
videoMethod: videoMethod;
}
export const useVideo = (props: any, dep: DependencyList = []) => {
@ -32,6 +33,7 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
useEffect(() => {
if (videoRef.current) {
setVolume(defaultVolume);
/**
* @description
*/
@ -108,12 +110,27 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
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>(
() => ({
handleChangePlayState,
...videoParameter.current,
videoAttributes: videoParameter.current,
videoMethod,
}),
[videoParameter.current],
);

@ -62,6 +62,32 @@ export interface videoAttributes<T = number, K = boolean> {
*/
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 interface videoCallback<T = callBackType> {
/**
@ -91,7 +117,7 @@ export interface videoCallback<T = callBackType> {
/**
* @description
*/
onError: () => void;
onError: noParVoid;
/**
* @description
*/
@ -105,3 +131,7 @@ export interface videoparameter extends Partial<videoCallback> {
option: videoOption;
className?: string;
}
export type JoLPlayerRef = videoMethod &
videoAttributes & {
video: HTMLVideoElement;
};

Loading…
Cancel
Save