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 {
/**