Streams List: Season and Episode picker when no streams loaded

src/components/NumberInput/NumberInput.less

@@ -0,0 +1,65 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+.number-input {
+    user-select: text;
+    display: flex;
+    max-width: 14rem;
+    height: 3.5rem;
+    margin-bottom: 1rem;
+    color: var(--primary-foreground-color);
+    background: var(--overlay-color);
+    border-radius: 3.5rem;
+
+    .button {
+        flex: none;
+        width: 3.5rem;
+        height: 3.5rem;
+        padding: 1rem;
+        background: var(--overlay-color);
+        border: none;
+        border-radius: 100%;
+        cursor: pointer;
+        z-index: 1;
+
+        .icon {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .number-display {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 0 1rem;
+
+        &::-moz-focus-inner {
+            border: none;
+        }
+
+        .label {
+            font-size: 0.8rem;
+            font-weight: 400;
+            opacity: 0.7;
+        }
+
+        .value {
+            font-size: 1.2rem;
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            color: var(--primary-foreground-color);
+            text-align: center;
+            appearance: none;
+
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
+        }
+    }
+}

src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,109 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import Icon from '@stremio/stremio-icons/react';
+import React, { ChangeEvent, forwardRef, useCallback, useState } from 'react';
+import { type KeyboardEvent, type InputHTMLAttributes } from 'react';
+import classnames from 'classnames';
+import styles from './NumberInput.less';
+import Button from '../Button';
+
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+    containerClassName?: string;
+    className?: string;
+    disabled?: boolean;
+    showButtons?: boolean;
+    defaultValue?: number;
+    label?: string;
+    min?: number;
+    max?: number;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onSubmit?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onUpdate?: (value: number) => void;
+};
+
+const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue, showButtons, onUpdate, ...props }, ref) => {
+    const [value, setValue] = useState<number>(defaultValue || 0);
+    const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
+        props.onKeyDown && props.onKeyDown(event);
+
+        if (event.key === 'Enter') {
+            props.onSubmit && props.onSubmit(event);
+        }
+    }, [props.onKeyDown, props.onSubmit]);
+
+    const updateValueAndNotify = (valueAsNumber: number) => {
+        setValue(valueAsNumber);
+        onUpdate?.(valueAsNumber);
+    };
+
+    const handleIncrease = () => {
+        if (props.max !== undefined) {
+            updateValueAndNotify(Math.min(props.max, (value || 0) + 1));
+            return;
+        }
+        updateValueAndNotify((value || 0) + 1);
+    };
+
+    const handleDecrease = () => {
+        if (props.min !== undefined) {
+            updateValueAndNotify(Math.max(props.min, (value || 0) - 1));
+            return;
+        }
+        updateValueAndNotify((value || 0) - 1);
+    };
+
+    const handleChange = ({ target: { valueAsNumber }}: ChangeEvent<HTMLInputElement>) => {
+        const min = props.min || 0;
+        if (valueAsNumber && valueAsNumber < min) {
+            valueAsNumber = min;
+        }
+        if (props.max !== undefined && valueAsNumber && valueAsNumber > props.max) {
+            valueAsNumber = props.max;
+        }
+        updateValueAndNotify(valueAsNumber);
+    };
+
+    return (
+        <div className={classnames(props.containerClassName, styles['number-input'])}>
+            {
+                showButtons ?
+                    <Button
+                        className={styles['button']}
+                        onClick={handleDecrease}
+                        disabled={props.disabled || (props.min !== undefined ? value <= props.min : false)}>
+                        <Icon className={styles['icon']} name={'remove'} />
+                    </Button>
+                    : null
+            }
+            <div className={classnames(styles['number-display'], { [styles['buttons-container']]: showButtons })}>
+                {
+                    props.label ?
+                        <div className={styles['label']}>{props.label}</div>
+                        : null
+                }
+                <input
+                    ref={ref}
+                    type={'number'}
+                    tabIndex={0}
+                    value={value}
+                    {...props}
+                    className={classnames(props.className, styles['value'], { 'disabled': props.disabled })}
+                    onChange={handleChange}
+                    onKeyDown={onKeyDown}
+                />
+            </div>
+            {
+                showButtons ?
+                    <Button
+                        className={styles['button']} onClick={handleIncrease} disabled={props.disabled || (props.max !== undefined ? value >= props.max : false)}>
+                        <Icon className={styles['icon']} name={'add'} />
+                    </Button>
+                    : null
+            }
+        </div>
+    );
+});
+
+NumberInput.displayName = 'NumberInput';
+
+export default NumberInput;

src/components/NumberInput/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import NumberInput from './NumberInput';
+
+export default NumberInput;

src/components/index.ts

@@ -17,6 +17,7 @@ import ModalDialog from './ModalDialog';
 import Multiselect from './Multiselect';
 import MultiselectMenu from './MultiselectMenu';
 import { HorizontalNavBar, VerticalNavBar } from './NavBar';
+import NumberInput from './NumberInput';
 import Popup from './Popup';
 import RadioButton from './RadioButton';
 import SearchBar from './SearchBar';
@@ -48,6 +49,7 @@ export {
     MultiselectMenu,
     HorizontalNavBar,
     VerticalNavBar,
+    NumberInput,
     Popup,
     RadioButton,
     SearchBar,

src/routes/MetaDetails/MetaDetails.js

@@ -76,6 +76,13 @@ const MetaDetails = ({ urlParams, queryParams }) => {
     const seasonOnSelect = React.useCallback((event) => {
         setSeason(event.value);
     }, [setSeason]);
+    const handleEpisodeSearch = React.useCallback((season, episode) => {
+        const searchVideoHash = encodeURIComponent(`${urlParams.id}:${season}:${episode}`);
+        const url = window.location.hash;
+        const searchVideoPath = url.replace(encodeURIComponent(urlParams.videoId), searchVideoHash);
+        window.location = searchVideoPath;
+    }, [urlParams, window.location]);
+
     const renderBackgroundImageFallback = React.useCallback(() => null, []);
     const renderBackground = React.useMemo(() => !!(
         metaPath &&
@@ -129,7 +136,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' ?
@@ -169,6 +176,8 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                             className={styles['streams-list']}
                             streams={metaDetails.streams}
                             video={video}
+                            type={streamPath.type}
+                            onEpisodeSearch={handleEpisodeSearch}
                         />
                         :
                         metaPath !== null ?

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

@@ -0,0 +1,29 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+.button-container {
+    flex: none;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--focus-outline-size) solid var(--primary-accent-color);
+    background-color: var(--primary-accent-color);
+    height: 4rem;
+    padding: 0 2rem;
+    margin: 1rem auto;
+    border-radius: 2rem;
+
+    &:hover {
+        background-color: transparent;
+    }
+
+    .label {
+        flex: 0 1 auto;
+        font-size: 1rem;
+        font-weight: 700;
+        max-height: 3.5rem;
+        text-align: center;
+        color: var(--primary-foreground-color);
+        margin-bottom: 0;
+    }
+}

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

@@ -0,0 +1,54 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, NumberInput } from 'stremio/components';
+import styles from './EpisodePicker.less';
+
+type Props = {
+    className?: string,
+    seriesId: string;
+    onSubmit: (season: number, episode: number) => void;
+};
+
+const EpisodePicker = ({ className, onSubmit }: Props) => {
+    const { t } = useTranslation();
+
+    const { initialSeason, initialEpisode } = useMemo(() => {
+        const splitPath = window.location.hash.split('/');
+        const videoId = decodeURIComponent(splitPath[splitPath.length - 1]);
+        const [, pathSeason, pathEpisode] = videoId ? videoId.split(':') : [];
+        return {
+            initialSeason: isNaN(parseInt(pathSeason)) ? 0 : parseInt(pathSeason),
+            initialEpisode: isNaN(parseInt(pathEpisode)) ? 1 : parseInt(pathEpisode)
+        };
+    }, []);
+
+    const [season, setSeason] = useState(initialSeason);
+    const [episode, setEpisode] = useState(initialEpisode);
+
+    const handleSeasonChange = useCallback((value: number) => setSeason(!isNaN(value) ? value : 0), []);
+    const handleEpisodeChange = useCallback((value: number) => setEpisode(!isNaN(value) ? value : 1), []);
+
+    const handleSubmit = useCallback(() => {
+        if (typeof onSubmit === 'function' && !isNaN(season) && !isNaN(episode)) {
+            onSubmit(season, episode);
+        }
+    }, [onSubmit, season, episode]);
+
+    const disabled = useMemo(() => {
+        return season === initialSeason && episode === initialEpisode;
+    }, [season, episode, initialSeason, initialEpisode]);
+
+    return (
+        <div className={className}>
+            <NumberInput min={0} label={t('SEASON')} defaultValue={season} onUpdate={handleSeasonChange} showButtons />
+            <NumberInput min={1} label={t('EPISODE')} defaultValue={episode} onUpdate={handleEpisodeChange} showButtons />
+            <Button className={styles['button-container']} onClick={handleSubmit} disabled={disabled}>
+                <div className={styles['label']}>{t('SIDEBAR_SHOW_STREAMS')}</div>
+            </Button>
+        </div>
+    );
+};
+
+export default EpisodePicker;

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

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

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -10,10 +10,11 @@ const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
 const { usePlatform, useProfile } = require('stremio/common');
+const { default: SeasonEpisodePicker } = require('./EpisodePicker');
 
 const ALL_ADDONS_KEY = 'ALL';
 
-const StreamsList = ({ className, video, ...props }) => {
+const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
@@ -25,8 +26,8 @@ const StreamsList = ({ className, video, ...props }) => {
         setSelectedAddon(event.value);
     }, [platform]);
     const showInstallAddonsButton = React.useMemo(() => {
-        return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true;
-    }, [profile]);
+        return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true && !video?.upcoming;
+    }, [profile, video]);
     const backButtonOnClick = React.useCallback(() => {
         if (video.deepLinks && typeof video.deepLinks.metaDetailsVideos === 'string') {
             window.location.replace(video.deepLinks.metaDetailsVideos + (
@@ -93,6 +94,11 @@ const StreamsList = ({ className, video, ...props }) => {
             onSelect: onAddonSelected
         };
     }, [streamsByAddon, selectedAddon]);
+
+    const handleEpisodePicker = React.useCallback((season, episode) => {
+        onEpisodeSearch(season, episode);
+    }, [onEpisodeSearch]);
+
     return (
         <div className={classnames(className, styles['streams-list-container'])}>
             <div className={styles['select-choices-wrapper']}>
@@ -122,12 +128,27 @@ const StreamsList = ({ className, video, ...props }) => {
             {
                 props.streams.length === 0 ?
                     <div className={styles['message-container']}>
+                        {
+                            type === 'series' ?
+                                <SeasonEpisodePicker className={styles['search']} onSubmit={handleEpisodePicker} />
+                                : null
+                        }
                         <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
                         <div className={styles['label']}>No addons were requested for streams!</div>
                     </div>
                     :
                     props.streams.every((streams) => streams.content.type === 'Err') ?
                         <div className={styles['message-container']}>
+                            {
+                                type === 'series' ?
+                                    <SeasonEpisodePicker className={styles['search']} onSubmit={handleEpisodePicker} />
+                                    : null
+                            }
+                            {
+                                video?.upcoming ?
+                                    <div className={styles['label']}>{t('UPCOMING')}...</div>
+                                    : null
+                            }
                             <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
                             <div className={styles['label']}>{t('NO_STREAM')}</div>
                             {
@@ -193,7 +214,9 @@ const StreamsList = ({ className, video, ...props }) => {
 StreamsList.propTypes = {
     className: PropTypes.string,
     streams: PropTypes.arrayOf(PropTypes.object).isRequired,
-    video: PropTypes.object
+    video: PropTypes.object,
+    type: PropTypes.string,
+    onEpisodeSearch: PropTypes.func
 };
 
 module.exports = StreamsList;