xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(playback-store): implement mute and unmute functionality with improved volume handling

Browse Source
This commit is contained in:
DevloperAmanSingh
2025-06-25 13:27:55 +05:30
parent fe1a2542cc
commit e14e137212
1 changed files with 44 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/web/src/stores/playback-store.ts
View File

@ -19,13 +19,15 @@ const startTimer = (store: any) => {
const delta = (now - lastUpdate) / 1000; // Convert to seconds const delta = (now - lastUpdate) / 1000; // Convert to seconds
lastUpdate = now; lastUpdate = now;
const newTime = state.currentTime + (delta * state.speed); const newTime = state.currentTime + delta * state.speed;
if (newTime >= state.duration) { if (newTime >= state.duration) {
state.pause(); state.pause();
} else { } else {
state.setCurrentTime(newTime); state.setCurrentTime(newTime);
// Notify video elements to sync // Notify video elements to sync
window.dispatchEvent(new CustomEvent('playback-update', { detail: { time: newTime } })); window.dispatchEvent(
new CustomEvent("playback-update", { detail: { time: newTime } })
);
} }
} }
playbackTimer = requestAnimationFrame(updateTime); playbackTimer = requestAnimationFrame(updateTime);
@ -47,6 +49,8 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
currentTime: 0, currentTime: 0,
duration: 0, duration: 0,
volume: 1, volume: 1,
muted: false,
previousVolume: 1,
speed: 1.0, speed: 1.0,
play: () => { play: () => {
@ -73,21 +77,48 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
const clampedTime = Math.max(0, Math.min(duration, time)); const clampedTime = Math.max(0, Math.min(duration, time));
set({ currentTime: clampedTime }); set({ currentTime: clampedTime });
// Notify video elements to seek const event = new CustomEvent("playback-seek", {
const event = new CustomEvent('playback-seek', { detail: { time: clampedTime } }); detail: { time: clampedTime },
});
window.dispatchEvent(event); window.dispatchEvent(event);
}, },
setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }), setVolume: (volume: number) =>
set((state) => ({
volume: Math.max(0, Math.min(1, volume)),
muted: volume === 0,
previousVolume: volume > 0 ? volume : state.previousVolume,
})),
setSpeed: (speed: number) => { setSpeed: (speed: number) => {
const newSpeed = Math.max(0.1, Math.min(2.0, speed)); const newSpeed = Math.max(0.1, Math.min(2.0, speed));
set({ speed: newSpeed }); set({ speed: newSpeed });
const event = new CustomEvent('playback-speed', { detail: { speed: newSpeed } }); const event = new CustomEvent("playback-speed", {
detail: { speed: newSpeed },
});
window.dispatchEvent(event); window.dispatchEvent(event);
}, },
setDuration: (duration: number) => set({ duration }), setDuration: (duration: number) => set({ duration }),
setCurrentTime: (time: number) => set({ currentTime: time }), setCurrentTime: (time: number) => set({ currentTime: time }),
mute: () => {
const { volume } = get();
set({ muted: true, previousVolume: volume, volume: 0 });
},
unmute: () => {
const { previousVolume } = get();
set({ muted: false, volume: previousVolume ?? 1 });
},
toggleMute: () => {
const { muted } = get();
if (muted) {
get().unmute();
} else {
get().mute();
}
},
})); }));