Spaces:

Finsqw
/

my

Running

App Files Files Community

Finsqw commited on Apr 9, 2025

Commit

5885838

verified ·

1 Parent(s): 9894278

Add 1 files

Browse files

Files changed (1) hide show

index.html +411 -1

index.html CHANGED Viewed

@@ -68,6 +68,13 @@
             10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
             20%, 40%, 60%, 80% { transform: translateX(5px); }
         }
     </style>
 </head>
 <body class="bg-gray-100 text-gray-800 font-sans">
@@ -151,7 +158,85 @@
         <!-- 音乐播放器 (初始隐藏) -->
         <div id="playerPanel" class="hidden">
-            <!-- 播放器内容保持不变 -->
         </div>
     </div>
@@ -164,6 +249,10 @@
         let isConnected = false;
         let retryCount = 0;
         const MAX_RETRIES = 2;
         // DOM元素
         const connectBtn = document.getElementById('connectBtn');
@@ -176,6 +265,22 @@
         const connectionTestPanel = document.getElementById('connectionTestPanel');
         const connectionTestMessage = document.getElementById('connectionTestMessage');
         const playerPanel = document.getElementById('playerPanel');
         // 初始化
         document.addEventListener('DOMContentLoaded', () => {
@@ -190,6 +295,31 @@
             // 事件监听器
             connectBtn.addEventListener('click', handleConnect);
             // 检查WebDAV库是否加载成功
             checkWebDAVLibrary();
@@ -281,6 +411,9 @@
                 // 显示播放器面板
                 playerPanel.classList.remove('hidden');
             } catch (error) {
                 console.error('连接失败:', error);
                 isConnected = false;
@@ -327,6 +460,283 @@
             }
         }
         // 更新连接状态显示
         function updateConnectionStatus(connected, message, isConnecting = false) {
             const statusDot = connectionStatus.querySelector('span:first-child');

             10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
             20%, 40%, 60%, 80% { transform: translateX(5px); }
         }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
     </style>
 </head>
 <body class="bg-gray-100 text-gray-800 font-sans">
         <!-- 音乐播放器 (初始隐藏) -->
         <div id="playerPanel" class="hidden">
+            <div class="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200 fade-in">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-xl font-semibold flex items-center">
+                        <i class="fas fa-music mr-2 text-blue-500"></i>
+                        <span>音乐库</span>
+                    </h2>
+                    <div class="flex items-center space-x-2">
+                        <button id="refreshBtn" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors duration-200 flex items-center">
+                            <i class="fas fa-sync-alt mr-1"></i>
+                            <span>刷新</span>
+                        </button>
+                        <div class="relative">
+                            <input type="text" id="searchInput" placeholder="搜索音乐..."
+                                   class="pl-8 pr-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
+                            <div class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
+                                <i class="fas fa-search text-gray-400"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="loadingIndicator" class="text-center py-8 hidden">
+                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-2"></div>
+                    <p class="text-gray-600">正在扫描音乐文件...</p>
+                </div>
+                <div id="musicList" class="space-y-2 max-h-96 overflow-y-auto">
+                    <!-- 音乐列表将在这里动态生成 -->
+                    <div class="text-center py-8 text-gray-500">
+                        <i class="fas fa-music fa-2x mb-2"></i>
+                        <p>连接成功后，音乐将显示在这里</p>
+                    </div>
+                </div>
+                <div id="playerControls" class="mt-6 bg-gray-50 p-4 rounded-lg hidden">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <div class="flex-shrink-0">
+                            <img id="currentAlbumArt" src="https://via.placeholder.com/80" alt="专辑封面" class="w-16 h-16 rounded-md album-art">
+                        </div>
+                        <div class="flex-grow">
+                            <h3 id="currentSongTitle" class="font-medium">未选择歌曲</h3>
+                            <p id="currentSongArtist" class="text-sm text-gray-600">未知艺术家</p>
+                        </div>
+                        <div class="flex-shrink-0">
+                            <button id="playPauseBtn" class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors duration-200">
+                                <i class="fas fa-play"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="progress-container mb-2">
+                        <div class="flex justify-between text-xs text-gray-500 mb-1">
+                            <span id="currentTime">0:00</span>
+                            <span id="duration">0:00</span>
+                        </div>
+                        <div class="w-full bg-gray-200 rounded-full h-1.5 cursor-pointer">
+                            <div id="progressBar" class="bg-blue-600 h-1.5 rounded-full w-0"></div>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center mt-4">
+                        <div class="flex items-center space-x-4">
+                            <button id="prevBtn" class="text-gray-700 hover:text-blue-600 transition-colors duration-200">
+                                <i class="fas fa-step-backward"></i>
+                            </button>
+                            <button id="nextBtn" class="text-gray-700 hover:text-blue-600 transition-colors duration-200">
+                                <i class="fas fa-step-forward"></i>
+                            </button>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <button id="volumeBtn" class="text-gray-700 hover:text-blue-600 transition-colors duration-200">
+                                <i class="fas fa-volume-up"></i>
+                            </button>
+                            <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="0.7"
+                                   class="w-24 accent-blue-600 cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
         let isConnected = false;
         let retryCount = 0;
         const MAX_RETRIES = 2;
+        let musicFiles = [];
+        let currentAudio = new Audio();
+        let currentTrackIndex = -1;
+        let isPlaying = false;
         // DOM元素
         const connectBtn = document.getElementById('connectBtn');
         const connectionTestPanel = document.getElementById('connectionTestPanel');
         const connectionTestMessage = document.getElementById('connectionTestMessage');
         const playerPanel = document.getElementById('playerPanel');
+        const musicList = document.getElementById('musicList');
+        const loadingIndicator = document.getElementById('loadingIndicator');
+        const playerControls = document.getElementById('playerControls');
+        const refreshBtn = document.getElementById('refreshBtn');
+        const searchInput = document.getElementById('searchInput');
+        const currentAlbumArt = document.getElementById('currentAlbumArt');
+        const currentSongTitle = document.getElementById('currentSongTitle');
+        const currentSongArtist = document.getElementById('currentSongArtist');
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const prevBtn = document.getElementById('prevBtn');
+        const nextBtn = document.getElementById('nextBtn');
+        const volumeBtn = document.getElementById('volumeBtn');
+        const volumeControl = document.getElementById('volumeControl');
+        const progressBar = document.getElementById('progressBar');
+        const currentTime = document.getElementById('currentTime');
+        const duration = document.getElementById('duration');
         // 初始化
         document.addEventListener('DOMContentLoaded', () => {
             // 事件监听器
             connectBtn.addEventListener('click', handleConnect);
+            refreshBtn.addEventListener('click', scanMusicFiles);
+            searchInput.addEventListener('input', filterMusicList);
+            playPauseBtn.addEventListener('click', togglePlayPause);
+            prevBtn.addEventListener('click', playPreviousTrack);
+            nextBtn.addEventListener('click', playNextTrack);
+            volumeControl.addEventListener('input', adjustVolume);
+            volumeBtn.addEventListener('click', toggleMute);
+            // 进度条点击事件
+            document.querySelector('.progress-container').addEventListener('click', (e) => {
+                if (!currentAudio.src) return;
+                const progressContainer = e.currentTarget;
+                const clickPosition = e.clientX - progressContainer.getBoundingClientRect().left;
+                const containerWidth = progressContainer.clientWidth;
+                const seekPercentage = clickPosition / containerWidth;
+                const seekTime = seekPercentage * currentAudio.duration;
+                currentAudio.currentTime = seekTime;
+            });
+            // 音频事件监听
+            currentAudio.addEventListener('timeupdate', updateProgressBar);
+            currentAudio.addEventListener('ended', playNextTrack);
+            currentAudio.addEventListener('loadedmetadata', updateDuration);
             // 检查WebDAV库是否加载成功
             checkWebDAVLibrary();
                 // 显示播放器面板
                 playerPanel.classList.remove('hidden');
+                // 扫描音乐文件
+                await scanMusicFiles();
             } catch (error) {
                 console.error('连接失败:', error);
                 isConnected = false;
             }
         }
+        // 扫描音乐文件
+        async function scanMusicFiles() {
+            if (!isConnected || !webDAVClient) {
+                showError('请先连接到WebDAV服务器');
+                return;
+            }
+            try {
+                // 显示加载指示器
+                loadingIndicator.classList.remove('hidden');
+                musicList.innerHTML = '';
+                // 递归扫描所有目录中的音乐文件
+                musicFiles = [];
+                await scanDirectory('/');
+                // 隐藏加载指示器
+                loadingIndicator.classList.add('hidden');
+                if (musicFiles.length === 0) {
+                    musicList.innerHTML = `
+                        <div class="text-center py-8 text-gray-500">
+                            <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
+                            <p>未找到音乐文件</p>
+                            <p class="text-sm mt-2">支持的格式: .mp3, .ogg, .wav, .flac, .m4a</p>
+                        </div>
+                    `;
+                    playerControls.classList.add('hidden');
+                } else {
+                    renderMusicList();
+                    playerControls.classList.remove('hidden');
+                }
+            } catch (error) {
+                console.error('扫描音乐文件失败:', error);
+                loadingIndicator.classList.add('hidden');
+                showError(`扫描音乐文件失败: ${error.message}`);
+            }
+        }
+        // 递归扫描目录
+        async function scanDirectory(path) {
+            try {
+                const contents = await webDAVClient.getDirectoryContents(path);
+                for (const item of contents) {
+                    if (item.type === 'directory') {
+                        // 如果是目录，递归扫描
+                        await scanDirectory(item.filename);
+                    } else if (isMusicFile(item.filename)) {
+                        // 如果是音乐文件，添加到列表
+                        musicFiles.push({
+                            filename: item.filename,
+                            basename: item.basename,
+                            lastmod: item.lastmod,
+                            size: item.size,
+                            path: path
+                        });
+                    }
+                }
+            } catch (error) {
+                console.error(`扫描目录 ${path} 失败:`, error);
+                throw error;
+            }
+        }
+        // 检查是否是音乐文件
+        function isMusicFile(filename) {
+            const musicExtensions = ['.mp3', '.ogg', '.wav', '.flac', '.m4a'];
+            return musicExtensions.some(ext => filename.toLowerCase().endsWith(ext));
+        }
+        // 渲染音乐列表
+        function renderMusicList(filterText = '') {
+            musicList.innerHTML = '';
+            const filteredFiles = filterText
+                ? musicFiles.filter(file =>
+                    file.basename.toLowerCase().includes(filterText.toLowerCase()))
+                : musicFiles;
+            if (filteredFiles.length === 0) {
+                musicList.innerHTML = `
+                    <div class="text-center py-8 text-gray-500">
+                        <i class="fas fa-search fa-2x mb-2"></i>
+                        <p>没有找到匹配的音乐</p>
+                    </div>
+                `;
+                return;
+            }
+            filteredFiles.forEach((file, index) => {
+                const musicItem = document.createElement('div');
+                musicItem.className = `flex items-center p-3 hover:bg-gray-50 rounded-md cursor-pointer transition-colors duration-200 ${currentTrackIndex === index ? 'bg-blue-50' : ''}`;
+                musicItem.innerHTML = `
+                    <div class="flex-shrink-0 w-10 h-10 bg-gray-200 rounded-md flex items-center justify-center text-gray-500">
+                        <i class="fas fa-music"></i>
+                    </div>
+                    <div class="ml-3 flex-grow">
+                        <h3 class="text-sm font-medium truncate">${file.basename}</h3>
+                        <p class="text-xs text-gray-500">${formatFileSize(file.size)} • ${formatDate(file.lastmod)}</p>
+                    </div>
+                    <div class="ml-2 text-gray-400">
+                        <i class="fas fa-play"></i>
+                    </div>
+                `;
+                musicItem.addEventListener('click', () => playTrack(index));
+                musicList.appendChild(musicItem);
+            });
+        }
+        // 过滤音乐列表
+        function filterMusicList() {
+            renderMusicList(searchInput.value.trim());
+        }
+        // 播放指定曲目
+        async function playTrack(index) {
+            if (index < 0 || index >= musicFiles.length) return;
+            currentTrackIndex = index;
+            const file = musicFiles[index];
+            try {
+                // 更新UI显示当前播放的曲目
+                renderMusicList(searchInput.value.trim());
+                // 获取音乐文件的URL
+                const fileUrl = await webDAVClient.getFileDownloadLink(file.filename);
+                // 设置音频源
+                currentAudio.src = fileUrl;
+                currentAudio.load();
+                // 更新播放器信息
+                currentSongTitle.textContent = file.basename;
+                currentSongArtist.textContent = 'WebDAV音乐';
+                currentAlbumArt.src = 'https://via.placeholder.com/80';
+                // 播放音乐
+                currentAudio.play()
+                    .then(() => {
+                        isPlaying = true;
+                        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                    })
+                    .catch(error => {
+                        console.error('播放失败:', error);
+                        showError('播放失败: ' + error.message);
+                    });
+            } catch (error) {
+                console.error('获取音乐文件失败:', error);
+                showError('获取音乐文件失败: ' + error.message);
+            }
+        }
+        // 切换播放/暂停
+        function togglePlayPause() {
+            if (!currentAudio.src) {
+                if (musicFiles.length > 0) {
+                    playTrack(0);
+                }
+                return;
+            }
+            if (isPlaying) {
+                currentAudio.pause();
+                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
+            } else {
+                currentAudio.play()
+                    .then(() => {
+                        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                    })
+                    .catch(error => {
+                        console.error('播放失败:', error);
+                        showError('播放失败: ' + error.message);
+                    });
+            }
+            isPlaying = !isPlaying;
+        }
+        // 播放上一曲
+        function playPreviousTrack() {
+            if (musicFiles.length === 0) return;
+            let newIndex = currentTrackIndex - 1;
+            if (newIndex < 0) {
+                newIndex = musicFiles.length - 1;
+            }
+            playTrack(newIndex);
+        }
+        // 播放下一曲
+        function playNextTrack() {
+            if (musicFiles.length === 0) return;
+            let newIndex = currentTrackIndex + 1;
+            if (newIndex >= musicFiles.length) {
+                newIndex = 0;
+            }
+            playTrack(newIndex);
+        }
+        // 调整音量
+        function adjustVolume() {
+            currentAudio.volume = volumeControl.value;
+            // 更新音量按钮图标
+            if (currentAudio.volume === 0) {
+                volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
+            } else if (currentAudio.volume < 0.5) {
+                volumeBtn.innerHTML = '<i class="fas fa-volume-down"></i>';
+            } else {
+                volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
+            }
+        }
+        // 切换静音
+        function toggleMute() {
+            if (currentAudio.volume === 0) {
+                // 如果静音，恢复之前的音量
+                currentAudio.volume = volumeControl.value;
+                volumeBtn.innerHTML = currentAudio.volume < 0.5
+                    ? '<i class="fas fa-volume-down"></i>'
+                    : '<i class="fas fa-volume-up"></i>';
+            } else {
+                // 如果没静音，保存当前音量并静音
+                volumeControl.value = currentAudio.volume;
+                currentAudio.volume = 0;
+                volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
+            }
+        }
+        // 更新进度条
+        function updateProgressBar() {
+            if (!isNaN(currentAudio.duration)) {
+                const progress = (currentAudio.currentTime / currentAudio.duration) * 100;
+                progressBar.style.width = `${progress}%`;
+                currentTime.textContent = formatTime(currentAudio.currentTime);
+            }
+        }
+        // 更新总时长
+        function updateDuration() {
+            if (!isNaN(currentAudio.duration)) {
+                duration.textContent = formatTime(currentAudio.duration);
+            }
+        }
+        // 格式化时间 (秒 -> MM:SS)
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+        }
+        // 格式化文件大小
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+        // 格式化日期
+        function formatDate(dateString) {
+            const date = new Date(dateString);
+            return date.toLocaleDateString();
+        }
         // 更新连接状态显示
         function updateConnectionStatus(connected, message, isConnecting = false) {
             const statusDot = connectionStatus.querySelector('span:first-child');