add endComponent

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 (
     <>
       <JoLPlayer
@@ -75,6 +80,7 @@ const AppComponent = memo(function AppComponent(props) {
           height: 420,
           theme: '#00D3FF',
           poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
+          isAutoPlay: true,
         }}
         onProgressMouseDown={onProgressMouseDown}
         onPlay={onPlay}
@@ -85,13 +91,24 @@ const AppComponent = memo(function AppComponent(props) {
         onError={onError}
         onvolumechange={onvolumechange}
       />
-      {/* <JoLPlayer /> */}
+      <JoLPlayer
+        option={{
+          videoSrc:
+            'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4',
+          width: 750,
+          height: 420,
+          theme: 'red',
+          poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
+          isAutoPlay: false,
+        }}
+      />
       <button onClick={() => videoMethod('play')}>播放</button>
       <button onClick={() => videoMethod('pause')}>暂停</button>
       <button onClick={() => videoMethod('load')}>重新加载</button>
       <button onClick={() => videoMethod('volume')}>改变声音80</button>
       <button onClick={() => videoMethod('seek')}>快进500s</button>
       <button onClick={xx}>3333</button>
+      <button onClick={toggle}>切换播放视频路劲</button>
     </>
   );
 });

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%;
+    }
+  }
+}

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 (
+    <div className={style.end}>
+      <div className={style.replay}>
+        <div className={style.cicle} onClick={handleFunc}>
+          <Broadcast iconClass="replay" fill="#fff" fontSize={'37px'} />
+        </div>
+        <p>重播</p>
+      </div>
+    </div>
+  );
+});
+
+export default Index;

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;

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 (
     <div
       className="JoL-controller-container"
@@ -82,13 +84,13 @@ const Index = memo(function Index(props) {
       ref={controllerRef}
     >
       <div
-        // id="play-or-pause-mask"
+        id="play-or-pause-mask"
         className="JoL-click-to-play-or-pause"
         onMouseEnter={hiddleCursor}
         onMouseLeave={clearTimer}
-        onClick={handleChangePlayState}
+        onClick={handlePlay}
       ></div>
-      {!isPlay && (
+      {!isPlay && !isEndEd && (
         <Broadcast
           iconClass="player"
           fill="#fff"
@@ -100,6 +102,7 @@ const Index = memo(function Index(props) {
         <Progress />
         <Controls />
       </div>
+      {isEndEd ? <EndComponent handle={() => [handleChangePlayState(), hiddleCursor()]} /> : null}
     </div>
   );
 });

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<unkno
     onError,
     onvolumechange,
   } = props;
-  const { videoSrc, width, height, theme, poster } = option;
+  const { videoSrc, width, height, theme, poster, isAutoPlay } = option;
   /**
    * @description 关灯对象
    */
@@ -68,7 +69,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
     setIsBufferring(false);
   };
 
-  const { videoAttributes, videoMethod, currentTime, isPlay } = useVideo(
+  const { videoAttributes, videoMethod } = useVideo(
     {
       videoElement: videoRef.current,
     },
@@ -107,9 +108,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
         clearTimeout(timerToCheckVideoUseful.current!);
       }
     }, 3000);
-    // 监听是否在缓冲
     videoElem.addEventListener('waiting', waitingListener);
-    // 当开始播放时更改waiting状态
     videoElem.addEventListener('playing', playingListener);
     return () => {
       timerToCheckVideoUseful.current && clearTimeout(timerToCheckVideoUseful.current);

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;
       }
     }
   }

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) {
               ></div>
             </div>
             <div className="video-img-box" style={{ left: `${progressState.positionX}px` }}>
-              <img className="video-current-img" src="" alt="" />
+              {/* <img className="video-current-img" src="" alt="" /> */}
               <span className="current-time">
                 {percentToMinutesAndSeconds(progressState.progressPercent, duration)}
               </span>

src/icons/svg/replay.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1629034274177" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1471" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M874.144 262.56C735.232 79.104 471.264 41.6 285.76 178.912c-60.16 44.544-106.784 104.352-135.584 172.224l-21.696-73.92c-4.992-16.96-22.752-26.752-39.712-21.696C71.808 260.512 62.08 278.304 67.072 295.264l47.456 161.76C118.624 470.944 131.36 480 145.216 480c2.976 0 22.72-5.76 25.824-6.912l161.248-59.264c16.576-6.08 25.088-24.48 18.976-41.088-6.08-16.576-24.384-25.056-41.088-18.976l-107.968 39.68c23.424-64.576 65.568-121.632 121.6-163.104 157.376-116.576 381.376-84.768 499.296 70.848 56.832 75.008 80.8 167.456 67.488 260.256-13.376 93.28-62.784 175.712-139.072 232.192-157.536 116.512-381.568 84.736-499.392-70.72-10.688-14.112-30.72-16.864-44.832-6.176-14.08 10.656-16.832 30.752-6.176 44.8 82.464 108.832 208.992 166.24 337.024 166.24 87.68 0 176.032-26.912 251.456-82.72 90.144-66.72 148.512-164.224 164.352-274.528C969.792 460.704 941.44 351.328 874.144 262.56z" p-id="1472"></path></svg>

src/interface/index.ts

@@ -6,27 +6,31 @@ export interface hoverShowStyleType {
   progressBgRefEle: HTMLDivElement;
   progressScrubberRefEle: HTMLDivElement;
 }
-export interface videoOption {
+export interface videoOption<T = string, K = boolean, U = number> {
   /**
    * @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<T = number, K = boolean> {
   /**