Feat: Manage multiple streaming URLs in the Settings

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": "https://stremio.github.io/stremio-core/stremio-core-web/feat/streming-server-urls-bucket/dev/stremio-stremio-core-web-0.47.8.tgz",
+        "@stremio/stremio-icons": "5.4.0",
         "@stremio/stremio-video": "0.0.46",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",

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,

src/common/Checkbox/Checkbox.less

@@ -0,0 +1,86 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+.checkbox {
+    display: flex;
+    align-items: center;
+
+    label {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .checkbox-checked {
+            .checkbox-container {
+                background-color: var(--primary-accent-color);
+                border-color: var(--primary-accent-color);
+            }
+
+            .checkbox-icon {
+                color: var(--secondary-foreground-color);
+            }
+        }
+
+        .checkbox-unchecked {
+            .checkbox-container {
+                background-color: transparent;
+                border-color: var(--primary-accent-color);
+            }
+        }
+
+        .checkbox-disabled {
+            cursor: not-allowed;
+
+            .checkbox-container {
+                cursor: not-allowed;
+            }
+
+            .checkbox-label {
+                color: var(--primary-foreground-color);
+                opacity: 0.6;
+            }
+        }
+
+        .checkbox-error {
+            .checkbox-container {
+                border-color: var(--color-reddit);
+            }
+
+            .checkbox-label {
+                color: var(--color-reddit);
+            }
+        }        
+
+        .checkbox-container {
+            position: relative;
+            width: 1.25rem;
+            height: 1.25rem;
+            border: 2px solid var(--primary-accent-color);
+            border-radius: 0.25rem;
+            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;
+
+            &:focus {
+                outline: var(--focus-outline-size) solid var(--primary-accent-color);
+                outline-offset: 2px;
+            }
+
+            input[type='checkbox'] {
+                opacity: 0;
+                width: 0;
+                height: 0;
+                position: absolute;
+            }
+
+            .checkbox-icon {
+                color: var(--primary-background-color);
+                width: 1rem;
+            }
+        }
+    }
+}

src/common/Checkbox/Checkbox.tsx

@@ -0,0 +1,83 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useState, useEffect, useCallback, DetailedHTMLProps, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import styles from './Checkbox.less';
+import Icon from '@stremio/stremio-icons/react';
+
+type Props = {
+    disabled?: boolean;
+    value?: boolean;
+    className?: string;
+    onChange?: (checked: boolean) => void;
+    ariaLabel?: string;
+    error?: string;
+};
+
+const Checkbox = ({ disabled, value, className, onChange, ariaLabel, error }: Props) => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const [isDisabled, setIsDisabled] = useState(disabled);
+
+    const handleChangeCheckbox = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+
+        setIsChecked(!isChecked);
+        onChange && onChange(!isChecked);
+    }, [disabled]);
+
+    const handleEnterPress = useCallback((event: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+        if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
+            setIsChecked(!isChecked);
+            onChange && onChange(!isChecked);
+        }
+    }, [disabled]);
+
+    useEffect(() => setIsDisabled(disabled), [disabled]);
+
+    useEffect(() => setIsError(!!error), [error]);
+
+    useEffect(() => {
+        const checked = typeof value === 'boolean' ? value : false;
+        setIsChecked(checked);
+    }, [value]);
+
+    return (
+        <div className={classNames(styles['checkbox'], className)}>
+            <label>
+                <div
+                    className={classNames({
+                        [styles['checkbox-checked']]: isChecked,
+                        [styles['checkbox-unchecked']]: !isChecked,
+                        [styles['checkbox-error']]: isError,
+                        [styles['checkbox-disabled']]: isDisabled,
+                    })}
+                >
+                    <div
+                        className={styles['checkbox-container']}
+                        role={'input'}
+                        tabIndex={0}
+                        onKeyDown={handleEnterPress}
+                    >
+                        <input
+                            type={'checkbox'}
+                            onChange={handleChangeCheckbox}
+                            aria-label={ariaLabel}
+                            tabIndex={-1}
+                            disabled={disabled}
+                        />
+                        {
+                            isChecked ?
+                                <Icon name={'checkmark'} className={styles['checkbox-icon']} />
+                                : null
+                        }
+                    </div>
+                </div>
+            </label>
+        </div>
+    );
+};
+
+export default Checkbox;

src/common/Checkbox/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import Checkbox from './Checkbox';
+
+export default Checkbox;

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();

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');
 

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 }) => {

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<HTMLInputElement> & {
+    className?: string;
+    disabled?: boolean;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onSubmit?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+
+const TextInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
+    const { onSubmit, className, disabled, ...rest } = props;
+
+    const onKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+        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 (
+        <input
+            size={1}
+            autoCorrect={'off'}
+            autoCapitalize={'off'}
+            autoComplete={'off'}
+            spellCheck={false}
+            tabIndex={0}
+            ref={ref}
+            className={classnames(className, styles['text-input'], { disabled })}
+            onKeyDown={onKeyDown}
+            {...rest}
+        />
+    );
+});
+
+TextInput.displayName = 'TextInput';
+
+export default TextInput;

src/common/TextInput/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import TextInput from './TextInput';
+
+export default TextInput;