237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: improve media preview UX with caching and loading states

Browse Source
This commit is contained in:
yuyx
2026-02-17 20:03:02 +08:00
parent 0885195cb5
commit c506cf83be
2 changed files with 93 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/app.html
View File

@@ -3818,7 +3818,11 @@
</div>
</div>
<div class="media-viewer-body">
<img :src="currentMediaUrl" :alt="currentMediaName" class="media-viewer-image" @error="handleMediaPreviewError('image')">
<div v-if="mediaPreviewLoading" class="media-preview-loading">
<i class="fas fa-spinner fa-spin"></i>
<span>正在加载预览...</span>
</div>
<img :src="currentMediaUrl" :alt="currentMediaName" class="media-viewer-image" @load="handleMediaPreviewLoaded" @error="handleMediaPreviewError('image')">
</div>
</div>
</div>
@@ -3838,7 +3842,11 @@
</div>
</div>
<div class="media-viewer-body">
<video controls :src="currentMediaUrl" class="media-viewer-video" @error="handleMediaPreviewError('video')">
<div v-if="mediaPreviewLoading" class="media-preview-loading">
<i class="fas fa-spinner fa-spin"></i>
<span>正在缓冲视频...</span>
</div>
<video controls preload="metadata" playsinline :src="currentMediaUrl" class="media-viewer-video" @loadedmetadata="handleMediaPreviewLoaded" @canplay="handleMediaPreviewLoaded" @waiting="handleMediaPreviewWaiting" @playing="handleMediaPreviewPlaying" @error="handleMediaPreviewError('video')">
您的浏览器不支持视频播放
</video>
</div>
@@ -3863,7 +3871,11 @@
<div class="audio-player-icon">
<i class="fas fa-music"></i>
</div>
<audio controls :src="currentMediaUrl" class="media-viewer-audio" @error="handleMediaPreviewError('audio')">
<div v-if="mediaPreviewLoading" class="media-preview-loading">
<i class="fas fa-spinner fa-spin"></i>
<span>正在缓冲音频...</span>
</div>
<audio controls preload="metadata" :src="currentMediaUrl" class="media-viewer-audio" @loadedmetadata="handleMediaPreviewLoaded" @canplay="handleMediaPreviewLoaded" @waiting="handleMediaPreviewWaiting" @playing="handleMediaPreviewPlaying" @error="handleMediaPreviewError('audio')">
您的浏览器不支持音频播放
</audio>
</div>
@@ -4116,6 +4128,27 @@
background: rgba(255,255,255,0.03);
flex: 1;
overflow: auto;
position: relative;
}
.media-preview-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(15, 23, 42, 0.45);
color: #fff;
font-size: 14px;
z-index: 2;
pointer-events: none;
backdrop-filter: blur(2px);
}
.media-preview-loading i {
font-size: 20px;
}
.media-viewer-image {
@@ -4184,6 +4217,14 @@
padding: 15px;
}
.media-preview-loading {
font-size: 13px;
}
.media-preview-loading i {
font-size: 18px;
}
.media-viewer-image,
.media-viewer-video {
max-height: 70vh;