feat: optimize media controls in song view

- Center media control buttons horizontally - Remove tempo button (playspeed always 1x) - Display time above button group for better UX - Clean up unused SpeedSelector component
2026-04-07 14:13:14 +00:00
parent 3a36469789
commit b75c716dba
3 changed files with 338 additions and 184 deletions
--- a/test_media_controls.html
+++ b/test_media_controls.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Controls Test</title>
+    <style>
+        body {
+            background: #0f0f12;
+            color: white;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        
+        .transport-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+            padding: 4px 0 12px;
+        }
+        
+        .time-display {
+            font-family: monospace;
+            font-size: 12px;
+            color: rgba(255,255,255,0.35);
+            margin-bottom: 4px;
+        }
+        
+        .current-time {
+            color: #d8d8e0;
+        }
+        
+        .button-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .transport-button {
+            width: 34px;
+            height: 34px;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.07);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: rgba(255,255,255,0.35);
+        }
+        
+        .transport-button:hover {
+            background: rgba(255,255,255,0.08);
+            color: rgba(255,255,255,0.7);
+        }
+        
+        .play-button {
+            width: 46px;
+            height: 46px;
+            background: #e8a22a;
+            border-radius: 50%;
+            border: none;
+            display: flex;
+            alignItems: center;
+            justifyContent: center;
+            cursor: pointer;
+        }
+        
+        .play-button:hover {
+            background: #f0b740;
+        }
+        
+        .checklist {
+            text-align: left;
+            margin: 30px 0;
+            color: #e8a22a;
+        }
+        
+        .checklist-item {
+            margin: 8px 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .checklist-item::before {
+            content: "✓";
+            color: #4dba85;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <h1>Media Controls Test</h1>
+    
+    <div class="transport-container">
+        <!-- Time display - moved above buttons -->
+        <span class="time-display">
+            <span class="current-time">1:23</span> / 3:45
+        </span>
+
+        <!-- Button group - centered -->
+        <div class="button-group">
+            <!-- Skip back -->
+            <button class="transport-button" title="−30s">
+                ◀◀
+            </button>
+
+            <!-- Play/Pause -->
+            <button class="play-button">
+                ▶
+            </button>
+
+            <!-- Skip forward -->
+            <button class="transport-button" title="+30s">
+                ▶▶
+            </button>
+        </div>
+    </div>
+    
+    <div class="checklist">
+        <h3>Changes Implemented:</h3>
+        <div class="checklist-item">Media control buttons are centered horizontally</div>
+        <div class="checklist-item">Tempo button (SpeedSelector) has been removed</div>
+        <div class="checklist-item">Time display is positioned above the button group</div>
+        <div class="checklist-item">Clean layout with proper spacing</div>
+    </div>
+    
+    <script>
+        console.log('Media controls test loaded successfully');
+        
+        // Test button interactions
+        const buttons = document.querySelectorAll('button');
+        buttons.forEach(button => {
+            button.addEventListener('click', function() {
+                if (this.classList.contains('play-button')) {
+                    this.textContent = this.textContent === '▶' ? '❚❚' : '▶';
+                }
+                console.log('Button clicked:', this.title || this.textContent);
+            });
+        });
+    </script>
+</body>
+</html>