- 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
deleted file mode 100644
index a57754793..000000000
--- a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button } = require('stremio/components');
-const styles = require('./styles');
-
-const DiscreteSelectInput = ({ className, value, label, disabled, dataset, onChange }) => {
- const buttonOnClick = React.useCallback((event) => {
- if (typeof onChange === 'function') {
- onChange({
- type: 'change',
- value: event.currentTarget.dataset.type,
- dataset: dataset,
- reactEvent: event,
- nativeEvent: event.nativeEvent
- });
- }
- }, [dataset, onChange]);
- return (
-
- );
-};
-
-DiscreteSelectInput.propTypes = {
- className: PropTypes.string,
- value: PropTypes.string,
- label: PropTypes.string,
- disabled: PropTypes.bool,
- dataset: PropTypes.object,
- onChange: PropTypes.func
-};
-
-module.exports = DiscreteSelectInput;
diff --git a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/index.js b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/index.js
deleted file mode 100644
index aaf93afb3..000000000
--- a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const DiscreteSelectInput = require('./DiscreteSelectInput');
-
-module.exports = DiscreteSelectInput;
diff --git a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less b/src/routes/Player/SubtitlesMenu/Stepper/Stepper.less
similarity index 79%
rename from src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
rename to src/routes/Player/SubtitlesMenu/Stepper/Stepper.less
index 2ceb41f80..67b034abe 100644
--- a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
+++ b/src/routes/Player/SubtitlesMenu/Stepper/Stepper.less
@@ -1,14 +1,10 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
-
-.discrete-input-container {
+.stepper {
&:global(.disabled) {
.header {
color: var(--primary-foreground-color);
}
- .input-container {
+ .content {
opacity: 0.4;
}
}
@@ -19,14 +15,14 @@
opacity: 0.6;
}
- .input-container {
+ .content {
display: flex;
flex-direction: row;
align-items: center;
border-radius: 3.5rem;
background: var(--overlay-color);
- .button-container {
+ .button {
flex: none;
width: 3.5rem;
height: 3.5rem;
@@ -42,7 +38,7 @@
}
}
- .option-label {
+ .value {
flex: 1;
font-weight: 500;
text-align: center;
diff --git a/src/routes/Player/SubtitlesMenu/Stepper/Stepper.tsx b/src/routes/Player/SubtitlesMenu/Stepper/Stepper.tsx
new file mode 100644
index 000000000..0d402a455
--- /dev/null
+++ b/src/routes/Player/SubtitlesMenu/Stepper/Stepper.tsx
@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import Icon from '@stremio/stremio-icons/react';
+import { Button } from 'stremio/components';
+import { useInterval, useTimeout } from 'stremio/common';
+import styles from './Stepper.less';
+
+const clamp = (value: number, min?: number, max?: number) => {
+ const minClamped = typeof min === 'number' ? Math.max(value, min) : value;
+ const maxClamped = typeof max === 'number' ? Math.min(minClamped, max) : minClamped;
+ return maxClamped;
+};
+
+type Props = {
+ className: string,
+ label: string,
+ value: number,
+ unit?: string,
+ step: number,
+ min?: number,
+ max?: number,
+ disabled?: boolean,
+ onChange: (value: number) => void,
+};
+
+const Stepper = ({ className, label, value, unit, step, min, max, disabled, onChange }: Props) => {
+ const { t } = useTranslation();
+
+ const localValue = useRef(value);
+
+ const interval = useInterval(100);
+ const timeout = useTimeout(250);
+
+ const cancel = () => {
+ interval.cancel();
+ timeout.cancel();
+ };
+
+ const updateValue = useCallback((delta: number) => {
+ onChange(clamp(localValue.current + delta, min, max));
+ }, [onChange]);
+
+ const onDecrementMouseDown = useCallback(() => {
+ cancel();
+ timeout.start(() => interval.start(() => updateValue(-step)));
+ }, [updateValue]);
+
+ const onDecrementMouseUp = useCallback(() => {
+ cancel();
+ updateValue(-step);
+ }, [updateValue]);
+
+ const onIncrementMouseDown = useCallback(() => {
+ cancel();
+ timeout.start(() => interval.start(() => updateValue(step)));
+ }, [updateValue]);
+
+ const onIncrementMouseUp = useCallback(() => {
+ cancel();
+ updateValue(step);
+ }, [updateValue]);
+
+ useEffect(() => {
+ localValue.current = value;
+ }, [value]);
+
+ return (
+
+
+ { t(label) }
+
+
+
+
+
+ { disabled ? '--' : `${value}${unit}` }
+
+
+
+
+
+ );
+};
+
+export default Stepper;
diff --git a/src/routes/Player/SubtitlesMenu/Stepper/index.ts b/src/routes/Player/SubtitlesMenu/Stepper/index.ts
new file mode 100644
index 000000000..9fd275c70
--- /dev/null
+++ b/src/routes/Player/SubtitlesMenu/Stepper/index.ts
@@ -0,0 +1,2 @@
+import Stepper from './Stepper';
+export default Stepper;
diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index 39bc771e6..d94c5f70b 100644
--- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
+++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -3,11 +3,12 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
-const { CONSTANTS, comparatorWithPriorities, languages } = require('stremio/common');
+const { comparatorWithPriorities, languages } = require('stremio/common');
+const { SUBTITLES_SIZES } = require('stremio/common/CONSTANTS');
const { Button } = require('stremio/components');
-const DiscreteSelectInput = require('./DiscreteSelectInput');
const styles = require('./styles');
const { t } = require('i18next');
+const { default: Stepper } = require('./Stepper');
const ORIGIN_PRIORITIES = {
'LOCAL': 3,
@@ -98,51 +99,41 @@ const SubtitlesMenu = React.memo((props) => {
}
}
}, [props.onSubtitlesTrackSelected, props.onExtraSubtitlesTrackSelected]);
- const onSubtitlesDelayChanged = React.useCallback((event) => {
- const delta = event.value === 'increment' ? 250 : -250;
+ const onSubtitlesDelayChanged = React.useCallback((value) => {
if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
if (props.extraSubtitlesDelay !== null && !isNaN(props.extraSubtitlesDelay)) {
- const extraDelay = props.extraSubtitlesDelay + delta;
if (typeof props.onExtraSubtitlesDelayChanged === 'function') {
- props.onExtraSubtitlesDelayChanged(extraDelay);
+ props.onExtraSubtitlesDelayChanged(value * 1000);
}
}
}
}, [props.selectedExtraSubtitlesTrackId, props.extraSubtitlesDelay, props.onExtraSubtitlesDelayChanged]);
- const onSubtitlesSizeChanged = React.useCallback((event) => {
- const delta = event.value === 'increment' ? 1 : -1;
+ const onSubtitlesSizeChanged = React.useCallback((value) => {
if (typeof props.selectedSubtitlesTrackId === 'string') {
if (props.subtitlesSize !== null && !isNaN(props.subtitlesSize)) {
- const sizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(props.subtitlesSize);
- const size = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length - 1, sizeIndex + delta))];
if (typeof props.onSubtitlesSizeChanged === 'function') {
- props.onSubtitlesSizeChanged(size);
+ props.onSubtitlesSizeChanged(value);
}
}
} else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
if (props.extraSubtitlesSize !== null && !isNaN(props.extraSubtitlesSize)) {
- const extraSizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(props.extraSubtitlesSize);
- const extraSize = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length - 1, extraSizeIndex + delta))];
if (typeof props.onExtraSubtitlesSizeChanged === 'function') {
- props.onExtraSubtitlesSizeChanged(extraSize);
+ props.onExtraSubtitlesSizeChanged(value);
}
}
}
}, [props.selectedSubtitlesTrackId, props.selectedExtraSubtitlesTrackId, props.subtitlesSize, props.extraSubtitlesSize, props.onSubtitlesSizeChanged, props.onExtraSubtitlesSizeChanged]);
- const onSubtitlesOffsetChanged = React.useCallback((event) => {
- const delta = event.value === 'increment' ? 1 : -1;
+ const onSubtitlesOffsetChanged = React.useCallback((value) => {
if (typeof props.selectedSubtitlesTrackId === 'string') {
if (props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset)) {
- const offset = Math.max(0, Math.min(100, Math.floor(props.subtitlesOffset + delta)));
if (typeof props.onSubtitlesOffsetChanged === 'function') {
- props.onSubtitlesOffsetChanged(offset);
+ props.onSubtitlesOffsetChanged(value);
}
}
} else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
if (props.extraSubtitlesOffset !== null && !isNaN(props.extraSubtitlesOffset)) {
- const offset = Math.max(0, Math.min(100, Math.floor(props.extraSubtitlesOffset + delta)));
if (typeof props.onExtraSubtitlesOffsetChanged === 'function') {
- props.onExtraSubtitlesOffsetChanged(offset);
+ props.onExtraSubtitlesOffsetChanged(value);
}
}
}
@@ -215,57 +206,35 @@ const SubtitlesMenu = React.memo((props) => {
{t('PLAYER_SUBTITLES_SETTINGS')}
-
diff --git a/src/routes/Player/SubtitlesMenu/styles.less b/src/routes/Player/SubtitlesMenu/styles.less
index 71f1d5cb4..bed7be75d 100644
--- a/src/routes/Player/SubtitlesMenu/styles.less
+++ b/src/routes/Player/SubtitlesMenu/styles.less
@@ -114,7 +114,7 @@
flex: 1;
}
- .discrete-input {
+ .stepper {
padding: 0 1.5rem 1rem;
}
}
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/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 05036f220..4ca2574ba 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -102,8 +102,8 @@ const usePlayer = (urlParams) => {
args: {
action: 'TimeChanged',
args: {
- time: Math.round(time),
- duration,
+ time: Math.max(0, Math.round(time)),
+ duration: Math.max(0, Math.round(duration)),
device,
}
}
@@ -118,8 +118,8 @@ const usePlayer = (urlParams) => {
args: {
action: 'Seek',
args: {
- time: Math.round(time),
- duration,
+ time: Math.max(0, Math.round(time)),
+ duration: Math.max(0, Math.round(duration)),
device,
}
}
diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less
index 278d65693..e9ccc067f 100644
--- a/src/routes/Search/styles.less
+++ b/src/routes/Search/styles.less
@@ -12,7 +12,7 @@
}
.search-container {
- height: 100%;
+ height: calc(100% - var(--safe-area-inset-bottom));
width: 100%;
background-color: transparent;
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..5ac029368
--- /dev/null
+++ b/src/routes/Settings/General/General.tsx
@@ -0,0 +1,189 @@
+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,
+ gamepadSupportToggle,
+ } = 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 64%
rename from src/routes/Settings/useProfileSettingsInputs.js
rename to src/routes/Settings/Player/usePlayerOptions.ts
index e4bf6e525..edbce3d24 100644
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/Player/usePlayerOptions.ts
@@ -1,93 +1,29 @@
-// 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, useLanguageSorting } 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,
- })),
- value: interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage,
- onSelect: (value) => {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- interfaceLanguage: value
- }
- }
- });
- }
- }), [profile.settings]);
- const gamepadSupportToggle = React.useMemo(() => ({
- checked: profile.settings.gamepadSupport,
- onClick: () => {
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- gamepadSupport: !profile.settings.gamepadSupport
- }
- }
- });
- }
- }), [profile.settings]);
+ const languageOptions = useMemo(() => Object.keys(LANGUAGES_NAMES).map((code) => ({
+ value: code,
+ label: LANGUAGES_NAMES[code]
+ })), []);
- 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 { sortedOptions: sortedLanguageOptions } = useLanguageSorting(languageOptions);
- 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(() => ({
+ const subtitlesLanguageSelect = useMemo(() => ({
options: [
{ value: null, label: t('NONE') },
- ...Object.keys(languageNames).map((code) => ({
- value: code,
- label: languageNames[code]
- }))
+ ...sortedLanguageOptions
],
value: profile.settings.subtitlesLanguage,
- onSelect: (value) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -99,8 +35,9 @@ const useProfileSettingsInputs = (profile) => {
}
});
}
- }), [profile.settings]);
- const subtitlesSizeSelect = React.useMemo(() => ({
+ }), [profile.settings, sortedLanguageOptions]);
+
+ const subtitlesSizeSelect = useMemo(() => ({
options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({
value: `${size}`,
label: `${size}%`
@@ -109,7 +46,7 @@ const useProfileSettingsInputs = (profile) => {
title: () => {
return `${profile.settings.subtitlesSize}%`;
},
- onSelect: (value) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -122,9 +59,10 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesTextColorInput = React.useMemo(() => ({
+
+ const subtitlesTextColorInput = useMemo(() => ({
value: profile.settings.subtitlesTextColor,
- onChange: (value) => {
+ onChange: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -137,9 +75,10 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesBackgroundColorInput = React.useMemo(() => ({
+
+ const subtitlesBackgroundColorInput = useMemo(() => ({
value: profile.settings.subtitlesBackgroundColor,
- onChange: (value) => {
+ onChange: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -152,9 +91,10 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesOutlineColorInput = React.useMemo(() => ({
+
+ const subtitlesOutlineColorInput = useMemo(() => ({
value: profile.settings.subtitlesOutlineColor,
- onChange: (value) => {
+ onChange: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -167,13 +107,11 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const audioLanguageSelect = React.useMemo(() => ({
- options: Object.keys(languageNames).map((code) => ({
- value: code,
- label: languageNames[code]
- })),
+
+ const audioLanguageSelect = useMemo(() => ({
+ options: sortedLanguageOptions,
value: profile.settings.audioLanguage,
- onSelect: (value) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -185,8 +123,9 @@ const useProfileSettingsInputs = (profile) => {
}
});
}
- }), [profile.settings]);
- const surroundSoundToggle = React.useMemo(() => ({
+ }), [profile.settings, sortedLanguageOptions]);
+
+ const surroundSoundToggle = useMemo(() => ({
checked: profile.settings.surroundSound,
onClick: () => {
core.transport.dispatch({
@@ -201,23 +140,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const escExitFullscreenToggle = 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(() => ({
+ const seekTimeDurationSelect = useMemo(() => ({
options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
value: `${size}`,
label: `${size / 1000} ${t('SECONDS')}`
@@ -226,7 +150,7 @@ const useProfileSettingsInputs = (profile) => {
title: () => {
return `${profile.settings.seekTimeDuration / 1000} ${t('SECONDS')}`;
},
- onSelect: (value) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -239,7 +163,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const seekShortTimeDurationSelect = React.useMemo(() => ({
+
+ const seekShortTimeDurationSelect = useMemo(() => ({
options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
value: `${size}`,
label: `${size / 1000} ${t('SECONDS')}`
@@ -248,7 +173,7 @@ const useProfileSettingsInputs = (profile) => {
title: () => {
return `${profile.settings.seekShortTimeDuration / 1000} ${t('SECONDS')}`;
},
- onSelect: (value) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -261,7 +186,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const playInExternalPlayerSelect = React.useMemo(() => ({
+
+ const playInExternalPlayerSelect = useMemo(() => ({
options: CONSTANTS.EXTERNAL_PLAYERS
.filter(({ platforms }) => platforms.includes(platform.name))
.map(({ label, value }) => ({
@@ -273,7 +199,7 @@ const useProfileSettingsInputs = (profile) => {
const selectedOption = CONSTANTS.EXTERNAL_PLAYERS.find(({ value }) => value === profile.settings.playerType);
return selectedOption ? t(selectedOption.label, { defaultValue: selectedOption.label }) : profile.settings.playerType;
},
- onSelect: (value) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -286,7 +212,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [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')}`
@@ -298,7 +225,7 @@ const useProfileSettingsInputs = (profile) => {
:
`${profile.settings.nextVideoNotificationDuration / 1000} ${t('SECONDS')}`;
},
- onSelect: (value) => {
+ onSelect: (value: string) => {
core.transport.dispatch({
action: 'Ctx',
args: {
@@ -311,7 +238,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const bingeWatchingToggle = React.useMemo(() => ({
+
+ const bingeWatchingToggle = useMemo(() => ({
checked: profile.settings.bingeWatching,
onClick: () => {
core.transport.dispatch({
@@ -326,7 +254,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const playInBackgroundToggle = React.useMemo(() => ({
+
+ const playInBackgroundToggle = useMemo(() => ({
checked: profile.settings.playInBackground,
onClick: () => {
core.transport.dispatch({
@@ -341,7 +270,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const hardwareDecodingToggle = React.useMemo(() => ({
+
+ const hardwareDecodingToggle = useMemo(() => ({
checked: profile.settings.hardwareDecoding,
onClick: () => {
core.transport.dispatch({
@@ -356,7 +286,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const pauseOnMinimizeToggle = React.useMemo(() => ({
+
+ const pauseOnMinimizeToggle = useMemo(() => ({
checked: profile.settings.pauseOnMinimize,
onClick: () => {
core.transport.dispatch({
@@ -371,10 +302,8 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
+
return {
- interfaceLanguageSelect,
- gamepadSupportToggle,
- hideSpoilersToggle,
subtitlesLanguageSelect,
subtitlesSizeSelect,
subtitlesTextColorInput,
@@ -382,8 +311,6 @@ const useProfileSettingsInputs = (profile) => {
subtitlesOutlineColorInput,
audioLanguageSelect,
surroundSoundToggle,
- escExitFullscreenToggle,
- quitOnCloseToggle,
seekTimeDurationSelect,
seekShortTimeDurationSelect,
playInExternalPlayerSelect,
@@ -395,4 +322,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 3b0a01216..000000000
--- a/src/routes/Settings/Settings.js
+++ /dev/null
@@ -1,820 +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, MultiselectMenu, 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,
- gamepadSupportToggle,
- 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
- }
-
-
-
-
- { isTraktAuthenticated ? 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_GAMEPAD') }
-
-
-
-
-
-
{ 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
+
+
+
+
+ F
+
+
+
+
+
-
+
{ t('SETTINGS_SHORTCUT_AND') }
+
=
+
+
+
+
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 59%
rename from src/routes/Settings/useStreamingServerSettingsInputs.js
rename to src/routes/Settings/Streaming/useStreamingOptions.ts
index e4bd7e79c..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,
}))
],
- value: streamingServer.settings.content.remoteHttps,
- onSelect: (value) => {
+ value: settings.remoteHttps,
+ onSelect: (value: string | null) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
+ ...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)
})),
- value: JSON.stringify(streamingServer.settings.content.cacheSize),
+ value: JSON.stringify(settings.cacheSize),
title: () => {
- return cacheSizeToString(streamingServer.settings.content.cacheSize);
+ return cacheSizeToString(settings.cacheSize);
},
- onSelect: (value) => {
+ onSelect: (value: any) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
+ ...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(
@@ -153,22 +178,23 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
[]
),
value: JSON.stringify(selectedTorrentProfile),
- onSelect: (value) => {
+ onSelect: (value: any) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
+ ...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,
}))
],
- value: streamingServer.settings.content.transcodeProfile,
- onSelect: (value) => {
+ value: settings.transcodeProfile,
+ onSelect: (value: string | null) => {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'UpdateSettings',
args: {
- ...streamingServer.settings.content,
+ ...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 }
+
}[],
title: string | null,
+ ratingInfo: Loadable | null,
};
diff --git a/src/types/models/StremingServer.d.ts b/src/types/models/StremingServer.d.ts
index d344755d6..6e6f96f39 100644
--- a/src/types/models/StremingServer.d.ts
+++ b/src/types/models/StremingServer.d.ts
@@ -23,6 +23,8 @@ type StreamingServerSettings = {
cacheRoot: string,
cacheSize: number,
serverVersion: string,
+ remoteHttps: string | null,
+ transcodeProfile: string | null,
};
type SFile = {
@@ -93,6 +95,14 @@ type Statistics = {
swarmSize: number,
};
+type NetworkInfo = {
+ availableInterfaces: string[],
+};
+
+type DeviceInfo = {
+ availableHardwareAccelerations: string[],
+};
+
type PlaybackDevice = {
id: string,
name: string,
@@ -115,4 +125,6 @@ type StreamingServer = {
torrent: [string, Loadable] | null,
statistics: Loadable | null,
playbackDevices: Loadable | null,
+ networkInfo: Loadable | null,
+ deviceInfo: Loadable | null,
};
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index 8f6d55730..06bbb0e19 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -68,3 +68,10 @@ type AudioTrack = {
lang: string,
origin: string,
};
+
+type Rating = 'liked' | 'loved' | null;
+
+type RatingInfo = {
+ metaId: string,
+ status: Rating,
+};
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
+ });
+ });
+}