mirror of
https://github.com/MCKero6423/fuwari.git
synced 2026-10-02 03:15:35 +00:00
删除音乐播放器，因为BUG太多了！
This commit is contained in:
mckero committed
1 parent
532285dc22
commit
16c462453a
3 files changed
+13
-262
No files matched your search
@@ -1,178 +0,0 @@
|
||||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
let container;
|
||||
let playerInstance = null;
|
||||
|
||||
onMount(() => {
|
||||
// 确保脚本加载完成后再初始化
|
||||
loadScripts().then(() => {
|
||||
initPlayer();
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
destroyPlayer();
|
||||
});
|
||||
|
||||
function loadScripts() {
|
||||
return new Promise((resolve) => {
|
||||
// 检查是否已经加载了必要的脚本
|
||||
if (window.APlayer && window.Meting) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
let loadedCount = 0;
|
||||
const totalScripts = 3;
|
||||
|
||||
function checkLoaded() {
|
||||
loadedCount++;
|
||||
if (loadedCount === totalScripts) {
|
||||
resolve();
|
||||
}
|
||||
}
|
||||
|
||||
// 加载CSS
|
||||
if (!document.querySelector('link[href*="aplayer"]')) {
|
||||
const css = document.createElement('link');
|
||||
css.rel = 'stylesheet';
|
||||
css.href = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css';
|
||||
css.onload = checkLoaded;
|
||||
document.head.appendChild(css);
|
||||
} else {
|
||||
checkLoaded();
|
||||
}
|
||||
|
||||
// 加载APlayer JS
|
||||
if (!window.APlayer) {
|
||||
const script1 = document.createElement('script');
|
||||
script1.src = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js';
|
||||
script1.onload = checkLoaded;
|
||||
document.body.appendChild(script1);
|
||||
} else {
|
||||
checkLoaded();
|
||||
}
|
||||
|
||||
// 加载Meting JS
|
||||
if (!window.Meting) {
|
||||
const script2 = document.createElement('script');
|
||||
script2.src = 'https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js';
|
||||
script2.onload = checkLoaded;
|
||||
document.body.appendChild(script2);
|
||||
} else {
|
||||
checkLoaded();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function destroyPlayer() {
|
||||
if (playerInstance) {
|
||||
try {
|
||||
playerInstance.destroy();
|
||||
console.log('播放器实例已销毁');
|
||||
} catch (e) {
|
||||
console.log('销毁播放器时出错:', e);
|
||||
}
|
||||
playerInstance = null;
|
||||
}
|
||||
|
||||
// 清理全局实例引用
|
||||
if (window.musicPlayerInstance === playerInstance) {
|
||||
window.musicPlayerInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
function initPlayer() {
|
||||
if (!container) return;
|
||||
|
||||
// 先销毁现有实例
|
||||
destroyPlayer();
|
||||
|
||||
// 清空容器
|
||||
container.innerHTML = '';
|
||||
|
||||
// 创建meting-js元素
|
||||
const metingElement = document.createElement('meting-js');
|
||||
metingElement.setAttribute('server', 'netease');
|
||||
metingElement.setAttribute('type', 'playlist');
|
||||
metingElement.setAttribute('id', '420944487');
|
||||
metingElement.setAttribute('order', 'random');
|
||||
metingElement.setAttribute('list-folded', 'true');
|
||||
metingElement.setAttribute('list-max-height', '300px'); // 限制列表最大高度
|
||||
metingElement.setAttribute('fixed', 'false');
|
||||
metingElement.setAttribute('autoplay', 'false');
|
||||
metingElement.setAttribute('preload', 'auto');
|
||||
|
||||
container.appendChild(metingElement);
|
||||
|
||||
// 等待Meting初始化完成
|
||||
setTimeout(() => {
|
||||
const aplayerElement = container.querySelector('.aplayer');
|
||||
if (aplayerElement && aplayerElement.aplayer) {
|
||||
playerInstance = aplayerElement.aplayer;
|
||||
window.musicPlayerInstance = playerInstance;
|
||||
|
||||
// 添加样式修复
|
||||
if (aplayerElement) {
|
||||
aplayerElement.style.boxShadow = 'none';
|
||||
aplayerElement.style.margin = '0';
|
||||
|
||||
// 确保列表滚动正常
|
||||
const listElement = aplayerElement.querySelector('.aplayer-list');
|
||||
if (listElement) {
|
||||
listElement.style.maxHeight = '300px';
|
||||
listElement.style.overflowY = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
console.log('播放器初始化完成');
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 播放器容器 -->
|
||||
<div bind:this={container} class="music-player-container"></div>
|
||||
|
||||
<style>
|
||||
.music-player-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 全局样式修复 */
|
||||
:global(.aplayer) {
|
||||
box-shadow: none !important;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.aplayer-list) {
|
||||
max-height: 300px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
:global(.aplayer-list ol) {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* 防止列表展开时影响页面布局 */
|
||||
:global(.aplayer.aplayer-withlist .aplayer-list) {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* 确保滚动条样式 */
|
||||
:global(.aplayer-list::-webkit-scrollbar) {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
:global(.aplayer-list::-webkit-scrollbar-thumb) {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:global(.aplayer-list::-webkit-scrollbar-track) {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
import WidgetLayout from './WidgetLayout.astro'
|
||||
import APlayer from './APlayer.svelte'
|
||||
|
||||
const COLLAPSED_HEIGHT = '7.5rem'
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
style?: string
|
||||
}
|
||||
const className = Astro.props.class
|
||||
const style = Astro.props.style
|
||||
|
||||
const isCollapsed = false
|
||||
---
|
||||
|
||||
<WidgetLayout name="音乐" id="music" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
|
||||
<div class="flex flex-col gap-1 music-widget-container">
|
||||
<APlayer client:only="svelte"/>
|
||||
</div>
|
||||
</WidgetLayout>
|
||||
|
||||
<script>
|
||||
// 页面切换时的清理工作
|
||||
function cleanupMusicPlayer() {
|
||||
if (window.musicPlayerInstance) {
|
||||
try {
|
||||
window.musicPlayerInstance.destroy();
|
||||
console.log('页面切换时清理播放器');
|
||||
} catch (e) {
|
||||
console.log('清理播放器时出错:', e);
|
||||
}
|
||||
window.musicPlayerInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Astro 页面切换事件
|
||||
document.addEventListener('astro:before-preparation', cleanupMusicPlayer);
|
||||
document.addEventListener('astro:before-swap', cleanupMusicPlayer);
|
||||
|
||||
// 如果使用了 Swup
|
||||
if (typeof window !== 'undefined' && window.swup) {
|
||||
window.swup.hooks.on('content:replace', cleanupMusicPlayer);
|
||||
}
|
||||
|
||||
// 页面卸载时清理
|
||||
window.addEventListener('beforeunload', cleanupMusicPlayer);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.music-widget-container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 防止音乐播放器影响整体布局 */
|
||||
.music-widget-container :global(.aplayer) {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.music-widget-container :global(.aplayer-list) {
|
||||
position: relative !important;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@@ -3,31 +3,26 @@ import type { MarkdownHeading } from "astro";
|
||||
import Categories from "./Categories.astro";
|
||||
import Profile from "./Profile.astro";
|
||||
import Tag from "./Tags.astro";
|
||||
import Music from './Music.astro';
|
||||
import Series from './Series.astro';
|
||||
import Series from './Series.astro'
|
||||
|
||||
interface Props {
|
||||
class?: string;
|
||||
headings?: MarkdownHeading[];
|
||||
series?: string;
|
||||
class?: string;
|
||||
headings?: MarkdownHeading[];
|
||||
series?: string
|
||||
}
|
||||
|
||||
const className = Astro.props.class;
|
||||
const series = Astro.props.series;
|
||||
const series = Astro.props.series
|
||||
---
|
||||
|
||||
<div id="sidebar" class:list={[className, "w-full"]}>
|
||||
<div class="flex flex-col w-full gap-4 mb-4">
|
||||
<Profile />
|
||||
</div>
|
||||
<div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
|
||||
<div class="flex flex-col w-full gap-4 mb-4">
|
||||
<Profile></Profile>
|
||||
</div>
|
||||
<div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
|
||||
<div id="series" class="flex flex-col w-full gap-4">
|
||||
{series && <Series series={series} />}
|
||||
{ series && <Series series={ series }></Series> }
|
||||
</div>
|
||||
<Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
|
||||
<Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
|
||||
</div>
|
||||
<Categories class="onload-animation" style="animation-delay: 150ms" />
|
||||
<Tag class="onload-animation" style="animation-delay: 200ms" />
|
||||
<div id="music" class="flex flex-col w-full gap-4">
|
||||
<Music />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user