Merge pull request #741 from Stremio/refactor/install-addons-button-s…

…tream-list Details: Hide install addons button for older accounts
Stremio · Jan 20, 2025 · 51a2f0e · 51a2f0e
2 parents 22c02fa + 2af455c
commit 51a2f0e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.48.4",
+        "@stremio/stremio-core-web": "0.48.5",
         "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -9,25 +9,29 @@ const { Button, Image, Multiselect } = require('stremio/components');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
-const { usePlatform } = require('stremio/common');
+const { usePlatform, useProfile } = require('stremio/common');
 
 const ALL_ADDONS_KEY = 'ALL';
 
 const StreamsList = ({ className, video, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
+    const profile = useProfile();
     const streamsContainerRef = React.useRef(null);
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
     const onAddonSelected = React.useCallback((event) => {
         streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
         setSelectedAddon(event.value);
     }, [platform]);
+    const showInstallAddonsButton = React.useMemo(() => {
+        return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true;
+    }, [profile]);
     const backButtonOnClick = React.useCallback(() => {
         if (video.deepLinks && typeof video.deepLinks.metaDetailsVideos === 'string') {
             window.location.replace(video.deepLinks.metaDetailsVideos + (
                 typeof video.season === 'number' ?
-                    `?${new URLSearchParams({'season': video.season})}`
+                    `?${new URLSearchParams({ 'season': video.season })}`
                     :
                     null
             ));
@@ -126,6 +130,15 @@ const StreamsList = ({ className, video, ...props }) => {
                         <div className={styles['message-container']}>
                             <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
                             <div className={styles['label']}>{t('NO_STREAM')}</div>
+                            {
+                                showInstallAddonsButton ?
+                                    <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
+                                        <Icon className={styles['icon']} name={'addons'} />
+                                        <div className={styles['label']}>{t('ADDON_CATALOGUE_MORE')}</div>
+                                    </Button>
+                                    :
+                                    null
+                            }
                         </div>
                         :
                         filteredStreams.length === 0 ?
@@ -161,13 +174,18 @@ const StreamsList = ({ className, video, ...props }) => {
                                             onClick={stream.onClick}
                                         />
                                     ))}
+                                    {
+                                        showInstallAddonsButton ?
+                                            <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
+                                                <Icon className={styles['icon']} name={'addons'} />
+                                                <div className={styles['label']}>{t('ADDON_CATALOGUE_MORE')}</div>
+                                            </Button>
+                                            :
+                                            null
+                                    }
                                 </div>
                             </React.Fragment>
             }
-            <Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
-                <Icon className={styles['icon']} name={'addons'} />
-                <div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
-            </Button>
         </div>
     );
 };

diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
@@ -19,7 +19,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding: 1rem 1rem 0;
+        padding: 1rem;
         overflow-y: auto;
 
         .image {
@@ -144,11 +144,12 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        margin: 1rem;
-        padding: 1.5rem 1rem;
-        border-radius: var(--border-radius);
         background-color: var(--secondary-accent-color);
-        border-radius: 3rem;
+        height: 4rem;
+        padding: 0 2rem;
+        margin: 1rem auto;
+        max-width: 50%;
+        border-radius: 2rem;
 
         &:hover {
             outline: var(--focus-outline-size) solid var(--secondary-accent-color);
@@ -165,7 +166,7 @@
 
         .label {
             flex: 0 1 auto;
-            font-size: 1.5rem;
+            font-size: 1rem;
             font-weight: 700;
             max-height: 3.6em;
             text-align: center;

diff --git a/src/types/models/Ctx.d.ts b/src/types/models/Ctx.d.ts
@@ -9,6 +9,7 @@ type Auth = {
             created_at: number,
             expires_in: number,
         },
+        isNewUser: boolean,
     },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ type Auth = { @@
                 created_at: number,
                 expires_in: number,
             },
+            isNewUser: boolean,
         },
     };
@@ Expand Down @@