|
@@ -1,12 +1,12 @@
|
|
|
import { useEffect, useState } from 'react'
|
|
|
-import Taro, { useLoad, useReady } from '@tarojs/taro'
|
|
|
+import Taro, { useDidShow, useLoad, useReady } from '@tarojs/taro'
|
|
|
import {
|
|
|
Swiper, SwiperItem, Video,
|
|
|
View, Image, Button
|
|
|
} from '@tarojs/components'
|
|
|
import Route from '@/class/Route'
|
|
|
import { DETAIL_PAGESOURCE, CATEGORY_PAGESOURCE, VIEW_AUTO_TYPE } from '@/const'
|
|
|
-import { videoViewReport, videoPlayReport, videoActionReport } from '@/logger'
|
|
|
+import { videoViewReport, videoPlayReport, videoActionReport, shareContactReport } from '@/logger'
|
|
|
import { once, formatSecondsAsTime } from '@/utils'
|
|
|
import { VideoInfo, PlayState } from '@/constants/commentTypes'
|
|
|
import { shareTimeline } from '@/shareHelper'
|
|
@@ -18,6 +18,7 @@ let lastSwiperItemIndex = 0 // 上个 item 索引
|
|
|
let currentListIndex = 0 // 大视频列表的索引
|
|
|
let isUp = false
|
|
|
let swiperRefreshing = false
|
|
|
+let virualListIndex = 0
|
|
|
|
|
|
const videoViewedMap = new Map()
|
|
|
|
|
@@ -28,7 +29,7 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
|
|
|
const [seekProgress, setSeekProgress] = useState(false)
|
|
|
const [needPlayerResume, setNeedPlayerResume] = useState(false)
|
|
|
|
|
|
-
|
|
|
+
|
|
|
useReady(() => {
|
|
|
activeIndex = 0
|
|
|
videoViewedMap.clear()
|
|
@@ -37,6 +38,18 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
|
|
|
useLoad(() => {
|
|
|
})
|
|
|
|
|
|
+ useDidShow(() => {
|
|
|
+ console.log('show')
|
|
|
+
|
|
|
+ // 从分享页回首页要重置
|
|
|
+ activeIndex = 0
|
|
|
+ lastSwiperItemIndex = 0 // 上个 item 索引
|
|
|
+ currentListIndex = 0 // 大视频列表的索引
|
|
|
+ isUp = false
|
|
|
+ swiperRefreshing = false
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
/**
|
|
|
* @description: 进度回调。秒单位
|
|
|
* @param {*} e
|
|
@@ -49,14 +62,13 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
|
|
|
}
|
|
|
|
|
|
function onTransition(e) {
|
|
|
- console.log('swo:', e.detail)
|
|
|
- let {dy = 0} = e.detail
|
|
|
+ let { dy = 0 } = e.detail
|
|
|
if (!swiperRefreshing && dy < -50 && currentListIndex == 0 && currentIndex == 0) {
|
|
|
swiperRefreshing = true
|
|
|
setTimeout(() => {
|
|
|
onRefresh()
|
|
|
}, 250);
|
|
|
- }else if (swiperRefreshing && dy == 0) {
|
|
|
+ } else if (swiperRefreshing && dy == 0) {
|
|
|
swiperRefreshing = false
|
|
|
|
|
|
}
|
|
@@ -70,8 +82,13 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
|
|
|
|
|
|
if (isUp) {
|
|
|
currentListIndex += 1
|
|
|
+ virualListIndex = currentListIndex
|
|
|
+ if (currentListIndex >= list.length) {
|
|
|
+ currentListIndex -= 3
|
|
|
+ }
|
|
|
} else {
|
|
|
currentListIndex -= 1
|
|
|
+ virualListIndex = currentListIndex
|
|
|
if (currentListIndex < 0) {
|
|
|
currentListIndex += 3
|
|
|
}
|
|
@@ -85,40 +102,54 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
|
|
|
const { current } = detail || {}
|
|
|
|
|
|
if (activeIndex == current) {
|
|
|
+ onFinish(currentListIndex)
|
|
|
return
|
|
|
}
|
|
|
activeIndex = current
|
|
|
|
|
|
- if (isUp) {
|
|
|
- if (!circular && currentListIndex > 0) {
|
|
|
- setCircular(true)
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (circular && currentListIndex < 2) {
|
|
|
- setCircular(false)
|
|
|
- }
|
|
|
+ // if (isUp) {
|
|
|
+ // if (circular && currentListIndex > list.length - 2) {
|
|
|
+ // setCircular(false)
|
|
|
+ // } else if (!circular && currentListIndex > 0) {
|
|
|
+ // setCircular(true)
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+ if (circular && (virualListIndex < 1 || virualListIndex > list.length - 2)) {
|
|
|
+ setCircular(false)
|
|
|
+ } else if (!circular && virualListIndex > 1) {
|
|
|
+ setCircular(true)
|
|
|
}
|
|
|
|
|
|
let changed = false
|
|
|
+ let oldList = videoList
|
|
|
let nextSwiperItemIndex = (current + 1) % 3
|
|
|
if (currentListIndex < list.length - 1) {
|
|
|
let nextVideo = list[currentListIndex + 1]
|
|
|
- let replaceVideo = videoList[nextSwiperItemIndex]
|
|
|
+ let replaceVideo = oldList[nextSwiperItemIndex]
|
|
|
if (nextVideo && nextVideo.id != replaceVideo.id) {
|
|
|
- videoList[nextSwiperItemIndex] = nextVideo
|
|
|
+ oldList[nextSwiperItemIndex] = nextVideo
|
|
|
changed = true
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ let newCurVideo = list[currentListIndex]
|
|
|
+ let oldCurVido = oldList[current]
|
|
|
+ if (newCurVideo.id != oldCurVido) {
|
|
|
+ oldList[current] = newCurVideo
|
|
|
+ changed = true
|
|
|
+ }
|
|
|
+
|
|
|
let preSwiperItemIndex = (current - 1 + 3) % 3
|
|
|
if (currentListIndex > 0) {
|
|
|
let nextVideo = list[currentListIndex - 1]
|
|
|
- let replaceVideo = videoList[preSwiperItemIndex]
|
|
|
+ let replaceVideo = oldList[preSwiperItemIndex]
|
|
|
if (nextVideo && nextVideo.id != replaceVideo.id) {
|
|
|
- videoList[preSwiperItemIndex] = nextVideo
|
|
|
+ oldList[preSwiperItemIndex] = nextVideo
|
|
|
changed = true
|
|
|
}
|
|
|
}
|
|
|
- changed && setVideoList(videoList)
|
|
|
+ changed && setVideoList(oldList)
|
|
|
onFinish(currentListIndex)
|
|
|
setCurrentIndex(activeIndex)
|
|
|
}
|
|
@@ -153,7 +184,7 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
|
|
|
className='video-swiper'
|
|
|
vertical
|
|
|
circular={circular}
|
|
|
- duration={200}
|
|
|
+ duration={180}
|
|
|
current={currentIndex}
|
|
|
onChange={onSwiperChange}
|
|
|
onTransition={onTransition}
|
|
@@ -196,7 +227,7 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
const logReportVideoPlaySuccessOnce = once(logReportVideoPlaySuccess)
|
|
|
const logReportVideoRealPlayOnce = once(logReportVideoRealPlay)
|
|
|
const logReportVideoPlayEndOnce = once(logReportVideoPlayEnd)
|
|
|
-
|
|
|
+ const route = new Route()
|
|
|
useEffect(() => {
|
|
|
logReportVideoView(video, current, index)
|
|
|
if (current === index) {
|
|
@@ -222,10 +253,15 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
}, [current, needResumePlay])
|
|
|
|
|
|
function playerPlay() {
|
|
|
- videoContext.play()
|
|
|
- setPlayerState(PlayState.playing)
|
|
|
|
|
|
- setIsPlaying(true)
|
|
|
+ if ((route.path.indexOf('category') > -1 && video.pageSource.indexOf('category') > -1)
|
|
|
+ || route.path.indexOf('share') > -1 && video.pageSource.indexOf('share') > -1) {
|
|
|
+ videoContext.play()
|
|
|
+ setPlayerState(PlayState.playing)
|
|
|
+ setShowProgressIndicator(false)
|
|
|
+ setIsPlaying(true)
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function playerPause() {
|
|
@@ -240,7 +276,6 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
}
|
|
|
|
|
|
function onSeekCom(e) {
|
|
|
- console.log(e)
|
|
|
}
|
|
|
|
|
|
function didTimeUpdate(evt) {
|
|
@@ -271,7 +306,9 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
}
|
|
|
|
|
|
function didPaused() {
|
|
|
- console.log('didPaused', index)
|
|
|
+ }
|
|
|
+ function didPlayed() {
|
|
|
+ setShowProgressIndicator(false)
|
|
|
}
|
|
|
function onEnded() {
|
|
|
setPlayerState(PlayState.stoped)
|
|
@@ -300,7 +337,6 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
}
|
|
|
|
|
|
function onTouchStart(e) {
|
|
|
- console.log('hhz- start ', e)
|
|
|
let { clientX = 0 } = (e.changedTouches || [])[0]
|
|
|
setStartMoveX(clientX)
|
|
|
onProgressMove(true)
|
|
@@ -310,6 +346,7 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
}
|
|
|
|
|
|
function onTouchMove(e) {
|
|
|
+
|
|
|
let { clientX = 0 } = (e.changedTouches || [])[0]
|
|
|
let rate = coculationRate(clientX - startMoveX)
|
|
|
|
|
@@ -318,14 +355,15 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
|
|
|
function onTouchEnd(e) {
|
|
|
let { clientX = 0 } = (e.changedTouches || [])[0]
|
|
|
+ console.log('hhz- onTouchEnd ')
|
|
|
|
|
|
onProgressMove(false)
|
|
|
- setShowProgressIndicator(false)
|
|
|
|
|
|
let rate = coculationRate(clientX - startMoveX)
|
|
|
let t = Math.min(Math.max(0, playTimeWhenMove + videoDuraing * rate), videoDuraing)
|
|
|
videoContext.seek(t)
|
|
|
|
|
|
+ playerPlay()
|
|
|
}
|
|
|
|
|
|
function changeIndicator(rate) {
|
|
@@ -357,13 +395,15 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
poster={video.videoCoverSnapshotPath}
|
|
|
onTimeUpdate={didTimeUpdate}
|
|
|
onEnded={onEnded}
|
|
|
+ onPlay={didPlayed}
|
|
|
onPause={didPaused}
|
|
|
onLoadedMetaData={didLoadedMeta}
|
|
|
onSeekComplete={onSeekCom}
|
|
|
onTap={onTapVideo}
|
|
|
+
|
|
|
/>
|
|
|
{(playerState == PlayState.pause) && <View className='playBtn' onClick={onTapVideo}>
|
|
|
- <Image src='http://weapppiccdn.yishihui.com/wxicon/common/icon_play_btn_dark2.png'/>
|
|
|
+ <Image src='http://weapppiccdn.yishihui.com/wxicon/common/new_player_play_btn.png' />
|
|
|
</View>}
|
|
|
<View className='progress-bg'
|
|
|
onTouchStart={onTouchStart}
|
|
@@ -397,7 +437,7 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-function VideoIntroduce({ detail, showRedShareBtn}) {
|
|
|
+function VideoIntroduce({ detail, showRedShareBtn }) {
|
|
|
return (
|
|
|
<View className='video-introduce'>
|
|
|
<View className='video-user-info'>
|
|
@@ -415,7 +455,7 @@ function VideoIntroduce({ detail, showRedShareBtn}) {
|
|
|
function VideoBar({ video }) {
|
|
|
const [showTips, setShowTips] = useState(false)
|
|
|
|
|
|
- const sessionMsg = shareTimeline({video})
|
|
|
+ const sessionMsg = shareTimeline({ video })
|
|
|
|
|
|
function clickOperationBar(e) {
|
|
|
e.stopPropagation()
|
|
@@ -427,6 +467,11 @@ function VideoBar({ video }) {
|
|
|
/// TODO:
|
|
|
console.log('share to pyq')
|
|
|
console.log(sessionMsg)
|
|
|
+ let par = Taro.$global.get('sharePageParams') || {}
|
|
|
+ shareContactReport({
|
|
|
+ shareDepth: (par.shareDepth || 0) + 1,
|
|
|
+
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
function shareToFriend() {
|
|
@@ -459,11 +504,11 @@ function VideoBar({ video }) {
|
|
|
<Image src="http://weapppiccdn.yishihui.com/wxicon/common/icon_point_share_wechat.png" />
|
|
|
<View className='text'>分享</View>
|
|
|
</Button>
|
|
|
- <Button className='pyq' onClick={shareToPyq}
|
|
|
- openType='contact'
|
|
|
+ <Button className='pyq' onClick={shareToPyq}
|
|
|
+ openType='contact'
|
|
|
sessionFrom={sessionMsg.session_from}
|
|
|
show-message-card={true}
|
|
|
- sendMessageTitle={sessionMsg.send_msg_title}
|
|
|
+ sendMessageTitle={sessionMsg.send_msg_title}
|
|
|
sendMessageImg={sessionMsg.send_msg_img}
|
|
|
sendMessagePath={sessionMsg.send_msg_path}>
|
|
|
<Image src="http://weapppiccdn.yishihui.com/wxicon/common/icon_point_share_pyq.png" />
|