82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
export interface VideoData {
|
|
id: number;
|
|
filename: string;
|
|
category: string | null;
|
|
durationSeconds: number | null;
|
|
quality: string | null;
|
|
orientation: string | null;
|
|
thumbnailPath: string | null;
|
|
viewCount: number;
|
|
upvoteCount: number;
|
|
commentCount: number;
|
|
isLocked: boolean;
|
|
createdAt: string;
|
|
}
|
|
|
|
interface ExpandedVideoState {
|
|
videoId: number | null;
|
|
video: VideoData | null;
|
|
}
|
|
|
|
interface ExpandedVideoContextValue {
|
|
state: ExpandedVideoState;
|
|
expandVideo: (id: number, video: VideoData) => void;
|
|
collapseVideo: () => void;
|
|
}
|
|
|
|
const ExpandedVideoContext = createContext<ExpandedVideoContextValue | undefined>(undefined);
|
|
|
|
export function useExpandedVideo() {
|
|
const context = useContext(ExpandedVideoContext);
|
|
if (!context) {
|
|
throw new Error('useExpandedVideo must be used within ExpandedVideoProvider');
|
|
}
|
|
return context;
|
|
}
|
|
|
|
interface ExpandedVideoProviderProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function ExpandedVideoProvider({ children }: ExpandedVideoProviderProps) {
|
|
const navigate = useNavigate();
|
|
|
|
const [state, setState] = useState<ExpandedVideoState>({
|
|
videoId: null,
|
|
video: null,
|
|
});
|
|
|
|
const expandVideo = useCallback((id: number, video: VideoData) => {
|
|
setState({ videoId: id, video });
|
|
|
|
// Update URL with ?expanded=id (read current params at call time)
|
|
const newParams = new URLSearchParams(window.location.search);
|
|
newParams.set('expanded', id.toString());
|
|
navigate({ search: newParams.toString() }, { replace: true });
|
|
}, [navigate]);
|
|
|
|
const collapseVideo = useCallback(() => {
|
|
setState({ videoId: null, video: null });
|
|
|
|
// Remove URL param (read current params at call time)
|
|
const newParams = new URLSearchParams(window.location.search);
|
|
newParams.delete('expanded');
|
|
navigate({ search: newParams.toString() }, { replace: true });
|
|
}, [navigate]);
|
|
|
|
const value: ExpandedVideoContextValue = {
|
|
state,
|
|
expandVideo,
|
|
collapseVideo,
|
|
};
|
|
|
|
return (
|
|
<ExpandedVideoContext.Provider value={value}>
|
|
{children}
|
|
</ExpandedVideoContext.Provider>
|
|
);
|
|
}
|