Overview
The PlayerContext provides comprehensive state management for the video player, including watch list management, autoplay settings, and playback controls.
Type Definitions
interface WatchListItem {
watchListId: number;
video: VideoSummaryCardVideoFragment;
entry: VideoSummaryCardEntryFragment;
}
interface PlayerContextInterface {
watchList: WatchListItem[];
setWatchList: (watchList: WatchListItem[], forceAutoPlay?: boolean) => void;
watchListFactory: (() => Promise<WatchListItem[]>) | null;
setWatchListFactory: (factory: (() => Promise<WatchListItem[]>) | null) => void;
currentWatchListItem: WatchListItem | null;
setCurrentWatchListItem: (watchListItem: WatchListItem | null) => void;
addWatchListItem: (video: VideoSummaryCardVideoFragment, entry: VideoSummaryCardEntryFragment) => void;
addWatchListItemNext: (video: VideoSummaryCardVideoFragment, entry: VideoSummaryCardEntryFragment) => void;
clearWatchList: () => void;
isGlobalAutoPlay: boolean;
setGlobalAutoPlay: (autoPlay: boolean) => void;
isLocalAutoPlay: boolean;
setLocalAutoPlay: (autoPlay: boolean) => void;
isWatchListUsingLocalAutoPlay: boolean;
isRepeat: boolean;
setRepeat: (repeat: boolean) => void;
}
Context Values
Array of videos queued for playback.
setWatchList
(watchList: WatchListItem[], forceAutoPlay?: boolean) => void
required
Updates the watch list. Optional forceAutoPlay parameter enables local autoplay for the new watch list.
watchListFactory
(() => Promise<WatchListItem[]>) | null
required
Factory function for lazily loading additional watch list items.
setWatchListFactory
(factory: (() => Promise<WatchListItem[]>) | null) => void
required
Sets or clears the watch list factory function.
currentWatchListItem
WatchListItem | null
required
The currently playing video item, or null if no video is active.
setCurrentWatchListItem
(watchListItem: WatchListItem | null) => void
required
Updates the currently playing video. Triggers factory loading when approaching end of watch list.
addWatchListItem
(video: VideoSummaryCardVideoFragment, entry: VideoSummaryCardEntryFragment) => void
required
Adds a video to the end of the watch list.
addWatchListItemNext
(video: VideoSummaryCardVideoFragment, entry: VideoSummaryCardEntryFragment) => void
required
Inserts a video immediately after the currently playing item.
Clears the watch list and resets playback state.
Global autoplay setting persisted in localStorage.
setGlobalAutoPlay
(autoPlay: boolean) => void
required
Updates the global autoplay preference.
Temporary autoplay state for the current watch list session.
setLocalAutoPlay
(autoPlay: boolean) => void
required
Updates the local autoplay state.
isWatchListUsingLocalAutoPlay
Indicates if the current watch list was created with local autoplay enabled.
Whether repeat mode is enabled.
setRepeat
(repeat: boolean) => void
required
Toggles repeat mode on or off.
Provider Usage
The PlayerContext.Provider is configured in _app.tsx with comprehensive state management:
import PlayerContext, { createWatchListItem } from "@/context/playerContext";
import type { WatchListItem } from "@/context/playerContext";
function MyApp({ Component, pageProps }: AppProps) {
const [watchList, setWatchList] = useState<WatchListItem[]>([]);
const [currentWatchListItemId, setCurrentWatchListItemId] = useState<number | null>(null);
const currentWatchListItem = watchList.find(
(item) => item.watchListId === currentWatchListItemId
) ?? null;
return (
<PlayerContext.Provider
value={{
watchList,
setWatchList,
currentWatchListItem,
setCurrentWatchListItem: (watchListItem) => {
setCurrentWatchListItemId(watchListItem?.watchListId ?? null);
},
addWatchListItem: (video, entry) => {
setWatchList((watchList) => [
...watchList,
createWatchListItem(video, entry)
]);
},
clearWatchList: () => setWatchList([]),
// ... other values
}}
>
{/* App content */}
</PlayerContext.Provider>
);
}
Consumer Usage
Basic Usage
import { useContext } from "react";
import PlayerContext from "@/context/playerContext";
function VideoControls() {
const { currentWatchListItem, setCurrentWatchListItem } = useContext(PlayerContext);
return (
<div>
{currentWatchListItem && (
<p>Now playing: {currentWatchListItem.video.filename}</p>
)}
</div>
);
}
Adding Videos to Watch List
import { useContext } from "react";
import PlayerContext from "@/context/playerContext";
function VideoMenu({ video, entry }) {
const { addWatchListItem, addWatchListItemNext } = useContext(PlayerContext);
return (
<div>
<button onClick={() => addWatchListItem(video, entry)}>
Add to Queue
</button>
<button onClick={() => addWatchListItemNext(video, entry)}>
Play Next
</button>
</div>
);
}
Managing Autoplay
import { useContext } from "react";
import PlayerContext from "@/context/playerContext";
function AutoplayToggle() {
const { isGlobalAutoPlay, setGlobalAutoPlay } = useContext(PlayerContext);
return (
<button onClick={() => setGlobalAutoPlay(!isGlobalAutoPlay)}>
Autoplay: {isGlobalAutoPlay ? "On" : "Off"}
</button>
);
}
Utility Functions
createWatchListItem
Factory function to create watch list items with unique IDs:
function createWatchListItem(
video: VideoSummaryCardVideoFragment,
entry: VideoSummaryCardEntryFragment
): WatchListItem
import { createWatchListItem } from "@/context/playerContext";
const watchListItem = createWatchListItem(video, entry);
setWatchList([watchListItem]);
Real-World Usage Examples
In VideoPlayer Component
See: src/components/video-player/VideoPlayer.tsx:87
const {
watchList,
currentWatchListItem,
setCurrentWatchListItem,
isGlobalAutoPlay,
isLocalAutoPlay,
isWatchListUsingLocalAutoPlay,
isRepeat,
} = useContext(PlayerContext);
In Playlist Page
See: src/pages/playlist/[playlistId]/index.tsx:186
const { setWatchList, setWatchListFactory, setCurrentWatchListItem } =
useContext(PlayerContext);
Source
Source code: src/context/playerContext.ts