fix(Library): align guest Placeholder with Calendar Placeholder layout and styles on mobile

src/routes/Library/Library.js

@@ -59,55 +59,58 @@ const Library = ({ model, urlParams, queryParams }) => {
     }, [hasNextPage, loadNextPage]);
     const onScroll = useOnScrollToBottom(onScrollToBottom, SCROLL_TO_BOTTOM_TRESHOLD);
     React.useLayoutEffect(() => {
-        if (profile.auth !== null && library.selected && library.selected.request.page === 1 && library.catalog.length !== 0 ) {
+        if (profile.auth !== null && library.selected && library.selected.request.page === 1 && library.catalog.length !== 0) {
             scrollContainerRef.current.scrollTop = 0;
         }
     }, [profile.auth, library.selected]);
     return (
         <MainNavBars className={styles['library-container']} route={model}>
-            <div className={styles['library-content']}>
+            {
-                {
+                profile.auth === null ?
-                    model === 'continue_watching' || profile.auth !== null ?
+                    <Placeholder />
-                        <div className={styles['selectable-inputs-container']}>
+                    : <div className={styles['library-content']}>
-                            <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                        {
-                            <Chips {...sortChips} className={styles['select-input-container']} />
+                            model === 'continue_watching' ?
-                        </div>
+                                <div className={styles['selectable-inputs-container']}>
-                        :
+                                    <Multiselect {...typeSelect} className={styles['select-input-container']} />
-                        null
+                                    <Chips {...sortChips} className={styles['select-input-container']} />
-                }
-                {
-                    model === 'library' && profile.auth === null ?
-                        <Placeholder />
-                        :
-                        library.selected === null ?
-                            <DelayedRenderer delay={500}>
-                                <div className={styles['message-container']}>
-                                    <Image
-                                        className={styles['image']}
-                                        src={require('/images/empty.png')}
-                                        alt={' '}
-                                    />
-                                    <div className={styles['message-label']}>{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!</div>
-                                </div>
-                            </DelayedRenderer>
-                            :
-                            library.catalog.length === 0 ?
-                                <div className={styles['message-container']}>
-                                    <Image
-                                        className={styles['image']}
-                                        src={require('/images/empty.png')}
-                                        alt={' '}
-                                    />
-                                    <div className={styles['message-label']}>Empty {model === 'library' ? 'Library' : 'Continue Watching'}</div>
                                 </div>
                                 :
-                                <div ref={scrollContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll}>
+                                null
-                                    {library.catalog.map((libItem, index) => (
+                        }
-                                        <LibItem {...libItem} notifications={notifications} removable={model === 'library'} key={index} />
+                        {
-                                    ))}
+                            model === 'library' ?
-                                </div>
+                                library.selected === null ?
-                }
+                                    <DelayedRenderer delay={500}>
-            </div>
+                                        <div className={styles['message-container']}>
+                                            <Image
+                                                className={styles['image']}
+                                                src={require('/images/empty.png')}
+                                                alt={' '}
+                                            />
+                                            <div className={styles['message-label']}>{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!</div>
+                                        </div>
+                                    </DelayedRenderer>
+                                    :
+                                    library.catalog.length === 0 ?
+                                        <div className={styles['message-container']}>
+                                            <Image
+                                                className={styles['image']}
+                                                src={require('/images/empty.png')}
+                                                alt={' '}
+                                            />
+                                            <div className={styles['message-label']}>Empty {model === 'library' ? 'Library' : 'Continue Watching'}</div>
+                                        </div>
+                                        :
+                                        <div ref={scrollContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll}>
+                                            {library.catalog.map((libItem, index) => (
+                                                <LibItem {...libItem} notifications={notifications} removable={model === 'library'} key={index} />
+                                            ))}
+                                        </div>
+                                : null
+                        }
+                    </div>
+            }
         </MainNavBars>
     );
 };

src/routes/Library/Placeholder/Placeholder.less

@@ -8,14 +8,11 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    min-height: 100%;
     width: 100%;
     overflow-y: auto;
 
     .title {
-        display: flex;
-        flex: 1;
-        align-items: flex-end;
         font-size: 1.75rem;
         font-weight: 400;
         text-align: center;
@@ -25,9 +22,6 @@
     }
 
     .image-container {
-        display: flex;
-        flex: 1;
-        align-items: center;
         padding: 1.5rem 0;
 
         .image {
@@ -37,14 +31,43 @@
         }
     }
 
-    .button-container {
+    .overview {
         display: flex;
-        flex: 1;
+        flex-direction: row;
-        align-items: flex-start;
+        align-items: center;
-        margin: 1rem 0;
+        gap: 4rem;
+        margin-bottom: 1rem;
 
+        .point {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 1.5rem;
+            width: 18rem;
+
+            .icon {
+                flex: none;
+                height: 3.25rem;
+                width: 3.25rem;
+                color: var(--primary-foreground-color);
+                opacity: 0.3;
+            }
+
+            .text {
+                flex: auto;
+                font-size: 1.1rem;
+                font-size: 500;
+                color: var(--primary-foreground-color);
+                opacity: 0.9;
+            }
+        }
+    }
+
+    .button-container {
+        margin: 1rem 0;
+    
         .button {
-            flex: none;
+            display: flex;
             justify-content: center;
             height: 4rem;
             line-height: 4rem;
@@ -54,7 +77,7 @@
             text-align: center;
             border-radius: 3.5rem;
             background-color: var(--overlay-color);
-            
+
             &:hover {
                 outline: var(--focus-outline-size) solid var(--primary-foreground-color);
                 background-color: transparent;
@@ -68,11 +91,10 @@
         padding: 1rem 2rem;
 
         .title {
-            flex: 0.5;
+            margin-bottom: 0;
         }
 
         .image-container {
-            flex: 2;
             padding: 1rem;
 
             .image {
@@ -88,9 +110,17 @@
 
 @media only screen and (max-width: @minimum) {
     .placeholder {
+        padding: 1rem 2rem;
 
-        .image-container {
+        .overview {
-            flex: 1;
+            flex-direction: column;
+            gap: 1rem;
+
+            .point {
+                .text {
+                    font-size: 1rem;
+                }
+            }
         }
 
         .button-container {

src/routes/Library/Placeholder/Placeholder.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import Icon from '@stremio/stremio-icons/react';
 import { Button, Image } from 'stremio/components';
 import styles from './Placeholder.less';
 
@@ -16,10 +17,24 @@ const Placeholder = () => {
             <div className={styles['image-container']}>
                 <Image
                     className={styles['image']}
-                    src={require('/images/media_carousel.png')}
+                    src={require('/images/library_placeholder.png')}
                     alt={' '}
                 />
             </div>
+            <div className={styles['overview']}>
+                <div className={styles['point']}>
+                    <Icon className={styles['icon']} name={'cloud-library'} />
+                    <div className={styles['text']}>
+                        {t('NOT_LOGGED_IN_CLOUD')}
+                    </div>
+                </div>
+                <div className={styles['point']}>
+                    <Icon className={styles['icon']} name={'actors'} />
+                    <div className={styles['text']}>
+                        {t('NOT_LOGGED_IN_RECOMMENDATIONS')}
+                    </div>
+                </div>
+            </div>
             <div className={styles['button-container']}>
                 <Button className={styles['button']} href={'#/intro?form=login'}>
                     {t('LOG_IN')}