自定义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 = {
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
if(onRef){
//用useImperativeHandle暴露一些外部ref能访问的属性
useImperativeHandle(onRef, () => {
return {
func: pause,
}
})
}
// 视频ui控制需要的响应式数据
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="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'}}>
<AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider>
</View>
<Text onClick={() => {
isFull?videoContext.current.exitFullScreen():videoContext.current.requestFullScreen({direction:90})
}} className="text-white font-26 pr-1">{total_duration}</Text>
{
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})}} />
<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})}} />}
</>
}
</>
}

@ -155,7 +155,7 @@ const article: FC = () => {
<View className={styles.articleTitle}>{articleInfo?.title}</View>
{
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`}>
<Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/>
<View className='ml-2'>
@ -183,7 +183,7 @@ const article: FC = () => {
{
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`}>
<Img src={''} width={80} height={80} className={styles.articleImag} errorType='health'/>
<View className='ml-2'>

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

Loading…
Cancel
Save