Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 17:02:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added button that opens modal to edit streaming server url

Browse source
This commit is contained in:
Tim 2020-06-03 21:14:17 +02:00
parent d7ce3555af
commit 82d83e7ceb
2 changed files with 131 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/routes/Settings/Settings.js
View file

@ -6,7 +6,7 @@ const throttle = require('lodash.throttle');
const Icon = require('stremio-icons/dom');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, useProfile } = require('stremio/common');
const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, useBinaryState } = require('stremio/common');
const useStreamingServer = require('./useStreamingServer');
const useProfileSettingsInputs = require('./useProfileSettingsInputs');
const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
@ -21,6 +21,42 @@ const Settings = () => {
const { routeFocused } = useRouteFocused();
const profile = useProfile();
const streamingServer = useStreamingServer();
const [editServerUrlModalOpen, openEditServerUrlModal, closeEditServerUrlModal] = useBinaryState(false);
const editServerUrlInputRef = React.useRef(null);
const editServerUrlOnClick = React.useCallback(() => {
if (editServerUrlInputRef.current !== null) {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
streaming_server_url: editServerUrlInputRef.current.value
}
}
});
if (typeof closeEditServerUrlModal === 'function') {
closeEditServerUrlModal();
}
}
}, []);
const editServerUrlModalButtons = React.useMemo(() => {
return [
{
className: styles['cancel-button'],
label: 'Cancel',
props: {
onClick: closeEditServerUrlModal
}
},
{
label: 'Edit',
props: {
onClick: editServerUrlOnClick,
}
}
];
}, [editServerUrlOnClick]);
const {
interfaceLanguageSelect,
subtitlesLanguageSelect,
@ -104,6 +140,7 @@ const Settings = () => {
if (routeFocused) {
updateSelectedSectionId();
}
closeEditServerUrlModal();
}, [routeFocused]);
return (
<MainNavBars className={styles['settings-container']} route={'settings'}>
@ -355,10 +392,12 @@ const Settings = () => {
<div className={styles['option-name-container']}>
<div className={styles['label']}>Url</div>
</div>
<TextInput
className={classnames(styles['option-input-container'], styles['text-input-container'])}
{...serverUrlTextInput}
/>
<div className={classnames(styles['option-input-container'], styles['edit-container'])}>
<div className={styles['label']}>{profile.settings.streaming_server_url}</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Edit'} onClick={openEditServerUrlModal}>
<Icon className={styles['icon']} icon={'ic_settings'} />
</Button>
</div>
</div>
{
cacheSizeSelect !== null ?
@ -391,6 +430,25 @@ const Settings = () => {
</div>
</div>
</div>
{
editServerUrlModalOpen ?
<ModalDialog
className={styles['edit-server-url-modal-container']}
title={'Edit streaming server url'}
buttons={editServerUrlModalButtons}
onCloseRequest={closeEditServerUrlModal}>
<div className={styles['notice']}>You can edit the default streaming server url</div>
<TextInput
ref={editServerUrlInputRef}
className={styles['server-url-input']}
type={'text'}
placeholder={'Enter a streaming server url'}
{...serverUrlTextInput}
/>
</ModalDialog>
:
null
}
</MainNavBars>
);
};

80
src/routes/Settings/styles.less
View file

@ -11,6 +11,11 @@
multiselect-label: label;
}
:import('~stremio/common/ModalDialog/styles.less') {
addon-modal-content: modal-dialog-content;
cancel-button-label: label;
}
.settings-container {
width: 100%;
height: 100%;
@ -215,18 +220,6 @@
.option-input-container {
padding: 1rem;
&.text-input-container {
background-color: @color-background;
color: @color-secondaryvariant1-90;
font-weight: 500;
&::placeholder {
max-height: 1.2em;
opacity: 0.5;
color: @color-secondaryvariant1-light1-90;
}
}
&.button-container {
justify-content: center;
background-color: @color-accent3;
@ -287,9 +280,72 @@
}
}
}
&.edit-container {
padding: 0;
.label {
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
padding: 0 1rem;
}
.button-container {
flex: auto;
.icon {
margin: 0;
}
}
}
}
}
}
}
}
}
.edit-server-url-modal-container {
.addon-modal-content {
width: 30rem;
.notice {
margin-bottom: 1.5rem;
font-size: 1rem;
color: @color-background-dark5-90;
}
.server-url-input {
width: 100%;
padding: 1rem;
color: @color-surface-dark5;
outline: var(--focus-outline-size) solid @color-surface-light2;
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {
outline-color: @color-surface-light4;
}
&:focus {
outline-color: @color-background-dark5;
}
}
}
.cancel-button {
background-color: transparent;
&:hover {
background-color: @color-surface-light3;
}
&:focus {
outline-color: @color-background-dark5;
}
.cancel-button-label {
color: @color-surface-dark2;
}
}
}