diff --git a/package-lock.json b/package-lock.json index b8631f786..f0f5755d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "@babel/runtime": "7.16.0", "@sentry/browser": "6.13.3", "@stremio/stremio-colors": "5.0.1", - "@stremio/stremio-core-web": "0.48.0", - "@stremio/stremio-icons": "5.2.0", + "@stremio/stremio-core-web": "0.48.1", + "@stremio/stremio-icons": "5.4.0", "@stremio/stremio-video": "0.0.46", "a-color-picker": "1.2.1", "bowser": "2.11.0", @@ -36,7 +36,7 @@ "react-i18next": "^12.1.1", "react-is": "18.2.0", "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "github:Stremio/stremio-translations#57d66ecc8e2df4e73a613dc5e17123ce62ae63f7", + "stremio-translations": "github:Stremio/stremio-translations#f666d9a97cafa5aa150878b5c51a2896b5f4f1b2", "url": "0.11.0", "use-long-press": "^3.1.5" }, @@ -3132,9 +3132,9 @@ "license": "MIT" }, "node_modules/@stremio/stremio-core-web": { - "version": "0.48.0", - "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.0.tgz", - "integrity": "sha512-UEVxb5weAIZ22Hz0iNKM8O1QkALcLShG9AyCe1P2WhZhyiridbwE7MtP5itBtLcLm9f/D6UeRrpUWMCS01n18Q==", + "version": "0.48.1", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.1.tgz", + "integrity": "sha512-bdWxBuuOOC0NdG1Mg60lEhpK7Bw/Ea6D89bRcvIvM3WnJrUpGA4jbx4xWj3KQRM08PM3WWCY9/FzctlWCxFMRg==", "dependencies": { "@babel/runtime": "7.24.1" } @@ -3158,9 +3158,15 @@ "license": "MIT" }, "node_modules/@stremio/stremio-icons": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.2.0.tgz", - "integrity": "sha512-rABlPBTFF17QcSm/4IizVoE/jh+REt+waqA0RvIxuGjQppXlvj7CalqVvTam0CC2wgY00zNG1v/9kVHUDVzo4Q==" + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.0.tgz", + "integrity": "sha512-rRWNER+wLgMjxd6sKT0MMq4lzXDOobY3GNdT3NDeeymBtB/CD0YmYqQuUOyYDjEZ1btIbNaniUOBoPW9d3ZQ8A==", + "workspaces": [ + "react", + "react-native", + "solid", + "angularjs" + ] }, "node_modules/@stremio/stremio-video": { "version": "0.0.46", @@ -13732,9 +13738,8 @@ }, "node_modules/stremio-translations": { "version": "1.44.9", - "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#57d66ecc8e2df4e73a613dc5e17123ce62ae63f7", - "integrity": "sha512-Q3Q++Tx3quu71tgTfS8CEP6CajdGyig92SdtRyGMsLHHkgBgzP9ggYBUHVbKAfXcKUegABIkW8CxMueEw758Xg==", - "license": "MIT" + "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#f666d9a97cafa5aa150878b5c51a2896b5f4f1b2", + "integrity": "sha512-SzaIGUMqQuMAq58sI9L/RKSs5O4eF8VKPMqnWFddBSg/tZOU9xuNYqjRPKT07cp8MRfzzGQmCKMByozTYfjdIA==" }, "node_modules/string_decoder": { "version": "1.1.1", diff --git a/package.json b/package.json index 29d20645f..e61cd72cd 100755 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "@babel/runtime": "7.16.0", "@sentry/browser": "6.13.3", "@stremio/stremio-colors": "5.0.1", - "@stremio/stremio-core-web": "0.48.0", - "@stremio/stremio-icons": "5.2.0", + "@stremio/stremio-core-web": "0.48.1", + "@stremio/stremio-icons": "5.4.0", "@stremio/stremio-video": "0.0.46", "a-color-picker": "1.2.1", "bowser": "2.11.0", @@ -40,7 +40,7 @@ "react-i18next": "^12.1.1", "react-is": "18.2.0", "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "github:Stremio/stremio-translations#57d66ecc8e2df4e73a613dc5e17123ce62ae63f7", + "stremio-translations": "github:Stremio/stremio-translations#f666d9a97cafa5aa150878b5c51a2896b5f4f1b2", "url": "0.11.0", "use-long-press": "^3.1.5" }, diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index af8426600..727c152fa 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -1,6 +1,7 @@ // Copyright (C) 2017-2023 Smart code 203358507 const CHROMECAST_RECEIVER_APP_ID = '1634F54B'; +const DEFAULT_STREAMING_SERVER_URL = 'http://127.0.0.1:11470/'; const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250]; const SUBTITLES_FONTS = ['PlusJakartaSans', 'Arial', 'Halvetica', 'Times New Roman', 'Verdana', 'Courier', 'Lucida Console', 'sans-serif', 'serif', 'monospace']; const SEEK_TIME_DURATIONS = [3000, 5000, 10000, 15000, 20000, 30000]; @@ -97,6 +98,7 @@ const WHITELISTED_HOSTS = ['stremio.com', 'strem.io', 'stremio.zendesk.com', 'go module.exports = { CHROMECAST_RECEIVER_APP_ID, + DEFAULT_STREAMING_SERVER_URL, SUBTITLES_SIZES, SUBTITLES_FONTS, SEEK_TIME_DURATIONS, diff --git a/src/common/Checkbox/index.js b/src/common/Checkbox/index.js deleted file mode 100644 index b185f6cbc..000000000 --- a/src/common/Checkbox/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const Checkbox = require('./Checkbox'); - -module.exports = Checkbox; diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js index 5db06f1d0..40cfbed06 100644 --- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js +++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js @@ -8,13 +8,13 @@ const { useTranslation } = require('react-i18next'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { useRouteFocused } = require('stremio-router'); const Button = require('stremio/common/Button'); -const TextInput = require('stremio/common/TextInput'); const useTorrent = require('stremio/common/useTorrent'); const { withCoreSuspender } = require('stremio/common/CoreSuspender'); const useSearchHistory = require('./useSearchHistory'); const useLocalSearch = require('./useLocalSearch'); const styles = require('./styles'); const useBinaryState = require('stremio/common/useBinaryState'); +const { default: TextInput } = require('stremio/common/TextInput'); const SearchBar = React.memo(({ className, query, active }) => { const { t } = useTranslation(); diff --git a/src/common/RadioButton/RadioButton.less b/src/common/RadioButton/RadioButton.less new file mode 100644 index 000000000..42e91b004 --- /dev/null +++ b/src/common/RadioButton/RadioButton.less @@ -0,0 +1,66 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; + +.radio-button { + display: flex; + align-items: center; + overflow: visible; + + .radio-container { + position: relative; + width: 1.75rem; + height: 1.75rem; + border: 3px solid var(--color-placeholder); + border-radius: 1rem; + background-color: transparent; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease-in-out; + cursor: pointer; + outline: none; + user-select: none; + margin-right: 0.75rem; + outline-width: var(--focus-outline-size); + outline-color: @color-surface-light5; + outline-offset: calc(-1 * var(--focus-outline-size)); + + input[type='radio'] { + opacity: 0; + width: 0; + height: 0; + position: absolute; + cursor: pointer; + } + + .inner-circle { + width: 1.25rem; + height: 1.25rem; + border-radius: 0.675rem; + border: 2px solid var(--secondary-background-color); + transition: opacity 0.2s ease-in-out; + background-color: transparent; + opacity: 0; + } + + &.disabled { + cursor: not-allowed; + } + + &.error { + border-color: var(--color-trakt); + } + + &.selected { + .inner-circle { + background-color: var(--primary-accent-color); + opacity: 1; + } + } + + &:focus { + outline-style: solid; + } + } +} diff --git a/src/common/RadioButton/RadioButton.tsx b/src/common/RadioButton/RadioButton.tsx new file mode 100644 index 000000000..e3cfd06bd --- /dev/null +++ b/src/common/RadioButton/RadioButton.tsx @@ -0,0 +1,58 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import React, { useCallback, ChangeEvent, KeyboardEvent } from 'react'; +import classNames from 'classnames'; +import styles from './RadioButton.less'; + +type Props = { + disabled?: boolean; + selected?: boolean; + className?: string; + onChange?: (checked: boolean) => void; + error?: string; +}; + +const RadioButton = ({ disabled, selected, className, onChange, error }: Props) => { + + const handleSelect = useCallback(({ target }: ChangeEvent) => { + if (!disabled && onChange) { + onChange(target.checked); + } + }, [disabled, onChange]); + + const onKeyDown = useCallback(({ key }: KeyboardEvent) => { + if ((key === 'Enter' || key === ' ') && !disabled) { + onChange && onChange(!selected); + } + }, [disabled, selected, onChange]); + + return ( +
+ +
+ ); +}; + +export default RadioButton; diff --git a/src/common/RadioButton/index.ts b/src/common/RadioButton/index.ts new file mode 100644 index 000000000..d2c11e9e5 --- /dev/null +++ b/src/common/RadioButton/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import RadioButton from './RadioButton'; + +export default RadioButton; diff --git a/src/common/SearchBar/SearchBar.js b/src/common/SearchBar/SearchBar.js index 3b7013aa0..23ad327e0 100644 --- a/src/common/SearchBar/SearchBar.js +++ b/src/common/SearchBar/SearchBar.js @@ -4,7 +4,7 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const { default: Icon } = require('@stremio/stremio-icons/react'); -const TextInput = require('stremio/common/TextInput'); +const { default: TextInput } = require('../TextInput'); const SearchBarPlaceholder = require('./SearchBarPlaceholder'); const styles = require('./styles'); diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js index 2d25682e4..4d49087c8 100644 --- a/src/common/SharePrompt/SharePrompt.js +++ b/src/common/SharePrompt/SharePrompt.js @@ -8,8 +8,8 @@ const { default: Icon } = require('@stremio/stremio-icons/react'); const { useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); const useToast = require('stremio/common/Toast/useToast'); +const { default: TextInput } = require('../TextInput'); const Button = require('stremio/common/Button'); -const TextInput = require('stremio/common/TextInput'); const styles = require('./styles'); const SharePrompt = ({ className, url }) => { diff --git a/src/common/TextInput/TextInput.js b/src/common/TextInput/TextInput.js deleted file mode 100644 index 742e87dfc..000000000 --- a/src/common/TextInput/TextInput.js +++ /dev/null @@ -1,43 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const React = require('react'); -const PropTypes = require('prop-types'); -const classnames = require('classnames'); -const styles = require('./styles'); - -const TextInput = React.forwardRef((props, ref) => { - const onKeyDown = React.useCallback((event) => { - if (typeof props.onKeyDown === 'function') { - props.onKeyDown(event); - } - - if (event.key === 'Enter' && !event.nativeEvent.submitPrevented && typeof props.onSubmit === 'function') { - props.onSubmit(event); - } - }, [props.onKeyDown, props.onSubmit]); - return ( - - ); -}); - -TextInput.displayName = 'TextInput'; - -TextInput.propTypes = { - className: PropTypes.string, - disabled: PropTypes.bool, - onKeyDown: PropTypes.func, - onSubmit: PropTypes.func -}; - -module.exports = TextInput; diff --git a/src/common/TextInput/TextInput.tsx b/src/common/TextInput/TextInput.tsx new file mode 100644 index 000000000..b409f229c --- /dev/null +++ b/src/common/TextInput/TextInput.tsx @@ -0,0 +1,49 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import React from 'react'; +import classnames from 'classnames'; +import styles from './styles.less'; + +type Props = React.InputHTMLAttributes & { + className?: string; + disabled?: boolean; + onKeyDown?: (event: React.KeyboardEvent) => void; + onSubmit?: (event: React.KeyboardEvent) => void; +}; + +const TextInput = React.forwardRef((props, ref) => { + const { onSubmit, className, disabled, ...rest } = props; + + const onKeyDown = React.useCallback((event: React.KeyboardEvent) => { + if (typeof props.onKeyDown === 'function') { + props.onKeyDown(event); + } + + if ( + event.key === 'Enter' && + !(event.nativeEvent as any).submitPrevented && + typeof onSubmit === 'function' + ) { + onSubmit(event); + } + }, [props.onKeyDown, onSubmit]); + + return ( + + ); +}); + +TextInput.displayName = 'TextInput'; + +export default TextInput; diff --git a/src/common/TextInput/index.js b/src/common/TextInput/index.js deleted file mode 100644 index a61d9ca79..000000000 --- a/src/common/TextInput/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const TextInput = require('./TextInput'); - -module.exports = TextInput; diff --git a/src/common/TextInput/index.ts b/src/common/TextInput/index.ts new file mode 100644 index 000000000..60cbf8e67 --- /dev/null +++ b/src/common/TextInput/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import TextInput from './TextInput'; + +export default TextInput; diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Toggle/Toggle.js similarity index 68% rename from src/common/Checkbox/Checkbox.js rename to src/common/Toggle/Toggle.js index a823ce488..837944747 100644 --- a/src/common/Checkbox/Checkbox.js +++ b/src/common/Toggle/Toggle.js @@ -6,21 +6,21 @@ const classnames = require('classnames'); const Button = require('stremio/common/Button'); const styles = require('./styles'); -const Checkbox = React.forwardRef(({ className, checked, children, ...props }, ref) => { +const Toggle = React.forwardRef(({ className, checked, children, ...props }, ref) => { return ( - ); }); -Checkbox.displayName = 'Checkbox'; +Toggle.displayName = 'Toggle'; -Checkbox.propTypes = { +Toggle.propTypes = { className: PropTypes.string, checked: PropTypes.bool, children: PropTypes.node }; -module.exports = Checkbox; +module.exports = Toggle; diff --git a/src/common/Toggle/index.js b/src/common/Toggle/index.js new file mode 100644 index 000000000..ae6c69d8a --- /dev/null +++ b/src/common/Toggle/index.js @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const Toggle = require('./Toggle'); + +module.exports = Toggle; diff --git a/src/common/Checkbox/styles.less b/src/common/Toggle/styles.less similarity index 98% rename from src/common/Checkbox/styles.less rename to src/common/Toggle/styles.less index d8224db53..e1c2e9d0a 100644 --- a/src/common/Checkbox/styles.less +++ b/src/common/Toggle/styles.less @@ -8,7 +8,7 @@ @thumb-size: calc(@height - @thumb-margin); -.checkbox-container { +.toggle-container { position: relative; .toggle { diff --git a/src/common/index.js b/src/common/index.js index 8deae04fe..0605a3f9b 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -3,7 +3,7 @@ const AddonDetailsModal = require('./AddonDetailsModal'); const { default: BottomSheet } = require('./BottomSheet'); const Button = require('./Button'); -const Checkbox = require('./Checkbox'); +const Toggle = require('./Toggle'); const { default: Chips } = require('./Chips'); const ColorInput = require('./ColorInput'); const ContinueWatchingItem = require('./ContinueWatchingItem'); @@ -26,7 +26,7 @@ const SearchBar = require('./SearchBar'); const StreamingServerWarning = require('./StreamingServerWarning'); const SharePrompt = require('./SharePrompt'); const Slider = require('./Slider'); -const TextInput = require('./TextInput'); +const { default: TextInput } = require('./TextInput'); const { ToastProvider, useToast } = require('./Toast'); const { TooltipProvider, Tooltip } = require('./Tooltips'); const comparatorWithPriorities = require('./comparatorWithPriorities'); @@ -53,7 +53,7 @@ module.exports = { AddonDetailsModal, BottomSheet, Button, - Checkbox, + Toggle, Chips, ColorInput, ContinueWatchingItem, diff --git a/src/routes/Intro/ConsentCheckbox/index.js b/src/routes/Intro/ConsentCheckbox/index.js deleted file mode 100644 index 85376bae3..000000000 --- a/src/routes/Intro/ConsentCheckbox/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const ConsentCheckbox = require('./ConsentCheckbox'); - -module.exports = ConsentCheckbox; diff --git a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js b/src/routes/Intro/ConsentToggle/ConsentToggle.js similarity index 74% rename from src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js rename to src/routes/Intro/ConsentToggle/ConsentToggle.js index cdb5dd189..76d1f38c9 100644 --- a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js +++ b/src/routes/Intro/ConsentToggle/ConsentToggle.js @@ -3,11 +3,11 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); -const { Button, Checkbox } = require('stremio/common'); +const { Button, Toggle } = require('stremio/common'); const styles = require('./styles'); -const ConsentCheckbox = React.forwardRef(({ className, label, link, href, onToggle, ...props }, ref) => { - const checkboxOnClick = React.useCallback((event) => { +const ConsentToggle = React.forwardRef(({ className, label, link, href, onToggle, ...props }, ref) => { + const toggleOnClick = React.useCallback((event) => { if (typeof props.onClick === 'function') { props.onClick(event); } @@ -24,7 +24,7 @@ const ConsentCheckbox = React.forwardRef(({ className, label, link, href, onTogg event.nativeEvent.togglePrevented = true; }, []); return ( - +
{label} {' '} @@ -37,13 +37,13 @@ const ConsentCheckbox = React.forwardRef(({ className, label, link, href, onTogg null }
- + ); }); -ConsentCheckbox.displayName = 'ConsentCheckbox'; +ConsentToggle.displayName = 'ConsentToggle'; -ConsentCheckbox.propTypes = { +ConsentToggle.propTypes = { className: PropTypes.string, checked: PropTypes.bool, label: PropTypes.string, @@ -53,4 +53,4 @@ ConsentCheckbox.propTypes = { onClick: PropTypes.func }; -module.exports = ConsentCheckbox; +module.exports = ConsentToggle; diff --git a/src/routes/Intro/ConsentToggle/index.js b/src/routes/Intro/ConsentToggle/index.js new file mode 100644 index 000000000..8edfe4a27 --- /dev/null +++ b/src/routes/Intro/ConsentToggle/index.js @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const ConsentToggle = require('./ConsentToggle'); + +module.exports = ConsentToggle; diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentToggle/styles.less similarity index 90% rename from src/routes/Intro/ConsentCheckbox/styles.less rename to src/routes/Intro/ConsentToggle/styles.less index 2bf136924..6bd2ca2e8 100644 --- a/src/routes/Intro/ConsentCheckbox/styles.less +++ b/src/routes/Intro/ConsentToggle/styles.less @@ -2,11 +2,11 @@ @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; -:import('~stremio/common/Checkbox/styles.less') { +:import('~stremio/common/Toggle/styles.less') { checkbox-icon: icon; } -.consent-checkbox-container { +.consent-toggle-container { display: flex; flex-direction: row; align-items: center; diff --git a/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js b/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js index 61c558cb0..36d26e880 100644 --- a/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js +++ b/src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js @@ -2,7 +2,7 @@ const React = require('react'); const PropTypes = require('prop-types'); -const { TextInput } = require('stremio/common'); +const { default: TextInput } = require('stremio/common/TextInput'); const CredentialsTextInput = React.forwardRef((props, ref) => { const onKeyDown = React.useCallback((event) => { diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js index bcdd74aff..8ac2785c6 100644 --- a/src/routes/Intro/Intro.js +++ b/src/routes/Intro/Intro.js @@ -9,7 +9,7 @@ const { Modal, useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); const { Button, Image, useBinaryState } = require('stremio/common'); const CredentialsTextInput = require('./CredentialsTextInput'); -const ConsentCheckbox = require('./ConsentCheckbox'); +const ConsentToggle = require('./ConsentToggle'); const PasswordResetModal = require('./PasswordResetModal'); const useFacebookLogin = require('./useFacebookLogin'); const styles = require('./styles'); @@ -307,27 +307,27 @@ const Intro = ({ queryParams }) => { onChange={confirmPasswordOnChange} onSubmit={confirmPasswordOnSubmit} /> - - - { showNotificationsToggle && libraryItem ? - + {t('DETAIL_RECEIVE_NOTIF_SERIES')} - + : null } diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less index e1b2215ae..9f9a7edee 100644 --- a/src/routes/MetaDetails/VideosList/styles.less +++ b/src/routes/MetaDetails/VideosList/styles.less @@ -36,7 +36,7 @@ } } - .notifications-checkbox { + .notifications-toggle { flex: none; display: flex; flex-direction: row; diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index b0631a3f3..a68a542bf 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -44,7 +44,7 @@ const ControlBar = ({ }) => { const { chromecast } = useServices(); const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active); - const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false); + const [buttonsMenuOpen, , , toggleButtonsMenu] = useBinaryState(false); const onSubtitlesButtonMouseDown = React.useCallback((event) => { event.nativeEvent.subtitlesMenuClosePrevented = true; }, []); @@ -141,7 +141,7 @@ const ControlBar = ({ onVolumeChangeRequested={onVolumeChangeRequested} />
-
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 2ed0a1ab7..f393f986d 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -7,11 +7,12 @@ const { useTranslation } = require('react-i18next'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); -const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, usePlatform, useStreamingServer, useBinaryState, withCoreSuspender, useToast } = require('stremio/common'); +const { Button, Toggle, MainNavBars, Multiselect, ColorInput, useProfile, usePlatform, useStreamingServer, withCoreSuspender, useToast } = require('stremio/common'); 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'; @@ -35,16 +36,15 @@ const Settings = () => { subtitlesBackgroundColorInput, subtitlesOutlineColorInput, audioLanguageSelect, - surroundSoundCheckbox, + surroundSoundToggle, seekTimeDurationSelect, seekShortTimeDurationSelect, - escExitFullscreenCheckbox, + escExitFullscreenToggle, playInExternalPlayerSelect, nextVideoPopupDurationSelect, - bingeWatchingCheckbox, - playInBackgroundCheckbox, - hardwareDecodingCheckbox, - streamingServerUrlInput + bingeWatchingToggle, + playInBackgroundToggle, + hardwareDecodingToggle, } = useProfileSettingsInputs(profile); const { streamingServerRemoteUrlInput, @@ -53,34 +53,11 @@ const Settings = () => { torrentProfileSelect, transcodingProfileSelect, } = useStreamingServerSettingsInputs(streamingServer); - const [configureServerUrlModalOpen, openConfigureServerUrlModal, closeConfigureServerUrlModal] = useBinaryState(false); - const configureServerUrlInputRef = React.useRef(null); - const configureServerUrlOnSubmit = React.useCallback(() => { - streamingServerUrlInput.onChange(configureServerUrlInputRef.current.value); - closeConfigureServerUrlModal(); - }, [streamingServerUrlInput]); 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 configureServerUrlModalButtons = React.useMemo(() => { - return [ - { - className: styles['cancel-button'], - label: 'Cancel', - props: { - onClick: closeConfigureServerUrlModal - } - }, - { - label: 'Submit', - props: { - onClick: configureServerUrlOnSubmit, - } - } - ]; - }, [configureServerUrlOnSubmit]); const logoutButtonOnClick = React.useCallback(() => { core.transport.dispatch({ action: 'Ctx', @@ -118,14 +95,6 @@ const Settings = () => { const exportDataOnClick = React.useCallback(() => { loadDataExport(); }, []); - const reloadStreamingServer = React.useCallback(() => { - core.transport.dispatch({ - action: 'StreamingServer', - args: { - action: 'Reload' - } - }); - }, []); const onCopyRemoteUrlClick = React.useCallback(() => { if (streamingServer.remoteUrl) { navigator.clipboard.writeText(streamingServer.remoteUrl); @@ -192,7 +161,6 @@ const Settings = () => { if (routeFocused) { updateSelectedSectionId(); } - closeConfigureServerUrlModal(); }, [routeFocused]); return ( @@ -369,9 +337,9 @@ const Settings = () => {
{ t('SETTINGS_FULLSCREEN_EXIT') }
-
: @@ -432,10 +400,10 @@ const Settings = () => {
{ t('SETTINGS_SURROUND_SOUND') }
-
@@ -466,11 +434,11 @@ const Settings = () => {
{ t('SETTINGS_PLAY_IN_BACKGROUND') }
- @@ -483,9 +451,9 @@ const Settings = () => {
{ t('AUTO_PLAY') }
-
@@ -517,53 +485,17 @@ const Settings = () => {
{ t('SETTINGS_HWDEC') }
-
{ t('SETTINGS_NAV_STREAMING') }
-
- -
-
-
-
{ t('STATUS') }
-
-
-
- { - streamingServer.settings === null ? - 'NotLoaded' - : - streamingServer.settings.type === 'Ready' ? - t('SETTINGS_SERVER_STATUS_ONLINE') - : - streamingServer.settings.type === 'Err' ? - t('SETTINGS_SERVER_STATUS_ERROR') - : - streamingServer.settings.type - } -
-
-
-
-
-
Url
-
-
-
{streamingServerUrlInput.value}
- -
-
+ { streamingServerRemoteUrlInput.value !== null ?
@@ -779,26 +711,6 @@ const Settings = () => {
- { - configureServerUrlModalOpen ? - - - - : - null - } ); }; diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.less b/src/routes/Settings/URLsManager/AddItem/AddItem.less new file mode 100644 index 000000000..b31ce9ac8 --- /dev/null +++ b/src/routes/Settings/URLsManager/AddItem/AddItem.less @@ -0,0 +1,89 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +@import (reference) '~stremio/common/screen-sizes.less'; + +.add-item { + display: flex; + padding: 0.5rem 1.5rem; + gap: 1rem; + border-radius: var(--border-radius); + transition: 0.3s all ease-in-out; + background-color: transparent; + border: 2px solid transparent; + justify-content: space-between; + position: relative; + + .input { + background-color: var(--overlay-color); + border-radius: var(--border-radius); + color: var(--primary-foreground-color); + padding: 0.5rem 0.75rem; + border: 1px solid transparent; + width: 70%; + + &:focus { + border: 1px solid var(--primary-foreground-color); + } + } + + .actions { + display: flex; + gap: 0.25rem; + margin-right: 0; + + .add, .cancel { + display: flex; + gap: 0.5rem; + padding: 0.25rem; + align-items: center; + justify-content: center; + background-color: transparent; + transition: 0.3s all ease-in-out; + border-radius: var(--border-radius); + width: 3rem; + opacity: 0.6; + + .icon { + width: 2rem; + height: 2rem; + color: var(--primary-foreground-color); + } + + &:hover { + opacity: 1; + background-color: var(--overlay-color); + } + } + + .add { + .icon { + width: 1.8rem; + height: 1.8rem; + } + &:hover { + .icon { + color: var(--secondary-accent-color); + } + } + } + + .cancel { + &:hover { + .icon { + color: var(--color-trakt); + } + } + } + } + + &:hover { + border: 2px solid transparent; + background-color: var(--overlay-color); + } +} + +@media only screen and (max-width: @minimum) { + .add-item { + padding: 0.5rem; + } +} \ No newline at end of file diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.tsx b/src/routes/Settings/URLsManager/AddItem/AddItem.tsx new file mode 100644 index 000000000..5220b0969 --- /dev/null +++ b/src/routes/Settings/URLsManager/AddItem/AddItem.tsx @@ -0,0 +1,46 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import React, { ChangeEvent, useCallback, useState } from 'react'; +import Button from 'stremio/common/Button'; +import Icon from '@stremio/stremio-icons/react'; +import TextInput from 'stremio/common/TextInput'; +import styles from './AddItem.less'; + +type Props = { + onCancel: () => void; + handleAddUrl: (url: string) => void; +}; + +const AddItem = ({ onCancel, handleAddUrl }: Props) => { + const [inputValue, setInputValue] = useState(''); + + const handleValueChange = useCallback(({ target }: ChangeEvent) => { + setInputValue(target.value); + }, []); + + const onSumbit = useCallback(() => { + handleAddUrl(inputValue); + }, [inputValue]); + + return ( +
+ +
+ + +
+
+ ); +}; + +export default AddItem; diff --git a/src/routes/Settings/URLsManager/AddItem/index.ts b/src/routes/Settings/URLsManager/AddItem/index.ts new file mode 100644 index 000000000..831718c36 --- /dev/null +++ b/src/routes/Settings/URLsManager/AddItem/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import AddItem from './AddItem'; + +export default AddItem; diff --git a/src/routes/Settings/URLsManager/Item/Item.less b/src/routes/Settings/URLsManager/Item/Item.less new file mode 100644 index 000000000..81c6d6c17 --- /dev/null +++ b/src/routes/Settings/URLsManager/Item/Item.less @@ -0,0 +1,131 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +@import (reference) '~stremio/common/screen-sizes.less'; + +.item { + display: flex; + padding: 1rem 1.5rem; + border-radius: var(--border-radius); + transition: 0.3s all ease-in-out; + background-color: transparent; + border: 2px solid transparent; + justify-content: space-between; + position: relative; + + .content { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + max-width: 60%; + + .selectable { + overflow: visible; + } + + .label { + color: var(--primary-foreground-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .actions { + display: flex; + gap: 1rem; + margin-right: 5rem; + + .status { + display: flex; + gap: 0.5rem; + align-items: center; + justify-content: center; + + .icon { + width: 0.75rem; + height: 0.75rem; + border-radius: 1rem; + + &.ready { + background-color: var(--secondary-accent-color); + } + + &.error { + background-color: var(--color-trakt); + } + } + + .label { + font-size: 1rem; + color: var(--primary-foreground-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .delete { + position: absolute; + display: flex; + right: 1.5rem; + top: 50%; + gap: 0.5rem; + padding: 0.5rem 0.25rem; + align-items: center; + justify-content: center; + background-color: transparent; + transition: 0.3s all ease-in-out; + border-radius: var(--border-radius); + transform: translateY(-50%); + width: 3rem; + + .icon { + width: 1.5rem; + height: 1.5rem; + opacity: 0; + transition: 0.3s all ease-in-out; + color: var(--primary-foreground-color); + } + + &:hover, &:focus { + background-color: var(--overlay-color); + + .icon { + color: var(--color-trakt); + opacity: 1 !important; + } + } + } + } + + &:hover { + background-color: var(--overlay-color); + + .actions { + .delete { + .icon { + opacity: 0.6; + } + } + } + } +} + +@media only screen and (max-width: @minimum) { + .item { + padding: 1rem 0.5rem; + + .actions { + margin-right: 4rem; + + .delete { + right: 0.5rem; + + .icon { + opacity: 0.6; + } + } + } + } +} \ No newline at end of file diff --git a/src/routes/Settings/URLsManager/Item/Item.tsx b/src/routes/Settings/URLsManager/Item/Item.tsx new file mode 100644 index 000000000..7f840686c --- /dev/null +++ b/src/routes/Settings/URLsManager/Item/Item.tsx @@ -0,0 +1,77 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import React, { useCallback, useMemo } from 'react'; +import { useProfile } from 'stremio/common'; +import { DEFAULT_STREAMING_SERVER_URL } from 'stremio/common/CONSTANTS'; +import { useTranslation } from 'react-i18next'; +import Button from 'stremio/common/Button'; +import useStreamingServer from 'stremio/common/useStreamingServer'; +import Icon from '@stremio/stremio-icons/react'; +import styles from './Item.less'; +import classNames from 'classnames'; +import RadioButton from 'stremio/common/RadioButton/RadioButton'; +import useStreamingServerUrls from '../useStreamingServerUrls'; + +type Props = { + url: string; +}; + +const Item = ({ url }: Props) => { + const { t } = useTranslation(); + const profile = useProfile(); + const streamingServer = useStreamingServer(); + const { deleteServerUrl, selectServerUrl } = useStreamingServerUrls(); + + const selected = useMemo(() => profile.settings.streamingServerUrl === url, [url, profile.settings]); + const defaultUrl = useMemo(() => url === DEFAULT_STREAMING_SERVER_URL, [url]); + + const handleDelete = useCallback(() => { + deleteServerUrl(url); + selectServerUrl(DEFAULT_STREAMING_SERVER_URL); + }, [url]); + + const handleSelect = useCallback(() => { + selectServerUrl(url); + }, [url]); + + return ( +
+
+ +
{url}
+
+
+ { + selected ? +
+
+
+ { + streamingServer.settings === null ? + 'NotLoaded' + : + streamingServer.settings.type === 'Ready' ? + t('SETTINGS_SERVER_STATUS_ONLINE') + : + streamingServer.settings.type === 'Err' ? + t('SETTINGS_SERVER_STATUS_ERROR') + : + streamingServer.settings.type + } +
+
+ : null + } + { + !defaultUrl ? + + : null + } +
+
+ ); +}; + +export default Item; diff --git a/src/routes/Settings/URLsManager/Item/index.ts b/src/routes/Settings/URLsManager/Item/index.ts new file mode 100644 index 000000000..1cf96beb5 --- /dev/null +++ b/src/routes/Settings/URLsManager/Item/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import Item from './Item'; + +export default Item; diff --git a/src/routes/Settings/URLsManager/URLsManager.less b/src/routes/Settings/URLsManager/URLsManager.less new file mode 100644 index 000000000..440ec39b3 --- /dev/null +++ b/src/routes/Settings/URLsManager/URLsManager.less @@ -0,0 +1,92 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +.wrapper { + display: flex; + flex-direction: column; + max-width: 35rem; + margin-bottom: 2rem; + + .header { + display: flex; + justify-content: space-around; + align-items: center; + + .label { + font-size: 1rem; + color: var(--primary-foreground-color); + font-weight: 400; + opacity: 0.6; + } + } + + .content { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1.5rem 0; + } + + .item { + display: flex; + padding: 1rem 1.5rem; + border-radius: var(--border-radius); + transition: 0.3s all ease-in-out; + background-color: transparent; + border: 2px solid transparent; + justify-content: space-between; + position: relative; + } + + .footer { + display: flex; + justify-content: space-between; + + .add-url { + display: flex; + gap: 0.5rem; + align-items: center; + justify-content: center; + padding: 0.5rem 1.5rem; + background-color: var(--secondary-accent-color); + transition: 0.3s all ease-in-out; + border-radius: 1.5rem; + color: var(--primary-foreground-color); + border: 2px solid transparent; + + .icon { + width: 1rem; + height: 1rem; + color: var(--primary-foreground-color); + } + + &:hover { + background-color: transparent; + border: 2px solid var(--primary-foreground-color); + } + } + + .reload { + display: flex; + gap: 0.5rem; + align-items: center; + justify-content: center; + padding: 0.5rem 1.5rem; + background-color: var(--overlay-color); + border-radius: 1.5rem; + transition: 0.3s all ease-in-out; + color: var(--primary-foreground-color); + border: 2px solid transparent; + + .icon { + width: 1rem; + height: 1rem; + color: var(--primary-foreground-color); + } + + &:hover { + background-color: transparent; + border: 2px solid var(--primary-foreground-color); + } + } + } +} \ No newline at end of file diff --git a/src/routes/Settings/URLsManager/URLsManager.tsx b/src/routes/Settings/URLsManager/URLsManager.tsx new file mode 100644 index 000000000..33fb99713 --- /dev/null +++ b/src/routes/Settings/URLsManager/URLsManager.tsx @@ -0,0 +1,62 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import React, { useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import styles from './URLsManager.less'; +import Button from 'stremio/common/Button'; +import Item from './Item'; +import AddItem from './AddItem'; +import Icon from '@stremio/stremio-icons/react'; +import useStreamingServerUrls from './useStreamingServerUrls'; + +const URLsManager = () => { + const { t } = useTranslation(); + const [addMode, setAddMode] = useState(false); + const { streamingServerUrls, addServerUrl, reloadServer } = useStreamingServerUrls(); + + const onAdd = () => { + setAddMode(true); + }; + + const onCancel = () => { + setAddMode(false); + }; + + const handleAddUrl = useCallback((url: string) => { + addServerUrl(url); + setAddMode(false); + }, []); + + return ( +
+
+
URL
+
{t('STATUS')}
+
+
+ { + streamingServerUrls.map((item: StreamingServerUrl) => ( + + )) + } + { + addMode ? + + : null + } +
+
+ + +
+
+ ); +}; + +export default URLsManager; diff --git a/src/routes/Settings/URLsManager/index.ts b/src/routes/Settings/URLsManager/index.ts new file mode 100644 index 000000000..c8874c0a4 --- /dev/null +++ b/src/routes/Settings/URLsManager/index.ts @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import URLsManager from './URLsManager'; + +export default URLsManager; diff --git a/src/routes/Settings/URLsManager/useStreamingServerUrls.js b/src/routes/Settings/URLsManager/useStreamingServerUrls.js new file mode 100644 index 000000000..401973d4e --- /dev/null +++ b/src/routes/Settings/URLsManager/useStreamingServerUrls.js @@ -0,0 +1,89 @@ +// Copyright (C) 2017-2024 Smart code 203358507 + +import { useCallback } from 'react'; +import { useModelState, useToast } from 'stremio/common'; +import useProfile from 'stremio/common/useProfile'; +import { useServices } from 'stremio/services'; + +const useStreamingServerUrls = () => { + const { core } = useServices(); + const profile = useProfile(); + const toast = useToast(); + const ctx = useModelState({ model: 'ctx' }); + const streamingServerUrls = ctx.streamingServerUrls; + + const addServerUrl = useCallback((url) => { + const isValidUrl = (url) => { + try { + new URL(url); + return true; + } catch (_) { + return false; + } + }; + + if (isValidUrl(url)) { + toast.show({ + type: 'success', + title: 'New URL added', + message: 'The new URL has been added successfully', + timeout: 4000 + }); + + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'AddServerUrl', + args: url, + } + }); + } else { + toast.show({ + type: 'error', + title: 'Invalid URL', + message: 'Please provide a valid URL', + timeout: 4000 + }); + } + }, []); + + const deleteServerUrl = useCallback((url) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'DeleteServerUrl', + args: url, + } + }); + }, []); + const selectServerUrl = useCallback((url) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UpdateSettings', + args: { + ...profile.settings, + streamingServerUrl: url + } + } + }); + }, [profile.settings]); + const reloadServer = useCallback(() => { + core.transport.dispatch({ + action: 'StreamingServer', + args: { + action: 'Reload' + } + }); + }, []); + + return { + streamingServerUrls, + addServerUrl, + deleteServerUrl, + selectServerUrl, + reloadServer + }; +}; + +export default useStreamingServerUrls; diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 7c9444509..a8dd1a990 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -3,7 +3,7 @@ @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; -:import('~stremio/common/Checkbox/styles.less') { +:import('~stremio/common/Toggle/styles.less') { checkbox-icon: icon; } @@ -12,11 +12,6 @@ multiselect-label: label; } -:import('~stremio/common/ModalDialog/styles.less') { - configure-server-url-modal-content: modal-dialog-content; - cancel-button-label: label; -} - .settings-container { width: 100%; height: 100%; @@ -407,48 +402,6 @@ } } -.configure-server-url-modal-container { - .configure-server-url-modal-content { - width: 30rem; - - .server-url-input { - width: 100%; - padding: 1rem; - color: var(--primary-foreground-color); - border-radius: var(--border-radius); - background-color: var(--overlay-color); - outline: var(--focus-outline-size) solid var(--overlay-color); - outline-offset: calc(-1 * var(--focus-outline-size)); - - &:hover { - outline-color: var(--primary-foreground-color); - } - - &:focus { - outline-color: var(--primary-foreground-color); - } - } - } - - .cancel-button { - background-color: transparent; - opacity: 0.3; - - &:hover { - outline: var(--focus-outline-size) solid var(--primary-foreground-color) inset; - opacity: 1; - } - - &:focus { - outline-color: var(--primary-foreground-color); - } - - .cancel-button-label { - color: var(--primary-foreground-color); - } - } -} - @media only screen and (max-width: @xsmall) { .settings-container { .settings-content { @@ -494,10 +447,4 @@ } } } - - .configure-server-url-modal-container { - .configure-server-url-modal-content { - width: auto; - } - } } \ No newline at end of file diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index a90d0d483..d36b169f9 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -136,7 +136,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const surroundSoundCheckbox = React.useMemo(() => ({ + const surroundSoundToggle = React.useMemo(() => ({ checked: profile.settings.surroundSound, onClick: () => { core.transport.dispatch({ @@ -151,7 +151,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const escExitFullscreenCheckbox = React.useMemo(() => ({ + const escExitFullscreenToggle = React.useMemo(() => ({ checked: profile.settings.escExitFullscreen, onClick: () => { core.transport.dispatch({ @@ -261,7 +261,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const bingeWatchingCheckbox = React.useMemo(() => ({ + const bingeWatchingToggle = React.useMemo(() => ({ checked: profile.settings.bingeWatching, onClick: () => { core.transport.dispatch({ @@ -276,7 +276,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const playInBackgroundCheckbox = React.useMemo(() => ({ + const playInBackgroundToggle = React.useMemo(() => ({ checked: profile.settings.playInBackground, onClick: () => { core.transport.dispatch({ @@ -291,7 +291,7 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const hardwareDecodingCheckbox = React.useMemo(() => ({ + const hardwareDecodingToggle = React.useMemo(() => ({ checked: profile.settings.hardwareDecoding, onClick: () => { core.transport.dispatch({ @@ -306,21 +306,6 @@ const useProfileSettingsInputs = (profile) => { }); } }), [profile.settings]); - const streamingServerUrlInput = React.useMemo(() => ({ - value: profile.settings.streamingServerUrl, - onChange: (value) => { - core.transport.dispatch({ - action: 'Ctx', - args: { - action: 'UpdateSettings', - args: { - ...profile.settings, - streamingServerUrl: value - } - } - }); - } - }), [profile.settings]); return { interfaceLanguageSelect, subtitlesLanguageSelect, @@ -329,16 +314,15 @@ const useProfileSettingsInputs = (profile) => { subtitlesBackgroundColorInput, subtitlesOutlineColorInput, audioLanguageSelect, - surroundSoundCheckbox, - escExitFullscreenCheckbox, + surroundSoundToggle, + escExitFullscreenToggle, seekTimeDurationSelect, seekShortTimeDurationSelect, playInExternalPlayerSelect, nextVideoPopupDurationSelect, - bingeWatchingCheckbox, - playInBackgroundCheckbox, - hardwareDecodingCheckbox, - streamingServerUrlInput + bingeWatchingToggle, + playInBackgroundToggle, + hardwareDecodingToggle, }; }; diff --git a/src/types/models/Ctx.d.ts b/src/types/models/Ctx.d.ts index fbb6caee4..ffb5d7f0a 100644 --- a/src/types/models/Ctx.d.ts +++ b/src/types/models/Ctx.d.ts @@ -67,8 +67,16 @@ type SearchHistoryItem = { type SearchHistory = SearchHistoryItem[]; +type StreamingServerUrl = { + url: string, + mtime: Date, +}; + +type StreamingServerUrls = StreamingServerUrl[]; + type Ctx = { profile: Profile, notifications: Notifications, searchHistory: SearchHistory, + streamingServerUrls: StreamingServerUrls, };