Series: episode picker

src/components/MultiselectMenu/Dropdown/Dropdown.tsx

@@ -63,7 +63,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
                 .filter((option: MultiselectMenuOption) => !option.hidden)
                 .map((option: MultiselectMenuOption) => (
                     <Option
-                        key={option.id}
+                        key={option.value}
                         ref={handleSetOptionRef(option.value)}
                         option={option}
                         onSelect={onSelect}

src/components/MultiselectMenu/MultiselectMenu.less

@@ -22,6 +22,11 @@
         gap: 0 0.5rem;
         border-radius: @border-radius;
 
+        span {
+            display: flex;
+            flex-direction: column;
+        }
+
         .icon {
             width: 1rem;
             color: var(--primary-foreground-color);

src/components/MultiselectMenu/MultiselectMenu.tsx

@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button } from 'stremio/components';
 import useBinaryState from 'stremio/common/useBinaryState';
 import Dropdown from './Dropdown';
@@ -12,20 +12,39 @@ import useOutsideClick from 'stremio/common/useOutsideClick';
 type Props = {
     className?: string,
     title?: string;
+    subtitle?: string;
     options: MultiselectMenuOption[];
     selectedOption?: MultiselectMenuOption;
-    onSelect: (value: number) => void;
+    onSelect: (level: number, value: number) => void;
 };
 
-const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
+const MultiselectMenu = ({ className, title, subtitle, options, selectedOption, onSelect }: Props) => {
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const multiselectMenuRef = useOutsideClick(() => closeMenu());
     const [level, setLevel] = React.useState<number>(0);
+    const [levelOptions, setLevelOptions] = React.useState<MultiselectMenuOption[]>([]);
 
     const onOptionSelect = (value: number) => {
-        level ? setLevel(level + 1) : onSelect(value), closeMenu();
+        if (!level) {
+            setLevel(level + 1);
+        }
+        onSelect(level, value);
     };
 
+    useEffect(() => {
+        if (level) {
+            setLevelOptions(selectedOption?.options || []);
+        } else {
+            setLevelOptions(options);
+        }
+    }, [level]);
+
+    useEffect(() => {
+        if (!menuOpen) {
+            setLevel(0);
+        }
+    }, [menuOpen]);
+
     return (
         <div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
             <Button
@@ -35,18 +54,25 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
                 aria-haspopup='listbox'
                 aria-expanded={menuOpen}
             >
-                {title}
+                <span>
+                    <span>
+                        {title}
+                    </span>
+                    {subtitle && <span>
+                        {subtitle}
+                    </span>}
+                </span>
                 <Icon name={'caret-down'} className={classNames(styles['icon'], { [styles['open']]: menuOpen })} />
             </Button>
             {
                 menuOpen ?
                     <Dropdown
                         level={level}
                         setLevel={setLevel}
-                        options={options}
+                        options={levelOptions}
                         onSelect={onOptionSelect}
                         menuOpen={menuOpen}
-                        selectedOption={selectedOption}
+                        selectedOption={!level ? selectedOption : undefined}
                     />
                     : null
             }

src/components/MultiselectMenu/types.d.ts

@@ -5,5 +5,5 @@ type MultiselectMenuOption = {
     destination?: string;
     default?: boolean;
     hidden?: boolean;
-    level?: MultiselectMenuOption[];
+    options?: MultiselectMenuOption[];
 };

src/routes/MetaDetails/MetaDetails.js

@@ -129,7 +129,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                         metaDetails.metaItem === null ?
                             <div className={styles['meta-message-container']}>
                                 <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
-                                <div className={styles['message-label']}>No addons ware requested for this meta!</div>
+                                <div className={styles['message-label']}>No addons were requested for this meta!</div>
                             </div>
                             :
                             metaDetails.metaItem.content.type === 'Err' ?

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js

@@ -9,19 +9,26 @@ const { Button, MultiselectMenu } = require('stremio/components');
 const SeasonsBarPlaceholder = require('./SeasonsBarPlaceholder');
 const styles = require('./styles');
 
-const SeasonsBar = ({ className, seasons, season, onSelect }) => {
+const SeasonsBar = ({ className, seasons, season, episode, onSelect }) => {
     const options = React.useMemo(() => {
-        return seasons.map((season) => ({
-            value: String(season),
-            label: season > 0 ? `${t('SEASON')} ${season}` : t('SPECIAL')
+        return seasons.map(({ id, episodes }) => ({
+            value: String(id),
+            label: id > 0 ? `${t('SEASON')} ${id}` : t('SPECIAL'),
+            options: episodes.map((episode) => ({
+                value: String(episode),
+                label: `${t('EPISODE')} ${episode}`
+            })),
         }));
     }, [seasons]);
     const selectedSeason = React.useMemo(() => {
-        return { label: String(season), value: String(season) };
+        return { label: String(season.id), value: String(season.id), options: season.episodes.map((episode) => ({
+            value: String(episode),
+            label: `${t('EPISODE')} ${episode}`
+        }))};
     }, [season]);
     const prevNextButtonOnClick = React.useCallback((event) => {
         if (typeof onSelect === 'function') {
-            const seasonIndex = seasons.indexOf(season);
+            const seasonIndex = seasons.findIndex(({ id }) => id === season.id);
             const valueIndex = event.currentTarget.dataset.action === 'next' ?
                 seasonIndex + 1 < seasons.length ? seasonIndex + 1 : seasons.length - 1
                 :
@@ -35,19 +42,20 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
             });
         }
     }, [season, seasons, onSelect]);
-    const seasonOnSelect = React.useCallback((value) => {
+    const seasonOnSelect = React.useCallback((level, value) => {
         if (typeof onSelect === 'function') {
             onSelect({
                 type: 'select',
                 value: value,
+                level,
                 reactEvent: event.reactEvent,
                 nativeEvent: event.nativeEvent
             });
         }
     }, [onSelect]);
 
     const [prevDisabled, nextDisabled] = React.useMemo(() => {
-        const currentIndex = seasons.indexOf(season);
+        const currentIndex = seasons.findIndex(({ id }) => id === season.id);
         return [
             currentIndex === 0,
             currentIndex === seasons.length - 1
@@ -63,7 +71,8 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
             <MultiselectMenu
                 className={styles['seasons-popup-label-container']}
                 options={options}
-                title={season > 0 ? `${t('SEASON')} ${season}` : t('SPECIAL')}
+                title={season.id > 0 ? `${t('SEASON')} ${season.id}` : t('SPECIAL')}
+                subtitle={episode && `${t('EPISODE')} ${episode}`}
                 selectedOption={selectedSeason}
                 onSelect={seasonOnSelect}
             />
@@ -79,8 +88,15 @@ SeasonsBar.Placeholder = SeasonsBarPlaceholder;
 
 SeasonsBar.propTypes = {
     className: PropTypes.string,
-    seasons: PropTypes.arrayOf(PropTypes.number).isRequired,
-    season: PropTypes.number.isRequired,
+    seasons: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.number,
+        episodes: PropTypes.arrayOf(PropTypes.number),
+    })).isRequired,
+    season: PropTypes.shape({
+        id: PropTypes.number,
+        episodes: PropTypes.arrayOf(PropTypes.number),
+    }).isRequired,
+    episode: PropTypes.string,
     onSelect: PropTypes.func
 };
 

src/routes/MetaDetails/VideosList/VideosList.js

@@ -11,6 +11,7 @@ const styles = require('./styles');
 
 const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
     const { core } = useServices();
+    const [selectedEpisode, setSelectedEpisode] = React.useState(null);
     const showNotificationsToggle = React.useMemo(() => {
         return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
     }, [metaItem]);
@@ -21,22 +22,19 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
             [];
     }, [metaItem]);
     const seasons = React.useMemo(() => {
-        return videos
-            .map(({ season }) => season)
-            .filter((season, index, seasons) => {
-                return season !== null &&
-                    !isNaN(season) &&
-                    typeof season === 'number' &&
-                    seasons.indexOf(season) === index;
-            })
-            .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
+        return [...new Set(videos.map(({ season }) => season))].map((season) => ({
+            id: season,
+            episodes: videos.filter(({ season: s }) => s === season).map(({ episode }) => episode)
+        }))
+            .sort((a, b) => (a.id || Number.MAX_SAFE_INTEGER) - (b.id || Number.MAX_SAFE_INTEGER));
     }, [videos]);
     const selectedSeason = React.useMemo(() => {
-        if (seasons.includes(season)) {
-            return season;
+        const foundSeason = seasons.find(({ id }) => id === season);
+        if (foundSeason) {
+            return foundSeason;
         }
 
-        const nonSpecialSeasons = seasons.filter((season) => season !== 0);
+        const nonSpecialSeasons = seasons.filter(({ id }) => id !== 0);
         if (nonSpecialSeasons.length > 0) {
             return nonSpecialSeasons[nonSpecialSeasons.length - 1];
         }
@@ -50,7 +48,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
     const videosForSeason = React.useMemo(() => {
         return videos
             .filter((video) => {
-                return selectedSeason === null || video.season === selectedSeason;
+                return selectedSeason === null || video.season === selectedSeason.id;
             })
             .sort((a, b) => {
                 return a.episode - b.episode;
@@ -71,6 +69,26 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
         });
     };
 
+    const handleSelect = (event) => {
+        if (!event.level) {
+            seasonOnSelect(event);
+        } else {
+            setSelectedEpisode(event.value);
+            const episode = videos.find(({ season: s, episode: e }) => s === season && e.toString() === event.value);
+            if (episode.deepLinks) {
+                if (typeof episode.deepLinks.player === 'string') {
+                    window.location = episode.deepLinks.player;
+                } else if (typeof episode.deepLinks.metaDetailsStreams === 'string') {
+                    window.location.replace(episode.deepLinks.metaDetailsStreams);
+                }
+            }
+        }
+    };
+
+    React.useEffect(() => {
+        setSelectedEpisode(null);
+    }, [season]);
+
     return (
         <div className={classnames(className, styles['videos-list-container'])}>
             {
@@ -107,8 +125,9 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                     <SeasonsBar
                                         className={styles['seasons-bar']}
                                         season={selectedSeason}
+                                        episode={selectedEpisode}
                                         seasons={seasons}
-                                        onSelect={seasonOnSelect}
+                                        onSelect={handleSelect}
                                     />
                                     :
                                     null