mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 17:15:48 +00:00
Merge pull request #842 from Stremio/feat/library-login-placeholder
Some checks are pending
Build / build (push) Waiting to run
Some checks are pending
Build / build (push) Waiting to run
Library: Align Guest placeholder with Calendar guest placeholder
This commit is contained in:
Tim
GitHub
commit
e5578c315a
6 changed files with 231 additions and 85 deletions
BIN
images/library_placeholder.png
Normal file
BIN
images/library_placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
|
|
@ -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');
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
132
src/routes/Library/Placeholder/Placeholder.less
Normal file
132
src/routes/Library/Placeholder/Placeholder.less
Normal file
|
|
@ -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
src/routes/Library/Placeholder/Placeholder.tsx
Normal file
47
src/routes/Library/Placeholder/Placeholder.tsx
Normal file
|
|
@ -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
src/routes/Library/Placeholder/index.ts
Normal file
5
src/routes/Library/Placeholder/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// Copyright (C) 2017-2025 Smart code 203358507
|
||||
|
||||
import Placeholder from './Placeholder';
|
||||
|
||||
export default Placeholder;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue