From 43769627fcea70b4937d20773623a32174ee6f6f Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Sun, 15 Aug 2021 22:53:21 +0800 Subject: [PATCH] add endComponent --- src/appComponent.tsx | 31 +++++++++++++++++++------ src/components/end/index.module.scss | 24 +++++++++++++++++++ src/components/end/index.tsx | 21 +++++++++++++++++ src/components/switch/index.module.scss | 11 ++++----- src/core/controller/index.tsx | 19 ++++++++------- src/core/index.tsx | 7 +++--- src/core/progress/index.scss | 8 +++---- src/core/progress/index.tsx | 4 ++-- src/icons/svg/replay.svg | 1 + src/interface/index.ts | 20 +++++++++------- 10 files changed, 106 insertions(+), 40 deletions(-) create mode 100644 src/components/end/index.module.scss create mode 100644 src/components/end/index.tsx create mode 100644 src/icons/svg/replay.svg diff --git a/src/appComponent.tsx b/src/appComponent.tsx index e0beadd..47c264f 100644 --- a/src/appComponent.tsx +++ b/src/appComponent.tsx @@ -27,12 +27,12 @@ const AppComponent = memo(function AppComponent(props) { // console.log(`onTimeChange`, val); }; const onEndEd = (val: any) => { - setTimeout(() => { - videoRef.current.setVideoSrc( - 'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4', - ); - videoRef.current.play(); - }, 1000); + // setTimeout(() => { + // videoRef.current.setVideoSrc( + // 'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4', + // ); + // videoRef.current.play(); + // }, 1000); console.log(`onEndEd`, val); }; @@ -65,6 +65,11 @@ const AppComponent = memo(function AppComponent(props) { console.log(`videoRef.current`, videoRef.current); }, [videoRef.current]); + const toggle = () => { + videoRef.current.setVideoSrc( + 'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4', + ); + }; return ( <> - {/* */} + + ); }); diff --git a/src/components/end/index.module.scss b/src/components/end/index.module.scss new file mode 100644 index 0000000..2b5c9cd --- /dev/null +++ b/src/components/end/index.module.scss @@ -0,0 +1,24 @@ +@import 'src/assets/css/mixin.scss'; +.end { + @include position(absolute, 0, 0, 0, 0); + z-index: 1300; + background: rgba($color: #000000, $alpha: 0.4); + .replay { + @include position(absolute, 50%, 0, 0, 50%); + transform: translate(-50%, -50%); + @include flexContainer(center); + color: #fff; + text-align: center; + height: 100px; + .cicle { + @include wh(65px, 65px); + background: rgba($color: #000000, $alpha: 0.58); + border-radius: 50%; + cursor: pointer; + @include flexContainer(center); + } + p { + width: 100%; + } + } +} diff --git a/src/components/end/index.tsx b/src/components/end/index.tsx new file mode 100644 index 0000000..0775b5c --- /dev/null +++ b/src/components/end/index.tsx @@ -0,0 +1,21 @@ +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 }) { + const handleFunc = () => { + handle(); + }; + return ( +
+
+
+ +
+

重播

+
+
+ ); +}); + +export default Index; diff --git a/src/components/switch/index.module.scss b/src/components/switch/index.module.scss index 45f2672..c423e20 100644 --- a/src/components/switch/index.module.scss +++ b/src/components/switch/index.module.scss @@ -1,3 +1,4 @@ +@import 'src/assets/css/mixin.scss'; body { --JoL-theme: red; } @@ -12,8 +13,7 @@ body { } .switch { position: relative; - width: 30px; - height: 15px; + @include wh(30px, 15px); background-color: #dadada; border-radius: 30px; border: none; @@ -26,11 +26,8 @@ body { // 按钮 .switch::after { content: ''; - position: absolute; - top: 0; - left: 0; - width: 50%; - height: 100%; + @include wh(50%, 100%); + @include position(absolute, 0, auto, auto, 0); background-color: #fff; border-radius: 50%; transition: all 0.2s ease; diff --git a/src/core/controller/index.tsx b/src/core/controller/index.tsx index fddb5a6..f4a048c 100644 --- a/src/core/controller/index.tsx +++ b/src/core/controller/index.tsx @@ -6,6 +6,7 @@ import { FlowContext } from '@/core/context'; import { useVideo } from '@/core/useVideo'; import useWindowClient from '@/utils/useWindowClient'; import usePrevious from '@/utils/usePrevious'; +import EndComponent from '@/components/end'; import './index.scss'; const Index = memo(function Index(props) { @@ -13,9 +14,9 @@ const Index = memo(function Index(props) { const reviceProps = useContext(FlowContext); - const { dispatch } = reviceProps; + const { dispatch, propsAttributes } = reviceProps; - const { isPlay, handleChangePlayState, currentTime } = useVideo( + const { isPlay, handleChangePlayState, isEndEd } = useVideo( { videoElement: reviceProps.videoRef, }, @@ -43,7 +44,7 @@ const Index = memo(function Index(props) { * @description 显示操作控件 */ const showControl = (e: any, status: string) => { - dispatch!({ type: 'isControl', data: status === 'enter' ? true : false }); + dispatch!({ type: 'isControl', data: status === 'enter' && !isEndEd ? true : false }); }; /** * @description 隐藏鼠标 @@ -52,7 +53,6 @@ const Index = memo(function Index(props) { if (timer.current) { clearInterval(timer.current); } - timer.current = setInterval(() => { setPre(viewClientX.current); /** @@ -73,7 +73,9 @@ const Index = memo(function Index(props) { clearInterval(timer.current); } }; - + const handlePlay = () => { + handleChangePlayState && handleChangePlayState(); + }; return (
- {!isPlay && ( + {!isPlay && !isEndEd && (
+ {isEndEd ? [handleChangePlayState(), hiddleCursor()]} /> : null} ); }); diff --git a/src/core/index.tsx b/src/core/index.tsx index c8c7103..1d4a577 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -14,6 +14,7 @@ import Broadcast from '@/components/svgIcon'; import { useVideo } from '@/core/useVideo'; import useVideoCallback from '@/core/useVideoCallback'; import { defaultTheme } from '@/core/config'; + // import videoUrl from '@/assets/haiwang.mp4'; import '@/assets/css/reset.scss'; import './index.scss'; @@ -30,7 +31,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref { timerToCheckVideoUseful.current && clearTimeout(timerToCheckVideoUseful.current); diff --git a/src/core/progress/index.scss b/src/core/progress/index.scss index 3774ce1..b4f1d21 100644 --- a/src/core/progress/index.scss +++ b/src/core/progress/index.scss @@ -44,7 +44,7 @@ transition: all 0.3s; @include wh(12px, 12px); @include position(absolute, -50%, -5px, auto, auto); - margin-top: -1px; + margin-top: 1px; border-radius: 50%; } } @@ -72,13 +72,13 @@ } .bottom-triangle { left: -4px; - top: 1px; + top: 3px; border-top: 4px solid transparent; } } .video-img-box { @include wh(169px, 96px); - @include position(absolute, -120px, auto, auto, 0); + @include position(absolute, -105px, auto, auto, 0); margin-left: calc(-169px / 2); .video-current-img { @include wh(100%, 100%); @@ -88,7 +88,7 @@ @include style(12px, #fff); transform: translateX(-50%); background-color: #222222; - padding: 0 5px; + padding: 1px 4px; } } } diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx index a57ec75..ccc7830 100644 --- a/src/core/progress/index.tsx +++ b/src/core/progress/index.tsx @@ -49,7 +49,7 @@ const Index = memo(function Index(props) { intervalToJudgeIsMovingProgress.current = setInterval(() => { if (progressState.isMovingProgress) { hoverShowStyle({ - height: 5, + height: 7, opacity: 1, animationName: 'example', progressBgRefEle, @@ -215,7 +215,7 @@ const Index = memo(function Index(props) { >
- + {/* */} {percentToMinutesAndSeconds(progressState.progressPercent, duration)} diff --git a/src/icons/svg/replay.svg b/src/icons/svg/replay.svg new file mode 100644 index 0000000..d50496e --- /dev/null +++ b/src/icons/svg/replay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/interface/index.ts b/src/interface/index.ts index ed54845..59de282 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -6,27 +6,31 @@ export interface hoverShowStyleType { progressBgRefEle: HTMLDivElement; progressScrubberRefEle: HTMLDivElement; } -export interface videoOption { +export interface videoOption { /** * @description 视频容器的width */ - width: number; + width: U; /** * @description 视频容器的height */ - height: number; + height: U; /** - * @description 主题 + * @description 视频地址 */ - theme?: string; + videoSrc: T; /** - * @description 视频地址 + * @description 主题 */ - videoSrc: string; + theme?: T; /** * @description 视频封面图 */ - poster?: string; + poster?: T; + /** + * @description 是否自动播放 + */ + isAutoPlay?: K; } export interface videoAttributes { /**