From ea1825eaee3790addf9517897db0f8c86b4dfdaa Mon Sep 17 00:00:00 2001
From: "askmanu[bot]" <192355599+askmanu[bot]@users.noreply.github.com>
Date: Wed, 15 Oct 2025 20:31:28 +0000
Subject: [PATCH] Added reference documentation for:
 src/routes/Player/SideDrawer/SideDrawer.tsx

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 26 +++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 299c37b23..05aecc8c6 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -9,6 +9,9 @@ import { MetaPreview, Video } from 'stremio/components';
 import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
 import styles from './SideDrawer.less';
 
+/**
+ * Props for the SideDrawer component
+ */
 type Props = {
     className?: string;
     seriesInfo: SeriesInfo;
@@ -18,6 +21,11 @@ type Props = {
     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 { core } = useServices();
     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));
     }, [props.metaItem.videos]);
 
+    /**
+     * Updates the selected season when a new season is chosen from the seasons bar
+     */
     const seasonOnSelect = useCallback((event: { value: string }) => {
         setSeason(parseInt(event.value));
     }, []);
@@ -54,6 +65,9 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         return videos.every((video) => video.watched);
     }, [videos]);
 
+    /**
+     * Dispatches an action to toggle the watched status of a video
+     */
     const onMarkVideoAsWatched = useCallback((video: Video, watched: boolean) => {
         core.transport.dispatch({
             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) => {
         core.transport.dispatch({
             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) => {
         event.stopPropagation();
     };
 
+    /**
+     * Scrolls the selected video into view after the drawer transition completes
+     */
     const onTransitionEnd = () => {
         selectedVideoRef.current?.scrollIntoView({
             behavior: 'smooth',