Skip to content

Commit

Permalink
fix(Library): align guest Placeholder with Calendar Placeholder layou…
Browse files Browse the repository at this point in the history 
…t and styles on mobile
  • Loading branch information
@Botsy
Botsy committed Feb 24, 2025
1 parent 1608448 commit 3890001
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 60 deletions.
87 changes: 45 additions & 42 deletions src/routes/Library/Library.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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']}>
{
model === 'continue_watching' || profile.auth !== null ?
<div className={styles['selectable-inputs-container']}>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Chips {...sortChips} className={styles['select-input-container']} />
</div>
:
null
}
{
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>
{
profile.auth === null ?
<Placeholder />
: <div className={styles['library-content']}>
{
model === 'continue_watching' ?
<div className={styles['selectable-inputs-container']}>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Chips {...sortChips} className={styles['select-input-container']} />
</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>
}
</div>
null
}
{
model === 'library' ?
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}>
{library.catalog.map((libItem, index) => (
<LibItem {...libItem} notifications={notifications} removable={model === 'library'} key={index} />
))}
</div>
: null
}
</div>
}
</MainNavBars>
);
};
Expand Down
64 changes: 47 additions & 17 deletions src/routes/Library/Placeholder/Placeholder.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -25,9 +22,6 @@
}

.image-container {
display: flex;
flex: 1;
align-items: center;
padding: 1.5rem 0;

.image {
Expand All @@ -37,14 +31,43 @@
}
}

.button-container {
.overview {
display: flex;
flex: 1;
align-items: flex-start;
margin: 1rem 0;
flex-direction: row;
align-items: center;
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;
Expand All @@ -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;
Expand All @@ -68,11 +91,10 @@
padding: 1rem 2rem;

.title {
flex: 0.5;
margin-bottom: 0;
}

.image-container {
flex: 2;
padding: 1rem;

.image {
Expand All @@ -88,9 +110,17 @@

@media only screen and (max-width: @minimum) {
.placeholder {
padding: 1rem 2rem;

.image-container {
flex: 1;
.overview {
flex-direction: column;
gap: 1rem;

.point {
.text {
font-size: 1rem;
}
}
}

.button-container {
Expand Down
17 changes: 16 additions & 1 deletion src/routes/Library/Placeholder/Placeholder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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')}
Expand Down

0 comments on commit 3890001

Please sign in to comment.