From 39e37b5875de0e54394c0d1d6be91dd21018a799 Mon Sep 17 00:00:00 2001 From: Botzy Date: Wed, 19 Feb 2025 18:22:10 +0200 Subject: [PATCH 1/7] refactor(Calendar): rename placeholder image with more generic name and fix import --- ...placeholder.png => not_loggedin_placeholder.png} | Bin src/routes/Calendar/Placeholder/Placeholder.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename images/{calendar_placeholder.png => not_loggedin_placeholder.png} (100%) diff --git a/images/calendar_placeholder.png b/images/not_loggedin_placeholder.png similarity index 100% rename from images/calendar_placeholder.png rename to images/not_loggedin_placeholder.png diff --git a/src/routes/Calendar/Placeholder/Placeholder.tsx b/src/routes/Calendar/Placeholder/Placeholder.tsx index 4b48ba3f2..1a8a412b8 100644 --- a/src/routes/Calendar/Placeholder/Placeholder.tsx +++ b/src/routes/Calendar/Placeholder/Placeholder.tsx @@ -16,7 +16,7 @@ const Placeholder = () => { {'
From 64310c863f5cee3a0b1ee76fc03953df49eb774a Mon Sep 17 00:00:00 2001 From: Botzy Date: Thu, 20 Feb 2025 14:30:35 +0200 Subject: [PATCH 2/7] feat(Placeholder): added Placeholder component --- .../Library/Placeholder/Placeholder.less | 102 ++++++++++++++++++ .../Library/Placeholder/Placeholder.tsx | 32 ++++++ src/routes/Library/Placeholder/index.ts | 5 + 3 files changed, 139 insertions(+) create mode 100644 src/routes/Library/Placeholder/Placeholder.less create mode 100644 src/routes/Library/Placeholder/Placeholder.tsx create mode 100644 src/routes/Library/Placeholder/index.ts diff --git a/src/routes/Library/Placeholder/Placeholder.less b/src/routes/Library/Placeholder/Placeholder.less new file mode 100644 index 000000000..74908db66 --- /dev/null +++ b/src/routes/Library/Placeholder/Placeholder.less @@ -0,0 +1,102 @@ +// 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; + 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; + color: var(--primary-foreground-color); + margin-bottom: 1rem; + opacity: 0.5; + } + + .image-container { + display: flex; + flex: 1; + align-items: center; + padding: 1.5rem 0; + + .image { + height: 100%; + max-height: 14rem; + object-fit: contain; + } + } + + .button-container { + display: flex; + flex: 1; + align-items: flex-start; + margin: 1rem 0; + + .button { + flex: none; + 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 { + flex: 0.5; + } + + .image-container { + flex: 2; + padding: 1rem; + + .image { + max-height: 10rem; + } + } + + .button-container { + margin: 1rem 0 0; + } + } +} + +@media only screen and (max-width: @minimum) { + .placeholder { + + .image-container { + flex: 1; + } + + .button-container { + .button { + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/routes/Library/Placeholder/Placeholder.tsx b/src/routes/Library/Placeholder/Placeholder.tsx new file mode 100644 index 000000000..d6332d2e6 --- /dev/null +++ b/src/routes/Library/Placeholder/Placeholder.tsx @@ -0,0 +1,32 @@ +// Copyright (C) 2017-2025 Smart code 203358507 + +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Button, Image } from 'stremio/components'; +import styles from './Placeholder.less'; + +const Placeholder = () => { + const { t } = useTranslation(); + + return ( +
+
+ {t('LIBRARY_NOT_LOGGED_IN')} +
+
+ {' +
+
+ +
+
+ ); +}; + +export default Placeholder; diff --git a/src/routes/Library/Placeholder/index.ts b/src/routes/Library/Placeholder/index.ts new file mode 100644 index 000000000..b068f608e --- /dev/null +++ b/src/routes/Library/Placeholder/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2025 Smart code 203358507 + +import Placeholder from './Placeholder'; + +export default Placeholder; From 13c9ef986a2ca1c22a4916cb238fa0b8f82a338b Mon Sep 17 00:00:00 2001 From: Botzy Date: Thu, 20 Feb 2025 14:31:20 +0200 Subject: [PATCH 3/7] refactor(Library): reuse Placeholder component and remove unused styles --- src/routes/Library/Library.js | 15 +++------------ src/routes/Library/styles.less | 32 -------------------------------- 2 files changed, 3 insertions(+), 44 deletions(-) diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index 2871a9b3f..e1cea5995 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -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'); @@ -76,17 +77,7 @@ const Library = ({ model, urlParams, queryParams }) => { } { model === 'library' && profile.auth === null ? -
- {' -
Library is only available for logged in users!
- -
+ : library.selected === null ? diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 2bdbc13ec..76a16940e 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -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; From 755f0625bfd994125b50f1b6b36d31639c87b8b6 Mon Sep 17 00:00:00 2001 From: Botzy Date: Fri, 21 Feb 2025 13:53:11 +0200 Subject: [PATCH 4/7] fix(Placeholder): rename placeholder image --- ..._loggedin_placeholder.png => media_carousel.png} | Bin src/routes/Library/Placeholder/Placeholder.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename images/{not_loggedin_placeholder.png => media_carousel.png} (100%) diff --git a/images/not_loggedin_placeholder.png b/images/media_carousel.png similarity index 100% rename from images/not_loggedin_placeholder.png rename to images/media_carousel.png diff --git a/src/routes/Library/Placeholder/Placeholder.tsx b/src/routes/Library/Placeholder/Placeholder.tsx index d6332d2e6..d619611d8 100644 --- a/src/routes/Library/Placeholder/Placeholder.tsx +++ b/src/routes/Library/Placeholder/Placeholder.tsx @@ -16,7 +16,7 @@ const Placeholder = () => {
{'
From a050dd8d7679d8bb0106383f8739199c77ea1c32 Mon Sep 17 00:00:00 2001 From: Botzy Date: Fri, 21 Feb 2025 13:58:48 +0200 Subject: [PATCH 5/7] fix(Calendar): update placeholder image name --- src/routes/Calendar/Placeholder/Placeholder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Calendar/Placeholder/Placeholder.tsx b/src/routes/Calendar/Placeholder/Placeholder.tsx index 1a8a412b8..3ec983f89 100644 --- a/src/routes/Calendar/Placeholder/Placeholder.tsx +++ b/src/routes/Calendar/Placeholder/Placeholder.tsx @@ -16,7 +16,7 @@ const Placeholder = () => {
{'
From 3890001085dadbf07f6702082e0107c9e15afc2a Mon Sep 17 00:00:00 2001 From: Botzy Date: Mon, 24 Feb 2025 16:24:55 +0200 Subject: [PATCH 6/7] fix(Library): align guest Placeholder with Calendar Placeholder layout and styles on mobile --- src/routes/Library/Library.js | 87 ++++++++++--------- .../Library/Placeholder/Placeholder.less | 64 ++++++++++---- .../Library/Placeholder/Placeholder.tsx | 17 +++- 3 files changed, 108 insertions(+), 60 deletions(-) diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index e1cea5995..8e19f123b 100644 --- a/src/routes/Library/Library.js +++ b/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 ( -
- { - model === 'continue_watching' || profile.auth !== null ? -
- - -
- : - null - } - { - model === 'library' && profile.auth === null ? - - : - library.selected === null ? - -
- {' -
{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!
-
- - : - library.catalog.length === 0 ? -
- {' -
Empty {model === 'library' ? 'Library' : 'Continue Watching'}
+ { + profile.auth === null ? + + :
+ { + model === 'continue_watching' ? +
+ +
: -
- {library.catalog.map((libItem, index) => ( - - ))} -
- } -
+ null + } + { + model === 'library' ? + library.selected === null ? + +
+ {' +
{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!
+
+ + : + library.catalog.length === 0 ? +
+ {' +
Empty {model === 'library' ? 'Library' : 'Continue Watching'}
+
+ : +
+ {library.catalog.map((libItem, index) => ( + + ))} +
+ : null + } +
+ } ); }; diff --git a/src/routes/Library/Placeholder/Placeholder.less b/src/routes/Library/Placeholder/Placeholder.less index 74908db66..55de0356a 100644 --- a/src/routes/Library/Placeholder/Placeholder.less +++ b/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; - 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; @@ -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 { - flex: 1; + .overview { + flex-direction: column; + gap: 1rem; + + .point { + .text { + font-size: 1rem; + } + } } .button-container { diff --git a/src/routes/Library/Placeholder/Placeholder.tsx b/src/routes/Library/Placeholder/Placeholder.tsx index d619611d8..d854a2d54 100644 --- a/src/routes/Library/Placeholder/Placeholder.tsx +++ b/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 = () => {
{'
+
+
+ +
+ {t('NOT_LOGGED_IN_CLOUD')} +
+
+
+ +
+ {t('NOT_LOGGED_IN_RECOMMENDATIONS')} +
+
+