-
+
{
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 76a16940e..44c0c8851 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -42,6 +42,7 @@
flex-shrink: 1;
flex-basis: 15rem;
height: 2.75rem;
+ background-color: var(--overlay-color);
&:not(:last-child) {
margin-right: 1.5rem;
diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js
index d173d663a..84816b646 100644
--- a/src/routes/Library/useSelectableInputs.js
+++ b/src/routes/Library/useSelectableInputs.js
@@ -2,22 +2,17 @@
const React = require('react');
const { useTranslate } = require('stremio/common');
-
const mapSelectableInputs = (library, t) => {
- const selectedType = library.selectable.types
- .filter(({ selected }) => selected).map(({ deepLinks }) => deepLinks.library);
+ const selectedType = library.selectable.types.find(({ selected }) => selected) || library.selectable.types.find(({ type }) => type === null);
const typeSelect = {
- title: t.string('SELECT_TYPE'),
options: library.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.library,
label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
})),
- selected: selectedType.length
- ? selectedType
- : [library.selectable.types[0]].map(({ deepLinks }) => deepLinks.library),
- onSelect: (event) => {
- window.location = event.value;
+ value: selectedType?.deepLinks.library,
+ onSelect: (value) => {
+ window.location = value;
}
};
const sortChips = {
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index a9665688a..eebc0c3cf 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, Multiselect } = require('stremio/components');
+const { Button, Image, MultiselectMenu } = require('stremio/components');
const { useServices } = require('stremio/services');
const Stream = require('./Stream');
const styles = require('./styles');
@@ -21,9 +21,9 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
const profile = useProfile();
const streamsContainerRef = React.useRef(null);
const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
- const onAddonSelected = React.useCallback((event) => {
+ const onAddonSelected = React.useCallback((value) => {
streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
- setSelectedAddon(event.value);
+ setSelectedAddon(value);
}, [platform]);
const showInstallAddonsButton = React.useMemo(() => {
return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true && !video?.upcoming;
@@ -77,7 +77,6 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
}, [streamsByAddon, selectedAddon]);
const selectableOptions = React.useMemo(() => {
return {
- title: 'Select Addon',
options: [
{
value: ALL_ADDONS_KEY,
@@ -90,7 +89,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
title: streamsByAddon[transportUrl].addon.manifest.name,
}))
],
- selected: [selectedAddon],
+ value: selectedAddon,
onSelect: onAddonSelected
};
}, [streamsByAddon, selectedAddon]);
@@ -117,7 +116,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
}
{
Object.keys(streamsByAddon).length > 1 ?
-
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 0bffa8fcc..ecfea5162 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -114,7 +114,7 @@
.select-input-container {
min-width: 40%;
flex-grow: 1;
- background: none;
+ background-color: none;
&:hover, &:focus, &:global(.active) {
background-color: var(--overlay-color);
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
index d202aafb0..ea870a931 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
@@ -17,7 +17,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
}));
}, [seasons]);
const selectedSeason = React.useMemo(() => {
- return { label: String(season), value: String(season) };
+ return String(season);
}, [season]);
const prevNextButtonOnClick = React.useCallback((event) => {
if (typeof onSelect === 'function') {
@@ -64,7 +64,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
className={styles['seasons-popup-label-container']}
options={options}
title={season > 0 ? t('SEASON_NUMBER', { season }) : t('SPECIAL')}
- selectedOption={selectedSeason}
+ value={selectedSeason}
onSelect={seasonOnSelect}
/>