diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js index e62c26633..4c061ef73 100644 --- a/src/routes/MetaDetails/StreamsList/StreamsList.js +++ b/src/routes/MetaDetails/StreamsList/StreamsList.js @@ -4,32 +4,70 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('@stremio/stremio-icons/dom'); -const { Button, Image } = require('stremio/common'); +const { Button, Image, Multiselect } = require('stremio/common'); const { useServices } = require('stremio/services'); const Stream = require('./Stream'); const styles = require('./styles'); +const ALL_ADDONS_KEY = 'ALL'; + const StreamsList = ({ className, ...props }) => { const { core } = useServices(); - const streams = React.useMemo(() => { + const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY); + const onAddonSelected = React.useCallback((event) => { + setSelectedAddon(event.value); + }, []); + const streamsByAddon = React.useMemo(() => { return props.streams .filter((streams) => streams.content.type === 'Ready') - .map((streams) => { - return streams.content.content.map((stream) => ({ - ...stream, - onClick: () => { - core.transport.analytics({ - event: 'StreamClicked', - args: { - stream - } - }); - }, - addonName: streams.addon.manifest.name - })); - }) - .flat(1); + .reduce((streamsByAddon, streams) => { + streamsByAddon[streams.addon.transportUrl] = { + addon: streams.addon, + streams: streams.content.content.map((stream) => ({ + ...stream, + onClick: () => { + core.transport.analytics({ + event: 'StreamClicked', + args: { + stream + } + }); + }, + addonName: streams.addon.manifest.name + })) + }; + + return streamsByAddon; + }, {}); }, [props.streams]); + const filteredStreams = React.useMemo(() => { + return selectedAddon === ALL_ADDONS_KEY ? + Object.values(streamsByAddon).map(({ streams }) => streams).flat(1) + : + streamsByAddon[selectedAddon] ? + streamsByAddon[selectedAddon].streams + : + []; + }, [streamsByAddon, selectedAddon]); + const selectableOptions = React.useMemo(() => { + return { + title: 'Select Addon', + options: [ + { + value: ALL_ADDONS_KEY, + label: 'All', + title: 'All' + }, + ...Object.keys(streamsByAddon).map((transportUrl) => ({ + value: transportUrl, + label: streamsByAddon[transportUrl].addon.manifest.name, + title: streamsByAddon[transportUrl].addon.manifest.name, + })) + ], + selected: [selectedAddon], + onSelect: onAddonSelected + }; + }, [streamsByAddon, selectedAddon]); return (
{ @@ -45,26 +83,37 @@ const StreamsList = ({ className, ...props }) => {
No streams were found!
: - streams.length === 0 ? + filteredStreams.length === 0 ?
: -
- {streams.map((stream, index) => ( - - ))} -
+ + { + Object.keys(streamsByAddon).length > 1 ? + + : + null + } +
+ {filteredStreams.map((stream, index) => ( + + ))} +
+
}