3ab1f2db24
- DBManager DB创建管理器 - FormatTimeTool - ImageViewer工具 - InputArear工具 - OverlayPage工具 - 下拉刷新容器工具 - 视频查看器工具
671 lines
16 KiB
Vue
671 lines
16 KiB
Vue
<template>
|
||
<view
|
||
v-if="visible"
|
||
class="vv-root"
|
||
:class="{ 'vv-root--closing': animPhase === 'exiting' }"
|
||
:style="{ ...rootStyle, ...animationStyles.root }"
|
||
@click="animPhase !== 'exiting' && onOverlayClick()"
|
||
>
|
||
<view
|
||
class="vv-backdrop"
|
||
:class="{ 'vv-backdrop--expanded': expanded, 'vv-backdrop--closing': animPhase === 'exiting' }"
|
||
:style="animationStyles.backdrop"
|
||
@click.stop
|
||
/>
|
||
<view
|
||
class="vv-transform-wrap"
|
||
:style="{ ...transformWrapStyle, ...animationStyles.transformWrap }"
|
||
@click.stop="animPhase !== 'exiting' && requestClose()"
|
||
>
|
||
<!-- ✨ 结构稳如磐石，不再依据 expanded 动态销毁，彻底根除闪屏 -->
|
||
<view
|
||
v-if="showSingleContent"
|
||
class="vv-pinch-wrap"
|
||
:style="pinchWrapStyle"
|
||
>
|
||
<!-- 封面图坚挺防线，直到视频放出第一帧才隐退 -->
|
||
<image
|
||
v-if="currentItem?.thumb_url && !isVideoStarted"
|
||
class="vv-thumb"
|
||
:src="currentItem.thumb_url"
|
||
mode="aspectFit"
|
||
/>
|
||
<!-- 视频常驻 DOM，但用隐藏类名代替销毁 -->
|
||
<video
|
||
:id="getVideoId(currentIndex)"
|
||
class="vv-video"
|
||
:class="{ 'vv-video--hide': animPhase !== 'displaying' }"
|
||
:src="currentItem?.media_url"
|
||
object-fit="contain"
|
||
:autoplay="false"
|
||
playsinline="true"
|
||
webkit-playsinline="true"
|
||
x5-playsinline="true"
|
||
x5-video-player-type="h5"
|
||
x5-video-player-fullscreen="false"
|
||
:controls="false"
|
||
:show-center-play-btn="false"
|
||
:show-fullscreen-btn="false"
|
||
:show-play-btn="false"
|
||
:show-progress="false"
|
||
:enable-progress-gesture="false"
|
||
:loop="false"
|
||
:muted="false"
|
||
@play="onVideoPlay"
|
||
@pause="onVideoPause"
|
||
@ended="onVideoEnded"
|
||
@waiting="onVideoWaiting"
|
||
@error="onVideoError"
|
||
/>
|
||
</view>
|
||
|
||
<view v-if="showSwiper" class="vv-slides-view">
|
||
<view class="vv-slides-track" :style="slidesTrackStyle">
|
||
<view
|
||
v-for="(item, i) in items"
|
||
:key="i"
|
||
class="vv-slide"
|
||
:style="{ width: slideWidthPx + 'px' }"
|
||
v-show="isSlideVisible(i)"
|
||
@touchstart="onSlideTouchStart"
|
||
@touchmove="onSlideTouchMove"
|
||
@touchend="onSlideTouchEnd"
|
||
@touchcancel="onSlideTouchEnd"
|
||
>
|
||
<view class="vv-pinch-wrap">
|
||
<image
|
||
v-if="item?.thumb_url && (i !== currentIndex || !isVideoStarted)"
|
||
class="vv-thumb"
|
||
:src="item.thumb_url"
|
||
mode="aspectFit"
|
||
/>
|
||
<video
|
||
v-if="i === currentIndex"
|
||
:id="getVideoId(i)"
|
||
class="vv-video"
|
||
:class="{ 'vv-video--hide': animPhase !== 'displaying' }"
|
||
:src="item.media_url"
|
||
object-fit="contain"
|
||
:autoplay="false"
|
||
playsinline="true"
|
||
webkit-playsinline="true"
|
||
x5-playsinline="true"
|
||
x5-video-player-type="h5"
|
||
x5-video-player-fullscreen="false"
|
||
:controls="false"
|
||
:show-center-play-btn="false"
|
||
:show-fullscreen-btn="false"
|
||
:show-play-btn="false"
|
||
:show-progress="false"
|
||
:enable-progress-gesture="false"
|
||
:loop="false"
|
||
@play="onVideoPlay"
|
||
@pause="onVideoPause"
|
||
@ended="onVideoEnded"
|
||
@waiting="onVideoWaiting"
|
||
@error="onVideoError"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-show="showLoading" class="vv-loading">
|
||
<view class="vv-loading-spinner"></view>
|
||
</view>
|
||
</view>
|
||
<view v-show="showSwiper" class="vv-dots-wrap" @click.stop="requestClose">
|
||
<view class="vv-dots">
|
||
<text class="vv-dots__text">{{ currentIndex + 1 }} / {{ items.length }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, inject, nextTick, onUnmounted, shallowRef } from 'vue'
|
||
|
||
export type InitialRect = { left: number; top: number; width: number; height: number }
|
||
export type VideoItem = { media_url: string; thumb_url?: string }
|
||
|
||
const SLIDE_DRAG_THRESHOLD = 60
|
||
const SLIDE_ANIMATION_MS = 200
|
||
const SLIDE_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
|
||
const SLIDE_DRAG_FACTOR = 1.35
|
||
const OPEN_BLUR_S = 0.25
|
||
const OPEN_ANIMATION_EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
|
||
const EXIT_BLUR_S = 0.25
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
visible: boolean
|
||
items: VideoItem[]
|
||
current?: number
|
||
initialRect?: InitialRect | null
|
||
zIndex?: number
|
||
}>(),
|
||
{ current: 0, initialRect: null, zIndex: 9999 }
|
||
)
|
||
|
||
const emit = defineEmits<{ close: [] }>()
|
||
|
||
const tabRootBackPress = inject<{
|
||
register: (h: { check: () => boolean; close: () => void }) => () => void
|
||
}>('tabRootBackPress', undefined as any)
|
||
|
||
type AnimPhase = 'entering' | 'displaying' | 'exiting'
|
||
const animPhase = ref<AnimPhase | null>(null)
|
||
const enterPaintReady = ref(false)
|
||
const enterTargetPainted = ref(false)
|
||
let enterCompleteTimer: ReturnType<typeof setTimeout> | null = null
|
||
let exitCompleteTimer: ReturnType<typeof setTimeout> | null = null
|
||
|
||
const expanded = ref(false)
|
||
const currentIndex = ref(0)
|
||
const windowSize = ref({ width: 375, height: 667 })
|
||
const isVideoPlaying = ref(false)
|
||
const isVideoLoading = ref(false)
|
||
const isVideoStarted = ref(false)
|
||
|
||
const videoContextRef = shallowRef<UniApp.VideoContext | null>(null)
|
||
|
||
let unregisterBack: (() => void) | null = null
|
||
let videoContextMap = new Map<number, UniApp.VideoContext>()
|
||
|
||
const uid = Date.now()
|
||
|
||
function getVideoId(index: number): string {
|
||
return `vv-video-${uid}-${index}`
|
||
}
|
||
|
||
function getVideoContext(index: number): UniApp.VideoContext | null {
|
||
if (!videoContextMap.has(index)) {
|
||
const id = getVideoId(index)
|
||
videoContextMap.set(index, uni.createVideoContext(id))
|
||
}
|
||
return videoContextMap.get(index) || null
|
||
}
|
||
|
||
const showLoading = computed(() => isVideoLoading.value && !isVideoPlaying.value)
|
||
|
||
function clearAnimTimers() {
|
||
if (enterCompleteTimer) {
|
||
clearTimeout(enterCompleteTimer)
|
||
enterCompleteTimer = null
|
||
}
|
||
if (exitCompleteTimer) {
|
||
clearTimeout(exitCompleteTimer)
|
||
exitCompleteTimer = null
|
||
}
|
||
}
|
||
|
||
function nextFrame(fn: () => void) {
|
||
if (typeof requestAnimationFrame !== 'undefined') requestAnimationFrame(fn)
|
||
else setTimeout(fn, 0)
|
||
}
|
||
|
||
function startEnterPhase() {
|
||
animPhase.value = 'entering'
|
||
enterPaintReady.value = false
|
||
enterTargetPainted.value = false
|
||
clearAnimTimers()
|
||
nextFrame(() => {
|
||
enterPaintReady.value = true
|
||
nextFrame(() => { enterTargetPainted.value = true })
|
||
})
|
||
enterCompleteTimer = setTimeout(() => {
|
||
enterCompleteTimer = null
|
||
animPhase.value = 'displaying'
|
||
// ✨ 动画结束，节点归位，由代码安全唤起播放
|
||
playCurrentVideo()
|
||
}, OPEN_BLUR_S * 1000)
|
||
}
|
||
|
||
function startExitPhase(onComplete: () => void) {
|
||
animPhase.value = 'exiting'
|
||
clearAnimTimers()
|
||
exitCompleteTimer = setTimeout(() => {
|
||
exitCompleteTimer = null
|
||
onComplete()
|
||
}, EXIT_BLUR_S * 1000)
|
||
}
|
||
|
||
function playCurrentVideo() {
|
||
nextTick(() => {
|
||
const ctx = getVideoContext(currentIndex.value)
|
||
if (ctx) {
|
||
ctx.play()
|
||
}
|
||
})
|
||
}
|
||
|
||
function stopAllVideo() {
|
||
videoContextMap.forEach(ctx => {
|
||
if (ctx) {
|
||
try { ctx.pause() } catch {}
|
||
}
|
||
})
|
||
}
|
||
|
||
function onVideoPlay() {
|
||
isVideoPlaying.value = true
|
||
isVideoLoading.value = false
|
||
isVideoStarted.value = true
|
||
}
|
||
|
||
function onVideoPause() {
|
||
isVideoPlaying.value = false
|
||
}
|
||
|
||
function onVideoEnded() {
|
||
isVideoPlaying.value = false
|
||
}
|
||
|
||
function onVideoWaiting() {
|
||
isVideoLoading.value = true
|
||
}
|
||
|
||
function onVideoError(e: any) {
|
||
console.error('[VideoViewer] 视频播放错误:', e)
|
||
isVideoLoading.value = false
|
||
isVideoPlaying.value = false
|
||
}
|
||
|
||
const dragOffsetPx = ref(0)
|
||
const slideTransitionOn = ref(false)
|
||
let panStart: { startX: number; baseDragOffset: number } | null = null
|
||
|
||
const slideWidthPx = computed(() => windowSize.value.width)
|
||
const slidesTrackStyle = computed(() => {
|
||
const w = windowSize.value.width
|
||
const n = props.items?.length ?? 0
|
||
const tx = n <= 0 ? 0 : -currentIndex.value * w + dragOffsetPx.value
|
||
return {
|
||
width: `${n * w}px`,
|
||
transform: `translateX(${tx}px)`,
|
||
transition: slideTransitionOn.value ? `transform ${SLIDE_ANIMATION_MS}ms ${SLIDE_EASE}` : 'none'
|
||
}
|
||
})
|
||
|
||
function clamp(v: number, min: number, max: number) {
|
||
return Math.max(min, Math.min(max, v))
|
||
}
|
||
|
||
function isSlideVisible(i: number) {
|
||
const c = currentIndex.value
|
||
return i >= c - 1 && i <= c + 1
|
||
}
|
||
|
||
const pinchWrapStyle = computed(() => ({ transform: 'translate(0, 0) scale(1)' }))
|
||
|
||
function handleSlideDrag(t: { clientX: number }) {
|
||
if (!panStart) return
|
||
const dx = t.clientX - panStart.startX
|
||
const w = windowSize.value.width
|
||
dragOffsetPx.value = clamp((panStart.baseDragOffset ?? 0) + dx * SLIDE_DRAG_FACTOR, -w, w)
|
||
}
|
||
|
||
function goToSlide(delta: -1 | 1) {
|
||
const n = props.items?.length || 0
|
||
if (n <= 1) return
|
||
const oldIdx = currentIndex.value
|
||
const nextIdx = delta < 0 ? Math.max(0, oldIdx - 1) : Math.min(n - 1, oldIdx + 1)
|
||
if (nextIdx === oldIdx) return
|
||
|
||
stopAllVideo()
|
||
isVideoPlaying.value = false
|
||
isVideoStarted.value = false
|
||
|
||
currentIndex.value = nextIdx
|
||
slideTransitionOn.value = true
|
||
dragOffsetPx.value = 0
|
||
|
||
setTimeout(() => {
|
||
slideTransitionOn.value = false
|
||
if (animPhase.value === 'displaying') {
|
||
playCurrentVideo()
|
||
}
|
||
}, SLIDE_ANIMATION_MS)
|
||
}
|
||
|
||
function onSlideTouchStart(e: any) {
|
||
if (e.touches.length === 1) {
|
||
panStart = { startX: e.touches[0].clientX, baseDragOffset: dragOffsetPx.value }
|
||
}
|
||
}
|
||
|
||
function onSlideTouchMove(e: any) {
|
||
if (e.touches.length === 1 && panStart) {
|
||
e.preventDefault()
|
||
handleSlideDrag(e.touches[0])
|
||
}
|
||
}
|
||
|
||
function onSlideTouchEnd(e: any) {
|
||
if (e.touches.length === 0) {
|
||
const n = props.items?.length ?? 0
|
||
if (n <= 1) { panStart = null; return }
|
||
const th = SLIDE_DRAG_THRESHOLD
|
||
if (dragOffsetPx.value > th && currentIndex.value > 0) goToSlide(-1)
|
||
else if (dragOffsetPx.value < -th && currentIndex.value < n - 1) goToSlide(1)
|
||
else {
|
||
slideTransitionOn.value = true
|
||
dragOffsetPx.value = 0
|
||
setTimeout(() => { slideTransitionOn.value = false }, SLIDE_ANIMATION_MS)
|
||
}
|
||
panStart = null
|
||
} else if (e.touches.length === 1 && panStart) {
|
||
panStart = { ...panStart, baseDragOffset: dragOffsetPx.value }
|
||
}
|
||
}
|
||
|
||
const isMulti = computed(() => (props.items?.length || 0) > 1)
|
||
|
||
const currentItem = computed(() => {
|
||
const list = props.items || []
|
||
const i = Math.max(0, Math.min(currentIndex.value, list.length - 1))
|
||
return list[i] || null
|
||
})
|
||
|
||
// ✨ 单轨与多轨完全基于数据长度固定，生命周期内再无结构突变，杜绝 OS 重排闪屏
|
||
const showSwiper = computed(() => isMulti.value)
|
||
const showSingleContent = computed(() => !isMulti.value)
|
||
|
||
const rootStyle = computed(() => ({ zIndex: props.zIndex }))
|
||
|
||
const animationStyles = computed(() => {
|
||
const phase = animPhase.value
|
||
const transOpen = `opacity ${OPEN_BLUR_S}s ${OPEN_ANIMATION_EASE}`
|
||
const transExit = `opacity ${EXIT_BLUR_S}s ease-out`
|
||
|
||
if (phase === 'exiting') {
|
||
return {
|
||
root: { transition: transExit, opacity: 0, pointerEvents: 'none' as const },
|
||
backdrop: { transition: `opacity ${EXIT_BLUR_S}s ease-out`, opacity: 0 },
|
||
transformWrap: { transition: transExit, opacity: 0, pointerEvents: 'none' as const }
|
||
}
|
||
}
|
||
|
||
if (phase === 'entering' || phase === 'displaying') {
|
||
const applyTarget = phase === 'displaying' || (phase === 'entering' && enterPaintReady.value)
|
||
if (!applyTarget) {
|
||
return { root: { opacity: 0 }, backdrop: { opacity: 0 }, transformWrap: { opacity: 0 } }
|
||
}
|
||
return {
|
||
root: { transition: transOpen, opacity: 1 },
|
||
backdrop: { transition: transOpen, opacity: 1 },
|
||
transformWrap: { transition: transOpen, opacity: 1 }
|
||
}
|
||
}
|
||
return { root: {}, backdrop: {}, transformWrap: {} }
|
||
})
|
||
|
||
const transformWrapStyle = computed(() => {
|
||
return {
|
||
left: '0',
|
||
top: '0',
|
||
right: '0',
|
||
bottom: '0',
|
||
width: '100%',
|
||
height: '100%',
|
||
opacity: 0
|
||
}
|
||
})
|
||
|
||
function registerBack() {
|
||
if (tabRootBackPress) {
|
||
unregisterBack = tabRootBackPress.register({
|
||
check: () => props.visible,
|
||
close
|
||
})
|
||
}
|
||
}
|
||
|
||
function unregisterBackHandler() {
|
||
if (unregisterBack) {
|
||
unregisterBack()
|
||
unregisterBack = null
|
||
}
|
||
}
|
||
|
||
function onOverlayClick() {
|
||
requestClose()
|
||
}
|
||
|
||
function requestClose() {
|
||
if (animPhase.value === 'exiting') return
|
||
stopAllVideo()
|
||
isVideoPlaying.value = false
|
||
isVideoLoading.value = false
|
||
isVideoStarted.value = false
|
||
nextFrame(() => {
|
||
startExitPhase(() => {
|
||
expanded.value = false
|
||
animPhase.value = null
|
||
emit('close')
|
||
})
|
||
})
|
||
}
|
||
|
||
function close() {
|
||
requestClose()
|
||
}
|
||
|
||
watch(
|
||
() => props.visible,
|
||
(v) => {
|
||
if (v) {
|
||
try {
|
||
const sys = uni.getSystemInfoSync()
|
||
windowSize.value = {
|
||
width: sys.windowWidth ?? sys.screenWidth ?? 375,
|
||
height: sys.windowHeight ?? sys.screenHeight ?? 667
|
||
}
|
||
} catch {
|
||
windowSize.value = { width: 375, height: 667 }
|
||
}
|
||
currentIndex.value = Math.max(0, Math.min(props.current, (props.items?.length || 1) - 1))
|
||
isVideoPlaying.value = false
|
||
isVideoLoading.value = false
|
||
isVideoStarted.value = false
|
||
videoContextMap.clear()
|
||
expanded.value = !props.initialRect || props.initialRect.width <= 0 || props.initialRect.height <= 0
|
||
registerBack()
|
||
if (props.initialRect && props.initialRect.width > 0 && props.initialRect.height > 0) {
|
||
setTimeout(() => {
|
||
expanded.value = true
|
||
startEnterPhase()
|
||
}, 50)
|
||
} else {
|
||
expanded.value = true
|
||
startEnterPhase()
|
||
}
|
||
} else {
|
||
expanded.value = false
|
||
animPhase.value = null
|
||
enterPaintReady.value = false
|
||
enterTargetPainted.value = false
|
||
isVideoPlaying.value = false
|
||
isVideoLoading.value = false
|
||
isVideoStarted.value = false
|
||
clearAnimTimers()
|
||
dragOffsetPx.value = 0
|
||
slideTransitionOn.value = false
|
||
panStart = null
|
||
stopAllVideo()
|
||
videoContextMap.clear()
|
||
unregisterBackHandler()
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
watch(() => props.current, (v) => {
|
||
currentIndex.value = Math.max(0, Math.min(v, (props.items?.length || 1) - 1))
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
clearAnimTimers()
|
||
unregisterBackHandler()
|
||
stopAllVideo()
|
||
videoContextMap.clear()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.vv-root {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.vv-root--closing {
|
||
opacity: 0;
|
||
}
|
||
|
||
.vv-backdrop {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.vv-backdrop--expanded {
|
||
background: rgba(0, 0, 0, 0.94);
|
||
opacity: 1;
|
||
}
|
||
|
||
.vv-backdrop--closing {
|
||
opacity: 0;
|
||
}
|
||
|
||
.vv-transform-wrap {
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
}
|
||
|
||
.vv-pinch-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
display: block;
|
||
touch-action: none;
|
||
}
|
||
|
||
.vv-video {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ✨ 修复：进入和退出期间，利用极端的缩放和位移将 video 丢出屏幕 */
|
||
.vv-video--hide {
|
||
transform: translateX(-9999px) scale(0.001);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.vv-thumb {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
z-index: 2;
|
||
}
|
||
|
||
.vv-slides-view {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.vv-slides-track {
|
||
display: flex;
|
||
height: 100%;
|
||
flex-shrink: 0;
|
||
will-change: transform;
|
||
}
|
||
|
||
.vv-slide {
|
||
flex: 0 0 auto;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.vv-dots-wrap {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 2;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
|
||
pointer-events: none;
|
||
}
|
||
|
||
.vv-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.vv-dots__text {
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
background: rgba(0, 0, 0, 0.4);
|
||
padding: 8rpx 24rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.vv-loading {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 10;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.vv-loading-spinner {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||
border-top-color: #fff;
|
||
border-radius: 50%;
|
||
animation: vv-spin 0.8s linear infinite;
|
||
}
|
||
|
||
@keyframes vv-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
</style> |