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 Categories from "./Categories.astro";
|
||||||
import Profile from "./Profile.astro";
|
import Profile from "./Profile.astro";
|
||||||
import Tag from "./Tags.astro";
|
import Tag from "./Tags.astro";
|
||||||
import Music from './Music.astro';
|
import Series from './Series.astro'
|
||||||
import Series from './Series.astro';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
class?: string;
|
class?: string;
|
||||||
headings?: MarkdownHeading[];
|
headings?: MarkdownHeading[];
|
||||||
series?: string;
|
series?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const className = Astro.props.class;
|
const className = Astro.props.class;
|
||||||
const series = Astro.props.series;
|
const series = Astro.props.series
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="sidebar" class:list={[className, "w-full"]}>
|
<div id="sidebar" class:list={[className, "w-full"]}>
|
||||||
<div class="flex flex-col w-full gap-4 mb-4">
|
<div class="flex flex-col w-full gap-4 mb-4">
|
||||||
<Profile />
|
<Profile></Profile>
|
||||||
</div>
|
</div>
|
||||||
<div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
|
<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">
|
<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>
|
</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>
|
</div>
|
||||||
Reference in new issue
Block a user