feat(05-05): apply performance optimizations to JamTrack player
- Add useMemo for formattedPosition, formattedDuration, progressPercent - Convert formatTime to useCallback for memoization - Verify all handlers use useCallback (11 total) - Verify conditional state updates in polling (only update if values changed) - Verify visibility-aware polling (500ms visible, 2000ms hidden) - Remove diagnostic console.log statements (only console.error remains) - Wrap component export in React.memo - Match Phase 3 Backing Track performance quality Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
eee95fe312
commit
dbcd92dae1
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import {
|
||||
loadJamTrack,
|
||||
|
|
@ -365,13 +365,30 @@ const JKSessionJamTrackPlayer = ({
|
|||
}, [error, isOperating, jamTrack, jamClient, selectedMixdownId, handleRetryDownload, buildFqId, dispatch]);
|
||||
|
||||
// Helper: Format milliseconds to MM:SS
|
||||
const formatTime = (ms) => {
|
||||
const formatTime = useCallback((ms) => {
|
||||
if (!ms || isNaN(ms)) return '00:00';
|
||||
const totalSeconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Memoized formatted time values for performance
|
||||
const formattedPosition = useMemo(
|
||||
() => formatTime(jamTrackState.currentPositionMs),
|
||||
[jamTrackState.currentPositionMs, formatTime]
|
||||
);
|
||||
|
||||
const formattedDuration = useMemo(
|
||||
() => formatTime(jamTrackState.durationMs),
|
||||
[jamTrackState.durationMs, formatTime]
|
||||
);
|
||||
|
||||
// Memoized progress percentage for UI
|
||||
const progressPercent = useMemo(() => {
|
||||
if (!jamTrackState.durationMs || jamTrackState.durationMs === 0) return 0;
|
||||
return Math.round((jamTrackState.currentPositionMs / jamTrackState.durationMs) * 100);
|
||||
}, [jamTrackState.currentPositionMs, jamTrackState.durationMs]);
|
||||
|
||||
// Polling for position and duration
|
||||
useEffect(() => {
|
||||
|
|
@ -531,7 +548,7 @@ const JKSessionJamTrackPlayer = ({
|
|||
|
||||
<div>
|
||||
<p>
|
||||
{formatTime(jamTrackState.currentPositionMs)} / {formatTime(jamTrackState.durationMs)}
|
||||
{formattedPosition} / {formattedDuration}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -569,4 +586,4 @@ const JKSessionJamTrackPlayer = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default JKSessionJamTrackPlayer;
|
||||
export default React.memo(JKSessionJamTrackPlayer);
|
||||
|
|
|
|||
Loading…
Reference in New Issue