Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

conflict resolved

Browse source
This commit is contained in:
svetlagasheva 2020-02-14 11:24:28 +02:00
commit cd275546a8
42 changed files with 1515 additions and 891 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc
View file

@ -56,6 +56,7 @@
"max": 1
}
],
"no-prototype-builtins": "off",
"no-template-curly-in-string": "error",
"no-trailing-spaces": "error",
"no-useless-concat": "error",

54
src/common/AddonDetailsModal/AddonDetailsModal.js
View file

@ -10,7 +10,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
const { core } = useServices();
const addonDetails = useAddonDetails(transportUrl);
const modalButtons = React.useMemo(() => {
if (addonDetails.descriptor === null || addonDetails.descriptor.content.type !== 'Ready') {
if (addonDetails.addon === null || addonDetails.addon.content.type !== 'Ready') {
return null;
}
@ -25,10 +25,10 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
};
const installOnClick = (event) => {
core.dispatch({
action: 'AddonOp',
action: 'Ctx',
args: {
addonOp: 'Install',
args: addonDetails.descriptor.content.content
action: 'InstallAddon',
args: addonDetails.addon.content.content
}
});
if (typeof onCloseRequest === 'function') {
@ -41,12 +41,10 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
};
const uninstallOnClick = (event) => {
core.dispatch({
action: 'AddonOp',
action: 'Ctx',
args: {
addonOp: 'Uninstall',
args: {
transport_url: addonDetails.descriptor.content.content.transportUrl
}
action: 'UninstallAddon',
args: addonDetails.addon.content.content.transportUrl
}
});
if (typeof onCloseRequest === 'function') {
@ -65,7 +63,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
onClick: cancelOnClick
}
},
addonDetails.descriptor.content.content.installed ?
addonDetails.addon.content.content.installed ?
{
className: styles['uninstall-button'],
label: 'Uninstall',
@ -87,27 +85,33 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
return (
<ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest}>
{
addonDetails.descriptor === null || addonDetails.descriptor.content.type === 'Loading' ?
addonDetails.selected === null ?
<div className={styles['addon-details-message-container']}>
Loading addon manifest from {transportUrl}
Loading addon manifest
</div>
:
addonDetails.descriptor.content.type === 'Err' ?
addonDetails.addon === null || addonDetails.addon.content.type === 'Loading' ?
<div className={styles['addon-details-message-container']}>
Failed to get addon manifest from {transportUrl}
Loading addon manifest from {addonDetails.selected.transport_url}
</div>
:
<AddonDetails
className={styles['addon-details-container']}
id={addonDetails.descriptor.content.content.manifest.id}
name={addonDetails.descriptor.content.content.manifest.name}
version={addonDetails.descriptor.content.content.manifest.version}
logo={addonDetails.descriptor.content.content.manifest.logo}
description={addonDetails.descriptor.content.content.manifest.description}
types={addonDetails.descriptor.content.content.manifest.types}
transportUrl={addonDetails.descriptor.content.content.transportUrl}
official={addonDetails.descriptor.content.content.flags.official}
/>
addonDetails.addon.content.type === 'Err' ?
<div className={styles['addon-details-message-container']}>
Failed to get addon manifest from {addonDetails.selected.transport_url}.
{addonDetails.addon.content.content}
</div>
:
<AddonDetails
className={styles['addon-details-container']}
id={addonDetails.addon.content.content.manifest.id}
name={addonDetails.addon.content.content.manifest.name}
version={addonDetails.addon.content.content.manifest.version}
logo={addonDetails.addon.content.content.manifest.logo}
description={addonDetails.addon.content.content.manifest.description}
types={addonDetails.addon.content.content.manifest.types}
transportUrl={addonDetails.addon.content.content.transportUrl}
official={addonDetails.addon.content.content.flags.official}
/>
}
</ModalDialog>
);

20
src/common/AddonDetailsModal/useAddonDetails.js
View file

@ -2,24 +2,26 @@ const React = require('react');
const useModelState = require('stremio/common/useModelState');
const initAddonDetailsState = () => ({
descriptor: null
selected: null,
addon: null
});
const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
const descriptor = addonDetails.descriptor !== null && addonDetails.descriptor.content.type === 'Ready' ?
const selected = addonDetails.selected;
const addon = addonDetails.addon !== null && addonDetails.addon.content.type === 'Ready' ?
{
...addonDetails.descriptor,
transport_url: addonDetails.addon.transport_url,
content: {
...addonDetails.descriptor.content,
type: addonDetails.addon.content.type,
content: {
...addonDetails.descriptor.content.content,
installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transportUrl),
...addonDetails.addon.content.content,
installed: ctx.profile.addons.some(({ transportUrl }) => transportUrl === addonDetails.addon.transport_url),
}
}
}
:
addonDetails.descriptor;
return { descriptor };
addonDetails.addon;
return { selected, addon };
};
const useAddonDetails = (transportUrl) => {
@ -28,7 +30,7 @@ const useAddonDetails = (transportUrl) => {
return {
action: 'Load',
args: {
load: 'AddonDetails',
model: 'AddonDetails',
args: {
transport_url: transportUrl
}

17
src/common/ColorInput/ColorInput.js
View file

@ -1,10 +1,12 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const AColorPicker = require('a-color-picker');
const Button = require('stremio/common/Button');
const ModalDialog = require('stremio/common/ModalDialog');
const useBinaryState = require('stremio/common/useBinaryState');
const ColorPicker = require('./ColorPicker');
const styles = require('./styles');
const parseColor = (value) => {
return AColorPicker.parseColor(value, 'hexcss4');
@ -18,6 +20,9 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
const labelButtonStyle = React.useMemo(() => ({
backgroundColor: value
}), [value]);
const isTransparent = React.useMemo(() => {
return parseColor(value).endsWith('00');
}, [value]);
const labelButtonOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
@ -61,11 +66,19 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
setTempValue(parseColor(value));
}, [value, modalOpen]);
return (
<Button title={value} {...props} style={labelButtonStyle} className={className} onClick={labelButtonOnClick}>
<Button title={isTransparent ? 'Transparent' : value} {...props} style={labelButtonStyle} className={classnames(className, styles['color-input-container'])} onClick={labelButtonOnClick}>
{
isTransparent ?
<div className={styles['transparent-label-container']}>
<div className={styles['transparent-label']}>Transparent</div>
</div>
:
null
}
{
modalOpen ?
<ModalDialog title={'Choose a color:'} buttons={modalButtons} onCloseRequest={closeModal} onClick={modalDialogOnClick}>
<ColorPicker value={tempValue} onInput={colorPickerOnInput} />
<ColorPicker className={styles['color-picker-container']} value={tempValue} onInput={colorPickerOnInput} />
</ModalDialog>
:
null

31
src/common/ColorInput/styles.less Normal file
View file

@ -0,0 +1,31 @@
.color-input-container {
position: relative;
z-index: 0;
.transparent-label-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
border: thin solid var(--color-surfacelighter20);
pointer-events: none;
.transparent-label {
flex: 1;
text-align: center;
color: var(--color-surfacelighter);
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.color-picker-container {
margin: 1rem 0;
}

46
src/common/ModalDialog/ModalDialog.js
View file

@ -70,30 +70,30 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
</div>
<div className={styles['modal-dialog-content']}>
{children}
{
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
:
null
}
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label']}>{label}</div>
:
null
}
</Button>
))}
</div>
:
null
}
</div>
{
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
:
null
}
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label']}>{label}</div>
:
null
}
</Button>
))}
</div>
:
null
}
</div>
</Modal>
);

22
src/common/ModalDialog/styles.less
View file

@ -60,15 +60,25 @@
.modal-dialog-content {
flex: 1;
align-self: stretch;
margin: 2rem 1rem;
margin: 2rem 1rem 0;
padding: 0 1rem;
overflow-y: auto;
.buttons-container {
margin-top: 1rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:last-child {
margin-bottom: 2rem;
}
}
.buttons-container {
flex: none;
align-self: stretch;
margin: 1rem 2rem 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:last-child {
margin-bottom: 2rem;
}
}
}

2
src/common/NavBar/NavMenu/NavMenu.js
View file

@ -7,7 +7,7 @@ const Button = require('stremio/common/Button');
const Popup = require('stremio/common/Popup');
const useBinaryState = require('stremio/common/useBinaryState');
const useFullscreen = require('stremio/common/useFullscreen');
const useProfile = require('./useProfile');
const useProfile = require('stremio/common/useProfile');
const styles = require('./styles');
const NavMenu = ({ className }) => {

2
src/common/NavBar/NavMenu/styles.less
View file

@ -62,7 +62,7 @@
display: flex;
flex-direction: row;
align-items: center;
padding: 0 1em 1rem 0;
padding: 0 1rem 1rem 0;
&:hover, &:focus {
outline: none;

6
src/common/index.js
View file

@ -27,6 +27,8 @@ const useFullscreen = require('./useFullscreen');
const useInLibrary = require('./useInLibrary');
const useLiveRef = require('./useLiveRef');
const useModelState = require('./useModelState');
const useProfile = require('./useProfile');
const useStreamingServer = require('./useStreamingServer');
module.exports = {
AddonDetailsModal,
@ -58,5 +60,7 @@ module.exports = {
useFullscreen,
useInLibrary,
useLiveRef,
useModelState
useModelState,
useProfile,
useStreamingServer
};

0
src/common/NavBar/NavMenu/useProfile.js → src/common/useProfile.js
View file

23
src/common/useStreamingServer.js Normal file
View file

@ -0,0 +1,23 @@
const React = require('react');
const { useServices } = require('stremio/services');
const useModelState = require('stremio/common/useModelState');
const mapStreamingServerState = (ctx) => {
return ctx.streaming_server;
};
const useStreamingServer = () => {
const { core } = useServices();
const initStreamingServer = React.useCallback(() => {
const ctx = core.getState('ctx');
return mapStreamingServerState(ctx);
}, []);
const streamingServer = useModelState({
model: 'ctx',
init: initStreamingServer,
map: mapStreamingServerState
});
return streamingServer;
};
module.exports = useStreamingServer;

2
src/router/Modal/Modal.js
View file

@ -8,7 +8,7 @@ const { useModalsContainer } = require('../ModalsContainerContext');
const Modal = ({ className, autoFocus, disabled, children, ...props }) => {
const modalsContainer = useModalsContainer();
return ReactDOM.createPortal(
<FocusLock className={classnames(className, 'modal-container')} autoFocus={autoFocus} disabled={disabled} lockProps={props}>
<FocusLock className={classnames(className, 'modal-container')} autoFocus={!!autoFocus} disabled={!!disabled} lockProps={props}>
{children}
</FocusLock>,
modalsContainer

74
src/routes/Addons/Addons.js
View file

@ -1,5 +1,6 @@
const React = require('react');
const PropTypes = require('prop-types');
const { useRouteFocused } = require('stremio-router');
const Icon = require('stremio-icons/dom');
const { AddonDetailsModal, Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const Addon = require('./Addon');
@ -7,44 +8,41 @@ const useAddons = require('./useAddons');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
const queryParams = new URLSearchParams([['addon', transportUrl]]);
if (addonsCatalogRequest !== null) {
const transportUrl = encodeURIComponent(addonsCatalogRequest.base);
const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}?${queryParams}`);
} else {
window.location.replace(`#/addons?${queryParams}`);
}
};
const clearAddonDetails = (addonsCatalogRequest) => {
if (addonsCatalogRequest !== null) {
const transportUrl = encodeURIComponent(addonsCatalogRequest.base);
const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`);
} else {
window.location.replace('#/addons');
}
};
const Addons = ({ urlParams, queryParams }) => {
const routeFocused = useRouteFocused();
const navigate = React.useCallback((args) => {
if (!routeFocused) {
return;
}
const nextPath = args.hasOwnProperty('request') ?
`/${encodeURIComponent(args.request.base)}/${encodeURIComponent(args.request.path.id)}/${encodeURIComponent(args.request.path.type_name)}`
:
typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string' && typeof urlParams.type === 'string' ?
`/${encodeURIComponent(urlParams.transportUrl)}/${encodeURIComponent(urlParams.catalogId)}/${encodeURIComponent(urlParams.type)}`
:
'';
const nextQueryParams = new URLSearchParams(queryParams);
if (args.hasOwnProperty('detailsTransportUrl')) {
if (args.detailsTransportUrl === null) {
nextQueryParams.delete('addon');
} else {
nextQueryParams.set('addon', args.detailsTransportUrl);
}
}
window.location.replace(`#/addons${nextPath}?${nextQueryParams}`);
}, [routeFocused, urlParams, queryParams]);
const addons = useAddons(urlParams);
const detailsTransportUrl = queryParams.get('addon');
const selectInputs = useSelectableInputs(addons);
const selectInputs = useSelectableInputs(addons, navigate);
const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
const addAddonUrlInputRef = React.useRef(null);
const addAddonOnSubmit = React.useCallback(() => {
if (addAddonUrlInputRef.current !== null) {
const addonsCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
null;
navigateToAddonDetails(addonsCatalogRequest, addAddonUrlInputRef.current.value);
navigate({ detailsTransportUrl: addAddonUrlInputRef.current.value });
}
}, [addons]);
}, [navigate]);
const addAddonModalButtons = React.useMemo(() => {
return [
{
@ -74,19 +72,11 @@ const Addons = ({ urlParams, queryParams }) => {
setSharedTransportUrl(event.dataset.transportUrl);
}, []);
const onAddonToggle = React.useCallback((event) => {
const addonsCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
null;
navigateToAddonDetails(addonsCatalogRequest, event.dataset.transportUrl);
}, [addons]);
navigate({ detailsTransportUrl: event.dataset.transportUrl });
}, [navigate]);
const closeAddonDetails = React.useCallback(() => {
const addonsCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
null;
clearAddonDetails(addonsCatalogRequest);
}, [addons]);
navigate({ detailsTransportUrl: null });
}, [navigate]);
React.useLayoutEffect(() => {
closeAddAddonModal();
setSearch('');

20
src/routes/Addons/useAddons.js
View file

@ -5,22 +5,22 @@ const { useModelState } = require('stremio/common');
const initAddonsState = () => ({
selectable: {
types: [],
catalogs: [],
extra: [],
has_next_page: false,
has_prev_page: false
catalogs: []
},
catalog_resource: null
});
const mapAddonsStateWithCtx = (addons, ctx) => {
const selectable = addons.selectable;
const selectable = {
types: addons.selectable.types,
catalogs: addons.selectable.catalogs
};
// TODO replace catalog content if resource catalog id is MY
const catalog_resource = addons.catalog_resource !== null && addons.catalog_resource.content.type === 'Ready' ?
{
...addons.catalog_resource,
request: addons.catalog_resource.request,
content: {
...addons.catalog_resource.content,
type: addons.catalog_resource.content.type,
content: addons.catalog_resource.content.content.map((addon) => ({
transportUrl: addon.transportUrl,
installed: ctx.profile.addons.some(({ transportUrl }) => transportUrl === addon.transportUrl),
@ -45,7 +45,7 @@ const onNewAddonsState = (addons) => {
return {
action: 'Load',
args: {
model: 'CatalogFiltered',
model: 'CatalogWithFilters',
args: {
request: addons.selectable.catalogs[0].request
}
@ -61,7 +61,7 @@ const useAddons = (urlParams) => {
return {
action: 'Load',
args: {
model: 'CatalogFiltered',
model: 'CatalogWithFilters',
args: {
request: {
base: urlParams.transportUrl,
@ -81,7 +81,7 @@ const useAddons = (urlParams) => {
return {
action: 'Load',
args: {
model: 'CatalogFiltered',
model: 'CatalogWithFilters',
args: {
request: addons.selectable.catalogs[0].request
}

33
src/routes/Addons/useSelectableInputs.js
View file

@ -1,20 +1,6 @@
const React = require('react');
const navigateWithRequest = (request) => {
const transportUrl = encodeURIComponent(request.base);
const catalogId = encodeURIComponent(request.path.id);
const type = encodeURIComponent(request.path.type_name);
window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`);
};
const equalWithoutExtra = (request1, request2) => {
return request1.base === request2.base &&
request1.path.resource === request2.path.resource &&
request1.path.type_name === request2.path.type_name &&
request1.path.id === request2.path.id;
};
const mapSelectableInputs = (addons) => {
const mapSelectableInputs = (addons, navigate) => {
const catalogSelect = {
title: 'Select catalog',
options: addons.selectable.catalogs
@ -23,13 +9,14 @@ const mapSelectableInputs = (addons) => {
label: name
})),
selected: addons.selectable.catalogs
.filter(({ request: { path: { id } } }) => {
.filter(({ request }) => {
return addons.catalog_resource !== null &&
addons.catalog_resource.request.path.id === id;
addons.catalog_resource.request.base === request.base &&
addons.catalog_resource.request.path.id === request.path.id;
})
.map(({ request }) => JSON.stringify(request)),
onSelect: (event) => {
navigateWithRequest(JSON.parse(event.value));
navigate({ request: JSON.parse(event.value) });
}
};
const typeSelect = {
@ -42,20 +29,20 @@ const mapSelectableInputs = (addons) => {
selected: addons.selectable.types
.filter(({ request }) => {
return addons.catalog_resource !== null &&
equalWithoutExtra(addons.catalog_resource.request, request);
addons.catalog_resource.request.path.type_name === request.path.type_name;
})
.map(({ request }) => JSON.stringify(request)),
onSelect: (event) => {
navigateWithRequest(JSON.parse(event.value));
navigate({ request: JSON.parse(event.value) });
}
};
return [catalogSelect, typeSelect];
};
const useSelectableInputs = (addons) => {
const useSelectableInputs = (addons, navigate) => {
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(addons);
}, [addons]);
return mapSelectableInputs(addons, navigate);
}, [addons, navigate]);
return selectableInputs;
};

4
src/routes/Board/useBoard.js
View file

@ -9,7 +9,7 @@ const initBoardState = () => ({
const mapBoardStateWithCtx = (board, ctx) => {
const selected = board.selected;
const catalog_resources = board.catalog_resources.map((catalog_resource) => {
catalog_resource.addon_name = ctx.content.addons.reduce((addon_name, addon) => {
catalog_resource.addon_name = ctx.profile.addons.reduce((addon_name, addon) => {
if (addon.transportUrl === catalog_resource.request.base) {
return addon.manifest.name;
}
@ -35,7 +35,7 @@ const useBoard = () => {
const loadBoardAction = React.useMemo(() => ({
action: 'Load',
args: {
load: 'CatalogsWithExtra',
model: 'CatalogsWithExtra',
args: { extra: [] }
}
}), []);

2
src/routes/Discover/Discover.js
View file

@ -75,7 +75,7 @@ const Discover = ({ urlParams, queryParams }) => {
}
</div>
{
discover.catalog_resource != null && !state.ctx.content.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
discover.catalog_resource !== null && !state.ctx.profile.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
<div className={styles['missing-addon-warning-container']}>
<div className={styles['warning-info']}>This addon is not installed. Install now?</div>
<Button className={styles['install-button']} title={'Install addon'} onClick={openAddonModal}>

32
src/routes/Discover/useDiscover.js
View file

@ -17,9 +17,9 @@ const mapDiscoverState = (discover) => {
const selectable = discover.selectable;
const catalog_resource = discover.catalog_resource !== null && discover.catalog_resource.content.type === 'Ready' ?
{
...discover.catalog_resource,
request: discover.catalog_resource.request,
content: {
...discover.catalog_resource.content,
type: discover.catalog_resource.content.type,
content: discover.catalog_resource.content.content.map((metaItem) => ({
type: metaItem.type,
name: metaItem.name,
@ -47,8 +47,10 @@ const onNewDiscoverState = (discover) => {
return {
action: 'Load',
args: {
load: 'CatalogFiltered',
args: discover.selectable.types[0].load_request
model: 'CatalogWithFilters',
args: {
request: discover.selectable.types[0].request
}
}
};
}
@ -61,14 +63,16 @@ const useDiscover = (urlParams, queryParams) => {
return {
action: 'Load',
args: {
load: 'CatalogFiltered',
model: 'CatalogWithFilters',
args: {
base: urlParams.transportUrl,
path: {
resource: 'catalog',
type_name: urlParams.type,
id: urlParams.catalogId,
extra: Array.from(queryParams.entries())
request: {
base: urlParams.transportUrl,
path: {
resource: 'catalog',
type_name: urlParams.type,
id: urlParams.catalogId,
extra: Array.from(queryParams.entries())
}
}
}
}
@ -79,8 +83,10 @@ const useDiscover = (urlParams, queryParams) => {
return {
action: 'Load',
args: {
load: 'CatalogFiltered',
args: discover.selectable.types[0].load_request
model: 'CatalogWithFilters',
args: {
request: discover.selectable.types[0].request
}
}
};
} else {

38
src/routes/Discover/useSelectableInputs.js
View file

@ -8,11 +8,11 @@ const SKIP_EXTRA = {
isRequired: false
};
const navigateWithLoadRequest = (load_request) => {
const transportUrl = encodeURIComponent(load_request.base);
const type = encodeURIComponent(load_request.path.type_name);
const catalogId = encodeURIComponent(load_request.path.id);
const extra = new URLSearchParams(load_request.path.extra).toString();
const navigateWithLoadRequest = (request) => {
const transportUrl = encodeURIComponent(request.base);
const type = encodeURIComponent(request.path.type_name);
const catalogId = encodeURIComponent(request.path.id);
const extra = new URLSearchParams(request.path.extra).toString();
window.location.replace(`#/discover/${transportUrl}/${type}/${catalogId}?${extra}`);
};
@ -52,13 +52,6 @@ const getNextExtra = (prevExtra, extraProp, extraValue) => {
}, []);
};
const equalWithoutExtra = (request1, request2) => {
return request1.base === request2.base &&
request1.path.resource === request2.path.resource &&
request1.path.type_name === request2.path.type_name &&
request1.path.id === request2.path.id;
};
const mapSelectableInputs = (discover) => {
const selectedCatalogRequest = discover.catalog_resource !== null ?
discover.catalog_resource.request
@ -85,15 +78,15 @@ const mapSelectableInputs = (discover) => {
const typeSelect = {
title: 'Select type',
options: discover.selectable.types
.map(({ name, load_request }) => ({
value: JSON.stringify(load_request),
.map(({ name, request }) => ({
value: JSON.stringify(request),
label: name
})),
selected: discover.selectable.types
.filter(({ load_request: { path: { type_name } } }) => {
return type_name === selectedCatalogRequest.path.type_name;
.filter(({ request }) => {
return selectedCatalogRequest.path.type_name === request.path.type_name;
})
.map(({ load_request }) => JSON.stringify(load_request)),
.map(({ request }) => JSON.stringify(request)),
onSelect: (event) => {
navigateWithLoadRequest(JSON.parse(event.value));
}
@ -101,15 +94,16 @@ const mapSelectableInputs = (discover) => {
const catalogSelect = {
title: 'Select catalog',
options: discover.selectable.catalogs
.map(({ name, load_request }) => ({
value: JSON.stringify(load_request),
.map(({ name, request }) => ({
value: JSON.stringify(request),
label: name
})),
selected: discover.selectable.catalogs
.filter(({ load_request }) => {
return equalWithoutExtra(load_request, selectedCatalogRequest);
.filter(({ request }) => {
return selectedCatalogRequest.base === request.base &&
selectedCatalogRequest.path.id === request.path.id;
})
.map(({ load_request }) => JSON.stringify(load_request)),
.map(({ request }) => JSON.stringify(request)),
onSelect: (event) => {
navigateWithLoadRequest(JSON.parse(event.value));
}

36
src/routes/Intro/Intro.js
View file

@ -3,10 +3,11 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { useRouteFocused } = require('stremio-router');
const { Button, useCoreEvent } = require('stremio/common');
const { Button, useBinaryState, useCoreEvent } = require('stremio/common');
const { useServices } = require('stremio/services');
const CredentialsTextInput = require('./CredentialsTextInput');
const ConsentCheckbox = require('./ConsentCheckbox');
const PasswordResetModal = require('./PasswordResetModal');
const styles = require('./styles');
const SIGNUP_FORM = 'signup';
@ -22,6 +23,7 @@ const Intro = ({ queryParams }) => {
const privacyPolicyRef = React.useRef();
const marketingRef = React.useRef();
const errorRef = React.useRef();
const [passwordRestModalOpen, openPasswordRestModal, closePasswordResetModal] = useBinaryState(false);
const [state, dispatch] = React.useReducer(
(state, action) => {
switch (action.type) {
@ -89,7 +91,7 @@ const Intro = ({ queryParams }) => {
const loginWithFacebook = React.useCallback(() => {
FB.login((response) => {
if (response.status === 'connected') {
fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 1000 })
fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 60 * 1000 })
.then((resp) => {
if (resp.status < 200 || resp.status >= 300) {
throw new Error('Login failed at getting token from Stremio with status ' + resp.status);
@ -97,22 +99,30 @@ const Intro = ({ queryParams }) => {
return resp.json();
}
})
.then(() => {
.then(({ user }) => {
if (!user || typeof user.fbLoginToken !== 'string' || typeof user.email !== 'string') {
throw new Error('Login failed at getting token from Stremio');
}
core.dispatch({
action: 'UserOp',
action: 'Ctx',
args: {
userOp: 'Login',
action: 'Authenticate',
args: {
email: state.email,
password: response.authResponse.accessToken
type: 'Login',
email: user.email,
password: user.fbLoginToken
}
}
});
})
.catch(() => { });
.catch((err = {}) => {
dispatch({ type: 'error', error: err.message || JSON.stringify(err) });
});
} else {
dispatch({ type: 'error', error: 'Login failed at getting token from Facebook' });
}
});
}, [state.email, state.password]);
}, []);
const loginWithEmail = React.useCallback(() => {
if (typeof state.email !== 'string' || state.email.length === 0) {
dispatch({ type: 'error', error: 'Invalid email' });
@ -315,7 +325,7 @@ const Intro = ({ queryParams }) => {
</React.Fragment>
:
<div className={styles['forgot-password-link-container']}>
<Button className={styles['forgot-password-link']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Button>
<Button className={styles['forgot-password-link']} onClick={openPasswordRestModal}>Forgot password?</Button>
</div>
}
{
@ -339,6 +349,12 @@ const Intro = ({ queryParams }) => {
<div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
</Button>
</div>
{
passwordRestModalOpen ?
<PasswordResetModal email={state.email} onCloseRequest={closePasswordResetModal} />
:
null
}
</div>
);
};

75
src/routes/Intro/PasswordResetModal/PasswordResetModal.js Normal file
View file

@ -0,0 +1,75 @@
const React = require('react');
const PropTypes = require('prop-types');
const { useRouteFocused } = require('stremio-router');
const { ModalDialog } = require('stremio/common');
const CredentialsTextInput = require('../CredentialsTextInput');
const styles = require('./styles');
const PasswordResetModal = ({ email, onCloseRequest }) => {
const routeFocused = useRouteFocused();
const [error, setError] = React.useState('');
const еmailRef = React.useRef(null);
const goToPasswordReset = React.useCallback(() => {
еmailRef.current.value.length > 0 && еmailRef.current.validity.valid ?
window.open('https://www.strem.io/reset-password/' + еmailRef.current.value, '_blank')
:
setError('Invalid email');
}, []);
const passwordResetOnClick = React.useCallback(() => {
goToPasswordReset();
}, []);
const passwordResetModalButtons = React.useMemo(() => {
return [
{
className: styles['cancel-button'],
label: 'Cancel',
props: {
onClick: onCloseRequest
}
},
{
label: 'Send',
props: {
onClick: passwordResetOnClick
}
}
];
}, [onCloseRequest, passwordResetOnClick]);
const emailOnChange = React.useCallback(() => {
setError('');
}, []);
const emailOnSubmit = React.useCallback(() => {
goToPasswordReset();
}, []);
React.useEffect(() => {
if (routeFocused) {
еmailRef.current.focus();
}
}, [routeFocused]);
return (
<ModalDialog className={styles['password-reset-modal-container']} title={'Password reset'} buttons={passwordResetModalButtons} onCloseRequest={onCloseRequest}>
<CredentialsTextInput
ref={еmailRef}
className={styles['credentials-text-input']}
type={'email'}
placeholder={'Email'}
defaultValue={typeof email === 'string' ? email : ''}
onChange={emailOnChange}
onSubmit={emailOnSubmit}
/>
{
error.length > 0 ?
<div className={styles['error-message']}>{error}</div>
:
null
}
</ModalDialog>
);
};
PasswordResetModal.propTypes = {
email: PropTypes.string,
onCloseRequest: PropTypes.func
};
module.exports = PasswordResetModal;

3
src/routes/Intro/PasswordResetModal/index.js Normal file
View file

@ -0,0 +1,3 @@
const PasswordResetModal = require('./PasswordResetModal');
module.exports = PasswordResetModal;

17
src/routes/Intro/PasswordResetModal/styles.less Normal file
View file

@ -0,0 +1,17 @@
.password-reset-modal-container {
.credentials-text-input {
width: 20rem;
padding: 0.5rem;
border: thin solid var(--color-surfacedark);
}
.error-message {
margin: 1rem 0;
text-align: center;
color: var(--color-signal2);
}
.cancel-button {
background-color: var(--color-surfacedark);
}
}

2
src/routes/Search/Search.js
View file

@ -42,7 +42,7 @@ const Search = ({ queryParams }) => {
search.catalog_resources.length === 0 ?
<div className={styles['message-container']}>
<div className={styles['message-content']}>
<div className={styles['label']}> No addons were requested for catalogs</div>
<div className={styles['label']}>No addons were requested for catalogs</div>
</div>
</div>
:

1
src/routes/Search/styles.less
View file

@ -48,7 +48,6 @@
flex-direction: row;
align-items: flex-start;
justify-content: center;
max-height: calc(100% - 10rem);
margin: 5rem;
.message-content {

4
src/routes/Search/useSearch.js
View file

@ -13,7 +13,7 @@ const mapSearchStateWithCtx = (search, ctx) => {
'';
const selected = search.selected;
const catalog_resources = search.catalog_resources.map((catalog_resource) => {
catalog_resource.addon_name = ctx.content.addons.reduce((addon_name, addon) => {
catalog_resource.addon_name = ctx.profile.addons.reduce((addon_name, addon) => {
if (addon.transportUrl === catalog_resource.request.base) {
return addon.manifest.name;
}
@ -41,7 +41,7 @@ const useSearch = (queryParams) => {
return {
action: 'Load',
args: {
load: 'CatalogsWithExtra',
model: 'CatalogsWithExtra',
args: {
extra: [
['search', queryParams.get('search')]

287
src/routes/Settings/SectionsList/SectionsList.js
View file

@ -1,287 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const { Button, Multiselect, Checkbox, ColorInput } = require('stremio/common');
const Icon = require('stremio-icons/dom');
const classnames = require('classnames');
const styles = require('./styles');
const SectionsList = React.forwardRef(({ className, sections, preferences, onPreferenceChanged, onScroll }, ref) => {
const toggleCheckbox = (id) => {
onPreferenceChanged(id, preferences[id] === 'true' ? 'false' : 'true');
};
const colorChanged = React.useCallback((event) => {
const id = event.dataset.id;
const color = event.value;
onPreferenceChanged(id, color);
}, [onPreferenceChanged]);
const updateDropdown = React.useCallback((event) => {
const name = event.dataset.name;
const value = event.reactEvent.currentTarget.dataset.value;
onPreferenceChanged(name, value);
}, [onPreferenceChanged]);
const updateStreamingDropdown = React.useCallback((event) => {
const name = event.dataset.name;
const value = event.reactEvent.currentTarget.dataset.value;
const newPrefs = { ...preferences.streaming, [name]: value };
onPreferenceChanged('streaming', newPrefs);
}, [onPreferenceChanged, preferences.streaming]);
const checkUser = React.useCallback((event) => {
if (!preferences.user) {
// Here in Stremio 4 we show a toast with a message, asking the anonymous user to log in/register
console.log('No user found');
event.preventDefault();
}
}, []);
// Determines whether the link should be opened in new window or in the current one.
const getTargetFor = url => ['//', 'http://', 'https://', 'file://', 'ftp://', 'mailto:', 'magnet:']
.some(scheme => url.startsWith(scheme)) ? '_blank' : '_self'
// TODO: If we get the user data after initialization, these should be wrapped in React.useState and set by React.useEffect
const changePasswordUrl = preferences.user && 'https://www.strem.io/reset-password/' + preferences.user.email;
const webCalUrl = preferences.user && 'webcal://www.strem.io/calendar/' + preferences.user._id + '.ics';
const formatBytes = inBytes => {
if (inBytes === '0') return 'no caching';
if (inBytes === 'Infinity') return '∞';
const bytes = parseInt(inBytes, 10);
const kilo = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const power = Math.floor(Math.log(bytes) / Math.log(kilo));
// More than 1024 yotta bytes
if (power >= sizes.length) {
power = sizes.length - 1;
}
return parseFloat((bytes / Math.pow(kilo, power)).toFixed(2)) + ' ' + sizes[power];
}
const cacheSizes = ['0', '2147483648', '5368709120', '10737418240', 'Infinity'];
const mkCacheSizeOptions = sizes => sizes.map(size => ({
label: formatBytes(size), // TODO: translation
value: size.toString(),
}))
const supportedProfiles = ['default', 'soft', 'fast'];
const mkProfiles = profiles => profiles.map(profile => ({
label: profile[0].toUpperCase() + profile.slice(1).toLowerCase(), // TODO: translation
value: profile,
}))
const [cachingOptions, setCachingOptions] = React.useState(mkProfiles(supportedProfiles));
const [streamingProfiles, setStreamingProfiles] = React.useState(mkProfiles(supportedProfiles));
React.useEffect(() => {
if (!preferences.streaming || typeof preferences.streaming.cacheSize === 'undefined') return;
setCachingOptions(mkCacheSizeOptions([...new Set(cacheSizes.concat(preferences.streaming.cacheSize))]));
}, [preferences.streaming && preferences.streaming.cacheSize]);
React.useEffect(() => {
if (preferences.streaming && preferences.streaming.profile && !supportedProfiles.includes(preferences.streaming.profile)) {
setStreamingProfiles(mkProfiles(supportedProfiles.concat(preferences.streaming.profile)));
}
}, [preferences.streaming && preferences.streaming.profile]);
const sectionsElements = sections.map((section) =>
<div key={section.id} ref={section.ref} className={styles['section']} data-section={section.id}>
<div className={styles['section-header']}>{section.id}</div>
{(section.inputs || [])
.map((input) => {
if (input.type === 'user') {
return (
<React.Fragment key={'user'}>
<div className={classnames(styles['input-container'], styles['user-container'])}>
{
!preferences.user
?
<div style={{ backgroundImage: `url('/images/anonymous.png')` }} className={styles['avatar']} />
:
<div style={{ backgroundImage: `url('${preferences.user.avatar}'), url('/images/default_avatar.png')` }} className={styles['avatar']} />
}
<div className={styles['email']}>{!preferences.user ? 'Anonymous user' : preferences.user.email}</div>
</div>
<div className={classnames(styles['input-container'], styles['button-container'])}>
<Button className={styles['button']} href={'#/intro'}>
<div className={styles['label']}>{preferences.user ? 'LOG OUT' : 'SIGN IN'}</div>
</Button>
</div>
<div className={classnames(styles['input-container'], styles['link-container'])}>
<Button className={styles['link']} href={changePasswordUrl} target={'_blank'} onClick={checkUser}>
<div className={styles['label']}>{'Change password'}</div>
</Button>
</div>
<div className={classnames(styles['input-container'], styles['text-container'])}>
<div className={styles['text']}>
<div className={styles['label']}>{'Import options'}</div>
</div>
</div>
<div className={classnames(styles['input-container'], styles['link-container'])}>
<Button className={styles['link']} href={'https://www.stremio.com/#TODO:install-facebook-addon'} target={'_blank'} onClick={checkUser}>
<div className={styles['label']}>{'Import from Facebook'}</div>
</Button>
</div>
<div className={classnames(styles['input-container'], styles['link-container'])}>
<Button className={styles['link']} href={'https://www.stremio.com/#TODO:export-user-data'} target={'_blank'} onClick={checkUser}>
<div className={styles['label']}>{'Export user data'}</div>
</Button>
</div>
<div className={classnames(styles['input-container'], styles['link-container'])}>
<Button className={styles['link']} href={webCalUrl} target={'_blank'} onClick={checkUser}>
<div className={styles['label']}>{'Subscribe to calendar'}</div>
</Button>
</div>
<div className={classnames(styles['input-container'], styles['link-container'])}>
<Button className={styles['link']} href={'https://stremio.zendesk.com/'} target={'_blank'}>
<div className={styles['label']}>{'Contact support'}</div>
</Button>
</div>
<div className={classnames(styles['input-container'], styles['link-container'])}>
<Button className={styles['link']} href={'https://docs.google.com/forms/d/e/1FAIpQLScubrlTpDMIPUUBlhZ5lwcXl3HxzKfunIMCX5Jnp-cDyglWjQ/viewform?usp=sf_link'} target={'_blank'}>
<div className={styles['label']}>{'Request account deletion'}</div>
</Button>
</div>
<div className={classnames(styles['input-container'], styles['button-container'])}>
<div className={styles['input-header']}>{'Trakt Scrobbling'}</div>
<Button className={styles['button']}>
<Icon className={styles['icon']} icon={'ic_trackt'} />
<div className={styles['label']}>{preferences.user && preferences.user.trakt ? 'ALREADY UTHENTIATED' : 'AUTHENTIATE'}</div>
</Button>
</div>
</React.Fragment>
);
} else if (input.type === 'streaming') {
return (
preferences.streaming_loaded
?
<React.Fragment key={'streaming'}>
{
// The streaming server settings are shown only if server is available
preferences.streaming_error
?
null
:
<React.Fragment>
<div className={classnames(styles['input-container'], styles['select-container'])}>
<div className={styles['input-header']}>Caching</div>
<Multiselect options={cachingOptions} selected={[preferences.streaming.cacheSize]} dataset={{ name: 'cacheSize' }} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
</div>
<div className={classnames(styles['input-container'], styles['select-container'])}>
<div className={styles['input-header']}>Torrent Profile</div>
<Multiselect options={streamingProfiles} selected={[preferences.streaming.profile]} dataset={{ name: 'profile' }} className={styles['dropdown']} onSelect={updateStreamingDropdown} />
</div>
</React.Fragment>
}
{/* From here there is only presentation */}
<div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
<div className={styles['input-header']}><strong>Streaming server URL:</strong> {preferences.server_url}</div>
</div>
<div key={'server_available'} className={classnames(styles['input-container'], styles['text-container'])}>
<div className={styles['text']}>
<Icon className={classnames(styles['icon'], { [styles['x-icon']]: preferences.streaming_error })} icon={preferences.streaming_error ? 'ic_x' : 'ic_check'} />
<div className={styles['label']}>{'Streaming server is ' + (preferences.streaming_error ? 'not ' : '') + 'available.'}{preferences.streaming_error && ' Reason: ' + preferences.streaming_error}</div>
</div>
</div>
</React.Fragment>
:
<div key={'server_url'} className={classnames(styles['input-container'], styles['text-container'])}>
<div className={styles['input-header']}>Loading streaming settgins...</div>
</div>
);
} else if (input.type === 'select') {
return (
<div key={input.id} className={classnames(styles['input-container'], styles['select-container'])}>
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
<Multiselect options={input.options} selected={[preferences[input.id]]} dataset={{ name: input.id }} key={input.id} className={styles['dropdown']} onSelect={updateDropdown} />
</div>
);
} else if (input.type === 'link') {
return (
<div key={input.id} className={classnames(styles['input-container'], styles['link-container'])}>
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
<Button ref={input.ref} className={styles['link']} href={input.href} target={getTargetFor(input.href)}>
<div className={styles['label']}>{input.label}</div>
</Button>
</div>
);
} else if (input.type === 'button') {
return (
<div key={input.id} className={classnames(styles['input-container'], styles['button-container'])}>
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
<Button ref={input.ref} className={styles['button']} href={input.href}>
{input.icon ? <Icon className={styles['icon']} icon={input.icon} /> : null}
<div className={styles['label']}>{input.label}</div>
</Button>
</div>
);
} else if (input.type === 'checkbox') {
return (
<div key={input.id} className={classnames(styles['input-container'], styles['checkbox-container'])}>
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
<Checkbox ref={input.ref} className={styles['checkbox']} checked={preferences[input.id] === 'true'} onClick={toggleCheckbox.bind(null, input.id)}>
<div className={styles['label']}>{input.label}</div>
</Checkbox>
</div>
);
} else if (input.type === 'static-text') {
return (
<div key={input.id} className={classnames(styles['input-container'], styles['text-container'])}>
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
<div className={styles['text']}>
{input.icon ? <Icon className={styles[input.icon === 'ic_x' ? 'x-icon' : 'icon']} icon={input.icon} /> : null}
<div className={styles['label']}>{input.label}</div>
</div>
</div>
);
} else if (input.type === 'color') {
return (
<div key={input.id} className={classnames(styles['input-container'], styles['color-container'])}>
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
<ColorInput className={styles['color-picker']} dataset={{ id: input.id }} value={preferences[input.id]} onChange={colorChanged} />
</div>
);
} else if (input.type === 'info') {
return (
<div key={input.id} className={classnames(styles['input-container'])}>
<div className={styles['input-header']}><strong>{input.header}</strong> {preferences[input.id]}</div>
</div>
);
}
})}
</div>
);
return (
<div ref={ref} className={className} onScroll={onScroll}>
{sectionsElements}
</div>
);
});
SectionsList.propTypes = {
className: PropTypes.string,
sections: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
ref: PropTypes.shape({
current: PropTypes.object,
}).isRequired,
inputs: PropTypes.arrayOf(PropTypes.shape({
type: PropTypes.string.isRequired,
id: PropTypes.string,
header: PropTypes.string,
label: PropTypes.string,
icon: PropTypes.string,
href: PropTypes.string,
options: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
})),
})),
})),
preferences: PropTypes.object,
onPreferenceChanged: PropTypes.func.isRequired,
onScroll: PropTypes.func.isRequired,
};
module.exports = SectionsList;

3
src/routes/Settings/SectionsList/index.js
View file

@ -1,3 +0,0 @@
const SectionsList = require('./SectionsList');
module.exports = SectionsList;

195
src/routes/Settings/SectionsList/styles.less
View file

@ -1,195 +0,0 @@
:import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon;
}
:import('~stremio/common/Multiselect/styles.less') {
menu-container: menu-container;
}
.dropdown {
.menu-container {
max-height: 30rem;
overflow-y: auto;
}
}
.section {
padding: 4rem 0;
margin: 0 2rem;
width: var(--input-width);
overflow: visible;
.section-header {
margin: 1.5rem 0;
font-size: 2rem;
color: var(--color-surfacelighter);
}
.input-container {
margin: 2rem 0;
display: flex;
flex-direction: column;
overflow: visible;
.input-header {
margin-bottom: 0.5rem;
color: var(--color-surfacelighter);
}
.checkbox-icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
fill: var(--color-surfacelight);
}
&.user-container {
flex-direction: row;
align-items: center;
.avatar {
margin: 0 1rem;
width: 4.2rem;
height: 4.2rem;
border-radius: 50%;
border: var(--focusable-border-size) solid var(--color-primary);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.email {
color: var(--color-surfacelighter);
}
}
&.select-container {
.dropdown {
height: 3rem;
}
}
&.link-container {
margin: 0;
.link {
padding: .75rem 0;
display: block;
color: var(--color-secondarylight);
&:focus {
color: var(--color-surface);
}
&:hover {
color: var(--color-surfacelighter);
}
}
}
&.button-container {
.button {
padding: 0.7rem;
min-height: calc(var(--input-width) * 0.09);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
cursor: pointer;
.icon {
width: 1.4rem;
height: 100%;
margin-right: 0.5rem;
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
}
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
border-color: transparent;
background-color: var(--color-primarylight);
}
}
}
&.checkbox-container {
.checkbox {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
.label {
width: 100%;
margin-left: 0.5rem;
color: var(--color-surfacelight);
}
&:focus,
&:hover {
.checkbox-icon {
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
}
}
}
}
&.text-container {
margin: 0;
.text {
display: flex;
flex-direction: row;
align-items: center;
padding: .75rem 0;
.icon {
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal5);
}
.x-icon {
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal2);
}
.label {
width: 100%;
color: var(--color-surfacelighter);
}
}
}
&.color-container {
.color-picker {
box-shadow: inset 0px 0px .2rem 0px var(--color-surfacelighter20);
height: calc(var(--input-width) * 0.08);
cursor: pointer;
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
border-color: transparent;
}
}
}
}
>:last-child {
margin-bottom: 0;
}
}

28
src/routes/Settings/SectionsSelector/SectionsSelector.js
View file

@ -1,28 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const { Button } = require('stremio/common');
const classnames = require('classnames');
const styles = require('./styles');
const SectionsSelector = ({ className, sections, selectedSectionId, onSelectedSection }) => {
return (
<div className={className}>
{sections.map((section) =>
<Button key={section.id} className={classnames(styles['section-label'], { [styles['selected']]: selectedSectionId === section.id })} type={'button'} data-section={section.id} onClick={onSelectedSection}>
{section.id}
</Button>
)}
</div>
);
};
SectionsSelector.propTypes = {
className: PropTypes.string,
sections: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
})),
selectedSectionId: PropTypes.string.isRequired,
onSelectedSection: PropTypes.func.isRequired,
};
module.exports = SectionsSelector;

3
src/routes/Settings/SectionsSelector/index.js
View file

@ -1,3 +0,0 @@
const SectionsSelector = require('./SectionsSelector');
module.exports = SectionsSelector;

26
src/routes/Settings/SectionsSelector/styles.less
View file

@ -1,26 +0,0 @@
.section-label {
padding: 1rem;
font-size: 1.1rem;
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
color: var(--color-surfacelight);
cursor: pointer;
&.selected {
color: var(--color-surfacelighter);
background-color: var(--color-background);
&:hover {
background-color: var(--color-background);
}
}
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
color: var(--color-surfacelighter);
background-color: var(--color-surface20);
border-color: transparent;
}
}

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

@ -1,65 +1,398 @@
const React = require('react');
const { NavBar } = require('stremio/common');
const classnames = require('classnames');
const throttle = require('lodash.throttle');
const Icon = require('stremio-icons/dom');
const { useServices } = require('stremio/services');
const { Button, Checkbox, NavBar, Multiselect, ColorInput, useProfile, useStreamingServer } = require('stremio/common');
const useProfileSettingsInputs = require('./useProfileSettingsInputs');
const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
const styles = require('./styles');
const SectionsSelector = require('./SectionsSelector');
const SectionsList = require('./SectionsList');
const { settingsSections } = require('./constants');
const useSettings = require('./useSettings');
const GENERAL_SECTION = 'general';
const PLAYER_SECTION = 'player';
const STREAMING_SECTION = 'streaming';
const Settings = () => {
const [preferences, setPreferences] = useSettings();
const [dynamicSections, setDynamicSections] = React.useState(settingsSections);
// TODO: The Streaming section should be handled separately
const sections = React.useMemo(() => Object.keys(dynamicSections)
.map((section) => ({
id: section,
inputs: dynamicSections[section],
ref: React.createRef()
})), [dynamicSections]);
const [selectedSectionId, setSelectedSectionId] = React.useState(sections[0].id);
const scrollContainerRef = React.useRef(null);
const updatePreference = (option, value) => {
setPreferences({ ...preferences, [option]: value });
}
const changeSection = React.useCallback((event) => {
const currentSectionId = event.currentTarget.dataset.section;
const section = sections.find((section) => section.id === currentSectionId);
//setSelectedSectionId(currentSectionId);
scrollContainerRef.current.scrollTo({
top: section.ref.current.offsetTop,
behavior: 'smooth'
const { core } = useServices();
const profile = useProfile();
const streaminServer = useStreamingServer();
const {
interfaceLanguageSelect,
subtitlesLanguageSelect,
subtitlesSizeSelect,
subtitlesTextColorInput,
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
bingeWatchingCheckbox,
playInBackgroundCheckbox,
playInExternalPlayerCheckbox,
hardwareDecodingCheckbox
} = useProfileSettingsInputs();
const {
cacheSizeSelect,
torrentProfileSelect
} = useStreamingServerSettingsInputs();
const logoutButtonOnClick = React.useCallback(() => {
core.dispatch({
action: 'Ctx',
args: {
action: 'Logout'
}
});
}, [sections]);
const sectionListOnScorll = React.useCallback((event) => {
const scrollContainer = event.currentTarget;
if (scrollContainer.scrollTop + scrollContainer.clientHeight === scrollContainer.scrollHeight) {
}, []);
const authenticateTraktOnClick = React.useCallback(() => {
// TODO
}, []);
const importFacebookOnClick = React.useCallback(() => {
// TODO
}, []);
const subscribeCalendarOnClick = React.useCallback(() => {
// TODO
}, []);
const exportDataOnClick = React.useCallback(() => {
// TODO
}, []);
const reloadStreamingServer = React.useCallback(() => {
core.dispatch({
action: 'Ctx',
args: {
action: 'ReloadStreamingServer'
}
});
}, []);
const sectionsContainerRef = React.useRef(null);
const generalSectionRef = React.useRef(null);
const playerSectionRef = React.useRef(null);
const streamingServerSectionRef = React.useRef(null);
const sections = React.useMemo(() => ([
{ ref: generalSectionRef, id: GENERAL_SECTION },
{ ref: playerSectionRef, id: PLAYER_SECTION },
{ ref: streamingServerSectionRef, id: STREAMING_SECTION },
]), []);
const [selectedSectionId, setSelectedSectionId] = React.useState(sections[0].id);
const updateSelectedSectionId = React.useCallback(() => {
if (sectionsContainerRef.current.scrollTop + sectionsContainerRef.current.clientHeight === sectionsContainerRef.current.scrollHeight) {
setSelectedSectionId(sections[sections.length - 1].id);
} else {
for (let i = sections.length - 1; i >= 0; i--) {
if (sections[i].ref.current.offsetTop <= scrollContainer.scrollTop) {
if (sections[i].ref.current.offsetTop - sectionsContainerRef.current.offsetTop <= sectionsContainerRef.current.scrollTop) {
setSelectedSectionId(sections[i].id);
break;
}
}
}
}, [sections]);
}, []);
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 sectionsContainerOnScorll = React.useCallback(throttle(() => {
updateSelectedSectionId();
}, 50), []);
React.useEffect(() => {
updateSelectedSectionId();
}, []);
return (
<div className={styles['settings-parent-container']}>
<div className={styles['settings-container']}>
<NavBar
className={styles['nav-bar']}
backButton={true}
addonsButton={true}
fullscreenButton={true}
notificationsMenu={true}
navMenu={true} />
<div className={styles['settings-container']}>
<SectionsSelector className={styles['side-menu']} sections={sections} selectedSectionId={selectedSectionId} onSelectedSection={changeSection} />
<SectionsList ref={scrollContainerRef} className={styles['scroll-container']} sections={sections} preferences={preferences} onPreferenceChanged={updatePreference} onScroll={sectionListOnScorll} />
navMenu={true}
/>
<div className={styles['settings-content']}>
<div className={styles['side-menu-container']}>
<Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === GENERAL_SECTION })} data-section={GENERAL_SECTION} onClick={sideMenuButtonOnClick}>
General
</Button>
<Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === PLAYER_SECTION })} data-section={PLAYER_SECTION} onClick={sideMenuButtonOnClick}>
Player
</Button>
<Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === STREAMING_SECTION })} data-section={STREAMING_SECTION} onClick={sideMenuButtonOnClick}>
Streaming server
</Button>
<div className={styles['spacing']} />
<div className={styles['version-info-label']}>App Version: {process.env.VERSION}</div>
{
streaminServer.type === 'Ready' ?
<div className={styles['version-info-label']}>Server Version: {streaminServer.settings.serverVersion}</div>
:
null
}
</div>
<div ref={sectionsContainerRef} className={styles['sections-container']} onScroll={sectionsContainerOnScorll}>
<div ref={generalSectionRef} className={styles['section-container']}>
<div className={styles['section-title']}>General</div>
<div className={classnames(styles['option-container'], styles['user-info-option-container'])}>
<div
className={styles['avatar-container']}
style={{
backgroundImage: profile.auth === null ?
'url(\'/images/anonymous.png\')'
:
`url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')`
}}
/>
<div className={styles['email-logout-container']}>
<div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
<div className={styles['email-label']}>
{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
</div>
</div>
{
profile.auth !== null ?
<Button className={styles['logout-button-container']} title={'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['logout-label']}>Log out</div>
</Button>
:
null
}
</div>
</div>
{
profile.auth === null ?
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Log in / Sign up'} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['label']}>Log in / Sign up</div>
</Button>
</div>
:
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
<Icon className={styles['icon']} icon={'ic_user'} />
<div className={styles['label']}>User panel</div>
</Button>
</div>
}
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Addons'} href={'#/addons'}>
<Icon className={styles['icon']} icon={'ic_addons'} />
<div className={styles['label']}>Addons</div>
</Button>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Trakt Scrobbling</div>
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Authenticate'} onClick={authenticateTraktOnClick}>
<Icon className={styles['icon']} icon={'ic_trackt'} />
<div className={styles['label']}>Authenticate</div>
</Button>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Facebook</div>
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Import'} onClick={importFacebookOnClick}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
<div className={styles['label']}>Import</div>
</Button>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Calendar</div>
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Subscribe'} onClick={subscribeCalendarOnClick}>
<Icon className={styles['icon']} icon={'ic_calendar'} />
<div className={styles['label']}>Subscribe</div>
</Button>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Interface language</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...interfaceLanguageSelect}
/>
</div>
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Export user data'} onClick={exportDataOnClick}>
<div className={styles['label']}>Export user data</div>
</Button>
</div>
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Contact support'} target={'_blank'} href={'https://stremio.zendesk.com/hc/en-us'}>
<div className={styles['label']}>Contact support</div>
</Button>
</div>
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Source code'} target={'_blank'} href={`https://github.com/stremio/stremio-web/commit/${process.env.COMMIT_HASH}`}>
<div className={styles['label']}>Source code</div>
</Button>
</div>
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Terms of Service'} target={'_blank'} href={'https://www.stremio.com/tos'}>
<div className={styles['label']}>Terms of Service</div>
</Button>
</div>
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Privacy Policy'} target={'_blank'} href={'https://www.stremio.com/privacy'}>
<div className={styles['label']}>Privacy Policy</div>
</Button>
</div>
</div>
<div ref={playerSectionRef} className={styles['section-container']}>
<div className={styles['section-title']}>Player</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Subtitles language</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...subtitlesLanguageSelect}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Subtitles size</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...subtitlesSizeSelect}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Subtitles text color</div>
</div>
<ColorInput
className={classnames(styles['option-input-container'], styles['color-input-container'])}
{...subtitlesTextColorInput}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Subtitles background color</div>
</div>
<ColorInput
className={classnames(styles['option-input-container'], styles['color-input-container'])}
{...subtitlesBackgroundColorInput}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Subtitles outline color</div>
</div>
<ColorInput
className={classnames(styles['option-input-container'], styles['color-input-container'])}
{...subtitlesOutlineColorInput}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Auto-play next episode</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
{...bingeWatchingCheckbox}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Play in background</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
{...playInBackgroundCheckbox}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Play in external player</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
{...playInExternalPlayerCheckbox}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Hardware-accelerated decoding</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
{...hardwareDecodingCheckbox}
/>
</div>
</div>
<div ref={streamingServerSectionRef} className={styles['section-container']}>
<div className={styles['section-title']}>Streaming Server</div>
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Reload'} onClick={reloadStreamingServer}>
<div className={styles['label']}>Reload</div>
</Button>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Status</div>
</div>
<div className={classnames(styles['option-input-container'], styles['info-container'])}>
<div className={styles['label']}>
{
streaminServer.type === 'Ready' ?
'Online'
:
streaminServer.type === 'Error' ?
`Error: (${streaminServer.error})`
:
streaminServer.type
}
</div>
</div>
</div>
{
streaminServer.type === 'Ready' ?
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Base Url</div>
</div>
<div className={classnames(styles['option-input-container'], styles['info-container'], styles['selectable'])}>
<div className={styles['label']}>
{streaminServer.base_url}
</div>
</div>
</div>
:
null
}
{
cacheSizeSelect !== null ?
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Cache size</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...cacheSizeSelect}
/>
</div>
:
null
}
{
torrentProfileSelect !== null ?
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Torrent profile</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...torrentProfileSelect}
/>
</div>
:
null
}
</div>
</div>
</div>
</div>
);

28
src/routes/Settings/constants.js
View file

File diff suppressed because one or more lines are too long

187
src/routes/Settings/languages.json Normal file
View file

@ -0,0 +1,187 @@
{
"abk": "аҧсуа бызшәа",
"aar": "Afaraf",
"afr": "Afrikaans",
"aka": "Akan",
"sqi": "gjuha shqipe",
"amh": "አማርኛ",
"ara": "العربية",
"arg": "aragonés",
"hye": "Հայերեն",
"asm": "অসমীয়া",
"ava": "авар мацӀ",
"ave": "avesta",
"aym": "aymar aru",
"aze": "azərbaycan dili",
"bam": "bamanankan",
"bak": "башҡорт теле",
"eus": "euskara",
"bel": "беларуская мова",
"ben": "বাংলা",
"bih": "भोजपुरी",
"bis": "Bislama",
"bos": "bosanski jezik",
"bre": "brezhoneg",
"bul": "български език",
"mya": "ဗမာစာ",
"cat": "català",
"cha": "Chamoru",
"che": "нохчийн мотт",
"nya": "chiCheŵa",
"zho": "中文 (Zhōngwén)",
"chv": "чӑваш чӗлхи",
"cor": "Kernewek",
"cos": "corsu",
"cre": "ᓀᐦᐃᔭᐍᐏᐣ",
"hrv": "hrvatski jezik",
"ces": "čeština",
"dan": "dansk",
"div": "ދިވެހި",
"nld": "Nederlands",
"dzo": "རྫོང་ཁ",
"eng": "English",
"epo": "Esperanto",
"est": "eesti",
"ewe": "Eʋegbe",
"fao": "føroyskt",
"fij": "vosa Vakaviti",
"fin": "suomi",
"fre": "français",
"ful": "Fulfulde",
"glg": "galego",
"kat": "ქართული",
"ger": "Deutsch",
"ell": "ελληνικά",
"grn": "Avañe'ẽ",
"guj": "ગુજરાતી",
"hat": "Kreyòl ayisyen",
"hau": "Hausa",
"heb": "עברית",
"her": "Otjiherero",
"hin": "हिन्दी",
"hmo": "Hiri Motu",
"hun": "magyar",
"ina": "Interlingua",
"ind": "Bahasa Indonesia",
"ile": "Interlingue",
"gle": "Gaeilge",
"ibo": "Asụsụ Igbo",
"ipk": "Iñupiaq",
"ido": "Ido",
"isl": "Íslenska",
"ita": "italiano",
"iku": "ᐃᓄᒃᑎᑐᑦ",
"jpn": "日本語 (にほんご)",
"jav": "basa Jawa",
"kal": "kalaallisut",
"kan": "ಕನ್ನಡ",
"kau": "Kanuri",
"kas": "कश्मीरी",
"kaz": "қазақ тілі",
"khm": "ខ្មែរ",
"kik": "Gĩkũyũ",
"kin": "Ikinyarwanda",
"kir": "Кыргызча",
"kom": "коми кыв",
"kon": "KiKongo",
"kor": "한국어 (韓國語)",
"kur": "Kurdî",
"kua": "Kuanyama",
"lat": "latine",
"ltz": "Lëtzebuergesch",
"lug": "Luganda",
"lim": "Limburgs",
"lin": "Lingála",
"lao": "ພາສາລາວ",
"lit": "lietuvių kalba",
"lub": "Tshiluba",
"lav": "latviešu valoda",
"glv": "Gaelg",
"mkd": "македонски јазик",
"mlg": "fiteny malagasy",
"msa": "bahasa Melayu",
"mal": "മലയാളം",
"mlt": "Malti",
"mri": "te reo Māori",
"mar": "मराठी",
"mah": "Kajin M̧ajeļ",
"mon": "монгол",
"nau": "Ekakairũ Naoero",
"nav": "Diné bizaad",
"nob": "Norsk bokmål",
"nde": "isiNdebele",
"nep": "नेपाली",
"ndo": "Owambo",
"nno": "Norsk nynorsk",
"nor": "Norsk",
"iii": "ꆈꌠ꒿ Nuosuhxop",
"nbl": "isiNdebele",
"oci": "occitan",
"oji": "ᐊᓂᔑᓈᐯᒧᐎᓐ",
"chu": "ѩзыкъ словѣньскъ",
"orm": "Afaan Oromoo",
"ori": "ଓଡ଼ିଆ",
"oss": "ирон æвзаг",
"pan": "ਪੰਜਾਬੀ",
"pli": "पाऴि",
"fas": "فارسی",
"pol": "język polski",
"pus": "پښتو",
"por": "português",
"pob": "português Brazil",
"que": "Runa Simi",
"roh": "rumantsch grischun",
"run": "Ikirundi",
"ron": "limba română",
"rus": "русский язык",
"san": "संस्कृतम्",
"srd": "sardu",
"snd": "सिन्धी",
"sme": "Davvisámegiella",
"smo": "gagana fa'a Samoa",
"sag": "yângâ tî sängö",
"srp": "српски језик",
"gla": "Gàidhlig",
"sna": "chiShona",
"sin": "සිංහල",
"slk": "slovenčina",
"slv": "slovenski jezik",
"som": "Soomaaliga",
"sot": "Sesotho",
"spa": "español",
"sun": "Basa Sunda",
"swa": "Kiswahili",
"ssw": "SiSwati",
"swe": "Svenska",
"tam": "தமிழ்",
"tel": "తెలుగు",
"tgk": "тоҷикӣ",
"tha": "ไทย",
"tir": "ትግርኛ",
"bod": "བོད་ཡིག",
"tuk": "Türkmen",
"tgl": "Wikang Tagalog",
"tsn": "Setswana",
"ton": "faka Tonga",
"tur": "Türkçe",
"tso": "Xitsonga",
"tat": "татар теле",
"twi": "Twi",
"tah": "Reo Tahiti",
"uig": "Uyƣurqə",
"ukr": "українська мова",
"urd": "اردو",
"uzb": "O'zbek",
"ven": "Tshivenḓa",
"vie": "Tiếng Việt",
"vol": "Volapük",
"wln": "walon",
"cym": "Cymraeg",
"wol": "Wollof",
"fry": "Frysk",
"xho": "isiXhosa",
"yid": "ייִדיש",
"yor": "Yorùbá",
"zha": "Saɯ cueŋƅ",
"zul": "isiZulu"
}

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

@ -1,4 +1,13 @@
.settings-parent-container {
:import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon;
}
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
multiselect-label: label;
}
.settings-container {
display: flex;
flex-direction: column;
width: 100%;
@ -10,32 +19,242 @@
align-self: stretch;
}
.settings-container {
width: 100%;
height: 100%;
.settings-content {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: row;
background-color: var(--color-backgroundlight);
--input-width: 35rem;
.side-menu {
padding: 1rem;
width: 17rem;
.side-menu-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: column;
width: 17rem;
padding: 1rem;
background-color: var(--color-backgroundlighter);
.side-menu-button {
flex: none;
align-self: stretch;
padding: 1rem;
font-size: 1.1rem;
color: var(--color-surfacelighter);
&.selected {
background-color: var(--color-background);
}
&:hover {
background-color: var(--color-surface20);
}
}
.spacing {
flex: 1;
}
.version-info-label {
margin: 0.5rem 0;
color: var(--color-surfacelight);
}
}
.scroll-container {
padding: 0 2rem;
.sections-container {
flex: 1;
align-self: stretch;
padding: 0 2rem;
overflow-y: auto;
>:not(:last-child) {
border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
.section-container {
display: flex;
flex-direction: column;
padding: 2rem 0;
overflow: visible;
&:first-child {
padding-top: 1rem;
}
&:not(:last-child) {
border-bottom: thin solid var(--color-primary40);
}
.section-title {
flex: none;
align-self: stretch;
font-size: 1.8rem;
line-height: 3.4rem;
margin-bottom: 1rem;
color: var(--color-surfacelighter);
}
.option-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
align-items: center;
max-width: 35rem;
margin-bottom: 2rem;
overflow: visible;
&:last-child {
margin-bottom: 0;
}
&.user-info-option-container {
height: 7rem;
.avatar-container {
flex: none;
align-self: stretch;
width: 7rem;
margin-right: 1rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
.email-logout-container {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: column;
padding: 1rem 0;
.email-label-container, .logout-button-container {
display: flex;
flex-direction: row;
align-items: center;
}
.email-label-container {
flex: 1 0 auto;
.email-label {
flex: 1;
font-size: 1.4rem;
max-height: 2.4em;
color: var(--color-surfacelighter);
}
}
.logout-button-container {
flex: 0 1 50%;
&:hover, &:focus {
outline: none;
.logout-label {
color: var(--color-surfacelighter);
text-decoration: underline;
}
}
.logout-label {
flex: 1;
max-height: 1.2em;
color: var(--color-surface);
}
}
}
}
.option-name-container, .option-input-container {
flex: 1 1 50%;
display: flex;
flex-direction: row;
align-items: center;
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
fill: var(--color-surfacelighter);
}
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
line-height: 1.5rem;
color: var(--color-surfacelighter);
}
}
.option-name-container {
justify-content: flex-start;
padding: 1rem 1rem 1rem 0;
margin-right: 2rem;
}
.option-input-container {
padding: 1rem;
&.button-container {
justify-content: center;
background-color: var(--color-primary);
&:hover {
background-color: var(--color-primarylight);
}
}
&.multiselect-container {
>.multiselect-label {
line-height: 1.5rem;
max-height: 1.5rem;
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
}
&.link-container {
flex: 0 1 auto;
padding: 1rem 0;
&:hover {
.label {
text-decoration: underline;
}
}
}
&.checkbox-container {
justify-content: center;
.checkbox-icon {
width: 1.5rem;
height: 1.5rem;
}
}
&.color-input-container {
padding: 1.75rem 1rem;
}
&.info-container {
justify-content: center;
&.selectable {
user-select: text;
.label {
user-select: text;
}
}
}
}
}
}
}
}
}
}

202
src/routes/Settings/useProfileSettingsInputs.js Normal file
View file

@ -0,0 +1,202 @@
const React = require('react');
const { useServices } = require('stremio/services');
const { useProfile } = require('stremio/common');
const languages = require('./languages');
const SUBTITLES_SIZES = [75, 100, 125, 150, 175, 200, 250];
const useProfileSettingsInputs = () => {
const { core } = useServices();
const profile = useProfile();
const interfaceLanguageSelect = React.useMemo(() => ({
options: Object.keys(languages).map((code) => ({
value: code,
label: languages[code]
})),
selected: [profile.settings.interface_language],
renderLabelText: () => {
return typeof languages[profile.settings.interface_language] === 'string' ?
languages[profile.settings.interface_language]
:
profile.settings.interface_language;
},
onSelect: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
interface_language: event.value
}
}
});
}
}), [profile.settings]);
const subtitlesLanguageSelect = React.useMemo(() => ({
options: Object.keys(languages).map((code) => ({
value: code,
label: languages[code]
})),
selected: [profile.settings.subtitles_language],
renderLabelText: () => {
return typeof languages[profile.settings.subtitles_language] === 'string' ?
languages[profile.settings.subtitles_language]
:
profile.settings.subtitles_language;
},
onSelect: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitles_language: event.value
}
}
});
}
}), [profile.settings]);
const subtitlesSizeSelect = React.useMemo(() => ({
options: SUBTITLES_SIZES.map((size) => ({
value: `${size}`,
label: `${size}%`
})),
selected: [`${profile.settings.subtitles_size}`],
renderLabelText: () => {
return `${profile.settings.subtitles_size}%`;
},
onSelect: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitles_size: parseInt(event.value)
}
}
});
}
}), [profile.settings]);
const subtitlesTextColorInput = React.useMemo(() => ({
value: profile.settings.subtitles_text_color,
onChange: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitles_text_color: event.value
}
}
});
}
}), [profile.settings]);
const subtitlesBackgroundColorInput = React.useMemo(() => ({
value: profile.settings.subtitles_background_color,
onChange: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitles_background_color: event.value
}
}
});
}
}), [profile.settings]);
const subtitlesOutlineColorInput = React.useMemo(() => ({
value: profile.settings.subtitles_outline_color,
onChange: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
subtitles_outline_color: event.value
}
}
});
}
}), [profile.settings]);
const bingeWatchingCheckbox = React.useMemo(() => ({
checked: profile.settings.binge_watching,
onClick: () => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
binge_watching: !profile.settings.binge_watching
}
}
});
}
}), [profile.settings]);
const playInBackgroundCheckbox = React.useMemo(() => ({
checked: profile.settings.play_in_background,
onClick: () => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
play_in_background: !profile.settings.play_in_background
}
}
});
}
}), [profile.settings]);
const playInExternalPlayerCheckbox = React.useMemo(() => ({
checked: profile.settings.play_in_external_player,
onClick: () => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
play_in_external_player: !profile.settings.play_in_external_player
}
}
});
}
}), [profile.settings]);
const hardwareDecodingCheckbox = React.useMemo(() => ({
checked: profile.settings.hardware_decoding,
onClick: () => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...profile.settings,
hardware_decoding: !profile.settings.hardware_decoding
}
}
});
}
}), [profile.settings]);
return {
interfaceLanguageSelect,
subtitlesLanguageSelect,
subtitlesSizeSelect,
subtitlesTextColorInput,
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
bingeWatchingCheckbox,
playInBackgroundCheckbox,
playInExternalPlayerCheckbox,
hardwareDecodingCheckbox
};
};
module.exports = useProfileSettingsInputs;

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

@ -1,68 +0,0 @@
const React = require('react');
const { useServices } = require('stremio/services');
const IGNORED_SETTINGS = Object.freeze(['user', 'streaming']);
module.exports = () => {
const { core } = useServices();
const [settings, setSettings] = React.useState({
user: null,
streaming: {},
streaming_loaded: false,
streaming_error: ""
});
React.useEffect(() => {
const onNewState = () => {
const { ctx, streaming_server_settings } = core.getState()
try {
const newSettings = {
...settings,
...ctx.content.settings,
user: ctx.content.auth ? ctx.content.auth.user : null,
streaming: streaming_server_settings && streaming_server_settings.ready || {},
streaming_loaded: streaming_server_settings && !!(streaming_server_settings.error || streaming_server_settings.ready),
streaming_error: streaming_server_settings && streaming_server_settings.error || "",
};
setSettings(newSettings);
} catch (e) {
console.log('Cannot update settings state', e);
}
};
const onStoreError = ({ event, args }) => {
if (event !== "SettingsStoreError") return;
// TODO: Notify with maybe a toast?
console.log(args)
}
core.on('NewModel', onNewState);
core.on('Event', onStoreError);
onNewState();
return () => {
// Destructor function
core.off('NewModel', onNewState);
core.off('Event', onStoreError);
};
}, []);
const setTheSettings = React.useCallback(newSettings => {
const event = { action: 'Settings', args: { args: {} } };
// This can be done with React.useEffect and newSettings.streaming as dependency
const streamingServerSettingChanged = settings.streaming && Object.keys(newSettings.streaming)
.some(prop => settings.streaming[prop] !== newSettings.streaming[prop]);
if (streamingServerSettingChanged) {
event.args = { settings: 'StoreStreamingServer', args: newSettings.streaming };
} else {
event.args.settings = 'Store';
Object.keys(newSettings)
.filter(prop => !IGNORED_SETTINGS.includes(prop))
.forEach(key => event.args.args[key] = newSettings[key].toString());
}
core.dispatch(event);
}, [settings])
return [settings, setTheSettings];
};

134
src/routes/Settings/useStreamingServerSettingsInputs.js Normal file
View file

@ -0,0 +1,134 @@
const React = require('react');
const isEqual = require('lodash.isequal');
const { useServices } = require('stremio/services');
const { useStreamingServer } = require('stremio/common');
const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null];
const cacheSizeToString = (size) => {
return size === null ?
'Infinite'
:
size === 0 ?
'No caching'
:
`${size / 1024 / 1024 / 1024}GiB`;
};
const TORRENT_PROFILES = {
default: {
btDownloadSpeedHardLimit: 2621440,
btDownloadSpeedSoftLimit: 1677721.6,
btHandshakeTimeout: 20000,
btMaxConnections: 35,
btMinPeersForStable: 5,
btRequestTimeout: 4000
},
soft: {
btDownloadSpeedHardLimit: 1677721.6,
btDownloadSpeedSoftLimit: 1677721.6,
btHandshakeTimeout: 20000,
btMaxConnections: 35,
btMinPeersForStable: 5,
btRequestTimeout: 4000
},
fast: {
btDownloadSpeedHardLimit: 39321600,
btDownloadSpeedSoftLimit: 4194304,
btHandshakeTimeout: 20000,
btMaxConnections: 200,
btMinPeersForStable: 10,
btRequestTimeout: 4000
}
};
const useStreaminServerSettingsInputs = () => {
const { core } = useServices();
const streaminServer = useStreamingServer();
const cacheSizeSelect = React.useMemo(() => {
if (streaminServer.type !== 'Ready') {
return null;
}
return {
options: CACHE_SIZES.map((size) => ({
label: cacheSizeToString(size),
value: JSON.stringify(size)
})),
selected: [JSON.stringify(streaminServer.settings.cacheSize)],
renderLabelText: () => {
return cacheSizeToString(streaminServer.settings.cacheSize);
},
onSelect: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...streaminServer.settings,
cacheSize: JSON.parse(event.value)
}
}
});
}
};
}, [streaminServer.type, streaminServer.settings]);
const torrentProfileSelect = React.useMemo(() => {
if (streaminServer.type !== 'Ready') {
return null;
}
const selectedTorrentProfile = {
btDownloadSpeedHardLimit: streaminServer.settings.btDownloadSpeedHardLimit,
btDownloadSpeedSoftLimit: streaminServer.settings.btDownloadSpeedSoftLimit,
btHandshakeTimeout: streaminServer.settings.btHandshakeTimeout,
btMaxConnections: streaminServer.settings.btMaxConnections,
btMinPeersForStable: streaminServer.settings.btMinPeersForStable,
btRequestTimeout: streaminServer.settings.btRequestTimeout
};
const isCustomTorrentProfileSelected = Object.values(TORRENT_PROFILES).every((torrentProfile) => {
return !isEqual(torrentProfile, selectedTorrentProfile);
});
return {
options: Object.keys(TORRENT_PROFILES)
.map((profileName) => ({
label: profileName,
value: JSON.stringify(TORRENT_PROFILES[profileName])
}))
.concat(
isCustomTorrentProfileSelected ?
[{
label: 'custom',
value: JSON.stringify(selectedTorrentProfile)
}]
:
[]
),
selected: [JSON.stringify(selectedTorrentProfile)],
renderLabelText: () => {
return Object.keys(TORRENT_PROFILES).reduce((result, profileName) => {
if (isEqual(TORRENT_PROFILES[profileName], selectedTorrentProfile)) {
return profileName;
}
return result;
}, 'custom');
},
onSelect: (event) => {
core.dispatch({
action: 'Ctx',
args: {
action: 'UpdateSettings',
args: {
...streaminServer.settings,
...JSON.parse(event.value)
}
}
});
}
};
}, [streaminServer.type, streaminServer.settings]);
return { cacheSizeSelect, torrentProfileSelect };
};
module.exports = useStreaminServerSettingsInputs;

8
src/services/KeyboardNavigation/KeyboardNavigation.js
View file

@ -12,6 +12,14 @@ function KeyboardNavigation() {
if (tab) {
event.preventDefault();
window.location = tab.href;
return;
}
if (event.target.tagName !== 'INPUT') {
if (event.key === 'Backspace') {
window.history.back();
return;
}
}
}
function start() {

4
webpack.config.js
View file

@ -1,10 +1,12 @@
const path = require('path');
const child_process = require('child_process');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const pachageJson = require('./package.json');
module.exports = (env, argv) => ({
entry: './src/index.js',
@ -130,6 +132,8 @@ module.exports = (env, argv) => ({
plugins: [
new webpack.EnvironmentPlugin({
DEBUG: argv.mode !== 'production',
VERSION: pachageJson.version,
COMMIT_HASH: child_process.execSync('git rev-parse HEAD').toString(),
...env
}),
new webpack.ProgressPlugin(),