Skip to content

Commit

Permalink
Merge pull request #842 from Stremio/feat/library-login-placeholder
Browse files Browse the repository at this point in the history 
Library: Align Guest placeholder with Calendar guest placeholder
  • Loading branch information
@tymmesyde
tymmesyde authored Feb 24, 2025
2 parents 235d09f + e1e77c9 commit e5578c3
Show file tree
Hide file tree
Showing 6 changed files with 231 additions and 85 deletions.
Binary file added images/library_placeholder.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 47 additions & 53 deletions src/routes/Library/Library.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const NotFound = require('stremio/routes/NotFound');
const { useProfile, useNotifications, routesRegexp, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const { Button, DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
const { DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
const { default: Placeholder } = require('./Placeholder');
const useLibrary = require('./useLibrary');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
Expand Down Expand Up @@ -58,65 +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 ?
<div className={classnames(styles['message-container'], styles['no-user-message-container'])}>
<Image
className={styles['image']}
src={require('/images/anonymous.png')}
alt={' '}
/>
<div className={styles['message-label']}>Library is only available for logged in users!</div>
<Button className={styles['login-button-container']} href={'#/intro'}>
<div className={styles['label']}>LOG IN</div>
</Button>
</div>
:
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
132 changes: 132 additions & 0 deletions src/routes/Library/Placeholder/Placeholder.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
// Copyright (C) 2017-2025 Smart code 203358507

@import (reference) '~stremio/common/screen-sizes.less';

.placeholder {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100%;
width: 100%;
overflow-y: auto;

.title {
font-size: 1.75rem;
font-weight: 400;
text-align: center;
color: var(--primary-foreground-color);
margin-bottom: 1rem;
opacity: 0.5;
}

.image-container {
padding: 1.5rem 0;

.image {
height: 100%;
max-height: 14rem;
object-fit: contain;
}
}

.overview {
display: flex;
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 {
display: flex;
justify-content: center;
height: 4rem;
line-height: 4rem;
padding: 0 5rem;
font-size: 1.1rem;
color: var(--primary-foreground-color);
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;
}
}
}
}

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

.title {
margin-bottom: 0;
}

.image-container {
padding: 1rem;

.image {
max-height: 10rem;
}
}

.button-container {
margin: 1rem 0 0;
}
}
}

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

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

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

.button-container {
.button {
width: 100%;
}
}
}
}
47 changes: 47 additions & 0 deletions src/routes/Library/Placeholder/Placeholder.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// Copyright (C) 2017-2025 Smart code 203358507

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';

const Placeholder = () => {
const { t } = useTranslation();

return (
<div className={styles['placeholder']}>
<div className={styles['title']}>
{t('LIBRARY_NOT_LOGGED_IN')}
</div>
<div className={styles['image-container']}>
<Image
className={styles['image']}
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')}
</Button>
</div>
</div>
);
};

export default Placeholder;
5 changes: 5 additions & 0 deletions src/routes/Library/Placeholder/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Copyright (C) 2017-2025 Smart code 203358507

import Placeholder from './Placeholder';

export default Placeholder;
32 changes: 0 additions & 32 deletions src/routes/Library/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,38 +66,6 @@
padding: 4rem;
}

&.no-user-message-container {
.login-button-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 20rem;
height: 3.5rem;
border-radius: 3.5rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
background-color: var(--secondary-accent-color);

&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
background-color: transparent;
}

.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 4.8em;
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-foreground-color);
text-align: center;
}
}
}

.image {
flex: none;
width: 12rem;
Expand Down

0 comments on commit e5578c3

Please sign in to comment.