diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 26c665a46..8d6fa7b80 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -14,7 +14,6 @@
height: 5rem;
margin-right: 1.5rem;
padding: 0.5rem;
- background-color: @color-background-dark5;
}
.logo {
@@ -23,7 +22,7 @@
}
.icon {
- fill: @color-secondaryvariant1-light3;
+ color: var(--primary-foreground-color);
}
.name-container {
@@ -41,7 +40,7 @@
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.version {
@@ -49,7 +48,7 @@
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
- color: @color-background-dark5-60;
+ color: var(--primary-foreground-color);
}
}
}
@@ -59,13 +58,13 @@
.section-header {
font-size: 1.1rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.section-label {
font-size: 1.1rem;
font-weight: 300;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
&.transport-url-label {
user-select: text;
diff --git a/src/common/AddonDetailsModal/styles.less b/src/common/AddonDetailsModal/styles.less
index fa8c5b3be..73164a677 100644
--- a/src/common/AddonDetailsModal/styles.less
+++ b/src/common/AddonDetailsModal/styles.less
@@ -10,38 +10,37 @@
.addon-details-container, .addon-details-message-container {
width: 40rem;
max-width: 100%;
- }
-
- .install-button, .uninstall-button, .cancel-button {
- .label {
- font-size: 1.2rem;
- font-weight: 500;
- }
- }
-
- .uninstall-button, .cancel-button {
- &:focus {
- outline-color: @color-background-dark5;
- }
+ color: var(--primary-foreground-color);
}
.cancel-button {
background-color: transparent;
+ opacity: 0.3;
&:hover {
- background-color: @color-surface-light3;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ opacity: 1;
}
- .label {
- color: @color-surface-dark2;
+ &:focus {
+ outline-color: var(--primary-foreground-color);
+ }
+
+ .cancel-button-label {
+ color: var(--primary-foreground-color);
}
}
.uninstall-button {
- background-color: @color-accent2;
-
+ background-color: var(--overlay-color);
+
&:hover {
- background-color: @color-accent2-light2;
+ outline: var(--focus-outline-size) solid var(--overlay-color);
+ background-color: transparent;
+ }
+
+ &:focus {
+ outline-color: var(--primary-foreground-color);
}
}
}
\ No newline at end of file
diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less
index e7b601729..6a26b3b7f 100644
--- a/src/common/Button/styles.less
+++ b/src/common/Button/styles.less
@@ -14,6 +14,6 @@
&:global(.disabled) {
pointer-events: none;
- opacity: 0.25;
+ opacity: 0.5;
}
}
\ No newline at end of file
diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js
index 02098b76d..50bc770c9 100644
--- a/src/common/CONSTANTS.js
+++ b/src/common/CONSTANTS.js
@@ -2,9 +2,9 @@
const CHROMECAST_RECEIVER_APP_ID = '1634F54B';
const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250];
-const SUBTITLES_FONTS = ['Roboto', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace'];
-const SEEK_TIME_DURATIONS = [5000, 10000, 15000, 20000, 25000, 30000];
-const NEXT_VIDEO_POPUP_DURATIONS = [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000];
+const SUBTITLES_FONTS = ['PlusJakartaSans', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace'];
+const SEEK_TIME_DURATIONS = [3000, 5000, 10000, 15000, 20000, 30000];
+const NEXT_VIDEO_POPUP_DURATIONS = [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000];
const CATALOG_PREVIEW_SIZE = 10;
const CATALOG_PAGE_SIZE = 100;
const NONE_EXTRA_VALUE = 'None';
@@ -27,19 +27,62 @@ const TYPE_PRIORITIES = {
other: -Infinity
};
const ICON_FOR_TYPE = new Map([
- ['movie', 'ic_movies'],
- ['series', 'ic_series'],
- ['channel', 'ic_channels'],
- ['tv', 'ic_tv'],
+ ['movie', 'movies'],
+ ['series', 'series'],
+ ['channel', 'channels'],
+ ['tv', 'tv'],
['book', 'ic_book'],
['game', 'ic_games'],
['music', 'ic_music'],
['adult', 'ic_adult'],
['radio', 'ic_radio'],
['podcast', 'ic_podcast'],
- ['other', 'ic_movies'],
+ ['other', 'movies'],
]);
+const EXTERNAL_PLAYERS = [
+ {
+ label: 'EXTERNAL_PLAYER_DISABLED',
+ value: null,
+ platforms: ['ios', 'android', 'windows', 'linux', 'macos'],
+ },
+ {
+ label: 'EXTERNAL_PLAYER_ALLOW_CHOOSING',
+ value: 'choose',
+ platforms: ['android'],
+ },
+ {
+ label: 'VLC',
+ value: 'vlc',
+ platforms: ['ios', 'android'],
+ },
+ {
+ label: 'MPV',
+ value: 'mpv',
+ platforms: ['macos'],
+ },
+ {
+ label: 'IINA',
+ value: 'iina',
+ platforms: ['macos'],
+ },
+ {
+ label: 'MX Player',
+ value: 'mxplayer',
+ platforms: ['android'],
+ },
+ {
+ label: 'Just Player',
+ value: 'justplayer',
+ platforms: ['android'],
+ },
+ {
+ label: 'Outplayer',
+ value: 'outplayer',
+ platforms: ['ios'],
+ },
+];
+
module.exports = {
CHROMECAST_RECEIVER_APP_ID,
SUBTITLES_SIZES,
@@ -55,5 +98,6 @@ module.exports = {
SHARE_LINK_CATEGORY,
WRITERS_LINK_CATEGORY,
TYPE_PRIORITIES,
- ICON_FOR_TYPE
+ ICON_FOR_TYPE,
+ EXTERNAL_PLAYERS,
};
diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Checkbox/Checkbox.js
index bb9a8477d..a823ce488 100644
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@@ -3,21 +3,13 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const Checkbox = React.forwardRef(({ className, checked, children, ...props }, ref) => {
return (
);
diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index 5aebab00d..d8224db53 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -2,18 +2,43 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@height: 1.7rem;
+@width: 3.2rem;
+@thumb-margin: 0.5rem;
+
+@thumb-size: calc(@height - @thumb-margin);
+
.checkbox-container {
- &:global(.checked) {
- .icon {
- fill: @color-surface-light5;
- background-color: @color-primaryvariant1;
+ position: relative;
+
+ .toggle {
+ position: relative;
+ width: @width;
+ height: @height;
+ border-radius: @height;
+ background-color: var(--overlay-color);
+ transition: background-color 0.1s ease-in-out;
+
+ &::before {
+ content: "";
+ position: absolute;
+ height: @thumb-size;
+ width: @thumb-size;
+ top: calc(@thumb-margin / 2);
+ left: calc(@thumb-margin / 2);
+ border-radius: 50%;
+ background-color: var(--primary-foreground-color);
+ transition: transform 0.1s ease-in-out;
}
}
- .icon {
- display: block;
- width: 1rem;
- height: 1rem;
- fill: @color-surface-light5;
+ &:global(.checked) {
+ .toggle {
+ background-color: var(--secondary-accent-color);
+
+ &::before {
+ transform: translateX(calc(@width - @thumb-size - @thumb-margin));
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/common/ContinueWatchingItem/ContinueWatchingItem.js b/src/common/ContinueWatchingItem/ContinueWatchingItem.js
new file mode 100644
index 000000000..721a1b731
--- /dev/null
+++ b/src/common/ContinueWatchingItem/ContinueWatchingItem.js
@@ -0,0 +1,72 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const { useServices } = require('stremio/services');
+const useNotifications = require('stremio/common/useNotifications');
+const LibItem = require('stremio/common/LibItem');
+
+const ContinueWatchingItem = ({ _id, deepLinks, ...props }) => {
+ const { core } = useServices();
+ const notifications = useNotifications();
+
+ const newVideos = React.useMemo(() => {
+ const count = notifications.items?.[_id]?.length ?? 0;
+ return Math.min(Math.max(count, 0), 99);
+ }, [_id, notifications.items]);
+
+ const onClick = React.useCallback(() => {
+ if (deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams) {
+ window.location = deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams;
+ }
+ }, [deepLinks]);
+
+ const onPlayClick = React.useCallback((event) => {
+ event.stopPropagation();
+ if (deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos) {
+ window.location = deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos;
+ }
+ }, [deepLinks]);
+
+ const onDismissClick = React.useCallback((event) => {
+ event.stopPropagation();
+ if (typeof _id === 'string') {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'RewindLibraryItem',
+ args: _id
+ }
+ });
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'DismissNotificationItem',
+ args: _id
+ }
+ });
+ }
+ }, [_id]);
+
+ return (
+
+ );
+};
+
+ContinueWatchingItem.propTypes = {
+ _id: PropTypes.string,
+ deepLinks: PropTypes.shape({
+ metaDetailsVideos: PropTypes.string,
+ metaDetailsStreams: PropTypes.string,
+ player: PropTypes.string
+ }),
+};
+
+module.exports = ContinueWatchingItem;
diff --git a/src/common/ContinueWatchingItem/index.js b/src/common/ContinueWatchingItem/index.js
new file mode 100644
index 000000000..5d3b2dd76
--- /dev/null
+++ b/src/common/ContinueWatchingItem/index.js
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const ContineWatchingItem = require('./ContinueWatchingItem');
+
+module.exports = ContineWatchingItem;
diff --git a/src/common/EventModal/EventModal.js b/src/common/EventModal/EventModal.js
new file mode 100644
index 000000000..dcd9ca626
--- /dev/null
+++ b/src/common/EventModal/EventModal.js
@@ -0,0 +1,90 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useTranslation } = require('react-i18next');
+const Button = require('stremio/common/Button');
+const ModalDialog = require('stremio/common/ModalDialog');
+const useEvents = require('./useEvents');
+const styles = require('./styles');
+const { default: Icon } = require('@stremio/stremio-icons/react');
+
+const EventModal = () => {
+ const { t } = useTranslation();
+
+ const { events, pullEvents, dismissEvent } = useEvents();
+
+ const modal = React.useMemo(() => {
+ return events?.modal?.type === 'Ready' ?
+ events.modal.content
+ :
+ null;
+ }, [events]);
+
+ const onClose = React.useCallback(() => {
+ modal?.id && dismissEvent(modal.id);
+ }, [modal]);
+
+ React.useEffect(() => {
+ pullEvents();
+ }, []);
+
+ return (
+ modal !== null ?
+
+ {
+ modal.imageUrl ?
+ 
+ :
+ null
+ }
+
+
+ {
+ modal.title ?
+
{modal.title}
+ :
+ null
+ }
+ {
+ modal.message ?
+
{modal.message}
+ :
+ null
+ }
+
+ {
+ modal?.addon?.name ?
+
+
+
+ { modal.addon.name }
+
+
+ :
+ null
+ }
+ {
+ modal?.addon?.manifestUrl ?
+
+ :
+ modal.externalUrl ?
+
+ :
+ null
+ }
+
+ :
+ null
+ );
+};
+
+module.exports = EventModal;
diff --git a/src/common/EventModal/index.js b/src/common/EventModal/index.js
new file mode 100644
index 000000000..ac88c0210
--- /dev/null
+++ b/src/common/EventModal/index.js
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const EventModal = require('./EventModal');
+
+module.exports = EventModal;
diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
new file mode 100644
index 000000000..0fa9919b8
--- /dev/null
+++ b/src/common/EventModal/styles.less
@@ -0,0 +1,119 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+:import('~stremio/common/ModalDialog/styles.less') {
+ modal-dialog-content: modal-dialog-content;
+ modal-dialog-container: modal-dialog-container;
+}
+
+.event-modal {
+ backdrop-filter: blur(10px);
+
+ .modal-dialog-container {
+ overflow: visible;
+ max-width: 45rem;
+
+ .modal-dialog-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: visible;
+
+ .image {
+ width: 100%;
+ height: 100%;
+ margin-top: -10rem;
+ }
+
+ .info-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2.5rem;
+ padding: 1rem 4rem;
+ margin-top: -7rem;
+
+ .title-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .title {
+ color: var(--primary-foreground-color);
+ font-size: 1.325rem;
+ text-align: center;
+ padding: 0 6rem;
+ }
+
+ .label {
+ color: var(--primary-foreground-color);
+ font-size: 1rem;
+ text-align: center;
+ opacity: 0.5;
+ }
+ }
+
+ .addon-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ .icon {
+ height: 2rem;
+ width: 2rem;
+ color: var(--primary-accent-color);
+ }
+
+ .name {
+ color: var(--primary-foreground-color);
+ }
+ }
+
+ .action-button {
+ background-color: var(--primary-foreground-color);
+ border: 2px solid var(--primary-foreground-color);
+ padding: 0.8rem 2rem;
+ border-radius: 2rem;
+
+ .button-label {
+ color: var(--primary-accent-color);
+ font-size: 1rem;
+ font-weight: 700;
+ }
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+
+ @media only screen and (max-width: @minimum) {
+ .modal-dialog-container {
+ .modal-dialog-content {
+ .image {
+ height: 125%;
+ width: 125%;
+ }
+
+ .info-container {
+ .title-container {
+ .title {
+ padding: 0rem;
+ font-size: 1rem;
+ }
+
+ .label {
+ font-size: 0.875rem;
+ }
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/common/EventModal/useEvents.js b/src/common/EventModal/useEvents.js
new file mode 100644
index 000000000..f5efaa79e
--- /dev/null
+++ b/src/common/EventModal/useEvents.js
@@ -0,0 +1,36 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const useModelState = require('stremio/common/useModelState');
+const { useServices } = require('stremio/services');
+
+const map = (ctx) => ({
+ ...ctx.events,
+});
+
+const useEvents = () => {
+ const { core } = useServices();
+
+ const pullEvents = () => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'GetEvents',
+ },
+ });
+ };
+
+ const dismissEvent = (id) => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'DismissEvent',
+ args: id,
+ },
+ });
+ };
+
+ const events = useModelState({ model: 'ctx', map });
+ return { events, pullEvents, dismissEvent };
+};
+
+module.exports = useEvents;
diff --git a/src/common/LibItem/LibItem.js b/src/common/LibItem/LibItem.js
index 8cc174266..a1c59200a 100644
--- a/src/common/LibItem/LibItem.js
+++ b/src/common/LibItem/LibItem.js
@@ -68,6 +68,13 @@ const LibItem = ({ _id, removable, ...props }) => {
args: _id
}
});
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'DismissNotificationItem',
+ args: _id
+ }
+ });
}
break;
diff --git a/src/common/MainNavBars/MainNavBars.js b/src/common/MainNavBars/MainNavBars.js
index 53f3175cc..542d68fe4 100644
--- a/src/common/MainNavBars/MainNavBars.js
+++ b/src/common/MainNavBars/MainNavBars.js
@@ -7,11 +7,11 @@ const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
const styles = require('./styles');
const TABS = [
- { id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
- { id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
- { id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' },
- { id: 'settings', label: 'SETTINGS', icon: 'ic_settings', href: '#/settings' },
- { id: 'addons', label: 'ADDONS', icon: 'ic_addons', href: '#/addons' }
+ { id: 'board', label: 'Board', icon: 'home', href: '#/' },
+ { id: 'discover', label: 'Discover', icon: 'discover', href: '#/discover' },
+ { id: 'library', label: 'Library', icon: 'library', href: '#/library' },
+ { id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' },
+ { id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
];
const MainNavBars = React.memo(({ className, route, query, children }) => {
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 39a140cd3..a967fde9d 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -3,17 +3,18 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
+const { useTranslation } = require('react-i18next');
const filterInvalidDOMProps = require('filter-invalid-dom-props').default;
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const Image = require('stremio/common/Image');
const Multiselect = require('stremio/common/Multiselect');
-const PlayIconCircleCentered = require('stremio/common/PlayIconCircleCentered');
const useBinaryState = require('stremio/common/useBinaryState');
const { ICON_FOR_TYPE } = require('stremio/common/CONSTANTS');
const styles = require('./styles');
-const MetaItem = React.memo(({ className, type, name, poster, posterShape, playIcon, progress, options, deepLinks, dataset, optionOnSelect, ...props }) => {
+const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, watched, ...props }) => {
+ const { t } = useTranslation();
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const href = React.useMemo(() => {
return deepLinks ?
@@ -56,15 +57,32 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
const renderPosterFallback = React.useCallback(() => (
), [type]);
const renderMenuLabelContent = React.useCallback(() => (
-
+
), []);
return (
-
{selectInputs.map((selectInput, index) => (
{
/>
))}
+
{
onChange={searchInputOnChange}
/>
{
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index f4f9d57f3..2f485c221 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -24,7 +24,7 @@
.addons-container {
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
+ background-color: transparent;
.addons-content {
width: 100%;
@@ -48,26 +48,27 @@
flex-direction: row;
align-items: center;
justify-content: center;
- width: 10rem;
- height: 3.5rem;
+ height: 3rem;
margin-right: 1.5rem;
- padding: 0 1rem;
- background-color: @color-accent3;
+ padding: 0 1.5rem;
+ border-radius: 3rem;
+ background-color: var(--secondary-accent-color);
&:hover {
- background-color: @color-accent3-light2;
+ outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+ background-color: transparent;
}
&:focus {
- outline-color: @color-surface-light5;
+ outline-color: var(--primary-foreground-color);
}
.icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
- margin-right: 1rem;
- fill: @color-surface-light5;
+ margin-right: 0.5rem;
+ color: var(--primary-foreground-color);
}
.add-button-label {
@@ -75,8 +76,9 @@
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
- font-size: 1.1rem;
- color: @color-surface-light5;
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--primary-foreground-color);
}
}
@@ -84,7 +86,6 @@
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
- height: 3.5rem;
margin-right: 1.5rem;
.multiselect-menu-container {
@@ -108,15 +109,16 @@
display: none;
align-items: center;
justify-content: center;
- width: 3.5rem;
- height: 3.5rem;
- background-color: @color-background;
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -126,7 +128,7 @@
align-self: stretch;
padding: 0 1.5rem;
font-size: 2rem;
- color: @color-surface-light5;
+ color: var(--primary-foreground-color);
}
.addons-list-container {
@@ -152,7 +154,7 @@
overflow: visible;
.select-input-container {
- height: 3.5rem;
+ height: 3rem;
&:not(:last-child) {
margin-bottom: 1rem;
@@ -169,39 +171,43 @@
.notice {
margin-bottom: 1.5rem;
font-size: 1rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.addon-url-input {
width: 100%;
padding: 1rem;
- color: @color-surface-dark5;
- outline: var(--focus-outline-size) solid @color-surface-light2;
+ color: var(--primary-foreground-color);
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
+ outline: var(--focus-outline-size) solid var(--overlay-color);
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {
- outline-color: @color-surface-light4;
+ outline-color: var(--primary-foreground-color);
}
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
}
}
.cancel-button {
background-color: transparent;
+ opacity: 0.3;
&:hover {
- background-color: @color-surface-light3;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ opacity: 1;
}
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
.cancel-button-label {
- color: @color-surface-dark2;
+ color: var(--primary-foreground-color);
}
}
}
@@ -229,7 +235,7 @@
}
.icon {
- fill: @color-secondaryvariant1-light3;
+ color: var(--primary-foreground-color);
}
.name-container {
@@ -247,7 +253,7 @@
flex-basis: auto;
margin-right: 0.5rem;
font-size: 1.6rem;
- color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
}
.version {
@@ -255,7 +261,7 @@
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
- color: @color-background-dark5-60;
+ color: var(--primary-foreground-color);
}
}
}
@@ -271,11 +277,10 @@
.addons-content {
.selectable-inputs-container {
.add-button-container {
+ z-index: 1;
position: fixed;
right: 0;
bottom: calc(3rem + var(--horizontal-nav-bar-size));
- box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
- 0 1.1rem 0.85rem @color-background-dark5-20;
}
.select-input-container {
diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js
index a48cd2ac9..af0bb35fc 100644
--- a/src/routes/Addons/useSelectableInputs.js
+++ b/src/routes/Addons/useSelectableInputs.js
@@ -1,18 +1,17 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
-const { t } = require('i18next');
-const { translateOption } = require('stremio/common');
+const { useTranslate } = require('stremio/common');
-const mapSelectableInputs = (installedAddons, remoteAddons) => {
+const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
const catalogSelect = {
- title: t('SELECT_CATALOG'),
+ title: t.string('SELECT_CATALOG'),
options: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
.map(({ name, deepLinks }) => ({
value: deepLinks.addons,
- label: translateOption(name, 'ADDON_'),
- title: translateOption(name, 'ADDON_'),
+ label: t.stringWithPrefix(name, 'ADDON_'),
+ title: t.stringWithPrefix(name, 'ADDON_'),
})),
selected: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
@@ -22,7 +21,7 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
() => {
const selectableCatalog = remoteAddons.selectable.catalogs
.find(({ id }) => id === remoteAddons.selected.request.path.id);
- return selectableCatalog ? translateOption(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
+ return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
}
:
null,
@@ -31,16 +30,16 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
}
};
const typeSelect = {
- title: t('SELECT_TYPE'),
+ title: t.string('SELECT_TYPE'),
options: installedAddons.selected !== null ?
installedAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
- label: type !== null ? translateOption(type, 'TYPE_') : t('TYPE_ALL')
+ label: type !== null ? t.stringWithPrefix(type, 'TYPE_') : t.string('TYPE_ALL')
}))
:
remoteAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
- label: translateOption(type, 'TYPE_')
+ label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: installedAddons.selected !== null ?
installedAddons.selectable.types
@@ -53,12 +52,12 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
renderLabelText: () => {
return installedAddons.selected !== null ?
installedAddons.selected.request.type === null ?
- t('TYPE_ALL')
+ t.string('TYPE_ALL')
:
- translateOption(installedAddons.selected.request.type, 'TYPE_')
+ t.stringWithPrefix(installedAddons.selected.request.type, 'TYPE_')
:
remoteAddons.selected !== null ?
- translateOption(remoteAddons.selected.request.path.type, 'TYPE_')
+ t.stringWithPrefix(remoteAddons.selected.request.path.type, 'TYPE_')
:
typeSelect.title;
},
@@ -70,8 +69,9 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
};
const useSelectableInputs = (installedAddons, remoteAddons) => {
+ const t = useTranslate();
const selectableInputs = React.useMemo(() => {
- return mapSelectableInputs(installedAddons, remoteAddons);
+ return mapSelectableInputs(installedAddons, remoteAddons, t);
}, [installedAddons, remoteAddons]);
return selectableInputs;
};
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index c8043b0a2..510406381 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -4,7 +4,7 @@ const React = require('react');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
-const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
const styles = require('./styles');
@@ -16,7 +16,7 @@ const Board = () => {
const streamingServer = useStreamingServer();
const continueWatchingPreview = useContinueWatchingPreview();
const [board, loadBoardRows] = useBoard();
- const boardCatalogsOffset = continueWatchingPreview.libraryItems.length > 0 ? 1 : 0;
+ const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
const scrollContainerRef = React.useRef();
const onVisibleRangeChange = React.useCallback(() => {
const range = getVisibleChildrenRange(scrollContainerRef.current);
@@ -38,16 +38,16 @@ const Board = () => {
}, [board.catalogs, onVisibleRangeChange]);
return (
+
{
- continueWatchingPreview.libraryItems.length > 0 ?
+ continueWatchingPreview.items.length > 0 ?
:
null
@@ -59,10 +59,8 @@ const Board = () => {
);
}
@@ -71,9 +69,8 @@ const Board = () => {
);
}
@@ -82,8 +79,7 @@ const Board = () => {
);
}
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 4d60713cd..b949d8689 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -20,15 +20,17 @@
.board-content-container {
flex: 1;
align-self: stretch;
- background-color: @color-background-dark2;
+ background: transparent;
.board-content {
width: 100%;
height: 100%;
+ padding: 0 1rem;
overflow-y: auto;
.board-row {
- margin: 4rem 2rem;
+ margin-top: 1rem;
+ margin-bottom: 2rem;
}
}
}
@@ -43,7 +45,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+10) {
display: none;
@@ -51,7 +53,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
@@ -67,7 +69,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
@@ -75,7 +77,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
@@ -91,7 +93,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
@@ -99,7 +101,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
@@ -115,7 +117,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
@@ -123,7 +125,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
@@ -139,7 +141,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
@@ -147,7 +149,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
@@ -163,7 +165,7 @@
.board-container {
.board-content-container {
.board-content {
- .board-row-poster, .board-row-square {
+ .board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
@@ -171,7 +173,7 @@
}
}
- .board-row-landscape, .continue-watching-row {
+ .board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+4) {
display: none;
@@ -199,7 +201,7 @@
height: calc(100% - 4rem);
.board-row {
- margin: 2rem 1rem;
+ margin-bottom: 1.5rem;
}
.board-row-poster, .board-row-square, .continue-watching-row {
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index a7fa51ba6..d27c976cf 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services');
const { AddonDetailsModal, DelayedRenderer, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const useDiscover = require('./useDiscover');
@@ -98,7 +98,7 @@ const Discover = ({ urlParams, queryParams }) => {
/>
))}
{
@@ -148,7 +148,7 @@ const Discover = ({ urlParams, queryParams }) => {
name={metaItem.name}
poster={metaItem.poster}
posterShape={metaItem.posterShape}
- playIcon={selectedMetaItemIndex === index}
+ playname={selectedMetaItemIndex === index}
deepLinks={metaItem.deepLinks}
data-index={index}
onClick={metaItemOnClick}
@@ -169,8 +169,8 @@ const Discover = ({ urlParams, queryParams }) => {
releaseInfo={selectedMetaItem.releaseInfo}
released={selectedMetaItem.released}
description={selectedMetaItem.description}
- deepLinks={selectedMetaItem.deepLinks}
links={selectedMetaItem.links}
+ deepLinks={selectedMetaItem.deepLinks}
trailerStreams={selectedMetaItem.trailerStreams}
inLibrary={selectedMetaItem.inLibrary}
toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary}
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 50c4716c2..e0b6706d3 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -26,7 +26,7 @@
.discover-container {
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
+ background-color: transparent;
.discover-content {
width: 100%;
@@ -50,7 +50,6 @@
.select-input {
flex: 0 1 15rem;
- height: 3.5rem;
&:not(:first-child) {
margin-left: 1.5rem;
@@ -75,16 +74,16 @@
display: none;
align-items: center;
justify-content: center;
- width: 3.5rem;
- height: 3.5rem;
- margin-left: 1.5rem;
- background-color: @color-background;
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -103,7 +102,7 @@
margin-bottom: 1rem;
font-size: 1.4rem;
text-align: center;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.install-button {
@@ -111,17 +110,22 @@
min-width: 10rem;
max-width: 15rem;
padding: 1rem;
- background-color: @color-accent3;
+ background-color: var(--secondary-accent-color);
&:hover {
- background-color: @color-accent3-light1;
+ outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+ background-color: transparent;
+ }
+
+ &:focus {
+ outline-color: var(--primary-foreground-color);
}
.label {
max-height: 2.4em;
font-weight: 500;
text-align: center;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -151,9 +155,10 @@
.message-label {
flex: none;
- font-size: 2.5rem;
+ font-size: 2rem;
+ font-weight: 400;
text-align: center;
- color: @color-secondaryvariant2-light1-90;
+ color: var(--primary-foreground-color);
}
}
@@ -174,18 +179,21 @@
.poster-container {
padding-bottom: calc(100% * var(--poster-shape-ratio));
background-color: var(--color-placeholder-background);
+ border-radius: var(--border-radius);
}
.title-bar-container {
display: flex;
flex-direction: row;
align-items: center;
+ justify-content: center;
height: 2.8rem;
.title-label {
flex: none;
width: 60%;
height: 1.2rem;
+ border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
}
@@ -196,8 +204,10 @@
.meta-preview-container {
flex: none;
align-self: stretch;
- width: 28rem;
- background-color: @color-background-dark3;
+ width: 29rem;
+ padding: 2rem 2.5rem;
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
+ background-color: var(--modal-background-color);
}
}
}
@@ -225,47 +235,6 @@
}
}
-.multiselect-modal-container {
- .multiselect-menu-container {
- width: 15rem;
- max-height: calc(3.2rem * 7);
- overflow-y: auto;
- scrollbar-color: @color-surface-light1 @color-surface-light4;
-
- ::-webkit-scrollbar-thumb {
- background-color: @color-surface-light1;
-
- &:hover {
- background-color: @color-surface-light2;
- }
- }
-
- ::-webkit-scrollbar-track {
- background-color: @color-surface-light4;
- }
-
- .multiselect-option-container {
- background: none;
-
- &:hover, &:focus {
- background-color: @color-surface-light3;
- }
-
- &:focus {
- outline-color: @color-background-dark2;
- }
-
- .multiselect-label {
- color: @color-background-dark2-90;
- }
-
- .multiselect-icon {
- fill: @color-background-dark2-90;
- }
- }
- }
-}
-
@media only screen and (min-width: @xxlarge) {
.discover-container {
.discover-content {
@@ -392,7 +361,7 @@
justify-content: space-between;
.select-input {
- &:nth-child(n+3) {
+ &:nth-child(n+2) {
display: none;
&~.filter-container {
diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js
index 6bba2c8ef..18d317507 100644
--- a/src/routes/Discover/useSelectableInputs.js
+++ b/src/routes/Discover/useSelectableInputs.js
@@ -1,22 +1,21 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
-const { useTranslation } = require('react-i18next');
-const { translateOption } = require('stremio/common');
+const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (discover, t) => {
const typeSelect = {
- title: t('SELECT_TYPE'),
+ title: t.string('SELECT_TYPE'),
options: discover.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.discover,
- label: translateOption(type, 'TYPE_')
+ label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: discover.selectable.types
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.discover),
renderLabelText: discover.selected !== null ?
- () => translateOption(discover.selected.request.path.type, 'TYPE_')
+ () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
:
null,
onSelect: (event) => {
@@ -24,11 +23,11 @@ const mapSelectableInputs = (discover, t) => {
}
};
const catalogSelect = {
- title: t('SELECT_CATALOG'),
+ title: t.string('SELECT_CATALOG'),
options: discover.selectable.catalogs
- .map(({ name, addon, deepLinks }) => ({
+ .map(({ id, name, addon, deepLinks }) => ({
value: deepLinks.discover,
- label: name,
+ label: t.catalogTitle({ addon, id, name }),
title: `${name} (${addon.manifest.name})`
})),
selected: discover.selectable.catalogs
@@ -38,7 +37,7 @@ const mapSelectableInputs = (discover, t) => {
() => {
const selectableCatalog = discover.selectable.catalogs
.find(({ id }) => id === discover.selected.request.path.id);
- return selectableCatalog ? selectableCatalog.name : discover.selected.request.path.id;
+ return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
}
:
null,
@@ -47,10 +46,10 @@ const mapSelectableInputs = (discover, t) => {
}
};
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
- title: translateOption(name, 'SELECT_'),
+ title: t.stringWithPrefix(name, 'SELECT_'),
isRequired: isRequired,
options: options.map(({ value, deepLinks }) => ({
- label: typeof value === 'string' ? translateOption(value) : t('NONE'),
+ label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
value: JSON.stringify({
href: deepLinks.discover,
value
@@ -63,7 +62,7 @@ const mapSelectableInputs = (discover, t) => {
value
})),
renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
- () => translateOption(name, 'SELECT_')
+ () => t.stringWithPrefix(name, 'SELECT_')
:
null,
onSelect: (event) => {
@@ -75,7 +74,7 @@ const mapSelectableInputs = (discover, t) => {
};
const useSelectableInputs = (discover) => {
- const { t } = useTranslation();
+ const t = useTranslate();
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(discover, t);
}, [discover.selected, discover.selectable]);
diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index de99038b5..2bf136924 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -10,29 +10,30 @@
display: flex;
flex-direction: row;
align-items: center;
- padding: 0.5rem 1rem;
+ padding: 0.5rem 0;
+ border-radius: var(--border-radius);
&:focus {
outline: none;
- background-color: @color-surface-light5-20;
+ background-color: var(--overlay-color);
}
- .checkbox-icon {
- flex: none;
- width: 1.2rem;
- height: 1.2rem;
- fill: @color-surface-dark5;
+ &:global(.checked) {
+ .label {
+ opacity: 1;
+ }
}
.label {
flex: 1;
- margin-left: 0.5rem;
+ margin-left: 1rem;
font-size: 0.9rem;
- color: @color-surface-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
.link {
font-size: 0.9rem;
- color: @color-surface-light5-90;
+ color: var(--primary-accent-color);
&:hover {
text-decoration: underline;
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 92dc3db5d..908499a8b 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { Modal, useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Button, Image, useBinaryState } = require('stremio/common');
@@ -274,111 +274,121 @@ const Intro = ({ queryParams }) => {
}, [routeFocused]);
return (
-
+
+
-
-
+
+
+
+ Freedom to Stream
+
+
+ All the Video Content You Enjoy in One Place
+
+
+
+
+
+
+ {
+ state.form === SIGNUP_FORM ?
+
+
+
+
+
+
+ :
+
+
+
+ }
+ {
+ state.error.length > 0 ?
+
{state.error}
+ :
+ null
+ }
+
+
+
+
+ {
+ state.form === SIGNUP_FORM ?
+
+ :
+ null
+ }
+ {
+ state.form === LOGIN_FORM ?
+
+ :
+ null
+ }
+ {
+ state.form === SIGNUP_FORM ?
+
+ :
+ null
+ }
-
- {
- state.form === SIGNUP_FORM ?
-
- :
- null
- }
-
-
- {
- state.form === SIGNUP_FORM ?
-
-
-
-
-
-
- :
-
-
-
- }
- {
- state.error.length > 0 ?
-
{state.error}
- :
- null
- }
-
- {
- state.form === SIGNUP_FORM ?
-
- :
- null
- }
- {
- state.form === LOGIN_FORM ?
-
- :
- null
- }
{
passwordRestModalOpen ?
@@ -390,7 +400,7 @@ const Intro = ({ queryParams }) => {
loaderModalOpen ?
diff --git a/src/routes/Intro/PasswordResetModal/styles.less b/src/routes/Intro/PasswordResetModal/styles.less
index 4f9cdf2c3..9a84b79c0 100644
--- a/src/routes/Intro/PasswordResetModal/styles.less
+++ b/src/routes/Intro/PasswordResetModal/styles.less
@@ -15,16 +15,13 @@
.credentials-text-input {
width: 100%;
padding: 1rem;
- color: @color-surface-dark5;
- outline: var(--focus-outline-size) solid @color-surface-light2-90;
+ border-radius: var(--border-radius);
outline-offset: calc(-1 * var(--focus-outline-size));
-
- &:hover {
- outline-color: @color-surface-light4-90;
- }
-
- &:focus {
- outline-color: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
+ background: var(--overlay-color);
+
+ &:hover, &:focus {
+ outline: var(--focus-outline-size) solid var(--overlay-color);
}
}
}
@@ -39,16 +36,12 @@
.cancel-button {
background-color: transparent;
- &:hover {
- background-color: @color-surface-light3;
- }
-
- &:focus {
- outline-color: @color-background-dark5-90;
+ &:hover, &:focus {
+ outline-color: var(--primary-foreground-color);
}
.cancel-button-label {
- color: @color-surface-dark4-90;
+ color: var(--primary-foreground-color);
}
}
}
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 138f73e0b..1b1200a7c 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -4,62 +4,92 @@
@import (reference) '~stremio/common/screen-sizes.less';
.intro-container {
+ position: relative;
display: flex;
- flex-direction: row;
+ flex-direction: column;
+ align-items: center;
justify-content: center;
- width: 100%;
height: 100%;
- background:
- linear-gradient(@color-background-dark3-80, @color-background-dark3-80),
- url('/images/intro_background.jpg');
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- background-origin: border-box;
overflow-y: auto;
- .form-container {
+ .background-container {
+ z-index: -1;
+ position: fixed;
+ top: -1rem;
+ bottom: -1rem;
+ left: -1rem;
+ right: -1rem;
+ background: url('/images/background_1.svg'), url('/images/background_2.svg');
+ background-color: var(--primary-background-color);
+ background-position: bottom left, top right;
+ background-size: 53%, 54%;
+ background-repeat: no-repeat;
+ filter: blur(6rem);
+ }
+
+ .heading-container {
flex: none;
- width: 28rem;
- margin: auto;
- padding: 2rem 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 5rem;
.logo-container {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
+ flex: none;
margin-bottom: 3rem;
.logo {
- flex: none;
- width: 4rem;
- height: 4rem;
- margin-right: 1rem;
+ height: 5rem;
opacity: 0.9;
}
-
- .name {
- flex: none;
- width: 8rem;
- height: 4rem;
- fill: @color-surface-dark4-90;
- }
}
+ .title-container, .slogan-container {
+ color: var(--primary-foreground-color);
+ }
+
+ .title-container {
+ font-size: 3rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ }
+
+ .slogan-container {
+ font-size: 1.5rem;
+ font-weight: 400;
+ text-transform: lowercase;
+ opacity: 0.6;
+
+ &::first-letter {
+ text-transform: uppercase;
+ }
+ }
+ }
+
+ .content-container {
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: center;
+ width: 100%;
+
.form-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
- padding: 0.5rem 1rem;
+ height: 4rem;
+ border-radius: 3.5rem;
+ padding: 0 1rem;
.icon {
flex: none;
- width: 1rem;
height: 2rem;
+ width: 2rem;
margin-right: 1rem;
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.label {
@@ -67,130 +97,92 @@
flex-shrink: 1;
flex-basis: auto;
font-size: 1.1rem;
- font-weight: 500;
- color: @color-surface-light5-90;
+ font-weight: 700;
+ color: var(--primary-foreground-color);
text-align: center;
}
}
- .facebook-button {
- min-height: 4.5rem;
- margin: 1rem 0;
- background: var(--color-facebook);
-
- .label {
- font-size: 1.2rem;
- }
- }
-
- .login-form-button {
- display: block;
- margin: 1rem 0;
- text-align: center;
- color: @color-surface-dark2-90;
-
- &:hover {
- .login-label {
- text-decoration: underline;
- }
- }
-
- &:focus {
- outline: none;
- background-color: @color-surface-light5-20;
- }
-
- .login-label {
- font-weight: 500;
- color: @color-accent4-light1-90;
- }
- }
-
- .credentials-text-input {
- display: block;
- width: 100%;
- margin: 1rem 0;
- padding: 1rem;
- border-bottom: thin solid @color-surface-90;
- color: @color-surface-light5;
-
- &:hover {
- background-color: @color-surface-light5-20;
- }
-
- &:focus {
- border-bottom-color: @color-secondaryvariant2-light1-90;
-
- &::placeholder {
- color: @color-secondaryvariant2-light1-90;
- }
- }
-
- &::placeholder {
- color: @color-surface-dark2-90;
- }
- }
-
- .forgot-password-link-container {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- margin: 1rem 0;
- text-align: right;
-
- .forgot-password-link {
- flex-grow: 0;
- flex-shrink: 1;
- flex-basis: auto;
- padding: 0.5rem 1rem;
- color: @color-surface-light3-90;
-
- &:hover {
- text-decoration: underline;
- color: @color-secondaryvariant2-light1-90;
- }
-
- &:focus {
- outline: none;
- background-color: @color-surface-light5-20;
- }
- }
- }
-
- .error-message {
- margin: 1rem 0;
- padding: 0 1rem;
- text-align: center;
- color: @color-accent5-90;
- }
-
- .submit-button {
- min-height: 4rem;
- margin: 1rem 0;
- background-color: @color-accent3;
-
- &:hover {
- background-color: @color-accent3-light1;
- }
-
- .label {
- font-size: 1.2rem;
- }
- }
-
- .guest-login-button, .signup-form-button {
+ .submit-button, .guest-login-button, .signup-form-button, .login-form-button {
margin-top: 1rem;
- padding: 1rem;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
+
+ .label {
+ color: var(--primary-foreground-color);
+ }
&:hover {
+ background-color: var(--primary-foreground-color);
+
.label {
- text-decoration: underline;
+ color: var(--secondary-foreground-color);
+ }
+ }
+ }
+
+ .form-container {
+ flex: none;
+ position: relative;
+ width: 22rem;
+ margin-right: 2rem;
+
+ .credentials-text-input {
+ display: block;
+ width: 100%;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ outline-offset: calc(-1 * var(--focus-outline-size));
+ color: var(--primary-foreground-color);
+ background: var(--overlay-color);
+
+ &:hover, &:focus {
+ outline: var(--focus-outline-size) solid var(--overlay-color);
}
}
- &:focus {
- outline: none;
- background-color: @color-surface-light5-20;
+ .forgot-password-link-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ margin: 1rem 0;
+ text-align: right;
+
+ .forgot-password-link {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ padding: 0.5rem 1rem;
+ color: var(--primary-foreground-color);
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .error-message {
+ margin: 1rem 0;
+ padding: 0 1rem;
+ text-align: center;
+ color: var(--tertiary-accent-color);
+ }
+ }
+
+ .options-container {
+ flex: none;
+ position: relative;
+ width: 22rem;
+ margin-left: 2rem;
+
+ .facebook-button {
+ background: var(--color-facebook);
+
+ &:hover, &:focus {
+ outline: var(--focus-outline-size) solid var(--color-facebook);
+ background-color: transparent;
+ }
}
}
}
@@ -209,7 +201,8 @@
align-items: center;
justify-content: center;
padding: 2rem;
- background-color: @color-surface-light5;
+ border-radius: var(--border-radius);
+ background-color: var(--modal-background-color);
@keyframes flash {
0% {
@@ -226,13 +219,13 @@
width: 5rem;
height: 5rem;
margin-bottom: 1rem;
- fill: @color-background-dark5-90;
+ color: var(--primary-foreground-color);
animation: 1s linear infinite alternate flash;
}
.label {
- font-size: 2rem;
- color: @color-background-dark5-90;
+ font-size: 1.5rem;
+ color: var(--primary-foreground-color);
animation: 1s linear infinite alternate flash;
}
}
@@ -240,10 +233,39 @@
@media only screen and (max-width: @minimum) {
.intro-container {
- .form-container {
- flex: 0 1 auto;
- width: 100%;
- padding: 2rem 1.5rem;
+ justify-content: initial;
+ padding: 3rem 1.5rem;
+
+ .heading-container {
+ align-items: flex-start;
+ margin-bottom: 4rem;
+
+ .logo-container {
+ .logo {
+ height: 4rem;
+ }
+ }
+
+ .title-container {
+ font-size: 2.5rem;
+ }
+
+ .slogan-container {
+ font-size: 1.5rem;
+ }
+ }
+
+ .content-container {
+ flex-direction: column-reverse;
+
+ .form-container, .options-container {
+ width: 100%;
+ margin: 0;
+ }
+
+ .options-container {
+ margin-bottom: 4rem;
+ }
}
}
}
\ No newline at end of file
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index f739c8389..1479c9c5d 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const NotFound = require('stremio/routes/NotFound');
const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common');
const useLibrary = require('./useLibrary');
@@ -61,10 +61,10 @@ const Library = ({ model, urlParams, queryParams }) => {
paginationInput !== null ?
:
-
+ null
}
:
@@ -78,10 +78,10 @@ const Library = ({ model, urlParams, queryParams }) => {
src={require('/images/anonymous.png')}
alt={' '}
/>
+
Library is only available for logged in users!
-
Library is only available for logged in users!
:
null
@@ -120,6 +129,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
{
watched ?
:
@@ -128,14 +138,6 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
- {
- progress !== null && !isNaN(progress) && progress > 0 ?
-
- :
- null
- }
{children}
);
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
index 27fd51e34..8f6070c8a 100644
--- a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
@@ -17,11 +17,13 @@
.name-container {
width: 80%;
height: 1.2rem;
+ border-radius: var(--border-radius);
background: var(--color-placeholder-background);
}
.released-container {
height: 1rem;
+ border-radius: var(--border-radius);
background: var(--color-placeholder-background);
}
}
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 0c63b960d..8e01218b4 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -15,36 +15,69 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
- padding: 0.5rem 1rem;
+ align-items: center;
+ padding: 0.5rem;
+ margin-bottom: 0.5rem;
+ border-radius: var(--border-radius);
&:hover,
&:focus,
&:global(.active) {
- background-color: @color-background;
+ background-color: var(--overlay-color);
}
.thumbnail-container {
flex: none;
+ position: relative;
+ border-radius: 0.3rem;
+ overflow: hidden;
.thumbnail {
pointer-events: none;
display: block;
- width: 7.5rem;
height: 5rem;
- object-fit: contain;
+ width: 8rem;
+ object-fit: cover;
object-position: center;
opacity: 0.9;
+ background-color: var(--overlay-color);
}
.placeholder-icon {
display: block;
- width: 7.5rem;
height: 5rem;
+ width: 8rem;
padding: 1rem;
- fill: @color-surface-light5;
- background-color: @color-surface-light5-40;
+ color: var(--primary-foreground-color);
+ background-color: var(--overlay-color);
opacity: 0.25;
}
+
+ .progress-bar-container {
+ position: absolute;
+ bottom: 0.5rem;
+ left: 0.5rem;
+ right: 0.5rem;
+ border-radius: var(--border-radius);
+
+ .progress-bar {
+ z-index: 1;
+ position: relative;
+ height: 0.4rem;
+ background-color: var(--primary-accent-color);
+ }
+
+ .progress-bar-background {
+ z-index: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--primary-foreground-color);
+ opacity: 0.2;
+ }
+ }
}
.info-container {
@@ -52,20 +85,15 @@
align-self: stretch;
display: flex;
flex-direction: column;
- justify-content: space-between;
- margin: 0.5rem 1rem;
-
- &:first-child {
- height: 3rem;
-
- .title-container {
- max-height: 1.2em;
- }
- }
+ justify-content: center;
+ padding: 0 0.5rem 0 1.5rem;
.title-container {
- max-height: 2.4em;
- color: @color-surface-light5-90;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ margin-bottom: 1rem;
+ color: var(--primary-foreground-color);
}
.flex-row-container {
@@ -82,14 +110,17 @@
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
- text-transform: uppercase;
- color: @color-surface-dark5-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.44;
}
.upcoming-watched-container {
flex: 0 1 auto;
display: flex;
flex-direction: row;
+ align-items: center;
+ height: 1.6rem;
+ border-radius: 0.3rem;
&>:nth-child(2) {
margin-left: 0.5rem;
@@ -98,66 +129,65 @@
.upcoming-container,
.watched-container {
flex: none;
- padding: 0.2rem 0.4rem;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ padding: 0 0.5rem;
max-width: 10rem;
&:not(:only-child) {
max-width: 5rem;
}
+ .flag-icon {
+ height: 1.15rem;
+ width: 1.15rem;
+ margin-right: 0.25rem;
+ color: var(--secondary-foreground-color);
+ }
+
.flag-label {
font-size: 0.8rem;
- font-weight: 500;
+ font-weight: 800;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase;
- color: @color-background-90;
+ color: var(--secondary-foreground-color);
}
}
.upcoming-container {
- background-color: @color-accent4;
+ background-color: var(--secondary-accent-color);
}
.watched-container {
- background-color: @color-accent5;
+ background-color: var(--tertiary-accent-color);
}
}
}
}
- .progress-bar-container {
- flex: 0 0 100%;
- background-color: @color-background-light2;
-
- .progress-bar {
- height: 0.5rem;
- background-color: @color-primaryvariant1;
- }
- }
-
.context-menu-container {
max-width: calc(90% - 1.5rem);
.context-menu-content {
--spatial-navigation-contain: contain;
- background-color: @color-background-dark1;
.context-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
- padding: 0.5rem 1rem;
+ padding: 1rem 1.5rem;
&:hover,
&:focus {
- background-color: @color-background;
+ background-color: var(--overlay-color);
}
.context-menu-option-label {
font-size: 1rem;
- max-height: 2.4em;
- color: @color-surface-light5-90;
+ font-weight: 500;
+ color:var(--primary-foreground-color);
}
}
}
@@ -166,15 +196,7 @@
@media only screen and (max-width: @minimum) {
.video-container {
-
- &:hover,
- &:focus,
- &:global(.active) {
- background-color: @color-surface-light5-20;
- }
-
.context-menu-container {
-
&.menu-direction-top-left,
&.menu-direction-bottom-left {
right: 1.5rem;
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index b1928eba8..e344c6480 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -4,13 +4,15 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { t } = require('i18next');
-const Image = require('stremio/common/Image');
-const SearchBar = require('stremio/common/SearchBar');
+const { Image, SearchBar, Checkbox } = require('stremio/common');
const SeasonsBar = require('./SeasonsBar');
const Video = require('./Video');
const styles = require('./styles');
-const VideosList = ({ className, metaItem, season, seasonOnSelect }) => {
+const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
+ const showNotificationsToggle = React.useMemo(() => {
+ return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
+ }, [metaItem]);
const videos = React.useMemo(() => {
return metaItem && metaItem.content.type === 'Ready' ?
metaItem.content.content.videos
@@ -80,6 +82,14 @@ const VideosList = ({ className, metaItem, season, seasonOnSelect }) => {
:
+ {
+ showNotificationsToggle && libraryItem ?
+
+ {t('DETAIL_RECEIVE_NOTIF_SERIES')}
+
+ :
+ null
+ }
{
seasons.length > 0 ?
{
VideosList.propTypes = {
className: PropTypes.string,
metaItem: PropTypes.object,
+ libraryItem: PropTypes.object,
season: PropTypes.number,
- seasonOnSelect: PropTypes.func
+ seasonOnSelect: PropTypes.func,
+ toggleNotifications: PropTypes.func,
};
module.exports = VideosList;
diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 4a1cc37ef..3ef1ae2eb 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -6,6 +6,7 @@
.videos-list-container {
display: flex;
flex-direction: column;
+ padding-top: 0.5rem;
.message-container {
flex: 1;
@@ -31,13 +32,26 @@
flex: none;
font-size: 1.4rem;
text-align: center;
- color: @color-secondaryvariant2-light1-90;
+ color: var(--primary-foreground-color);
}
}
+ .notifications-checkbox {
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 1rem;
+ height: 3rem;
+ padding: 0 1.5rem;
+ color: @color-surface-light5-90;
+ }
+
.seasons-bar {
flex: none;
align-self: stretch;
+ margin: 0.5rem 1rem 1rem 1rem;
}
.search-bar {
@@ -53,6 +67,7 @@
.videos-container {
flex: 1;
align-self: stretch;
+ padding: 0 1rem;
overflow-y: auto;
}
}
diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index a906c7a99..a3a698659 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -17,9 +17,9 @@
flex-direction: column;
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
.nav-bar {
+ z-index: 1;
flex: none;
align-self: stretch;
}
@@ -38,23 +38,13 @@
}
.background-image-layer {
- position: absolute;
+ position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
-
- &::after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1;
- background: @color-background-dark2-70;
- content: "";
- }
+ background-color: var(--modal-background-color);
.background-image {
pointer-events: none;
@@ -63,7 +53,7 @@
height: 100%;
object-fit: cover;
object-position: top left;
- opacity: 0.9;
+ opacity: 0.3;
}
}
@@ -91,13 +81,14 @@
align-self: stretch;
font-size: 2rem;
text-align: center;
- color: @color-secondaryvariant2-light1-90;
+ color: var(--primary-foreground-color);
}
}
.meta-preview {
- flex: 0 1 40rem;
+ flex: 0 1 auto;
align-self: stretch;
+ padding: 0 4rem 2rem 4rem;
}
.spacing {
@@ -105,9 +96,11 @@
}
.videos-list, .streams-list {
- flex: 0 0 26.5rem;
+ flex: 0 0 30rem;
align-self: stretch;
- background-color: @color-background-dark5-70;
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
+ background-color: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(15px);
}
}
}
@@ -130,25 +123,20 @@
@media only screen and (max-width: @minimum) {
.metadetails-container {
- position: relative;
- z-index: 0;
-
.metadetails-content {
display: block;
- position: static;
- z-index: initial;
overflow-y: auto;
.spacing {
display: none;
}
- .background-image-layer {
- top: var(--horizontal-nav-bar-size);
+ .meta-preview {
+ padding: 0 1.5rem 2rem;
}
.videos-list, .streams-list {
- background-color: transparent;
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
}
}
}
diff --git a/src/routes/MetaDetails/useMetaDetails.js b/src/routes/MetaDetails/useMetaDetails.js
index 66297faae..c3790fddb 100644
--- a/src/routes/MetaDetails/useMetaDetails.js
+++ b/src/routes/MetaDetails/useMetaDetails.js
@@ -56,7 +56,8 @@ const useMetaDetails = (urlParams) => {
extra: []
}
:
- null
+ null,
+ guessStream: true,
}
}
};
diff --git a/src/routes/MetaDetails/useMetaExtensionTabs.js b/src/routes/MetaDetails/useMetaExtensionTabs.js
index b5b954700..c4ca2f10e 100644
--- a/src/routes/MetaDetails/useMetaExtensionTabs.js
+++ b/src/routes/MetaDetails/useMetaExtensionTabs.js
@@ -9,7 +9,7 @@ const useMetaExtensionTabs = (metaExtensions) => {
id: extension.url,
label: extension.addon.manifest.name,
logo: extension.addon.manifest.logo,
- icon: 'ic_addons',
+ icon: 'addons',
onClick: () => setSelected(extension)
}));
}, [metaExtensions]);
diff --git a/src/routes/NotFound/styles.less b/src/routes/NotFound/styles.less
index 6b28f7cba..ce002bcca 100644
--- a/src/routes/NotFound/styles.less
+++ b/src/routes/NotFound/styles.less
@@ -7,7 +7,7 @@
flex-direction: column;
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
+ background-color: transparent;
.nav-bar {
flex: none;
diff --git a/src/routes/Player/BufferingLoader/styles.less b/src/routes/Player/BufferingLoader/styles.less
index 400130737..68bc83ff3 100644
--- a/src/routes/Player/BufferingLoader/styles.less
+++ b/src/routes/Player/BufferingLoader/styles.less
@@ -7,7 +7,19 @@
.buffering-loader {
flex: none;
- width: 17rem;
- height: 17rem;
+ max-width: 15rem;
+ max-height: 15rem;
+ animation: fadeInOut 2s infinite;
+ display: block;
+ width: auto;
+ height: auto;
}
-}
\ No newline at end of file
+
+}
+
+
+@keyframes fadeInOut {
+ 0% { opacity: 0.2; }
+ 50% { opacity: 1; }
+ 100% { opacity: 0.2; }
+}
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 8d0c0364b..b0631a3f3 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button } = require('stremio/common');
const { useServices } = require('stremio/services');
const SeekBar = require('./SeekBar');
@@ -29,6 +29,7 @@ const ControlBar = ({
statistics,
onPlayRequested,
onPauseRequested,
+ onNextVideoRequested,
onMuteRequested,
onUnmuteRequested,
onVolumeChangeRequested,
@@ -74,14 +75,10 @@ const ControlBar = ({
}
}, [paused, onPlayRequested, onPauseRequested]);
const onNextVideoButtonClick = React.useCallback(() => {
- if (nextVideo !== null && typeof nextVideo.deepLinks === 'object') {
- if (nextVideo.deepLinks.player !== null) {
- window.location.replace(nextVideo.deepLinks.player);
- } else if (nextVideo.deepLinks.metaDetailsStreams !== null) {
- window.location.replace(nextVideo.deepLinks.metaDetailsStreams);
- }
+ if (nextVideo !== null && typeof onNextVideoRequested === 'function') {
+ onNextVideoRequested();
}
- }, [nextVideo]);
+ }, [nextVideo, onNextVideoRequested]);
const onMuteButtonClick = React.useCallback(() => {
if (muted) {
if (typeof onUnmuteRequested === 'function') {
@@ -93,36 +90,6 @@ const ControlBar = ({
}
}
}, [muted, onMuteRequested, onUnmuteRequested]);
- const onSubtitlesButtonClick = React.useCallback(() => {
- if (typeof onToggleSubtitlesMenu === 'function') {
- onToggleSubtitlesMenu();
- }
- }, [onToggleSubtitlesMenu]);
- const onInfoButtonClick = React.useCallback(() => {
- if (typeof onToggleInfoMenu === 'function') {
- onToggleInfoMenu();
- }
- }, [onToggleInfoMenu]);
- const onSpeedButtonClick = React.useCallback(() => {
- if (typeof onToggleSpeedMenu === 'function') {
- onToggleSpeedMenu();
- }
- }, [onToggleSpeedMenu]);
- const onVideosButtonClick = React.useCallback(() => {
- if (typeof onToggleVideosMenu === 'function') {
- onToggleVideosMenu();
- }
- }, [onToggleVideosMenu]);
- const onOptionsButtonClick = React.useCallback(() => {
- if (typeof onToggleOptionsMenu === 'function') {
- onToggleOptionsMenu();
- }
- }, [onToggleOptionsMenu]);
- const onStatisticsButtonClick = React.useCallback(() => {
- if (typeof onToggleStatisticsMenu === 'function') {
- onToggleStatisticsMenu();
- }
- }, [onToggleStatisticsMenu]);
const onChromecastButtonClick = React.useCallback(() => {
chromecast.transport.requestSession();
}, []);
@@ -146,12 +113,12 @@ const ControlBar = ({
/>
{
nextVideo !== null ?
:
null
@@ -159,12 +126,12 @@ const ControlBar = ({
@@ -175,34 +142,34 @@ const ControlBar = ({
/>
-
@@ -227,6 +194,7 @@ ControlBar.propTypes = {
statistics: PropTypes.object,
onPlayRequested: PropTypes.func,
onPauseRequested: PropTypes.func,
+ onNextVideoRequested: PropTypes.func,
onMuteRequested: PropTypes.func,
onUnmuteRequested: PropTypes.func,
onVolumeChangeRequested: PropTypes.func,
diff --git a/src/routes/Player/ControlBar/SeekBar/styles.less b/src/routes/Player/ControlBar/SeekBar/styles.less
index 456421abb..6a659a790 100644
--- a/src/routes/Player/ControlBar/SeekBar/styles.less
+++ b/src/routes/Player/ControlBar/SeekBar/styles.less
@@ -12,34 +12,14 @@
flex-direction: row;
align-items: center;
- &:hover, &:global(.active) {
- .slider:not(:global(.disabled)) {
- .slider-thumb {
- fill: @color-surface-light5;
- }
- }
- }
-
- &:hover {
- .slider:not(:global(.disabled)) {
- .slider-track-after {
- transition: background-color 0s 100ms;
- }
-
- .slider-thumb {
- transition: fill 0s 100ms;
- }
- }
- }
-
.label {
flex: none;
- max-width: 5rem;
+ width: 5rem;
white-space: nowrap;
text-overflow: ellipsis;
direction: rtl;
- text-align: left;
- color: @color-surface-light5;
+ text-align: center;
+ color: var(--primary-foreground-color);
}
.slider {
@@ -47,8 +27,24 @@
align-self: stretch;
margin: 0 var(--thumb-size);
+ .slider-track-after {
+ background-color: var(--primary-accent-color);
+ }
+
.slider-thumb {
- fill: transparent;
+ background-color: var(--primary-accent-color);
+
+ &:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ border-radius: 100%;
+ box-shadow: 0 0 0 0.25rem var(--primary-accent-color) inset;
+ filter: brightness(130%);
+ }
}
}
}
\ No newline at end of file
diff --git a/src/routes/Player/ControlBar/VolumeSlider/styles.less b/src/routes/Player/ControlBar/VolumeSlider/styles.less
index b215198cc..98ec07142 100644
--- a/src/routes/Player/ControlBar/VolumeSlider/styles.less
+++ b/src/routes/Player/ControlBar/VolumeSlider/styles.less
@@ -9,16 +9,16 @@
.volume-slider:not(:global(.disabled)) {
.slider-track {
- background-color: @color-surface-dark5;
+ background-color: var(--overlay-color);
}
.slider-track-after {
- background-color: @color-surface-light3;
+ background-color: var(--primary-foreground-color);
}
&:hover, &:global(.active) {
.slider-track-after {
- background-color: @color-surface-light5;
+ background-color: var(--primary-foreground-color);
}
}
}
\ No newline at end of file
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index efc08c02e..147a3f0a2 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -8,7 +8,7 @@
.seek-bar {
--track-size: 0.5rem;
- --thumb-size: 1.5rem;
+ --thumb-size: 1.3rem;
height: 2.5rem;
}
@@ -21,31 +21,30 @@
.control-bar-button {
flex: none;
width: 4rem;
- height: 4rem;
+ height: 5rem;
display: flex;
justify-content: center;
align-items: center;
&:global(.disabled) {
.icon {
- fill: @color-surface;
+ opacity: 0.5;
}
}
.icon {
flex: none;
- width: 3rem;
- height: 2rem;
- fill: @color-surface-light5;
+ width: 2.5rem;
+ height: 2.5rem;
+ color: var(--primary-foreground-color);
}
}
.volume-slider {
- --track-size: 0.4rem;
- --thumb-size: 1.3rem;
+ --track-size: 0.35rem;
+ --thumb-size: 1rem;
- flex: 0 1 16rem;
- min-width: 10rem;
+ flex: 0 1 10rem;
height: 4rem;
margin: 0 1rem;
}
@@ -64,9 +63,9 @@
.icon {
flex: none;
- width: 3rem;
- height: 2rem;
- fill: @color-surface-light5;
+ width: 2.5rem;
+ height: 2.5rem;
+ color: var(--primary-foreground-color);
}
}
@@ -105,7 +104,8 @@
bottom: 4.5rem;
flex-direction: column;
padding: 0.5rem;
- background-color: @color-background-dark1;
+ border-radius: var(--border-radius);
+ background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
diff --git a/src/routes/Player/Error/Error.js b/src/routes/Player/Error/Error.js
new file mode 100644
index 000000000..6bf638a52
--- /dev/null
+++ b/src/routes/Player/Error/Error.js
@@ -0,0 +1,56 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useTranslation } = require('react-i18next');
+const PropTypes = require('prop-types');
+const classNames = require('classnames');
+const { default: Icon } = require('@stremio/stremio-icons/react');
+const Button = require('stremio/common/Button');
+const styles = require('./styles');
+
+const Error = ({ className, code, message, stream }) => {
+ const { t } = useTranslation();
+
+ const [playlist, fileName] = React.useMemo(() => {
+ return [
+ stream?.deepLinks?.externalPlayer?.playlist,
+ stream?.deepLinks?.externalPlayer?.fileName,
+ ];
+ }, [stream]);
+
+ return (
+
+
{message}
+ {
+ code === 2 ?
+
{t('EXTERNAL_PLAYER_HINT')}
+ :
+ null
+ }
+ {
+ playlist && fileName ?
+
+ :
+ null
+ }
+
{
- typeof videoName === 'string' ?
+ typeof metaItem?.name === 'string' ?
+ Next on { metaItem.name }
+
+ :
+ null
+ }
+ {
+ typeof videoName === 'string' ?
+
{ videoName }
:
@@ -77,12 +85,12 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onPlayNextV
}
-
@@ -96,7 +104,7 @@ NextVideoPopup.propTypes = {
metaItem: PropTypes.object,
nextVideo: PropTypes.object,
onDismiss: PropTypes.func,
- onPlayNextVideoRequested: PropTypes.func
+ onNextVideoRequested: PropTypes.func
};
module.exports = NextVideoPopup;
diff --git a/src/routes/Player/NextVideoPopup/styles.less b/src/routes/Player/NextVideoPopup/styles.less
index a55381cd7..af564d3cc 100644
--- a/src/routes/Player/NextVideoPopup/styles.less
+++ b/src/routes/Player/NextVideoPopup/styles.less
@@ -5,8 +5,7 @@
.next-video-popup-container {
display: flex;
flex-direction: row;
- height: 16rem;
- width: 40rem;
+ width: 50rem;
animation: slide-fade-in 0.5s ease-in;
@keyframes slide-fade-in {
@@ -22,11 +21,11 @@
}
.poster-container {
- flex: 1 1 40%;
+ flex: 1 1 45%;
display: flex;
justify-content: center;
align-items: center;
- background-color: @color-background;
+ background-color: var(--overlay-color);
.poster-image {
flex: none;
@@ -40,62 +39,83 @@
flex: none;
width: 80%;
height: 50%;
- fill: @color-background-light3-90;
+ color: var(--primary-foreground-color);
}
}
.info-container {
- flex: 1 1 70%;
+ flex: 1 1 55%;
display: flex;
flex-direction: column;
.details-container {
flex: auto;
- padding: 1.5rem 1.5rem;
+ padding: 2rem;
.name {
flex: none;
align-self: stretch;
max-height: 2.4em;
- font-weight: 600;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ color: var(--primary-accent-color);
+
+ .label {
+ color: var(--primary-foreground-color);
+ }
+ }
+
+ .title {
+ flex: none;
+ align-self: stretch;
+ max-height: 2.4em;
+ font-weight: 500;
margin-bottom: 0.5rem;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.description {
- color: @color-surface-light5-50;
+ color: var(--primary-foreground-color);
+ opacity: 0.5;
+ max-width: 80%;
+ padding: 0.5rem 0;
}
}
.buttons-container {
display: flex;
flex-direction: row;
+ padding: 0 1rem 2rem;
.spacing {
flex: 0 0 50%;
}
.button-container {
- flex: 0 0 50%;
+ flex: 0 0 45%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 3.5rem;
+ padding: 0 0.5rem;
+ margin-left: 1rem;
+ border-radius: 1.75rem;
&.play-button {
- background-color: @color-accent3;
+ background-color: var(--primary-accent-color);
.icon {
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.label {
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
- &:hover, &:focus {
- background-color: @color-accent3-light1;
+ &:hover {
+ outline: var(--focus-outline-size) solid var(--primary-accent-color);
+ background-color: transparent;
}
}
@@ -104,7 +124,7 @@
width: 1.4rem;
height: 1.4rem;
margin-right: 1rem;
- fill: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
.label {
@@ -112,11 +132,15 @@
max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500;
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
+ }
+
+ &.dismiss {
+ opacity: 0.6;
}
&:hover, &:focus {
- background-color: @color-background-light2;
+ background-color: var(--overlay-color);
}
}
}
diff --git a/src/routes/Player/OptionsMenu/Option/Option.js b/src/routes/Player/OptionsMenu/Option/Option.js
index 63e38cd68..f769fb476 100644
--- a/src/routes/Player/OptionsMenu/Option/Option.js
+++ b/src/routes/Player/OptionsMenu/Option/Option.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button } = require('stremio/common');
const styles = require('./styles');
@@ -15,7 +15,7 @@ const Option = ({ icon, label, deviceId, disabled, onClick }) => {
}, [onClick, deviceId]);
return (
);
diff --git a/src/routes/Player/OptionsMenu/Option/styles.less b/src/routes/Player/OptionsMenu/Option/styles.less
index 499c4b4bc..88193d0ac 100644
--- a/src/routes/Player/OptionsMenu/Option/styles.less
+++ b/src/routes/Player/OptionsMenu/Option/styles.less
@@ -6,25 +6,32 @@
display: flex;
flex-direction: row;
align-items: center;
- height: 4rem;
+ height: 3.5rem;
+ border-radius: var(--border-radius);
+ padding: 0 1rem;
+ margin-bottom: 0.5rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
.icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
- margin: 1.3rem;
- fill: @color-surface-light5-90;
+ margin-right: 1rem;
+ color: var(--primary-foreground-color);
}
.label {
flex: 1;
max-height: 2.4em;
font-weight: 400;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
&:hover {
- background-color: @color-background-light2;
+ background-color: var(--overlay-color);
}
&:global(.disabled) {
diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index a71ea3d96..6c50e1551 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -73,7 +73,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
{
streamingUrl || downloadUrl ?
diff --git a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
index 2171ed591..2ceb41f80 100644
--- a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
+++ b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
@@ -5,7 +5,7 @@
.discrete-input-container {
&:global(.disabled) {
.header {
- color: @color-surface-90;
+ color: var(--primary-foreground-color);
}
.input-container {
@@ -14,38 +14,39 @@
}
.header {
- max-height: 2.4em;
margin-bottom: 0.5rem;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
}
.input-container {
display: flex;
flex-direction: row;
align-items: center;
- background: @color-background;
+ border-radius: 3.5rem;
+ background: var(--overlay-color);
.button-container {
flex: none;
- width: 3rem;
- height: 3rem;
+ width: 3.5rem;
+ height: 3.5rem;
padding: 1rem;
- background-color: @color-background-light2;
+ border-radius: 100%;
+ background-color: var(--overlay-color);
.icon {
display: block;
width: 100%;
height: 100%;
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
.option-label {
flex: 1;
- max-height: 2.4em;
font-weight: 500;
text-align: center;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
}
\ No newline at end of file
diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index bea30105e..0130c58e2 100644
--- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
+++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -277,8 +277,6 @@ const SubtitlesMenu = React.memo((props) => {
}
onChange={onSubtitlesOffsetChanged}
/>
-
-
);
diff --git a/src/routes/Player/SubtitlesMenu/styles.less b/src/routes/Player/SubtitlesMenu/styles.less
index b6e424740..3f397b068 100644
--- a/src/routes/Player/SubtitlesMenu/styles.less
+++ b/src/routes/Player/SubtitlesMenu/styles.less
@@ -3,7 +3,7 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.subtitles-menu-container {
- height: 23rem;
+ height: 25rem;
display: flex;
flex-direction: row;
@@ -16,32 +16,35 @@
.languages-header, .variants-header, .settings-header {
flex: none;
align-self: stretch;
- max-height: 2.4em;
- margin: 1rem;
- font-weight: 600;
- color: @color-surface-light5-90;
+ padding: 1.5rem 2rem;
+ font-weight: 700;
+ color: var(--primary-foreground-color);
}
.languages-list, .variants-list {
flex: 1;
align-self: stretch;
overflow-y: auto;
+ padding: 0 1rem;
.language-option, .variant-option {
display: flex;
flex-direction: row;
align-items: center;
- padding: 1rem 1.5rem;
+ height: 3.5rem;
+ padding: 0 1.5rem;
+ margin-bottom: 0.5rem;
+ border-radius: var(--border-radius);
&:global(.selected), &:hover {
- background-color: @color-background;
+ background-color: var(--overlay-color);
}
.language-label, .variant-label {
flex: 1;
max-height: 2.4em;
font-size: 1.1rem;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.icon {
@@ -50,18 +53,18 @@
height: 0.5rem;
border-radius: 100%;
margin-left: 1rem;
- background-color: @color-accent3-90;
+ background-color: var(--secondary-accent-color);
}
}
}
}
.languages-container {
- width: 12rem;
+ width: 16rem;
}
.variants-container {
- width: 12rem;
+ width: 16rem;
.no-variants-container {
flex: 1;
@@ -71,38 +74,20 @@
.no-variants-label {
max-height: 4.8em;
font-weight: 500;
- color: @color-surface-90;
+ color: var(--primary-foreground-color);
}
}
}
.subtitles-settings-container {
- width: 16rem;
+ width: 17rem;
.spacing {
flex: 1;
}
.discrete-input {
- margin: 0 1.5rem 1rem;
- }
-
- .advanced-button {
- flex: none;
- align-self: flex-end;
- max-width: calc(100% - 3rem);
- margin: 0 1.5rem 1rem;
- white-space: nowrap;
- text-overflow: ellipsis;
- color: @color-surface-light5-90;
-
- &:hover {
- text-decoration: underline;
- }
-
- &:global(.disabled) {
- color: @color-surface-90;
- }
+ padding: 0 1.5rem 1rem;
}
}
}
\ No newline at end of file
diff --git a/src/routes/Player/Video/Video.js b/src/routes/Player/Video/Video.js
index 6dee8fe33..78cc5c08e 100644
--- a/src/routes/Player/Video/Video.js
+++ b/src/routes/Player/Video/Video.js
@@ -3,79 +3,12 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const StremioVideo = require('@stremio/stremio-video');
-const { useLiveRef } = require('stremio/common');
const styles = require('./styles');
-const Video = React.forwardRef(({ className, ...props }, ref) => {
- const onEndedRef = useLiveRef(props.onEnded);
- const onErrorRef = useLiveRef(props.onError);
- const onPropValueRef = useLiveRef(props.onPropValue);
- const onPropChangedRef = useLiveRef(props.onPropChanged);
- const onSubtitlesTrackLoadedRef = useLiveRef(props.onSubtitlesTrackLoaded);
- const onExtraSubtitlesTrackLoadedRef = useLiveRef(props.onExtraSubtitlesTrackLoaded);
- const onImplementationChangedRef = useLiveRef(props.onImplementationChanged);
- const videoElementRef = React.useRef(null);
- const videoRef = React.useRef(null);
- const dispatch = React.useCallback((action, options = {}) => {
- if (videoRef.current !== null) {
- try {
- videoRef.current.dispatch(action, {
- ...options,
- containerElement: videoElementRef.current
- });
- } catch (error) {
- console.error('Video', error);
- }
- }
- }, []);
- React.useImperativeHandle(ref, () => ({ dispatch }), []);
- React.useEffect(() => {
- if (videoElementRef.current !== null) {
- videoRef.current = new StremioVideo();
- videoRef.current.on('ended', () => {
- if (typeof onEndedRef.current === 'function') {
- onEndedRef.current();
- }
- });
- videoRef.current.on('error', (args) => {
- if (typeof onErrorRef.current === 'function') {
- onErrorRef.current(args);
- }
- });
- videoRef.current.on('propValue', (propName, propValue) => {
- if (typeof onPropValueRef.current === 'function') {
- onPropValueRef.current(propName, propValue);
- }
- });
- videoRef.current.on('propChanged', (propName, propValue) => {
- if (typeof onPropChangedRef.current === 'function') {
- onPropChangedRef.current(propName, propValue);
- }
- });
- videoRef.current.on('subtitlesTrackLoaded', (track) => {
- if (typeof onSubtitlesTrackLoadedRef.current === 'function') {
- onSubtitlesTrackLoadedRef.current(track);
- }
- });
- videoRef.current.on('extraSubtitlesTrackLoaded', (track) => {
- if (typeof onExtraSubtitlesTrackLoadedRef.current === 'function') {
- onExtraSubtitlesTrackLoadedRef.current(track);
- }
- });
- videoRef.current.on('implementationChanged', (manifest) => {
- if (typeof onImplementationChangedRef.current === 'function') {
- onImplementationChangedRef.current(manifest);
- }
- });
- }
- return () => {
- videoRef.current.destroy();
- };
- }, []);
+const Video = React.forwardRef(({ className, onClick, onDoubleClick }, ref) => {
return (
-
-
+
);
});
@@ -84,13 +17,8 @@ Video.displayName = 'Video';
Video.propTypes = {
className: PropTypes.string,
- onEnded: PropTypes.func,
- onError: PropTypes.func,
- onPropValue: PropTypes.func,
- onPropChanged: PropTypes.func,
- onSubtitlesTrackLoaded: PropTypes.func,
- onExtraSubtitlesTrackLoaded: PropTypes.func,
- onImplementationChanged: PropTypes.func
+ onClick: PropTypes.func,
+ onDoubleClick: PropTypes.func,
};
module.exports = Video;
diff --git a/src/routes/Player/VideosMenu/styles.less b/src/routes/Player/VideosMenu/styles.less
index 80912dd33..8cc7e4805 100644
--- a/src/routes/Player/VideosMenu/styles.less
+++ b/src/routes/Player/VideosMenu/styles.less
@@ -2,4 +2,6 @@
.videos-menu-container {
width: 30rem;
+ padding: 1rem;
+ padding-bottom: 0;
}
\ No newline at end of file
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 284761937..362b9029b 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -12,8 +12,10 @@
nav-bar-icon: icon;
}
+@background-color: rgba(0, 0, 0, 1);
+
html:not(.active-slider-within) {
- .player-container.immersed {
+ .player-container.overlayHidden {
cursor: none;
.nav-bar-layer, .control-bar-layer, .menu-layer {
@@ -28,7 +30,7 @@ html:not(.active-slider-within) {
z-index: 0;
width: 100%;
height: 100%;
- background-color: @color-background-dark5;
+ background-color: @background-color;
.layer {
position: absolute;
@@ -38,66 +40,6 @@ html:not(.active-slider-within) {
bottom: 0;
z-index: 0;
- &.error-layer {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: @color-background-dark5;
-
- .error-label {
- flex: 0 1 auto;
- padding: 0 8rem;
- max-height: 4.8em;
- font-size: 2rem;
- color: @color-surface-light5-90;
- text-align: center;
- }
-
- .error-sub {
- flex: 0 1 auto;
- padding: 0 2rem;
- max-height: 4.8em;
- font-size: 1.3rem;
- margin-top: 0.8rem;
- color: @color-surface-light5-90;
- text-align: center;
- }
-
- .playlist-button {
- flex: none;
- display: flex;
- flex-direction: row;
- align-items: center;
- height: 3.5rem;
- max-width: 16rem;
- margin-top: 1.5rem;
- padding: 0.5rem 1rem;
- background-color: @color-accent3;
-
- &:hover, &:focus {
- background-color: @color-accent3-light1;
- }
-
- .icon {
- flex: none;
- width: 1.5rem;
- height: 1.5rem;
- margin-right: 1rem;
- fill: @color-surface-light5-90;
- }
-
- .label {
- flex: 1;
- max-height: 2.4em;
- font-size: 1.1rem;
- font-weight: 500;
- color: @color-surface-light5-90;
- text-align: center;
- }
- }
- }
-
&.nav-bar-layer {
bottom: initial;
background: transparent;
@@ -119,12 +61,12 @@ html:not(.active-slider-within) {
}
.nav-bar-icon {
- fill: @color-surface-light5;
+ color: var(--primary-foreground-color);
}
}
.nav-bar-title {
- color: @color-surface-light5;
+ color: var(--primary-foreground-color);
}
}
@@ -150,9 +92,11 @@ html:not(.active-slider-within) {
bottom: 8rem;
max-height: calc(100% - 13.5rem);
max-width: calc(100% - 4rem);
- background-color: @color-background-dark1;
+ border-radius: var(--border-radius);
+ background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
+ backdrop-filter: blur(15px);
overflow: auto;
}
}
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 53aa84fe4..9bbc1673d 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -32,7 +32,7 @@ const map = (player) => ({
player.metaItem,
});
-const usePlayer = (urlParams, videoParams) => {
+const usePlayer = (urlParams) => {
const { core } = useServices();
const { decodeStream } = useCoreSuspender();
const stream = decodeStream(urlParams.stream);
@@ -44,7 +44,6 @@ const usePlayer = (urlParams, videoParams) => {
model: 'Player',
args: {
stream,
- videoParams,
streamRequest: typeof urlParams.streamTransportUrl === 'string' && typeof urlParams.type === 'string' && typeof urlParams.videoId === 'string' ?
{
base: urlParams.streamTransportUrl,
@@ -86,7 +85,16 @@ const usePlayer = (urlParams, videoParams) => {
action: 'Unload'
};
}
- }, [urlParams, videoParams]);
+ }, [urlParams]);
+ const videoParamsChanged = React.useCallback((videoParams) => {
+ core.transport.dispatch({
+ action: 'Player',
+ args: {
+ action: 'VideoParamsChanged',
+ args: { videoParams }
+ }
+ }, 'player');
+ }, []);
const timeChanged = React.useCallback((time, duration, device) => {
core.transport.dispatch({
action: 'Player',
@@ -113,8 +121,16 @@ const usePlayer = (urlParams, videoParams) => {
}
}, 'player');
}, []);
+ const nextVideo = React.useCallback(() => {
+ core.transport.dispatch({
+ action: 'Player',
+ args: {
+ action: 'NextVideo'
+ }
+ }, 'player');
+ }, []);
const player = useModelState({ model: 'player', action, map });
- return [player, timeChanged, pausedChanged, ended];
+ return [player, videoParamsChanged, timeChanged, pausedChanged, ended, nextVideo];
};
module.exports = usePlayer;
diff --git a/src/routes/Player/useStatistics.js b/src/routes/Player/useStatistics.js
new file mode 100644
index 000000000..d13411327
--- /dev/null
+++ b/src/routes/Player/useStatistics.js
@@ -0,0 +1,83 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useServices } = require('stremio/services');
+
+const useStatistics = (player, streamingServer) => {
+ const { core } = useServices();
+
+ const stream = React.useMemo(() => {
+ return player.selected?.stream ?
+ player.selected.stream
+ :
+ null;
+ }, [player.selected]);
+
+ const infoHash = React.useMemo(() => {
+ return stream?.infoHash ?
+ stream?.infoHash
+ :
+ null;
+ }, [stream]);
+
+ const statistics = React.useMemo(() => {
+ return streamingServer.statistics?.type === 'Ready' ?
+ streamingServer.statistics.content
+ :
+ null;
+ }, [streamingServer.statistics]);
+
+ const peers = React.useMemo(() => {
+ return statistics?.peers ?
+ statistics.peers
+ :
+ 0;
+ }, [statistics]);
+
+ const speed = React.useMemo(() => {
+ return statistics?.downloadSpeed ?
+ parseFloat((statistics.downloadSpeed / 1000 / 1000).toFixed(2))
+ :
+ 0;
+ }, [statistics]);
+
+ const completed = React.useMemo(() => {
+ return statistics?.streamProgress ?
+ parseFloat((statistics.streamProgress * 100).toFixed(2))
+ :
+ 0;
+ }, [statistics]);
+
+ const getStatistics = React.useCallback(() => {
+ if (stream) {
+ const { infoHash, fileIdx } = stream;
+ if (typeof infoHash === 'string' && typeof fileIdx === 'number') {
+ core.transport.dispatch({
+ action: 'StreamingServer',
+ args: {
+ action: 'GetStatistics',
+ args: {
+ infoHash,
+ fileIdx,
+ }
+ }
+ });
+ }
+ }
+ }, [stream]);
+
+ React.useEffect(() => {
+ getStatistics();
+ const interval = setInterval(getStatistics, 5000);
+ return () => clearInterval(interval);
+ }, [getStatistics]);
+
+ return {
+ infoHash,
+ peers,
+ speed,
+ completed,
+ };
+};
+
+module.exports = useStatistics;
diff --git a/src/routes/Player/useVideo.js b/src/routes/Player/useVideo.js
new file mode 100644
index 000000000..6a59a12fb
--- /dev/null
+++ b/src/routes/Player/useVideo.js
@@ -0,0 +1,143 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const Video = require('@stremio/stremio-video');
+const EventEmitter = require('eventemitter3');
+
+const events = new EventEmitter();
+
+const useVideo = () => {
+ const video = React.useRef(null);
+ const containerElement = React.useRef(null);
+
+ const [state, setState] = React.useState({
+ manifest: null,
+ stream: null,
+ paused: null,
+ time: null,
+ duration: null,
+ buffering: null,
+ buffered: null,
+ volume: null,
+ muted: null,
+ playbackSpeed: null,
+ videoParams: null,
+ audioTracks: [],
+ selectedAudioTrackId: null,
+ subtitlesTracks: [],
+ selectedSubtitlesTrackId: null,
+ subtitlesOffset: null,
+ subtitlesSize: null,
+ subtitlesTextColor: null,
+ subtitlesBackgroundColor: null,
+ subtitlesOutlineColor: null,
+ extraSubtitlesTracks: [],
+ selectedExtraSubtitlesTrackId: null,
+ extraSubtitlesSize: null,
+ extraSubtitlesDelay: null,
+ extraSubtitlesOffset: null,
+ extraSubtitlesTextColor: null,
+ extraSubtitlesBackgroundColor: null,
+ extraSubtitlesOutlineColor: null,
+ });
+
+ const dispatch = (action, options) => {
+ if (video.current && containerElement.current) {
+ try {
+ video.current.dispatch(action, {
+ ...options,
+ containerElement: containerElement.current,
+ });
+ } catch (error) {
+ console.error('Video:', error);
+ }
+ }
+ };
+
+ const load = (args, options) => {
+ dispatch({
+ type: 'command',
+ commandName: 'load',
+ commandArgs: args
+ }, options);
+ };
+
+ const unload = () => {
+ dispatch({
+ type: 'command',
+ commandName: 'unload',
+ });
+ };
+
+ const addExtraSubtitlesTracks = (tracks) => {
+ dispatch({
+ type: 'command',
+ commandName: 'addExtraSubtitlesTracks',
+ commandArgs: {
+ tracks,
+ },
+ });
+ };
+
+ const setProp = (name, value) => {
+ dispatch({ type: 'setProp', propName: name, propValue: value });
+ };
+
+ const onError = (error) => {
+ events.emit('error', error);
+ };
+
+ const onEnded = () => {
+ events.emit('ended');
+ };
+
+ const onSubtitlesTrackLoaded = (track) => {
+ events.emit('subtitlesTrackLoaded', track);
+ };
+
+ const onExtraSubtitlesTrackLoaded = (track) => {
+ events.emit('extraSubtitlesTrackLoaded', track);
+ };
+
+ const onPropChanged = (name, value) => {
+ setState((state) => ({
+ ...state,
+ [name]: value
+ }));
+ };
+
+ const onImplementationChanged = (manifest) => {
+ manifest.props.forEach((propName) => dispatch(({ type: 'observeProp', propName })));
+ setState((state) => ({
+ ...state,
+ manifest
+ }));
+
+ events.emit('implementationChanged', manifest);
+ };
+
+ React.useEffect(() => {
+ video.current = new Video();
+ video.current.on('error', onError);
+ video.current.on('ended', onEnded);
+ video.current.on('propChanged', onPropChanged);
+ video.current.on('propValue', onPropChanged);
+ video.current.on('implementationChanged', onImplementationChanged);
+ video.current.on('subtitlesTrackLoaded', onSubtitlesTrackLoaded);
+ video.current.on('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded);
+
+ return () => video.current.destroy();
+ }, []);
+
+ return {
+ events,
+ containerElement,
+ state,
+ load,
+ unload,
+ addExtraSubtitlesTracks,
+ setProp,
+ };
+};
+
+module.exports = useVideo;
diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index ace0a1f95..7422d7db7 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { Image, MainNavBars, MetaRow, MetaItem, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const useSearch = require('./useSearch');
const styles = require('./styles');
@@ -49,14 +49,27 @@ const Search = ({ queryParams }) => {
{
query === null ?
-
-
-
-
{ t('SEARCH_EXPLANATION_CONTENT') }
+
+
-
-
-
{ t('SEARCH_EXPLANATION_PEOPLE') }
+
+
+
+
{t('SEARCH_CATEGORIES')}
+
+
+
+
{t('SEARCH_PERSONS')}
+
+
+
+
{t('SEARCH_PROTOCOLS')}
+
+
+
+
{t('SEARCH_TYPES')}
+
:
@@ -77,10 +90,8 @@ const Search = ({ queryParams }) => {
);
}
@@ -89,9 +100,8 @@ const Search = ({ queryParams }) => {
);
}
@@ -100,8 +110,7 @@ const Search = ({ queryParams }) => {
);
}
@@ -118,7 +127,7 @@ Search.propTypes = {
};
const SearchFallback = ({ queryParams }) => (
-
+
);
SearchFallback.propTypes = Search.propTypes;
diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less
index aef6a1ec9..20d7e90f9 100644
--- a/src/routes/Search/styles.less
+++ b/src/routes/Search/styles.less
@@ -14,7 +14,7 @@
.search-container {
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
+ background-color: transparent;
.search-content {
width: 100%;
@@ -25,41 +25,71 @@
margin: 4rem 2rem;
}
- .search-hints-container {
+ .search-hints-wrapper {
display: flex;
- flex-direction: row;
- align-items: flex-start;
- justify-content: flex-start;
- align-content: flex-start;
- flex-wrap: wrap;
- padding: 4rem;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
- .search-hint-container {
- flex: 0 0 50%;
+ .search-hints-title-container {
display: flex;
- flex-direction: column;
- align-items: center;
justify-content: center;
- padding: 0 2rem;
- margin-bottom: 4rem;
+ align-items: center;
+ padding: 0 1rem;
- .icon {
- flex: none;
- width: 6rem;
- height: 6rem;
- margin-bottom: 2rem;
- fill: @color-surface-light5-90;
- }
-
- .label {
+ .search-hints-title {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
- font-size: 1.2rem;
+ font-size: 1.6rem;
color: @color-surface-light5-90;
text-align: center;
+ opacity: 0.4;
}
}
+
+ .search-hints-container {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: center;
+ align-content: flex-start;
+ flex-wrap: wrap;
+ padding: 4rem;
+ max-width: 50%;
+ margin: 0 auto;
+
+ .search-hint-container {
+ flex: 0 0 25%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1rem;
+ margin-bottom: 4rem;
+
+ .icon {
+ flex: none;
+ width: 4rem;
+ height: 4rem;
+ margin-bottom: 2rem;
+ color: @color-surface-light5-90;
+ opacity: 0.4;
+ }
+
+ .label {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ font-size: 1.2rem;
+ color: @color-surface-light5-90;
+ text-align: center;
+ opacity: 0.4;
+ }
+ }
+ }
}
.message-container {
@@ -135,6 +165,11 @@
@media only screen and (max-width: @medium) {
.search-container {
.search-content {
+ .search-hints-wrapper {
+ .search-hints-container {
+ max-width: 70%;
+ }
+ }
.search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
@@ -157,6 +192,11 @@
@media only screen and (max-width: @small) {
.search-container {
.search-content {
+ .search-hints-wrapper {
+ .search-hints-container {
+ max-width: 90%;
+ }
+ }
.search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
@@ -201,6 +241,14 @@
@media only screen and (max-width: @xxsmall) {
.search-container {
.search-content {
+ .search-hints-wrapper {
+ .search-hints-container {
+ max-width: 100%;
+ .search-hint-container {
+ flex: 0 0 50%;
+ }
+ }
+ }
.search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
@@ -235,11 +283,13 @@
}
}
- .search-hints-container {
- padding: 4rem 2rem;
-
- .search-hint-container {
- padding: 0 1.5rem;
+ .search-hints-wrapper {
+ margin-top: 4rem;
+ .search-hints-container {
+ padding: 4rem 2rem;
+ .search-hint-container {
+ padding: 0 1.5rem;
+ }
}
}
}
diff --git a/src/routes/Search/useSearch.js b/src/routes/Search/useSearch.js
index 98629e017..87ef24cda 100644
--- a/src/routes/Search/useSearch.js
+++ b/src/routes/Search/useSearch.js
@@ -32,14 +32,15 @@ const useSearch = (queryParams) => {
// };
// }, [queryParams.get('search')]);
const action = React.useMemo(() => {
- if (queryParams.has('search') && queryParams.get('search').length > 0) {
+ const query = queryParams.get('search') ?? queryParams.get('query');
+ if (query?.length > 0) {
return {
action: 'Load',
args: {
model: 'CatalogsWithExtra',
args: {
extra: [
- ['search', queryParams.get('search')]
+ ['search', query]
]
}
}
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index cd3c8bab1..c920e4ed5 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -4,7 +4,7 @@ const React = require('react');
const classnames = require('classnames');
const throttle = require('lodash.throttle');
const { useTranslation } = require('react-i18next');
-const Icon = require('@stremio/stremio-icons/dom');
+const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, useStreamingServer, useBinaryState, withCoreSuspender, useToast } = require('stremio/common');
@@ -20,7 +20,7 @@ const SHORTCUTS_SECTION = 'shortcuts';
const Settings = () => {
const { t } = useTranslation();
- const { core } = useServices();
+ const { core, shell } = useServices();
const { routeFocused } = useRouteFocused();
const profile = useProfile();
const [dataExport, loadDataExport] = useDataExport();
@@ -34,7 +34,10 @@ const Settings = () => {
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
audioLanguageSelect,
+ surroundSoundCheckbox,
seekTimeDurationSelect,
+ seekShortTimeDurationSelect,
+ escExitFullscreenCheckbox,
playInExternalPlayerSelect,
nextVideoPopupDurationSelect,
bingeWatchingCheckbox,
@@ -43,6 +46,8 @@ const Settings = () => {
streamingServerUrlInput
} = useProfileSettingsInputs(profile);
const {
+ streamingServerRemoteUrlInput,
+ remoteEndpointSelect,
cacheSizeSelect,
torrentProfileSelect
} = useStreamingServerSettingsInputs(streamingServer);
@@ -116,6 +121,16 @@ const Settings = () => {
}
});
}, []);
+ const onCopyRemoteUrlClick = React.useCallback(() => {
+ if (streamingServer.remoteUrl) {
+ navigator.clipboard.writeText(streamingServer.remoteUrl);
+ toast.show({
+ type: 'success',
+ title: t('SETTINGS_REMOTE_URL_COPIED'),
+ timeout: 2500,
+ });
+ }
+ }, [streamingServer.remoteUrl]);
const sectionsContainerRef = React.useRef(null);
const generalSectionRef = React.useRef(null);
const playerSectionRef = React.useRef(null);
@@ -149,7 +164,7 @@ const Settings = () => {
behavior: 'smooth'
});
}, []);
- const sectionsContainerOnScorll = React.useCallback(throttle(() => {
+ const sectionsContainerOnScroll = React.useCallback(throttle(() => {
updateSelectedSectionId();
}, 50), []);
React.useEffect(() => {
@@ -199,40 +214,38 @@ const Settings = () => {
null
}
-
+
-
{ t('SETTINGS_NAV_GENERAL') }
-
+
-
-
-
- {profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
+ profile.auth.user.avatar ?
+ `url('${profile.auth.user.avatar}')`
+ :
+ `url('${require('/images/default_avatar.png')}')`
+ }}
+ />
+
+
+
+ {profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
+
+ {
+ profile.auth !== null ?
+
+ :
+ null
+ }
- {
- profile.auth !== null ?
-
- :
- null
- }
-
{
profile.auth === null ?
@@ -244,9 +257,79 @@ const Settings = () => {
:
null
}
+
+
+
+
+
+ {
+ profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user._id === 'string' ?
+
+
+
+ :
+ null
+ }
+
+
+
+
+
+
+
+
+
+
+ {
+ profile.auth !== null && profile.auth.user !== null ?
+
+
+
+ :
+ null
+ }
+ {
+ profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user.email === 'string' ?
+
+
+
+ :
+ null
+ }
+
+
+
+
+
+
-
{ t('SETTINGS_INTERFACE_LANGUAGE') }
+
{ t('SETTINGS_UI_LANGUAGE') }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{ t('SETTINGS_NAV_PLAYER') }
+
+
+
{t('SETTINGS_SECTION_SUBTITLES')}
+
{ t('SETTINGS_SUBTITLES_LANGUAGE') }
@@ -311,6 +353,20 @@ const Settings = () => {
{...subtitlesLanguageSelect}
/>
+ {
+ shell.active ?
+
+
+
{ t('SETTINGS_FULLSCREEN_EXIT') }
+
+
+
+ :
+ null
+ }
{ t('SETTINGS_SUBTITLES_SIZE') }
@@ -347,6 +403,12 @@ const Settings = () => {
{...subtitlesOutlineColorInput}
/>
+
+
+
+
+
{t('SETTINGS_SECTION_AUDIO')}
+
{ t('SETTINGS_DEFAULT_AUDIO_TRACK') }
@@ -358,13 +420,55 @@ const Settings = () => {
-
{ t('SETTINGS_REWIND_FAST_FORWARD_DURATION') }
+
{ t('SETTINGS_SURROUND_SOUND') }
+
+
+
+
+
+
+
+
{t('SETTINGS_SECTION_CONTROLS')}
+
+
+
+
{ t('SETTINGS_SEEK_KEY') }
+
+
+
{ t('SETTINGS_SEEK_KEY_SHIFT') }
+
+
+
+
+
+
{ t('SETTINGS_PLAY_IN_BACKGROUND') }
+
+
+
+
+
+
+
+
{t('SETTINGS_SECTION_AUTO_PLAY')}
+
{ t('AUTO_PLAY') }
@@ -384,16 +488,11 @@ const Settings = () => {
{...nextVideoPopupDurationSelect}
/>
-
-
-
{ t('SETTINGS_PLAY_IN_BACKGROUND') }
-
-
+
+
+
+
+
{t('SETTINGS_SECTION_ADVANCED')}
@@ -436,8 +535,8 @@ const Settings = () => {
streamingServer.settings.type === 'Ready' ?
t('SETTINGS_SERVER_STATUS_ONLINE')
:
- streamingServer.settings.type === 'Error' ?
- `${t('SETTINGS_SERVER_STATUS_ERROR')}: (${streamingServer.settings.content})`
+ streamingServer.settings.type === 'Err' ?
+ t('SETTINGS_SERVER_STATUS_ERROR')
:
streamingServer.settings.type
}
@@ -451,10 +550,40 @@ const Settings = () => {
{streamingServerUrlInput.value}
+ {
+ streamingServerRemoteUrlInput.value !== null ?
+
+
+
{t('SETTINGS_REMOTE_URL')}
+
+
+
{streamingServerRemoteUrlInput.value}
+
+
+
+ :
+ null
+ }
+ {
+ profile.auth !== null && profile.auth.user !== null && remoteEndpointSelect !== null ?
+
+
+
{ t('SETTINGS_HTTPS_ENDPOINT') }
+
+
+
+ :
+ null
+ }
{
cacheSizeSelect !== null ?
@@ -585,6 +714,37 @@ const Settings = () => {
+
+
+
+
+
+ {process.env.VERSION}
+
+
+
+ {
+ streamingServer.settings !== null && streamingServer.settings.type === 'Ready' ?
+
+
+
+
+ {streamingServer.settings.content.serverVersion}
+
+
+
+ :
+ null
+ }
+
{
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index 0373ba656..7c9444509 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -20,7 +20,7 @@
.settings-container {
width: 100%;
height: 100%;
- background-color: @color-background-dark2;
+ background-color: transparent;
.settings-content {
width: 100%;
@@ -33,23 +33,32 @@
align-self: stretch;
display: flex;
flex-direction: column;
- width: 20rem;
- padding: 3rem;
+ width: 18rem;
+ padding: 3rem 1.5rem;
.side-menu-button {
flex: none;
align-self: stretch;
- padding: 1rem;
+ display: flex;
+ align-items: center;
+ height: 4rem;
+ border-radius: 4rem;
+ padding: 2rem;
+ margin-bottom: 0.5rem;
font-size: 1.1rem;
- color: @color-secondaryvariant1-90;
+ font-weight: 500;
+ color: var(--primary-foreground-color);
+ opacity: 0.4;
&.selected {
- background-color: @color-background;
- color: @color-surface-light5-90;
+ font-weight: 600;
+ color: var(--primary-foreground-color);
+ background-color: var(--overlay-color);
+ opacity: 1;
}
&:hover {
- background-color: @color-background-light1;
+ background-color: var(--overlay-color);
}
}
@@ -60,14 +69,15 @@
.version-info-label {
flex: 0 1 auto;
margin: 0.5rem 0;
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
+ opacity: 0.3;
}
}
.sections-container {
flex: 1;
align-self: stretch;
- padding: 0 2rem;
+ padding: 0 3rem;
overflow-y: auto;
.section-container {
@@ -77,7 +87,7 @@
overflow: visible;
&:not(:last-child) {
- border-bottom: thin solid @color-secondaryvariant1-90;
+ border-bottom: thin solid var(--overlay-color);
}
.section-title {
@@ -85,8 +95,30 @@
align-self: stretch;
font-size: 1.8rem;
line-height: 3.4rem;
- margin-bottom: 1rem;
- color: @color-surface-light5-90;
+ margin-bottom: 3rem;
+ color: var(--primary-foreground-color);
+ }
+
+ .section-category-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0 1em;
+ margin-bottom: 1.5rem;
+ line-height: 2.4rem;
+
+ .label {
+ flex: none;
+ font-size: 1.1rem;
+ color: var(--primary-foreground-color);
+ }
+
+ .icon {
+ flex: none;
+ width: 2rem;
+ height: 2rem;
+ color: var(--primary-foreground-color);
+ }
}
.option-container {
@@ -99,67 +131,73 @@
margin-bottom: 2rem;
overflow: visible;
+ &.link-container {
+ margin-bottom: 0.5rem;
+ }
+
&:last-child {
margin-bottom: 0;
}
&.user-info-option-container {
- height: 6rem;
+ gap: 1rem;
- .avatar-container {
- flex: none;
- align-self: stretch;
- width: 6rem;
- margin-right: 1rem;
- border-radius: 50%;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- background-origin: content-box;
- background-clip: content-box;
- opacity: 0.9;
- }
-
- .email-logout-container {
+ .user-info-content {
flex: 1;
- align-self: stretch;
display: flex;
- flex-direction: column;
- padding: 1rem 0;
+ flex-direction: row;
+ align-items: center;
- .email-label-container, .logout-button-container {
+ .avatar-container {
+ flex: none;
+ align-self: stretch;
+ height: 5rem;
+ width: 5rem;
+ margin-right: 1rem;
+ border: 2px solid var(--primary-accent-color);
+ border-radius: 50%;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-origin: content-box;
+ background-clip: content-box;
+ opacity: 0.9;
+ background-color: var(--primary-foreground-color);
+ }
+
+ .email-logout-container {
+ flex: none;
display: flex;
- flex-direction: row;
- align-items: center;
- }
+ flex-direction: column;
- .email-label-container {
- flex: 1 0 auto;
-
- .email-label {
- flex: 1;
- font-size: 1.1rem;
- max-height: 2.4em;
- color: @color-surface-light5-90;
+ .email-label-container, .logout-button-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
- }
- .logout-button-container {
- flex: 0 1 50%;
-
- &:hover, &:focus {
- outline: none;
-
- .logout-label {
- color: @color-surface-light5-90;
- text-decoration: underline;
+ .email-label-container {
+ .email-label {
+ flex: 1;
+ font-size: 1.1rem;
+ color: var(--primary-foreground-color);
+ opacity: 0.7;
}
}
- .logout-label {
- flex: 1;
- max-height: 1.2em;
- color: @color-surface-90;
+ .logout-button-container {
+ &:hover, &:focus {
+ outline: none;
+
+ .logout-label {
+ text-decoration: underline;
+ }
+ }
+
+ .logout-label {
+ flex: 1;
+ color: var(--primary-accent-color);
+ }
}
}
}
@@ -171,11 +209,12 @@
align-items: center;
width: 10rem;
height: 3.5rem;
- margin-left: 1rem;
- background-color: @color-accent3;
+ border-radius: 3.5rem;
+ background-color: var(--overlay-color);
&:hover {
- background-color: @color-accent3-light1;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
}
.user-panel-label {
@@ -184,7 +223,7 @@
padding: 0 0.5rem;
font-weight: 500;
text-align: center;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -200,7 +239,7 @@
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
.label {
@@ -208,7 +247,15 @@
flex-shrink: 1;
flex-basis: auto;
line-height: 1.5rem;
- color: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
+ }
+
+ &.trakt-icon {
+ .icon {
+ width: 3rem;
+ height: 3rem;
+ color: var(--color-trakt);
+ }
}
}
@@ -219,14 +266,17 @@
}
.option-input-container {
- padding: 1rem;
+ padding: 1rem 1.5rem;
&.button-container {
justify-content: center;
- background-color: @color-accent3;
+ height: 3.5rem;
+ border-radius: 3.5rem;
+ background-color: var(--overlay-color);
&:hover {
- background-color: @color-accent3-light1;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
}
.label {
@@ -246,9 +296,13 @@
}
}
- &.link-container {
+ &.link-input-container {
flex: 0 1 auto;
- padding: 1rem 0;
+ padding: 0;
+
+ .label {
+ color: var(--primary-accent-color);
+ }
&:hover {
.label {
@@ -296,14 +350,16 @@
flex: none;
width: 3rem;
height: 3rem;
+ border-radius: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
- background-color: @color-accent3;
+ background-color: var(--overlay-color);
&:hover {
- background-color: @color-accent3-light1;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
}
.icon {
@@ -311,7 +367,7 @@
width: 1rem;
height: 1rem;
margin: 0;
- fill: @color-surface-light5-90;
+ color: var(--primary-foreground-color);
}
}
}
@@ -328,21 +384,25 @@
line-height: 2.5rem;
padding: 0 1rem;
font-weight: 500;
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
border-radius: 0.25em;
- box-shadow: 0 4px 0 1px @color-background-40;
- background-color: @color-background;
+ box-shadow: 0 4px 0 1px var(--modal-background-color);
+ background-color: var(--overlay-color);
}
.label {
margin: 0 1rem;
white-space: nowrap;
- color: @color-secondaryvariant1-90;
+ color: var(--primary-foreground-color);
}
}
}
}
}
+
+ .versions-section-container {
+ display: none;
+ }
}
}
}
@@ -354,33 +414,53 @@
.server-url-input {
width: 100%;
padding: 1rem;
- color: @color-surface-dark5;
- outline: var(--focus-outline-size) solid @color-surface-light2;
+ color: var(--primary-foreground-color);
+ border-radius: var(--border-radius);
+ background-color: var(--overlay-color);
+ outline: var(--focus-outline-size) solid var(--overlay-color);
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {
- outline-color: @color-surface-light4;
+ outline-color: var(--primary-foreground-color);
}
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
}
}
.cancel-button {
background-color: transparent;
+ opacity: 0.3;
&:hover {
- background-color: @color-surface-light3;
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color) inset;
+ opacity: 1;
}
&:focus {
- outline-color: @color-background-dark5;
+ outline-color: var(--primary-foreground-color);
}
.cancel-button-label {
- color: @color-surface-dark2;
+ color: var(--primary-foreground-color);
+ }
+ }
+}
+
+@media only screen and (max-width: @xsmall) {
+ .settings-container {
+ .settings-content {
+ .side-menu-container {
+ display: none;
+ }
+
+ .sections-container {
+ .versions-section-container {
+ display: flex;
+ }
+ }
}
}
}
@@ -391,16 +471,25 @@
flex-direction: column-reverse;
.side-menu-container {
- width: 100%;
- padding: 0 1rem;
+ display: none;
+ }
- .side-menu-button {
- display: none;
+ .sections-container {
+ padding: 0 1.5rem;
+
+ .section-container {
+ .user-info-option-container {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .user-panel-container {
+ width: 100% !important;
+ }
+ }
}
- .version-info-label {
- width: 100%;
- text-align: end;
+ .versions-section-container {
+ display: flex;
}
}
}
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js
index d4783444b..939e5e7cf 100644
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@@ -3,7 +3,7 @@
const React = require('react');
const { useTranslation } = require('react-i18next');
const { useServices } = require('stremio/services');
-const { CONSTANTS, interfaceLanguages, languageNames, externalPlayerOptions } = require('stremio/common');
+const { CONSTANTS, interfaceLanguages, languageNames, platform } = require('stremio/common');
const useProfileSettingsInputs = (profile) => {
const { t } = useTranslation();
@@ -135,6 +135,37 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
+ const surroundSoundCheckbox = React.useMemo(() => ({
+ checked: profile.settings.surroundSound,
+ onClick: () => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'UpdateSettings',
+ args: {
+ ...profile.settings,
+ surroundSound: !profile.settings.surroundSound
+ }
+ }
+ });
+ }
+ }), [profile.settings]);
+ const escExitFullscreenCheckbox = React.useMemo(() => ({
+ checked: profile.settings.escExitFullscreen,
+ onClick: () => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'UpdateSettings',
+ args: {
+ ...profile.settings,
+ escExitFullscreen: !profile.settings.escExitFullscreen
+ }
+ }
+ });
+ }
+ }), [profile.settings]);
+
const seekTimeDurationSelect = React.useMemo(() => ({
options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
value: `${size}`,
@@ -157,12 +188,40 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
+ const seekShortTimeDurationSelect = React.useMemo(() => ({
+ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
+ value: `${size}`,
+ label: `${size / 1000} ${t('SECONDS')}`
+ })),
+ selected: [`${profile.settings.seekShortTimeDuration}`],
+ renderLabelText: () => {
+ return `${profile.settings.seekShortTimeDuration / 1000} ${t('SECONDS')}`;
+ },
+ onSelect: (event) => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'UpdateSettings',
+ args: {
+ ...profile.settings,
+ seekShortTimeDuration: parseInt(event.value, 10)
+ }
+ }
+ });
+ }
+ }), [profile.settings]);
const playInExternalPlayerSelect = React.useMemo(() => ({
- options: externalPlayerOptions.map((opt) => {
- opt.label = t(opt.label);
- return opt;
- }),
- selected: [`${profile.settings.playerType || 'internal'}`],
+ options: CONSTANTS.EXTERNAL_PLAYERS
+ .filter(({ platforms }) => platforms.includes(platform.name))
+ .map(({ label, value }) => ({
+ value,
+ label: t(label),
+ })),
+ selected: [profile.settings.playerType],
+ renderLabelText: () => {
+ const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
+ return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
+ },
onSelect: (event) => {
core.transport.dispatch({
action: 'Ctx',
@@ -269,7 +328,10 @@ const useProfileSettingsInputs = (profile) => {
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
audioLanguageSelect,
+ surroundSoundCheckbox,
+ escExitFullscreenCheckbox,
seekTimeDurationSelect,
+ seekShortTimeDurationSelect,
playInExternalPlayerSelect,
nextVideoPopupDurationSelect,
bingeWatchingCheckbox,
diff --git a/src/routes/Settings/useStreamingServerSettingsInputs.js b/src/routes/Settings/useStreamingServerSettingsInputs.js
index 442829dbf..0b612083c 100644
--- a/src/routes/Settings/useStreamingServerSettingsInputs.js
+++ b/src/routes/Settings/useStreamingServerSettingsInputs.js
@@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
+const { useTranslation } = require('react-i18next');
const isEqual = require('lodash.isequal');
const { useServices } = require('stremio/services');
@@ -53,7 +54,45 @@ const TORRENT_PROFILES = {
const useStreamingServerSettingsInputs = (streamingServer) => {
const { core } = useServices();
+ const { t } = useTranslation();
// TODO combine those useMemo in one
+
+ const streamingServerRemoteUrlInput = React.useMemo(() => ({
+ value: streamingServer.remoteUrl,
+ }), [streamingServer.remoteUrl]);
+
+ const remoteEndpointSelect = React.useMemo(() => {
+ if (streamingServer.settings?.type !== 'Ready' || streamingServer.networkInfo?.type !== 'Ready') {
+ return null;
+ }
+
+ return {
+ options: [
+ {
+ label: t('SETTINGS_DISABLED'),
+ value: null,
+ },
+ ...streamingServer.networkInfo.content.availableInterfaces.map((address) => ({
+ label: address,
+ value: address,
+ }))
+ ],
+ selected: [streamingServer.settings.content.remoteHttps],
+ onSelect: (event) => {
+ core.transport.dispatch({
+ action: 'StreamingServer',
+ args: {
+ action: 'UpdateSettings',
+ args: {
+ ...streamingServer.settings.content,
+ remoteHttps: event.value,
+ }
+ }
+ });
+ }
+ };
+ }, [streamingServer.settings, streamingServer.networkInfo]);
+
const cacheSizeSelect = React.useMemo(() => {
if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
return null;
@@ -75,7 +114,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
- cacheSize: JSON.parse(event.value)
+ cacheSize: JSON.parse(event.value),
}
}
});
@@ -121,14 +160,14 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
action: 'UpdateSettings',
args: {
...streamingServer.settings.content,
- ...JSON.parse(event.value)
+ ...JSON.parse(event.value),
}
}
});
}
};
}, [streamingServer.settings]);
- return { cacheSizeSelect, torrentProfileSelect };
+ return { streamingServerRemoteUrlInput, remoteEndpointSelect, cacheSizeSelect, torrentProfileSelect };
};
module.exports = useStreamingServerSettingsInputs;
diff --git a/src/services/KeyboardShortcuts/KeyboardShortcuts.js b/src/services/KeyboardShortcuts/KeyboardShortcuts.js
index 55fc852ce..773abf23f 100644
--- a/src/services/KeyboardShortcuts/KeyboardShortcuts.js
+++ b/src/services/KeyboardShortcuts/KeyboardShortcuts.js
@@ -35,12 +35,12 @@ function KeyboardShortcuts() {
}
case 'Digit4': {
event.preventDefault();
- window.location = '#/settings';
+ window.location = '#/addons';
break;
}
case 'Digit5': {
event.preventDefault();
- window.location = '#/addons';
+ window.location = '#/settings';
break;
}
case 'Backspace': {
diff --git a/src/types/models/Ctx.d.ts b/src/types/models/Ctx.d.ts
index 83fe66c84..74f770698 100644
--- a/src/types/models/Ctx.d.ts
+++ b/src/types/models/Ctx.d.ts
@@ -18,6 +18,7 @@ type Settings = {
autoFrameRateMatching: boolean,
bingeWatching: boolean,
hardwareDecoding: boolean,
+ escExitFullscreen: boolean,
interfaceLanguage: string,
nextVideoNotificationDuration: number,
playInBackground: boolean,
@@ -25,7 +26,9 @@ type Settings = {
secondaryAudioLanguage: string | null,
secondarySubtitlesLanguage: string | null,
seekTimeDuration: number,
+ seekShortTimeDuration: number,
streamingServerUrl: string,
+ remoteHttps: string | null,
streamingServerWarningDismissed: Date | null,
subtitlesBackgroundColor: string,
subtitlesBold: boolean,
@@ -35,6 +38,7 @@ type Settings = {
subtitlesOutlineColor: string,
subtitlesSize: number,
subtitlesTextColor: string,
+ surroundSound: boolean,
};
type Profile = {
@@ -42,6 +46,29 @@ type Profile = {
settings: Settings,
};
+type Notifications = {
+ uid: string,
+ created: string,
+ items: Record
,
+};
+
+type NotificationItem = {
+ metaId: string,
+ videoId: string,
+ videoReleased: string,
+}
+
+type SearchHistoryItem = {
+ query: string,
+ deepLinks: {
+ search: string,
+ },
+};
+
+type SearchHistory = SearchHistoryItem[];
+
type Ctx = {
profile: Profile,
+ notifications: Notifications,
+ searchHistory: SearchHistory,
};
\ No newline at end of file
diff --git a/src/types/models/LocalSearch.d.ts b/src/types/models/LocalSearch.d.ts
new file mode 100644
index 000000000..9862ebcd6
--- /dev/null
+++ b/src/types/models/LocalSearch.d.ts
@@ -0,0 +1,10 @@
+type LocalSearchItem = {
+ query: string,
+ deepLinks: {
+ search: string,
+ },
+};
+
+type LocalSearch = {
+ items: LocalSearchItem[],
+};
\ No newline at end of file
diff --git a/src/types/models/MetaDetails.d.ts b/src/types/models/MetaDetails.d.ts
index 4b18a3612..efa7efc33 100644
--- a/src/types/models/MetaDetails.d.ts
+++ b/src/types/models/MetaDetails.d.ts
@@ -14,6 +14,7 @@ type MetaDetails = {
addon: Addon,
content: Loadable,
} | null,
+ libraryItem: LibraryItem | null,
selected: {
metaPath: ResourceRequestPath,
streamPath: ResourceRequestPath,
diff --git a/src/types/models/StremingServer.d.ts b/src/types/models/StremingServer.d.ts
index 4f12f4a76..f44563d9b 100644
--- a/src/types/models/StremingServer.d.ts
+++ b/src/types/models/StremingServer.d.ts
@@ -93,6 +93,12 @@ type Statistics = {
swarmSize: number,
};
+type PlaybackDevice = {
+ id: string,
+ name: string,
+ type: string,
+};
+
type Selected = {
transportUrl: string,
statistics: {
@@ -102,9 +108,11 @@ type Selected = {
};
type StreamingServer = {
- baseUrl: Loadable | null,
+ baseUrl: string | null,
+ remoteUrl: string | null,
selected: Selected | null,
settings: Loadable | null,
torrent: [string, Loadable] | null,
statistics: Loadable | null,
+ playbackDevices: Loadable | null,
};
\ No newline at end of file
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index 258e48098..18c769a07 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -54,7 +54,9 @@ type BehaviorHints = {
type PosterShape = 'square' | 'landscape' | 'poster' | null;
type Catalog = {
- title?: string,
+ label?: string,
+ name?: string,
+ type?: string,
content: T,
installed?: boolean,
deepLinks?: D,
diff --git a/webpack.config.js b/webpack.config.js
index b0430f9e5..3c98f683c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,7 +9,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
-const colors = require('@stremio/stremio-colors');
+const WebpackPwaManifest = require('webpack-pwa-manifest');
const pachageJson = require('./package.json');
const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
@@ -125,7 +125,7 @@ module.exports = (env, argv) => ({
}
},
{
- test: /\.(png|jpe?g)$/,
+ test: /\.(png|jpe?g|svg)$/,
exclude: /node_modules/,
type: 'asset/resource',
generator: {
@@ -152,7 +152,7 @@ module.exports = (env, argv) => ({
host: '0.0.0.0',
static: false,
hot: false,
- https: true,
+ server: 'https',
liveReload: false
},
optimization: {
@@ -199,7 +199,7 @@ module.exports = (env, argv) => ({
patterns: [
{ from: 'favicons', to: `${COMMIT_HASH}/favicons` },
{ from: 'images', to: `${COMMIT_HASH}/images` },
- { from: 'manifest.json', to: `${COMMIT_HASH}/manifest.json` },
+ { from: 'screenshots/*.webp', to: `${COMMIT_HASH}` },
]
}),
new MiniCssExtractPlugin({
@@ -209,10 +209,59 @@ module.exports = (env, argv) => ({
template: './src/index.html',
inject: false,
scriptLoading: 'blocking',
- themeColor: colors.background,
faviconsPath: `${COMMIT_HASH}/favicons`,
imagesPath: `${COMMIT_HASH}/images`,
- manifestPath: `${COMMIT_HASH}/manifest.json`,
- })
+ }),
+ new WebpackPwaManifest({
+ name: 'Stremio Web',
+ short_name: 'Stremio',
+ description: 'Freedom To Stream',
+ background_color: '#161523',
+ theme_color: '#2a2843',
+ orientation: 'any',
+ display: 'standalone',
+ display_override: ['standalone'],
+ scope: './',
+ start_url: './',
+ publicPath: './',
+ icons: [
+ {
+ src: 'images/icon.png',
+ destination: `${COMMIT_HASH}/images`,
+ sizes: [196, 512],
+ purpose: 'any',
+ ios: true,
+ },
+ {
+ src: 'images/maskable_icon.png',
+ destination: `${COMMIT_HASH}/images`,
+ sizes: [196, 512],
+ purpose: 'maskable',
+ },
+ {
+ src: 'favicons/favicon.ico',
+ destination: `${COMMIT_HASH}/favicons`,
+ sizes: [256],
+ }
+ ],
+ screenshots : [
+ {
+ src: `${COMMIT_HASH}/screenshots/board_wide.webp`,
+ sizes: '1440x900',
+ type: 'image/webp',
+ form_factor: 'wide',
+ label: 'Homescreen of Stremio'
+ },
+ {
+ src: `${COMMIT_HASH}/screenshots/board_narrow.webp`,
+ sizes: '414x896',
+ type: 'image/webp',
+ form_factor: 'narrow',
+ label: 'Homescreen of Stremio'
+ }
+ ],
+ fingerprints: false,
+ ios: true
+ }),
].filter(Boolean)
});