This commit is contained in:
@@ -15,7 +15,6 @@
|
|||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
/>
|
/>
|
||||||
<view class="expanded-copy">
|
<view class="expanded-copy">
|
||||||
<text class="player-kicker">讲解音频</text>
|
|
||||||
<text class="expanded-title">{{ displayAudio.name }}</text>
|
<text class="expanded-title">{{ displayAudio.name }}</text>
|
||||||
<text class="expanded-subtitle" :class="{ error: displayPlaybackError }">{{ expandedSubtitle }}</text>
|
<text class="expanded-subtitle" :class="{ error: displayPlaybackError }">{{ expandedSubtitle }}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -95,7 +94,6 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="mini-copy">
|
<view class="mini-copy">
|
||||||
<text class="player-kicker">讲解音频</text>
|
|
||||||
<text class="mini-title">{{ displayAudio.name }}</text>
|
<text class="mini-title">{{ displayAudio.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -750,7 +748,6 @@ defineExpose({
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-kicker,
|
|
||||||
.expanded-title,
|
.expanded-title,
|
||||||
.expanded-subtitle,
|
.expanded-subtitle,
|
||||||
.mini-title,
|
.mini-title,
|
||||||
@@ -761,15 +758,7 @@ defineExpose({
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-kicker {
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 23px;
|
|
||||||
font-weight: 900;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expanded-title {
|
.expanded-title {
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 37px;
|
line-height: 37px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
@@ -928,24 +917,36 @@ defineExpose({
|
|||||||
min-height: 116px;
|
min-height: 116px;
|
||||||
padding: 12px 14px 14px;
|
padding: 12px 14px 14px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 56px minmax(0, 1fr) auto auto;
|
grid-template-columns: 56px minmax(0, 1fr) auto;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"play spacer spacer expand"
|
"play copy expand"
|
||||||
"copy copy copy copy"
|
"progress progress progress";
|
||||||
"progress progress progress progress";
|
|
||||||
column-gap: 10px;
|
column-gap: 10px;
|
||||||
row-gap: 7px;
|
row-gap: 10px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini-player.with-close {
|
.mini-player.with-close {
|
||||||
grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
|
grid-template-columns: 56px minmax(0, 1fr) auto auto;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"play spacer spacer expand close"
|
"play copy expand close"
|
||||||
"copy copy copy copy copy"
|
"progress progress progress progress";
|
||||||
"progress progress progress progress progress";
|
}
|
||||||
|
|
||||||
|
.mini-player.is-static {
|
||||||
|
grid-template-columns: 56px minmax(0, 1fr);
|
||||||
|
grid-template-areas:
|
||||||
|
"play copy"
|
||||||
|
"progress progress";
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-player.with-close.is-static {
|
||||||
|
grid-template-columns: 56px minmax(0, 1fr) auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"play copy close"
|
||||||
|
"progress progress progress";
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini-play {
|
.mini-play {
|
||||||
@@ -957,20 +958,13 @@ defineExpose({
|
|||||||
.mini-copy {
|
.mini-copy {
|
||||||
grid-area: copy;
|
grid-area: copy;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
gap: 8px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini-copy .player-kicker {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mini-title {
|
.mini-title {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
margin-top: 2px;
|
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
@@ -1123,21 +1117,33 @@ defineExpose({
|
|||||||
padding: 10px 12px 12px;
|
padding: 10px 12px 12px;
|
||||||
grid-template-columns: 50px minmax(0, 1fr) auto;
|
grid-template-columns: 50px minmax(0, 1fr) auto;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"play spacer expand"
|
"play copy expand"
|
||||||
"copy copy copy"
|
|
||||||
"progress progress progress";
|
"progress progress progress";
|
||||||
column-gap: 8px;
|
column-gap: 8px;
|
||||||
row-gap: 6px;
|
row-gap: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini-player.with-close {
|
.mini-player.with-close {
|
||||||
grid-template-columns: 50px minmax(0, 1fr) auto auto;
|
grid-template-columns: 50px minmax(0, 1fr) auto auto;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"play spacer expand close"
|
"play copy expand close"
|
||||||
"copy copy copy copy"
|
|
||||||
"progress progress progress progress";
|
"progress progress progress progress";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mini-player.is-static {
|
||||||
|
grid-template-columns: 50px minmax(0, 1fr);
|
||||||
|
grid-template-areas:
|
||||||
|
"play copy"
|
||||||
|
"progress progress";
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-player.with-close.is-static {
|
||||||
|
grid-template-columns: 50px minmax(0, 1fr) auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"play copy close"
|
||||||
|
"progress progress progress";
|
||||||
|
}
|
||||||
|
|
||||||
.mini-play {
|
.mini-play {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|||||||
@@ -54,12 +54,14 @@ const {
|
|||||||
currentTime,
|
currentTime,
|
||||||
duration,
|
duration,
|
||||||
displayMode: currentDisplayMode,
|
displayMode: currentDisplayMode,
|
||||||
|
activeHostId,
|
||||||
hasAudio
|
hasAudio
|
||||||
} = player
|
} = player
|
||||||
const hostId = player.registerHost()
|
const hostId = player.registerHost()
|
||||||
const isHostVisible = computed(() => (
|
const isHostVisible = computed(() => (
|
||||||
visible.value
|
visible.value
|
||||||
&& hasAudio.value
|
&& hasAudio.value
|
||||||
|
&& activeHostId.value === hostId
|
||||||
))
|
))
|
||||||
|
|
||||||
const handleToggle = () => {
|
const handleToggle = () => {
|
||||||
|
|||||||
@@ -417,7 +417,6 @@ const seekToPercent = (percent: number) => {
|
|||||||
const registerHost = () => {
|
const registerHost = () => {
|
||||||
hostSequence += 1
|
hostSequence += 1
|
||||||
const hostId = `global-audio-host-${hostSequence}`
|
const hostId = `global-audio-host-${hostSequence}`
|
||||||
activeHostId.value = hostId
|
|
||||||
return hostId
|
return hostId
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -209,17 +209,6 @@ const isCurrentDetailAudio = computed(() => globalAudioPlayer.isCurrentSource(cu
|
|||||||
const showAudioPlayer = computed(() => (
|
const showAudioPlayer = computed(() => (
|
||||||
globalAudioPlayer.visible.value && globalAudioPlayer.hasAudio.value
|
globalAudioPlayer.visible.value && globalAudioPlayer.hasAudio.value
|
||||||
))
|
))
|
||||||
const isDetailAudioDockVisible = computed(() => (
|
|
||||||
exhibit.value.audio.status === 'playable'
|
|
||||||
&& !isCurrentDetailAudio.value
|
|
||||||
))
|
|
||||||
const audioDockTitle = computed(() => (
|
|
||||||
selectedAudioLanguage.value === 'en-US' ? 'English audio' : '中文讲解音频'
|
|
||||||
))
|
|
||||||
const audioDockSubtitle = computed(() => [
|
|
||||||
exhibit.value.title,
|
|
||||||
exhibit.value.audio.durationLabel
|
|
||||||
].filter(Boolean).join(' · ') || '讲解音频')
|
|
||||||
const isCurrentDetailAudioTarget = computed(() => {
|
const isCurrentDetailAudioTarget = computed(() => {
|
||||||
const source = globalAudioPlayer.currentSource.value
|
const source = globalAudioPlayer.currentSource.value
|
||||||
const targetType = exhibit.value.audio.playTargetType || 'ITEM'
|
const targetType = exhibit.value.audio.playTargetType || 'ITEM'
|
||||||
@@ -231,6 +220,15 @@ const isCurrentDetailAudioTarget = computed(() => {
|
|||||||
&& source.targetId === targetId
|
&& source.targetId === targetId
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
const isDetailAudioDockVisible = computed(() => (
|
||||||
|
exhibit.value.audio.status === 'playable'
|
||||||
|
&& !isCurrentDetailAudioTarget.value
|
||||||
|
))
|
||||||
|
const audioDockTitle = computed(() => exhibit.value.title || '讲解内容')
|
||||||
|
const audioDockSubtitle = computed(() => [
|
||||||
|
selectedAudioLanguage.value === 'en-US' ? 'English' : '中文',
|
||||||
|
exhibit.value.audio.durationLabel
|
||||||
|
].filter(Boolean).join(' · ') || '讲解')
|
||||||
// 讲解详情页只定位到所属展厅,不再追踪具体展品点位。
|
// 讲解详情页只定位到所属展厅,不再追踪具体展品点位。
|
||||||
const resolveHallGuidePoi = async () => {
|
const resolveHallGuidePoi = async () => {
|
||||||
return guideUseCase.resolveContentLocationPreviewTarget({
|
return guideUseCase.resolveContentLocationPreviewTarget({
|
||||||
@@ -1271,6 +1269,8 @@ const handleBack = () => {
|
|||||||
.detail-audio-main {
|
.detail-audio-main {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
padding-top: 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-audio-title,
|
.detail-audio-title,
|
||||||
|
|||||||
Reference in New Issue
Block a user