diff --git a/src/app.ts b/src/app.ts index 9a93c26..482f018 100644 --- a/src/app.ts +++ b/src/app.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; diff --git a/src/appComponent.tsx b/src/appComponent.tsx index e59e466..93369a7 100644 --- a/src/appComponent.tsx +++ b/src/appComponent.tsx @@ -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(null!); + const videoRef = useRef(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 ( <> {/* */} + + + + + + ); }); diff --git a/src/core/config/index.ts b/src/core/config/index.ts index d7eb579..bba7262 100644 --- a/src/core/config/index.ts +++ b/src/core/config/index.ts @@ -8,3 +8,5 @@ export const multipleList = [ ]; export const defaultTheme: string = 'blue'; + +export const defaultVolume: number = 60; diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx index 395910a..dd84e20 100644 --- a/src/core/controls/index.tsx +++ b/src/core/controls/index.tsx @@ -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(); - 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); diff --git a/src/core/controls/variable.ts b/src/core/controls/variable.ts index 10ce39e..286d64a 100644 --- a/src/core/controls/variable.ts +++ b/src/core/controls/variable.ts @@ -1,5 +1,5 @@ import { useReducer } from 'react'; - +import { defaultVolume } from '@/core/config'; export interface controlsVariableType { /** * @description 音量键的值 @@ -61,7 +61,7 @@ export type mergeAction = export const useControls = () => { const initialState = { - volume: 0, + volume: defaultVolume, isMuted: false, isSlideVolume: false, isScreentFull: false, diff --git a/src/core/index.tsx b/src/core/index.tsx index 4dbfec7..382dd21 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -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 ({ - 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 { + return { + video: videoRef.current, + ...videoMethod, + ...videoAttributes, + }; + }); + const returnVideoSource = useMemo(() => { return ( <> @@ -168,6 +172,6 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref(JoLPlayer); +const JoLPlayerComponent = forwardRef(JoLPlayer); export default JoLPlayerComponent; diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx index b6db17c..fc6c181 100644 --- a/src/core/progress/index.tsx +++ b/src/core/progress/index.tsx @@ -172,7 +172,7 @@ const Index = memo(function Index(props) { return (
diff --git a/src/core/useVideo.ts b/src/core/useVideo.ts index 4b0ef4b..aa093e6 100644 --- a/src/core/useVideo.ts +++ b/src/core/useVideo.ts @@ -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 = (val) => { + videoRef.current.volume = val < 1 ? val : val / 100; + }; + const videoMethod = useMemo(() => { + return { + load: () => videoRef.current.load(), + play: () => videoRef.current.play(), + pause: () => videoRef.current.pause(), + setVolume, + seek: (currentTime) => { + videoRef.current.currentTime = currentTime; + }, + }; + }, [dep]); return useMemo( () => ({ handleChangePlayState, ...videoParameter.current, videoAttributes: videoParameter.current, + videoMethod, }), [videoParameter.current], ); diff --git a/src/interface/index.ts b/src/interface/index.ts index 935a8d8..d0faa71 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -62,6 +62,32 @@ export interface videoAttributes { */ error: null | T; } +export type noParVoid = () => void; + +export type parVoid = (par: T) => void; + +export interface videoMethod { + /** + * @description 重新加载 + */ + load: T; + /** + * @description 开始播放 + */ + play: T; + /** + * @description 暂停 + */ + pause: T; + /** + * @description 设置音量 + */ + setVolume: parVoid; + /** + * @description 设置指定视频的播放位置/s + */ + seek: parVoid; +} export type callBackType = (e: videoAttributes) => void; export interface videoCallback { /** @@ -91,7 +117,7 @@ export interface videoCallback { /** * @description 视频播放失败的回调 */ - onError: () => void; + onError: noParVoid; /** * @description 音量改变时的回调 */ @@ -105,3 +131,7 @@ export interface videoparameter extends Partial { option: videoOption; className?: string; } +export type JoLPlayerRef = videoMethod & + videoAttributes & { + video: HTMLVideoElement; + };