feature: season episode picker (1)

src/routes/MetaDetails/MetaDetails.js

@@ -160,7 +160,10 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                     streamPath !== null ?
                         <StreamsList
                             className={styles['streams-list']}
+                            metaItem={metaDetails.metaItem}
                             streams={metaDetails.streams}
+                            season={season}
+                            seasonOnSelect={seasonOnSelect}
                             video={video}
                         />
                         :

src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.tsx

@@ -0,0 +1,36 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import { Multiselect } from 'stremio/common';
+import React from 'react';
+import styles from './styles.less';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+    video: Video;
+    metaItem: MetaItem;
+    seasonOnSelect: (season: number) => void,
+    season: number,
+};
+
+const EpisodePicker = (props: Props) => {
+    const { t } = useTranslation();
+
+    console.log(props.season);
+
+    // const options = props.metaItem;;
+
+    return (
+        <div className={styles['episode-selector-container']}>
+             <Multiselect
+                className={styles['label-container']}
+                title={props.season > 0 ? `${t('SEASON')} ${props.season}` : t('SPECIAL')}
+                direction={'bottom-left'}
+                // options={options}
+                // selected={selectedOption}
+                onSelect={props.seasonOnSelect}
+            />
+        </div>
+    );
+};
+
+export default EpisodePicker;

src/routes/MetaDetails/StreamsList/EpisodePicker/index.ts

@@ -0,0 +1,4 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import EpisodePicker from './EpisodePicker';
+export default EpisodePicker;

src/routes/MetaDetails/StreamsList/EpisodePicker/styles.less

@@ -0,0 +1,40 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
+
+:import('~stremio/common/Multiselect/styles.less') {
+    multiselect-menu-container: menu-container;
+    multiselect-label: label;
+    multiselect-icon: icon;
+}
+
+.episode-selector-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1rem;
+    overflow: visible;
+
+    .label-container {
+        flex: 0 1 auto;
+        background: none;
+
+        &:hover, &:focus, &:global(.active) {
+            background-color: var(--overlay-color);
+        }
+
+        &>.multiselect-label {
+            color: var(--primary-foreground-color);
+        }
+
+        &>.multiselect-icon {
+            color: var(--primary-foreground-color);
+        }
+
+        .multiselect-menu-container {
+            max-height: calc(3.2rem * 7);
+            overflow: auto;
+        }
+    }
+}

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -9,13 +9,31 @@ const { Button, Image, Multiselect } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
+const { default: EpisodePicker } = require('./EpisodePicker');
 
 const ALL_ADDONS_KEY = 'ALL';
 
-const StreamsList = ({ className, video, ...props }) => {
+const StreamsList = ({ className, video, metaItem, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
+    const videos = React.useMemo(() => {
+        return metaItem && metaItem.content.type === 'Ready' ?
+            metaItem.content.content.videos
+            :
+            [];
+    }, [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));
+    }, [videos]);
     const onAddonSelected = React.useCallback((event) => {
         setSelectedAddon(event.value);
     }, []);
@@ -86,10 +104,18 @@ const StreamsList = ({ className, video, ...props }) => {
                     </div>
                     :
                     props.streams.every((streams) => streams.content.type === 'Err') ?
-                        <div className={styles['message-container']}>
-                            <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
-                            <div className={styles['label']}>{t('NO_STREAM')}</div>
-                        </div>
+                        <React.Fragment>
+                            <EpisodePicker
+                                video={video}
+                                seasons={seasons}
+                                season={props.season}
+                                seasonOnSelect={props.seasonOnSelect}
+                            />
+                            <div className={styles['message-container']}>
+                                <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                <div className={styles['label']}>{t('NO_STREAM')}</div>
+                            </div>
+                        </React.Fragment>
                         :
                         filteredStreams.length === 0 ?
                             <div className={styles['streams-container']}>
@@ -162,6 +188,9 @@ const StreamsList = ({ className, video, ...props }) => {
 StreamsList.propTypes = {
     className: PropTypes.string,
     streams: PropTypes.arrayOf(PropTypes.object).isRequired,
+    metaItem: PropTypes.object,
+    season: PropTypes.number,
+    seasonOnSelect: PropTypes.func,
     video: PropTypes.object
 };