3dtours/ace-step-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add always-visible player, play button on sidebar thumbnail, and GitHub link

Browse Source 
- Player: Show minimal placeholder when no song is playing instead of hiding
- RightSidebar: Add play button overlay on cover art thumbnail
  - Hover to reveal play/pause button
  - Click anywhere on cover to play
  - Shows pause icon when song is currently playing
- SettingsModal: Add GitHub repo link for issues and feature requests
This commit is contained in:
fspecii
2026-02-04 13:43:25 +02:00
parent e616713ec1
commit 02fa32bc53
4 changed files with 72 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/RightSidebar.tsx
+26 -3
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Song } from '../types';
import { Heart, Share2, Play, MoreHorizontal, X, Copy, Wand2, MoreVertical, Download, Repeat, Video, Music, Link as LinkIcon, Sparkles, Globe, Lock, Trash2, Edit3, Layers } from 'lucide-react';
import { Heart, Share2, Play, Pause, MoreHorizontal, X, Copy, Wand2, MoreVertical, Download, Repeat, Video, Music, Link as LinkIcon, Sparkles, Globe, Lock, Trash2, Edit3, Layers } from 'lucide-react';
import { songsApi } from '../services/api';
import { useAuth } from '../context/AuthContext';
import { SongDropdownMenu } from './SongDropdownMenu';
@@ -19,9 +19,12 @@ interface RightSidebarProps {
onToggleLike?: (song: Song) => void;
onDelete?: (song: Song) => void;
onAddToPlaylist?: (song: Song) => void;
onPlay?: (song: Song) => void;
isPlaying?: boolean;
currentSong?: Song | null;
}
export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpenVideo, onReuse, onSongUpdate, onNavigateToProfile, onNavigateToSong, isLiked, onToggleLike, onDelete, onAddToPlaylist }) => {
export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpenVideo, onReuse, onSongUpdate, onNavigateToProfile, onNavigateToSong, isLiked, onToggleLike, onDelete, onAddToPlaylist, onPlay, isPlaying, currentSong }) => {
const { token, user } = useAuth();
const [showMenu, setShowMenu] = useState(false);
const [isOwner, setIsOwner] = useState(false);
@@ -64,7 +67,10 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
<div className="p-5 space-y-6">
{/* Cover Art */}
<div className="group relative aspect-square w-full rounded-xl overflow-hidden shadow-2xl bg-zinc-200 dark:bg-zinc-800 ring-1 ring-black/5 dark:ring-white/10">
<div
className="group relative aspect-square w-full rounded-xl overflow-hidden shadow-2xl bg-zinc-200 dark:bg-zinc-800 ring-1 ring-black/5 dark:ring-white/10 cursor-pointer"
onClick={() => onPlay?.(song)}
>
{song.coverUrl ? (
<img src={song.coverUrl} alt={song.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
) : null}
@@ -73,6 +79,23 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
{/* Overlay Gradient */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60"></div>
{/* Play Button Overlay */}
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<button
onClick={(e) => {
e.stopPropagation();
onPlay?.(song);
}}
className="w-16 h-16 rounded-full bg-white/95 dark:bg-white text-black flex items-center justify-center shadow-2xl hover:scale-110 transition-transform"
>
{isPlaying && currentSong?.id === song.id ? (
<Pause size={28} fill="currentColor" />
) : (
<Play size={28} fill="currentColor" className="ml-1" />
)}
</button>
</div>
<div className="absolute bottom-4 left-4 right-4 flex items-center justify-between">
<div className="flex items-center gap-2 text-white">
<Play size={16} fill="currentColor" />