quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remove useRenderFlash hook and clean up related code in Player components

Browse Source
This commit is contained in:
JSC
2025-09-22 20:14:38 +02:00
parent 9366dbca14
commit 9db9915e56
5 changed files with 9 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/player/Player.tsx
View File

@@ -21,7 +21,6 @@ import { Playlist } from './Playlist'
import { PlayerControls } from './PlayerControls'
import { PlayerProgress } from './PlayerProgress'
import { PlayerTrackInfo } from './PlayerTrackInfo'
import { useRenderFlash } from '@/hooks/useRenderFlash'
export type PlayerDisplayMode = 'normal' | 'minimized' | 'maximized' | 'sidebar'
@@ -108,7 +107,6 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
const [showPlaylist, setShowPlaylist] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const playlistFlashClass = useRenderFlash([showPlaylist, state.playlist?.id, state.playlist?.sounds.length], 'purple')
// Load initial state
useEffect(() => {
@@ -359,8 +357,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
{/* Playlist */}
{showPlaylist && state.playlist && (
<div className={`mt-4 pt-4 border-t ${playlistFlashClass}`}>
{/* DEBUG: Playlist - PURPLE FLASH */}
<div className="mt-4 pt-4 border-t">
<Playlist
playlist={state.playlist}
currentIndex={state.index}
@@ -437,8 +434,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
{/* Playlist Sidebar */}
{state.playlist && (
<div className={`w-96 border-l bg-muted/10 backdrop-blur-sm ${playlistFlashClass}`}>
{/* DEBUG: Playlist Sidebar - PURPLE FLASH */}
<div className="w-96 border-l bg-muted/10 backdrop-blur-sm">
<div className="p-4 border-b">
<h3 className="font-semibold">Playlist</h3>
<p className="text-sm text-muted-foreground">

13
src/components/player/PlayerControls.tsx
View File

@@ -18,7 +18,6 @@ import {
VolumeX,
} from 'lucide-react'
import { memo, useMemo } from 'react'
import { useRenderFlash } from '@/hooks/useRenderFlash'
interface PlayerControlsProps {
status: PlayerState['status']
@@ -55,7 +54,6 @@ export const PlayerControls = memo(function PlayerControls({
}: PlayerControlsProps) {
const isMinimized = variant === 'minimized'
const isMaximized = variant === 'maximized'
const flashClass = useRenderFlash([status, mode, volume], 'green')
const modeIcon = useMemo(() => {
switch (mode) {
@@ -79,8 +77,7 @@ export const PlayerControls = memo(function PlayerControls({
if (isMinimized) {
return (
<div className={`${flashClass} flex items-center gap-1`}>
{/* DEBUG: PlayerControls Minimized - GREEN FLASH */}
<div className="flex items-center gap-1">
<Button
size="sm"
variant="ghost"
@@ -127,8 +124,7 @@ export const PlayerControls = memo(function PlayerControls({
if (isMaximized) {
return (
<div className={flashClass}>
{/* DEBUG: PlayerControls Maximized - GREEN FLASH */}
<div>
{/* Large Controls */}
<div className="flex items-center gap-4 mb-8">
<Button
@@ -208,8 +204,7 @@ export const PlayerControls = memo(function PlayerControls({
// Normal variant
return (
<div className={flashClass}>
{/* DEBUG: PlayerControls Normal - GREEN FLASH */}
<>
{/* Main Controls */}
<div className="flex items-center justify-center gap-2 mb-4">
<Button
@@ -302,6 +297,6 @@ export const PlayerControls = memo(function PlayerControls({
</div>
)}
</div>
</div>
</>
)
})

12
src/components/player/PlayerProgress.tsx
View File

@@ -2,7 +2,6 @@ import { Progress } from '@/components/ui/progress'
import { cn } from '@/lib/utils'
import { memo, useMemo } from 'react'
import { NumberFlowDuration } from '../ui/number-flow-duration'
import { useRenderFlash } from '@/hooks/useRenderFlash'
interface PlayerProgressProps {
position: number
@@ -19,11 +18,6 @@ export const PlayerProgress = memo(function PlayerProgress({
}: PlayerProgressProps) {
const isMaximized = variant === 'maximized'
// Only flash when seconds actually change to avoid NumberFlow timing issues
const positionSeconds = Math.floor(position / 1000)
const durationSeconds = Math.floor(duration / 1000)
const flashClass = useRenderFlash([positionSeconds, durationSeconds], 'blue')
const progressPercentage = useMemo(() =>
(position / (duration || 1)) * 100,
[position, duration]
@@ -38,11 +32,7 @@ export const PlayerProgress = memo(function PlayerProgress({
}
return (
<div className={cn(
flashClass,
isMaximized ? 'w-full max-w-md mb-8' : 'mb-4'
)}>
{/* DEBUG: PlayerProgress - BLUE FLASH */}
<div className={isMaximized ? 'w-full max-w-md mb-8' : 'mb-4'}>
<Progress
value={progressPercentage}
className={cn(

7
src/components/player/PlayerTrackInfo.tsx
View File

@@ -10,7 +10,6 @@ import type { PlayerState } from '@/lib/api/services/player'
import { cn } from '@/lib/utils'
import { Download, ExternalLink, MoreVertical, Music } from 'lucide-react'
import { memo } from 'react'
import { useRenderFlash } from '@/hooks/useRenderFlash'
interface PlayerTrackInfoProps {
currentSound: PlayerState['current_sound']
@@ -24,11 +23,9 @@ export const PlayerTrackInfo = memo(function PlayerTrackInfo({
variant = 'normal',
}: PlayerTrackInfoProps) {
const isMaximized = variant === 'maximized'
const flashClass = useRenderFlash([currentSound?.id, currentSound?.name, currentSound?.thumbnail], 'red')
return (
<div className={flashClass}>
{/* DEBUG: PlayerTrackInfo - RED FLASH */}
<>
{/* Album Art / Thumbnail */}
<div className={isMaximized ? 'max-w-300 max-h-200 aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden mb-8' : 'mb-4'}>
{currentSound?.thumbnail ? (
@@ -101,6 +98,6 @@ export const PlayerTrackInfo = memo(function PlayerTrackInfo({
)}
</div>
</div>
</div>
</>
)
})