修复讲解全局音频播放器交互
This commit is contained in:
@@ -1,84 +1,181 @@
|
||||
<template>
|
||||
<view class="audio-player-host">
|
||||
<view
|
||||
class="audio-player"
|
||||
:class="{ 'avoid-bottom-nav': avoidBottomNav }"
|
||||
v-if="visible && displayAudio"
|
||||
>
|
||||
<!-- 迷你播放器 (底部固定) -->
|
||||
<view class="mini-player" @tap="handleExpand">
|
||||
<!-- 封面图 -->
|
||||
<view class="player-cover">
|
||||
<image
|
||||
class="cover-image"
|
||||
:src="displayAudio?.image || EXHIBIT_PLACEHOLDER_IMAGE"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view
|
||||
v-if="visible && displayAudio"
|
||||
class="audio-player"
|
||||
:class="[`mode-${displayMode}`, { 'avoid-bottom-nav': avoidBottomNav }]"
|
||||
>
|
||||
<view v-if="displayMode === 'expanded'" class="expanded-player">
|
||||
<view class="player-handle"></view>
|
||||
<view class="expanded-main">
|
||||
<image
|
||||
v-if="displayAudio.image"
|
||||
class="expanded-cover"
|
||||
:src="displayAudio.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="expanded-copy">
|
||||
<text class="player-kicker">讲解音频</text>
|
||||
<text class="expanded-title">{{ displayAudio.name }}</text>
|
||||
<text class="expanded-subtitle" :class="{ error: displayPlaybackError }">{{ expandedSubtitle }}</text>
|
||||
</view>
|
||||
<view class="expanded-side">
|
||||
<view
|
||||
v-if="isLanguageSwitchable"
|
||||
class="player-language-switch expanded-language"
|
||||
@tap.stop
|
||||
>
|
||||
<view
|
||||
v-for="option in audioLanguageOptions"
|
||||
:key="option.value"
|
||||
class="player-language-option"
|
||||
:class="{
|
||||
active: effectiveAudioLanguage === option.value,
|
||||
pending: displayPendingLanguage === option.value,
|
||||
disabled: isLanguagePending && displayPendingLanguage !== option.value
|
||||
}"
|
||||
@tap.stop="handleLanguageChange(option.value)"
|
||||
>
|
||||
<text class="player-language-text">{{ formatLanguageOptionText(option) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="player-language-state expanded-language">
|
||||
<text class="player-language-text">{{ displayAudioLanguageShort }}</text>
|
||||
</view>
|
||||
<view class="control-btn play-btn expanded-play" @tap.stop="togglePlay">
|
||||
<svg v-if="displayPlaying" width="30" height="30" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg v-else width="30" height="30" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="expanded-progress-row">
|
||||
<text class="time-text active">{{ formattedCurrentTime }}</text>
|
||||
<view class="progress-track expanded-track" @tap="handleSeek">
|
||||
<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
|
||||
<view class="progress-thumb" :style="{ left: progressPercent + '%' }"></view>
|
||||
</view>
|
||||
<text class="time-text">{{ formattedDuration }}</text>
|
||||
</view>
|
||||
|
||||
<view class="expanded-actions">
|
||||
<view class="action-btn collapse-action" @tap.stop="handleCollapse">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M6 15L12 9L18 15" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<text class="action-text">收起</text>
|
||||
</view>
|
||||
<view class="action-divider"></view>
|
||||
<view class="action-btn stop-action" @tap.stop="handleStop">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="7" y="7" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
<text class="action-text">停止播放</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 播放信息 -->
|
||||
<view class="player-info">
|
||||
<text class="player-title">{{ displayAudio?.name || '讲解音频' }}</text>
|
||||
<text class="player-subtitle" :class="{ error: displayPlaybackError }">{{ playerSubtitle }}</text>
|
||||
|
||||
<view v-else-if="displayMode === 'floating'" class="floating-player" @tap="handleExpand">
|
||||
<view class="floating-ring" :style="{ '--progress': progressPercent + '%' }">
|
||||
<view class="control-btn floating-play" @tap.stop="togglePlay">
|
||||
<svg v-if="displayPlaying" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</view>
|
||||
<text class="floating-label">讲解</text>
|
||||
<text class="floating-lang">{{ displayAudioLanguageShort }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 播放/暂停按钮 -->
|
||||
<view class="player-controls">
|
||||
<view class="control-btn play-btn" @tap.stop="togglePlay">
|
||||
<svg v-if="displayPlaying" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
|
||||
<view v-else class="mini-player" @tap="handleExpand">
|
||||
<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">
|
||||
<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<svg v-else width="26" height="26" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</view>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<view class="control-btn close-btn" @tap.stop="handleClose">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
|
||||
<view class="mini-copy">
|
||||
<text class="player-kicker">讲解音频</text>
|
||||
<text class="mini-title">{{ displayAudio.name }}</text>
|
||||
</view>
|
||||
|
||||
<view class="mini-progress">
|
||||
<view class="progress-track" @tap.stop="handleSeek">
|
||||
<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isLanguageSwitchable" class="player-language-switch mini-language" @tap.stop>
|
||||
<view
|
||||
v-for="option in audioLanguageOptions"
|
||||
:key="option.value"
|
||||
class="player-language-option"
|
||||
:class="{
|
||||
active: effectiveAudioLanguage === option.value,
|
||||
pending: displayPendingLanguage === option.value,
|
||||
disabled: isLanguagePending && displayPendingLanguage !== option.value
|
||||
}"
|
||||
@tap.stop="handleLanguageChange(option.value)"
|
||||
>
|
||||
<text class="player-language-text">{{ formatLanguageOptionText(option) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="player-language-state mini-language">
|
||||
<text class="player-language-text">{{ displayAudioLanguageShort }}</text>
|
||||
</view>
|
||||
|
||||
<view class="expand-action">
|
||||
<text class="expand-text">展开</text>
|
||||
<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"/>
|
||||
</svg>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 播放进度条 -->
|
||||
<view class="progress-bar">
|
||||
<view class="progress-track" @tap="handleSeek">
|
||||
<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
|
||||
<view class="progress-thumb" :style="{ left: progressPercent + '%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||
import {
|
||||
EXHIBIT_PLACEHOLDER_IMAGE
|
||||
} from '@/utils/placeholders'
|
||||
|
||||
export interface AudioItem {
|
||||
id: string
|
||||
name: string
|
||||
audioUrl: string
|
||||
image?: string
|
||||
duration?: number
|
||||
language?: AudioLanguage
|
||||
supportedLanguages?: AudioLanguage[]
|
||||
}
|
||||
|
||||
export type AudioLanguage = 'zh-CN' | 'en-US'
|
||||
export type AudioDisplayMode = 'expanded' | 'mini' | 'floating'
|
||||
|
||||
const props = defineProps<{
|
||||
visible?: boolean
|
||||
audio?: AudioItem | null
|
||||
autoPlay?: boolean
|
||||
avoidBottomNav?: boolean
|
||||
mode?: AudioDisplayMode
|
||||
controlled?: boolean
|
||||
playing?: boolean
|
||||
loading?: boolean
|
||||
playbackError?: string
|
||||
currentTime?: number
|
||||
durationValue?: number
|
||||
pendingLanguage?: AudioLanguage | ''
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -90,8 +187,11 @@ const emit = defineEmits<{
|
||||
error: [audio: AudioItem | null, message: string]
|
||||
toggle: []
|
||||
close: []
|
||||
collapse: []
|
||||
stop: []
|
||||
expand: []
|
||||
seek: [percent: number]
|
||||
'language-change': [language: AudioLanguage]
|
||||
}>()
|
||||
|
||||
// 状态
|
||||
@@ -129,15 +229,39 @@ const displayPlaying = computed(() => props.controlled ? props.playing === true
|
||||
const displayLoading = computed(() => props.controlled ? props.loading === true : isLoading.value)
|
||||
const displayPlaybackError = computed(() => props.controlled ? props.playbackError || '' : localPlaybackError.value)
|
||||
const displayCurrentTime = computed(() => props.controlled ? props.currentTime || 0 : localCurrentTime.value)
|
||||
const displayMode = computed<AudioDisplayMode>(() => props.mode || 'mini')
|
||||
const audioLanguageOptions: Array<{ value: AudioLanguage; label: string; shortLabel: string }> = [
|
||||
{ value: 'zh-CN', label: '中文', shortLabel: '中文' },
|
||||
{ value: 'en-US', label: 'English', shortLabel: 'EN' }
|
||||
]
|
||||
const displayAudioLanguage = computed<AudioLanguage>(() => (
|
||||
displayAudio.value?.language === 'en-US' ? 'en-US' : 'zh-CN'
|
||||
))
|
||||
const supportedAudioLanguages = computed(() => {
|
||||
const languages = displayAudio.value?.supportedLanguages?.length
|
||||
? displayAudio.value.supportedLanguages
|
||||
: [displayAudioLanguage.value]
|
||||
|
||||
const playerSubtitle = computed(() => {
|
||||
return Array.from(new Set(languages.filter((language): language is AudioLanguage => (
|
||||
language === 'zh-CN' || language === 'en-US'
|
||||
))))
|
||||
})
|
||||
const isLanguageSwitchable = computed(() => supportedAudioLanguages.value.length > 1)
|
||||
const displayPendingLanguage = computed<AudioLanguage | ''>(() => props.pendingLanguage || '')
|
||||
const effectiveAudioLanguage = computed<AudioLanguage>(() => (
|
||||
displayPendingLanguage.value || displayAudioLanguage.value
|
||||
))
|
||||
const isLanguagePending = computed(() => Boolean(displayPendingLanguage.value))
|
||||
const displayAudioLanguageShort = computed(() => (
|
||||
displayAudioLanguage.value === 'en-US' ? 'EN' : '中文'
|
||||
))
|
||||
const formattedCurrentTime = computed(() => formatTime(displayCurrentTime.value))
|
||||
const formattedDuration = computed(() => formatTime(resolvedDuration.value))
|
||||
const expandedSubtitle = computed(() => {
|
||||
if (displayPlaybackError.value) return displayPlaybackError.value
|
||||
if (displayLoading.value) return '音频加载中'
|
||||
if (!displayAudio.value) return '请选择讲解'
|
||||
if (resolvedDuration.value > 0) {
|
||||
return `${formatTime(displayCurrentTime.value)} / ${formatTime(resolvedDuration.value)}`
|
||||
}
|
||||
return displayPlaying.value ? '正在播放' : '点击播放按钮开始'
|
||||
if (!displayAudio.value?.audioUrl) return '当前语言暂无语音讲解'
|
||||
return displayAudioLanguage.value === 'en-US' ? '英文语音讲解' : '中文语音讲解'
|
||||
})
|
||||
|
||||
// 格式化时间
|
||||
@@ -147,6 +271,10 @@ const formatTime = (seconds: number): string => {
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const formatLanguageOptionText = (option: { shortLabel: string; value: AudioLanguage }) => (
|
||||
displayPendingLanguage.value === option.value ? `${option.shortLabel}...` : option.shortLabel
|
||||
)
|
||||
|
||||
// 初始化音频上下文
|
||||
const initAudio = () => {
|
||||
if (h5AudioElement.value) return
|
||||
@@ -427,17 +555,18 @@ const handleExpand = () => {
|
||||
emit('expand')
|
||||
}
|
||||
|
||||
// 关闭播放器
|
||||
const handleClose = () => {
|
||||
const handleCollapse = () => {
|
||||
emit('collapse')
|
||||
}
|
||||
|
||||
const handleStop = () => {
|
||||
if (props.controlled) {
|
||||
emit('close')
|
||||
emit('update:visible', false)
|
||||
emit('stop')
|
||||
return
|
||||
}
|
||||
|
||||
stopAudio()
|
||||
emit('update:visible', false)
|
||||
emit('close')
|
||||
emit('stop')
|
||||
}
|
||||
|
||||
const handleH5LoadedMetadata = () => {
|
||||
@@ -455,6 +584,12 @@ const handleH5Play = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleLanguageChange = (language: AudioLanguage) => {
|
||||
if (isLanguagePending.value) return
|
||||
if (!supportedAudioLanguages.value.includes(language) || language === displayAudioLanguage.value) return
|
||||
emit('language-change', language)
|
||||
}
|
||||
|
||||
const handleH5Pause = () => {
|
||||
isPlaying.value = false
|
||||
if (currentAudio.value) {
|
||||
@@ -558,84 +693,160 @@ defineExpose({
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
--audio-accent: #e0e100;
|
||||
--audio-surface: #050505;
|
||||
--audio-text: #ffffff;
|
||||
--audio-muted: rgba(255, 255, 255, 0.68);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
bottom: calc(12px + env(safe-area-inset-bottom));
|
||||
z-index: 2200;
|
||||
width: calc(min(100vw, 430px) - 28px);
|
||||
box-sizing: border-box;
|
||||
background-color: var(--museum-bg-surface);
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
transform: translateX(-50%);
|
||||
color: var(--audio-text);
|
||||
font-family: '鸿蒙黑体', 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.audio-player.avoid-bottom-nav {
|
||||
bottom: calc(82px + env(safe-area-inset-bottom));
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.audio-player {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
width: 430px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.audio-player.mode-floating {
|
||||
left: auto;
|
||||
right: max(16px, calc((100vw - 430px) / 2 + 16px));
|
||||
bottom: calc(102px + env(safe-area-inset-bottom));
|
||||
width: 116px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mini-player {
|
||||
display: flex;
|
||||
.audio-player.mode-floating.avoid-bottom-nav {
|
||||
bottom: calc(104px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.expanded-player,
|
||||
.mini-player,
|
||||
.floating-ring {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 14% 18%, rgba(224, 225, 0, 0.08), transparent 28%),
|
||||
linear-gradient(135deg, #161714 0%, #050505 100%);
|
||||
border: 1px solid rgba(224, 225, 0, 0.2);
|
||||
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.expanded-player::after,
|
||||
.mini-player::after,
|
||||
.floating-ring::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto -24px -42px auto;
|
||||
width: 150px;
|
||||
height: 110px;
|
||||
border: 1px solid rgba(224, 225, 0, 0.13);
|
||||
border-radius: 50%;
|
||||
transform: rotate(-16deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mini-player::after {
|
||||
inset: auto 8px 8px auto;
|
||||
width: 120px;
|
||||
height: 78px;
|
||||
}
|
||||
|
||||
.expanded-player {
|
||||
min-height: 292px;
|
||||
padding: 28px 22px 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.player-handle {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 50%;
|
||||
width: 54px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.expanded-main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 92px minmax(0, 1fr);
|
||||
gap: 14px 16px;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.player-cover {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-small);
|
||||
overflow: hidden;
|
||||
background-color: var(--museum-bg-light);
|
||||
.expanded-cover {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 14px;
|
||||
background: #262421;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.expanded-copy,
|
||||
.mini-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
.player-kicker,
|
||||
.expanded-title,
|
||||
.expanded-subtitle,
|
||||
.mini-title,
|
||||
.time-text,
|
||||
.action-text,
|
||||
.floating-label,
|
||||
.floating-lang,
|
||||
.expand-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.player-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--museum-text-primary);
|
||||
.player-kicker {
|
||||
font-size: 17px;
|
||||
line-height: 23px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.expanded-title {
|
||||
margin-top: 8px;
|
||||
font-size: 30px;
|
||||
line-height: 37px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.player-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--museum-text-secondary);
|
||||
margin-top: 2px;
|
||||
.expanded-subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
color: var(--audio-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.player-subtitle.error {
|
||||
color: #9b3d2e;
|
||||
.expanded-subtitle.error {
|
||||
color: #ffb0a2;
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
flex-shrink: 0;
|
||||
.expanded-side {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
@@ -643,60 +854,365 @@ defineExpose({
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.9);
|
||||
opacity: 0.8;
|
||||
transform: scale(0.92);
|
||||
opacity: 0.84;
|
||||
}
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--museum-accent);
|
||||
.play-btn,
|
||||
.floating-play {
|
||||
flex-shrink: 0;
|
||||
background: var(--audio-accent);
|
||||
color: #050505;
|
||||
border-radius: 50%;
|
||||
color: var(--museum-text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--museum-text-secondary);
|
||||
.expanded-play {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
padding: 0 16px 12px;
|
||||
.expanded-progress-row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 66px minmax(0, 1fr) 58px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.66);
|
||||
}
|
||||
|
||||
.time-text.active {
|
||||
color: var(--audio-accent);
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--museum-border-light);
|
||||
border-radius: 2px;
|
||||
height: 5px;
|
||||
background: rgba(255, 255, 255, 0.24);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset: 0 auto 0 0;
|
||||
height: 100%;
|
||||
background-color: var(--museum-accent);
|
||||
border-radius: 2px;
|
||||
background: var(--audio-accent);
|
||||
border-radius: inherit;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
.progress-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--museum-accent);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--audio-accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.expanded-actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 24px;
|
||||
padding-top: 15px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1px 1fr;
|
||||
align-items: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
min-width: 0;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.stop-action {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.action-divider {
|
||||
width: 1px;
|
||||
height: 26px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
font-weight: 800;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.mini-player {
|
||||
min-height: 116px;
|
||||
padding: 12px 14px 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 56px minmax(0, 1fr) auto auto;
|
||||
grid-template-areas:
|
||||
"play spacer language expand"
|
||||
"copy copy copy copy"
|
||||
"progress progress progress progress";
|
||||
column-gap: 10px;
|
||||
row-gap: 7px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.mini-play {
|
||||
grid-area: play;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.mini-copy {
|
||||
grid-area: copy;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mini-copy .player-kicker {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mini-title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
margin-top: 2px;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mini-progress {
|
||||
grid-area: progress;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mini-progress .progress-track {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.player-language-state,
|
||||
.player-language-switch {
|
||||
flex-shrink: 0;
|
||||
min-width: 56px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(224, 225, 0, 0.52);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: var(--audio-accent);
|
||||
}
|
||||
|
||||
.mini-language {
|
||||
grid-area: language;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.player-language-switch {
|
||||
min-width: 92px;
|
||||
padding: 3px;
|
||||
justify-content: flex-start;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.player-language-option {
|
||||
min-width: 40px;
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.player-language-option.active {
|
||||
background: var(--audio-accent);
|
||||
color: #050505;
|
||||
}
|
||||
|
||||
.player-language-option.pending {
|
||||
background: rgba(224, 225, 0, 0.76);
|
||||
color: #050505;
|
||||
box-shadow: 0 0 0 1px rgba(224, 225, 0, 0.26);
|
||||
}
|
||||
|
||||
.player-language-option.disabled {
|
||||
opacity: 0.52;
|
||||
}
|
||||
|
||||
.player-language-text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 900;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.expand-action {
|
||||
grid-area: expand;
|
||||
min-width: 70px;
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.16);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.expand-text {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
font-weight: 900;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.floating-player {
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
}
|
||||
|
||||
.floating-ring {
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.floating-ring::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 8px;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
conic-gradient(var(--audio-accent) 0 var(--progress), rgba(255, 255, 255, 0.24) var(--progress) 100%);
|
||||
mask: radial-gradient(circle, transparent 65%, #000 66%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floating-play {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.floating-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 7px;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.floating-lang {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-width: 46px;
|
||||
height: 23px;
|
||||
margin-top: 2px;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(224, 225, 0, 0.7);
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 900;
|
||||
color: var(--audio-accent);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.audio-player:not(.mode-floating) {
|
||||
width: 402px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 390px) {
|
||||
.expanded-player {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.expanded-main {
|
||||
grid-template-columns: 76px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.expanded-cover {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.expanded-title {
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.mini-player {
|
||||
min-height: 110px;
|
||||
padding: 10px 12px 12px;
|
||||
grid-template-columns: 50px minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"play language expand"
|
||||
"copy copy copy"
|
||||
"progress progress progress";
|
||||
column-gap: 8px;
|
||||
row-gap: 6px;
|
||||
}
|
||||
|
||||
.mini-play {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.mini-title {
|
||||
font-size: 21px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user