Initial release v1.0.0

frontend/components/player/KeyboardShortcutsTooltip.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Info } from "lucide-react";
+import { useState } from "react";
+
+export function KeyboardShortcutsTooltip() {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const shortcuts = [
+        { key: "Space", action: "Play / Pause" },
+        { key: "→", action: "Seek forward 10s" },
+        { key: "←", action: "Seek backward 10s" },
+        { key: "↑", action: "Volume up 10%" },
+        { key: "↓", action: "Volume down 10%" },
+        { key: "M", action: "Toggle mute" },
+        { key: "N", action: "Next track" },
+        { key: "P", action: "Previous track" },
+        { key: "S", action: "Toggle shuffle" },
+    ];
+
+    return (
+        <div className="relative">
+            <button
+                onMouseEnter={() => setIsVisible(true)}
+                onMouseLeave={() => setIsVisible(false)}
+                onClick={() => setIsVisible(!isVisible)}
+                className="p-1.5 rounded transition-colors text-gray-400 hover:text-white"
+                title="Keyboard shortcuts"
+            >
+                <Info className="w-3.5 h-3.5" />
+            </button>
+
+            {isVisible && (
+                <div className="absolute bottom-full right-0 mb-2 w-64 bg-[#1a1a1a] border border-white/10 rounded-lg shadow-2xl shadow-black/50 p-4 z-50 backdrop-blur-xl">
+                    {/* Pointer arrow */}
+                    <div className="absolute -bottom-1 right-3 w-2 h-2 bg-[#1a1a1a] border-r border-b border-white/10 rotate-45" />
+
+                    <h3 className="text-white font-bold text-sm mb-3 flex items-center gap-2">
+                        <Info className="w-4 h-4" />
+                        Keyboard Shortcuts
+                    </h3>
+
+                    <div className="space-y-2">
+                        {shortcuts.map((shortcut) => (
+                            <div
+                                key={shortcut.key}
+                                className="flex items-center justify-between text-xs"
+                            >
+                                <span className="text-gray-400">
+                                    {shortcut.action}
+                                </span>
+                                <kbd className="px-2 py-1 bg-white/5 border border-white/10 rounded text-white font-mono text-xs min-w-[40px] text-center">
+                                    {shortcut.key}
+                                </kbd>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="mt-3 pt-3 border-t border-white/10">
+                        <p className="text-[10px] text-gray-500 leading-relaxed">
+                            Shortcuts work anywhere except when typing in text fields.
+                        </p>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}