From ed6ab6cd5b6fec5f8e7d7cbcaa5224393729164e Mon Sep 17 00:00:00 2001 From: Hyteq Date: Mon, 23 Jun 2025 09:18:15 +0300 Subject: feat: cleaned up video player, added functionality, zooming in/out, timeline position viewer, keyboard controls --- apps/web/src/stores/playback-store.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 apps/web/src/stores/playback-store.ts (limited to 'apps/web/src/stores') diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts new file mode 100644 index 00000000..7db1fb93 --- /dev/null +++ b/apps/web/src/stores/playback-store.ts @@ -0,0 +1,30 @@ +import { create } from "zustand"; +import type { PlaybackState, PlaybackControls } from "@/types/playback"; + +interface PlaybackStore extends PlaybackState, PlaybackControls { + setDuration: (duration: number) => void; + setCurrentTime: (time: number) => void; +} + +export const usePlaybackStore = create((set, get) => ({ + isPlaying: false, + currentTime: 0, + duration: 0, + volume: 1, + + play: () => set({ isPlaying: true }), + pause: () => set({ isPlaying: false }), + toggle: () => set((state) => ({ isPlaying: !state.isPlaying })), + seek: (time: number) => { + const { duration } = get(); + const clampedTime = Math.max(0, Math.min(duration, time)); + set({ currentTime: clampedTime }); + + // Notify video element to seek + const event = new CustomEvent('playback-seek', { detail: { time: clampedTime } }); + window.dispatchEvent(event); + }, + setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }), + setDuration: (duration: number) => set({ duration }), + setCurrentTime: (time: number) => set({ currentTime: time }), +})); \ No newline at end of file -- cgit v1.3.1