From 704af55ccbbe3d8b9f0c3b627618bde09b1e375b Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 26 Oct 2022 01:14:10 +0200
Subject: [PATCH 1/3] feat(StreamsList): add multiselect to filter streams by
 addons

---
 .../MetaDetails/StreamsList/StreamsList.js    | 72 ++++++++++++++-----
 .../MetaDetails/StreamsList/styles.less       | 30 ++++++++
 2 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index e62c26633..eed53ec22 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -4,13 +4,19 @@ 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 [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
+    const onAddonSelected = React.useCallback((event) => {
+        setSelectedAddon(event.value);
+    }, []);
     const streams = React.useMemo(() => {
         return props.streams
             .filter((streams) => streams.content.type === 'Ready')
@@ -25,11 +31,39 @@ const StreamsList = ({ className, ...props }) => {
                             }
                         });
                     },
+                    transportUrl: streams.addon.transportUrl,
                     addonName: streams.addon.manifest.name
                 }));
             })
             .flat(1);
     }, [props.streams]);
+    const filteredStreams = React.useMemo(() => {
+        return selectedAddon === ALL_ADDONS_KEY ?
+            streams
+            :
+            streams.filter((stream) => stream.transportUrl === selectedAddon);
+    }, [streams, selectedAddon]);
+    const selectableOptions = React.useMemo(() => {
+        const transportUrls = [...new Set(streams.map(({ transportUrl }) => transportUrl))];
+        const sortedStreams = transportUrls.map((transportUrl) => streams.filter((stream) => stream.transportUrl === transportUrl));
+        return {
+            title: 'Select Addon',
+            options: [
+                {
+                    value: ALL_ADDONS_KEY,
+                    label: 'All',
+                    title: 'All'
+                },
+                ...sortedStreams.map((streams) => ({
+                    value: streams[0].transportUrl,
+                    label: streams[0].addonName,
+                    title: streams[0].addonName
+                }))
+            ],
+            selected: [selectedAddon],
+            onSelect: onAddonSelected
+        };
+    }, [streams, selectedAddon]);
     return (
         <div className={classnames(className, styles['streams-list-container'])}>
             {
@@ -45,26 +79,32 @@ const StreamsList = ({ className, ...props }) => {
                             <div className={styles['label']}>No streams were found!</div>
                         </div>
                         :
-                        streams.length === 0 ?
+                        filteredStreams.length === 0 ?
                             <div className={styles['streams-container']}>
                                 <Stream.Placeholder />
                                 <Stream.Placeholder />
                             </div>
                             :
-                            <div className={styles['streams-container']}>
-                                {streams.map((stream, index) => (
-                                    <Stream
-                                        key={index}
-                                        addonName={stream.addonName}
-                                        name={stream.name}
-                                        description={stream.description}
-                                        thumbnail={stream.thumbnail}
-                                        progress={stream.progress}
-                                        deepLinks={stream.deepLinks}
-                                        onClick={stream.onClick}
-                                    />
-                                ))}
-                            </div>
+                            <React.Fragment>
+                                <Multiselect
+                                    {...selectableOptions}
+                                    className={styles['select-input-container']}
+                                />
+                                <div className={styles['streams-container']}>
+                                    {filteredStreams.map((stream, index) => (
+                                        <Stream
+                                            key={index}
+                                            addonName={stream.addonName}
+                                            name={stream.name}
+                                            description={stream.description}
+                                            thumbnail={stream.thumbnail}
+                                            progress={stream.progress}
+                                            deepLinks={stream.deepLinks}
+                                            onClick={stream.onClick}
+                                        />
+                                    ))}
+                                </div>
+                            </React.Fragment>
             }
             <Button className={styles['install-button-container']} title={'Install Addons'} href={'#/addons'}>
                 <Icon className={styles['icon']} icon={'ic_addons'} />
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 03381fe44..bbc19bec6 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -3,6 +3,12 @@
 @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;
+}
+
 .streams-list-container {
     display: flex;
     flex-direction: column;
@@ -35,6 +41,30 @@
         }
     }
 
+    .select-input-container {
+        flex: 0 0 auto;
+        height: 3.5rem;
+        margin: 1em 1em 0 1em;
+        background: none;
+
+        &:hover, &:focus, &:global(.active) {
+            background-color: @color-background;
+        }
+
+        & >.multiselect-label {
+            color: @color-surface-light5-90;
+        }
+
+        & >.multiselect-icon {
+            fill: @color-surface-light5-90;
+        }
+
+        .multiselect-menu-container {
+            max-height: calc(3.2rem * 7);
+            overflow: auto;
+        }
+    }
+
     .streams-container {
         flex: 0 1 auto;
         align-self: stretch;

From f3440b6e59a16c60e16f6e072f12f00dd0cc08c6 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 27 Oct 2022 15:39:58 +0200
Subject: [PATCH 2/3] refactor(StreamsList): improve code efficiency

---
 .../MetaDetails/StreamsList/StreamsList.js    | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index eed53ec22..9f84543e5 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -17,35 +17,39 @@ const StreamsList = ({ className, ...props }) => {
     const onAddonSelected = React.useCallback((event) => {
         setSelectedAddon(event.value);
     }, []);
-    const streams = React.useMemo(() => {
+    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
-                            }
-                        });
-                    },
-                    transportUrl: streams.addon.transportUrl,
-                    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 ?
-            streams
+            Object.values(streamsByAddon).map(({ streams }) => streams).flat(1)
             :
-            streams.filter((stream) => stream.transportUrl === selectedAddon);
-    }, [streams, selectedAddon]);
+            streamsByAddon[selectedAddon] ?
+                streamsByAddon[selectedAddon].streams
+                :
+                [];
+    }, [streamsByAddon, selectedAddon]);
     const selectableOptions = React.useMemo(() => {
-        const transportUrls = [...new Set(streams.map(({ transportUrl }) => transportUrl))];
-        const sortedStreams = transportUrls.map((transportUrl) => streams.filter((stream) => stream.transportUrl === transportUrl));
         return {
             title: 'Select Addon',
             options: [
@@ -54,16 +58,16 @@ const StreamsList = ({ className, ...props }) => {
                     label: 'All',
                     title: 'All'
                 },
-                ...sortedStreams.map((streams) => ({
-                    value: streams[0].transportUrl,
-                    label: streams[0].addonName,
-                    title: streams[0].addonName
+                ...Object.keys(streamsByAddon).map((transportUrl) => ({
+                    value: transportUrl,
+                    label: streamsByAddon[transportUrl].addon.manifest.name,
+                    title: streamsByAddon[transportUrl].addon.manifest.name,
                 }))
             ],
             selected: [selectedAddon],
             onSelect: onAddonSelected
         };
-    }, [streams, selectedAddon]);
+    }, [streamsByAddon, selectedAddon]);
     return (
         <div className={classnames(className, styles['streams-list-container'])}>
             {

From f7f4ac38df74671d6c8ca7b4011134cc4286afb0 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 27 Oct 2022 15:44:18 +0200
Subject: [PATCH 3/3] refactor(StreamsList): hide multiselect if there is only
 one addon

---
 src/routes/MetaDetails/StreamsList/StreamsList.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 9f84543e5..4c061ef73 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -90,10 +90,15 @@ const StreamsList = ({ className, ...props }) => {
                             </div>
                             :
                             <React.Fragment>
-                                <Multiselect
-                                    {...selectableOptions}
-                                    className={styles['select-input-container']}
-                                />
+                                {
+                                    Object.keys(streamsByAddon).length > 1 ?
+                                        <Multiselect
+                                            {...selectableOptions}
+                                            className={styles['select-input-container']}
+                                        />
+                                        :
+                                        null
+                                }
                                 <div className={styles['streams-container']}>
                                     {filteredStreams.map((stream, index) => (
                                         <Stream