feat(vap播放组件): 兼容苹果系统自动播放设置
This commit is contained in:
hzj
parent
ede7dce92c
commit
2378a8835a
@ -3,7 +3,6 @@
|
||||
<!-- 预加载状态 -->
|
||||
<div v-if="isLoading" class="loading-container">
|
||||
<!-- 页面背景 -->
|
||||
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
|
||||
|
||||
<!-- 加载动画 -->
|
||||
<LoadingSpinner />
|
||||
@ -14,15 +13,8 @@
|
||||
<div class="active-game-shell scroll">
|
||||
<div class="active-game-stage">
|
||||
<!-- 头部动画（带声音） -->
|
||||
<VapBg class="vap-background-layer" :src="bgVapUrl" />
|
||||
<VapBg class="vap-background-layer" />
|
||||
<!-- 页面背景 -->
|
||||
<div class="page-background-layer">
|
||||
<BackgroundLayer
|
||||
:useCanvas="true"
|
||||
:backgroundImages="[imageUrl('bg')]"
|
||||
:layerStyle="{ position: 'absolute', top: 0, left: 0, minHeight: 0, zIndex: 0 }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
@ -316,9 +308,14 @@ justify-content: flex-start;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div class="reward-showcase-vap-wrap" :key="mainRewardRenderKey">
|
||||
<div
|
||||
class="reward-showcase-vap-wrap"
|
||||
:key="mainRewardRenderKey"
|
||||
:class="{ 'reward-showcase-vap-wrap-playable': mainReward?.sourceUrl }"
|
||||
@click="playMainRewardPreview"
|
||||
>
|
||||
<VapMp4Player
|
||||
v-if="mainReward.sourceUrl"
|
||||
v-if="mainReward.sourceUrl && rewardPreviewPlaying"
|
||||
:model-value="true"
|
||||
:src="mainReward.sourceUrl"
|
||||
mode="inline"
|
||||
@ -331,12 +328,20 @@ justify-content: flex-start;
|
||||
@error="handleRewardVapError"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
v-if="!mainReward.sourceUrl || !rewardPreviewPlaying"
|
||||
:src="mainReward.cover || ''"
|
||||
alt=""
|
||||
style="display: block; width: 90%; object-fit: contain"
|
||||
@error="(e) => handleRewardImageError(e, mainReward.type)"
|
||||
/>
|
||||
<button
|
||||
v-if="mainReward.sourceUrl && !rewardPreviewPlaying"
|
||||
type="button"
|
||||
class="reward-showcase-play-button"
|
||||
@click.stop="playMainRewardPreview"
|
||||
>
|
||||
<span class="reward-showcase-play-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -490,11 +495,11 @@ justify-content: flex-start;
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { getMp4Url, getPngUrl } from '@/config/imagePaths.js'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/image/imagePreloader.js'
|
||||
import { useLangStore } from '@/stores/lang'
|
||||
import { showError } from '@/utils/toast.js'
|
||||
@ -510,7 +515,6 @@ import { handleRewardImageError } from '@/utils/image/imageHandler.js'
|
||||
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
|
||||
import { useThrottle } from '@/utils/useDebounce.js'
|
||||
|
||||
import BackgroundLayer from '@/components/BackgroundLayer.vue'
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
import VapMp4Player from '@/components/VapMp4Player.vue'
|
||||
@ -531,8 +535,6 @@ const isRtlLayout = computed(() => {
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const imageUrl = (filename) => getPngUrl('Activities/DailyRecharge/', filename)
|
||||
const mp4Url = (filename) => getMp4Url('Activities/DailyRecharge/', filename)
|
||||
const bgVapUrl = mp4Url('bg')
|
||||
const CHEST_PROGRESS_GAP_VW = 2
|
||||
const CHEST_PROGRESS_ITEM_WIDTH_VW = 14
|
||||
const CHEST_PROGRESS_FIRST_CENTER_VW = CHEST_PROGRESS_GAP_VW + CHEST_PROGRESS_ITEM_WIDTH_VW / 2
|
||||
@ -695,6 +697,8 @@ const rewardGridList = computed(() => {
|
||||
const mainRewardRenderKey = computed(() => {
|
||||
return mainReward.value ? getRewardRenderKey(mainReward.value, 0) : 'empty-main-reward'
|
||||
})
|
||||
const rewardPreviewPlaying = ref(false)
|
||||
const rewardVapPreloadElements = new Map()
|
||||
|
||||
const isLocalRewardAsset = (reward) => {
|
||||
return Boolean(reward?.localRewardAsset)
|
||||
@ -715,6 +719,50 @@ const getRewardRenderKey = (reward, index) => {
|
||||
].join('-')
|
||||
}
|
||||
|
||||
const getRewardVapUrls = (rewardTopList) => {
|
||||
return (rewardTopList || [])
|
||||
.flatMap((rewardTop) => rewardTop?.propsGroup?.activityRewardProps || [])
|
||||
.map((reward) => resolveProtectedAssetUrl(reward?.sourceUrl || ''))
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
const preloadRewardVap = (sourceUrl) => {
|
||||
if (!sourceUrl || rewardVapPreloadElements.has(sourceUrl)) {
|
||||
return
|
||||
}
|
||||
|
||||
preloadVapConfig(sourceUrl)
|
||||
|
||||
if (typeof document === 'undefined') {
|
||||
return
|
||||
}
|
||||
|
||||
const preloadVideo = document.createElement('video')
|
||||
preloadVideo.preload = 'auto'
|
||||
preloadVideo.muted = true
|
||||
preloadVideo.defaultMuted = true
|
||||
preloadVideo.playsInline = true
|
||||
preloadVideo.setAttribute('playsinline', '')
|
||||
preloadVideo.setAttribute('webkit-playsinline', '')
|
||||
preloadVideo.setAttribute('x5-playsinline', '')
|
||||
preloadVideo.src = sourceUrl
|
||||
preloadVideo.style.position = 'fixed'
|
||||
preloadVideo.style.left = '-9999px'
|
||||
preloadVideo.style.top = '0'
|
||||
preloadVideo.style.width = '1px'
|
||||
preloadVideo.style.height = '1px'
|
||||
preloadVideo.style.opacity = '0'
|
||||
preloadVideo.style.pointerEvents = 'none'
|
||||
document.body.appendChild(preloadVideo)
|
||||
preloadVideo.load()
|
||||
|
||||
rewardVapPreloadElements.set(sourceUrl, preloadVideo)
|
||||
}
|
||||
|
||||
const preloadRewardVaps = (rewardTopList) => {
|
||||
getRewardVapUrls(rewardTopList).forEach(preloadRewardVap)
|
||||
}
|
||||
|
||||
const getExtraRewardsByLevel = (level) => {
|
||||
switch (Number(level)) {
|
||||
case 8:
|
||||
@ -814,9 +862,22 @@ const openPopup = (type) => {
|
||||
|
||||
const handleRewardVapError = (error) => {
|
||||
console.error('Reward VAP playback failed:', error)
|
||||
rewardPreviewPlaying.value = false
|
||||
showError(error?.message || t('active_game_vap_playback_failed'))
|
||||
}
|
||||
|
||||
const playMainRewardPreview = () => {
|
||||
if (!mainReward.value?.sourceUrl) {
|
||||
return
|
||||
}
|
||||
|
||||
rewardPreviewPlaying.value = true
|
||||
}
|
||||
|
||||
watch(mainRewardRenderKey, () => {
|
||||
rewardPreviewPlaying.value = false
|
||||
})
|
||||
|
||||
const claimTask1Reward = useThrottle(async () => {
|
||||
if (!canClaimTask1Reward.value) {
|
||||
return
|
||||
@ -873,6 +934,7 @@ const getActivityRewards = async () => {
|
||||
const res = await apiGetActivityResource('DAILY_RECHARGE_TASK2')
|
||||
if (res.status && res.body) {
|
||||
activityRewards.value = Array.isArray(res.body) ? appendExtraRewards(res.body) : []
|
||||
preloadRewardVaps(activityRewards.value)
|
||||
}
|
||||
}
|
||||
|
||||
@ -883,7 +945,6 @@ const initData = async () => {
|
||||
const preloadCriticalImages = async () => {
|
||||
const chestImages = chestProgressList.value.map((chest) => imageUrl(getChestImageName(chest)))
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('totalRewardBg'),
|
||||
imageUrl('lvTaskBg'),
|
||||
imageUrl('LvRewardInfoBg'),
|
||||
@ -907,7 +968,6 @@ const preloadCriticalImages = async () => {
|
||||
|
||||
await Promise.all([
|
||||
preloadImages(criticalImages),
|
||||
preloadVapConfig(resolveProtectedAssetUrl(bgVapUrl)),
|
||||
])
|
||||
}
|
||||
|
||||
@ -931,6 +991,16 @@ const connectToAppHandler = async () => {
|
||||
onMounted(() => {
|
||||
connectToAppHandler()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
rewardVapPreloadElements.forEach((video) => {
|
||||
video.pause()
|
||||
video.removeAttribute('src')
|
||||
video.load()
|
||||
video.parentNode && video.parentNode.removeChild(video)
|
||||
})
|
||||
rewardVapPreloadElements.clear()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -972,20 +1042,9 @@ onMounted(() => {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.page-background-layer {
|
||||
position: absolute;
|
||||
top: 120vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vap-background-layer {
|
||||
width: 100vw;
|
||||
height: 150vw;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -1096,6 +1155,38 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reward-showcase-vap-wrap-playable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reward-showcase-play-button {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
min-width: 36px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.42);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.reward-showcase-play-icon {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 0.4vw;
|
||||
border-top: 1.8vw solid transparent;
|
||||
border-bottom: 1.8vw solid transparent;
|
||||
border-left: 2.8vw solid #fff;
|
||||
}
|
||||
|
||||
.reward-showcase-grid {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
@ -1,57 +1,17 @@
|
||||
<template>
|
||||
<div class="active-game-page">
|
||||
<VapMp4Player
|
||||
v-model="backgroundVisible"
|
||||
class="vap-background"
|
||||
:src="src"
|
||||
mode="inline"
|
||||
fit="cover"
|
||||
:loop="true"
|
||||
:mute="true"
|
||||
:auto-close="false"
|
||||
:show-status="false"
|
||||
@error="handleVapError"
|
||||
/>
|
||||
</div>
|
||||
<img :src="BACKGROUND_IMAGE_URL" alt="" class="vap-image" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { showError } from '@/utils/toast.js'
|
||||
import VapMp4Player from '@/components/VapMp4Player.vue'
|
||||
import { preloadVapConfig } from '@/utils/vapMp4Config.js'
|
||||
import { resolveProtectedAssetUrl } from '@/utils/protectedAssets.js'
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const backgroundVisible = ref(true)
|
||||
|
||||
function preloadTestVap() {
|
||||
if (props.src) {
|
||||
preloadVapConfig(resolveProtectedAssetUrl(props.src))
|
||||
}
|
||||
}
|
||||
|
||||
function handleVapError(error) {
|
||||
console.error('VAP playback failed:', error)
|
||||
showError(error?.message || 'VAP playback failed')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
preloadTestVap()
|
||||
})
|
||||
const BACKGROUND_IMAGE_URL =
|
||||
'http://tkm-likei.oss-accelerate.aliyuncs.com/other/manager-ef352b4f-09a3-492b-8aa6-b8cf2d73ddd1.png'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.active-game-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.vap-image {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user