a

2026-07-03 16:58:28 +08:00
commit 32b43f85bd
6240 changed files with 1987678 additions and 0 deletions
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>{{ title }} - Audiobook</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body class="light-mode player-page">
+    <div class="app">
+        <!-- Fixed Player Bar (80px height) -->
+        <div class="player-bar" id="playerBar">
+            <div class="player-controls">
+                <button class="nav-btn back-btn" onclick="goBack()">
+                    <span class="nav-icon">◀</span>
+                </button>
+                
+                <div class="player-info">
+                    <h3 class="player-title">{{ title }}</h3>
+                    <p class="player-author">{{ author }}</p>
+                </div>
+                
+                <button class="play-btn" id="playBtn" onclick="togglePlay()">
+                    <span class="play-icon">▶</span>
+                </button>
+                
+                <button class="close-btn" onclick="closePlayer()">
+                    <span class="close-icon">✕</span>
+                </button>
+            </div>
+            
+            <!-- Audio Element -->
+            <audio id="audioPlayer" preload="none"></audio>
+        </div>
+        
+        <!-- Speed Control Bar -->
+        <div class="speed-control-bar" id="speedControlBar">
+            <button class="speed-btn" data-rate="-30%" onclick="setSpeed(this, '-30%')">慢</button>
+            <button class="speed-btn active" data-rate="-10%" onclick="setSpeed(this, '-10%')">正常</button>
+            <button class="speed-btn" data-rate="+10%" onclick="setSpeed(this, '+10%')">快</button>
+        </div>
+
+        <!-- Content Area (scrollable) -->
+        <main class="content-area player-with-speed" id="contentArea">
+            <article class="story-content" id="storyContent">
+                <header class="content-header">
+                    <h1>{{ title }}</h1>
+                    <p class="content-meta">
+                        <span class="author">{{ author }}</span>
+                        {% if year %}
+                        <span class="year">{{ year }}</span>
+                        {% endif %}
+                    </p>
+                </header>
+                
+                <div class="content-body" id="contentBody">
+                    {{ content | safe }}
+                </div>
+                
+                <div class="content-end">
+                    <p>— End of Story —</p>
+                    <button class="back-to-list" onclick="goBack()">返回列表</button>
+                </div>
+            </article>
+        </main>
+    </div>
+
+    <script src="/static/js/app.js"></script>
+    <script>
+        // Story content
+        const storyContent = {{ content | tojson }};
+        const storyTitle = {{ title | tojson }};
+        
+        // Audio state
+        let isPlaying = false;
+        let audioPlayer = document.getElementById('audioPlayer');
+        let playBtn = document.getElementById('playBtn');
+        let currentSpeed = '-10%';
+        
+        // Toggle play/pause
+        function togglePlay() {
+            if (isPlaying) {
+                pauseAudio();
+            } else {
+                playAudio();
+            }
+        }
+        
+        function playAudio() {
+            const text = storyContent || storyTitle;
+            if (!text) return;
+            
+            const streamUrl = `/api/stream?text=${encodeURIComponent(text)}&rate=${encodeURIComponent(currentSpeed)}`;
+            audioPlayer.src = streamUrl;
+            audioPlayer.play();
+            
+            isPlaying = true;
+            updatePlayButton();
+        }
+        
+        function pauseAudio() {
+            audioPlayer.pause();
+            isPlaying = false;
+            updatePlayButton();
+        }
+        
+        function updatePlayButton() {
+            playBtn.innerHTML = isPlaying ? '<span class="pause-icon">⏸</span>' : '<span class="play-icon">▶</span>';
+        }
+        
+        // Speed control
+        function setSpeed(btn, rate) {
+            document.querySelectorAll('.speed-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            currentSpeed = rate;
+            
+            if (isPlaying) {
+                pauseAudio();
+                playAudio();
+            }
+        }
+        
+        // Handle audio ended
+        audioPlayer.addEventListener('ended', () => {
+            isPlaying = false;
+            updatePlayButton();
+        });
+        
+        // Handle audio error
+        audioPlayer.addEventListener('error', (e) => {
+            console.error('Audio error:', e);
+            isPlaying = false;
+            updatePlayButton();
+        });
+        
+        function closePlayer() {
+            pauseAudio();
+            window.location.href = '/list/{{ source_id }}';
+        }
+        
+        function goBack() {
+            pauseAudio();
+            window.history.back();
+        }
+    </script>
+</body>
+</html>