From 285992f38d97179ad7c7b66a75dd8e24f57a8680 Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Fri, 20 Aug 2021 16:23:00 +0800 Subject: [PATCH] complete the development of common functions --- src/appComponent.tsx | 2 +- src/components/end/index.module.scss | 1 + src/components/end/index.tsx | 11 +- src/components/screenshot/index.module.scss | 1 + src/components/screenshot/index.tsx | 22 +++- src/core/config/index.ts | 2 + src/core/controller/index.tsx | 12 +- src/core/controls/index.tsx | 122 ++++++++++++-------- src/core/controls/multiple.tsx | 3 + src/core/controls/set.tsx | 12 +- src/core/controls/volume.tsx | 3 + src/core/index.tsx | 11 +- src/core/progress/index.tsx | 2 +- src/interface/index.ts | 6 + src/language/index.ts | 53 +++++++++ src/utils/index.ts | 10 ++ 16 files changed, 201 insertions(+), 72 deletions(-) create mode 100644 src/language/index.ts diff --git a/src/appComponent.tsx b/src/appComponent.tsx index 8d37f9c..0ef91a5 100644 --- a/src/appComponent.tsx +++ b/src/appComponent.tsx @@ -79,8 +79,8 @@ const AppComponent = memo(function AppComponent(props) { width: 750, height: 420, theme: '#00D3FF', - isShowMultiple: false, poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG', + language: 'en', }} onProgressMouseDown={onProgressMouseDown} onPlay={onPlay} diff --git a/src/components/end/index.module.scss b/src/components/end/index.module.scss index 2b5c9cd..ef10324 100644 --- a/src/components/end/index.module.scss +++ b/src/components/end/index.module.scss @@ -2,6 +2,7 @@ .end { @include position(absolute, 0, 0, 0, 0); z-index: 1300; + cursor: default; background: rgba($color: #000000, $alpha: 0.4); .replay { @include position(absolute, 50%, 0, 0, 50%); diff --git a/src/components/end/index.tsx b/src/components/end/index.tsx index 0775b5c..470daee 100644 --- a/src/components/end/index.tsx +++ b/src/components/end/index.tsx @@ -1,8 +1,13 @@ import React, { memo, FC } from 'react'; import style from './index.module.scss'; import Broadcast from '@/components/svgIcon'; - -const Index: FC<{ handle: Function }> = memo(function Index({ handle }) { +import { languageType } from '@/interface'; +import { il8n } from '@/language'; +import { defaultLanguage } from '@/core/config'; +const Index: FC<{ handle: Function; language: languageType | undefined }> = memo(function Index({ + handle, + language, +}) { const handleFunc = () => { handle(); }; @@ -12,7 +17,7 @@ const Index: FC<{ handle: Function }> = memo(function Index({ handle }) {
-

重播

+

{il8n(language || defaultLanguage, 'replay')}

); diff --git a/src/components/screenshot/index.module.scss b/src/components/screenshot/index.module.scss index 3e64bdb..5c94fe3 100644 --- a/src/components/screenshot/index.module.scss +++ b/src/components/screenshot/index.module.scss @@ -32,5 +32,6 @@ .save { padding: 10px; text-align: center; + font-size: 13px; } } diff --git a/src/components/screenshot/index.tsx b/src/components/screenshot/index.tsx index a60b1b6..8a8c8b6 100644 --- a/src/components/screenshot/index.tsx +++ b/src/components/screenshot/index.tsx @@ -1,20 +1,34 @@ import React, { memo, FC } from 'react'; import style from './index.module.scss'; import Broadcast from '@/components/svgIcon'; +import { languageType } from '@/interface'; +import { defaultTheme, defaultLanguage } from '@/core/config'; +import { il8n } from '@/language'; + const Index: FC<{ setIsscreenshot: Function; screenshotLoading: boolean; -}> = memo(function Index({ setIsscreenshot, screenshotLoading }) { + theme: string | undefined; + language: languageType | undefined; +}> = memo(function Index({ setIsscreenshot, screenshotLoading, theme, language }) { return (
setIsscreenshot(false)}> - +
- +

- {screenshotLoading ? '截图加载失败，在点击下' : '鼠标右键图片另存为'} + {il8n( + language || defaultLanguage, + screenshotLoading ? 'screenshotsFailText' : 'screenshotsSucessText', + )}

); diff --git a/src/core/config/index.ts b/src/core/config/index.ts index bba7262..5748361 100644 --- a/src/core/config/index.ts +++ b/src/core/config/index.ts @@ -10,3 +10,5 @@ export const multipleList = [ export const defaultTheme: string = 'blue'; export const defaultVolume: number = 60; + +export const defaultLanguage = 'zh'; diff --git a/src/core/controller/index.tsx b/src/core/controller/index.tsx index 1562b62..d4e539d 100644 --- a/src/core/controller/index.tsx +++ b/src/core/controller/index.tsx @@ -141,7 +141,12 @@ const Index = memo(function Index() { onMouseLeave={(e) => [controlsContainerMove('leave')]} > {isScreenshot ? ( - + ) : null} @@ -150,7 +155,10 @@ const Index = memo(function Index() { propsAttributes!.setEndPlayContent ? ( propsAttributes!.setEndPlayContent ) : ( - [handleChangePlayState(), showControl('enter')]} /> + [handleChangePlayState(), showControl('enter')]} + language={propsAttributes!.language} + /> ) ) : null} diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx index b0ab998..494c3ff 100644 --- a/src/core/controls/index.tsx +++ b/src/core/controls/index.tsx @@ -3,15 +3,16 @@ import Broadcast from '@/components/svgIcon'; import Tooltip from '@/components/tooltip'; import { contextType, FlowContext } from '@/core/context'; import { useVideo } from '@/core/useVideo'; -import { secondsToMinutesAndSecondes, capture } from '@/utils'; +import { secondsToMinutesAndSecondes, capture, filterDefaults } from '@/utils'; import { useControls } from './variable'; import useWindowClient from '@/utils/useWindowClient'; import screenfull, { Screenfull } from 'screenfull'; -import { multipleList, defaultVolume } from '@/core/config'; +import { multipleList, defaultVolume, defaultLanguage } from '@/core/config'; import SetComponent from './set'; import MultipleComponent from './multiple'; import VolumeComponent from './volume'; import MonitorComponent from './monitor'; +import { il8n } from '@/language'; import './index.scss'; const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> = memo( @@ -162,7 +163,7 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> = }; const multipleText = useMemo(() => { if (controlsState.multiple === 1.0) { - return '倍数'; + return il8n(propsAttributes!.language || defaultLanguage, 'multiple'); } else { return multipleList.filter((item) => item.id === controlsState.multiple)[0].name; } @@ -217,11 +218,17 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> = dispatch({ type: 'isMuted', data: controlsState.isMuted ? false : true }); reviceProps.videoRef!.muted = controlsState.isMuted ? false : true; }; + /** + * @description 全屏之后，对控件的间距设置一下 + */ + const space = useMemo(() => { + return controlsState.isScreentFull || controlsState.isWebPageFullScreen ? '13px' : '8px'; + }, [controlsState.isWebPageFullScreen, controlsState.isScreentFull]); return (
= totalTime={secondsToMinutesAndSecondes(duration)} />
- {propsAttributes!.isShowMultiple && ( + {filterDefaults(propsAttributes!.isShowMultiple) && ( )} - = isMuted={controlsState.isMuted} toggleVolume={toggleVolume} /> - - - } - /> - - } - /> - - } - /> + {filterDefaults(propsAttributes!.isShowSet) && ( + + )} + {filterDefaults(propsAttributes!.isShowScreenshot) && ( + + } + /> + )} + {filterDefaults(propsAttributes!.isShowPicture) && ( + + } + /> + )} + {filterDefaults(propsAttributes!.isShowWebFullScreen) && ( + + } + /> + )} = memo(function Multiple({ multipleText, selectPlayRate, multiple, + style, }) { const reviceProps = useContext(FlowContext); @@ -25,6 +27,7 @@ const Multiple: FC = memo(function Multiple({ className="JoL-multifunction-multiple" onClick={(e) => setIsShow((pre) => !pre)} onMouseLeave={(e) => [setIsShow(false)]} + style={style} >

{multipleText}

= memo(function Set({ switchChange }) { +const Set: FC = memo(function Set({ switchChange, style }) { const reviceProps = useContext(FlowContext); - const { theme } = reviceProps.propsAttributes!; + const { theme, language } = reviceProps.propsAttributes!; const [isShow, setIsShow] = useState(false); return ( @@ -19,6 +22,7 @@ const Set: FC = memo(function Set({ switchChange }) { className="JoL-multifunction-set" onMouseEnter={(e) => [setIsShow(true), e.stopPropagation()]} onMouseLeave={(e) => [setIsShow(false)]} + style={style} >
= memo(function Set({ switchChange }) {
  • switchChange(e, 'lights')} theme={theme} /> @@ -37,7 +41,7 @@ const Set: FC = memo(function Set({ switchChange }) {
  • switchChange(e, 'loop')} /> diff --git a/src/core/controls/volume.tsx b/src/core/controls/volume.tsx index 1d72d3d..0b7282d 100644 --- a/src/core/controls/volume.tsx +++ b/src/core/controls/volume.tsx @@ -11,6 +11,7 @@ export interface VolumeType { slideCurrentVolume: React.MouseEventHandler; clearVolumeInterval: React.MouseEventHandler; toggleVolume: Function; + style?: React.CSSProperties; } const Volume = function Volume( @@ -21,6 +22,7 @@ const Volume = function Volume( clearVolumeInterval, isMuted, toggleVolume, + style, }: VolumeType, ref: React.Ref | undefined, ) { @@ -42,6 +44,7 @@ const Volume = function Volume( onMouseEnter={(e) => [setIsShow(true)]} onMouseLeave={(e) => [setIsShow(false)]} onClick={(e) => [toggleVolume()]} + style={style} >
    (JoLPlayer); -JoLPlayerComponent.defaultProps = { - option: { - width: 750, - height: 420, - videoSrc: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG', - isShowMultiple: true, - }, -}; + export default JoLPlayerComponent; diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx index 45eba67..ccc7830 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/interface/index.ts b/src/interface/index.ts index ede0ef8..3fc2ac0 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -7,6 +7,8 @@ export interface hoverShowStyleType { progressScrubberRefEle: HTMLDivElement; } export type pausePlacement = 'bottomRight' | 'center'; + +export type languageType = 'zh' | 'en'; export interface videoOption { /** * @description 视频容器的width @@ -64,6 +66,10 @@ export interface videoOption { * @description 是否显示网页全屏 */ isShowWebFullScreen?: K; + /** + * @description 语言,默认中文 + */ + language?: languageType; } export interface videoAttributes { /** diff --git a/src/language/index.ts b/src/language/index.ts new file mode 100644 index 0000000..2342f96 --- /dev/null +++ b/src/language/index.ts @@ -0,0 +1,53 @@ +import { languageType } from '@/interface'; +export interface langType { + multiple: T; + closeLights: T; + loop: T; + screenshots: T; + openPicture: T; + closePicture: T; + Fullscreen: T; + fullScreen: T; + replay: T; + closeFullscreen: T; + closefullScreen: T; + screenshotsFailText: T; + screenshotsSucessText: T; +} +export const zhJson: langType = { + multiple: '倍数', + closeLights: '关灯', + loop: '循环', + screenshots: '截图', + openPicture: '开启画中画', + closePicture: '关闭画中画', + Fullscreen: '网页全屏', + closeFullscreen: '关闭网页全屏', + fullScreen: '全屏', + closefullScreen: '关闭全屏', + replay: '重播', + screenshotsSucessText: '鼠标右键图片另存为', + screenshotsFailText: '截图加载失败，在点击下', +}; +export const enJson: langType = { + multiple: 'multiple', + closeLights: 'lights', + loop: 'loops', + screenshots: 'screenshots', + openPicture: 'open Picture', + closePicture: 'close Picture', + Fullscreen: 'Full screen', + closeFullscreen: 'close Full screen', + fullScreen: 'full Screen', + closefullScreen: 'close full Screen', + replay: 'Replay', + screenshotsSucessText: 'Right mouse button to save the picture as', + screenshotsFailText: 'The screenshot failed to load, click', +}; +export const il8n = (lang: languageType, key: keyof langType) => { + if (lang === 'zh') { + return zhJson[key]; + } else { + return enJson[key]; + } +}; diff --git a/src/utils/index.ts b/src/utils/index.ts index 121d29f..8b5b34d 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -48,3 +48,13 @@ export const capture = (video: HTMLVideoElement, scaleFactor: number = 0.25) => ctx!.drawImage(video, 0, 0, w, h); return canvas; }; + +export const filterDefaults = (val: unknown) => { + if (val === null || val === undefined) { + return true; + } else if (val === true) { + return true; + } else { + return false; + } +};