add endComponent

master
lgf 3 years ago
parent eaeadbc257
commit 43769627fc
  1. 31
      src/appComponent.tsx
  2. 24
      src/components/end/index.module.scss
  3. 21
      src/components/end/index.tsx
  4. 11
      src/components/switch/index.module.scss
  5. 19
      src/core/controller/index.tsx
  6. 7
      src/core/index.tsx
  7. 8
      src/core/progress/index.scss
  8. 4
      src/core/progress/index.tsx
  9. 1
      src/icons/svg/replay.svg
  10. 20
      src/interface/index.ts

@ -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>
</>
);
});

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

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

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

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

@ -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);

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

@ -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>

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

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

Loading…
Cancel
Save