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

pull development

Browse source
This commit is contained in:
nklhrstv 2020-03-02 15:52:37 +02:00
commit b644186d2a
7 changed files with 213 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/common/Checkbox/styles.less
View file

@ -1,7 +1,10 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.checkbox-container {
&:global(.checked) {
.icon {
background-color: var(--color-primary);
fill: @color-surface-light5;
background-color: @color-primaryvariant1;
}
}
@ -9,6 +12,6 @@
display: block;
width: 1rem;
height: 1rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
}
}

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

@ -2,6 +2,9 @@ const React = require('react');
const { useServices } = require('stremio/services');
const { useModelState } = require('stremio/common');
const INSTALLED_CATALOG_ID = 'INSTALLED';
const INSTALLED_CATALOG_BASE = '';
const initAddonsState = () => ({
selectable: {
types: [],
@ -11,19 +14,44 @@ const initAddonsState = () => ({
});
const mapAddonsStateWithCtx = (addons, ctx) => {
const installedSelectableTypes = ctx.profile.addons.map(addon => addon.manifest.types)
.flat(2).filter((type, index, types) => types.indexOf(type) === index)
.map((type) => ({
name: type,
request: {
base: INSTALLED_CATALOG_BASE,
path: {
resource: 'addon_catalog',
type_name: type,
id: INSTALLED_CATALOG_ID,
extra: []
}
}
}));
const selectable = {
types: addons.selectable.types,
catalogs: addons.selectable.catalogs
types: addons.selected !== null && addons.selected.request.base === INSTALLED_CATALOG_BASE && addons.selected.request.path.id === INSTALLED_CATALOG_ID ? installedSelectableTypes : addons.selectable.types,
catalogs: addons.selectable.catalogs.concat({
name: 'Installed',
addon_name: '',
request: {
base: INSTALLED_CATALOG_BASE,
path: {
resource: 'addon_catalog',
type_name: installedSelectableTypes[0].request.path.type_name,
id: INSTALLED_CATALOG_ID,
extra: []
}
}
})
};
// TODO replace catalog content if resource catalog id is MY
const catalog_resource = addons.catalog_resource !== null && addons.catalog_resource.content.type === 'Ready' ?
const catalog_resource = addons.selected !== null && addons.selected.request.base === INSTALLED_CATALOG_BASE && addons.selected.request.path.id === INSTALLED_CATALOG_ID ?
{
request: addons.catalog_resource.request,
request: addons.selected.request,
content: {
type: addons.catalog_resource.content.type,
content: addons.catalog_resource.content.content.map((addon) => ({
type: 'Ready',
content: ctx.profile.addons.filter((addon) => addon.manifest.types.includes(addons.selected.request.path.type_name)).map((addon) => ({
transportUrl: addon.transportUrl,
installed: ctx.profile.addons.some(({ transportUrl }) => transportUrl === addon.transportUrl),
installed: true,
manifest: {
id: addon.manifest.id,
name: addon.manifest.name,
@ -36,7 +64,27 @@ const mapAddonsStateWithCtx = (addons, ctx) => {
}
}
:
addons.catalog_resource;
addons.catalog_resource !== null && addons.catalog_resource.content.type === 'Ready' ?
{
request: addons.catalog_resource.request,
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),
manifest: {
id: addon.manifest.id,
name: addon.manifest.name,
version: addon.manifest.version,
logo: addon.manifest.logo,
description: addon.manifest.description,
types: addon.manifest.types
}
}))
}
}
:
addons.catalog_resource;
return { selectable, catalog_resource };
};

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

@ -24,11 +24,11 @@ const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, hre
return (
<Checkbox {...props} ref={ref} className={classnames(className, styles['consent-checkbox-container'])} checked={checked} onClick={checkboxOnClick}>
<div className={styles['label']}>
{label}
{label}{' '}
{
typeof link === 'string' && typeof href === 'string' ?
<Button className={styles['link']} href={href} target={'_blank'} tabIndex={-1} onClick={linkOnClick}>
{' '}{link}
{link}
</Button>
:
null

27
src/routes/Intro/ConsentCheckbox/styles.less
View file

@ -1,3 +1,5 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon;
}
@ -8,36 +10,27 @@
align-items: center;
padding: 0.5rem;
&:focus, &:hover {
background-color: var(--color-surfacedarker60);
.checkbox-icon {
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
.link {
color: var(--color-surfacelighter);
}
}
&:focus {
outline: none;
background-color: @color-surface-light5-20;
}
.checkbox-icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
fill: var(--color-surfacelight);
fill: @color-surface-dark5;
}
.label {
flex: 1;
margin-left: 0.5rem;
color: var(--color-surface);
font-size: 0.9rem;
color: @color-surface;
.link {
color: var(--color-surfacelight);
font-size: 0.9rem;
color: @color-surface-light5;
&:hover {
text-decoration: underline;

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

@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Modal, useRouteFocused } = require('stremio-router');
const { Button, useBinaryState, useCoreEvent } = require('stremio/common');
const { Button, Image, useBinaryState, useCoreEvent } = require('stremio/common');
const { useServices } = require('stremio/services');
const CredentialsTextInput = require('./CredentialsTextInput');
const ConsentCheckbox = require('./ConsentCheckbox');
@ -268,10 +268,25 @@ const Intro = ({ queryParams }) => {
return (
<div className={styles['intro-container']}>
<div className={styles['form-container']}>
<div className={styles['logo-container']}>
<Image className={styles['logo']} src={'/images/stremio_symbol.png'} />
<Icon className={styles['icon']} icon={'ic_stremio'} />
</div>
<Button className={classnames(styles['form-button'], styles['facebook-button'])} onClick={loginWithFacebook}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
<div className={styles['label']}>Continue with Facebook</div>
</Button>
{
state.form === SIGNUP_FORM ?
<Button className={classnames(styles['form-button'], styles['switch-form-button'], styles['switch-form-login-button'])} onClick={switchFormOnClick}>
<div className={styles['label-container']}>
<div className={styles['account-label']}>Already have an account?</div>
<div className={styles['label']}>LOG IN</div>
</div>
</Button>
:
null
}
<CredentialsTextInput
ref={emailRef}
className={styles['credentials-text-input']}
@ -340,7 +355,7 @@ const Intro = ({ queryParams }) => {
null
}
<Button className={classnames(styles['form-button'], styles['submit-button'])} onClick={state.form === SIGNUP_FORM ? signup : loginWithEmail}>
<div className={styles['label']}>{state.form === SIGNUP_FORM ? 'SING UP' : 'LOG IN'}</div>
<div className={styles['label']}>{state.form === SIGNUP_FORM ? 'Sign up' : 'Log in'}</div>
</Button>
{
state.form === SIGNUP_FORM ?
@ -350,9 +365,14 @@ const Intro = ({ queryParams }) => {
:
null
}
<Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchFormOnClick}>
<div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
</Button>
{
state.form === LOGIN_FORM ?
<Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchFormOnClick}>
<div className={styles['label']}>SIGN UP WITH EMAIL</div>
</Button>
:
null
}
</div>
{
passwordRestModalOpen ?

142
src/routes/Intro/styles.less
View file

@ -1,12 +1,12 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.intro-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background:
linear-gradient(var(--color-backgrounddark80), var(--color-backgrounddark80)),
linear-gradient(@color-background-dark3-80, @color-background-dark3-80),
url('/images/intro_background.jpg');
background-size: cover;
background-repeat: no-repeat;
@ -16,8 +16,31 @@
.form-container {
flex: none;
width: 20rem;
padding: 4rem 0;
width: 27rem;
margin: auto;
padding: 2rem 0;
.logo-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
.logo {
flex: none;
width: 4rem;
height: 4rem;
margin-right: 1rem;
}
.icon {
flex: none;
width: 8rem;
height: 4rem;
fill: @color-surface-dark4;
}
}
.form-button {
display: flex;
@ -31,7 +54,7 @@
width: 1rem;
height: 2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
}
.label {
@ -39,19 +62,24 @@
flex-shrink: 1;
flex-basis: auto;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-surfacelighter);
font-weight: 500;
color: @color-surface-light5;
text-align: center;
}
}
.facebook-button {
min-height: 4.5rem;
margin-bottom: 2rem;
background: var(--color-facebook);
margin-top: 2rem;
margin-bottom: 0.5rem;
background: @color-secondaryvariant1-dark5;
&:hover, &:focus {
filter: brightness(1.2);
&:hover {
background: @color-secondary-dark4;
}
&:focus {
outline-color: @color-surface-light5;
}
.label {
@ -63,21 +91,24 @@
display: block;
width: 100%;
margin: 1rem 0;
padding: 0.5rem;
border-bottom: thin solid var(--color-surface);
color: var(--color-surfacelighter);
padding: 1rem;
border-bottom: thin solid @color-surface;
color: @color-surface-light5;
&:hover, &:focus {
background-color: var(--color-surfacedarker60);
border-bottom-color: var(--color-surfacelighter);
&:hover {
background-color: @color-surface-light5-20;
}
&:focus {
border-bottom-color: @color-secondaryvariant2-light1;
&::placeholder {
color: var(--color-surfacelighter);
color: @color-secondaryvariant2-light1;
}
}
&::placeholder {
color: var(--color-surfacelight);
color: @color-surface-dark2;
}
}
@ -93,36 +124,37 @@
flex-shrink: 1;
flex-basis: auto;
padding: 0.5rem;
color: var(--color-surfacelight);
color: @color-surface-light3;
&:hover {
&:hover, &:focus {
text-decoration: underline;
color: var(--color-surfacelighter);
color: @color-secondaryvariant2-light1;
}
&:focus {
color: var(--color-surfacelighter);
outline: none;
background-color: @color-surface-light5-20;
}
}
}
.consent-checkbox {
margin: 1rem 0;
}
.error-message {
margin: 1rem 0;
text-align: center;
color: var(--color-signal1);
color: @color-accent5;
}
.submit-button {
min-height: 4rem;
margin: 1rem 0;
background-color: var(--color-primarydark);
background-color: @color-accent3;
&:hover {
background-color: var(--color-primary);
background-color: @color-accent3-dark1;
}
&:focus {
outline-color: @color-surface-light5;
}
.label {
@ -131,12 +163,18 @@
}
.guest-login-button {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
margin-top: 1rem;
padding: 1rem 0.5rem;
&:hover, &:focus {
background-color: var(--color-surfacedarker60);
&:hover {
.label {
text-decoration: underline;
}
}
&:focus {
outline: none;
background-color: @color-surface-light5-20;
}
}
@ -145,8 +183,36 @@
padding: 1rem 0.5rem;
&:hover, &:focus {
background-color: var(--color-surfacedarker60);
.label-container {
.label {
text-decoration: underline;
}
}
}
&:focus {
outline: none;
background-color: @color-surface-light5-20;
}
.label-container {
display: flex;
flex-direction: row;
align-items: baseline;
.account-label {
margin-right: 0.5rem;
color: @color-surface-dark2;
}
.label {
color: @color-accent4-light1;
}
}
}
.switch-form-login-button {
margin-bottom: 0.5rem;
}
}
}
@ -161,7 +227,7 @@
.label {
margin-bottom: 1rem;
font-size: 2rem;
color: var(--color-surfacelighter);
color: @color-surface-light5;
animation: 1s linear infinite alternate flash;
}
@ -169,7 +235,7 @@
flex: none;
width: 5rem;
height: 5rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
animation: 1s linear infinite alternate flash;
}

20
tests/routesRegexp.spec.js
View file

@ -118,11 +118,21 @@ describe('routesRegexp', () => {
.toEqual(['/library', undefined, undefined]);
});
it('match /library/', async () => {
expect(Array.from('/library/'.match(routesRegexp.library.regexp)))
.toEqual(['/library/', '', undefined]);
});
it('match /library//', async () => {
expect(Array.from('/library//'.match(routesRegexp.library.regexp)))
.toEqual(['/library//', '', '']);
});
it('match /library/1', async () => {
expect(Array.from('/library/1'.match(routesRegexp.library.regexp)))
.toEqual(['/library/1', '1', undefined]);
});
it('match /library/1/', async () => {
expect(Array.from('/library/1/'.match(routesRegexp.library.regexp)))
.toEqual(['/library/1/', '1', '']);
@ -138,21 +148,11 @@ describe('routesRegexp', () => {
.toEqual(['/library/1/2', '1', '2']);
});
it('not match /library/', async () => {
expect('/library/'.match(routesRegexp.library.regexp))
.toBe(null);
});
it('not match /library///', async () => {
expect('/library///'.match(routesRegexp.library.regexp))
.toBe(null);
});
it('not match /library/1', async () => {
expect('/library/1'.match(routesRegexp.library.regexp))
.toBe(null);
});
it('not match /library/1/2/', async () => {
expect('/library/1/2/'.match(routesRegexp.library.regexp))
.toBe(null);