|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
import React, {FC, useEffect, useRef, useState, useImperativeHandle} from "react"; |
|
|
|
|
import {Image, Text, Video, View} from "@tarojs/components"; |
|
|
|
|
import "./index.module.scss" |
|
|
|
|
import styles from "./index.module.scss" |
|
|
|
|
import Icon from "@/components/icon"; |
|
|
|
|
import {AtSlider} from "taro-ui"; |
|
|
|
|
import Taro from "@tarojs/taro"; |
|
|
|
|
@ -11,9 +11,11 @@ type Props = { |
|
|
|
|
src: string |
|
|
|
|
onRef?: any |
|
|
|
|
showFull?: boolean |
|
|
|
|
height?: number |
|
|
|
|
progress2bottom?: boolean |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
const VideoPro:FC<Props> = ({src,onRef,showFull,height,progress2bottom}) => { |
|
|
|
|
const globalData = Taro.getApp().globalData |
|
|
|
|
|
|
|
|
|
if(onRef){ |
|
|
|
|
@ -27,7 +29,7 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
|
|
|
|
|
// 视频ui控制需要的响应式数据
|
|
|
|
|
const videoContext = useRef<any>() |
|
|
|
|
const [isPlay, setIsPlay] = useState(false) |
|
|
|
|
const [isPlay, setIsPlay] = useState(true) |
|
|
|
|
const [duration,setDuration] = useState(0) // 视频长度 单位秒
|
|
|
|
|
const updateState = useRef(false) |
|
|
|
|
const [sliderValue,setSlidervalue] = useState(0) |
|
|
|
|
@ -35,7 +37,9 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
const [total_duration, set_total_duration] = useState('00:00') |
|
|
|
|
const [showMenu,setShowMenu] = useState(true) |
|
|
|
|
const [isFull,setIsFull] = useState(false) |
|
|
|
|
const time = useRef<any>() |
|
|
|
|
const time = useRef<NodeJS.Timeout>() |
|
|
|
|
|
|
|
|
|
const [videoHeight] = useState<number>(height || 600) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
@ -54,7 +58,7 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
function onTouchEnd(){ |
|
|
|
|
if(time.current) { |
|
|
|
|
clearTimeout(time.current) |
|
|
|
|
time.current = null |
|
|
|
|
time.current = undefined |
|
|
|
|
} |
|
|
|
|
time.current = setTimeout(() => { |
|
|
|
|
setShowMenu(false) |
|
|
|
|
@ -140,6 +144,8 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
if (duration) { |
|
|
|
|
// 视频跳转到指定位置
|
|
|
|
|
videoContext.current.seek(e / 100 * duration); |
|
|
|
|
videoContext.current.play() |
|
|
|
|
setIsPlay(true) |
|
|
|
|
updateState.current = true |
|
|
|
|
setSlidervalue(e) |
|
|
|
|
} |
|
|
|
|
@ -149,10 +155,11 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View className="container"> |
|
|
|
|
<View style={{width: '750rpx', height: `${videoHeight}rpx`}}> |
|
|
|
|
<Video |
|
|
|
|
style={{width: '750rpx', height: '600rpx'}} |
|
|
|
|
style={{width: '750rpx', height: `${videoHeight}rpx`}} |
|
|
|
|
id='video' |
|
|
|
|
autoplay |
|
|
|
|
src={src} |
|
|
|
|
controls={false} |
|
|
|
|
showPlayBtn={false} |
|
|
|
|
@ -164,7 +171,12 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
onEnded={bindEnded} |
|
|
|
|
onFullScreenChange={onFullScreenChange} |
|
|
|
|
> |
|
|
|
|
<View onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{width:isFull?`${globalData.screenHeight}px`:'750rpx',height:isFull?'750rpx':'600rpx',display:'flex',flexDirection:'column',boxSizing:'border-box',paddingLeft:isFull?`${globalData.statusBarHeight}px`:'0',paddingRight:isFull?`${globalData.statusBarHeight}px`:'0'}}> |
|
|
|
|
<View onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{ |
|
|
|
|
width:isFull?`${globalData.screenHeight}px`:'750rpx', |
|
|
|
|
height:isFull?'750rpx':`${videoHeight}rpx`,display:'flex',flexDirection:'column', |
|
|
|
|
boxSizing:'border-box',paddingLeft:isFull?`${globalData.statusBarHeight}px`:'0', |
|
|
|
|
paddingRight:isFull?`${globalData.statusBarHeight}px`:'0'}} |
|
|
|
|
> |
|
|
|
|
<View onClick={pause} className="justify-center align-center flex pt-5" style={{flex:'1',boxSizing:'border-box'}}> |
|
|
|
|
{ !isPlay && showMenu && |
|
|
|
|
<View className="flex justify-center align-center rounded-50 pl-1" style={{width:'50px',height:'50px',backgroundColor:'rgba(0,0,0,0.5)',boxSizing:'border-box'}}> |
|
|
|
|
@ -173,7 +185,7 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
<View className="flex align-center px-3" style={{height:'40px',boxSizing:'border-box'}}> |
|
|
|
|
{ duration && showMenu && |
|
|
|
|
{ duration > 0 && showMenu && !progress2bottom && |
|
|
|
|
<> |
|
|
|
|
{ |
|
|
|
|
isPlay ? |
|
|
|
|
@ -181,9 +193,14 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
<Icon name="play" color="#fff" size="23px" onClick={() => {videoContext.current.play();setIsPlay(true)}} /> |
|
|
|
|
} |
|
|
|
|
<Text className="text-white pl-2 font-26">{process_duration}</Text> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<View style={{flex:'1'}}> |
|
|
|
|
<AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Text className="text-white font-26 pr-2">{total_duration}</Text> |
|
|
|
|
{ showFull && |
|
|
|
|
<> |
|
|
|
|
@ -196,6 +213,34 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => { |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</Video> |
|
|
|
|
|
|
|
|
|
<View className={`${styles.progressBottom} flex align-center px-3`} style={{height:'40px',boxSizing:'border-box'}}> |
|
|
|
|
{ duration > 0 && showMenu && progress2bottom && |
|
|
|
|
<> |
|
|
|
|
{ |
|
|
|
|
isPlay ? |
|
|
|
|
<Icon name="pause" color="#fff" size="23px" onClick={() => {videoContext.current.pause();setIsPlay(false)}} /> : |
|
|
|
|
<Icon name="play" color="#fff" size="23px" onClick={() => {videoContext.current.play();setIsPlay(true)}} /> |
|
|
|
|
} |
|
|
|
|
<Text className="text-white pl-2 font-26" style={{width:'60rpx'}}>{process_duration}</Text> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<View style={{flex:'1'}}> |
|
|
|
|
<AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Text className="text-white font-26 pr-2">{total_duration}</Text> |
|
|
|
|
{ showFull && |
|
|
|
|
<> |
|
|
|
|
{isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => videoContext.current.exitFullScreen() } src={unFull} /> |
|
|
|
|
: <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => videoContext.current.requestFullScreen({direction:90}) } />} |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
