From f97b5f1d69ab215716ebcd44c436d487aa10eb32 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 18:51:33 +0200
Subject: [PATCH] refactor: import hooks on top of the file

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index df89746f5..16a7e1926 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import { CONSTANTS } from 'stremio/common';
 import MetaPreview from 'stremio/common/MetaPreview/MetaPreview';
 import Video from 'stremio/common/Video/Video';
@@ -8,7 +8,7 @@ import styles from './SideDrawer.less';
 import { useServices } from 'stremio/services';
 
 type Props = {
-    seriesInfo: any;
+    seriesInfo: { season: number, episode: number };
     metaItem: MetaItem;
     className?: string;
     closeSideBar: () => void;
@@ -17,8 +17,8 @@ type Props = {
 
 const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...props }: Props) => {
     const { core } = useServices();
-    const [season, setSeason] = React.useState<number>(seriesInfo?.season);
-    const metaItem = React.useMemo(() => {
+    const [season, setSeason] = useState<number>(seriesInfo?.season);
+    const metaItem = useMemo(() => {
         return seriesInfo ?
             {
                 ...props.metaItem,
@@ -27,13 +27,13 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             :
             props.metaItem;
     }, [props.metaItem]);
-    const videos = React.useMemo(() => {
+    const videos = useMemo(() => {
         return Array.isArray(metaItem.videos) ?
             metaItem.videos.filter((video) => video.season === season)
             :
             metaItem.videos;
     }, [metaItem, season]);
-    const seasons = React.useMemo(() => {
+    const seasons = useMemo(() => {
         return props.metaItem.videos
             .map(({ season }) => season)
             .filter((season, index, seasons) => {
@@ -42,11 +42,11 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
     }, [props.metaItem.videos]);
 
-    const seasonOnSelect = React.useCallback((event: { value: string }) => {
+    const seasonOnSelect = useCallback((event: { value: string }) => {
         setSeason(parseInt(event.value));
     }, []);
 
-    const onMarkVideoAsWatched = (video: Video, watched: boolean) => {
+    const onMarkVideoAsWatched = useCallback((video: Video, watched: boolean) => {
         core.transport.dispatch({
             action: 'Player',
             args: {
@@ -54,7 +54,7 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
                 args: [video, !watched]
             }
         });
-    };
+    }, []);
 
     return (
         <>