You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

105 lines
2.6 KiB

import { useReducer } from 'react';
import { defaultVolume } from '@/core/config';
export interface controlsVariableType<T = number, K = boolean> {
/**
* @description 音量键的值
*/
volume: T;
/**
* @description 音量键的按钮切换
*/
isMuted: K;
/**
* @description 是否可以滑动音量键
*/
isSlideVolume: K;
/**
* @description 是否全屏
*/
isScreentFull: K;
/**
* @description 倍数
*/
multiple: T;
/**
* @description 是否网页全屏
*/
isWebPageFullScreen: K;
/**
* @description 是否静音
*/
isMute: K;
}
export interface volumeActionType {
type: 'volume';
data: controlsVariableType['volume'];
}
export interface isMutedActionType {
type: 'isMuted';
data: controlsVariableType['isMuted'];
}
export interface isSlideVolumeActionType {
type: 'isSlideVolume';
data: controlsVariableType['isSlideVolume'];
}
export interface isScreentFullActionType {
type: 'isScreentFull';
data: controlsVariableType['isScreentFull'];
}
export interface multipleActionType {
type: 'multiple';
data: controlsVariableType['multiple'];
}
export interface isWebPageFullScreenActionType {
type: 'isWebPageFullScreen';
data: controlsVariableType['isWebPageFullScreen'];
}
export interface isMuteActionType {
type: 'isMute';
data: controlsVariableType['isMute'];
}
export type mergeAction =
| volumeActionType
| isMutedActionType
| isSlideVolumeActionType
| isScreentFullActionType
| multipleActionType
| isWebPageFullScreenActionType
| isMuteActionType;
export const useControls = () => {
const initialState = {
volume: defaultVolume,
isMuted: false,
isSlideVolume: false,
isScreentFull: false,
multiple: 1.0,
isWebPageFullScreen: false,
isMute: false,
};
const reducer = (state: controlsVariableType, action: mergeAction) => {
switch (action.type) {
case 'volume':
return { ...state, volume: action.data };
case 'isMuted':
return { ...state, isMuted: action.data };
case 'isSlideVolume':
return { ...state, isSlideVolume: action.data };
case 'isScreentFull':
return { ...state, isScreentFull: action.data };
case 'multiple':
return { ...state, multiple: action.data };
case 'isWebPageFullScreen':
return { ...state, isWebPageFullScreen: action.data };
case 'isMute':
return { ...state, isMute: action.data };
default:
return state;
}
};
const [controlsState, dispatch] = useReducer(reducer, initialState);
return { controlsState, dispatch };
};