Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

conflict resolved

Browse source
This commit is contained in:
svetlagasheva 2019-12-16 18:06:15 +02:00
commit 0aa6b06df2
52 changed files with 1256 additions and 541 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
.eslintrc Normal file
View file

@ -0,0 +1,85 @@
{
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"settings": {
"react": {
"version": "detect"
}
},
"globals": {
"YT": "readonly",
"FB": "readonly"
},
"env": {
"commonjs": true,
"browser": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"jsx": true
}
},
"ignorePatterns": [
"/*",
"!/src",
"src/routes/Settings",
"src/routes/Player",
"src/video"
],
"rules": {
"arrow-parens": "error",
"arrow-spacing": "error",
"block-spacing": "error",
"comma-spacing": "error",
"eol-last": "error",
"eqeqeq": "error",
"func-call-spacing": "error",
"indent": [
"error",
4,
{
"SwitchCase": 1
}
],
"no-console": "error",
"no-extra-semi": "error",
"no-eq-null": "error",
"no-multi-spaces": "error",
"no-multiple-empty-lines": [
"error",
{
"max": 1
}
],
"no-template-curly-in-string": "error",
"no-trailing-spaces": "error",
"no-useless-concat": "error",
"no-unreachable": "error",
"no-unused-vars": "error",
"prefer-const": "error",
"quotes": [
"error",
"single"
],
"quote-props": [
"error",
"as-needed",
{
"unnecessary": false
}
],
"semi": "error",
"semi-spacing": "error",
"space-before-blocks": "error",
"valid-typeof": [
"error",
{
"requireStringLiterals": true
}
]
}
}

21
package.json
View file

@ -10,7 +10,8 @@
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"storybook": "start-storybook --ci --config-dir ./storybook --static-dir ./ --port 6060",
"test": "jest"
"test": "jest",
"lint": "eslint src"
},
"dependencies": {
"a-color-picker": "1.2.1",
@ -24,19 +25,19 @@
"react": "16.12.0",
"react-dom": "16.12.0",
"react-focus-lock": "2.2.1",
"spatial-navigation-polyfill": "git+ssh://git@github.com/NikolaBorislavovHristov/spatial-navigation.git#964d09bf2b0853e27af6c25924b595d6621a019d",
"spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#381b4f37d138e66ae8ea025e240af3704245e5dc",
"stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.4",
"stremio-core-web": "git+ssh://git@github.com/stremio/stremio-core-web.git#da5b37865004d0ae140518c4f276d1ed1a1483d9",
"stremio-icons": "git+ssh://git@github.com/Stremio/stremio-icons.git#v1.0.11",
"vtt.js": "0.13.0"
},
"devDependencies": {
"@babel/core": "7.7.4",
"@babel/core": "7.7.5",
"@babel/plugin-proposal-class-properties": "7.7.4",
"@babel/plugin-proposal-object-rest-spread": "7.7.4",
"@babel/preset-env": "7.7.4",
"@babel/preset-env": "7.7.6",
"@babel/preset-react": "7.7.4",
"@babel/runtime": "7.7.4",
"@babel/runtime": "7.7.6",
"@storybook/addon-actions": "5.2.8",
"@storybook/addon-console": "1.2.1",
"@storybook/addons": "5.2.8",
@ -45,10 +46,12 @@
"@testing-library/react-hooks": "3.2.1",
"babel-loader": "8.0.6",
"clean-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "5.0.5",
"css-loader": "3.2.1",
"copy-webpack-plugin": "5.1.1",
"css-loader": "3.3.2",
"cssnano": "4.1.10",
"cssnano-preset-advanced": "4.0.7",
"eslint": "6.7.2",
"eslint-plugin-react": "7.17.0",
"html-webpack-plugin": "3.2.0",
"jest": "24.9.0",
"less": "3.10.3",
@ -57,8 +60,8 @@
"postcss-loader": "3.0.0",
"react-test-renderer": "16.12.0",
"storybook-addon-jsx": "7.1.13",
"terser-webpack-plugin": "2.2.1",
"webpack": "4.41.2",
"terser-webpack-plugin": "2.3.0",
"webpack": "4.41.3",
"webpack-cli": "3.3.10",
"webpack-dev-server": "3.9.0"
}

10
src/common/Button/Button.js
View file

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const styles = require('./styles');
@ -41,4 +42,13 @@ const Button = React.forwardRef(({ className, href, disabled, children, ...props
Button.displayName = 'Button';
Button.propTypes = {
className: PropTypes.string,
href: PropTypes.string,
disabled: PropTypes.bool,
children: PropTypes.node,
onKeyDown: PropTypes.func,
onMouseDown: PropTypes.func
};
module.exports = Button;

7
src/common/Checkbox/Checkbox.js
View file

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
@ -22,4 +23,10 @@ const Checkbox = React.forwardRef(({ className, checked, children, ...props }, r
Checkbox.displayName = 'Checkbox';
Checkbox.propTypes = {
className: PropTypes.string,
checked: PropTypes.bool,
children: PropTypes.node
};
module.exports = Checkbox;

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

@ -16,9 +16,8 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
return parseColor(value);
});
const labelButtonStyle = React.useMemo(() => ({
...props.style,
backgroundColor: value
}), [props.style, value]);
}), [value]);
const labelButtonOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
@ -76,9 +75,11 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
};
ColorInput.propTypes = {
className: PropTypes.string,
value: PropTypes.string,
dataset: PropTypes.objectOf(String),
onChange: PropTypes.func
dataset: PropTypes.objectOf(PropTypes.string),
onChange: PropTypes.func,
onClick: PropTypes.func
};
module.exports = ColorInput;

3
src/common/Image/Image.js
View file

@ -27,7 +27,8 @@ Image.propTypes = {
src: PropTypes.string,
alt: PropTypes.string,
fallbackSrc: PropTypes.string,
renderFallback: PropTypes.func
renderFallback: PropTypes.func,
onError: PropTypes.func
};
module.exports = Image;

2
src/common/MainNavBar/MainNavBar.js
View file

@ -23,6 +23,8 @@ const MainNavBar = React.memo(({ className }) => {
);
});
MainNavBar.displayName = 'MainNavBar';
MainNavBar.propTypes = {
className: PropTypes.string
};

5
src/common/MetaItem/MetaItem.js
View file

@ -121,8 +121,9 @@ MetaItem.propTypes = {
playIcon: PropTypes.bool,
progress: PropTypes.number,
options: PropTypes.array,
dataset: PropTypes.objectOf(String),
optionOnSelect: PropTypes.func
dataset: PropTypes.objectOf(PropTypes.string),
optionOnSelect: PropTypes.func,
onClick: PropTypes.func
};
module.exports = MetaItem;

4
src/common/MetaPreview/MetaPreview.js
View file

@ -179,7 +179,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
null
}
{
linksGroups.hasOwnProperty(IMDB_LINK_CATEGORY) ?
typeof linksGroups[IMDB_LINK_CATEGORY] === 'object' ?
<ActionButton
{...linksGroups[IMDB_LINK_CATEGORY]}
className={styles['action-button']}
@ -191,7 +191,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
null
}
{
!compact && linksGroups.hasOwnProperty(SHARE_LINK_CATEGORY) ?
!compact && typeof linksGroups[SHARE_LINK_CATEGORY] === 'object' ?
<React.Fragment>
<ActionButton
className={styles['action-button']}

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

@ -112,7 +112,7 @@ ModalDialog.propTypes = {
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]),
dataset: PropTypes.objectOf(String),
dataset: PropTypes.objectOf(PropTypes.string),
onCloseRequest: PropTypes.func
};

2
src/common/ModalDialog/index.js
View file

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

7
src/common/Multiselect/Multiselect.js
View file

@ -8,7 +8,7 @@ const useBinaryState = require('stremio/common/useBinaryState');
const styles = require('./styles');
const Multiselect = ({ className, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
const options = React.useMemo(() => {
return Array.isArray(props.options) ?
props.options.filter((option) => {
@ -143,12 +143,13 @@ Multiselect.propTypes = {
})),
selected: PropTypes.arrayOf(PropTypes.string),
disabled: PropTypes.bool,
dataset: PropTypes.objectOf(String),
dataset: PropTypes.objectOf(PropTypes.string),
renderLabelContent: PropTypes.func,
renderLabelText: PropTypes.func,
onOpen: PropTypes.func,
onClose: PropTypes.func,
onSelect: PropTypes.func
onSelect: PropTypes.func,
onClick: PropTypes.func
};
module.exports = Multiselect;

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

@ -10,7 +10,7 @@ const useUser = require('stremio/common/useUser');
const styles = require('./styles');
const NavMenu = ({ className }) => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const [user, logout] = useUser();
const popupLabelOnClick = React.useCallback((event) => {
@ -41,7 +41,7 @@ const NavMenu = ({ className }) => {
className={styles['avatar-container']}
style={{
backgroundImage: user === null ?
`url('/images/anonymous.png')`
'url(\'/images/anonymous.png\')'
:
`url('${user.avatar}'), url('/images/default_avatar.png')`
}}

2
src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js
View file

@ -80,7 +80,7 @@ const Notification = ({ className, id, type, name, poster, thumbnail, season, ep
}
</Button>
);
}
};
Notification.propTypes = {
className: PropTypes.string,

3
src/common/NavBar/NotificationsMenu/NotificationsList/NotificationPlaceholder/NotificationPlaceholder.js
View file

@ -1,7 +1,6 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const styles = require('./styles');
const NotificationPlaceholder = ({ className }) => {
@ -20,6 +19,6 @@ const NotificationPlaceholder = ({ className }) => {
NotificationPlaceholder.propTypes = {
className: PropTypes.string
}
};
module.exports = NotificationPlaceholder;

2
src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
View file

@ -57,7 +57,7 @@ const NotificationsList = ({ className, metaItems }) => {
}
</div>
);
}
};
NotificationsList.propTypes = {
className: PropTypes.string,

4
src/common/NavBar/NotificationsMenu/NotificationsMenu.js
View file

@ -5,13 +5,13 @@ const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const Popup = require('stremio/common/Popup');
const NotificationsList = require('./NotificationsList');
const useNotifications = require('./useNotifications');
// const useNotifications = require('./useNotifications');
// const useCatalogs = require('stremio/routes/Board/useCatalogs');
const useBinaryState = require('stremio/common/useBinaryState');
const styles = require('./styles');
const NotificationsMenu = ({ className, onClearButtonClicked }) => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
//TODO use useNotifications hook instead of useCatalogs
const metaItems = []; //useCatalogs();

1
src/common/PaginationInput/PaginationInput.js
View file

@ -35,6 +35,7 @@ const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
PaginationInput.propTypes = {
className: PropTypes.string,
label: PropTypes.string,
dataset: PropTypes.objectOf(PropTypes.string),
onSelect: PropTypes.func
};

2
src/common/PaginationInput/index.js
View file

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

4
src/common/Popup/Popup.js
View file

@ -96,14 +96,14 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
:
null
});
}
};
Popup.propTypes = {
open: PropTypes.bool,
direction: PropTypes.oneOf(['top-left', 'bottom-left', 'top-right', 'bottom-right']),
renderLabel: PropTypes.func.isRequired,
renderMenu: PropTypes.func.isRequired,
dataset: PropTypes.objectOf(String),
dataset: PropTypes.objectOf(PropTypes.string),
onCloseRequest: PropTypes.func
};

8
src/common/TextInput/TextInput.js
View file

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const styles = require('./styles');
@ -30,4 +31,11 @@ const TextInput = React.forwardRef((props, ref) => {
TextInput.displayName = 'TextInput';
TextInput.propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
onKeyDown: PropTypes.func,
onSubmit: PropTypes.func
};
module.exports = TextInput;

12
src/common/routesRegexp.js
View file

@ -8,23 +8,23 @@ const routesRegexp = {
urlParamsNames: []
},
discover: {
regexp: /^\/discover(?:\/([^\/]*)\/([^\/]*)\/([^\/]*))?$/,
regexp: /^\/discover(?:\/([^/]*)\/([^/]*)\/([^/]*))?$/,
urlParamsNames: ['addonTransportUrl', 'type', 'catalogId']
},
library: {
regexp: /^\/library(?:\/([^\/]*))?$/,
urlParamsNames: ['type']
regexp: /^\/library(?:\/([^/]*)\/([^/]*))?$/,
urlParamsNames: ['type', 'sort']
},
search: {
regexp: /^\/search$/,
urlParamsNames: []
},
metadetails: {
regexp: /^\/metadetails\/([^\/]*)\/([^\/]*)(?:\/([^\/]*))?$/,
regexp: /^\/metadetails\/([^/]*)\/([^/]*)(?:\/([^/]*))?$/,
urlParamsNames: ['type', 'id', 'videoId']
},
addons: {
regexp: /^\/addons(?:\/([^\/]*)\/([^\/]*)\/([^\/]*))?$/,
regexp: /^\/addons(?:\/([^/]*)\/([^/]*)\/([^/]*))?$/,
urlParamsNames: ['addonTransportUrl', 'catalogId', 'type']
},
settings: {
@ -32,7 +32,7 @@ const routesRegexp = {
urlParamsNames: []
},
player: {
regexp: /^\/player\/([^\/]*)\/([^\/]*)\/([^\/]*)\/([^\/]*)$/,
regexp: /^\/player\/([^/]*)\/([^/]*)\/([^/]*)\/([^/]*)$/,
urlParamsNames: ['type', 'id', 'videoId', 'stream']
}
};

64
src/common/useInLibrary.js
View file

@ -1,12 +1,60 @@
const useBinaryState = require('stremio/common/useBinaryState');
const React = require('react');
const { useServices } = require('stremio/services');
const useModelState = require('stremio/common/useModelState');
const useInLibrary = (id) => {
const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useBinaryState(false);
if (typeof id === 'string') {
return [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary];
} else {
return [false, null, null, null];
}
const useInLibrary = (metaItem) => {
const { core } = useServices();
const initLibraryItemsState = React.useCallback(() => {
return core.getState('library_items');
}, []);
const libraryItems = useModelState({
model: 'library_items',
init: initLibraryItemsState
});
const addToLibrary = React.useCallback((metaItem) => {
core.dispatch({
action: 'UserOp',
args: {
userOp: 'AddToLibrary',
args: {
meta_item: metaItem,
now: new Date()
}
}
});
}, []);
const removeFromLibrary = React.useCallback((id) => {
core.dispatch({
action: 'UserOp',
args: {
userOp: 'RemoveFromLibrary',
args: {
id,
now: new Date()
}
}
});
}, []);
const inLibrary = React.useMemo(() => {
return typeof metaItem === 'object' && metaItem !== null ?
libraryItems.ids.includes(metaItem.id)
:
false;
}, [metaItem, libraryItems]);
const toggleInLibrary = React.useMemo(() => {
if (typeof metaItem !== 'object' || metaItem === null) {
return null;
}
return () => {
if (inLibrary) {
removeFromLibrary(metaItem.id);
} else {
addToLibrary(metaItem);
}
};
}, [metaItem, inLibrary]);
return [inLibrary, toggleInLibrary];
};
module.exports = useInLibrary;

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

@ -95,7 +95,7 @@ const Router = ({ className, onPathNotMatch, ...props }) => {
<div className={classnames(className, 'routes-container')}>
{
views
.filter(view => view !== null)
.filter((view) => view !== null)
.map(({ key, component, urlParams, queryParams }, index, views) => (
<RouteFocusedProvider key={key} value={index === views.length - 1}>
<Route>

72
src/routes/Addons/Addon/Addon.js
View file

@ -2,24 +2,54 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const { Button, Image } = require('stremio/common');
const styles = require('./styles');
const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, toggle, onShareButtonClicked }) => {
const onKeyUp = React.useCallback((event) => {
if (event.key === 'Enter' && typeof toggle === 'function') {
toggle(event);
const Addon = ({ className, id, name, version, logo, description, types, installed, onToggle, onShare, dataset }) => {
const toggleButtonOnClick = React.useCallback((event) => {
if (typeof onToggle === 'function') {
onToggle({
type: 'toggle',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [toggle]);
}, [onToggle, dataset]);
const shareButtonOnClick = React.useCallback((event) => {
if (typeof onShare === 'function') {
onShare({
type: 'share',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [onShare, dataset]);
const onKeyDown = React.useCallback((event) => {
if (event.key === 'Enter' && typeof onToggle === 'function') {
onToggle({
type: 'toggle',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [onToggle, dataset]);
const renderLogoFallback = React.useMemo(() => () => {
return (
<Icon className={styles['icon']} icon={'ic_addons'} />
);
}, []);
return (
<Button className={classnames(styles['addon-container'], className)} data-id={id} onKeyUp={onKeyUp}>
<Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
<div className={styles['logo-container']}>
{
typeof logo === 'string' && logo.length > 0 ?
<img className={styles['logo']} src={logo} alt={' '} />
:
<Icon className={styles['icon']} icon={'ic_addons'} />
}
<Image
className={styles['logo']}
src={logo}
alt={' '}
renderFallback={renderLogoFallback}
/>
</div>
<div className={styles['info-container']}>
<div className={styles['name-container']} title={typeof name === 'string' && name.length > 0 ? name : id}>
@ -32,10 +62,10 @@ const Addon = ({ className, id, name, logo, description, types, version, transpo
null
}
{
Array.isArray(types) ?
Array.isArray(types) && types.length > 0 ?
<div className={styles['types-container']}>
{
types.length <= 1 ?
types.length === 1 ?
types.join('')
:
types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
@ -52,10 +82,10 @@ const Addon = ({ className, id, name, logo, description, types, version, transpo
}
</div>
<div className={styles['buttons-container']}>
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} data-id={id} onClick={toggle}>
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
</Button>
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={onShareButtonClicked}>
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={shareButtonOnClick}>
<Icon className={styles['icon']} icon={'ic_share'} />
<div className={styles['label']}>Share addon</div>
</Button>
@ -68,14 +98,14 @@ Addon.propTypes = {
className: PropTypes.string,
id: PropTypes.string,
name: PropTypes.string,
version: PropTypes.string,
logo: PropTypes.string,
description: PropTypes.string,
types: PropTypes.arrayOf(PropTypes.string),
version: PropTypes.string,
transportUrl: PropTypes.string,
installed: PropTypes.bool,
toggle: PropTypes.func,
onShareButtonClicked: PropTypes.func
onToggle: PropTypes.func,
onShare: PropTypes.func,
dataset: PropTypes.objectOf(PropTypes.string)
};
module.exports = Addon;

25
src/routes/Addons/Addon/styles.less
View file

@ -1,7 +1,6 @@
.addon-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
padding: 1rem;
background-color: var(--color-backgroundlighter);
@ -17,6 +16,7 @@
display: block;
width: 100%;
height: 100%;
padding: 0.5rem;
object-fit: contain;
object-position: center;
}
@ -31,14 +31,13 @@
}
.info-container {
flex-grow: 1000;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
min-width: 40rem;
padding: 0 0.5rem;
.name-container {
@ -47,7 +46,7 @@
flex-basis: auto;
padding: 0 0.5rem;
max-height: 3.6em;
font-size: 1.5rem;
font-size: 1.6rem;
color: var(--color-surfacelighter);
}
@ -55,6 +54,7 @@
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
color: var(--color-surfacelight);
@ -83,22 +83,14 @@
}
.buttons-container {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
min-width: 17rem;
flex: none;
width: 17rem;
.install-button-container, .uninstall-button-container, .share-button-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 17rem;
height: 3.5rem;
padding: 0 1rem;
@ -106,13 +98,8 @@
margin-top: 1rem;
}
&:not(:last-child) {
margin-right: 1rem;
}
.icon {
flex: none;
display: block;
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;

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

@ -1,49 +1,93 @@
const React = require('react');
const PropTypes = require('prop-types');
const Icon = require('stremio-icons/dom');
const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common');
const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
const Addon = require('./Addon');
const AddonPrompt = require('./AddonPrompt');
const useAddons = require('./useAddons');
const useSelectedAddon = require('./useSelectedAddon');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
const queryParams = new URLSearchParams([['addon', transportUrl]]);
if (addonsCatalogRequest !== null) {
const addonTransportUrl = encodeURIComponent(addonsCatalogRequest.base);
const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
window.location.replace(`#/addons/${addonTransportUrl}/${catalogId}/${type}?${queryParams}`);
} else {
window.location.replace(`#/addons?${queryParams}`);
}
};
const Addons = ({ urlParams, queryParams }) => {
const inputRef = React.useRef(null);
const [query, setQuery] = React.useState('');
const queryOnChange = React.useCallback((event) => {
setQuery(event.currentTarget.value);
}, []);
const [[addons, dropdowns, setSelectedAddon, installedAddons, error], installSelectedAddon, uninstallSelectedAddon] = useAddons(urlParams, queryParams);
const [addAddonModalOpened, setAddAddonModalOpened] = React.useState(false);
const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
const [sharedAddon, setSharedAddon] = React.useState(null);
const onAddAddonButtonClicked = React.useCallback(() => {
setAddAddonModalOpened(true);
}, []);
const onAddButtonClicked = React.useCallback(() => {
if (inputRef.current.value.length > 0) {
setSelectedAddon(inputRef.current.value);
setAddAddonModalOpened(false);
const addons = useAddons(urlParams);
const selectInputs = useSelectableInputs(addons);
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);
}
}, [setSelectedAddon]);
const installedAddon = React.useCallback((currentAddon) => {
return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
}, [installedAddons]);
const toggleAddon = React.useCallback(() => {
installedAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon);
clearSelectedAddon();
}, [selectedAddon]);
}, [addons]);
const addAddonModalButtons = React.useMemo(() => {
return [
{
className: styles['cancel-button'],
label: 'Cancel',
props: {
onClick: closeAddAddonModal
}
},
{
label: 'Add',
props: {
onClick: addAddonOnSubmit
}
}
];
}, [addAddonOnSubmit]);
const [search, setSearch] = React.useState('');
const searchInputOnChange = React.useCallback((event) => {
setSearch(event.currentTarget.value);
}, []);
const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null);
const clearSharedTransportUrl = React.useCallback(() => {
setSharedTransportUrl(null);
}, []);
const onAddonShare = React.useCallback((event) => {
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]);
React.useLayoutEffect(() => {
closeAddAddonModal();
setSearch('');
clearSharedTransportUrl();
}, [urlParams, queryParams]);
return (
<div className={styles['addons-container']}>
<NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
<div className={styles['addons-content']}>
<div className={styles['top-bar-container']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={onAddAddonButtonClicked}>
<div className={styles['selectable-inputs-container']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
<Icon className={styles['icon']} icon={'ic_plus'} />
<div className={styles['add-button-label']}>Add addon</div>
</Button>
{dropdowns.map((dropdown, index) => (
<Multiselect {...dropdown} key={index} className={styles['dropdown']} />
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))}
<label className={styles['search-bar-container']}>
<Icon className={styles['icon']} icon={'ic_search'} />
@ -51,116 +95,105 @@ const Addons = ({ urlParams, queryParams }) => {
className={styles['search-input']}
type={'text'}
placeholder={'Search addons...'}
value={query}
onChange={queryOnChange}
value={search}
onChange={searchInputOnChange}
/>
</label>
</div>
<div className={styles['addons-list-container']}>
{
error !== null ?
{
addons.selectable.catalogs.length === 0 && addons.catalog_resource === null ?
<div className={styles['message-container']}>
No addons
</div>
:
addons.catalog_resource === null ?
<div className={styles['message-container']}>
{error.type}{error.type === 'Other' ? ` - ${error.content}` : null}
No select
</div>
:
Array.isArray(addons) ?
addons.filter((addon) => query.length === 0 ||
((typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(query.toLowerCase())) ||
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
))
.map((addon, index) => (
<Addon
{...addon.manifest}
key={index}
installed={installedAddon(addon)}
className={styles['addon']}
toggle={() => setSelectedAddon(addon.transportUrl)}
onShareButtonClicked={() => setSharedAddon(addon)}
/>
))
:
addons.catalog_resource.content.type === 'Err' ?
<div className={styles['message-container']}>
Loading
Addons could not be loaded
</div>
}
</div>
{
addAddonModalOpened ?
<ModalDialog
className={styles['add-addon-prompt-container']}
title={'Add addon'}
buttons={[
{
label: 'Cancel',
className: styles['cancel-button'],
props: {
title: 'Cancel',
onClick: () => setAddAddonModalOpened(false)
}
},
{
label: 'Add',
props: {
title: 'Add',
onClick: onAddButtonClicked
}
}
]}
onCloseRequest={() => setAddAddonModalOpened(false)}
>
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
</ModalDialog>
:
null
}
{
selectedAddon !== null ?
<ModalDialog
className={styles['addon-prompt-container']}
buttons={[
{
label: 'Cancel',
className: styles['cancel-button'],
props: {
title: 'Cancel',
onClick: clearSelectedAddon
}
},
{
label: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
props: {
title: installedAddon(selectedAddon) ? 'Uninstall' : 'Install',
onClick: toggleAddon
}
}
]}
onCloseRequest={clearSelectedAddon}
>
<AddonPrompt
{...selectedAddon.manifest}
transportUrl={selectedAddon.transportUrl}
installed={installedAddon(selectedAddon)}
official={selectedAddon.flags.official}
cancel={clearSelectedAddon}
/>
</ModalDialog>
:
null
}
{
sharedAddon !== null ?
<ModalDialog className={styles['share-prompt-container']} title={'Share addon'} onCloseRequest={() => setSharedAddon(null)}>
<SharePrompt
url={sharedAddon.transportUrl}
close={() => setSharedAddon(null)}
/>
</ModalDialog>
:
null
:
addons.catalog_resource.content.type === 'Loading' ?
<div className={styles['message-container']}>
Loading
</div>
:
<div className={styles['addons-list-container']}>
{
addons.catalog_resource.content.content
.filter((addon) => {
return search.length === 0 ||
(
(typeof addon.manifest.name === 'string' && addon.manifest.name.toLowerCase().includes(search.toLowerCase())) ||
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(search.toLowerCase()))
);
})
.map((addon, index) => (
<Addon
key={index}
className={styles['addon']}
id={addon.manifest.id}
name={addon.manifest.name}
version={addon.manifest.version}
logo={addon.manifest.logo}
description={addon.manifest.description}
types={addon.manifest.types}
installed={addon.installed}
onToggle={onAddonToggle}
onShare={onAddonShare}
dataset={{ transportUrl: addon.transportUrl }}
/>
))
}
</div>
}
</div>
{
addAddonModalOpen ?
<ModalDialog
className={styles['add-addon-modal-container']}
title={'Add addon'}
buttons={addAddonModalButtons}
onCloseRequest={closeAddAddonModal}>
<TextInput
ref={addAddonUrlInputRef}
className={styles['addon-url-input']}
type={'text'}
placeholder={'Paste url...'}
onSubmit={addAddonOnSubmit}
/>
</ModalDialog>
:
null
}
{
typeof sharedTransportUrl === 'string' ?
<ModalDialog
className={styles['share-modal-container']}
title={'Share addon'}
onCloseRequest={clearSharedTransportUrl}>
<SharePrompt
className={styles['share-prompt-container']}
url={sharedTransportUrl}
/>
</ModalDialog>
:
null
}
</div>
);
};
Addons.propTypes = {
urlParams: PropTypes.exact({
addonTransportUrl: PropTypes.string,
catalogId: PropTypes.string,
type: PropTypes.string
}),
queryParams: PropTypes.instanceOf(URLSearchParams)
};
module.exports = Addons;

63
src/routes/Addons/styles.less
View file

@ -1,3 +1,7 @@
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
}
.addons-container {
display: flex;
flex-direction: column;
@ -16,11 +20,12 @@
display: flex;
flex-direction: column;
.top-bar-container {
.selectable-inputs-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
margin: 2rem;
padding: 1.5rem;
overflow: visible;
.add-button-container {
@ -30,7 +35,7 @@
align-items: center;
height: 3rem;
max-width: 15rem;
margin-right: 1rem;
margin-right: 1.5rem;
padding: 0 1rem;
background-color: var(--color-signal5);
@ -40,8 +45,8 @@
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
}
@ -56,12 +61,17 @@
}
}
.dropdown {
.select-input-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
height: 3rem;
margin-right: 1rem;
margin-right: 1.5rem;
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
}
.search-bar-container {
@ -72,7 +82,6 @@
flex-direction: row;
align-items: center;
height: 3rem;
margin-right: 1rem;
padding: 0 1rem;
background-color: var(--color-backgroundlighter);
cursor: text;
@ -82,7 +91,7 @@
}
.icon {
display: block;
flex: none;
width: 1.2rem;
height: 1.2rem;
margin-right: 1rem;
@ -91,7 +100,6 @@
.search-input {
flex: 1;
align-self: stretch;
color: var(--color-surfacelighter);
&::placeholder {
@ -103,32 +111,31 @@
}
}
.message-container {
flex: 1;
align-self: stretch;
padding: 0 1.5rem;
font-size: 2rem;
color: var(--color-surfacelighter);
}
.addons-list-container {
flex: 1;
align-self: stretch;
padding: 0 2rem;
padding: 0 1.5rem;
overflow-y: auto;
.addon {
width: 100%;
margin-bottom: 2rem;
}
.message-container {
padding: 0 2rem;
font-size: 2rem;
color: var(--color-surfacelighter);
margin-bottom: 1.5rem;
}
}
}
}
.add-addon-prompt-container {
.url-content {
flex: 1;
width: 100%;
padding: 0.5rem;
font-size: 0.9rem;
.add-addon-modal-container {
.addon-url-input {
width: 25rem;
padding: 0.5rem 1rem;
color: var(--color-surfacedark);
border: thin solid var(--color-surface);
}
@ -138,8 +145,8 @@
}
}
.addon-prompt-container {
.cancel-button {
background-color: var(--color-surfacedark);
.share-modal-container {
.share-prompt-container {
width: 25rem;
}
}

48
src/routes/Addons/useAddonDetails.js Normal file
View file

@ -0,0 +1,48 @@
const React = require('react');
const { useModelState } = require('stremio/common');
const initAddonDetailsState = () => ({
descriptor: null
});
const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
const descriptor = addonDetails.descriptor !== null && addonDetails.descriptor.content.type === 'Ready' ?
{
...addonDetails.descriptor,
content: {
...addonDetails.descriptor.content,
installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transport_url),
}
}
:
addonDetails.descriptor;
return { descriptor };
};
const useAddonDetails = (queryParams) => {
const loadAddonDetailsAction = React.useMemo(() => {
if (queryParams.has('addon')) {
return {
action: 'Load',
args: {
load: 'AddonDetails',
args: {
transport_url: queryParams.get('addon')
}
}
};
} else {
return {
action: 'Unload'
};
}
}, [queryParams]);
return useModelState({
model: 'addon_details',
action: loadAddonDetailsAction,
mapWithCtx: mapAddonDetailsStateWithCtx,
init: initAddonDetailsState,
});
};
module.exports = useAddonDetails;

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

@ -15,8 +15,28 @@ const initAddonsState = () => ({
const mapAddonsStateWithCtx = (addons, ctx) => {
const selectable = addons.selectable;
const catalog_resource = addons.catalog_resource;
// TODO add MY catalogId replace catalog content if resource catalog id is MY
// 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,
content: {
...addons.catalog_resource.content,
content: addons.catalog_resource.content.content.map((descriptor) => ({
transportUrl: descriptor.transportUrl,
installed: ctx.content.addons.some((addon) => addon.transportUrl === descriptor.transportUrl),
manifest: {
id: descriptor.manifest.id,
name: descriptor.manifest.name,
version: descriptor.manifest.version,
logo: descriptor.manifest.logo,
description: descriptor.manifest.description,
types: descriptor.manifest.types
}
}))
}
}
:
addons.catalog_resource;
return { selectable, catalog_resource };
};

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

@ -15,18 +15,6 @@ const equalWithouExtra = (request1, request2) => {
};
const mapSelectableInputs = (addons) => {
const selectedCatalogRequest = addons.catalog_resource !== null ?
addons.catalog_resource.request
:
{
base: null,
path: {
resource: 'addon_catalog',
id: null,
type_name: null,
extra: []
}
};
const catalogSelect = {
title: 'Select catalog',
options: addons.selectable.catalogs
@ -36,7 +24,8 @@ const mapSelectableInputs = (addons) => {
})),
selected: addons.selectable.catalogs
.filter(({ load_request: { path: { id } } }) => {
return id === selectedCatalogRequest.path.id;
return addons.catalog_resource !== null &&
addons.catalog_resource.request.path.id === id;
})
.map(({ load_request }) => JSON.stringify(load_request)),
onSelect: (event) => {
@ -52,7 +41,8 @@ const mapSelectableInputs = (addons) => {
})),
selected: addons.selectable.types
.filter(({ load_request }) => {
return equalWithouExtra(load_request, selectedCatalogRequest);
return addons.catalog_resource !== null &&
equalWithouExtra(addons.catalog_resource.request, load_request);
})
.map(({ load_request }) => JSON.stringify(load_request)),
onSelect: (event) => {

35
src/routes/Addons/useSelectedAddon.js
View file

@ -1,35 +0,0 @@
const React = require('react');
const UrlUtils = require('url');
const { routesRegexp, useLocationHash, useRouteActive } = require('stremio/common');
const useSelectedAddon = (transportUrl) => {
const [addon, setAddon] = React.useState(null);
const locationHash = useLocationHash();
const active = useRouteActive(routesRegexp.addons.regexp);
React.useEffect(() => {
if (typeof transportUrl !== 'string') {
setAddon(null);
return;
}
fetch(transportUrl) // TODO
.then((resp) => resp.json())
.then((manifest) => setAddon({ manifest, transportUrl, flags: {} }));
}, [transportUrl]);
const clear = React.useCallback(() => {
if (active) {
const { pathname, search } = UrlUtils.parse(locationHash.slice(1));
const queryParams = new URLSearchParams(search || '');
queryParams.delete('addon');
if ([...queryParams].length !== 0) {
window.location.replace(`#${pathname}?${queryParams.toString()}`);
} else {
window.location.replace(`#${pathname}`);
}
setAddon(null);
}
}, [active, locationHash]);
return [addon, clear, setAddon];
};
module.exports = useSelectedAddon;

9
src/routes/Board/Board.js
View file

@ -32,7 +32,7 @@ const Board = () => {
{board.catalog_resources.map((catalog_resource, index) => {
const title = `${catalog_resource.addon_name} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
switch (catalog_resource.content.type) {
case 'Ready':
case 'Ready': {
return (
<MetaRow
key={index}
@ -43,7 +43,8 @@ const Board = () => {
limit={10}
/>
);
case 'Err':
}
case 'Err': {
const message = `Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`;
return (
<MetaRow
@ -54,7 +55,8 @@ const Board = () => {
limit={10}
/>
);
case 'Loading':
}
case 'Loading': {
return (
<MetaRow.Placeholder
key={index}
@ -63,6 +65,7 @@ const Board = () => {
limit={10}
/>
);
}
}
})}
</div>

2
src/routes/Board/useItemOptions.js
View file

@ -10,7 +10,7 @@ const DISMISS_OPTION = {
value: 'dismiss'
};
const onSelect = (event) => {
const onSelect = () => {
// TODO {{event.value}} {{event.dataset}}
};

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

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button, MainNavBar, MetaItem, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
@ -135,4 +136,13 @@ const Discover = ({ urlParams, queryParams }) => {
);
};
Discover.propTypes = {
urlParams: PropTypes.exact({
addonTransportUrl: PropTypes.string,
type: PropTypes.string,
catalogId: PropTypes.string
}),
queryParams: PropTypes.instanceOf(URLSearchParams)
};
module.exports = Discover;

15
src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
View file

@ -4,16 +4,20 @@ const classnames = require('classnames');
const { Button, Checkbox } = require('stremio/common');
const styles = require('./styles');
const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, toggle, ...props }, ref) => {
const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, onToggle, ...props }, ref) => {
const checkboxOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
}
if (!event.nativeEvent.togglePrevented && typeof toggle === 'function') {
toggle(event);
if (!event.nativeEvent.togglePrevented && typeof onToggle === 'function') {
onToggle({
type: 'toggle',
reactEvent: event,
nativeEvent: event.nativeEvent
});
}
}, [toggle]);
}, [onToggle]);
const linkOnClick = React.useCallback((event) => {
event.nativeEvent.togglePrevented = true;
}, []);
@ -42,7 +46,8 @@ ConsentCheckbox.propTypes = {
label: PropTypes.string,
link: PropTypes.string,
href: PropTypes.string,
toggle: PropTypes.func
onToggle: PropTypes.func,
onClick: PropTypes.func
};
module.exports = ConsentCheckbox;

5
src/routes/Intro/CredentialsTextInput/CredentialsTextInput.js
View file

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const { TextInput } = require('stremio/common');
const CredentialsTextInput = React.forwardRef((props, ref) => {
@ -23,4 +24,8 @@ const CredentialsTextInput = React.forwardRef((props, ref) => {
CredentialsTextInput.displayName = 'CredentialsTextInput';
CredentialsTextInput.propTypes = {
onKeyDown: PropTypes.func
};
module.exports = CredentialsTextInput;

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

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { useRouteFocused } = require('stremio-router');
@ -73,14 +74,17 @@ const Intro = ({ queryParams }) => {
React.useEffect(() => {
const onEvent = ({ event, args }) => {
switch (event) {
case 'CtxActionErr':
const [_action, error] = args;
case 'CtxActionErr': {
const [, error] = args;
dispatch({ type: 'error', error: error.args.message });
case 'CtxChanged':
break;
}
case 'CtxChanged': {
const state = core.getState();
if (state.ctx.content.auth !== null) {
window.location.replace('#/');
}
}
}
};
if (routeFocused) {
@ -113,9 +117,7 @@ const Intro = ({ queryParams }) => {
}
});
})
.catch((err) => {
console.error(err);
});
.catch(() => { });
}
});
}, [state.email, state.password]);
@ -256,7 +258,7 @@ const Intro = ({ queryParams }) => {
<Icon className={styles['icon']} icon={'ic_facebook'} />
<div className={styles['label']}>Continue with Facebook</div>
</Button>
<div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
<div className={styles['facebook-statement']}>We won&#39;t post anything on your behalf</div>
<CredentialsTextInput
ref={emailRef}
className={styles['credentials-text-input']}
@ -294,7 +296,7 @@ const Intro = ({ queryParams }) => {
link={'Terms and conditions'}
href={'https://www.stremio.com/tos'}
checked={state.termsAccepted}
toggle={toggleTermsAccepted}
onToggle={toggleTermsAccepted}
/>
<ConsentCheckbox
ref={privacyPolicyRef}
@ -303,14 +305,14 @@ const Intro = ({ queryParams }) => {
link={'Privacy Policy'}
href={'https://www.stremio.com/privacy'}
checked={state.privacyPolicyAccepted}
toggle={togglePrivacyPolicyAccepted}
onToggle={togglePrivacyPolicyAccepted}
/>
<ConsentCheckbox
ref={marketingRef}
className={styles['consent-checkbox']}
label={'I agree to receive marketing communications from Stremio'}
checked={state.marketingAccepted}
toggle={toggleMarketingAccepted}
onToggle={toggleMarketingAccepted}
/>
</React.Fragment>
:
@ -343,4 +345,8 @@ const Intro = ({ queryParams }) => {
);
};
Intro.propTypes = {
queryParams: PropTypes.instanceOf(URLSearchParams)
};
module.exports = Intro;

14
src/routes/Library/Library.js
View file

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
const useLibrary = require('./useLibrary');
@ -6,8 +7,8 @@ const useSelectableInputs = require('./useSelectableInputs');
const useItemOptions = require('./useItemOptions');
const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => {
const library = useLibrary(urlParams, queryParams);
const Library = ({ urlParams }) => {
const library = useLibrary(urlParams);
const [typeSelect, sortPropSelect] = useSelectableInputs(library);
const [options, optionOnSelect] = useItemOptions();
return (
@ -67,6 +68,13 @@ const Library = ({ urlParams, queryParams }) => {
</div>
</div>
);
}
};
Library.propTypes = {
urlParams: PropTypes.exact({
type: PropTypes.string,
sort: PropTypes.string
})
};
module.exports = Library;

2
src/routes/Library/useItemOptions.js
View file

@ -10,7 +10,7 @@ const DISMISS_OPTION = {
value: 'dismiss'
};
const onSelect = (event) => {
const onSelect = () => {
// TODO {{event.value}} {{event.dataset}}
};

13
src/routes/Library/useLibrary.js
View file

@ -46,20 +46,17 @@ const onNewLibraryState = (library) => {
}
};
const useLibrary = (urlParams, queryParams) => {
const useLibrary = (urlParams) => {
const { core } = useServices();
const loadLibraryAction = React.useMemo(() => {
if (typeof urlParams.type === 'string') {
if (typeof urlParams.type === 'string' && typeof urlParams.sort === 'string') {
return {
action: 'Load',
args: {
load: 'LibraryFiltered',
args: {
type_name: urlParams.type,
sort_prop: queryParams.has('sort_prop') ?
queryParams.get('sort_prop')
:
null
sort_prop: urlParams.sort
}
}
};
@ -82,7 +79,7 @@ const useLibrary = (urlParams, queryParams) => {
};
}
}
}, [urlParams, queryParams]);
}, [urlParams]);
return useModelState({
model: 'library',
action: loadLibraryAction,
@ -90,6 +87,6 @@ const useLibrary = (urlParams, queryParams) => {
init: initLibraryState,
onNewState: onNewLibraryState
});
}
};
module.exports = useLibrary;

11
src/routes/Library/useSelectableInputs.js
View file

@ -16,13 +16,7 @@ const mapSelectableInputs = (library) => {
options: library.type_names
.map((type) => ({ label: type, value: type })),
onSelect: (event) => {
const queryParams = new URLSearchParams(
library.selected !== null ?
[['sort_prop', library.selected.sort_prop]]
:
[]
);
window.location.replace(`#/library/${encodeURIComponent(event.value)}?${queryParams.toString()}`);
window.location.replace(`#/library/${encodeURIComponent(event.value)}/${encodeURIComponent(library.selected.sort_prop)}`);
}
};
const sortPropSelect = {
@ -33,9 +27,8 @@ const mapSelectableInputs = (library) => {
[],
options: SORT_PROP_OPTIONS,
onSelect: (event) => {
const queryParams = new URLSearchParams([['sort_prop', event.value]]);
if (library.selected !== null) {
window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}?${queryParams.toString()}`);
window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}/${encodeURIComponent(event.value)}`);
}
}
};

24
src/routes/MetaDetails/MetaDetails.js
View file

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const { NavBar, MetaPreview, useInLibrary } = require('stremio/common');
const VideosList = require('./VideosList');
const StreamsList = require('./StreamsList');
@ -11,7 +12,20 @@ const MetaDetails = ({ urlParams }) => {
const [metaResourceRef, metaResources, selectedMetaResource] = useSelectableResource(metaDetails.selected.meta_resource_ref, metaDetails.meta_resources);
const streamsResourceRef = metaDetails.selected.streams_resource_ref;
const streamsResources = metaDetails.streams_resources;
const [inLibrary, , , toggleInLibrary] = useInLibrary(metaResourceRef !== null ? metaResourceRef.id : null);
const metaItem = React.useMemo(() => {
return selectedMetaResource !== null ?
selectedMetaResource.content.content
:
metaResourceRef !== null ?
{
id: metaResourceRef.id,
type: metaResourceRef.type_name,
name: ''
}
:
null;
}, [metaResourceRef, selectedMetaResource]);
const [inLibrary, toggleInLibrary] = useInLibrary(metaItem);
return (
<div className={styles['metadetails-container']}>
<NavBar
@ -98,4 +112,12 @@ const MetaDetails = ({ urlParams }) => {
);
};
MetaDetails.propTypes = {
urlParams: PropTypes.exact({
type: PropTypes.string,
id: PropTypes.string,
videoId: PropTypes.string
})
};
module.exports = MetaDetails;

2
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -44,7 +44,7 @@ const StreamsList = ({ className, streamsResources }) => {
</Button>
</div>
);
}
};
StreamsList.propTypes = {
className: PropTypes.string,

8
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
View file

@ -16,11 +16,9 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
const selected = React.useMemo(() => {
return [String(season)];
}, [season]);
const renderMultiselectLabelContent = React.useMemo(() => {
return () => (
<div className={styles['season-label']}>Season {season}</div>
);
}, [season]);
const renderMultiselectLabelContent = React.useMemo(() => () => (
<div className={styles['season-label']}>Season {season}</div>
), [season]);
const prevNextButtonOnClick = React.useCallback((event) => {
if (typeof onSelect === 'function') {
const seasonIndex = seasons.indexOf(season);

3
src/routes/MetaDetails/VideosList/Video/Video.js
View file

@ -6,7 +6,7 @@ const Icon = require('stremio-icons/dom');
const VideoPlaceholder = require('./VideoPlaceholder');
const styles = require('./styles');
const Video = ({ className, title, thumbnail, episode, released, upcoming, watched, progress, ...props }) => {
const Video = ({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, ...props }) => {
return (
<Button {...props} className={classnames(className, styles['video-container'])} title={title}>
{
@ -76,6 +76,7 @@ Video.Placeholder = VideoPlaceholder;
Video.propTypes = {
className: PropTypes.string,
id: PropTypes.string,
title: PropTypes.string,
thumbnail: PropTypes.string,
episode: PropTypes.number,

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

@ -1,4 +1,5 @@
const React = require('react');
const PropTypes = require('prop-types');
const Icon = require('stremio-icons/dom');
const { MainNavBar, MetaRow } = require('stremio/common');
const useSearch = require('./useSearch');
@ -68,6 +69,10 @@ const Search = ({ queryParams }) => {
</div>
</div>
);
}
};
Search.propTypes = {
queryParams: PropTypes.instanceOf(URLSearchParams)
};
module.exports = Search;

5
src/services/Core/Core.js
View file

@ -6,7 +6,7 @@ function Core() {
let error = null;
let starting = false;
let stremio_core = null;
let events = new EventEmitter();
const events = new EventEmitter();
events.on('error', () => { });
function onStateChanged() {
@ -26,6 +26,7 @@ function Core() {
try {
events.emit(name, args);
} catch (e) {
/* eslint-disable-next-line no-console */
console.error(e);
}
}
@ -96,6 +97,6 @@ function Core() {
this.getState = getState;
Object.freeze(this);
};
}
module.exports = Core;

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

@ -41,6 +41,6 @@ function KeyboardNavigation() {
this.stop = stop;
Object.freeze(this);
};
}
module.exports = KeyboardNavigation;

2
src/services/ServicesContext/index.js
View file

@ -4,4 +4,4 @@ const useServices = require('./useServices');
module.exports = {
ServicesProvider,
useServices
};
};

4
src/services/Shell/Shell.js
View file

@ -4,7 +4,7 @@ function Shell() {
let active = false;
let error = null;
let starting = false;
let events = new EventEmitter();
const events = new EventEmitter();
events.on('error', () => { });
function onStateChanged() {
@ -66,6 +66,6 @@ function Shell() {
this.dispatch = dispatch;
Object.freeze(this);
};
}
module.exports = Shell;

792
yarn.lock
View file

File diff suppressed because it is too large Load diff