Gabriel Kaszewski
8ed8da2d90
Area 1 (tv/page.tsx 964→423 lines): - hooks: use-fullscreen, use-idle, use-volume, use-quality, use-subtitles, use-channel-input, use-channel-passwords, use-tv-keyboard - components: SubtitlePicker, VolumeControl, QualityPicker, TopControlBar, LogoWatermark, AutoplayPrompt, ChannelNumberOverlay, TvBaseLayer Area 2 (edit-channel-sheet.tsx 1244→678 lines): - hooks: use-channel-form (all form state + reset logic) - lib/schemas.ts: extracted Zod schemas + extractErrors - components: AlgorithmicFilterEditor, RecyclePolicyEditor, WebhookEditor, AccessSettingsEditor, LogoEditor Area 3 (dashboard/page.tsx 406→261 lines): - hooks: use-channel-order, use-import-channel, use-regenerate-all - lib/channel-export.ts: pure export utility - components: DashboardHeader
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useRef, RefObject } from "react";
|
|
import { Volume1, Volume2, VolumeX } from "lucide-react";
|
|
|
|
export function useVolume(
|
|
videoRef: RefObject<HTMLVideoElement | null>,
|
|
isCasting: boolean,
|
|
) {
|
|
const [volume, setVolume] = useState(1);
|
|
const [isMuted, setIsMuted] = useState(false);
|
|
const [showSlider, setShowSlider] = useState(false);
|
|
|
|
// Sync to video element
|
|
useEffect(() => {
|
|
if (!videoRef.current) return;
|
|
videoRef.current.muted = isMuted;
|
|
videoRef.current.volume = volume;
|
|
}, [isMuted, volume, videoRef]);
|
|
|
|
// Auto-mute when casting, restore on cast end
|
|
const prevMutedRef = useRef(false);
|
|
useEffect(() => {
|
|
if (isCasting) {
|
|
prevMutedRef.current = isMuted;
|
|
setIsMuted(true);
|
|
} else {
|
|
setIsMuted(prevMutedRef.current);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isCasting]);
|
|
|
|
const toggleMute = useCallback(() => setIsMuted((m) => !m), []);
|
|
|
|
const VolumeIcon =
|
|
isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;
|
|
|
|
return { volume, setVolume, isMuted, setIsMuted, toggleMute, VolumeIcon, showSlider, setShowSlider };
|
|
}
|