@@ -83,7 +83,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-else class="mini-player" :class="{ 'with-close': closable }" @tap="handleExpand">
|
<view v-else class="mini-player" :class="{ 'with-close': closable, 'is-static': !expandable }" @tap="handleExpand">
|
||||||
<view class="control-btn play-btn mini-play" @tap.stop="togglePlay">
|
<view class="control-btn play-btn mini-play" @tap.stop="togglePlay">
|
||||||
<svg v-if="displayPlaying" width="26" height="26" viewBox="0 0 24 24" fill="none">
|
<svg v-if="displayPlaying" width="26" height="26" viewBox="0 0 24 24" fill="none">
|
||||||
<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
||||||
@@ -105,7 +105,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="expand-action">
|
<view v-if="expandable" class="expand-action">
|
||||||
<text class="expand-text">展开</text>
|
<text class="expand-text">展开</text>
|
||||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none">
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none">
|
||||||
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
@@ -147,6 +147,7 @@ const props = defineProps<{
|
|||||||
currentTime?: number
|
currentTime?: number
|
||||||
durationValue?: number
|
durationValue?: number
|
||||||
closable?: boolean
|
closable?: boolean
|
||||||
|
expandable?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -201,6 +202,7 @@ const displayPlaybackError = computed(() => props.controlled ? props.playbackErr
|
|||||||
const displayCurrentTime = computed(() => props.controlled ? props.currentTime || 0 : localCurrentTime.value)
|
const displayCurrentTime = computed(() => props.controlled ? props.currentTime || 0 : localCurrentTime.value)
|
||||||
const displayMode = computed<AudioDisplayMode>(() => props.mode || 'mini')
|
const displayMode = computed<AudioDisplayMode>(() => props.mode || 'mini')
|
||||||
const closable = computed(() => props.closable !== false)
|
const closable = computed(() => props.closable !== false)
|
||||||
|
const expandable = computed(() => props.expandable !== false)
|
||||||
const displayAudioLanguage = computed<AudioLanguage>(() => (
|
const displayAudioLanguage = computed<AudioLanguage>(() => (
|
||||||
displayAudio.value?.language === 'en-US' ? 'en-US' : 'zh-CN'
|
displayAudio.value?.language === 'en-US' ? 'en-US' : 'zh-CN'
|
||||||
))
|
))
|
||||||
@@ -497,6 +499,8 @@ const handleSeek = (e: any) => {
|
|||||||
|
|
||||||
// 展开播放器
|
// 展开播放器
|
||||||
const handleExpand = () => {
|
const handleExpand = () => {
|
||||||
|
if (!expandable.value) return
|
||||||
|
|
||||||
emit('expand')
|
emit('expand')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
:current-time="currentTime"
|
:current-time="currentTime"
|
||||||
:duration-value="duration"
|
:duration-value="duration"
|
||||||
:closable="closable"
|
:closable="closable"
|
||||||
|
:expandable="expandable"
|
||||||
:avoid-bottom-nav="avoidBottomNav"
|
:avoid-bottom-nav="avoidBottomNav"
|
||||||
:mode="currentDisplayMode"
|
:mode="currentDisplayMode"
|
||||||
@toggle="handleToggle"
|
@toggle="handleToggle"
|
||||||
@@ -34,10 +35,12 @@ const props = withDefaults(defineProps<{
|
|||||||
avoidBottomNav?: boolean
|
avoidBottomNav?: boolean
|
||||||
displayMode?: AudioDisplayMode
|
displayMode?: AudioDisplayMode
|
||||||
closable?: boolean
|
closable?: boolean
|
||||||
|
expandable?: boolean
|
||||||
}>(), {
|
}>(), {
|
||||||
avoidBottomNav: true,
|
avoidBottomNav: true,
|
||||||
displayMode: 'mini',
|
displayMode: 'mini',
|
||||||
closable: true
|
closable: true,
|
||||||
|
expandable: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const player = useGlobalAudioPlayer()
|
const player = useGlobalAudioPlayer()
|
||||||
@@ -99,6 +102,8 @@ const handleVisibleChange = (visible: boolean) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleExpand = () => {
|
const handleExpand = () => {
|
||||||
|
if (!props.expandable) return
|
||||||
|
|
||||||
if (currentDisplayMode.value === 'floating') {
|
if (currentDisplayMode.value === 'floating') {
|
||||||
player.setDisplayMode('mini')
|
player.setDisplayMode('mini')
|
||||||
return
|
return
|
||||||
|
|||||||
@@ -37,6 +37,7 @@
|
|||||||
:avoid-bottom-nav="audioPlayerAvoidBottomNav"
|
:avoid-bottom-nav="audioPlayerAvoidBottomNav"
|
||||||
:display-mode="audioPlayerMode"
|
:display-mode="audioPlayerMode"
|
||||||
:closable="audioPlayerClosable"
|
:closable="audioPlayerClosable"
|
||||||
|
:expandable="audioPlayerExpandable"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -60,6 +61,7 @@ withDefaults(defineProps<{
|
|||||||
audioPlayerAvoidBottomNav?: boolean
|
audioPlayerAvoidBottomNav?: boolean
|
||||||
audioPlayerMode?: AudioDisplayMode
|
audioPlayerMode?: AudioDisplayMode
|
||||||
audioPlayerClosable?: boolean
|
audioPlayerClosable?: boolean
|
||||||
|
audioPlayerExpandable?: boolean
|
||||||
showAudioPlayerHost?: boolean
|
showAudioPlayerHost?: boolean
|
||||||
}>(), {
|
}>(), {
|
||||||
activeTab: 'guide',
|
activeTab: 'guide',
|
||||||
@@ -74,6 +76,7 @@ withDefaults(defineProps<{
|
|||||||
audioPlayerAvoidBottomNav: true,
|
audioPlayerAvoidBottomNav: true,
|
||||||
audioPlayerMode: 'mini',
|
audioPlayerMode: 'mini',
|
||||||
audioPlayerClosable: true,
|
audioPlayerClosable: true,
|
||||||
|
audioPlayerExpandable: true,
|
||||||
showAudioPlayerHost: false
|
showAudioPlayerHost: false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -5,8 +5,9 @@
|
|||||||
:show-top-tabs="false"
|
:show-top-tabs="false"
|
||||||
:audio-player-avoid-bottom-nav="false"
|
:audio-player-avoid-bottom-nav="false"
|
||||||
:audio-player-closable="false"
|
:audio-player-closable="false"
|
||||||
|
:audio-player-expandable="false"
|
||||||
:show-audio-player-host="true"
|
:show-audio-player-host="true"
|
||||||
audio-player-mode="expanded"
|
audio-player-mode="mini"
|
||||||
@back="handleBack"
|
@back="handleBack"
|
||||||
>
|
>
|
||||||
<view class="explain-detail-page" :class="{ 'with-audio-player': showAudioPlayer }">
|
<view class="explain-detail-page" :class="{ 'with-audio-player': showAudioPlayer }">
|
||||||
@@ -610,7 +611,7 @@ const handlePlayAudio = async () => {
|
|||||||
detailRoute: buildDetailRoute()
|
detailRoute: buildDetailRoute()
|
||||||
},
|
},
|
||||||
retryOnError: refreshCurrentAudioOnce,
|
retryOnError: refreshCurrentAudioOnce,
|
||||||
displayMode: 'expanded'
|
displayMode: 'mini'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user