- {released.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}
+ {released.toLocaleString(profile.settings.interfaceLanguage, { year: 'numeric', month: 'short', day: 'numeric' })}
:
scheduled ?
-
- TBA
+
+ {t('TBA')}
:
null
@@ -121,7 +122,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
{
upcoming && !watched ?
-
Upcoming
+
{t('UPCOMING')}
:
null
@@ -130,7 +131,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
watched ?
-
Watched
+
{t('CTX_WATCHED')}
:
null
@@ -145,10 +146,10 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
const renderMenu = React.useMemo(() => function renderMenu() {
return (
-
+
{t('CTX_WATCH')}
-
+
{watched ? t('CTX_MARK_NON_WATCHED') : t('CTX_MARK_WATCHED')}
diff --git a/src/modules.d.ts b/src/modules.d.ts
index bf968c8d4..3d5516efd 100644
--- a/src/modules.d.ts
+++ b/src/modules.d.ts
@@ -3,4 +3,6 @@ declare module '*.less' {
export = resource;
}
+declare module 'stremio-router';
declare module 'stremio/components/NavBar';
+declare module 'stremio/components/ModalDialog';
diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index e2182243a..5a2f29631 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -89,7 +89,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
{
typeof version === 'string' && version.length > 0 ?
-
v.{version}
+
{t('ADDON_VERSION_SHORT', {version})}
:
null
}
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 91bcbd27f..da9544d51 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -6,7 +6,7 @@ const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { usePlatform, useBinaryState, withCoreSuspender } = require('stremio/common');
-const { AddonDetailsModal, Button, Image, MainNavBars, Multiselect, ModalDialog, SearchBar, SharePrompt, TextInput } = require('stremio/components');
+const { AddonDetailsModal, Button, Image, MainNavBars, ModalDialog, SearchBar, SharePrompt, TextInput, MultiselectMenu } = require('stremio/components');
const { useServices } = require('stremio/services');
const Addon = require('./Addon');
const useInstalledAddons = require('./useInstalledAddons');
@@ -107,7 +107,7 @@ const Addons = ({ urlParams, queryParams }) => {
{selectInputs.map((selectInput, index) => (
- {
value={search}
onChange={searchInputOnChange}
/>
-
+
@@ -132,12 +132,12 @@ const Addons = ({ urlParams, queryParams }) => {
installedAddons.selected !== null ?
installedAddons.selectable.types.length === 0 ?
- No addons ware installed!
+ {t('NO_ADDONS')}
:
installedAddons.catalog.length === 0 ?
- No addons ware installed for that type!
+ {t('NO_ADDONS_FOR_TYPE')}
:
@@ -216,9 +216,9 @@ const Addons = ({ urlParams, queryParams }) => {
{
filtersModalOpen ?
-
+
{selectInputs.map((selectInput, index) => (
- {
{typeof sharedAddon.manifest.name === 'string' && sharedAddon.manifest.name.length > 0 ? sharedAddon.manifest.name : sharedAddon.manifest.id}
{
typeof sharedAddon.manifest.version === 'string' && sharedAddon.manifest.version.length > 0 ?
- v. {sharedAddon.manifest.version}
+ {t('ADDON_VERSION_SHORT', { version: sharedAddon.manifest.version })}
:
null
}
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 6a057d292..565c0b262 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -90,6 +90,7 @@
}
.select-input-container {
+ background-color: var(--overlay-color);
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js
index af0bb35fc..003da745d 100644
--- a/src/routes/Addons/useSelectableInputs.js
+++ b/src/routes/Addons/useSelectableInputs.js
@@ -4,33 +4,31 @@ const React = require('react');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
+ const selectedCatalog = remoteAddons.selectable.catalogs.concat(installedAddons.selectable.catalogs).find(({ selected }) => selected);
const catalogSelect = {
- title: t.string('SELECT_CATALOG'),
options: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
.map(({ name, deepLinks }) => ({
value: deepLinks.addons,
- label: t.stringWithPrefix(name, 'ADDON_'),
- title: t.stringWithPrefix(name, 'ADDON_'),
+ label: t.stringWithPrefix(name.toUpperCase(), 'ADDON_'),
+ title: t.stringWithPrefix(name.toUpperCase(), 'ADDON_'),
})),
- selected: remoteAddons.selectable.catalogs
- .concat(installedAddons.selectable.catalogs)
- .filter(({ selected }) => selected)
- .map(({ deepLinks }) => deepLinks.addons),
- renderLabelText: remoteAddons.selected !== null ?
+ value: selectedCatalog ? selectedCatalog.deepLinks.addons : undefined,
+ title: remoteAddons.selected !== null ?
() => {
const selectableCatalog = remoteAddons.selectable.catalogs
.find(({ id }) => id === remoteAddons.selected.request.path.id);
return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
}
- :
- null,
- onSelect: (event) => {
- window.location = event.value;
+ : null,
+ onSelect: (value) => {
+ window.location = value;
}
};
+ const selectedType = installedAddons.selected !== null
+ ? installedAddons.selectable.types.find(({ selected }) => selected)
+ : remoteAddons.selectable.types.find(({ selected }) => selected);
const typeSelect = {
- title: t.string('SELECT_TYPE'),
options: installedAddons.selected !== null ?
installedAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
@@ -41,15 +39,8 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
value: deepLinks.addons,
label: t.stringWithPrefix(type, 'TYPE_')
})),
- selected: installedAddons.selected !== null ?
- installedAddons.selectable.types
- .filter(({ selected }) => selected)
- .map(({ deepLinks }) => deepLinks.addons)
- :
- remoteAddons.selectable.types
- .filter(({ selected }) => selected)
- .map(({ deepLinks }) => deepLinks.addons),
- renderLabelText: () => {
+ value: selectedType ? selectedType.deepLinks.addons : undefined,
+ title: () => {
return installedAddons.selected !== null ?
installedAddons.selected.request.type === null ?
t.string('TYPE_ALL')
@@ -61,8 +52,8 @@ const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
:
typeSelect.title;
},
- onSelect: (event) => {
- window.location = event.value;
+ onSelect: (value) => {
+ window.location = value;
}
};
return [catalogSelect, typeSelect];
diff --git a/src/routes/Calendar/Details/Details.tsx b/src/routes/Calendar/Details/Details.tsx
index cce550ee9..a03708572 100644
--- a/src/routes/Calendar/Details/Details.tsx
+++ b/src/routes/Calendar/Details/Details.tsx
@@ -1,6 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
import Icon from '@stremio/stremio-icons/react';
import { Button } from 'stremio/components';
import styles from './Details.less';
@@ -11,6 +12,7 @@ type Props = {
};
const Details = ({ selected, items }: Props) => {
+ const { t } = useTranslation();
const videos = useMemo(() => {
return items.find(({ date }) => date.day === selected?.day)?.items ?? [];
}, [selected, items]);
@@ -33,7 +35,7 @@ const Details = ({ selected, items }: Props) => {
{
!videos.length ?
- No new episodes for this day
+ {t('CALENDAR_NO_NEW_EPISODES')}
:
null
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index edbb26550..1fc16c706 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -1,12 +1,13 @@
// 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 { useServices } = require('stremio/services');
const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
-const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog } = require('stremio/components');
+const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components');
const useDiscover = require('./useDiscover');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@@ -14,13 +15,17 @@ const styles = require('./styles');
const SCROLL_TO_BOTTOM_THRESHOLD = 400;
const Discover = ({ urlParams, queryParams }) => {
+ const { t } = useTranslation();
const { core } = useServices();
const [discover, loadNextPage] = useDiscover(urlParams, queryParams);
const [selectInputs, hasNextPage] = useSelectableInputs(discover);
const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0);
+
const metasContainerRef = React.useRef();
+ const metaPreviewRef = React.useRef();
+
React.useEffect(() => {
if (discover.catalog?.content.type === 'Loading') {
metasContainerRef.current.scrollTop = 0;
@@ -75,7 +80,8 @@ const Discover = ({ urlParams, queryParams }) => {
}
}, []);
const metaItemOnClick = React.useCallback((event) => {
- if (event.currentTarget.dataset.index !== selectedMetaItemIndex.toString()) {
+ const visible = window.getComputedStyle(metaPreviewRef.current).display !== 'none';
+ if (event.currentTarget.dataset.index !== selectedMetaItemIndex.toString() && visible) {
event.preventDefault();
event.currentTarget.focus();
}
@@ -96,19 +102,18 @@ const Discover = ({ urlParams, queryParams }) => {
- {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-
(
+
-
+
@@ -116,9 +121,9 @@ const Discover = ({ urlParams, queryParams }) => {
{
discover.catalog !== null && !discover.catalog.installed ?
-
Addon is not installed. Install now?
-
- Install
+ {t('ERR_ADDON_NOT_INSTALLED')}
+
+ {t('ADDON_INSTALL')}
-
No catalog selected!
+
{t('NO_CATALOG_SELECTED')}
:
@@ -175,6 +180,7 @@ const Discover = ({ urlParams, queryParams }) => {
{
{
inputsModalOpen ?
-
- {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-
+ {selectInputs.map(({ title, options, value, onSelect }, index) => (
+
- Freedom to Stream
+ {t('WEBSITE_SLOGAN_NEW_NEW')}
- All the Video Content You Enjoy in One Place
+ {t('WEBSITE_SLOGAN_ALL')}
@@ -311,7 +311,7 @@ const Intro = ({ queryParams }) => {
ref={emailRef}
className={styles['credentials-text-input']}
type={'email'}
- placeholder={'Email'}
+ placeholder={t('EMAIL')}
value={state.email}
onChange={emailOnChange}
onSubmit={emailOnSubmit}
@@ -320,7 +320,7 @@ const Intro = ({ queryParams }) => {
ref={passwordRef}
className={styles['credentials-text-input']}
type={'password'}
- placeholder={'Password'}
+ placeholder={t('PASSWORD')}
value={state.password}
onChange={passwordOnChange}
onSubmit={passwordOnSubmit}
@@ -332,37 +332,37 @@ const Intro = ({ queryParams }) => {
ref={confirmPasswordRef}
className={styles['credentials-text-input']}
type={'password'}
- placeholder={'Confirm Password'}
+ placeholder={t('PASSWORD_CONFIRM')}
value={state.confirmPassword}
onChange={confirmPasswordOnChange}
onSubmit={confirmPasswordOnSubmit}
/>
:
- Forgot password?
+ {t('FORGOT_PASSWORD')}
}
{
@@ -372,22 +372,22 @@ const Intro = ({ queryParams }) => {
null
}
- {state.form === SIGNUP_FORM ? 'Sign up' : 'Log in'}
+ {state.form === SIGNUP_FORM ? t('SIGN_UP') : t('LOG_IN')}
Continue with Facebook
+ {t('FB_LOGIN')}
Continue with Apple
+ {t('APPLE_LOGIN')}
{
state.form === SIGNUP_FORM ?
- LOG IN
+ {t('LOG_IN')}
:
null
@@ -395,7 +395,7 @@ const Intro = ({ queryParams }) => {
{
state.form === LOGIN_FORM ?
- SIGN UP WITH EMAIL
+ {t('SIGN_UP_EMAIL')}
:
null
@@ -403,7 +403,7 @@ const Intro = ({ queryParams }) => {
{
state.form === SIGNUP_FORM ?
- GUEST LOGIN
+ {t('GUEST_LOGIN')}
:
null
@@ -421,7 +421,7 @@ const Intro = ({ queryParams }) => {
-
Authenticating...
+
{t('AUTHENTICATING')}
{t('BUTTON_CANCEL')}
diff --git a/src/routes/Intro/PasswordResetModal/PasswordResetModal.js b/src/routes/Intro/PasswordResetModal/PasswordResetModal.js
index 6f295fdd6..8c69c1489 100644
--- a/src/routes/Intro/PasswordResetModal/PasswordResetModal.js
+++ b/src/routes/Intro/PasswordResetModal/PasswordResetModal.js
@@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
+const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types');
const { useRouteFocused } = require('stremio-router');
const { usePlatform } = require('stremio/common');
@@ -9,6 +10,7 @@ const CredentialsTextInput = require('../CredentialsTextInput');
const styles = require('./styles');
const PasswordResetModal = ({ email, onCloseRequest }) => {
+ const { t } = useTranslation();
const routeFocused = useRouteFocused();
const platform = usePlatform();
const [error, setError] = React.useState('');
@@ -23,13 +25,13 @@ const PasswordResetModal = ({ email, onCloseRequest }) => {
return [
{
className: styles['cancel-button'],
- label: 'Cancel',
+ label: t('BUTTON_CANCEL'),
props: {
onClick: onCloseRequest
}
},
{
- label: 'Send',
+ label: t('SEND'),
props: {
onClick: goToPasswordReset
}
@@ -45,7 +47,7 @@ const PasswordResetModal = ({ email, onCloseRequest }) => {
}
}, [routeFocused]);
return (
-
+
{
+ const { t } = useTranslation();
const profile = useProfile();
const notifications = useNotifications();
const [library, loadNextPage] = useLibrary(model, urlParams, queryParams);
@@ -64,17 +66,17 @@ const Library = ({ model, urlParams, queryParams }) => {
}
}, [profile.auth, library.selected]);
React.useEffect(() => {
- if (!library.selected?.type && typeSelect.selected) {
- window.location = typeSelect.selected[0];
+ if (!library.selected?.type && typeSelect.value) {
+ window.location = typeSelect.value;
}
- }, [typeSelect.selected, library.selected]);
+ }, [typeSelect.value, library.selected]);
return (
{
profile.auth !== null ?
-
{
@@ -86,7 +88,7 @@ const Library = ({ model, urlParams, queryParams }) => {
src={require('/images/empty.png')}
alt={' '}
/>
-
{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!
+
{model === 'library' ? t('LIBRARY_NOT_LOADED') : t('BOARD_CONTINUE_WATCHING_NOT_LOADED')}
:
@@ -97,7 +99,7 @@ const Library = ({ model, urlParams, queryParams }) => {
src={require('/images/empty.png')}
alt={' '}
/>
- Empty {model === 'library' ? 'Library' : 'Continue Watching'}
+ {model === 'library' ? t('LIBRARY_EMPTY') : t('BOARD_CONTINUE_WATCHING_EMPTY')}
:
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 76a16940e..44c0c8851 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -42,6 +42,7 @@
flex-shrink: 1;
flex-basis: 15rem;
height: 2.75rem;
+ background-color: var(--overlay-color);
&:not(:last-child) {
margin-right: 1.5rem;
diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js
index d173d663a..84816b646 100644
--- a/src/routes/Library/useSelectableInputs.js
+++ b/src/routes/Library/useSelectableInputs.js
@@ -2,22 +2,17 @@
const React = require('react');
const { useTranslate } = require('stremio/common');
-
const mapSelectableInputs = (library, t) => {
- const selectedType = library.selectable.types
- .filter(({ selected }) => selected).map(({ deepLinks }) => deepLinks.library);
+ const selectedType = library.selectable.types.find(({ selected }) => selected) || library.selectable.types.find(({ type }) => type === null);
const typeSelect = {
- title: t.string('SELECT_TYPE'),
options: library.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.library,
label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
})),
- selected: selectedType.length
- ? selectedType
- : [library.selectable.types[0]].map(({ deepLinks }) => deepLinks.library),
- onSelect: (event) => {
- window.location = event.value;
+ value: selectedType?.deepLinks.library,
+ onSelect: (value) => {
+ window.location = value;
}
};
const sortChips = {
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 8a50b59c1..da79df285 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -1,6 +1,7 @@
// 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 { useServices } = require('stremio/services');
@@ -14,6 +15,7 @@ const useMetaExtensionTabs = require('./useMetaExtensionTabs');
const styles = require('./styles');
const MetaDetails = ({ urlParams, queryParams }) => {
+ const { t } = useTranslation();
const { core } = useServices();
const metaDetails = useMetaDetails(urlParams);
const [season, setSeason] = useSeason(urlParams, queryParams);
@@ -129,20 +131,20 @@ const MetaDetails = ({ urlParams, queryParams }) => {
-
No meta was selected!
+
{t('ERR_NO_META_SELECTED')}
:
metaDetails.metaItem === null ?
-
No addons were requested for this meta!
+
{t('ERR_NO_ADDONS_FOR_META')}
:
metaDetails.metaItem.content.type === 'Err' ?
-
No metadata was found!
+
{t('ERR_NO_META_FOUND')}
:
metaDetails.metaItem.content.type === 'Loading' ?
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 82ba57a51..eebc0c3cf 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, Multiselect } = require('stremio/components');
+const { Button, Image, MultiselectMenu } = require('stremio/components');
const { useServices } = require('stremio/services');
const Stream = require('./Stream');
const styles = require('./styles');
@@ -21,9 +21,9 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
const profile = useProfile();
const streamsContainerRef = React.useRef(null);
const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
- const onAddonSelected = React.useCallback((event) => {
+ const onAddonSelected = React.useCallback((value) => {
streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
- setSelectedAddon(event.value);
+ setSelectedAddon(value);
}, [platform]);
const showInstallAddonsButton = React.useMemo(() => {
return !profile || profile.auth === null || profile.auth?.user?.isNewUser === true && !video?.upcoming;
@@ -77,7 +77,6 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
}, [streamsByAddon, selectedAddon]);
const selectableOptions = React.useMemo(() => {
return {
- title: 'Select Addon',
options: [
{
value: ALL_ADDONS_KEY,
@@ -90,7 +89,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
title: streamsByAddon[transportUrl].addon.manifest.name,
}))
],
- selected: [selectedAddon],
+ value: selectedAddon,
onSelect: onAddonSelected
};
}, [streamsByAddon, selectedAddon]);
@@ -117,7 +116,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
}
{
Object.keys(streamsByAddon).length > 1 ?
-
@@ -134,7 +133,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
: null
}
-
No addons were requested for streams!
+
{t('ERR_NO_ADDONS_FOR_STREAMS')}
-
+
Prev
+ {t('BUTTON_PREV')}
0 ? `${t('SEASON')} ${season}` : t('SPECIAL')}
- selectedOption={selectedSeason}
+ title={season > 0 ? t('SEASON_NUMBER', { season }) : t('SPECIAL')}
+ value={selectedSeason}
onSelect={seasonOnSelect}
/>
-
- Next
+
+ {t('BUTTON_NEXT')}
-
Prev
+
{t('SEASON_PREV')}
-
Season 1
+
{t('SEASON_NUMBER', { season: 1 })}
-
Next
+
{t('SEASON_NEXT')}
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index a47b2f517..88d53d427 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -5,6 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { t } = require('i18next');
const { useServices } = require('stremio/services');
+const { useProfile } = require('stremio/common');
const { Image, SearchBar, Toggle, Video } = require('stremio/components');
const SeasonsBar = require('./SeasonsBar');
const { default: EpisodePicker } = require('../EpisodePicker');
@@ -12,6 +13,7 @@ const styles = require('./styles');
const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
const { core } = useServices();
+ const profile = useProfile();
const showNotificationsToggle = React.useMemo(() => {
return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
}, [metaItem]);
@@ -122,7 +124,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
-
No videos found for this meta!
+
{t('ERR_NO_VIDEOS_FOR_META')}
:
@@ -158,7 +160,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
return search.length === 0 ||
(
(typeof video.title === 'string' && video.title.toLowerCase().includes(search.toLowerCase())) ||
- (!isNaN(video.released.getTime()) && video.released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' }).toLowerCase().includes(search.toLowerCase()))
+ (!isNaN(video.released.getTime()) && video.released.toLocaleString(profile.settings.interfaceLanguage, { year: '2-digit', month: 'short', day: 'numeric' }).toLowerCase().includes(search.toLowerCase()))
);
})
.map((video, index) => (
diff --git a/src/routes/NotFound/NotFound.js b/src/routes/NotFound/NotFound.js
index 323dfd866..d984496bc 100644
--- a/src/routes/NotFound/NotFound.js
+++ b/src/routes/NotFound/NotFound.js
@@ -1,15 +1,17 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
+const { useTranslation } = require('react-i18next');
const { HorizontalNavBar, Image } = require('stremio/components');
const styles = require('./styles');
const NotFound = () => {
+ const { t } = useTranslation();
return (
{
src={require('/images/empty.png')}
alt={' '}
/>
- Page not found!
+ {t('PAGE_NOT_FOUND')}
);
diff --git a/src/routes/Player/Indicator/Indicator.less b/src/routes/Player/Indicator/Indicator.less
new file mode 100644
index 000000000..699c53d23
--- /dev/null
+++ b/src/routes/Player/Indicator/Indicator.less
@@ -0,0 +1,23 @@
+.indicator-container {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 4rem;
+ user-select: none;
+
+ .indicator {
+ flex: none;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ padding: 0 2rem;
+ border-radius: 4rem;
+ text-align: center;
+ font-weight: bold;
+ color: var(--primary-foreground-color);
+ background-color: var(--modal-background-color);
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Player/Indicator/Indicator.tsx b/src/routes/Player/Indicator/Indicator.tsx
new file mode 100644
index 000000000..cc0ef4ccf
--- /dev/null
+++ b/src/routes/Player/Indicator/Indicator.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { t } from 'i18next';
+import { Transition } from 'stremio/components';
+import { useBinaryState } from 'stremio/common';
+import styles from './Indicator.less';
+
+type Property = {
+ label: string,
+ format: (value: number) => string,
+};
+
+const PROPERTIES: Record = {
+ 'extraSubtitlesDelay': {
+ label: 'SUBTITLES_DELAY',
+ format: (value) => `${(value / 1000).toFixed(2)}s`,
+ },
+};
+
+type VideoState = Record;
+
+type Props = {
+ className: string,
+ videoState: VideoState,
+};
+
+const Indicator = ({ className, videoState }: Props) => {
+ const timeout = useRef(null);
+ const prevVideoState = useRef(videoState);
+
+ const [shown, show, hide] = useBinaryState(false);
+ const [current, setCurrent] = useState(null);
+
+ const label = useMemo(() => {
+ const property = current && PROPERTIES[current];
+ return property && t(property.label);
+ }, [current]);
+
+ const value = useMemo(() => {
+ const property = current && PROPERTIES[current];
+ const value = current && videoState[current];
+ return property && value && property.format(value);
+ }, [current, videoState]);
+
+ useEffect(() => {
+ for (const property of Object.keys(PROPERTIES)) {
+ const prev = prevVideoState.current[property];
+ const next = videoState[property];
+
+ if (next && next !== prev) {
+ setCurrent(property);
+ show();
+
+ timeout.current && clearTimeout(timeout.current);
+ timeout.current = setTimeout(hide, 1000);
+ }
+ }
+
+ prevVideoState.current = videoState;
+ }, [videoState]);
+
+ return (
+
+
+
+ );
+};
+
+export default Indicator;
diff --git a/src/routes/Player/NextVideoPopup/NextVideoPopup.js b/src/routes/Player/NextVideoPopup/NextVideoPopup.js
index a02d2377e..1f6bcbbe6 100644
--- a/src/routes/Player/NextVideoPopup/NextVideoPopup.js
+++ b/src/routes/Player/NextVideoPopup/NextVideoPopup.js
@@ -7,8 +7,10 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
const { CONSTANTS, useProfile } = require('stremio/common');
const { Button, Image } = require('stremio/components');
const styles = require('./styles');
+const { useTranslation } = require('react-i18next');
const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideoRequested }) => {
+ const { t } = useTranslation();
const profile = useProfile();
const blurPosterImage = profile.settings.hideSpoilers && metaItem.type === 'series';
const watchNowButtonRef = React.useRef(null);
@@ -65,7 +67,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
{
typeof metaItem?.name === 'string' ?
- Next on { metaItem.name }
+ {t('PLAYER_NEXT_VIDEO_TITLE_SHORT')} { metaItem.name }
:
null
@@ -82,11 +84,11 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
Dismiss
+ {t('PLAYER_NEXT_VIDEO_BUTTON_DISMISS')}
Watch Now
+ {t('PLAYER_NEXT_VIDEO_BUTTON_WATCH')}
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 48218d126..2d38796e5 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -27,6 +27,7 @@ const useStatistics = require('./useStatistics');
const useVideo = require('./useVideo');
const styles = require('./styles');
const Video = require('./Video');
+const { default: Indicator } = require('./Indicator/Indicator');
const Player = ({ urlParams, queryParams }) => {
const { t } = useTranslation();
@@ -221,6 +222,16 @@ const Player = ({ urlParams, queryParams }) => {
video.setProp('extraSubtitlesDelay', delay);
}, []);
+ const onIncreaseSubtitlesDelay = React.useCallback(() => {
+ const delay = video.state.extraSubtitlesDelay + 250;
+ onExtraSubtitlesDelayChanged(delay);
+ }, [video.state.extraSubtitlesDelay, onExtraSubtitlesDelayChanged]);
+
+ const onDecreaseSubtitlesDelay = React.useCallback(() => {
+ const delay = video.state.extraSubtitlesDelay - 250;
+ onExtraSubtitlesDelayChanged(delay);
+ }, [video.state.extraSubtitlesDelay, onExtraSubtitlesDelayChanged]);
+
const onSubtitlesSizeChanged = React.useCallback((size) => {
updateSettings({ subtitlesSize: size });
}, [updateSettings]);
@@ -413,6 +424,13 @@ const Player = ({ urlParams, queryParams }) => {
if (!defaultSubtitlesSelected.current) {
const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
+ if (settings.subtitlesLanguage === null) {
+ onSubtitlesTrackSelected(null);
+ onExtraSubtitlesTrackSelected(null);
+ defaultSubtitlesSelected.current = true;
+ return;
+ }
+
const subtitlesTrack = findTrackByLang(video.state.subtitlesTracks, settings.subtitlesLanguage);
const extraSubtitlesTrack = findTrackByLang(video.state.extraSubtitlesTracks, settings.subtitlesLanguage);
@@ -596,6 +614,14 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
+ case 'KeyG': {
+ onDecreaseSubtitlesDelay();
+ break;
+ }
+ case 'KeyH': {
+ onIncreaseSubtitlesDelay();
+ break;
+ }
case 'Escape': {
closeMenus();
!settings.escExitFullscreen && window.history.back();
@@ -629,7 +655,29 @@ const Player = ({ urlParams, queryParams }) => {
window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('wheel', onWheel);
};
- }, [player.metaItem, player.selected, streamingServer.statistics, settings.seekTimeDuration, settings.seekShortTimeDuration, settings.escExitFullscreen, routeFocused, menusOpen, nextVideoPopupOpen, video.state.paused, video.state.time, video.state.volume, video.state.audioTracks, video.state.subtitlesTracks, video.state.extraSubtitlesTracks, video.state.playbackSpeed, toggleSubtitlesMenu, toggleStatisticsMenu, toggleSideDrawer]);
+ }, [
+ player.metaItem,
+ player.selected,
+ streamingServer.statistics,
+ settings.seekTimeDuration,
+ settings.seekShortTimeDuration,
+ settings.escExitFullscreen,
+ routeFocused,
+ menusOpen,
+ nextVideoPopupOpen,
+ video.state.paused,
+ video.state.time,
+ video.state.volume,
+ video.state.audioTracks,
+ video.state.subtitlesTracks,
+ video.state.extraSubtitlesTracks,
+ video.state.playbackSpeed,
+ toggleSubtitlesMenu,
+ toggleStatisticsMenu,
+ toggleSideDrawer,
+ onDecreaseSubtitlesDelay,
+ onIncreaseSubtitlesDelay,
+ ]);
React.useEffect(() => {
video.events.on('error', onError);
@@ -769,6 +817,10 @@ const Player = ({ urlParams, queryParams }) => {
onMouseOver={onBarMouseMove}
onTouchEnd={onContainerMouseLeave}
/>
+
{
nextVideoPopupOpen ?
{
+ const { t } = useTranslation();
return (
- Statistics
+ {t('PLAYER_STATISTICS')}
- Peers
+ {t('PLAYER_PEERS')}
{ peers }
@@ -22,15 +24,15 @@ const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
- Speed
+ {t('PLAYER_SPEED')}
- { speed } MB/s
+ {`${speed} ${t('MB_S')}`}
- Completed
+ {t('PLAYER_COMPLETED')}
{ Math.min(completed, 100) } %
@@ -39,7 +41,7 @@ const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
- Info Hash
+ {t('PLAYER_INFO_HASH')}
{ infoHash }
diff --git a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
index a57754793..ea7948b83 100644
--- a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
+++ b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
@@ -1,6 +1,7 @@
// 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');
@@ -8,6 +9,7 @@ const { Button } = require('stremio/components');
const styles = require('./styles');
const DiscreteSelectInput = ({ className, value, label, disabled, dataset, onChange }) => {
+ const { t } = useTranslation();
const buttonOnClick = React.useCallback((event) => {
if (typeof onChange === 'function') {
onChange({
@@ -22,7 +24,7 @@ const DiscreteSelectInput = ({ className, value, label, disabled, dataset, onCha
return (
{label}
-
+
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 13ccc46cb..4894791f0 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -107,6 +107,13 @@ html:not(.active-slider-within) {
}
}
+ &.indicator-layer {
+ top: initial;
+ left: 0;
+ right: 0;
+ bottom: 10rem;
+ }
+
&.menu-layer {
top: initial;
left: initial;
diff --git a/src/routes/Settings/General/General.less b/src/routes/Settings/General/General.less
new file mode 100644
index 000000000..8c253dcff
--- /dev/null
+++ b/src/routes/Settings/General/General.less
@@ -0,0 +1,11 @@
+:import('~stremio/routes/Settings/components/Option/Option.less') {
+ option-icon: icon;
+}
+
+.trakt-container {
+ margin-top: 2rem;
+
+ .option-icon {
+ color: var(--color-trakt) !important;
+ }
+}
diff --git a/src/routes/Settings/General/General.tsx b/src/routes/Settings/General/General.tsx
new file mode 100644
index 000000000..8f5496dbd
--- /dev/null
+++ b/src/routes/Settings/General/General.tsx
@@ -0,0 +1,182 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, MultiselectMenu, Toggle } from 'stremio/components';
+import { useServices } from 'stremio/services';
+import { usePlatform, useToast } from 'stremio/common';
+import { Section, Option, Link } from '../components';
+import User from './User';
+import useDataExport from './useDataExport';
+import styles from './General.less';
+import useGeneralOptions from './useGeneralOptions';
+
+type Props = {
+ profile: Profile,
+};
+
+const General = forwardRef
(({ profile }: Props, ref) => {
+ const { t } = useTranslation();
+ const { core, shell } = useServices();
+ const platform = usePlatform();
+ const toast = useToast();
+ const [dataExport, loadDataExport] = useDataExport();
+
+ const {
+ interfaceLanguageSelect,
+ quitOnCloseToggle,
+ escExitFullscreenToggle,
+ hideSpoilersToggle,
+ } = useGeneralOptions(profile);
+
+ const [traktAuthStarted, setTraktAuthStarted] = useState(false);
+
+ const isTraktAuthenticated = useMemo(() => {
+ const trakt = profile?.auth?.user?.trakt;
+ return trakt && (Date.now() / 1000) < (trakt.created_at + trakt.expires_in);
+ }, [profile.auth]);
+
+ const onExportData = useCallback(() => {
+ loadDataExport();
+ }, []);
+
+ const onCalendarSubscribe = useCallback(() => {
+ if (!profile.auth) return;
+
+ const protocol = platform.name === 'ios' ? 'webcal' : 'https';
+ const url = `${protocol}://www.strem.io/calendar/${profile.auth.user._id}.ics`;
+ platform.openExternal(url);
+
+ toast.show({
+ type: 'success',
+ title: platform.name === 'ios' ?
+ t('SETTINGS_SUBSCRIBE_CALENDAR_IOS_TOAST') :
+ t('SETTINGS_SUBSCRIBE_CALENDAR_TOAST'),
+ timeout: 25000
+ });
+ // Stremio 4 emits not documented event subscribeCalendar
+ }, [profile.auth]);
+
+ const onToggleTrakt = useCallback(() => {
+ if (!isTraktAuthenticated && profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user._id === 'string') {
+ platform.openExternal(`https://www.strem.io/trakt/auth/${profile.auth.user._id}`);
+ setTraktAuthStarted(true);
+ } else {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'LogoutTrakt'
+ }
+ });
+ }
+ }, [isTraktAuthenticated, profile.auth]);
+
+ useEffect(() => {
+ if (dataExport.exportUrl) {
+ platform.openExternal(dataExport.exportUrl);
+ }
+ }, [dataExport.exportUrl]);
+
+ useEffect(() => {
+ if (isTraktAuthenticated && traktAuthStarted) {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'InstallTraktAddon'
+ }
+ });
+ setTraktAuthStarted(false);
+ }
+ }, [isTraktAuthenticated, traktAuthStarted]);
+
+ return <>
+
+
+
+ {
+ profile?.auth?.user &&
+
+
+ {isTraktAuthenticated ? t('LOG_OUT') : t('SETTINGS_TRAKT_AUTHENTICATE')}
+
+
+
+
+
+
+
+ {
+ shell.active &&
+
+
+ }
+ {
+ shell.active &&
+
+
+ }
+
+
+
+ ;
+});
+
+export default General;
diff --git a/src/routes/Settings/General/User/User.less b/src/routes/Settings/General/User/User.less
new file mode 100644
index 000000000..63c544f0c
--- /dev/null
+++ b/src/routes/Settings/General/User/User.less
@@ -0,0 +1,87 @@
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.user {
+ gap: 1rem;
+
+ .user-info-content {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .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: column;
+ align-items: start;
+
+ .email-label-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .email-label-container {
+ .email-label {
+ flex: 1;
+ font-size: 1.1rem;
+ color: var(--primary-foreground-color);
+ opacity: 0.7;
+ }
+ }
+ }
+ }
+
+ .user-panel-container {
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 10rem;
+ height: 3.5rem;
+ border-radius: 3.5rem;
+ background-color: var(--overlay-color);
+
+ &:hover {
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
+ }
+
+ .user-panel-label {
+ flex: 1;
+ max-height: 2.4em;
+ padding: 0 0.5rem;
+ font-weight: 500;
+ text-align: center;
+ color: var(--primary-foreground-color);
+ }
+ }
+}
+
+@media only screen and (max-width: @minimum) {
+ .user {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .user-panel-container {
+ width: 100% !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Settings/General/User/User.tsx b/src/routes/Settings/General/User/User.tsx
new file mode 100644
index 000000000..6b44e9903
--- /dev/null
+++ b/src/routes/Settings/General/User/User.tsx
@@ -0,0 +1,66 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useServices } from 'stremio/services';
+import { Link } from '../../components';
+import styles from './User.less';
+
+type Props = {
+ profile: Profile,
+};
+
+const User = ({ profile }: Props) => {
+ const { t } = useTranslation();
+ const { core } = useServices();
+
+ const avatar = useMemo(() => (
+ !profile.auth ?
+ `url('${require('/images/anonymous.png')}')`
+ :
+ profile.auth.user.avatar ?
+ `url('${profile.auth.user.avatar}')`
+ :
+ `url('${require('/images/default_avatar.png')}')`
+ ), [profile.auth]);
+
+ const onLogout = useCallback(() => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'Logout'
+ }
+ });
+ }, []);
+
+ return (
+
+
+
+
+
+
+ {profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}
+
+
+ {
+ profile.auth !== null ?
+
+ :
+
+ }
+
+
+
+
+
+ {process.env.VERSION}
+
+
+
+
+ {process.env.COMMIT_HASH}
+
+
+ {
+ settings?.serverVersion &&
+
+
+ {settings.serverVersion}
+
+
+ }
+ {
+ typeof shell?.transport?.props?.shellVersion === 'string' &&
+
+
+ {shell.transport.props.shellVersion}
+
+
+ }
+
+ );
+};
+
+export default Info;
diff --git a/src/routes/Settings/Info/index.ts b/src/routes/Settings/Info/index.ts
new file mode 100644
index 000000000..c7f185301
--- /dev/null
+++ b/src/routes/Settings/Info/index.ts
@@ -0,0 +1,2 @@
+import Info from './Info';
+export default Info;
diff --git a/src/routes/Settings/Menu/Menu.less b/src/routes/Settings/Menu/Menu.less
new file mode 100644
index 000000000..c9376ff33
--- /dev/null
+++ b/src/routes/Settings/Menu/Menu.less
@@ -0,0 +1,62 @@
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.menu {
+ flex: none;
+ align-self: stretch;
+ display: flex;
+ flex-direction: column;
+ width: 18rem;
+ padding: 3rem 1.5rem;
+
+ .button {
+ flex: none;
+ align-self: stretch;
+ display: flex;
+ align-items: center;
+ height: 4rem;
+ border-radius: 4rem;
+ padding: 2rem;
+ margin-bottom: 0.5rem;
+ font-size: 1.1rem;
+ font-weight: 500;
+ color: var(--primary-foreground-color);
+ opacity: 0.4;
+
+ &.selected {
+ font-weight: 600;
+ color: var(--primary-foreground-color);
+ background-color: var(--overlay-color);
+ opacity: 1;
+ }
+
+ &:hover {
+ background-color: var(--overlay-color);
+ }
+ }
+
+ .spacing {
+ flex: 1;
+ }
+
+ .version-info-label {
+ flex: 0 1 auto;
+ margin: 0.5rem 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ color: var(--primary-foreground-color);
+ opacity: 0.3;
+ overflow: hidden;
+ }
+}
+
+@media only screen and (max-width: @xsmall) {
+ .menu {
+ display: none;
+ }
+}
+
+@media only screen and (max-width: @minimum) {
+ .menu {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Settings/Menu/Menu.tsx b/src/routes/Settings/Menu/Menu.tsx
new file mode 100644
index 000000000..ceafee94b
--- /dev/null
+++ b/src/routes/Settings/Menu/Menu.tsx
@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { useServices } from 'stremio/services';
+import { Button } from 'stremio/components';
+import { SECTIONS } from '../constants';
+import styles from './Menu.less';
+
+type Props = {
+ selected: string,
+ streamingServer: StreamingServer,
+ onSelect: (event: React.MouseEvent) => void,
+};
+
+const Menu = ({ selected, streamingServer, onSelect }: Props) => {
+ const { t } = useTranslation();
+ const { shell } = useServices();
+
+ const settings = useMemo(() => (
+ streamingServer?.settings?.type === 'Ready' ?
+ streamingServer.settings.content as StreamingServerSettings : null
+ ), [streamingServer?.settings]);
+
+ return (
+
+
+ { t('SETTINGS_NAV_GENERAL') }
+
+
+ { t('SETTINGS_NAV_PLAYER') }
+
+
+ { t('SETTINGS_NAV_STREAMING') }
+
+
+ { t('SETTINGS_NAV_SHORTCUTS') }
+
+
+
+
+ {t('SETTINGS_APP_VERSION')}: {process.env.VERSION}
+
+
+ {t('SETTINGS_BUILD_VERSION')}: {process.env.COMMIT_HASH}
+
+ {
+ settings?.serverVersion &&
+
+ {t('SETTINGS_SERVER_VERSION')}: {settings.serverVersion}
+
+ }
+ {
+ typeof shell?.transport?.props?.shellVersion === 'string' &&
+
+ {t('SETTINGS_SHELL_VERSION')}: {shell.transport.props.shellVersion}
+
+ }
+
(({ profile }: Props, ref) => {
+ const { shell } = useServices();
+
+ const {
+ subtitlesLanguageSelect,
+ subtitlesSizeSelect,
+ subtitlesTextColorInput,
+ subtitlesBackgroundColorInput,
+ subtitlesOutlineColorInput,
+ audioLanguageSelect,
+ surroundSoundToggle,
+ seekTimeDurationSelect,
+ seekShortTimeDurationSelect,
+ playInExternalPlayerSelect,
+ nextVideoPopupDurationSelect,
+ bingeWatchingToggle,
+ playInBackgroundToggle,
+ hardwareDecodingToggle,
+ pauseOnMinimizeToggle,
+ } = usePlayerOptions(profile);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ shell.active &&
+
+
+ }
+ {
+ shell.active &&
+
+
+ }
+
+
+ );
+});
+
+export default Player;
diff --git a/src/routes/Settings/Player/index.ts b/src/routes/Settings/Player/index.ts
new file mode 100644
index 000000000..e513bdb21
--- /dev/null
+++ b/src/routes/Settings/Player/index.ts
@@ -0,0 +1,2 @@
+import Player from './Player';
+export default Player;
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/Player/usePlayerOptions.ts
similarity index 59%
rename from src/routes/Settings/useProfileSettingsInputs.js
rename to src/routes/Settings/Player/usePlayerOptions.ts
index 2a31fc254..04c263d54 100644
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/Player/usePlayerOptions.ts
@@ -1,175 +1,130 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useServices } from 'stremio/services';
+import { CONSTANTS, languageNames, usePlatform } from 'stremio/common';
-const React = require('react');
-const { useTranslation } = require('react-i18next');
-const { useServices } = require('stremio/services');
-const { CONSTANTS, usePlatform, interfaceLanguages, languageNames } = require('stremio/common');
+const LANGUAGES_NAMES: Record = languageNames;
-const useProfileSettingsInputs = (profile) => {
+const usePlayerOptions = (profile: Profile) => {
const { t } = useTranslation();
const { core } = useServices();
const platform = usePlatform();
- // TODO combine those useMemo in one
- const interfaceLanguageSelect = React.useMemo(() => ({
- options: interfaceLanguages.map(({ name, codes }) => ({
- value: codes[0],
- label: name,
- })),
- selected: [
- interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage
+
+ const subtitlesLanguageSelect = useMemo(() => ({
+ options: [
+ { value: null, label: t('NONE') },
+ ...Object.keys(LANGUAGES_NAMES).map((code) => ({
+ value: code,
+ label: LANGUAGES_NAMES[code]
+ }))
],
- onSelect: (event) => {
+ value: profile.settings.subtitlesLanguage,
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- interfaceLanguage: event.value
+ subtitlesLanguage: value
}
}
});
}
}), [profile.settings]);
- const hideSpoilersToggle = React.useMemo(() => ({
- checked: profile.settings.hideSpoilers,
- onClick: () => {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- hideSpoilers: !profile.settings.hideSpoilers
- }
- }
- });
- }
- }), [profile.settings]);
-
- const quitOnCloseToggle = React.useMemo(() => ({
- checked: profile.settings.quitOnClose,
- onClick: () => {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- quitOnClose: !profile.settings.quitOnClose
- }
- }
- });
- }
- }), [profile.settings]);
-
- const subtitlesLanguageSelect = React.useMemo(() => ({
- options: Object.keys(languageNames).map((code) => ({
- value: code,
- label: languageNames[code]
- })),
- selected: [profile.settings.subtitlesLanguage],
- onSelect: (event) => {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- subtitlesLanguage: event.value
- }
- }
- });
- }
- }), [profile.settings]);
- const subtitlesSizeSelect = React.useMemo(() => ({
+ const subtitlesSizeSelect = useMemo(() => ({
options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({
value: `${size}`,
label: `${size}%`
})),
- selected: [`${profile.settings.subtitlesSize}`],
- renderLabelText: () => {
+ value: `${profile.settings.subtitlesSize}`,
+ title: () => {
return `${profile.settings.subtitlesSize}%`;
},
- onSelect: (event) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- subtitlesSize: parseInt(event.value, 10)
+ subtitlesSize: parseInt(value, 10)
}
}
});
}
}), [profile.settings]);
- const subtitlesTextColorInput = React.useMemo(() => ({
+
+ const subtitlesTextColorInput = useMemo(() => ({
value: profile.settings.subtitlesTextColor,
- onChange: (event) => {
+ onChange: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- subtitlesTextColor: event.value
+ subtitlesTextColor: value
}
}
});
}
}), [profile.settings]);
- const subtitlesBackgroundColorInput = React.useMemo(() => ({
+
+ const subtitlesBackgroundColorInput = useMemo(() => ({
value: profile.settings.subtitlesBackgroundColor,
- onChange: (event) => {
+ onChange: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- subtitlesBackgroundColor: event.value
+ subtitlesBackgroundColor: value
}
}
});
}
}), [profile.settings]);
- const subtitlesOutlineColorInput = React.useMemo(() => ({
+
+ const subtitlesOutlineColorInput = useMemo(() => ({
value: profile.settings.subtitlesOutlineColor,
- onChange: (event) => {
+ onChange: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- subtitlesOutlineColor: event.value
+ subtitlesOutlineColor: value
}
}
});
}
}), [profile.settings]);
- const audioLanguageSelect = React.useMemo(() => ({
- options: Object.keys(languageNames).map((code) => ({
+
+ const audioLanguageSelect = useMemo(() => ({
+ options: Object.keys(LANGUAGES_NAMES).map((code) => ({
value: code,
- label: languageNames[code]
+ label: LANGUAGES_NAMES [code]
})),
- selected: [profile.settings.audioLanguage],
- onSelect: (event) => {
+ value: profile.settings.audioLanguage,
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- audioLanguage: event.value
+ audioLanguage: value
}
}
});
}
}), [profile.settings]);
- const surroundSoundToggle = React.useMemo(() => ({
+
+ const surroundSoundToggle = useMemo(() => ({
checked: profile.settings.surroundSound,
onClick: () => {
core.transport.dispatch({
@@ -184,117 +139,106 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const escExitFullscreenToggle = React.useMemo(() => ({
- checked: profile.settings.escExitFullscreen,
- onClick: () => {
+
+ const seekTimeDurationSelect = useMemo(() => ({
+ options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
+ value: `${size}`,
+ label: `${size / 1000} ${t('SECONDS')}`
+ })),
+ value: `${profile.settings.seekTimeDuration}`,
+ title: () => {
+ return `${profile.settings.seekTimeDuration / 1000} ${t('SECONDS')}`;
+ },
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- escExitFullscreen: !profile.settings.escExitFullscreen
+ seekTimeDuration: parseInt(value, 10)
}
}
});
}
}), [profile.settings]);
- const seekTimeDurationSelect = React.useMemo(() => ({
+ const seekShortTimeDurationSelect = useMemo(() => ({
options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
value: `${size}`,
label: `${size / 1000} ${t('SECONDS')}`
})),
- selected: [`${profile.settings.seekTimeDuration}`],
- renderLabelText: () => {
- return `${profile.settings.seekTimeDuration / 1000} ${t('SECONDS')}`;
- },
- onSelect: (event) => {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- seekTimeDuration: parseInt(event.value, 10)
- }
- }
- });
- }
- }), [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: () => {
+ value: `${profile.settings.seekShortTimeDuration}`,
+ title: () => {
return `${profile.settings.seekShortTimeDuration / 1000} ${t('SECONDS')}`;
},
- onSelect: (event) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- seekShortTimeDuration: parseInt(event.value, 10)
+ seekShortTimeDuration: parseInt(value, 10)
}
}
});
}
}), [profile.settings]);
- const playInExternalPlayerSelect = React.useMemo(() => ({
+
+ const playInExternalPlayerSelect = useMemo(() => ({
options: CONSTANTS.EXTERNAL_PLAYERS
.filter(({ platforms }) => platforms.includes(platform.name))
.map(({ label, value }) => ({
value,
label: t(label),
})),
- selected: [profile.settings.playerType],
- renderLabelText: () => {
+ value: profile.settings.playerType,
+ title: () => {
const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
},
- onSelect: (event) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- playerType: event.value
+ playerType: value
}
}
});
}
}), [profile.settings]);
- const nextVideoPopupDurationSelect = React.useMemo(() => ({
+
+ const nextVideoPopupDurationSelect = useMemo(() => ({
options: CONSTANTS.NEXT_VIDEO_POPUP_DURATIONS.map((duration) => ({
value: `${duration}`,
label: duration === 0 ? 'Disabled' : `${duration / 1000} ${t('SECONDS')}`
})),
- selected: [`${profile.settings.nextVideoNotificationDuration}`],
- renderLabelText: () => {
+ value: `${profile.settings.nextVideoNotificationDuration}`,
+ title: () => {
return profile.settings.nextVideoNotificationDuration === 0 ?
'Disabled'
:
`${profile.settings.nextVideoNotificationDuration / 1000} ${t('SECONDS')}`;
},
- onSelect: (event) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
- nextVideoNotificationDuration: parseInt(event.value, 10)
+ nextVideoNotificationDuration: parseInt(value, 10)
}
}
});
}
}), [profile.settings]);
- const bingeWatchingToggle = React.useMemo(() => ({
+
+ const bingeWatchingToggle = useMemo(() => ({
checked: profile.settings.bingeWatching,
onClick: () => {
core.transport.dispatch({
@@ -309,7 +253,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const playInBackgroundToggle = React.useMemo(() => ({
+
+ const playInBackgroundToggle = useMemo(() => ({
checked: profile.settings.playInBackground,
onClick: () => {
core.transport.dispatch({
@@ -324,7 +269,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const hardwareDecodingToggle = React.useMemo(() => ({
+
+ const hardwareDecodingToggle = useMemo(() => ({
checked: profile.settings.hardwareDecoding,
onClick: () => {
core.transport.dispatch({
@@ -339,7 +285,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const pauseOnMinimizeToggle = React.useMemo(() => ({
+
+ const pauseOnMinimizeToggle = useMemo(() => ({
checked: profile.settings.pauseOnMinimize,
onClick: () => {
core.transport.dispatch({
@@ -354,9 +301,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
+
return {
- interfaceLanguageSelect,
- hideSpoilersToggle,
subtitlesLanguageSelect,
subtitlesSizeSelect,
subtitlesTextColorInput,
@@ -364,8 +310,6 @@ const useProfileSettingsInputs = (profile) => {
subtitlesOutlineColorInput,
audioLanguageSelect,
surroundSoundToggle,
- escExitFullscreenToggle,
- quitOnCloseToggle,
seekTimeDurationSelect,
seekShortTimeDurationSelect,
playInExternalPlayerSelect,
@@ -377,4 +321,4 @@ const useProfileSettingsInputs = (profile) => {
};
};
-module.exports = useProfileSettingsInputs;
+export default usePlayerOptions;
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
deleted file mode 100644
index d6fe9b7a4..000000000
--- a/src/routes/Settings/Settings.js
+++ /dev/null
@@ -1,809 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const classnames = require('classnames');
-const throttle = require('lodash.throttle');
-const { useTranslation } = require('react-i18next');
-const { default: Icon } = require('@stremio/stremio-icons/react');
-const { useRouteFocused } = require('stremio-router');
-const { useServices } = require('stremio/services');
-const { useProfile, usePlatform, useStreamingServer, withCoreSuspender, useToast } = require('stremio/common');
-const { Button, ColorInput, MainNavBars, Multiselect, Toggle } = require('stremio/components');
-const useProfileSettingsInputs = require('./useProfileSettingsInputs');
-const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
-const useDataExport = require('./useDataExport');
-const styles = require('./styles');
-const { default: URLsManager } = require('./URLsManager/URLsManager');
-
-const GENERAL_SECTION = 'general';
-const PLAYER_SECTION = 'player';
-const STREAMING_SECTION = 'streaming';
-const SHORTCUTS_SECTION = 'shortcuts';
-
-const Settings = () => {
- const { t } = useTranslation();
- const { core, shell } = useServices();
- const { routeFocused } = useRouteFocused();
- const profile = useProfile();
- const [dataExport, loadDataExport] = useDataExport();
- const streamingServer = useStreamingServer();
- const platform = usePlatform();
- const toast = useToast();
- const {
- interfaceLanguageSelect,
- hideSpoilersToggle,
- subtitlesLanguageSelect,
- subtitlesSizeSelect,
- subtitlesTextColorInput,
- subtitlesBackgroundColorInput,
- subtitlesOutlineColorInput,
- audioLanguageSelect,
- surroundSoundToggle,
- seekTimeDurationSelect,
- seekShortTimeDurationSelect,
- escExitFullscreenToggle,
- quitOnCloseToggle,
- playInExternalPlayerSelect,
- nextVideoPopupDurationSelect,
- bingeWatchingToggle,
- playInBackgroundToggle,
- hardwareDecodingToggle,
- pauseOnMinimizeToggle,
- } = useProfileSettingsInputs(profile);
- const {
- streamingServerRemoteUrlInput,
- remoteEndpointSelect,
- cacheSizeSelect,
- torrentProfileSelect,
- transcodingProfileSelect,
- } = useStreamingServerSettingsInputs(streamingServer);
- const [traktAuthStarted, setTraktAuthStarted] = React.useState(false);
- const isTraktAuthenticated = React.useMemo(() => {
- return profile.auth !== null && profile.auth.user !== null && profile.auth.user.trakt !== null &&
- (Date.now() / 1000) < (profile.auth.user.trakt.created_at + profile.auth.user.trakt.expires_in);
- }, [profile.auth]);
- const logoutButtonOnClick = React.useCallback(() => {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'Logout'
- }
- });
- }, []);
- const toggleTraktOnClick = React.useCallback(() => {
- if (!isTraktAuthenticated && profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user._id === 'string') {
- platform.openExternal(`https://www.strem.io/trakt/auth/${profile.auth.user._id}`);
- setTraktAuthStarted(true);
- } else {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'LogoutTrakt'
- }
- });
- }
- }, [isTraktAuthenticated, profile.auth]);
- const subscribeCalendarOnClick = React.useCallback(() => {
- if (!profile.auth) return;
-
- const protocol = platform.name === 'ios' ? 'webcal' : 'https';
- const url = `${protocol}://www.strem.io/calendar/${profile.auth.user._id}.ics`;
- platform.openExternal(url);
- toast.show({
- type: 'success',
- title: platform.name === 'ios' ? t('SETTINGS_SUBSCRIBE_CALENDAR_IOS_TOAST') : t('SETTINGS_SUBSCRIBE_CALENDAR_TOAST'),
- timeout: 25000
- });
- // Stremio 4 emits not documented event subscribeCalendar
- }, [profile.auth]);
- const exportDataOnClick = React.useCallback(() => {
- loadDataExport();
- }, []);
- 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);
- const streamingServerSectionRef = React.useRef(null);
- const shortcutsSectionRef = React.useRef(null);
- const sections = React.useMemo(() => ([
- { ref: generalSectionRef, id: GENERAL_SECTION },
- { ref: playerSectionRef, id: PLAYER_SECTION },
- { ref: streamingServerSectionRef, id: STREAMING_SECTION },
- { ref: shortcutsSectionRef, id: SHORTCUTS_SECTION },
- ]), []);
- const [selectedSectionId, setSelectedSectionId] = React.useState(GENERAL_SECTION);
- const updateSelectedSectionId = React.useCallback(() => {
- if (sectionsContainerRef.current.scrollTop + sectionsContainerRef.current.clientHeight >= sectionsContainerRef.current.scrollHeight - 50) {
- setSelectedSectionId(sections[sections.length - 1].id);
- } else {
- for (let i = sections.length - 1; i >= 0; i--) {
- if (sections[i].ref.current.offsetTop - sectionsContainerRef.current.offsetTop <= sectionsContainerRef.current.scrollTop) {
- setSelectedSectionId(sections[i].id);
- break;
- }
- }
- }
- }, []);
- const sideMenuButtonOnClick = React.useCallback((event) => {
- const section = sections.find((section) => {
- return section.id === event.currentTarget.dataset.section;
- });
- sectionsContainerRef.current.scrollTo({
- top: section.ref.current.offsetTop - sectionsContainerRef.current.offsetTop,
- behavior: 'smooth'
- });
- }, []);
- const sectionsContainerOnScroll = React.useCallback(throttle(() => {
- updateSelectedSectionId();
- }, 50), []);
- React.useEffect(() => {
- if (isTraktAuthenticated && traktAuthStarted) {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'InstallTraktAddon'
- }
- });
- setTraktAuthStarted(false);
- }
- }, [isTraktAuthenticated, traktAuthStarted]);
- React.useEffect(() => {
- if (dataExport.exportUrl !== null && typeof dataExport.exportUrl === 'string') {
- platform.openExternal(dataExport.exportUrl);
- }
- }, [dataExport.exportUrl]);
- React.useLayoutEffect(() => {
- if (routeFocused) {
- updateSelectedSectionId();
- }
- }, [routeFocused]);
- return (
-
-
-
-
- { t('SETTINGS_NAV_GENERAL') }
-
-
- { t('SETTINGS_NAV_PLAYER') }
-
-
- { t('SETTINGS_NAV_STREAMING') }
-
-
- { t('SETTINGS_NAV_SHORTCUTS') }
-
-
-
- App Version: {process.env.VERSION}
-
-
- Build Version: {process.env.COMMIT_HASH}
-
- {
- streamingServer.settings !== null && streamingServer.settings.type === 'Ready' ?
-
Server Version: {streamingServer.settings.content.serverVersion}
- :
- null
- }
- {
- typeof shell?.transport?.props?.shellVersion === 'string' ?
-
Shell Version: {shell.transport.props.shellVersion}
- :
- null
- }
-
-
-
-
-
-
-
-
-
- {profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
-
-
- {
- profile.auth !== null ?
-
- { t('LOG_OUT') }
-
- :
- null
- }
-
-
-
- {
- profile.auth === null ?
-
-
- { t('LOG_IN') } / { t('SIGN_UP') }
-
-
- :
- null
- }
-
-
-
- {
- profile.auth ?
-
- { t('SETTINGS_DATA_EXPORT') }
-
- :
- null
- }
-
- {
- profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user._id === 'string' ?
-
-
- { t('SETTINGS_SUBSCRIBE_CALENDAR') }
-
-
- :
- null
- }
-
-
- { t('SETTINGS_SUPPORT') }
-
-
-
-
-
- { t('TERMS_OF_SERVICE') }
-
-
-
-
- { t('PRIVACY_POLICY') }
-
-
- {
- profile.auth !== null && profile.auth.user !== null ?
-
-
- { t('SETTINGS_ACC_DELETE') }
-
-
- :
- null
- }
- {
- profile.auth !== null && profile.auth.user !== null && typeof profile.auth.user.email === 'string' ?
-
-
- { t('SETTINGS_CHANGE_PASSWORD') }
-
-
- :
- null
- }
-
-
-
-
- { profile.auth !== null && profile.auth.user !== null && profile.auth.user.trakt !== null ? t('LOG_OUT') : t('SETTINGS_TRAKT_AUTHENTICATE') }
-
-
-
-
-
-
-
-
{ t('SETTINGS_UI_LANGUAGE') }
-
-
-
- {
- shell.active &&
-
-
-
{ t('SETTINGS_QUIT_ON_CLOSE') }
-
-
-
- }
- {
- shell.active &&
-
-
-
{ t('SETTINGS_FULLSCREEN_EXIT') }
-
-
-
- }
-
-
-
{ t('SETTINGS_BLUR_UNWATCHED_IMAGE') }
-
-
-
-
-
-
{ t('SETTINGS_NAV_PLAYER') }
-
-
-
{t('SETTINGS_SECTION_SUBTITLES')}
-
-
-
-
{ t('SETTINGS_SUBTITLES_LANGUAGE') }
-
-
-
-
-
-
{ t('SETTINGS_SUBTITLES_SIZE') }
-
-
-
-
-
-
{ t('SETTINGS_SUBTITLES_COLOR') }
-
-
-
-
-
-
{ t('SETTINGS_SUBTITLES_COLOR_BACKGROUND') }
-
-
-
-
-
-
{ t('SETTINGS_SUBTITLES_COLOR_OUTLINE') }
-
-
-
-
-
-
-
-
{t('SETTINGS_SECTION_AUDIO')}
-
-
-
-
{ t('SETTINGS_DEFAULT_AUDIO_TRACK') }
-
-
-
-
-
-
{ 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('SETTINGS_NEXT_VIDEO_POPUP_DURATION') }
-
-
-
-
-
-
-
-
{t('SETTINGS_SECTION_ADVANCED')}
-
-
-
-
{ t('SETTINGS_PLAY_IN_EXTERNAL_PLAYER') }
-
-
-
- {
- shell.active &&
-
-
-
{ t('SETTINGS_HWDEC') }
-
-
-
- }
- {
- shell.active &&
-
-
-
{ t('SETTINGS_PAUSE_MINIMIZED') }
-
-
-
- }
-
-
-
{ t('SETTINGS_NAV_STREAMING') }
-
- {
- 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 ?
-
-
-
{ t('SETTINGS_SERVER_CACHE_SIZE') }
-
-
-
- :
- null
- }
- {
- torrentProfileSelect !== null ?
-
-
-
{ t('SETTINGS_SERVER_TORRENT_PROFILE') }
-
-
-
- :
- null
- }
- {
- transcodingProfileSelect !== null ?
-
-
-
{ t('SETTINGS_TRANSCODE_PROFILE') }
-
-
-
- :
- null
- }
-
-
-
{ t('SETTINGS_NAV_SHORTCUTS') }
-
-
-
{ t('SETTINGS_SHORTCUT_PLAY_PAUSE') }
-
-
- { t('SETTINGS_SHORTCUT_SPACE') }
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_SEEK_FORWARD') }
-
-
-
→
-
{ t('SETTINGS_SHORTCUT_OR') }
-
⇧ { t('SETTINGS_SHORTCUT_SHIFT') }
-
+
-
→
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_SEEK_BACKWARD') }
-
-
-
←
-
{ t('SETTINGS_SHORTCUT_OR') }
-
⇧ { t('SETTINGS_SHORTCUT_SHIFT') }
-
+
-
←
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_VOLUME_UP') }
-
-
- ↑
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_VOLUME_DOWN') }
-
-
- ↓
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_MENU_SUBTITLES') }
-
-
- S
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_MENU_AUDIO') }
-
-
- A
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_MENU_INFO') }
-
-
- I
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_MENU_VIDEOS') }
-
-
- V
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_FULLSCREEN') }
-
-
- F
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_NAVIGATE_MENUS') }
-
-
-
1
-
{ t('SETTINGS_SHORTCUT_TO') }
-
6
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_GO_TO_SEARCH') }
-
-
- 0
-
-
-
-
-
{ t('SETTINGS_SHORTCUT_EXIT_BACK') }
-
-
- { t('SETTINGS_SHORTCUT_ESC') }
-
-
-
-
-
-
-
-
- {process.env.VERSION}
-
-
-
-
-
-
-
- {process.env.COMMIT_HASH}
-
-
-
- {
- streamingServer.settings !== null && streamingServer.settings.type === 'Ready' ?
-
-
-
-
- {streamingServer.settings.content.serverVersion}
-
-
-
- :
- null
- }
- {
- typeof shell?.transport?.props?.shellVersion === 'string' ?
-
-
-
-
- { shell.transport.props.shellVersion }
-
-
-
- :
- null
- }
-
-
-
- );
-};
-
-const SettingsFallback = () => (
- (null);
+ const generalSectionRef = useRef(null);
+ const playerSectionRef = useRef(null);
+ const streamingServerSectionRef = useRef(null);
+ const shortcutsSectionRef = useRef(null);
+
+ const sections = useMemo(() => ([
+ { ref: generalSectionRef, id: SECTIONS.GENERAL },
+ { ref: playerSectionRef, id: SECTIONS.PLAYER },
+ { ref: streamingServerSectionRef, id: SECTIONS.STREAMING },
+ { ref: shortcutsSectionRef, id: SECTIONS.SHORTCUTS },
+ ]), []);
+
+ const [selectedSectionId, setSelectedSectionId] = useState(SECTIONS.GENERAL);
+
+ const updateSelectedSectionId = useCallback(() => {
+ const container = sectionsContainerRef.current;
+ if (container!.scrollTop + container!.clientHeight >= container!.scrollHeight - 50) {
+ setSelectedSectionId(sections[sections.length - 1].id);
+ } else {
+ for (let i = sections.length - 1; i >= 0; i--) {
+ if (sections[i].ref.current!.offsetTop - container!.offsetTop <= container!.scrollTop) {
+ setSelectedSectionId(sections[i].id);
+ break;
+ }
+ }
+ }
+ }, []);
+
+ const onMenuSelect = useCallback((event: React.MouseEvent) => {
+ const section = sections.find((section) => {
+ return section.id === event.currentTarget.dataset.section;
+ });
+
+ const container = sectionsContainerRef.current;
+ section && container!.scrollTo({
+ top: section.ref.current!.offsetTop - container!.offsetTop,
+ behavior: 'smooth'
+ });
+ }, []);
+
+ const onContainerScroll = useCallback(throttle(() => {
+ updateSelectedSectionId();
+ }, 50), []);
+
+ useLayoutEffect(() => {
+ if (routeFocused) {
+ updateSelectedSectionId();
+ }
+ }, [routeFocused]);
+
+ return (
+
+
+
+ );
+};
+
+const SettingsFallback = () => (
+ ((_, ref) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+ {t('SETTINGS_SHORTCUT_SPACE')}
+
+
+
+
+
→
+
{t('SETTINGS_SHORTCUT_OR')}
+
⇧ {t('SETTINGS_SHORTCUT_SHIFT')}
+
+
+
→
+
+
+
+
←
+
{t('SETTINGS_SHORTCUT_OR')}
+
⇧ {t('SETTINGS_SHORTCUT_SHIFT')}
+
+
+
←
+
+
+
+ ↑
+
+
+
+
+ ↓
+
+
+
+
+ S
+
+
+
+
+ A
+
+
+
+
+ I
+
+
+
+
+ V
+
+
+
+
+ F
+
+
+
+
+
G
+
{ t('SETTINGS_SHORTCUT_AND') }
+
H
+
+
+
+
1
+
{t('SETTINGS_SHORTCUT_TO')}
+
6
+
+
+
+ 0
+
+
+
+
+ {t('SETTINGS_SHORTCUT_ESC')}
+
+
+
+ );
+});
+
+export default Shortcuts;
diff --git a/src/routes/Settings/Shortcuts/index.ts b/src/routes/Settings/Shortcuts/index.ts
new file mode 100644
index 000000000..d9540bf83
--- /dev/null
+++ b/src/routes/Settings/Shortcuts/index.ts
@@ -0,0 +1,2 @@
+import Shortcuts from './Shortcuts';
+export default Shortcuts;
diff --git a/src/routes/Settings/Streaming/Streaming.less b/src/routes/Settings/Streaming/Streaming.less
new file mode 100644
index 000000000..5fc34df11
--- /dev/null
+++ b/src/routes/Settings/Streaming/Streaming.less
@@ -0,0 +1,44 @@
+:import('~stremio/routes/Settings/components/Option/Option.less') {
+ option-content: content;
+}
+
+.configure-input-container {
+ .option-content {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ overflow: hidden;
+
+ .label {
+ flex: auto;
+ white-space: pre;
+ text-overflow: ellipsis;
+ color: var(--primary-foreground-color);
+ padding: 0 1rem;
+ }
+
+ .configure-button-container {
+ flex: none;
+ width: 3rem;
+ height: 3rem;
+ border-radius: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--overlay-color);
+
+ &:hover {
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
+ }
+
+ .icon {
+ flex: none;
+ width: 1rem;
+ height: 1rem;
+ margin: 0;
+ color: var(--primary-foreground-color);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Settings/Streaming/Streaming.tsx b/src/routes/Settings/Streaming/Streaming.tsx
new file mode 100644
index 000000000..4eac9a0ef
--- /dev/null
+++ b/src/routes/Settings/Streaming/Streaming.tsx
@@ -0,0 +1,92 @@
+import React, { forwardRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from '@stremio/stremio-icons/react';
+import { Button, MultiselectMenu } from 'stremio/components';
+import { useToast } from 'stremio/common';
+import { Section, Option } from '../components';
+import URLsManager from './URLsManager';
+import useStreamingOptions from './useStreamingOptions';
+import styles from './Streaming.less';
+
+type Props = {
+ profile: Profile,
+ streamingServer: StreamingServer,
+};
+
+const Streaming = forwardRef(({ profile, streamingServer }: Props, ref) => {
+ const { t } = useTranslation();
+ const toast = useToast();
+
+ const {
+ streamingServerRemoteUrlInput,
+ remoteEndpointSelect,
+ cacheSizeSelect,
+ torrentProfileSelect,
+ transcodingProfileSelect,
+ } = useStreamingOptions(streamingServer);
+
+ const onCopyRemoteUrl = useCallback(() => {
+ if (streamingServer.remoteUrl) {
+ navigator.clipboard.writeText(streamingServer.remoteUrl);
+
+ toast.show({
+ type: 'success',
+ title: t('SETTINGS_REMOTE_URL_COPIED'),
+ timeout: 2500,
+ });
+ }
+ }, [streamingServer.remoteUrl]);
+
+ return (
+
+
+ {streamingServerRemoteUrlInput.value}
+
+
+
+ }
+ {
+ profile.auth !== null && profile.auth.user !== null && remoteEndpointSelect !== null &&
+
+
+ }
+ {
+ cacheSizeSelect !== null &&
+
+
+ }
+ {
+ torrentProfileSelect !== null &&
+
+
+ }
+ {
+ transcodingProfileSelect !== null &&
+
+
+ }
+
+ );
+});
+
+export default Streaming;
diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.less b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less
similarity index 100%
rename from src/routes/Settings/URLsManager/AddItem/AddItem.less
rename to src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.less
diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.tsx b/src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.tsx
similarity index 100%
rename from src/routes/Settings/URLsManager/AddItem/AddItem.tsx
rename to src/routes/Settings/Streaming/URLsManager/AddItem/AddItem.tsx
diff --git a/src/routes/Settings/URLsManager/AddItem/index.ts b/src/routes/Settings/Streaming/URLsManager/AddItem/index.ts
similarity index 100%
rename from src/routes/Settings/URLsManager/AddItem/index.ts
rename to src/routes/Settings/Streaming/URLsManager/AddItem/index.ts
diff --git a/src/routes/Settings/URLsManager/Item/Item.less b/src/routes/Settings/Streaming/URLsManager/Item/Item.less
similarity index 100%
rename from src/routes/Settings/URLsManager/Item/Item.less
rename to src/routes/Settings/Streaming/URLsManager/Item/Item.less
diff --git a/src/routes/Settings/URLsManager/Item/Item.tsx b/src/routes/Settings/Streaming/URLsManager/Item/Item.tsx
similarity index 100%
rename from src/routes/Settings/URLsManager/Item/Item.tsx
rename to src/routes/Settings/Streaming/URLsManager/Item/Item.tsx
diff --git a/src/routes/Settings/URLsManager/Item/index.ts b/src/routes/Settings/Streaming/URLsManager/Item/index.ts
similarity index 100%
rename from src/routes/Settings/URLsManager/Item/index.ts
rename to src/routes/Settings/Streaming/URLsManager/Item/index.ts
diff --git a/src/routes/Settings/URLsManager/URLsManager.less b/src/routes/Settings/Streaming/URLsManager/URLsManager.less
similarity index 98%
rename from src/routes/Settings/URLsManager/URLsManager.less
rename to src/routes/Settings/Streaming/URLsManager/URLsManager.less
index fd0055d1c..6c9f03065 100644
--- a/src/routes/Settings/URLsManager/URLsManager.less
+++ b/src/routes/Settings/Streaming/URLsManager/URLsManager.less
@@ -1,6 +1,8 @@
// Copyright (C) 2017-2024 Smart code 203358507
.wrapper {
+ position: relative;
+ width: 100%;
display: flex;
flex-direction: column;
max-width: 35rem;
diff --git a/src/routes/Settings/URLsManager/URLsManager.tsx b/src/routes/Settings/Streaming/URLsManager/URLsManager.tsx
similarity index 87%
rename from src/routes/Settings/URLsManager/URLsManager.tsx
rename to src/routes/Settings/Streaming/URLsManager/URLsManager.tsx
index 46e57020d..b0d1245eb 100644
--- a/src/routes/Settings/URLsManager/URLsManager.tsx
+++ b/src/routes/Settings/Streaming/URLsManager/URLsManager.tsx
@@ -30,7 +30,7 @@ const URLsManager = () => {
return (
-
URL
+
{t('URL')}
{t('STATUS')}
@@ -46,11 +46,11 @@ const URLsManager = () => {
}
-
+
-
+
{t('RELOAD')}
diff --git a/src/routes/Settings/URLsManager/index.ts b/src/routes/Settings/Streaming/URLsManager/index.ts
similarity index 100%
rename from src/routes/Settings/URLsManager/index.ts
rename to src/routes/Settings/Streaming/URLsManager/index.ts
diff --git a/src/routes/Settings/URLsManager/useStreamingServerUrls.js b/src/routes/Settings/Streaming/URLsManager/useStreamingServerUrls.js
similarity index 100%
rename from src/routes/Settings/URLsManager/useStreamingServerUrls.js
rename to src/routes/Settings/Streaming/URLsManager/useStreamingServerUrls.js
diff --git a/src/routes/Settings/Streaming/index.ts b/src/routes/Settings/Streaming/index.ts
new file mode 100644
index 000000000..00294377e
--- /dev/null
+++ b/src/routes/Settings/Streaming/index.ts
@@ -0,0 +1,2 @@
+import Streaming from './Streaming';
+export default Streaming;
diff --git a/src/routes/Settings/useStreamingServerSettingsInputs.js b/src/routes/Settings/Streaming/useStreamingOptions.ts
similarity index 56%
rename from src/routes/Settings/useStreamingServerSettingsInputs.js
rename to src/routes/Settings/Streaming/useStreamingOptions.ts
index 1d4eee066..140909132 100644
--- a/src/routes/Settings/useStreamingServerSettingsInputs.js
+++ b/src/routes/Settings/Streaming/useStreamingOptions.ts
@@ -1,13 +1,13 @@
// 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');
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import isEqual from 'lodash.isequal';
+import { useServices } from 'stremio/services';
const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null];
-const cacheSizeToString = (size) => {
+const cacheSizeToString = (size: number | null) => {
return size === null ?
'Infinite'
:
@@ -17,7 +17,16 @@ const cacheSizeToString = (size) => {
`${Math.ceil(((size / 1024 / 1024 / 1024) + Number.EPSILON) * 100) / 100}GiB`;
};
-const TORRENT_PROFILES = {
+type TorrentProfile = {
+ btDownloadSpeedHardLimit: number,
+ btDownloadSpeedSoftLimit: number,
+ btHandshakeTimeout: number,
+ btMaxConnections: number,
+ btMinPeersForStable: number,
+ btRequestTimeout: number
+};
+
+const TORRENT_PROFILES: Record = {
default: {
btDownloadSpeedHardLimit: 3670016,
btDownloadSpeedSoftLimit: 2621440,
@@ -52,17 +61,32 @@ const TORRENT_PROFILES = {
}
};
-const useStreamingServerSettingsInputs = (streamingServer) => {
+const useStreamingOptions = (streamingServer: StreamingServer) => {
const { core } = useServices();
const { t } = useTranslation();
// TODO combine those useMemo in one
- const streamingServerRemoteUrlInput = React.useMemo(() => ({
+ const settings = useMemo(() => (
+ streamingServer?.settings?.type === 'Ready' ?
+ streamingServer.settings.content as StreamingServerSettings : null
+ ), [streamingServer.settings]);
+
+ const networkInfo = useMemo(() => (
+ streamingServer?.networkInfo?.type === 'Ready' ?
+ streamingServer.networkInfo.content as NetworkInfo : null
+ ), [streamingServer.networkInfo]);
+
+ const deviceInfo = useMemo(() => (
+ streamingServer?.deviceInfo?.type === 'Ready' ?
+ streamingServer.deviceInfo.content as DeviceInfo : null
+ ), [streamingServer.deviceInfo]);
+
+ const streamingServerRemoteUrlInput = useMemo(() => ({
value: streamingServer.remoteUrl,
}), [streamingServer.remoteUrl]);
- const remoteEndpointSelect = React.useMemo(() => {
- if (streamingServer.settings?.type !== 'Ready' || streamingServer.networkInfo?.type !== 'Ready') {
+ const remoteEndpointSelect = useMemo(() => {
+ if (!settings || !networkInfo) {
return null;
}
@@ -72,29 +96,29 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
label: t('SETTINGS_DISABLED'),
value: '',
},
- ...streamingServer.networkInfo.content.availableInterfaces.map((address) => ({
+ ...networkInfo.availableInterfaces.map((address) => ({
label: address,
value: address,
}))
],
- selected: [streamingServer.settings.content.remoteHttps],
- onSelect: (event) => {
+ value: settings.remoteHttps,
+ onSelect: (value: string | null) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
- remoteHttps: event.value,
+ ...settings,
+ remoteHttps: value,
}
}
});
}
};
- }, [streamingServer.settings, streamingServer.networkInfo]);
+ }, [settings, networkInfo]);
- const cacheSizeSelect = React.useMemo(() => {
- if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
+ const cacheSizeSelect = useMemo(() => {
+ if (!settings) {
return null;
}
@@ -103,36 +127,37 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
label: cacheSizeToString(size),
value: JSON.stringify(size)
})),
- selected: [JSON.stringify(streamingServer.settings.content.cacheSize)],
- renderLabelText: () => {
- return cacheSizeToString(streamingServer.settings.content.cacheSize);
+ value: JSON.stringify(settings.cacheSize),
+ title: () => {
+ return cacheSizeToString(settings.cacheSize);
},
- onSelect: (event) => {
+ onSelect: (value: any) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
- cacheSize: JSON.parse(event.value),
+ ...settings,
+ cacheSize: JSON.parse(value),
}
}
});
}
};
- }, [streamingServer.settings]);
- const torrentProfileSelect = React.useMemo(() => {
- if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
+ }, [settings]);
+
+ const torrentProfileSelect = useMemo(() => {
+ if (!settings) {
return null;
}
const selectedTorrentProfile = {
- btDownloadSpeedHardLimit: streamingServer.settings.content.btDownloadSpeedHardLimit,
- btDownloadSpeedSoftLimit: streamingServer.settings.content.btDownloadSpeedSoftLimit,
- btHandshakeTimeout: streamingServer.settings.content.btHandshakeTimeout,
- btMaxConnections: streamingServer.settings.content.btMaxConnections,
- btMinPeersForStable: streamingServer.settings.content.btMinPeersForStable,
- btRequestTimeout: streamingServer.settings.content.btRequestTimeout
+ btDownloadSpeedHardLimit: settings.btDownloadSpeedHardLimit,
+ btDownloadSpeedSoftLimit: settings.btDownloadSpeedSoftLimit,
+ btHandshakeTimeout: settings.btHandshakeTimeout,
+ btMaxConnections: settings.btMaxConnections,
+ btMinPeersForStable: settings.btMinPeersForStable,
+ btRequestTimeout: settings.btRequestTimeout
};
const isCustomTorrentProfileSelected = Object.values(TORRENT_PROFILES).every((torrentProfile) => {
return !isEqual(torrentProfile, selectedTorrentProfile);
@@ -140,7 +165,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
return {
options: Object.keys(TORRENT_PROFILES)
.map((profileName) => ({
- label: profileName,
+ label: t('TORRENT_PROFILE_' + profileName.replace(' ', '_').toUpperCase()),
value: JSON.stringify(TORRENT_PROFILES[profileName])
}))
.concat(
@@ -152,23 +177,24 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
:
[]
),
- selected: [JSON.stringify(selectedTorrentProfile)],
- onSelect: (event) => {
+ value: JSON.stringify(selectedTorrentProfile),
+ onSelect: (value: any) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
- ...JSON.parse(event.value),
+ ...settings,
+ ...JSON.parse(value),
}
}
});
}
};
- }, [streamingServer.settings]);
- const transcodingProfileSelect = React.useMemo(() => {
- if (streamingServer.settings?.type !== 'Ready' || streamingServer.deviceInfo?.type !== 'Ready') {
+ }, [settings]);
+
+ const transcodingProfileSelect = useMemo(() => {
+ if (!settings || !deviceInfo) {
return null;
}
@@ -178,27 +204,34 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
label: t('SETTINGS_DISABLED'),
value: null,
},
- ...streamingServer.deviceInfo.content.availableHardwareAccelerations.map((name) => ({
+ ...deviceInfo.availableHardwareAccelerations.map((name) => ({
label: name,
value: name,
}))
],
- selected: [streamingServer.settings.content.transcodeProfile],
- onSelect: (event) => {
+ value: settings.transcodeProfile,
+ onSelect: (value: string | null) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
- transcodeProfile: event.value,
+ ...settings,
+ transcodeProfile: value,
}
}
});
}
};
- }, [streamingServer.settings, streamingServer.deviceInfo]);
- return { streamingServerRemoteUrlInput, remoteEndpointSelect, cacheSizeSelect, torrentProfileSelect, transcodingProfileSelect };
+ }, [settings, deviceInfo]);
+
+ return {
+ streamingServerRemoteUrlInput,
+ remoteEndpointSelect,
+ cacheSizeSelect,
+ torrentProfileSelect,
+ transcodingProfileSelect,
+ };
};
-module.exports = useStreamingServerSettingsInputs;
+export default useStreamingOptions;
diff --git a/src/routes/Settings/components/Category/Category.less b/src/routes/Settings/components/Category/Category.less
new file mode 100644
index 000000000..23e0ce670
--- /dev/null
+++ b/src/routes/Settings/components/Category/Category.less
@@ -0,0 +1,37 @@
+.category {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ margin-bottom: 1rem;
+ padding-bottom: 1rem;
+ overflow: visible;
+
+ &:not(:last-child) {
+ border-bottom: thin solid var(--overlay-color);
+ }
+
+ .heading {
+ position: relative;
+ height: 4rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+
+ .label {
+ flex: none;
+ font-size: 1.1rem;
+ color: var(--primary-foreground-color);
+ }
+
+ .icon {
+ flex: none;
+ width: 2rem;
+ height: 2rem;
+ color: var(--primary-foreground-color);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Settings/components/Category/Category.tsx b/src/routes/Settings/components/Category/Category.tsx
new file mode 100644
index 000000000..75d39950d
--- /dev/null
+++ b/src/routes/Settings/components/Category/Category.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { t } from 'i18next';
+import Icon from '@stremio/stremio-icons/react';
+import styles from './Category.less';
+
+type Props = {
+ icon: string,
+ label: string,
+ children: React.ReactNode,
+};
+
+const Category = ({ icon, label, children }: Props) => {
+ return (
+
+ );
+};
+
+export default Category;
diff --git a/src/routes/Settings/components/Category/index.ts b/src/routes/Settings/components/Category/index.ts
new file mode 100644
index 000000000..9e9778dc3
--- /dev/null
+++ b/src/routes/Settings/components/Category/index.ts
@@ -0,0 +1,2 @@
+import Category from './Category';
+export default Category;
diff --git a/src/routes/Settings/components/Link/Link.less b/src/routes/Settings/components/Link/Link.less
new file mode 100644
index 000000000..ba12d94e9
--- /dev/null
+++ b/src/routes/Settings/components/Link/Link.less
@@ -0,0 +1,16 @@
+.link {
+ position: relative;
+ display: flex;
+ align-items: center;
+ height: 2rem;
+
+ .label {
+ color: var(--primary-accent-color);
+ }
+
+ &:hover {
+ .label {
+ text-decoration: underline;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Settings/components/Link/Link.tsx b/src/routes/Settings/components/Link/Link.tsx
new file mode 100644
index 000000000..e0216c92b
--- /dev/null
+++ b/src/routes/Settings/components/Link/Link.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button } from 'stremio/components';
+import styles from './Link.less';
+
+type Props = {
+ label: string,
+ href?: string,
+ target?: string,
+ onClick?: () => void,
+};
+
+const Link = ({ label, href, target, onClick }: Props) => {
+ return (
+
+ { label }
+
+ );
+};
+
+export default Link;
diff --git a/src/routes/Settings/components/Link/index.ts b/src/routes/Settings/components/Link/index.ts
new file mode 100644
index 000000000..a575fb00f
--- /dev/null
+++ b/src/routes/Settings/components/Link/index.ts
@@ -0,0 +1,2 @@
+import Link from './Link';
+export default Link;
diff --git a/src/routes/Settings/components/Option/Option.less b/src/routes/Settings/components/Option/Option.less
new file mode 100644
index 000000000..181cfa33b
--- /dev/null
+++ b/src/routes/Settings/components/Option/Option.less
@@ -0,0 +1,78 @@
+.option {
+ position: relative;
+ width: 100%;
+ flex: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 2rem;
+ margin-bottom: 2rem;
+ overflow: visible;
+
+ .heading, .content {
+ flex: 1 1 50%;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .heading {
+ display: flex;
+ gap: 0.75rem;
+
+ .icon {
+ width: 3rem;
+ height: 3rem;
+ color: var(--primary-foreground-color);
+ }
+
+ .label {
+ line-height: 1.5rem;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ color: var(--primary-foreground-color);
+ }
+ }
+
+ .content {
+ justify-content: center;
+ overflow: visible;
+
+ :global(.multiselect) {
+ width: 100%;
+ padding: 0;
+ background: var(--overlay-color);
+ }
+
+ :global(.button) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 3.5rem;
+ width: 100%;
+ padding: 0 2rem;
+ border-radius: 3.5rem;
+ font-weight: 500;
+ color: var(--primary-foreground-color);
+ background-color: var(--overlay-color);
+
+ &:hover {
+ outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+ background-color: transparent;
+ }
+ }
+
+ :global(.color-input) {
+ width: 100%;
+ padding: 1.3rem 1rem;
+ border-radius: 3rem;
+ border: 2px solid transparent;
+ transition: 0.3s all ease-in-out;
+
+ &:hover {
+ border-color: var(--overlay-color);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Settings/components/Option/Option.tsx b/src/routes/Settings/components/Option/Option.tsx
new file mode 100644
index 000000000..0ff25f31e
--- /dev/null
+++ b/src/routes/Settings/components/Option/Option.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+import { t } from 'i18next';
+import styles from './Option.less';
+import Icon from '@stremio/stremio-icons/react';
+
+type Props = {
+ className?: string,
+ icon?: string,
+ label: string,
+ children: React.ReactNode,
+};
+
+const Option = ({ className, icon, label, children }: Props) => {
+ return (
+
+
+ {
+ icon &&
+
+ }
+
+ {t(label)}
+
+
+
+ { children }
+
+
(({ className, label, children }: Props, ref) => {
+ return (
+
+ {
+ label &&
+
+ {t(label)}
+
+ }
+ { children }
+
] | null,
statistics: Loadable | null,
playbackDevices: Loadable | null,
+ networkInfo: Loadable | null,
+ deviceInfo: Loadable | null,
};
diff --git a/tests/i18nScan.test.js b/tests/i18nScan.test.js
new file mode 100644
index 000000000..5f2964a9a
--- /dev/null
+++ b/tests/i18nScan.test.js
@@ -0,0 +1,107 @@
+const fs = require('fs');
+const path = require('path');
+const recast = require('recast');
+const babelParser = require('@babel/parser');
+
+const directoryToScan = './src';
+
+function toKey(str) {
+ return str
+ .toLowerCase()
+ .replace(/[^a-z0-9\s]/g, '')
+ .replace(/\s+/g, '_')
+ .slice(0, 40);
+}
+
+function scanFile(filePath, report) {
+ try {
+ const code = fs.readFileSync(filePath, 'utf8');
+ const ast = babelParser.parse(code, {
+ sourceType: 'module',
+ plugins: [
+ 'jsx',
+ 'typescript',
+ 'classProperties',
+ 'objectRestSpread',
+ 'optionalChaining',
+ 'nullishCoalescingOperator',
+ ],
+ errorRecovery: true,
+ });
+
+ recast.types.visit(ast, {
+ visitJSXText(path) {
+ const text = path.node.value.trim();
+ if (text.length > 1 && /\w/.test(text)) {
+ const loc = path.node.loc?.start || { line: 0 };
+ report.push({
+ file: filePath,
+ line: loc.line,
+ string: text,
+ key: toKey(text),
+ });
+ }
+ this.traverse(path);
+ },
+
+ visitJSXExpressionContainer(path) {
+ const expr = path.node.expression;
+
+ if (
+ expr.type === 'CallExpression' &&
+ expr.callee.type === 'Identifier' &&
+ expr.callee.name === 't'
+ ) {
+ return false;
+ }
+
+ if (expr.type === 'StringLiteral') {
+ const parent = path.parentPath.node;
+ if (parent.type === 'JSXElement') {
+ const loc = path.node.loc?.start || { line: 0 };
+ report.push({
+ file: filePath,
+ line: loc.line,
+ string: expr.value,
+ key: toKey(expr.value),
+ });
+ }
+ }
+
+ this.traverse(path);
+ }
+ });
+
+ } catch (err) {
+ console.warn(`❌ Skipping ${filePath}: ${err.message}`);
+ }
+}
+
+function walk(dir, report) {
+ fs.readdirSync(dir).forEach((file) => {
+ const fullPath = path.join(dir, file);
+ if (fs.statSync(fullPath).isDirectory()) {
+ walk(fullPath, report);
+ } else if (/\.(js|jsx|ts|tsx)$/.test(file)) {
+ // console.log('📄 Scanning file:', fullPath);
+ scanFile(fullPath, report);
+ }
+ });
+}
+const report = [];
+
+walk(directoryToScan, report);
+
+if (report.length !== 0) {
+ describe.each(report)('Missing translation key', (entry) => {
+ it(`should not have "${entry.string}" in ${entry.file} at line ${entry.line}`, () => {
+ expect(entry.string).toBeFalsy();
+ });
+ });
+} else {
+ describe('Missing translation key', () => {
+ it('No hardcoded strings found', () => {
+ expect(true).toBe(true); // or just skip
+ });
+ });
+}