Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added reference documentation for: src/routes/Player/SideDrawer/SideDrawer.tsx

Browse source
This commit is contained in:
askmanu[bot] 2025-10-15 20:31:28 +00:00 committed by GitHub
parent cf73c7942d
commit ea1825eaee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/routes/Player/SideDrawer/SideDrawer.tsx
View file

@ -9,6 +9,9 @@ import { MetaPreview, Video } from 'stremio/components';
import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar'; import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
import styles from './SideDrawer.less'; import styles from './SideDrawer.less';
/**
* Props for the SideDrawer component
*/
type Props = { type Props = {
className?: string; className?: string;
seriesInfo: SeriesInfo; seriesInfo: SeriesInfo;
@ -18,6 +21,11 @@ type Props = {
transitionEnded: boolean; transitionEnded: boolean;
}; };
/**
* A side drawer component that displays metadata and video list for a series.
* Filters videos by season and provides controls for marking videos as watched.
* Automatically scrolls to the selected video after transition completes.
*/
const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, selected, ...props }: Props, ref) => { const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, selected, ...props }: Props, ref) => {
const { core } = useServices(); const { core } = useServices();
const [season, setSeason] = useState<number>(seriesInfo?.season); const [season, setSeason] = useState<number>(seriesInfo?.season);
@ -46,6 +54,9 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
.sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER)); .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
}, [props.metaItem.videos]); }, [props.metaItem.videos]);
/**
* Updates the selected season when a new season is chosen from the seasons bar
*/
const seasonOnSelect = useCallback((event: { value: string }) => { const seasonOnSelect = useCallback((event: { value: string }) => {
setSeason(parseInt(event.value)); setSeason(parseInt(event.value));
}, []); }, []);
@ -54,6 +65,9 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
return videos.every((video) => video.watched); return videos.every((video) => video.watched);
}, [videos]); }, [videos]);
/**
* Dispatches an action to toggle the watched status of a video
*/
const onMarkVideoAsWatched = useCallback((video: Video, watched: boolean) => { const onMarkVideoAsWatched = useCallback((video: Video, watched: boolean) => {
core.transport.dispatch({ core.transport.dispatch({
action: 'Player', action: 'Player',
@ -64,6 +78,11 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
}); });
}, []); }, []);
/**
* Dispatches an action to toggle the watched status of all videos in a season
* @param season - The season number to mark
* @param watched - Current watched status to toggle
*/
const onMarkSeasonAsWatched = (season: number, watched: boolean) => { const onMarkSeasonAsWatched = (season: number, watched: boolean) => {
core.transport.dispatch({ core.transport.dispatch({
action: 'Player', action: 'Player',
@ -74,10 +93,17 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
}); });
}; };
/**
* Prevents event propagation to avoid closing the drawer when clicking inside it
* @param event - The mouse event to stop
*/
const onMouseDown = (event: React.MouseEvent) => { const onMouseDown = (event: React.MouseEvent) => {
event.stopPropagation(); event.stopPropagation();
}; };
/**
* Scrolls the selected video into view after the drawer transition completes
*/
const onTransitionEnd = () => { const onTransitionEnd = () => {
selectedVideoRef.current?.scrollIntoView({ selectedVideoRef.current?.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',