diff --git a/src/components/videoPro/index.module.scss b/src/components/videoPro/index.module.scss new file mode 100644 index 0000000..d1dc03c --- /dev/null +++ b/src/components/videoPro/index.module.scss @@ -0,0 +1,4 @@ +.container{ + width:750rpx; + height:600rpx; +} diff --git a/src/components/videoPro/index.tsx b/src/components/videoPro/index.tsx new file mode 100644 index 0000000..c032bd8 --- /dev/null +++ b/src/components/videoPro/index.tsx @@ -0,0 +1,200 @@ +import React, {FC, useEffect, useRef, useState, useImperativeHandle} from "react"; +import {Image, Text, Video, View} from "@tarojs/components"; +import "./index.module.scss" +import Icon from "@/components/icon"; +import {AtSlider} from "taro-ui"; +import Taro from "@tarojs/taro"; +import full from "@/static/img/fullscreen.png" +import unfull from "@/static/img/exitFullscreen.png" + +type Props = { + src: string + onRef: any +} + +const VideoPro:FC = ({src,onRef}) => { + const globalData = Taro.getApp().globalData + //用useImperativeHandle暴露一些外部ref能访问的属性 + useImperativeHandle(onRef, () => { + return { + func: pause, + } + }) + + // 视频ui控制需要的响应式数据 + const videoContext = useRef() + const [isPlay, setIsPlay] = useState(false) + const [duration,setDuration] = useState(0) // 视频长度 单位秒 + const updateState = useRef(false) + const [sliderValue,setSlidervalue] = useState(0) + const [process_duration, set_process_duration] = useState('00:00') + const [total_duration, set_total_duration] = useState('00:00') + const [showMenu,setShowMenu] = useState(true) + const [isFull,setIsFull] = useState(false) + const time = useRef() + + + useEffect(() => { + console.log('组件加载') + videoContext.current = Taro.createVideoContext('video') + updateState.current = true + }, []); + + + + function onTouchStart(){ + if(!showMenu) { + setShowMenu(true) + } + } + + function onTouchEnd(){ + if(time.current) { + clearTimeout(time.current) + time.current = null + } + time.current = setTimeout(() => { + setShowMenu(false) + },5000) + + } + + function bindTimeupdateFun(e) { + if (updateState.current) { + let sliderValue = e.detail.currentTime / e.detail.duration * 100; + setSlidervalue(sliderValue) + setDuration(e.detail.duration) + set_total_duration(formatSeconds(e.detail.duration)) + set_process_duration(formatSeconds(e.detail.currentTime)) + } + } + + function addZero(i){ + i = typeof i === 'string' ? Number(i) : i; + return i < 10 ? "0" + i : "" + i; + } + + function formatSeconds(value){ + if (value == undefined) { + value = 0; + } + let second = parseInt(value); + let min = 0; + let secondStr = '' + let minStr = '' + let result = '' + if (second > 60) { + min = parseInt(String(second / 60)); + second = parseInt(String(second % 60)); + if (min > 60) { + // hour = parseInt(String(min / 60)); + min = parseInt(String(min % 60)); + } + } + if (min > 0) { + minStr = addZero(parseInt(String(min))); + result = minStr + ":"; + }else{ + result = "00:"; + } + if(second > 0){ + secondStr = addZero(parseInt(String(second))); + result = result + secondStr; + }else{ + result = result + '00'; + } + return result; + } + + function bindEnded(){ + setIsPlay(false) + if(!showMenu){ + setShowMenu(true) + } + } + + function onFullScreenChange(e){ + console.log(e.detail.fullScreen) + if(e.detail.fullScreen){ + setIsFull(true) + }else{ + setIsFull(false) + } + } + + + function play(e){ + e.stopPropagation(); + videoContext.current.play() + setIsPlay(true) + } + + function pause(){ + setIsPlay(false) + videoContext.current.pause() + } + function sliderOnChange(e){ + if (duration) { + // 视频跳转到指定位置 + videoContext.current.seek(e / 100 * duration); + updateState.current = true + setSlidervalue(e) + } + } + function sliderOnChanging(){ + updateState.current = false + } + + return ( + + + + ) +} +export default VideoPro diff --git a/src/pages/home/home.config.ts b/src/pages/home/home.config.ts index 595f67a..2ce4794 100644 --- a/src/pages/home/home.config.ts +++ b/src/pages/home/home.config.ts @@ -3,5 +3,7 @@ export default definePageConfig({ navigationStyle: 'custom', navigationBarBackgroundColor: '#92ecc5', // navigationBarTextStyle: 'white', - onReachBottomDistance: 50 + onReachBottomDistance: 50, + enableShareTimeline: true, + enableShareAppMessage: true }) diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index f65b8e1..050dde9 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -42,6 +42,21 @@ const Home: FC = () => { setNavbarOpacity(v) } }) + Taro.useShareAppMessage((res) => { + if(res.from === 'button'){ + + } + return { + title:'信桂', + path: '/pages/home/home' + } + }) + + Taro.useShareTimeline(() => { + return { + title: '信桂' + } + }) return ( <> diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts index 90c348c..21beb8c 100644 --- a/src/pages/index/index.config.ts +++ b/src/pages/index/index.config.ts @@ -1,3 +1,5 @@ export default definePageConfig({ navigationStyle: 'custom', + enableShareTimeline: true, + enableShareAppMessage: true }) diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index f2b9f01..85e5222 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -9,6 +9,7 @@ import Spin from "@/components/spinner"; import {isBoolean} from "@tarojs/shared"; import ArticlesBox from "@/components/articlesBox/articlesBox"; import PageScript from "@/components/pageScript/pageScript"; +import Taro from "@tarojs/taro"; const category: TabList[] = [ {title: "企选课程", value: 'is_required'}, @@ -22,6 +23,22 @@ const Index: FC = () => { setCategoryKey(data.tab?.value as CoursesKey) } + Taro.useShareAppMessage((res) => { + if(res.from === 'button'){ + + } + return { + title:'信桂', + path: '/pages/index/index' + } + }) + + Taro.useShareTimeline(() => { + return { + title: '信桂' + } + }) + return ( { {title: '未完成', time: '0', src: incomplete, type: 4}, ]) + Taro.useShareAppMessage(() => { + return { + title:'信桂', + path: '/pages/my/my' + } + }) + Taro.useDidShow(async () => { try { const res = await curriculum.course() diff --git a/src/pages/preview/brand/info/info.config.ts b/src/pages/preview/brand/info/info.config.ts index 2a0a86b..4124e01 100644 --- a/src/pages/preview/brand/info/info.config.ts +++ b/src/pages/preview/brand/info/info.config.ts @@ -1,4 +1,6 @@ export default definePageConfig({ navigationBarTitleText: '', - onReachBottomDistance: 30 + onReachBottomDistance: 30, + enableShareTimeline: true, + enableShareAppMessage: true }) diff --git a/src/pages/preview/brand/info/info.module.scss b/src/pages/preview/brand/info/info.module.scss index dce6b41..0707c01 100644 --- a/src/pages/preview/brand/info/info.module.scss +++ b/src/pages/preview/brand/info/info.module.scss @@ -9,7 +9,7 @@ page { .curIndexBox { position: absolute; - top: 530rpx; + top: 480rpx; right: 30rpx; background-color: rgba(0, 0, 0, 0.5); border-radius: 30rpx; diff --git a/src/pages/preview/brand/info/info.tsx b/src/pages/preview/brand/info/info.tsx index 7e3fa8d..ccf290e 100644 --- a/src/pages/preview/brand/info/info.tsx +++ b/src/pages/preview/brand/info/info.tsx @@ -1,5 +1,5 @@ -import {FC, useCallback, useEffect, useState} from "react"; -import {Swiper, SwiperItem, Text, Video, View} from "@tarojs/components"; +import React, {FC, useCallback, useEffect, useState} from "react"; +import {Swiper, SwiperItem, Text, View} from "@tarojs/components"; import {brandApi, BrandRecord} from "@/api"; import styles from './info.module.scss' import Taro, {useReachBottom, useRouter} from "@tarojs/taro"; @@ -9,6 +9,7 @@ import Spin from "@/components/spinner"; import Collect from "@/components/collect/collect"; import ArticlesBox from "@/components/articlesBox/articlesBox"; import PageScript from "@/components/pageScript/pageScript"; +import VideoPro from "@/components/videoPro" type Params = { id: number @@ -22,6 +23,14 @@ const BrandInfo: FC = () => { const [total, setTotal] = useState(0) const [enable, setEnable] = useState(true) + let VideoRef = React.createRef() + + Taro.useDidHide(() => { + console.log("页面隐藏",VideoRef.current.func) + // 视频被隐藏后自动暂停播放了,再打开自动继续播放了 + // VideoRef.current.func() + }) + useEffect(() => { getData() }, [id]) @@ -43,6 +52,22 @@ const BrandInfo: FC = () => { setEnable(false) } + Taro.useShareAppMessage((res) => { + if(res.from === 'button'){ + + } + return { + title:brandInfo?.name ?? '信桂', + path: `/pages/preview/brand/info/info?id=${id}` + } + }) + + Taro.useShareTimeline(() => { + return { + title: '信桂' + } + }) + useReachBottom(useCallback(() => { if (articleList?.length < total) { setPage(page + 1) @@ -64,7 +89,6 @@ const BrandInfo: FC = () => { setCurIndex(+e.detail.current + 1) } - return ( @@ -79,19 +103,7 @@ const BrandInfo: FC = () => { onChange={onChange} > {brandInfo?.introductory_video_resource?.url && - } { (brandInfo?.brand_album?.length || 0) > 0 diff --git a/src/pages/search/index.config.ts b/src/pages/search/index.config.ts index 23c20dd..21beb8c 100644 --- a/src/pages/search/index.config.ts +++ b/src/pages/search/index.config.ts @@ -1,3 +1,5 @@ export default definePageConfig({ - navigationStyle: 'custom' + navigationStyle: 'custom', + enableShareTimeline: true, + enableShareAppMessage: true }) diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index 60330d3..31dbfc6 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -19,6 +19,22 @@ const Search: FC = () => { useDidShow(getRecentSearch) + Taro.useShareAppMessage((res) => { + if(res.from === 'button'){ + + } + return { + title:'信桂', + path: '/pages/search/index' + } + }) + + Taro.useShareTimeline(() => { + return { + title: '信桂', + } + }) + useEffect(() => { !show && getRecentSearch() }, [show])