自定义ui视频组件增加是否显示全屏可选参数

master
一杯沧海 1 year ago
parent 163af32973
commit c421e30b71
  1. 22
      src/components/videoPro/index.tsx
  2. 4
      src/pages/preview/brand/article/article.tsx
  3. 5
      src/pages/preview/brand/info/info.tsx

@ -9,17 +9,21 @@ import unfull from "@/static/img/exitFullscreen.png"
type Props = { type Props = {
src: string src: string
onRef: any onRef?: any
showFull?: boolean
} }
const VideoPro:FC<Props> = ({src,onRef}) => { const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
const globalData = Taro.getApp().globalData const globalData = Taro.getApp().globalData
if(onRef){
//用useImperativeHandle暴露一些外部ref能访问的属性 //用useImperativeHandle暴露一些外部ref能访问的属性
useImperativeHandle(onRef, () => { useImperativeHandle(onRef, () => {
return { return {
func: pause, func: pause,
} }
}) })
}
// 视频ui控制需要的响应式数据 // 视频ui控制需要的响应式数据
const videoContext = useRef<any>() const videoContext = useRef<any>()
@ -178,16 +182,16 @@ const VideoPro:FC<Props> = ({src,onRef}) => {
<Icon name="pause" color="#fff" size="23px" onClick={() => {videoContext.current.pause();setIsPlay(false)}} /> : <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)}} /> <Icon name="play" color="#fff" size="23px" onClick={() => {videoContext.current.play();setIsPlay(true)}} />
} }
<Text className="text-white pl-1 font-26">{process_duration}</Text> <Text className="text-white pl-2 font-26">{process_duration}</Text>
<View style={{flex:'1'}}> <View style={{flex:'1'}}>
<AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider> <AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider>
</View> </View>
<Text onClick={() => { <Text className="text-white font-26 pr-2">{total_duration}</Text>
isFull?videoContext.current.exitFullScreen():videoContext.current.requestFullScreen({direction:90}) { showFull &&
}} className="text-white font-26 pr-1">{total_duration}</Text> <>
{ {isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => {videoContext.current.exitFullScreen()}} src={unfull} />
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})}} />}
: <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => {videoContext.current.requestFullScreen({direction:90})}} /> </>
} }
</> </>
} }

@ -155,7 +155,7 @@ const article: FC = () => {
<View className={styles.articleTitle}>{articleInfo?.title}</View> <View className={styles.articleTitle}>{articleInfo?.title}</View>
{ {
articleInfo?.owner_type === 1 && articleInfo?.brands?.map(d => ( articleInfo?.owner_type === 1 && articleInfo?.brands?.map(d => (
<View className='flex align-center mb-4'> <View key={d.id} className='flex align-center mb-4'>
<View className={`${styles.article} flex-1`}> <View className={`${styles.article} flex-1`}>
<Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/> <Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/>
<View className='ml-2'> <View className='ml-2'>
@ -183,7 +183,7 @@ const article: FC = () => {
{ {
articleInfo?.owner_type === 2 && articleInfo?.illness?.map(d => ( articleInfo?.owner_type === 2 && articleInfo?.illness?.map(d => (
<View className='flex align-center mb-4'> <View key={d.name} className='flex align-center mb-4'>
<View className={`${styles.article} flex-1`}> <View className={`${styles.article} flex-1`}>
<Img src={''} width={80} height={80} className={styles.articleImag} errorType='health'/> <Img src={''} width={80} height={80} className={styles.articleImag} errorType='health'/>
<View className='ml-2'> <View className='ml-2'>

@ -24,7 +24,6 @@ const BrandInfo: FC = () => {
const [enable, setEnable] = useState(true) const [enable, setEnable] = useState(true)
let VideoRef = React.createRef<any>() let VideoRef = React.createRef<any>()
Taro.useDidHide(() => { Taro.useDidHide(() => {
console.log("页面隐藏",VideoRef.current.func) console.log("页面隐藏",VideoRef.current.func)
// 视频被隐藏后自动暂停播放了,再打开自动继续播放了 // 视频被隐藏后自动暂停播放了,再打开自动继续播放了
@ -103,7 +102,7 @@ const BrandInfo: FC = () => {
onChange={onChange} onChange={onChange}
> >
{brandInfo?.introductory_video_resource?.url && <SwiperItem> {brandInfo?.introductory_video_resource?.url && <SwiperItem>
<VideoPro onRef={VideoRef} src={"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}></VideoPro> <VideoPro onRef={VideoRef} src={brandInfo.introductory_video_resource.url}></VideoPro>
</SwiperItem>} </SwiperItem>}
{ {
(brandInfo?.brand_album?.length || 0) > 0 (brandInfo?.brand_album?.length || 0) > 0
@ -132,7 +131,7 @@ const BrandInfo: FC = () => {
<View className={styles['bottom']}> <View className={styles['bottom']}>
{ {
articleList?.length ? <>{ articleList?.length ? <>{
articleList.map(d => <ArticlesBox data={d}/>)} articleList.map(d => <ArticlesBox key={d.id} data={d}/>)}
<PageScript/> <PageScript/>
</> </>
: <View className="py-6"> : <View className="py-6">

Loading…
Cancel
Save