From 3f71e9eca74279eff5aabf0f4b8469b564dc9716 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 30 Jan 2019 15:32:43 +0200
Subject: [PATCH 01/49] consent checkbox styles updated

---
 src/routes/Intro/styles.less | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 57c81ceac..fb208e950 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -114,8 +114,11 @@
                     &:focus-within {
                         border-color: var(--color-surfacelighter);
                     }
-                }
 
+                    &:hover {
+                        border-color: transparent;
+                    }
+                }
 
                 .forgot-password {
                     align-self: flex-end;
@@ -146,7 +149,6 @@
 
                 .submit-button {
                     width: 100%;
-                    outline: none;
                     padding: calc(var(--spacing) * 1.1);
                     font-size: 1.1em;
                     font-weight: 600;

From 4351ad1ed5b7ba5deadbd58064855dbbc43a51b4 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 30 Jan 2019 16:02:31 +0200
Subject: [PATCH 02/49] Input refactored to use React.createElement for maximum
 code reuse

---
 src/common/Input/Input.js | 65 +++++++++++++++------------------------
 1 file changed, 24 insertions(+), 41 deletions(-)

diff --git a/src/common/Input/Input.js b/src/common/Input/Input.js
index 6954257a2..90a4c7042 100644
--- a/src/common/Input/Input.js
+++ b/src/common/Input/Input.js
@@ -3,8 +3,18 @@ import PropTypes from 'prop-types';
 import { withFocusable } from 'stremio-common';
 
 const ENTER_KEY_CODE = 13;
-const BUTTON_INPUT_TYPES = ['button', 'submit', 'link', 'checkbox'];
-const TEXT_INPUT_TYPES = ['text', 'password', 'email'];
+const BUTTON_INPUT_TYPES = ['button', 'link', 'submit', 'checkbox'];
+const TEXT_INPUT_TYPES = ['text', 'password', 'email', 'search'];
+const TAG_NAMES_FOR_TYPE = {
+    button: 'div',
+    link: 'a',
+    submit: 'input',
+    checkbox: 'input',
+    text: 'input',
+    password: 'input',
+    email: 'input',
+    search: 'input'
+};
 
 class Input extends PureComponent {
     onClick = (event) => {
@@ -48,45 +58,18 @@ class Input extends PureComponent {
     }
 
     render() {
-        const { forwardedRef, focusable, type, ...props } = this.props;
-
-        if (type === 'button') {
-            return (
-                <div
-                    {...props}
-                    ref={forwardedRef}
-                    tabIndex={focusable ? 0 : -1}
-                    onKeyUp={this.onKeyUp}
-                    onDrag={this.onDrag}
-                    onMouseOut={this.onMouseOut}
-                />
-            );
-        }
-
-        if (type === 'link') {
-            return (
-                <a
-                    {...props}
-                    ref={forwardedRef}
-                    tabIndex={focusable ? 0 : -1}
-                    onKeyUp={this.onKeyUp}
-                    onDrag={this.onDrag}
-                    onMouseOut={this.onMouseOut}
-                />
-            );
-        }
-
-        return (
-            <input
-                {...props}
-                ref={forwardedRef}
-                tabIndex={focusable ? 0 : -1}
-                type={type}
-                onKeyUp={this.onKeyUp}
-                onDrag={this.onDrag}
-                onMouseOut={this.onMouseOut}
-            />
-        );
+        const { forwardedRef, focusable, type, children, ...props } = this.props;
+        const tagName = TAG_NAMES_FOR_TYPE[type];
+        const elementProps = {
+            ...props,
+            ref: forwardedRef,
+            type: tagName === 'input' ? type : null,
+            tabIndex: focusable ? 0 : -1,
+            onKeyUp: this.onKeyUp,
+            onDrag: this.onDrag,
+            onMouseOut: this.onMouseOut
+        };
+        return React.createElement(tagName, elementProps, children);
     }
 }
 

From b1bd44f9e5f55e37dba45a66480aaed89d043a0b Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 30 Jan 2019 16:07:25 +0200
Subject: [PATCH 03/49] Intro screen refactored to work with generic Input

---
 src/routes/Intro/Intro.js | 59 +++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index e392f8c19..fac91c781 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import Icon from 'stremio-icons/dom';
-import { Button, Input, Link } from 'stremio-common';
+import { Input } from 'stremio-common';
 import ConsentCheckbox from './ConsentCheckbox';
 import styles from './styles';
 
@@ -33,10 +33,30 @@ class Intro extends Component {
         };
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.selectedForm !== this.state.selectedForm ||
+            nextState.termsAccepted !== this.state.termsAccepted ||
+            nextState.privacyPolicyAccepted !== this.state.privacyPolicyAccepted ||
+            nextState.marketingAccepted !== this.state.marketingAccepted ||
+            nextState.email !== this.state.email ||
+            nextState.password !== this.state.password ||
+            nextState.confirmPassword !== this.state.confirmPassword ||
+            nextState.error !== this.state.error;
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.error !== this.state.error && this.state.error.length > 0) {
+            this.errorRef.current.scrollIntoView();
+        }
+
+        if (prevState.selectedForm !== this.state.selectedForm) {
+            this.emailRef.current.focus();
+        }
+    }
+
     changeSelectedForm = (event) => {
-        event.currentTarget.blur();
         this.setState({
-            selectedForm: event.currentTarget.dataset.option,
+            selectedForm: event.currentTarget.dataset.form,
             termsAccepted: false,
             privacyPolicyAccepted: false,
             marketingAccepted: false,
@@ -77,27 +97,6 @@ class Intro extends Component {
         }));
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextState.selectedForm !== this.state.selectedForm ||
-            nextState.termsAccepted !== this.state.termsAccepted ||
-            nextState.privacyPolicyAccepted !== this.state.privacyPolicyAccepted ||
-            nextState.marketingAccepted !== this.state.marketingAccepted ||
-            nextState.email !== this.state.email ||
-            nextState.password !== this.state.password ||
-            nextState.confirmPassword !== this.state.confirmPassword ||
-            nextState.error !== this.state.error;
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.error !== this.state.error && this.state.error.length > 0) {
-            this.errorRef.current.scrollIntoView();
-        }
-
-        if (prevState.selectedForm !== this.state.selectedForm) {
-            this.emailRef.current.focus();
-        }
-    }
-
     loginOnSubmit = (event) => {
         event.preventDefault();
         if (this.state.email.length < 8) {
@@ -174,17 +173,17 @@ class Intro extends Component {
                 <div className={styles['overlay']} />
                 <div className={styles['scroll-content']}>
                     <div className={styles['intro']}>
-                        <Button className={styles['facebook-button']}>
+                        <Input className={styles['facebook-button']} type={'button'} >
                             <Icon className={styles['icon']} icon={'ic_facebook'} />
                             <div className={styles['label']}>Login with Facebook</div>
-                        </Button>
+                        </Input>
                         <div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
                         <form className={styles['form-container']} onSubmit={this.state.selectedForm === FORMS.LOGIN ? this.loginOnSubmit : this.signUpOnSubmit}>
-                            <Input ref={this.emailRef} className={styles['text-input']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
+                            <Input ref={this.emailRef} className={styles['text-input']} type={'email'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
                             <Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
                             {
                                 this.state.selectedForm === FORMS.LOGIN ?
-                                    <Link className={styles['forgot-password']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Link>
+                                    <Input className={styles['forgot-password']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
                                     :
                                     <Fragment>
                                         <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
@@ -201,10 +200,10 @@ class Intro extends Component {
                             }
                             <Input className={styles['submit-button']} type={'submit'} value={this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'} />
                         </form>
-                        <Button className={styles['switch-form-button']} data-option={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</Button>
+                        <Input className={styles['switch-form-button']} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</Input>
                         {
                             this.state.selectedForm === FORMS.SIGN_UP ?
-                                <Button className={styles['guest-login-button']} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</Button>
+                                <Input className={styles['guest-login-button']} type={'button'} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</Input>
                                 :
                                 null
                         }

From 8bd6acf0c7ee1c67c2ec4b67c6dc6c09ab962f85 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 30 Jan 2019 16:17:34 +0200
Subject: [PATCH 04/49] unused method dropped from Input

---
 src/common/Input/Input.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/common/Input/Input.js b/src/common/Input/Input.js
index 90a4c7042..2ed378eee 100644
--- a/src/common/Input/Input.js
+++ b/src/common/Input/Input.js
@@ -17,16 +17,6 @@ const TAG_NAMES_FOR_TYPE = {
 };
 
 class Input extends PureComponent {
-    onClick = (event) => {
-        if (typeof this.props.onClick === 'function') {
-            this.props.onClick(event);
-        }
-
-        if (this.props.type === 'checkbox') {
-            event.preventDefault();
-        }
-    }
-
     onKeyUp = (event) => {
         if (typeof this.props.onKeyUp === 'function') {
             this.props.onKeyUp(event);

From a450ffc25fa0730418b60e0db6e75dbd05d50c94 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 30 Jan 2019 17:03:49 +0200
Subject: [PATCH 05/49] Checkbox ui component reimplemented

---
 src/common/Checkbox/Checkbox.js               | 59 ++++++++++---------
 src/common/Checkbox/styles.less               | 30 ++++++----
 .../Intro/ConsentCheckbox/ConsentCheckbox.js  | 11 ++--
 src/routes/Intro/ConsentCheckbox/styles.less  | 43 +++++++-------
 4 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/src/common/Checkbox/Checkbox.js b/src/common/Checkbox/Checkbox.js
index 4152fa6dc..94082c7bc 100644
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@@ -1,18 +1,11 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Icon from 'stremio-icons/dom';
-import { withFocusable } from 'stremio-common';
+import { Input } from 'stremio-common';
 import styles from './styles';
 
-class Checkbox extends Component {
-    shouldComponentUpdate(nextProps) {
-        return nextProps.focusable !== this.props.focusable ||
-            nextProps.checked !== this.props.checked ||
-            nextProps.disabled !== this.props.disabled ||
-            nextProps.className !== this.props.className;
-    }
-
+class Checkbox extends PureComponent {
     onClick = (event) => {
         event.preventDefault();
         if (typeof this.props.onClick === 'function') {
@@ -20,32 +13,48 @@ class Checkbox extends Component {
         }
     }
 
+    onDrag = (event) => {
+        if (typeof this.props.onDrag === 'function') {
+            this.props.onDrag(event);
+        }
+
+        if (!event.defaultPrevented) {
+            this.props.forwardedRef.current.blur();
+        }
+    }
+
+    onMouseOut = (event) => {
+        if (typeof this.props.onMouseOut === 'function') {
+            this.props.onMouseOut(event);
+        }
+
+        if (!event.defaultPrevented) {
+            this.props.forwardedRef.current.blur();
+        }
+    }
+
     render() {
         return (
-            <div className={classnames(this.props.className, styles['checkbox-container'], { 'checked': this.props.checked }, { 'disabled': this.props.disabled })}>
-                <Icon
-                    className={styles['icon']}
-                    icon={this.props.checked ? 'ic_check' : 'ic_box_empty'}
-                />
-                <input
+            <label className={classnames(this.props.className, styles['checkbox-container'], { 'checked': this.props.checked }, { 'disabled': this.props.disabled })} onClick={this.onClick} onDrag={this.onDrag} onMouseOut={this.onMouseOut}>
+                <Input
                     ref={this.props.forwardedRef}
                     className={styles['native-checkbox']}
                     type={'checkbox'}
-                    tabIndex={this.props.focusable ? 0 : -1}
                     disabled={this.props.disabled}
                     defaultChecked={this.props.checked}
-                    onClick={this.onClick}
                 />
-            </div>
+                <div className={styles['icon-container']}>
+                    <Icon className={styles['icon']} icon={this.props.checked ? 'ic_check' : 'ic_box_empty'} />
+                </div>
+                {React.Children.only(this.props.children)}
+            </label>
         );
     }
 }
 
 Checkbox.propTypes = {
-    className: PropTypes.string,
     disabled: PropTypes.bool.isRequired,
-    checked: PropTypes.bool.isRequired,
-    onClick: PropTypes.func
+    checked: PropTypes.bool.isRequired
 };
 
 Checkbox.defaultProps = {
@@ -53,12 +62,8 @@ Checkbox.defaultProps = {
     checked: false
 };
 
-const CheckboxWithFocusable = withFocusable(Checkbox);
-
-CheckboxWithFocusable.displayName = 'CheckboxWithFocusable';
-
 const CheckboxWithForwardedRef = React.forwardRef((props, ref) => (
-    <CheckboxWithFocusable {...props} forwardedRef={ref} />
+    <Checkbox {...props} forwardedRef={ref} />
 ));
 
 CheckboxWithForwardedRef.displayName = 'CheckboxWithForwardedRef';
diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index ffe321f53..3027a7c2e 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -1,28 +1,34 @@
 .checkbox-container {
     position: relative;
     z-index: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--background-color);
 
-    .icon {
-        height: 100%;
-        fill: var(--icon-color);
+    .icon-container {
+        width: var(--icon-size);
+        height: var(--icon-size);
+
+        .icon {
+            width: 100%;
+            height: 100%;
+            fill: var(--icon-color);
+            background-color: var(--icon-background-color);
+        }
     }
 
     .native-checkbox {
         position: absolute;
-        opacity: 0;
-        height: 0;
-        width: 0;
         top: 0;
         left: 0;
+        width: 0;
+        height: 0;
+        opacity: 0;
+        z-index: -1;
     }
 
     &:global(.checked) {
-        .icon {
-            padding: 10%;
+        .icon-container {
+            .icon {
+                padding: 10%;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
index 9dfd91105..27a2fbad4 100644
--- a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
+++ b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
@@ -4,14 +4,17 @@ import classnames from 'classnames';
 import { Checkbox } from 'stremio-common';
 import styles from './styles';
 
+const linkOnClick = (event) => {
+    event.stopPropagation();
+};
+
 const ConsentCheckbox = React.forwardRef(({ className, label, link, href, checked, onClick }, ref) => (
-    <label className={classnames(styles['consent-checkbox-container'], className)}>
-        <Checkbox ref={ref} className={styles['checkbox']} checked={checked} onClick={onClick} />
+    <Checkbox ref={ref} className={classnames(styles['consent-checkbox-container'], className)} checked={checked} onClick={onClick}>
         <div className={styles['label']}>
             {label}
-            {link && href ? <a className={styles['link']} href={href} target={'_blank'} tabIndex={'-1'}> {link}</a> : null}
+            {link && href ? <a className={styles['link']} href={href} target={'_blank'} tabIndex={'-1'} onClick={linkOnClick}> {link}</a> : null}
         </div>
-    </label>
+    </Checkbox>
 ));
 
 ConsentCheckbox.displayName = 'ConsentCheckbox';
diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index c1067f69d..5147675af 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -1,42 +1,41 @@
 .consent-checkbox-container {
+    --icon-size: 1.2em;
+    --icon-color: var(--color-surface);
+    --icon-background-color: transparent;
+
+    padding: calc(var(--spacing) * 0.5);
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: center;
     cursor: pointer;
 
-    .checkbox {
-        --icon-color: var(--color-surface);
-        margin-right: calc(var(--spacing) * 0.5);
-        width: 1.3em;
-        height: 1.3em;
+    .label {
+        flex: 1;
+        margin-left: calc(var(--spacing) * 0.5);
+        line-height: 1.2em;
+        color: var(--color-surface);
 
-        &:global(.checked) {
-            --icon-color: var(--color-surfacelight);
-            background-color: var(--color-primary);
+        .link {
+            line-height: 1.2em;
+            color: var(--color-surfacelight);
         }
     }
 
-    .label {
-        line-height: 1.2em;
-        color: var(--color-surface);
-    }
-
-    .link {
-        line-height: 1.2em;
-        color: var(--color-surfacelight);
+    &:global(.checked) {
+        --icon-color: var(--color-surfacelight);
+        --icon-background-color: var(--color-primary);
     }
 
     &:focus-within, &:hover {
-        .checkbox {
-            --icon-color: var(--color-surfacelighter);
-        }
+        --icon-color: var(--color-surfacelighter);
 
         .label {
             color: var(--color-surfacelight);
-        }
 
-        .link {
-            color: var(--color-surfacelighter);
+            .link {
+                color: var(--color-surfacelighter);
+            }
         }
     }
 }
\ No newline at end of file

From 6d7053e1e8456134bfeeb00edc53405ebf56f39d Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 31 Jan 2019 10:51:49 +0200
Subject: [PATCH 06/49] metaitem uses new button component

---
 src/common/MetaItem/MetaItem.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index b09d06461..6e71106d8 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Popup, Button } from 'stremio-common';
+import { Popup, Input } from 'stremio-common';
 import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
@@ -97,7 +97,7 @@ class MetaItem extends Component {
                                 <Popup.Menu>
                                     <div className={styles['menu-items-container']}>
                                         {this.props.menuOptions.map(({ label, type }) => (
-                                            <Button key={type} className={styles['menu-item']} data-meta-item-id={this.props.id} data-menu-option-type={type} onClick={this.menuOptionOnSelect}>{label}</Button>
+                                            <Input key={type} className={styles['menu-item']} type={'button'} data-meta-item-id={this.props.id} data-menu-option-type={type} onClick={this.menuOptionOnSelect}>{label}</Input>
                                         ))}
                                     </div>
                                 </Popup.Menu>
@@ -120,10 +120,10 @@ class MetaItem extends Component {
 
     render() {
         return (
-            <Button className={classnames(styles['meta-item-container'], styles[`relative-side-${this.props.relativeSide}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)} data-meta-item-id={this.props.id} onClick={this.onClick}>
+            <Input className={classnames(styles['meta-item-container'], styles[`relative-side-${this.props.relativeSide}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)} type={'button'} data-meta-item-id={this.props.id} onClick={this.onClick}>
                 {this.renderPoster()}
                 {this.renderInfoBar()}
-            </Button>
+            </Input>
         );
     }
 }

From 35d2277538c75ff03690d7fa465605a5a75afec5 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 31 Jan 2019 15:52:02 +0200
Subject: [PATCH 07/49] meta item styles updated

---
 src/common/MetaItem/styles.less | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 53e3d4491..8d8d0a28c 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -1,19 +1,18 @@
 .meta-item-container {
-    --play-icon-size: calc(var(--poster-relative-size) * .4);
-
     display: inline-flex;
     flex-direction: column;
     background-color: var(--color-backgroundlight);
-    border: calc(var(--progress-bar-size) * 0.5) solid transparent;
+    border: var(--focusable-border-size) solid transparent;
     cursor: pointer;
 
     .poster-image-container {
         position: relative;
+        z-index: 0;
         display: flex;
+        flex-direction: row;
         justify-content: center;
         align-items: center;
         overflow: hidden;
-        z-index: 0;
 
         .placeholder-image {
             width: calc(var(--poster-relative-size) * 0.5);
@@ -36,18 +35,18 @@
 
         .play-icon-container {
             position: absolute;
-            width: var(--play-icon-size);
-            height: var(--play-icon-size);
+            width: calc(var(--poster-relative-size) * .4);
+            height: calc(var(--poster-relative-size) * .4);
             z-index: 2;
             background-color: var(--color-surfacelighter);
             border-radius: 50%;
-            box-shadow: 0 0 calc(var(--play-icon-size) * 0.25) calc(var(--play-icon-size) * 0.04) var(--color-backgroundlight);
+            box-shadow: 0 0 calc(var(--poster-relative-size) * 0.1) calc(var(--poster-relative-size) * 0.015) var(--color-backgroundlight);
             visibility: var(--play-icon-visibility, collapse);
             text-align: center;
 
             .play-icon {
-                height: 40%;
                 margin-top: 30%;
+                height: 40%;
                 fill: var(--color-primary);
             }
         }
@@ -145,6 +144,12 @@
 
     &:hover, &:focus {
         border-color: var(--color-surfacelighter);
+
+        .poster-image-container {
+            .poster-image {
+                filter: brightness(1.2);
+            }
+        }
     }
 }
 
@@ -152,16 +157,16 @@
     --box-shadow: 0 0 2em .15em var(--color-background);
 
     .menu-items-container {
-        background-color: var(--color-surfacelighter);
         min-width: calc(var(--poster-relative-size) * 0.6);
         max-width: var(--poster-relative-size);
+        background-color: var(--color-surfacelighter);
 
         .menu-item {
-            display: inline-block;
-            width: 100%;
-            color: var(--color-backgrounddarker);
-            font-size: 1.2em;
             padding: 0.5em;
+            width: 100%;
+            display: inline-block;
+            font-size: 1.5em;
+            color: var(--color-backgrounddarker);
             cursor: pointer;
 
             &:hover, &:focus {

From f2699629cc427cca6e0a91ccd7aecdee94744812 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 31 Jan 2019 18:08:28 +0200
Subject: [PATCH 08/49] basic show more button implemented

---
 src/routes/Board/Board.js    | 52 +++++++++++++++++++++++++++---------
 src/routes/Board/styles.less | 32 +++++++++++++++-------
 2 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 496e78a28..29e858463 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
-import { MetaItem } from 'stremio-common';
+import { MetaItem, Input } from 'stremio-common';
 import styles from './styles';
 
 const CONTINUE_WATCHING_MENU = [
@@ -56,6 +56,13 @@ class Board extends PureComponent {
                     posterShape: 'square',
                     title: 'Movie title',
                     progress: 1
+                },
+                {
+                    id: '6',
+                    type: 'channel',
+                    posterShape: 'square',
+                    title: 'Movie title',
+                    progress: 0.1
                 }
             ],
             addonCatalogItems: [
@@ -72,6 +79,20 @@ class Board extends PureComponent {
                     title: 'Movie title',
                     subtitle: 'Movie subtitle'
                 },
+                {
+                    id: '022',
+                    type: 'movie',
+                    posterShape: 'square',
+                    title: 'Movie title',
+                    subtitle: 'Movie subtitle'
+                },
+                {
+                    id: '0234',
+                    type: 'movie',
+                    posterShape: 'poster',
+                    title: 'Movie title',
+                    subtitle: 'Movie subtitle'
+                },
             ]
         };
     }
@@ -97,18 +118,23 @@ class Board extends PureComponent {
         return (
             <div className={styles['board-container']}>
                 <div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
-                    {this.items.continueWatchingItems.map((props) => (
-                        <MetaItem
-                            key={props.id}
-                            className={styles['meta-item']}
-                            popupClassName={styles['meta-item-popup-container']}
-                            relativeSide={'height'}
-                            menuOptions={CONTINUE_WATCHING_MENU}
-                            onClick={this.onClick}
-                            menuOptionOnSelect={this.menuOptionOnSelect}
-                            {...props}
-                        />
-                    ))}
+                    <div className={styles['meta-items-container']}>
+                        {this.items.continueWatchingItems.map((props) => (
+                            <MetaItem
+                                key={props.id}
+                                className={styles['meta-item']}
+                                popupClassName={styles['meta-item-popup-container']}
+                                relativeSide={'height'}
+                                menuOptions={CONTINUE_WATCHING_MENU}
+                                onClick={this.onClick}
+                                menuOptionOnSelect={this.menuOptionOnSelect}
+                                {...props}
+                            />
+                        ))}
+                    </div>
+                    <Input className={styles['show-more-container']} type={'button'}>
+                        show more
+                    </Input>
                 </div>
                 <div className={classnames(styles['board-row'], styles['notificatins-row'])}>
                     {this.items.addonCatalogItems.map((props) => (
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 08c08613b..607952b22 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -1,20 +1,18 @@
 .board-container, .meta-item-popup-container {
     font-size: 12px;
-    --progress-bar-size: 6px;
 
     .board-row {
+
         &.continue-watching-row {
-            .meta-item {
-                --poster-relative-size: calc(180px * var(--poster-shape-ratio));
-                --play-icon-visibility: visible;
-            }
+            --poster-relative-size: calc(180px * var(--poster-shape-ratio));
+            --progress-bar-size: 6px;
+            --play-icon-visibility: visible;
         }
 
         &.notificatins-row {
-            .meta-item {
-                --poster-relative-size: 180px;
-                --play-icon-size: 105px;
+            --poster-relative-size: 180px;
 
+            .meta-item {
                 &:hover, &:focus {
                     --play-icon-visibility: visible;
                 }
@@ -34,8 +32,22 @@
         flex-direction: row;
         align-items: stretch;
 
-        .meta-item {
-            margin: 10px;
+        .meta-items-container {
+            display: flex;
+            flex-direction: row;
+            overflow: hidden;
+
+            .meta-item {
+                margin: 1em;
+            }
+        }
+
+        .show-more-container {
+            margin: 1em;
+            flex: 1;
+            min-width: calc(var(--poster-relative-size) * 0.8);
+            background-color: var(--color-backgroundlighter);
+            cursor: pointer;
         }
     }
 }
\ No newline at end of file

From e9fe5c4a1d9fa7ec2879d88669485fd3eb753781 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 31 Jan 2019 18:36:19 +0200
Subject: [PATCH 09/49] show more button with fixed width

---
 src/routes/Board/Board.js    | 2 +-
 src/routes/Board/styles.less | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 29e858463..ea128b2ef 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -89,7 +89,7 @@ class Board extends PureComponent {
                 {
                     id: '0234',
                     type: 'movie',
-                    posterShape: 'poster',
+                    posterShape: 'landscape',
                     title: 'Movie title',
                     subtitle: 'Movie subtitle'
                 },
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 607952b22..f9597c633 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -33,6 +33,7 @@
         align-items: stretch;
 
         .meta-items-container {
+            flex: 1;
             display: flex;
             flex-direction: row;
             overflow: hidden;
@@ -44,8 +45,7 @@
 
         .show-more-container {
             margin: 1em;
-            flex: 1;
-            min-width: calc(var(--poster-relative-size) * 0.8);
+            width: 20em;
             background-color: var(--color-backgroundlighter);
             cursor: pointer;
         }

From 34b34c5ba627faaad7bdd4c14072676da1a87836 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Sun, 3 Feb 2019 10:43:39 +0200
Subject: [PATCH 10/49] meta item reimplemented

---
 src/common/MetaItem/MetaItem.js |  18 +++--
 src/common/MetaItem/styles.less | 102 +++++++++--------------
 src/routes/Board/Board.js       | 139 ++++++++++++++++++++------------
 src/routes/Board/styles.less    |  45 ++++++++---
 4 files changed, 170 insertions(+), 134 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 6e71106d8..dd966f64e 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -20,7 +20,6 @@ class MetaItem extends Component {
             nextProps.popupClassName !== this.props.popupClassName ||
             nextProps.id !== this.props.id ||
             nextProps.type !== this.props.type ||
-            nextProps.relativeSide !== this.props.relativeSide ||
             nextProps.posterShape !== this.props.posterShape ||
             nextProps.poster !== this.props.poster ||
             nextProps.title !== this.props.title ||
@@ -69,11 +68,16 @@ class MetaItem extends Component {
                     : 'ic_movies';
         return (
             <div className={styles['poster-image-container']}>
-                <Icon className={styles['placeholder-image']} icon={placeholderIcon} />
-                <div className={styles['poster-image']} style={{ backgroundImage: `url('${this.props.poster}')` }} />
-                <div className={styles['play-icon-container']}>
-                    <Icon className={styles['play-icon']} icon={'ic_play'} viewBox={'-291.6 0 1190.6 1024'} />
+                <div className={styles['placeholder-image-container']}>
+                    <Icon className={styles['placeholder-image']} icon={placeholderIcon} />
                 </div>
+                <div className={styles['poster-image']} style={{ backgroundImage: `url('${this.props.poster}')` }} />
+                <svg className={styles['play-icon-container']} viewBox={'0 0 100 100'}>
+                    <circle className={styles['play-icon-background']} cx={'50'} cy={'50'} r={'50'} />
+                    <svg className={styles['play-icon']} x={0} y={25} width={100} height={50} viewBox={'0 0 37.14 32'}>
+                        <path d={'M 9.14,0 37.14,16 9.14,32 Z'} />
+                    </svg>
+                </svg>
                 {this.renderProgress()}
             </div>
         );
@@ -120,7 +124,7 @@ class MetaItem extends Component {
 
     render() {
         return (
-            <Input className={classnames(styles['meta-item-container'], styles[`relative-side-${this.props.relativeSide}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)} type={'button'} data-meta-item-id={this.props.id} onClick={this.onClick}>
+            <Input className={classnames(styles['meta-item-container'], styles[`poster-shape-${this.props.posterShape}`], this.props.className)} type={'button'} data-meta-item-id={this.props.id} onClick={this.onClick}>
                 {this.renderPoster()}
                 {this.renderInfoBar()}
             </Input>
@@ -135,7 +139,6 @@ MetaItem.propTypes = {
     menuOptionOnSelect: PropTypes.func,
     id: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
-    relativeSide: PropTypes.oneOf(['auto', 'height']).isRequired,
     posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired,
     poster: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
@@ -148,7 +151,6 @@ MetaItem.propTypes = {
     })).isRequired
 };
 MetaItem.defaultProps = {
-    relativeSide: 'auto',
     posterShape: 'square',
     poster: '',
     title: '',
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 8d8d0a28c..7f0ee91f8 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -1,6 +1,7 @@
 .meta-item-container {
     display: inline-flex;
     flex-direction: column;
+    align-items: stretch;
     background-color: var(--color-backgroundlight);
     border: var(--focusable-border-size) solid transparent;
     cursor: pointer;
@@ -8,16 +9,20 @@
     .poster-image-container {
         position: relative;
         z-index: 0;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
 
-        .placeholder-image {
-            width: calc(var(--poster-relative-size) * 0.5);
-            height: calc(var(--poster-relative-size) * 0.5);
-            fill: var(--color-surfacelighter);
+        .placeholder-image-container {
+            position: absolute;
+            top: 25%;
+            right: 0;
+            bottom: 25%;
+            left: 0;
+            z-index: 0;
+
+            .placeholder-image {
+                width: 100%;
+                height: 100%;
+                fill: var(--color-surfacelight20);
+            }
         }
 
         .poster-image {
@@ -35,18 +40,19 @@
 
         .play-icon-container {
             position: absolute;
-            width: calc(var(--poster-relative-size) * .4);
-            height: calc(var(--poster-relative-size) * .4);
+            top: 30%;
+            height: 40%;
+            width: 100%;
             z-index: 2;
-            background-color: var(--color-surfacelighter);
-            border-radius: 50%;
-            box-shadow: 0 0 calc(var(--poster-relative-size) * 0.1) calc(var(--poster-relative-size) * 0.015) var(--color-backgroundlight);
+            overflow: visible;
             visibility: var(--play-icon-visibility, collapse);
-            text-align: center;
+
+            .play-icon-background {
+                fill: var(--color-surfacelighter);
+                filter: drop-shadow(0 0 0.5em var(--color-backgroundlight));
+            }
 
             .play-icon {
-                margin-top: 30%;
-                height: 40%;
                 fill: var(--color-primary);
             }
         }
@@ -57,15 +63,19 @@
             bottom: 0;
             left: 0;
             z-index: 3;
-            height: var(--progress-bar-size);
+            height: 0.5em;
             background-color: var(--color-backgroundlighter);
-            box-shadow: 0 0 calc(var(--progress-bar-size) * 4) calc(var(--progress-bar-size) * 1.5) var(--color-backgroundlight);
 
             .progress {
                 height: 100%;
                 background-color: var(--color-primary);
             }
         }
+
+        &:before {
+            content: "";
+            display: block;
+        }
     }
 
     .title-bar-container {
@@ -97,75 +107,39 @@
     }
 
     &.poster-shape-square {
-        .poster-image-container {
-            width: var(--poster-relative-size);
-            height: var(--poster-relative-size);
-        }
-
-        .title-bar-container {
-            width: var(--poster-relative-size);
+        .poster-image-container:before {
+            padding-top: 100%;
         }
     }
 
     &.poster-shape-landscape {
-        .poster-image-container {
-            width: calc(var(--poster-relative-size) / var(--landscape-shape-ratio));
-            height: var(--poster-relative-size);
-        }
-
-        .title-bar-container {
-            width: calc(var(--poster-relative-size) / var(--landscape-shape-ratio));
+        .poster-image-container:before {
+            padding-top: calc(100% * var(--landscape-shape-ratio));
         }
     }
 
     &.poster-shape-poster {
-        &.relative-side-auto {
-            .poster-image-container {
-                width: var(--poster-relative-size);
-                height: calc(var(--poster-relative-size) * var(--poster-shape-ratio));
-            }
-
-            .title-bar-container {
-                width: var(--poster-relative-size);
-            }
-        }
-
-        &.relative-side-height {
-            .poster-image-container {
-                width: calc(var(--poster-relative-size) / var(--poster-shape-ratio));
-                height: var(--poster-relative-size);
-            }
-
-            .title-bar-container {
-                width: calc(var(--poster-relative-size) / var(--poster-shape-ratio));
-            }
+        .poster-image-container:before {
+            padding-top: calc(100% * var(--poster-shape-ratio));
         }
     }
 
     &:hover, &:focus {
         border-color: var(--color-surfacelighter);
-
-        .poster-image-container {
-            .poster-image {
-                filter: brightness(1.2);
-            }
-        }
     }
 }
 
 .menu-popup-container {
-    --box-shadow: 0 0 2em .15em var(--color-background);
+    --box-shadow: 0 0 1.5em .2em var(--color-backgroundlight);
 
     .menu-items-container {
-        min-width: calc(var(--poster-relative-size) * 0.6);
-        max-width: var(--poster-relative-size);
+        min-width: 6em;
+        max-width: 10em;
         background-color: var(--color-surfacelighter);
 
         .menu-item {
             padding: 0.5em;
             width: 100%;
-            display: inline-block;
-            font-size: 1.5em;
             color: var(--color-backgrounddarker);
             cursor: pointer;
 
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index ea128b2ef..aecdcb38b 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -19,26 +19,86 @@ class Board extends PureComponent {
         super(props);
 
         this.items = {
+            addonCatalogItems2: [
+                {
+                    id: '0',
+                    type: 'movie',
+                    posterShape: 'poster',
+                    poster: 'qwe',
+                    title: 'Movie title',
+                    subtitle: '123',
+                    progress: 0.7
+                },
+                {
+                    id: '120',
+                    type: 'movie',
+                    posterShape: 'square',
+                    poster: 'qwe',
+                    title: 'Movie title',
+                    progress: 0.7
+                },
+                {
+                    id: '03',
+                    type: 'movie',
+                    posterShape: 'poster',
+                    poster: 'qwe',
+                    title: 'Movie title',
+                    progress: 0.7
+                },
+                {
+                    id: '40',
+                    type: 'movie',
+                    posterShape: 'poster',
+                    poster: 'qwe',
+                    title: 'Movie title',
+                    progress: 0.7
+                },
+                {
+                    id: '05',
+                    type: 'movie',
+                    posterShape: 'poster',
+                    poster: 'qwe',
+                    title: 'Movie title',
+                    progress: 0.7
+                },
+                {
+                    id: '055',
+                    type: 'movie',
+                    posterShape: 'poster',
+                    poster: 'qwe',
+                    title: 'Movie title',
+                    progress: 0.7
+                },
+                {
+                    id: '058',
+                    type: 'movie',
+                    posterShape: 'poster',
+                    poster: 'qwe',
+                    title: 'Movie title',
+                    progress: 0.7
+                },
+            ],
             continueWatchingItems: [
                 {
                     id: '0',
                     type: 'movie',
                     posterShape: 'poster',
+                    poster: 'https://i.ytimg.com/vi/97AUCrEgTj0/hqdefault.jpg',
                     title: 'Movie title',
                     progress: 0.7
                 },
                 {
                     id: '1',
                     type: 'movie',
-                    posterShape: 'poster',
+                    posterShape: 'square',
                     title: 'Movie title',
                     progress: 0.2
                 },
                 {
                     id: '3',
                     type: 'movie',
-                    poster: 'https://www.stremio.com/website/home-stremio.png',
-                    posterShape: 'poster',
+                    poster: 'https://www.stremio.com/website/home-testimonials.jpg',
+                    posterShape: 'square',
                     title: 'Movie title',
                     progress: 0.4
                 },
@@ -53,46 +113,17 @@ class Board extends PureComponent {
                 {
                     id: '5',
                     type: 'channel',
-                    posterShape: 'square',
+                    posterShape: 'poster',
                     title: 'Movie title',
                     progress: 1
                 },
                 {
                     id: '6',
                     type: 'channel',
-                    posterShape: 'square',
+                    posterShape: 'poster',
                     title: 'Movie title',
                     progress: 0.1
                 }
-            ],
-            addonCatalogItems: [
-                {
-                    id: '01',
-                    type: 'movie',
-                    posterShape: 'landscape',
-                    title: 'Movie title'
-                },
-                {
-                    id: '02',
-                    type: 'movie',
-                    posterShape: 'landscape',
-                    title: 'Movie title',
-                    subtitle: 'Movie subtitle'
-                },
-                {
-                    id: '022',
-                    type: 'movie',
-                    posterShape: 'square',
-                    title: 'Movie title',
-                    subtitle: 'Movie subtitle'
-                },
-                {
-                    id: '0234',
-                    type: 'movie',
-                    posterShape: 'landscape',
-                    title: 'Movie title',
-                    subtitle: 'Movie subtitle'
-                },
             ]
         };
     }
@@ -119,32 +150,34 @@ class Board extends PureComponent {
             <div className={styles['board-container']}>
                 <div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
                     <div className={styles['meta-items-container']}>
-                        {this.items.continueWatchingItems.map((props) => (
+                        {this.items.continueWatchingItems.map((item) => (
                             <MetaItem
-                                key={props.id}
-                                className={styles['meta-item']}
-                                popupClassName={styles['meta-item-popup-container']}
-                                relativeSide={'height'}
+                                {...item}
+                                key={item.id}
+                                className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
+                                posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
                                 menuOptions={CONTINUE_WATCHING_MENU}
-                                onClick={this.onClick}
                                 menuOptionOnSelect={this.menuOptionOnSelect}
-                                {...props}
+                                onClick={this.onClick}
                             />
                         ))}
                     </div>
-                    <Input className={styles['show-more-container']} type={'button'}>
-                        show more
-                    </Input>
+                    <Input className={styles['show-more-container']} type={'button'} />
                 </div>
-                <div className={classnames(styles['board-row'], styles['notificatins-row'])}>
-                    {this.items.addonCatalogItems.map((props) => (
-                        <MetaItem
-                            key={props.id}
-                            className={styles['meta-item']}
-                            onClick={this.onClick}
-                            {...props}
-                        />
-                    ))}
+                <div className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
+                    <div className={styles['meta-items-container']}>
+                        {this.items.addonCatalogItems2.map((item, _, metaItems) => (
+                            <MetaItem
+                                {...item}
+                                key={item.id}
+                                className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
+                                posterShape={metaItems[0].posterShape}
+                                progress={0}
+                                onClick={this.onClick}
+                            />
+                        ))}
+                    </div>
+                    <Input className={styles['show-more-container']} type={'button'} />
                 </div>
             </div>
         );
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index f9597c633..0067a49cd 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -2,20 +2,33 @@
     font-size: 12px;
 
     .board-row {
-
         &.continue-watching-row {
-            --poster-relative-size: calc(180px * var(--poster-shape-ratio));
-            --progress-bar-size: 6px;
-            --play-icon-visibility: visible;
+            .meta-item {
+                --play-icon-visibility: visible;
+
+                &:nth-child(n+5) {
+                    display: none;
+                }
+            }
         }
 
         &.notificatins-row {
-            --poster-relative-size: 180px;
-
             .meta-item {
                 &:hover, &:focus {
                     --play-icon-visibility: visible;
                 }
+
+                &:nth-child(n+4) {
+                    display: none;
+                }
+            }
+        }
+
+        &.addon-catalog-row {
+            .meta-item {
+                &:nth-child(n+6) {
+                    display: none;
+                }
             }
         }
     }
@@ -24,28 +37,42 @@
 .board-container {
     width: 100%;
     height: 100%;
+    padding: 2em;
     overflow-x: hidden;
     overflow-y: auto;
 
     .board-row {
+        width: 100%;
         display: flex;
         flex-direction: row;
         align-items: stretch;
 
         .meta-items-container {
-            flex: 1;
+            flex: 5;
             display: flex;
             flex-direction: row;
-            overflow: hidden;
+            align-items: stretch;
 
             .meta-item {
                 margin: 1em;
+
+                &.poster-shape-square {
+                    flex: 1;
+                }
+
+                &.poster-shape-landscape {
+                    flex: calc(1 / var(--landscape-shape-ratio));
+                }
+
+                &.poster-shape-poster {
+                    flex: calc(1 / var(--poster-shape-ratio));
+                }
             }
         }
 
         .show-more-container {
             margin: 1em;
-            width: 20em;
+            flex: 1;
             background-color: var(--color-backgroundlighter);
             cursor: pointer;
         }

From 6db19827e8b12cb95dc89cb621b285947d0a491a Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 4 Feb 2019 11:35:24 +0200
Subject: [PATCH 11/49] metaitems finished

---
 src/common/MetaItem/styles.less | 9 +++++----
 src/routes/Board/Board.js       | 2 +-
 src/routes/Board/styles.less    | 6 +++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 7f0ee91f8..07890907b 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -13,9 +13,9 @@
         .placeholder-image-container {
             position: absolute;
             top: 25%;
-            right: 0;
+            right: 10%;
             bottom: 25%;
-            left: 0;
+            left: 10%;
             z-index: 0;
 
             .placeholder-image {
@@ -133,11 +133,12 @@
     --box-shadow: 0 0 1.5em .2em var(--color-backgroundlight);
 
     .menu-items-container {
-        min-width: 6em;
-        max-width: 10em;
+        min-width: 8em;
+        max-width: 12em;
         background-color: var(--color-surfacelighter);
 
         .menu-item {
+            font-size: 1.2em;
             padding: 0.5em;
             width: 100%;
             color: var(--color-backgrounddarker);
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index aecdcb38b..d0c8279bc 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -26,7 +26,6 @@ class Board extends PureComponent {
                     posterShape: 'poster',
                     poster: 'qwe',
                     title: 'Movie title',
-                    subtitle: '123',
                     progress: 0.7
                 },
                 {
@@ -155,6 +154,7 @@ class Board extends PureComponent {
                                 {...item}
                                 key={item.id}
                                 className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
+                                popupClassName={styles['meta-item-popup-container']}
                                 posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
                                 menuOptions={CONTINUE_WATCHING_MENU}
                                 menuOptionOnSelect={this.menuOptionOnSelect}
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 0067a49cd..8f4561689 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -1,12 +1,12 @@
 .board-container, .meta-item-popup-container {
-    font-size: 12px;
+    font-size: 18px;
 
     .board-row {
         &.continue-watching-row {
             .meta-item {
                 --play-icon-visibility: visible;
 
-                &:nth-child(n+5) {
+                &:nth-child(n+6) {
                     display: none;
                 }
             }
@@ -26,7 +26,7 @@
 
         &.addon-catalog-row {
             .meta-item {
-                &:nth-child(n+6) {
+                &:nth-child(n+7) {
                     display: none;
                 }
             }

From 788e141a6f34b513bc96d1ee60cdb62f89f1bc98 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 4 Feb 2019 13:49:51 +0200
Subject: [PATCH 12/49] intro background renamed

---
 .../{login_background.jpg => intro_background.jpg}  | Bin
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename images/{login_background.jpg => intro_background.jpg} (100%)

diff --git a/images/login_background.jpg b/images/intro_background.jpg
similarity index 100%
rename from images/login_background.jpg
rename to images/intro_background.jpg

From 59722d25c75df30aff64495279e9f44bcbb3e1e1 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 4 Feb 2019 13:50:04 +0200
Subject: [PATCH 13/49] app styles updated

---
 src/App/styles.less | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 960b30bf9..066281dec 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -61,6 +61,8 @@
     text-decoration: none;
     outline: none;
     appearance: none;
+    background: none;
+    box-shadow: none;
 }
 
 html, body, :global(#app) {
@@ -79,12 +81,14 @@ html, body, :global(#app) {
         height: 100%;
     }
 
-    input[type="email"], input[type="password"], input[type="text"] {
-        user-select: text;
-    }
+    input {
+        &::-moz-focus-inner {
+            border: none;
+        }
 
-    input::-moz-focus-inner {
-        border: 0;
+        &[type="email"], &[type="password"], &[type="text"] {
+            user-select: text;
+        }
     }
 
     ::-webkit-scrollbar {

From be483f8aded214377832d1185fd554e2bc929b1f Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 4 Feb 2019 14:04:22 +0200
Subject: [PATCH 14/49] intro screen reimplemented

---
 src/routes/Intro/ConsentCheckbox/styles.less |   4 +-
 src/routes/Intro/Intro.js                    | 185 +++++++++-------
 src/routes/Intro/styles.less                 | 212 +++++++++----------
 3 files changed, 207 insertions(+), 194 deletions(-)

diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index 5147675af..37a18714d 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -3,7 +3,6 @@
     --icon-color: var(--color-surface);
     --icon-background-color: transparent;
 
-    padding: calc(var(--spacing) * 0.5);
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -12,12 +11,11 @@
 
     .label {
         flex: 1;
-        margin-left: calc(var(--spacing) * 0.5);
+        margin-left: 0.5em;
         line-height: 1.2em;
         color: var(--color-surface);
 
         .link {
-            line-height: 1.2em;
             color: var(--color-surfacelight);
         }
     }
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index fac91c781..d44085bde 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -33,6 +33,10 @@ class Intro extends Component {
         };
     }
 
+    componentDidMount() {
+        this.emailRef.current.focus();
+    }
+
     shouldComponentUpdate(nextProps, nextState) {
         return nextState.selectedForm !== this.state.selectedForm ||
             nextState.termsAccepted !== this.state.termsAccepted ||
@@ -71,14 +75,33 @@ class Intro extends Component {
         this.setState({ email: event.target.value });
     }
 
+    emailOnSubmit = (event) => {
+        event.preventDefault();
+        this.passwordRef.current.focus();
+    }
+
     passwordOnChange = (event) => {
         this.setState({ password: event.target.value });
     }
 
+    passwordOnSubmit = (event) => {
+        event.preventDefault();
+        if (this.state.selectedForm === FORMS.LOGIN) {
+            this.loginWithEmail();
+        } else {
+            this.confirmPasswordRef.current.focus();
+        }
+    }
+
     confirmPasswordOnChange = (event) => {
         this.setState({ confirmPassword: event.target.value });
     }
 
+    confirmPasswordOnSubmit = (event) => {
+        event.preventDefault();
+        this.termsRef.current.focus();
+    }
+
     toggleTerms = () => {
         this.setState(({ termsAccepted }) => ({
             termsAccepted: !termsAccepted
@@ -97,73 +120,61 @@ class Intro extends Component {
         }));
     }
 
-    loginOnSubmit = (event) => {
-        event.preventDefault();
-        if (this.state.email.length < 8) {
-            this.setState({ error: 'Please enter a valid email' });
-        } else {
-            if (this.emailRef.current === document.activeElement) {
-                this.passwordRef.current.focus();
-            }
-
-            if (this.state.password.length === 0) {
-                this.setState({ error: 'Invalid password' });
-            } else {
-                this.setState({ error: '' });
-            }
-        }
+    loginWithFacebook = () => {
+        alert('Facebook login');
     }
 
-    signUpOnSubmit = (event) => {
-        event.preventDefault();
+    loginWithEmail = () => {
         if (this.state.email.length < 8) {
             this.setState({ error: 'Please enter a valid email' });
-        } else {
-            if (this.emailRef.current === document.activeElement) {
-                this.passwordRef.current.focus();
-            }
-
-            if (this.state.password.length === 0) {
-                this.setState({ error: 'Invalid password' });
-            } else {
-                if (this.passwordRef.current === document.activeElement) {
-                    this.confirmPasswordRef.current.focus();
-                }
-
-                if (this.state.password !== this.state.confirmPassword) {
-                    this.setState({ error: 'Passwords dont match' });
-                } else {
-                    if (this.confirmPasswordRef.current === document.activeElement) {
-                        this.termsRef.current.focus();
-                    }
-
-                    if (!this.state.termsAccepted) {
-                        this.setState({ error: 'You must accept the Terms of Service' });
-                    } else {
-                        if (this.termsRef.current === document.activeElement) {
-                            this.privacyPolicyRef.current.focus();
-                        }
-
-                        if (!this.state.privacyPolicyAccepted) {
-                            this.setState({ error: 'You must accept the Privacy Policy' });
-                        } else {
-                            if (this.privacyPolicyRef.current === document.activeElement) {
-                                this.marketingRef.current.focus();
-                            }
-
-                            this.setState({ error: '' });
-                        }
-                    }
-                }
-            }
+            return;
         }
+
+        if (this.state.password.length === 0) {
+            this.setState({ error: 'Invalid password' });
+            return;
+        }
+
+        this.setState({ error: '' });
+        alert('Email login');
     }
 
-    guestLoginOnSubmit = () => {
+    signup = () => {
+        if (this.state.email.length < 8) {
+            this.setState({ error: 'Please enter a valid email' });
+            return;
+        }
+
+        if (this.state.password.length === 0) {
+            this.setState({ error: 'Invalid password' });
+            return;
+        }
+
+        if (this.state.password !== this.state.confirmPassword) {
+            this.setState({ error: 'Passwords dont match' });
+            return;
+        }
+
+        if (!this.state.termsAccepted) {
+            this.setState({ error: 'You must accept the Terms of Service' });
+            return;
+        }
+
+        if (!this.state.privacyPolicyAccepted) {
+            this.setState({ error: 'You must accept the Privacy Policy' });
+            return;
+        }
+
+        this.setState({ error: '' });
+        alert('Signup');
+    }
+
+    loginAsGuest = () => {
         if (!this.state.termsAccepted) {
             this.setState({ error: 'You must accept the Terms of Service' });
         } else {
             this.setState({ error: '' });
+            alert('Guest login');
         }
     }
 
@@ -172,44 +183,54 @@ class Intro extends Component {
             <div className={styles['intro-container']}>
                 <div className={styles['overlay']} />
                 <div className={styles['scroll-content']}>
-                    <div className={styles['intro']}>
-                        <Input className={styles['facebook-button']} type={'button'} >
+                    <div className={styles['form-container']}>
+                        <Input className={styles['facebook-button']} type={'button'} onClick={this.loginWithFacebook}>
                             <Icon className={styles['icon']} icon={'ic_facebook'} />
                             <div className={styles['label']}>Login with Facebook</div>
                         </Input>
                         <div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
-                        <form className={styles['form-container']} onSubmit={this.state.selectedForm === FORMS.LOGIN ? this.loginOnSubmit : this.signUpOnSubmit}>
+                        <form onSubmit={this.emailOnSubmit}>
                             <Input ref={this.emailRef} className={styles['text-input']} type={'email'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
-                            <Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
-                            {
-                                this.state.selectedForm === FORMS.LOGIN ?
-                                    <Input className={styles['forgot-password']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
-                                    :
-                                    <Fragment>
-                                        <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
-                                        <ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
-                                        <ConsentCheckbox ref={this.privacyPolicyRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Privacy Policy'} href={'https://www.stremio.com/privacy'} checked={this.state.privacyPolicyAccepted} onClick={this.togglePrivacyPolicy} />
-                                        <ConsentCheckbox ref={this.marketingRef} className={styles['consent-checkbox']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
-                                    </Fragment>
-                            }
-                            {
-                                this.state.error.length > 0 ?
-                                    <div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
-                                    :
-                                    null
-                            }
-                            <Input className={styles['submit-button']} type={'submit'} value={this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'} />
                         </form>
-                        <Input className={styles['switch-form-button']} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</Input>
+                        <form onSubmit={this.passwordOnSubmit}>
+                            <Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
+                        </form>
                         {
-                            this.state.selectedForm === FORMS.SIGN_UP ?
-                                <Input className={styles['guest-login-button']} type={'button'} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</Input>
+                            this.state.selectedForm === FORMS.LOGIN ?
+                                <Input className={styles['forgot-password-link']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
+                                :
+                                <Fragment>
+                                    <form onSubmit={this.confirmPasswordOnSubmit}>
+                                        <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
+                                    </form>
+                                    <ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
+                                    <ConsentCheckbox ref={this.privacyPolicyRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Privacy Policy'} href={'https://www.stremio.com/privacy'} checked={this.state.privacyPolicyAccepted} onClick={this.togglePrivacyPolicy} />
+                                    <ConsentCheckbox ref={this.marketingRef} className={styles['consent-checkbox']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
+                                </Fragment>
+                        }
+                        {
+                            this.state.error.length > 0 ?
+                                <div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
                                 :
                                 null
                         }
+                        <Input className={styles['submit-button']} type={'button'} onClick={this.state.selectedForm === FORMS.LOGIN ? this.loginWithEmail : this.signup}>
+                            <div className={styles['label']}>{this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'}</div>
+                        </Input>
+                        {
+                            this.state.selectedForm === FORMS.SIGN_UP ?
+                                <Input className={styles['guest-login-button']} type={'button'} onClick={this.loginAsGuest}>
+                                    <div className={styles['label']}>GUEST LOGIN</div>
+                                </Input>
+                                :
+                                null
+                        }
+                        <Input className={styles['switch-form-button']} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>
+                            <div className={styles['label']}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
+                        </Input>
                     </div>
                 </div>
-            </div>
+            </div >
         );
     }
 }
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index fb208e950..84332b550 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -1,5 +1,5 @@
 .intro-container {
-    --login-form-width: 270px;
+    --form-width: 270px;
     --spacing: 16px;
     font-size: 14px;
 }
@@ -9,7 +9,7 @@
     z-index: 0;
     width: 100%;
     height: 100%;
-    background-image: url('/images/login_background.jpg');
+    background-image: url('/images/intro_background.jpg');
     background-size: cover;
     background-attachment: fixed;
 
@@ -24,44 +24,51 @@
     }
 
     .scroll-content {
-        display: flex;
-        flex-direction: row;
         position: absolute;
         z-index: 1;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
+        display: flex;
+        flex-direction: row;
         overflow-y: auto;
         overflow-x: hidden;
 
-        .intro {
+        .form-container {
+            width: var(--form-width);
             margin: auto;
-            padding: calc(var(--login-form-width) * 0.2) 0;
-            width: var(--login-form-width);
+            padding: 2% 0;
 
-            .facebook-button {
-                width: var(--login-form-width);
-                height: calc(var(--login-form-width) * 0.25);
+            .facebook-button, .submit-button, .switch-form-button, .guest-login-button {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
                 justify-content: center;
                 border: var(--focusable-border-size) solid transparent;
-                background: var(--color-secondarydark);
                 cursor: pointer;
 
                 .icon {
                     height: 1.7em;
-                    margin-right: var(--spacing);
+                    margin-right: 1em;
                     fill: var(--color-surfacelighter);
                 }
 
                 .label {
-                    font-size: 1.1em;
+                    font-size: 1em;
+                    font-weight: 600;
                     color: var(--color-surfacelighter);
                 }
 
+                &:before {
+                    content: "";
+                    display: block;
+                }
+
+                &:focus, &:hover {
+                    filter: brightness(1.2);
+                }
+
                 &:focus {
                     border-color: var(--color-surfacelighter);
                 }
@@ -71,118 +78,62 @@
                 }
             }
 
+            .facebook-button {
+                background: var(--color-secondarydark);
+
+                .label {
+                    font-size: 1.2em;
+                }
+
+                &:before {
+                    padding-top: 25%;
+                }
+            }
+
             .facebook-statement {
-                margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4) 0;
+                display: block;
+                margin-top: 0.5em;
+                margin-bottom: calc(var(--spacing) * 4);
                 text-align: center;
                 color: var(--color-surface);
             }
 
-            .form-container {
-                width: var(--login-form-width);
-                display: flex;
-                flex-direction: column;
-                align-items: stretch;
-                justify-content: center;
+            .text-input {
+                display: block;
+                width: 100%;
+                margin: var(--spacing) 0;
+                padding: 0.5em 0.2em;
+                font-size: 1em;
+                line-height: 1em;
+                border-bottom: 1px solid var(--color-surface);
+                color: var(--color-surfacelighter);
 
-                .text-input {
-                    margin: 0 calc(var(--spacing) * 0.5) var(--spacing) calc(var(--spacing) * 0.5);
-                    padding: 0.5em 0;
-                    border-bottom: 1px solid var(--color-surface);
-                    font-size: 1.1em;
-                    color: var(--color-surfacelighter);
-                    background: none;
+                &::placeholder {
+                    color: var(--color-surfacelight);
+                }
+
+                &:hover, &:focus {
+                    border-bottom-color: var(--color-surfacelighter);
 
                     &::placeholder {
-                        color: var(--color-surfacelight);
-                    }
-
-                    &:hover, &:focus {
-                        border-bottom-color: var(--color-surfacelighter);
-
-                        &::placeholder {
-                            color: var(--color-surfacelighter);
-                        }
-                    }
-                }
-
-                .consent-checkbox {
-                    width: 100%;
-                    margin-bottom: var(--spacing);
-                    padding: calc(var(--spacing) * 0.5);
-                    border: var(--focusable-border-size) solid transparent;
-
-                    &:focus-within {
-                        border-color: var(--color-surfacelighter);
-                    }
-
-                    &:hover {
-                        border-color: transparent;
-                    }
-                }
-
-                .forgot-password {
-                    align-self: flex-end;
-                    margin-bottom: var(--spacing);
-                    padding: calc(var(--spacing) * 0.5);
-                    border: var(--focusable-border-size) solid transparent;
-                    color: var(--color-surfacelight);
-                    cursor: pointer;
-
-                    &:hover, &:focus {
                         color: var(--color-surfacelighter);
                     }
-
-                    &:focus {
-                        border-color: var(--color-surfacelighter);
-                    }
-
-                    &:hover {
-                        border-color: transparent;
-                    }
-                }
-
-                .error {
-                    margin-bottom: var(--spacing);
-                    text-align: center;
-                    color: var(--color-signal1);
-                }
-
-                .submit-button {
-                    width: 100%;
-                    padding: calc(var(--spacing) * 1.1);
-                    font-size: 1.1em;
-                    font-weight: 600;
-                    border: var(--focusable-border-size) solid transparent;
-                    color: var(--color-surfacelighter);
-                    background-color: var(--color-primarydark);
-                    cursor: pointer;
-
-                    &:hover, &:focus {
-                        background-color: var(--color-primary);
-                    }
-
-                    &:focus {
-                        border-color: var(--color-surfacelighter);
-                    }
-
-                    &:hover {
-                        border-color: transparent;
-                    }
                 }
             }
 
-            .switch-form-button, .guest-login-button {
-                width: 100%;
-                display: inline-block;
-                margin-top: var(--spacing);
-                padding: calc(var(--spacing) * 0.5);
-                text-align: center;
-                font-size: 1.1em;
-                font-weight: 600;
+            .forgot-password-link {
+                display: block;
+                margin: var(--spacing) 0;
+                padding: 0.5em;
                 border: var(--focusable-border-size) solid transparent;
-                color: var(--color-surfacelighter);
+                color: var(--color-surfacelight);
+                text-align: right;
                 cursor: pointer;
 
+                &:hover, &:focus {
+                    color: var(--color-surfacelighter);
+                }
+
                 &:focus {
                     border-color: var(--color-surfacelighter);
                 }
@@ -191,6 +142,49 @@
                     border-color: transparent;
                 }
             }
+
+            .consent-checkbox {
+                margin: var(--spacing) 0;
+                padding: 0.5em 0.2em;
+                border: var(--focusable-border-size) solid transparent;
+
+                &:focus-within {
+                    border-color: var(--color-surfacelighter);
+                }
+
+                &:hover {
+                    border-color: transparent;
+                }
+            }
+
+            .error {
+                margin: var(--spacing) 0;
+                padding: 0.5em 0.2em;
+                text-align: center;
+                color: var(--color-signal1);
+            }
+
+            .submit-button {
+                background-color: var(--color-primarydark);
+
+                .label {
+                    font-size: 1.2em;
+                    font-weight: 600;
+                }
+
+                &:before {
+                    padding-top: 20%;
+                }
+            }
+
+            .switch-form-button, .guest-login-button {
+                margin: var(--spacing) 0;
+                padding: 0.8em 0.2em;
+
+                .label {
+                    font-size: 1.1em;
+                }
+            }
         }
     }
 }
\ No newline at end of file

From 2bcdd1e497930bf0cd534f6ab485f1057102fee9 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 4 Feb 2019 14:09:38 +0200
Subject: [PATCH 15/49] intro padding increased

---
 src/routes/Intro/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 84332b550..f207a0401 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -38,7 +38,7 @@
         .form-container {
             width: var(--form-width);
             margin: auto;
-            padding: 2% 0;
+            padding: 5% 0;
 
             .facebook-button, .submit-button, .switch-form-button, .guest-login-button {
                 display: flex;

From 86409d6ade8a3eae7aca41d87cc0c9d016bcebaa Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 4 Feb 2019 14:13:06 +0200
Subject: [PATCH 16/49] intro background fixed

---
 src/routes/Intro/styles.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index f207a0401..149890b82 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -11,7 +11,9 @@
     height: 100%;
     background-image: url('/images/intro_background.jpg');
     background-size: cover;
-    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: border-box;
 
     .overlay {
         position: absolute;

From 96a8cf78d013e99c9325f95073e650481c6ada32 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 4 Feb 2019 14:26:58 +0200
Subject: [PATCH 17/49] using input onSubmit instead of form onSubmit

---
 src/common/Input/Input.js | 10 ++++++++--
 src/routes/Intro/Intro.js | 12 +++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/common/Input/Input.js b/src/common/Input/Input.js
index 2ed378eee..7af6ae165 100644
--- a/src/common/Input/Input.js
+++ b/src/common/Input/Input.js
@@ -22,8 +22,14 @@ class Input extends PureComponent {
             this.props.onKeyUp(event);
         }
 
-        if (!event.defaultPrevented && BUTTON_INPUT_TYPES.includes(this.props.type) && event.which === ENTER_KEY_CODE) {
-            event.currentTarget.click();
+        if (!event.defaultPrevented && event.which === ENTER_KEY_CODE) {
+            if (BUTTON_INPUT_TYPES.includes(this.props.type)) {
+                event.currentTarget.click();
+            } else if (TEXT_INPUT_TYPES.includes(this.props.type)) {
+                if (typeof this.props.onSubmit === 'function') {
+                    this.props.onSubmit(event);
+                }
+            }
         }
     }
 
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index d44085bde..969b74c4e 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -189,20 +189,14 @@ class Intro extends Component {
                             <div className={styles['label']}>Login with Facebook</div>
                         </Input>
                         <div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
-                        <form onSubmit={this.emailOnSubmit}>
-                            <Input ref={this.emailRef} className={styles['text-input']} type={'email'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
-                        </form>
-                        <form onSubmit={this.passwordOnSubmit}>
-                            <Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
-                        </form>
+                        <Input ref={this.emailRef} className={styles['text-input']} type={'email'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} onSubmit={this.emailOnSubmit} />
+                        <Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} onSubmit={this.passwordOnSubmit} />
                         {
                             this.state.selectedForm === FORMS.LOGIN ?
                                 <Input className={styles['forgot-password-link']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
                                 :
                                 <Fragment>
-                                    <form onSubmit={this.confirmPasswordOnSubmit}>
-                                        <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
-                                    </form>
+                                    <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} onSubmit={this.confirmPasswordOnSubmit} />
                                     <ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
                                     <ConsentCheckbox ref={this.privacyPolicyRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Privacy Policy'} href={'https://www.stremio.com/privacy'} checked={this.state.privacyPolicyAccepted} onClick={this.togglePrivacyPolicy} />
                                     <ConsentCheckbox ref={this.marketingRef} className={styles['consent-checkbox']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />

From 5f53bc745ac88856abeda74adea5d8651a60b2c0 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 5 Feb 2019 14:11:50 +0200
Subject: [PATCH 18/49] calendar implemented

---
 src/routes/Calendar/Calendar.js | 226 +++++++++++++++++++++++++++++++-
 src/routes/Calendar/styles.less | 194 +++++++++++++++++++++++++++
 2 files changed, 419 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/Calendar/styles.less

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index fb4ac7dc3..a129d552f 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -1,11 +1,235 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
+
+const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
 class Calendar extends Component {
+    constructor(props) {
+        super(props);
+
+        this.monthDays = [];
+        this.monthStart = new Date(new Date().getFullYear(), new Date().getMonth());
+        this.monthEnd = new Date(this.monthStart.getFullYear(), this.monthStart.getMonth() + 1, 0);
+        this.pads = [];
+        var pad = (this.monthStart.getDay() + 6) % 7;
+
+        for (var i = 0; i != pad; i++) {
+            this.pads.push(i);
+        }
+
+        for (var i = 0; i != this.monthEnd.getDate(); i++) {
+            this.monthDays.push(i);
+        }
+
+        // this.episodesDates = this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
+        //     .filter((video) => video.released.getMonth() === new Date().getMonth()))
+        //     .map((videos) => videos.map((video) => video.released.getDate()))
+        //     .join()
+        //     .split(',')
+        //     .filter((date, index, dates) => dates.indexOf(date) === index)
+        //     .sort(function(a, b) {
+        //         return a - b;
+        //     });
+
+        // console.log(this.episodesDates);
+
+        this.state = {
+            date: new Date()
+        };
+    }
+
+    changeDate = (event) => {
+        this.setState({ date: new Date(parseInt(event.currentTarget.dataset.date)) });
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.date !== this.state.date;
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.date.getMonth() !== this.state.date.getMonth()) {
+            //reset month-days
+        }
+    }
+
+    renderMonthButton(date) {
+        return (
+            <div className={styles['month']} data-date={date.getTime()} onClick={this.changeDate}>{months[date.getMonth()]}</div>
+        );
+    }
+
+    renderEpisodeInfo = () => { }
+
     render() {
         return (
-            <div style={{ color: 'pink', paddingTop: 40 }}>You're on the Calendar Tab</div>
+            <div className={styles['calendar-container']}>
+                <div className={styles['calendar']}>
+                    <div className={styles['months']}>
+                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1)))}
+                        {this.renderMonthButton(new Date(this.state.date))}
+                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
+                    </div>
+                    <div className={styles['week-days']}>
+                        {days.map((day) => <div className={styles['day']} key={day}>{day}</div>)}
+                    </div>
+                    <div className={styles['month-days']}>
+                        {this.pads.map((pad) =>
+                            <div className={styles['pad']} key={pad} />
+                        )}
+                        {this.monthDays.map((day) =>
+                            <div className={styles['day']} key={day}>
+                                <div className={styles['date-container']}>
+                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getDate() === day + 1 })}>{day + 1}</div>
+                                </div>
+                                <div className={styles['episodes']}>
+                                    {this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
+                                        .filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
+                                        .map((video) =>
+                                            //////
+                                            <div style={{ backgroundImage: `url('${metaitem.metaItem.background}')` }} className={styles['poster']} key={video.id} />
+                                        ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className={styles['future-episodes']}>
+                    {this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
+                        .filter((video) => video.released.getMonth() === this.state.date.getMonth()))
+                        .map((videos) => videos.map((video) => video.released.getDate()))
+                        .join()
+                        .split(',')
+                        .filter((date, index, dates) => dates.indexOf(date) === index)
+                        .sort(function(a, b) {
+                            return a - b;
+                        })
+                        .map((videoDate) =>
+                            <div className={styles['episode-container']} key={videoDate}>
+                                <div className={styles['date']}>
+                                    {months[this.state.date.getMonth()].slice(0, 3)} {videoDate}
+                                </div>
+                                <div className={styles['episodes']}>
+                                    {this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
+                                        .filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
+                                        .map((video) =>
+                                            <div className={classnames(styles['episode'], styles['selected'])} key={video.id}>
+                                                <div className={styles['main-info']}>
+                                                    <div className={styles['serie-name']}>
+                                                        {metaitem.metaItem.name}
+                                                    </div>
+                                                    <div className={styles['episode-number']}>
+                                                        S{video.season} E{video.episode}
+                                                    </div>
+                                                </div>
+                                                {/* <div className={styles['name']}>
+                                                    "{video.name}"
+                                                </div>
+                                                <div className={styles['description']}>
+                                                    {video.description}
+                                                </div>
+                                                <div className={styles['watch-button']}>
+                                                    <Icon className={styles['icon']} icon={'ic_play'} />
+                                                    <div className={styles['label']}>WATCH NOW</div>
+                                                </div> */}
+                                            </div>
+                                        ))}
+                                </div>
+                            </div>
+                        )}
+                </div>
+            </div>
         );
     }
 }
 
+Calendar.propTypes = {
+    inLibrary: PropTypes.bool.isRequired,
+    metaItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+    toggleLibraryButton: PropTypes.func
+};
+Calendar.defaultProps = {
+    inLibrary: false,
+    metaItems: [
+        {
+            metaItem: {
+                background: 'https://images.metahub.space/poster/medium/tt2306299/img',
+                releaseInfo: '2018',
+                released: new Date(2018, 4, 23),
+                name: 'Vikings',
+                videos: [
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 11), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 18), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                ]
+            }
+        },
+        {
+            metaItem: {
+                background: 'https://images.metahub.space/poster/medium/tt1520211/img',
+                releaseInfo: '2018',
+                released: new Date(2018, 4, 23),
+                name: 'The Walking Dead',
+                videos: [
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 11), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 19), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                ]
+            }
+        },
+        {
+            metaItem: {
+                background: 'https://images.metahub.space/poster/medium/tt0944947/img',
+                releaseInfo: '2018',
+                released: new Date(2018, 4, 23),
+                name: 'Game of Thrones',
+                videos: [
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                ]
+            }
+        },
+        {
+            metaItem: {
+                background: 'https://images.metahub.space/poster/medium/tt0411008/img',
+                releaseInfo: '2018',
+                released: new Date(2018, 4, 23),
+                name: 'Lost',
+                videos: [
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 17), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 10), isUpcoming: true, isWatched: true, season: 5 }
+                ]
+            }
+        },
+        {
+            metaItem: {
+                background: 'https://images.metahub.space/poster/medium/tt0813715/img',
+                releaseInfo: '2018',
+                released: new Date(2018, 4, 23),
+                name: 'Heroes',
+                videos: [
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 3), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 8), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                ]
+            }
+        }
+    ]
+};
+
 export default Calendar;
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
new file mode 100644
index 000000000..d74e51520
--- /dev/null
+++ b/src/routes/Calendar/styles.less
@@ -0,0 +1,194 @@
+.calendar-container {
+    --spacing: 16px;
+    font-size: 14px;
+}
+
+.calendar-container {
+    padding: var(--spacing);
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+
+    .calendar {
+        // width: 75%;
+        flex: 1;
+
+        .months {
+            padding: var(--spacing) calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 2);
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+
+            .month {
+                margin-right: var(--spacing);
+                font-size: 1.7em;
+                color: var(--color-surfacelighter);
+                cursor: pointer;
+
+                &:first-child, &:last-child {
+                    font-size: 1.4em;
+                    color: var(--color-surface);
+                }
+            }
+
+        }
+
+        .week-days {
+            margin-bottom: var(--spacing);
+            display: flex;
+            flex-direction: row;
+
+            .day {
+                margin: 0 1px 1px 0;
+                width: 14%;
+                font-size: 1.2em;
+                color: var(--color-secondarylighter);
+            }
+        }
+
+        .month-days {
+            height: 100%;
+
+            .pad {
+                margin: 0 1px 1px 0;
+                width: 14%;
+                height: 14%;
+                float: left;
+            }
+
+            .day {
+                margin: 0 1px 1px 0;
+                width: 14%;
+                height: 15%;
+                float: left;
+                font-size: 1.4em;
+                background-color: var(--color-backgroundlighter);
+                cursor: pointer;
+
+                .date-container {
+                    margin: calc(var(--spacing) * 0.5);
+                    width: 34px;
+                    height: 34px;
+
+                    .date {
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: var(--color-secondarylighter);
+
+                        &.selected {
+                            border-radius: 50%;
+                            color: var(--color-surfacelighter);
+                            background-color: var(--color-primary);
+                        }
+                    }
+
+                }
+
+                .episodes {
+                    margin: 0 4px;
+                    height: 40px;
+                    display: flex;
+                    flex-direction: row;
+
+                    .poster {
+                        display: none;
+                        width: 33%;
+                        height: 100%;
+                        background-size: cover;
+                        background-repeat: no-repeat;
+                        background-position: center;
+
+                        &:nth-child(-n+3) {
+                            display: inline-block;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .future-episodes {
+        width: 270px;
+        // width: 25%;
+        // padding: 10px;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .episode-container {
+            margin-bottom: var(--spacing);
+            background-color: var(--color-backgroundlighter);
+
+            .date {
+                padding: var(--spacing);
+                font-size: 1.2em;
+                color: var(--color-primarylight);
+            }
+
+            .episodes {
+
+                .episode {
+                    padding: var(--spacing);
+                    display: flex;
+                    flex-direction: column;
+                    cursor: pointer;
+
+                    .main-info {
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+
+                        .serie-name {
+                            color: var(--color-surface);
+                        }
+
+                        .episode-number {
+                            color: var(--color-surface);
+                        }
+                    }
+
+                    .name {
+                        // display: none;
+                        padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
+                        color: var(--color-surfacelighter);
+                    }
+
+                    .description {
+                        // display: none;
+                        padding: var(--spacing) 0;
+                        line-height: 1.2em;
+                        color: var(--color-surfacelighter);
+                    }
+
+                    .watch-button {
+                        // display: none;
+                        margin: 0 calc(var(--spacing) * 0.5);
+                        padding: var(--spacing) var(--spacing) 0 var(--spacing);
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        justify-content: center;
+                        border-top: 1px solid var(--color-background);
+
+                        .icon {
+                            margin-right: var(--spacing);
+                            width: 6%;
+                            height: 6%;
+                            fill: var(--color-surfacelighter);
+                        }
+
+                        .label {
+                            color: var(--color-surfacelighter);
+                        }
+                    }
+
+                    &:hover {
+                        background-color: var(--color-primarydark60);
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

From f1c96c73ea26980e9f8323c3684b10115a4efe20 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 12 Feb 2019 15:32:19 +0200
Subject: [PATCH 19/49] relations between calendar and future episodes added

---
 src/routes/Calendar/Calendar.js | 164 ++++++++++++++++++++------------
 src/routes/Calendar/styles.less | 108 +++++++++++++++------
 2 files changed, 180 insertions(+), 92 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index a129d552f..f0e4c231b 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -11,8 +11,54 @@ class Calendar extends Component {
     constructor(props) {
         super(props);
 
+        this.resetMonth(new Date());
+
+        this.dateRef = React.createRef();
+        this.futureEpisodesRef = React.createRef();
+
+        this.state = {
+            date: new Date(),
+            episodeInfo: '',
+            selectedDate: new Date()
+        };
+
+        // this.episodesNames = this.props.metaItems
+        //     .map((metaitem) => metaitem.metaItem.videos
+        //         .filter((video) => video.released.getMonth() === new Date().getMonth() && video.released.getDate() === this.state.selectedDate.getDate())
+        //         .map((video) => video.name)
+        //         .join())
+        //     .filter((element) => element.length > 0)
+
+        // console.log(this.episodesNames);
+    }
+
+    changeDate = (event) => {
+        const date = new Date(parseInt(event.currentTarget.dataset.date));
+        this.resetMonth(date);
+        this.setState({ date });
+    }
+
+    showEpisodeInfo = (event) => {
+        this.setState({ episodeInfo: event.currentTarget.dataset.videoName });
+    }
+
+    changeSelectedDate = (event) => {
+        this.setState({ selectedDate: new Date(event.currentTarget.dataset.day) });
+    }
+
+    scrollTo = () => {
+        if (this.dateRef.current !== null) {
+            var topPosition = this.dateRef.current.offsetTop;
+            this.futureEpisodesRef.current.scrollTop = topPosition - 16;
+            // this.futureEpisodesRef.current.animate({ scrollTop: this.dateRef.current.offsetTop }, 300);
+        } else {
+            this.setState({ episodeInfo: '' });
+        }
+    }
+
+    resetMonth(newDate) {
         this.monthDays = [];
-        this.monthStart = new Date(new Date().getFullYear(), new Date().getMonth());
+        this.monthStart = new Date(newDate.getFullYear(), newDate.getMonth());
         this.monthEnd = new Date(this.monthStart.getFullYear(), this.monthStart.getMonth() + 1, 0);
         this.pads = [];
         var pad = (this.monthStart.getDay() + 6) % 7;
@@ -24,35 +70,23 @@ class Calendar extends Component {
         for (var i = 0; i != this.monthEnd.getDate(); i++) {
             this.monthDays.push(i);
         }
-
-        // this.episodesDates = this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
-        //     .filter((video) => video.released.getMonth() === new Date().getMonth()))
-        //     .map((videos) => videos.map((video) => video.released.getDate()))
-        //     .join()
-        //     .split(',')
-        //     .filter((date, index, dates) => dates.indexOf(date) === index)
-        //     .sort(function(a, b) {
-        //         return a - b;
-        //     });
-
-        // console.log(this.episodesDates);
-
-        this.state = {
-            date: new Date()
-        };
-    }
-
-    changeDate = (event) => {
-        this.setState({ date: new Date(parseInt(event.currentTarget.dataset.date)) });
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        return nextState.date !== this.state.date;
+        return nextState.date !== this.state.date ||
+            nextState.episodeInfo !== this.state.episodeInfo ||
+            nextState.selectedDate !== this.state.selectedDate;
     }
 
     componentDidUpdate(prevProps, prevState) {
+        if (prevState.selectedDate !== this.state.selectedDate) {
+            this.scrollTo();
+        }
+
         if (prevState.date.getMonth() !== this.state.date.getMonth()) {
-            //reset month-days
+            this.setState({ selectedDate: new Date() });
+            const newDate = this.state.date;
+            this.resetMonth(newDate);
         }
     }
 
@@ -62,8 +96,6 @@ class Calendar extends Component {
         );
     }
 
-    renderEpisodeInfo = () => { }
-
     render() {
         return (
             <div className={styles['calendar-container']}>
@@ -81,25 +113,29 @@ class Calendar extends Component {
                             <div className={styles['pad']} key={pad} />
                         )}
                         {this.monthDays.map((day) =>
-                            <div className={styles['day']} key={day}>
+                            <div className={classnames(styles['day'], { [styles['selected']]: this.state.date.getMonth() === this.state.selectedDate.getMonth() && this.state.selectedDate.getDate() === day + 1 })} key={day} data-day={new Date(new Date().getFullYear(), this.state.date.getMonth(), day + 1)} onClick={this.changeSelectedDate}>
                                 <div className={styles['date-container']}>
-                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getDate() === day + 1 })}>{day + 1}</div>
+                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === day + 1 })}>{day + 1}</div>
                                 </div>
                                 <div className={styles['episodes']}>
-                                    {this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
-                                        .filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
-                                        .map((video) =>
-                                            //////
-                                            <div style={{ backgroundImage: `url('${metaitem.metaItem.background}')` }} className={styles['poster']} key={video.id} />
-                                        ))}
+                                    {this.props.metaItems
+                                        .map((metaitem) => metaitem.metaItem.videos
+                                            .filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
+                                            .map((video) =>
+                                                //////indicator for >3 posters?
+                                                //getTime()?
+                                                <div style={{ backgroundImage: `url('${metaitem.metaItem.background}')` }} className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() })} key={video.id} data-video-name={video.name} onClick={this.showEpisodeInfo} />
+                                            )
+                                        )}
                                 </div>
                             </div>
                         )}
                     </div>
                 </div>
-                <div className={styles['future-episodes']}>
-                    {this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
-                        .filter((video) => video.released.getMonth() === this.state.date.getMonth()))
+                <div ref={this.futureEpisodesRef} className={styles['future-episodes']}>
+                    {this.props.metaItems
+                        .map((metaitem) => metaitem.metaItem.videos
+                            .filter((video) => video.released.getMonth() === this.state.date.getMonth()))
                         .map((videos) => videos.map((video) => video.released.getDate()))
                         .join()
                         .split(',')
@@ -108,36 +144,40 @@ class Calendar extends Component {
                             return a - b;
                         })
                         .map((videoDate) =>
-                            <div className={styles['episode-container']} key={videoDate}>
+                            <div ref={parseInt(videoDate) === this.state.selectedDate.getDate() ? this.dateRef : null} className={classnames(styles['episode-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })} key={videoDate} data-day={new Date(new Date().getFullYear(), new Date().getMonth(), parseInt(videoDate))} onClick={this.changeSelectedDate}>
                                 <div className={styles['date']}>
                                     {months[this.state.date.getMonth()].slice(0, 3)} {videoDate}
                                 </div>
-                                <div className={styles['episodes']}>
-                                    {this.props.metaItems.map((metaitem) => metaitem.metaItem.videos
+                                {this.props.metaItems
+                                    .map((metaitem) => metaitem.metaItem.videos
                                         .filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
                                         .map((video) =>
-                                            <div className={classnames(styles['episode'], styles['selected'])} key={video.id}>
-                                                <div className={styles['main-info']}>
-                                                    <div className={styles['serie-name']}>
-                                                        {metaitem.metaItem.name}
+                                            <div className={classnames(styles['episode'], { [styles['selected']]: this.state.episodeInfo === video.name }, { [styles['today']]: parseInt(videoDate) === new Date().getDate() })} key={video.name} data-video-name={video.name} onClick={this.showEpisodeInfo}>
+                                                <div className={classnames(styles['info'])} >
+                                                    <div className={styles['main-info']}>
+                                                        <div className={styles['serie-name']}>
+                                                            {metaitem.metaItem.name}
+                                                        </div>
+                                                        <div className={styles['episode-number']}>
+                                                            S{video.season} E{video.episode}
+                                                        </div>
                                                     </div>
-                                                    <div className={styles['episode-number']}>
-                                                        S{video.season} E{video.episode}
+                                                    <div className={styles['name']}>
+                                                        "{video.name}"
                                                     </div>
+                                                    <div className={styles['description']}>
+                                                        {video.description}
+                                                    </div>
+                                                    <a className={styles['watch-button-container']} href={'#/detail'}>
+                                                        <div className={styles['watch-button']}>
+                                                            <Icon className={styles['icon']} icon={'ic_play'} />
+                                                            <div className={styles['label']}>WATCH NOW</div>
+                                                        </div>
+                                                    </a>
                                                 </div>
-                                                {/* <div className={styles['name']}>
-                                                    "{video.name}"
-                                                </div>
-                                                <div className={styles['description']}>
-                                                    {video.description}
-                                                </div>
-                                                <div className={styles['watch-button']}>
-                                                    <Icon className={styles['icon']} icon={'ic_play'} />
-                                                    <div className={styles['label']}>WATCH NOW</div>
-                                                </div> */}
                                             </div>
-                                        ))}
-                                </div>
+                                        )
+                                    )}
                             </div>
                         )}
                 </div>
@@ -147,12 +187,10 @@ class Calendar extends Component {
 }
 
 Calendar.propTypes = {
-    inLibrary: PropTypes.bool.isRequired,
     metaItems: PropTypes.arrayOf(PropTypes.object).isRequired,
     toggleLibraryButton: PropTypes.func
 };
 Calendar.defaultProps = {
-    inLibrary: false,
     metaItems: [
         {
             metaItem: {
@@ -161,8 +199,8 @@ Calendar.defaultProps = {
                 released: new Date(2018, 4, 23),
                 name: 'Vikings',
                 videos: [
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 11), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 6), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 12), isUpcoming: true, isWatched: true, season: 5 },
                     { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 18), isUpcoming: true, isWatched: true, season: 5 },
                     { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
                     { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
@@ -176,8 +214,8 @@ Calendar.defaultProps = {
                 released: new Date(2018, 4, 23),
                 name: 'The Walking Dead',
                 videos: [
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 11), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 6), isUpcoming: true, isWatched: true, season: 5 },
+                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 12), isUpcoming: true, isWatched: true, season: 5 },
                     { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 19), isUpcoming: true, isWatched: true, season: 5 },
                     { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
                     { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index d74e51520..b4317bc29 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -28,6 +28,10 @@
                 &:first-child, &:last-child {
                     font-size: 1.4em;
                     color: var(--color-surface);
+
+                    &:hover {
+                        color: var(--color-surfacelight);
+                    }
                 }
             }
 
@@ -59,9 +63,10 @@
             .day {
                 margin: 0 1px 1px 0;
                 width: 14%;
-                height: 15%;
+                height: 16%;
                 float: left;
                 font-size: 1.4em;
+                border: 2px solid transparent;
                 background-color: var(--color-backgroundlighter);
                 cursor: pointer;
 
@@ -84,12 +89,11 @@
                             background-color: var(--color-primary);
                         }
                     }
-
                 }
 
                 .episodes {
-                    margin: 0 4px;
-                    height: 40px;
+                    margin: 0 2px;
+                    height: 42px;
                     display: flex;
                     flex-direction: row;
 
@@ -101,11 +105,20 @@
                         background-repeat: no-repeat;
                         background-position: center;
 
+                        &.past {
+                            opacity: 0.4;
+                        }
+
                         &:nth-child(-n+3) {
                             display: inline-block;
                         }
                     }
                 }
+
+                &.selected {
+                    border-color: var(--color-primary);
+                    background-color: var(--color-backgroundlighter60);
+                }
             }
         }
     }
@@ -116,9 +129,11 @@
         // padding: 10px;
         overflow-y: auto;
         overflow-x: hidden;
+        scroll-behavior: smooth;
 
         .episode-container {
             margin-bottom: var(--spacing);
+            border: 2px solid transparent;
             background-color: var(--color-backgroundlighter);
 
             .date {
@@ -127,13 +142,16 @@
                 color: var(--color-primarylight);
             }
 
-            .episodes {
+            .episode {
+                display: flex;
+                flex-direction: column;
+                cursor: pointer;
 
-                .episode {
+                .info {
                     padding: var(--spacing);
                     display: flex;
                     flex-direction: column;
-                    cursor: pointer;
+                    justify-content: space-between;
 
                     .main-info {
                         display: flex;
@@ -150,44 +168,76 @@
                     }
 
                     .name {
-                        // display: none;
+                        display: none;
                         padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
                         color: var(--color-surfacelighter);
                     }
 
                     .description {
-                        // display: none;
+                        display: none;
                         padding: var(--spacing) 0;
                         line-height: 1.2em;
                         color: var(--color-surfacelighter);
                     }
 
-                    .watch-button {
-                        // display: none;
+                    .watch-button-container {
+                        display: none;
                         margin: 0 calc(var(--spacing) * 0.5);
-                        padding: var(--spacing) var(--spacing) 0 var(--spacing);
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        justify-content: center;
+                        padding: var(--spacing);
                         border-top: 1px solid var(--color-background);
+                        cursor: pointer;
 
-                        .icon {
-                            margin-right: var(--spacing);
-                            width: 6%;
-                            height: 6%;
-                            fill: var(--color-surfacelighter);
+                        .watch-button {
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            justify-content: center;
+
+                            .icon {
+                                margin-right: var(--spacing);
+                                width: 6%;
+                                height: 6%;
+                                fill: var(--color-surfacelighter);
+                            }
+
+                            .label {
+                                color: var(--color-surfacelighter);
+                            }
                         }
-
-                        .label {
-                            color: var(--color-surfacelighter);
-                        }
-                    }
-
-                    &:hover {
-                        background-color: var(--color-primarydark60);
                     }
                 }
+
+                &.selected {
+                    .info {
+                        padding-bottom: 0;
+                        background-color: var(--color-primarydark);
+                        cursor: default;
+
+                        .name {
+                            display: inline-block;
+                        }
+
+                        .description {
+                            display: inline-block;
+                        }
+
+                        .watch-button-container {
+                            display: inline-block;
+                        }
+                    }
+                }
+
+                &.today {
+                    background-color: var(--color-primarydarker40);
+                }
+
+                &:hover {
+                    background-color: var(--color-primarydark60);
+                }
+            }
+
+            &.selected {
+                border-color: var(--color-primary);
             }
         }
     }

From 4157ffd32a4f4ce7c0961ef0d5ad7418756701f4 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 14 Feb 2019 16:43:17 +0200
Subject: [PATCH 20/49] select day 1 when reset month

---
 src/routes/Calendar/Calendar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index f0e4c231b..81bbb5b82 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -84,7 +84,7 @@ class Calendar extends Component {
         }
 
         if (prevState.date.getMonth() !== this.state.date.getMonth()) {
-            this.setState({ selectedDate: new Date() });
+            this.setState({ selectedDate: new Date(this.state.date.getFullYear(), this.state.date.getMonth(), 1) });
             const newDate = this.state.date;
             this.resetMonth(newDate);
         }
@@ -113,7 +113,7 @@ class Calendar extends Component {
                             <div className={styles['pad']} key={pad} />
                         )}
                         {this.monthDays.map((day) =>
-                            <div className={classnames(styles['day'], { [styles['selected']]: this.state.date.getMonth() === this.state.selectedDate.getMonth() && this.state.selectedDate.getDate() === day + 1 })} key={day} data-day={new Date(new Date().getFullYear(), this.state.date.getMonth(), day + 1)} onClick={this.changeSelectedDate}>
+                            <div className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === day + 1 })} key={day} data-day={new Date(new Date().getFullYear(), this.state.date.getMonth(), day + 1)} onClick={this.changeSelectedDate}>
                                 <div className={styles['date-container']}>
                                     <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === day + 1 })}>{day + 1}</div>
                                 </div>

From f9096f0a9df5a4ef1812e378c68afc3a832d3cee Mon Sep 17 00:00:00 2001
From: Ivo Georgiev <ivo@strem.io>
Date: Tue, 19 Feb 2019 22:34:56 +0200
Subject: [PATCH 21/49] LICENSE.md added: GPL v3.0

---
 LICENSE.md | 595 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 595 insertions(+)
 create mode 100644 LICENSE.md

diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 000000000..175443ce8
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,595 @@
+GNU General Public License
+==========================
+
+_Version 3, 29 June 2007_  
+_Copyright © 2007 Free Software Foundation, Inc. &lt;<http://fsf.org/>&gt;_
+
+Everyone is permitted to copy and distribute verbatim copies of this license
+document, but changing it is not allowed.
+
+## Preamble
+
+The GNU General Public License is a free, copyleft license for software and other
+kinds of works.
+
+The licenses for most software and other practical works are designed to take away
+your freedom to share and change the works. By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change all versions of a
+program--to make sure it remains free software for all its users. We, the Free
+Software Foundation, use the GNU General Public License for most of our software; it
+applies also to any other work released this way by its authors. You can apply it to
+your programs, too.
+
+When we speak of free software, we are referring to freedom, not price. Our General
+Public Licenses are designed to make sure that you have the freedom to distribute
+copies of free software (and charge for them if you wish), that you receive source
+code or can get it if you want it, that you can change the software or use pieces of
+it in new free programs, and that you know you can do these things.
+
+To protect your rights, we need to prevent others from denying you these rights or
+asking you to surrender the rights. Therefore, you have certain responsibilities if
+you distribute copies of the software, or if you modify it: responsibilities to
+respect the freedom of others.
+
+For example, if you distribute copies of such a program, whether gratis or for a fee,
+you must pass on to the recipients the same freedoms that you received. You must make
+sure that they, too, receive or can get the source code. And you must show them these
+terms so they know their rights.
+
+Developers that use the GNU GPL protect your rights with two steps: **(1)** assert
+copyright on the software, and **(2)** offer you this License giving you legal permission
+to copy, distribute and/or modify it.
+
+For the developers' and authors' protection, the GPL clearly explains that there is
+no warranty for this free software. For both users' and authors' sake, the GPL
+requires that modified versions be marked as changed, so that their problems will not
+be attributed erroneously to authors of previous versions.
+
+Some devices are designed to deny users access to install or run modified versions of
+the software inside them, although the manufacturer can do so. This is fundamentally
+incompatible with the aim of protecting users' freedom to change the software. The
+systematic pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable. Therefore, we have designed
+this version of the GPL to prohibit the practice for those products. If such problems
+arise substantially in other domains, we stand ready to extend this provision to
+those domains in future versions of the GPL, as needed to protect the freedom of
+users.
+
+Finally, every program is threatened constantly by software patents. States should
+not allow patents to restrict development and use of software on general-purpose
+computers, but in those that do, we wish to avoid the special danger that patents
+applied to a free program could make it effectively proprietary. To prevent this, the
+GPL assures that patents cannot be used to render the program non-free.
+
+The precise terms and conditions for copying, distribution and modification follow.
+
+## TERMS AND CONDITIONS
+
+### 0. Definitions
+
+“This License” refers to version 3 of the GNU General Public License.
+
+“Copyright” also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+“The Program” refers to any copyrightable work licensed under this
+License. Each licensee is addressed as “you”. “Licensees” and
+“recipients” may be individuals or organizations.
+
+To “modify” a work means to copy from or adapt all or part of the work in
+a fashion requiring copyright permission, other than the making of an exact copy. The
+resulting work is called a “modified version” of the earlier work or a
+work “based on” the earlier work.
+
+A “covered work” means either the unmodified Program or a work based on
+the Program.
+
+To “propagate” a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for infringement under
+applicable copyright law, except executing it on a computer or modifying a private
+copy. Propagation includes copying, distribution (with or without modification),
+making available to the public, and in some countries other activities as well.
+
+To “convey” a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user through a computer
+network, with no transfer of a copy, is not conveying.
+
+An interactive user interface displays “Appropriate Legal Notices” to the
+extent that it includes a convenient and prominently visible feature that **(1)**
+displays an appropriate copyright notice, and **(2)** tells the user that there is no
+warranty for the work (except to the extent that warranties are provided), that
+licensees may convey the work under this License, and how to view a copy of this
+License. If the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+### 1. Source Code
+
+The “source code” for a work means the preferred form of the work for
+making modifications to it. “Object code” means any non-source form of a
+work.
+
+A “Standard Interface” means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of interfaces
+specified for a particular programming language, one that is widely used among
+developers working in that language.
+
+The “System Libraries” of an executable work include anything, other than
+the work as a whole, that **(a)** is included in the normal form of packaging a Major
+Component, but which is not part of that Major Component, and **(b)** serves only to
+enable use of the work with that Major Component, or to implement a Standard
+Interface for which an implementation is available to the public in source code form.
+A “Major Component”, in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system (if any) on which
+the executable work runs, or a compiler used to produce the work, or an object code
+interpreter used to run it.
+
+The “Corresponding Source” for a work in object code form means all the
+source code needed to generate, install, and (for an executable work) run the object
+code and to modify the work, including scripts to control those activities. However,
+it does not include the work's System Libraries, or general-purpose tools or
+generally available free programs which are used unmodified in performing those
+activities but which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for the work, and
+the source code for shared libraries and dynamically linked subprograms that the work
+is specifically designed to require, such as by intimate data communication or
+control flow between those subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users can regenerate
+automatically from other parts of the Corresponding Source.
+
+The Corresponding Source for a work in source code form is that same work.
+
+### 2. Basic Permissions
+
+All rights granted under this License are granted for the term of copyright on the
+Program, and are irrevocable provided the stated conditions are met. This License
+explicitly affirms your unlimited permission to run the unmodified Program. The
+output from running a covered work is covered by this License only if the output,
+given its content, constitutes a covered work. This License acknowledges your rights
+of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not convey, without
+conditions so long as your license otherwise remains in force. You may convey covered
+works to others for the sole purpose of having them make modifications exclusively
+for you, or provide you with facilities for running those works, provided that you
+comply with the terms of this License in conveying all material for which you do not
+control copyright. Those thus making or running the covered works for you must do so
+exclusively on your behalf, under your direction and control, on terms that prohibit
+them from making any copies of your copyrighted material outside their relationship
+with you.
+
+Conveying under any other circumstances is permitted solely under the conditions
+stated below. Sublicensing is not allowed; section 10 makes it unnecessary.
+
+### 3. Protecting Users' Legal Rights From Anti-Circumvention Law
+
+No covered work shall be deemed part of an effective technological measure under any
+applicable law fulfilling obligations under article 11 of the WIPO copyright treaty
+adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention
+of such measures.
+
+When you convey a covered work, you waive any legal power to forbid circumvention of
+technological measures to the extent such circumvention is effected by exercising
+rights under this License with respect to the covered work, and you disclaim any
+intention to limit operation or modification of the work as a means of enforcing,
+against the work's users, your or third parties' legal rights to forbid circumvention
+of technological measures.
+
+### 4. Conveying Verbatim Copies
+
+You may convey verbatim copies of the Program's source code as you receive it, in any
+medium, provided that you conspicuously and appropriately publish on each copy an
+appropriate copyright notice; keep intact all notices stating that this License and
+any non-permissive terms added in accord with section 7 apply to the code; keep
+intact all notices of the absence of any warranty; and give all recipients a copy of
+this License along with the Program.
+
+You may charge any price or no price for each copy that you convey, and you may offer
+support or warranty protection for a fee.
+
+### 5. Conveying Modified Source Versions
+
+You may convey a work based on the Program, or the modifications to produce it from
+the Program, in the form of source code under the terms of section 4, provided that
+you also meet all of these conditions:
+
+* **a)** The work must carry prominent notices stating that you modified it, and giving a
+relevant date.
+* **b)** The work must carry prominent notices stating that it is released under this
+License and any conditions added under section 7. This requirement modifies the
+requirement in section 4 to “keep intact all notices”.
+* **c)** You must license the entire work, as a whole, under this License to anyone who
+comes into possession of a copy. This License will therefore apply, along with any
+applicable section 7 additional terms, to the whole of the work, and all its parts,
+regardless of how they are packaged. This License gives no permission to license the
+work in any other way, but it does not invalidate such permission if you have
+separately received it.
+* **d)** If the work has interactive user interfaces, each must display Appropriate Legal
+Notices; however, if the Program has interactive interfaces that do not display
+Appropriate Legal Notices, your work need not make them do so.
+
+A compilation of a covered work with other separate and independent works, which are
+not by their nature extensions of the covered work, and which are not combined with
+it such as to form a larger program, in or on a volume of a storage or distribution
+medium, is called an “aggregate” if the compilation and its resulting
+copyright are not used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work in an aggregate
+does not cause this License to apply to the other parts of the aggregate.
+
+### 6. Conveying Non-Source Forms
+
+You may convey a covered work in object code form under the terms of sections 4 and
+5, provided that you also convey the machine-readable Corresponding Source under the
+terms of this License, in one of these ways:
+
+* **a)** Convey the object code in, or embodied in, a physical product (including a
+physical distribution medium), accompanied by the Corresponding Source fixed on a
+durable physical medium customarily used for software interchange.
+* **b)** Convey the object code in, or embodied in, a physical product (including a
+physical distribution medium), accompanied by a written offer, valid for at least
+three years and valid for as long as you offer spare parts or customer support for
+that product model, to give anyone who possesses the object code either **(1)** a copy of
+the Corresponding Source for all the software in the product that is covered by this
+License, on a durable physical medium customarily used for software interchange, for
+a price no more than your reasonable cost of physically performing this conveying of
+source, or **(2)** access to copy the Corresponding Source from a network server at no
+charge.
+* **c)** Convey individual copies of the object code with a copy of the written offer to
+provide the Corresponding Source. This alternative is allowed only occasionally and
+noncommercially, and only if you received the object code with such an offer, in
+accord with subsection 6b.
+* **d)** Convey the object code by offering access from a designated place (gratis or for
+a charge), and offer equivalent access to the Corresponding Source in the same way
+through the same place at no further charge. You need not require recipients to copy
+the Corresponding Source along with the object code. If the place to copy the object
+code is a network server, the Corresponding Source may be on a different server
+(operated by you or a third party) that supports equivalent copying facilities,
+provided you maintain clear directions next to the object code saying where to find
+the Corresponding Source. Regardless of what server hosts the Corresponding Source,
+you remain obligated to ensure that it is available for as long as needed to satisfy
+these requirements.
+* **e)** Convey the object code using peer-to-peer transmission, provided you inform
+other peers where the object code and Corresponding Source of the work are being
+offered to the general public at no charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded from the
+Corresponding Source as a System Library, need not be included in conveying the
+object code work.
+
+A “User Product” is either **(1)** a “consumer product”, which
+means any tangible personal property which is normally used for personal, family, or
+household purposes, or **(2)** anything designed or sold for incorporation into a
+dwelling. In determining whether a product is a consumer product, doubtful cases
+shall be resolved in favor of coverage. For a particular product received by a
+particular user, “normally used” refers to a typical or common use of
+that class of product, regardless of the status of the particular user or of the way
+in which the particular user actually uses, or expects or is expected to use, the
+product. A product is a consumer product regardless of whether the product has
+substantial commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+“Installation Information” for a User Product means any methods,
+procedures, authorization keys, or other information required to install and execute
+modified versions of a covered work in that User Product from a modified version of
+its Corresponding Source. The information must suffice to ensure that the continued
+functioning of the modified object code is in no case prevented or interfered with
+solely because modification has been made.
+
+If you convey an object code work under this section in, or with, or specifically for
+use in, a User Product, and the conveying occurs as part of a transaction in which
+the right of possession and use of the User Product is transferred to the recipient
+in perpetuity or for a fixed term (regardless of how the transaction is
+characterized), the Corresponding Source conveyed under this section must be
+accompanied by the Installation Information. But this requirement does not apply if
+neither you nor any third party retains the ability to install modified object code
+on the User Product (for example, the work has been installed in ROM).
+
+The requirement to provide Installation Information does not include a requirement to
+continue to provide support service, warranty, or updates for a work that has been
+modified or installed by the recipient, or for the User Product in which it has been
+modified or installed. Access to a network may be denied when the modification itself
+materially and adversely affects the operation of the network or violates the rules
+and protocols for communication across the network.
+
+Corresponding Source conveyed, and Installation Information provided, in accord with
+this section must be in a format that is publicly documented (and with an
+implementation available to the public in source code form), and must require no
+special password or key for unpacking, reading or copying.
+
+### 7. Additional Terms
+
+“Additional permissions” are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions. Additional
+permissions that are applicable to the entire Program shall be treated as though they
+were included in this License, to the extent that they are valid under applicable
+law. If additional permissions apply only to part of the Program, that part may be
+used separately under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option remove any
+additional permissions from that copy, or from any part of it. (Additional
+permissions may be written to require their own removal in certain cases when you
+modify the work.) You may place additional permissions on material, added by you to a
+covered work, for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you add to a
+covered work, you may (if authorized by the copyright holders of that material)
+supplement the terms of this License with terms:
+
+* **a)** Disclaiming warranty or limiting liability differently from the terms of
+sections 15 and 16 of this License; or
+* **b)** Requiring preservation of specified reasonable legal notices or author
+attributions in that material or in the Appropriate Legal Notices displayed by works
+containing it; or
+* **c)** Prohibiting misrepresentation of the origin of that material, or requiring that
+modified versions of such material be marked in reasonable ways as different from the
+original version; or
+* **d)** Limiting the use for publicity purposes of names of licensors or authors of the
+material; or
+* **e)** Declining to grant rights under trademark law for use of some trade names,
+trademarks, or service marks; or
+* **f)** Requiring indemnification of licensors and authors of that material by anyone
+who conveys the material (or modified versions of it) with contractual assumptions of
+liability to the recipient, for any liability that these contractual assumptions
+directly impose on those licensors and authors.
+
+All other non-permissive additional terms are considered “further
+restrictions” within the meaning of section 10. If the Program as you received
+it, or any part of it, contains a notice stating that it is governed by this License
+along with a term that is a further restriction, you may remove that term. If a
+license document contains a further restriction but permits relicensing or conveying
+under this License, you may add to a covered work material governed by the terms of
+that license document, provided that the further restriction does not survive such
+relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you must place, in
+the relevant source files, a statement of the additional terms that apply to those
+files, or a notice indicating where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the form of a
+separately written license, or stated as exceptions; the above requirements apply
+either way.
+
+### 8. Termination
+
+You may not propagate or modify a covered work except as expressly provided under
+this License. Any attempt otherwise to propagate or modify it is void, and will
+automatically terminate your rights under this License (including any patent licenses
+granted under the third paragraph of section 11).
+
+However, if you cease all violation of this License, then your license from a
+particular copyright holder is reinstated **(a)** provisionally, unless and until the
+copyright holder explicitly and finally terminates your license, and **(b)** permanently,
+if the copyright holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is reinstated permanently
+if the copyright holder notifies you of the violation by some reasonable means, this
+is the first time you have received notice of violation of this License (for any
+work) from that copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the licenses of
+parties who have received copies or rights from you under this License. If your
+rights have been terminated and not permanently reinstated, you do not qualify to
+receive new licenses for the same material under section 10.
+
+### 9. Acceptance Not Required for Having Copies
+
+You are not required to accept this License in order to receive or run a copy of the
+Program. Ancillary propagation of a covered work occurring solely as a consequence of
+using peer-to-peer transmission to receive a copy likewise does not require
+acceptance. However, nothing other than this License grants you permission to
+propagate or modify any covered work. These actions infringe copyright if you do not
+accept this License. Therefore, by modifying or propagating a covered work, you
+indicate your acceptance of this License to do so.
+
+### 10. Automatic Licensing of Downstream Recipients
+
+Each time you convey a covered work, the recipient automatically receives a license
+from the original licensors, to run, modify and propagate that work, subject to this
+License. You are not responsible for enforcing compliance by third parties with this
+License.
+
+An “entity transaction” is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an organization, or
+merging organizations. If propagation of a covered work results from an entity
+transaction, each party to that transaction who receives a copy of the work also
+receives whatever licenses to the work the party's predecessor in interest had or
+could give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if the predecessor
+has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the rights granted or
+affirmed under this License. For example, you may not impose a license fee, royalty,
+or other charge for exercise of rights granted under this License, and you may not
+initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging
+that any patent claim is infringed by making, using, selling, offering for sale, or
+importing the Program or any portion of it.
+
+### 11. Patents
+
+A “contributor” is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The work thus
+licensed is called the contributor's “contributor version”.
+
+A contributor's “essential patent claims” are all patent claims owned or
+controlled by the contributor, whether already acquired or hereafter acquired, that
+would be infringed by some manner, permitted by this License, of making, using, or
+selling its contributor version, but do not include claims that would be infringed
+only as a consequence of further modification of the contributor version. For
+purposes of this definition, “control” includes the right to grant patent
+sublicenses in a manner consistent with the requirements of this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free patent license
+under the contributor's essential patent claims, to make, use, sell, offer for sale,
+import and otherwise run, modify and propagate the contents of its contributor
+version.
+
+In the following three paragraphs, a “patent license” is any express
+agreement or commitment, however denominated, not to enforce a patent (such as an
+express permission to practice a patent or covenant not to sue for patent
+infringement). To “grant” such a patent license to a party means to make
+such an agreement or commitment not to enforce a patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license, and the
+Corresponding Source of the work is not available for anyone to copy, free of charge
+and under the terms of this License, through a publicly available network server or
+other readily accessible means, then you must either **(1)** cause the Corresponding
+Source to be so available, or **(2)** arrange to deprive yourself of the benefit of the
+patent license for this particular work, or **(3)** arrange, in a manner consistent with
+the requirements of this License, to extend the patent license to downstream
+recipients. “Knowingly relying” means you have actual knowledge that, but
+for the patent license, your conveying the covered work in a country, or your
+recipient's use of the covered work in a country, would infringe one or more
+identifiable patents in that country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or arrangement, you
+convey, or propagate by procuring conveyance of, a covered work, and grant a patent
+license to some of the parties receiving the covered work authorizing them to use,
+propagate, modify or convey a specific copy of the covered work, then the patent
+license you grant is automatically extended to all recipients of the covered work and
+works based on it.
+
+A patent license is “discriminatory” if it does not include within the
+scope of its coverage, prohibits the exercise of, or is conditioned on the
+non-exercise of one or more of the rights that are specifically granted under this
+License. You may not convey a covered work if you are a party to an arrangement with
+a third party that is in the business of distributing software, under which you make
+payment to the third party based on the extent of your activity of conveying the
+work, and under which the third party grants, to any of the parties who would receive
+the covered work from you, a discriminatory patent license **(a)** in connection with
+copies of the covered work conveyed by you (or copies made from those copies), or **(b)**
+primarily for and in connection with specific products or compilations that contain
+the covered work, unless you entered into that arrangement, or that patent license
+was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting any implied
+license or other defenses to infringement that may otherwise be available to you
+under applicable patent law.
+
+### 12. No Surrender of Others' Freedom
+
+If conditions are imposed on you (whether by court order, agreement or otherwise)
+that contradict the conditions of this License, they do not excuse you from the
+conditions of this License. If you cannot convey a covered work so as to satisfy
+simultaneously your obligations under this License and any other pertinent
+obligations, then as a consequence you may not convey it at all. For example, if you
+agree to terms that obligate you to collect a royalty for further conveying from
+those to whom you convey the Program, the only way you could satisfy both those terms
+and this License would be to refrain entirely from conveying the Program.
+
+### 13. Use with the GNU Affero General Public License
+
+Notwithstanding any other provision of this License, you have permission to link or
+combine any covered work with a work licensed under version 3 of the GNU Affero
+General Public License into a single combined work, and to convey the resulting work.
+The terms of this License will continue to apply to the part which is the covered
+work, but the special requirements of the GNU Affero General Public License, section
+13, concerning interaction through a network will apply to the combination as such.
+
+### 14. Revised Versions of this License
+
+The Free Software Foundation may publish revised and/or new versions of the GNU
+General Public License from time to time. Such new versions will be similar in spirit
+to the present version, but may differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number. If the Program specifies that
+a certain numbered version of the GNU General Public License “or any later
+version” applies to it, you have the option of following the terms and
+conditions either of that numbered version or of any later version published by the
+Free Software Foundation. If the Program does not specify a version number of the GNU
+General Public License, you may choose any version ever published by the Free
+Software Foundation.
+
+If the Program specifies that a proxy can decide which future versions of the GNU
+General Public License can be used, that proxy's public statement of acceptance of a
+version permanently authorizes you to choose that version for the Program.
+
+Later license versions may give you additional or different permissions. However, no
+additional obligations are imposed on any author or copyright holder as a result of
+your choosing to follow a later version.
+
+### 15. Disclaimer of Warranty
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
+EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY OF ANY KIND, EITHER
+EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE
+QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
+DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+### 16. Limitation of Liability
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY
+COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS
+PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL,
+INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
+PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE
+OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE
+WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+### 17. Interpretation of Sections 15 and 16
+
+If the disclaimer of warranty and limitation of liability provided above cannot be
+given local legal effect according to their terms, reviewing courts shall apply local
+law that most closely approximates an absolute waiver of all civil liability in
+connection with the Program, unless a warranty or assumption of liability accompanies
+a copy of the Program in return for a fee.
+
+_END OF TERMS AND CONDITIONS_
+
+## How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest possible use to
+the public, the best way to achieve this is to make it free software which everyone
+can redistribute and change under these terms.
+
+To do so, attach the following notices to the program. It is safest to attach them
+to the start of each source file to most effectively state the exclusion of warranty;
+and each file should have at least the “copyright” line and a pointer to
+where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program does terminal interaction, make it output a short notice like this
+when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type 'show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type 'show c' for details.
+
+The hypothetical commands `show w` and `show c` should show the appropriate parts of
+the General Public License. Of course, your program's commands might be different;
+for a GUI interface, you would use an “about box”.
+
+You should also get your employer (if you work as a programmer) or school, if any, to
+sign a “copyright disclaimer” for the program, if necessary. For more
+information on this, and how to apply and follow the GNU GPL, see
+&lt;<http://www.gnu.org/licenses/>&gt;.
+
+The GNU General Public License does not permit incorporating your program into
+proprietary programs. If your program is a subroutine library, you may consider it
+more useful to permit linking proprietary applications with the library. If this is
+what you want to do, use the GNU Lesser General Public License instead of this
+License. But first, please read
+&lt;<http://www.gnu.org/philosophy/why-not-lgpl.html>&gt;.

From 108e09e98c41baedab97e03d37e939626561914c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 8 Mar 2019 17:06:18 +0200
Subject: [PATCH 22/49] relations between calendar and future episodes fixed;
 style changes

---
 src/routes/Calendar/Calendar.js | 284 +++++++++++++++++---------------
 src/routes/Calendar/styles.less | 155 +++++++++--------
 2 files changed, 237 insertions(+), 202 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 81bbb5b82..49084d6d8 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -21,15 +21,6 @@ class Calendar extends Component {
             episodeInfo: '',
             selectedDate: new Date()
         };
-
-        // this.episodesNames = this.props.metaItems
-        //     .map((metaitem) => metaitem.metaItem.videos
-        //         .filter((video) => video.released.getMonth() === new Date().getMonth() && video.released.getDate() === this.state.selectedDate.getDate())
-        //         .map((video) => video.name)
-        //         .join())
-        //     .filter((element) => element.length > 0)
-
-        // console.log(this.episodesNames);
     }
 
     changeDate = (event) => {
@@ -39,18 +30,32 @@ class Calendar extends Component {
     }
 
     showEpisodeInfo = (event) => {
-        this.setState({ episodeInfo: event.currentTarget.dataset.videoName });
+        event.stopPropagation();
+        this.setState({ episodeInfo: event.currentTarget.dataset.videoName, selectedDate: new Date(event.currentTarget.dataset.videoDate) });
     }
 
     changeSelectedDate = (event) => {
-        this.setState({ selectedDate: new Date(event.currentTarget.dataset.day) });
+        const selectedDate = new Date(event.currentTarget.dataset.day);
+
+        var firstEpisode = this.props.metaItems
+            .map((metaitem) => metaitem.videos
+                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === selectedDate.getDate())
+                .map((video) => video.name))
+            .filter((videos) => videos.length > 0)
+            .join()
+            .split(',')[0];
+
+        if (firstEpisode.length > 0) {
+            this.setState({ episodeInfo: firstEpisode, selectedDate });
+        } else {
+            this.setState({ selectedDate });
+        }
     }
 
     scrollTo = () => {
         if (this.dateRef.current !== null) {
             var topPosition = this.dateRef.current.offsetTop;
-            this.futureEpisodesRef.current.scrollTop = topPosition - 16;
-            // this.futureEpisodesRef.current.animate({ scrollTop: this.dateRef.current.offsetTop }, 300);
+            this.futureEpisodesRef.current.scrollTop = topPosition - this.futureEpisodesRef.current.offsetTop;
         } else {
             this.setState({ episodeInfo: '' });
         }
@@ -78,6 +83,10 @@ class Calendar extends Component {
             nextState.selectedDate !== this.state.selectedDate;
     }
 
+    componentDidMount() {
+        this.scrollTo();
+    }
+
     componentDidUpdate(prevProps, prevState) {
         if (prevState.selectedDate !== this.state.selectedDate) {
             this.scrollTo();
@@ -97,6 +106,12 @@ class Calendar extends Component {
     }
 
     render() {
+        const videosDates = this.props.metaItems
+            .map((metaitem) => metaitem.videos
+                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
+            .filter((videos) => videos.length > 0)
+            .map((videos) => videos.map((video) => video.released.getDate()));
+
         return (
             <div className={styles['calendar-container']}>
                 <div className={styles['calendar']}>
@@ -106,25 +121,35 @@ class Calendar extends Component {
                         {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
                     </div>
                     <div className={styles['week-days']}>
-                        {days.map((day) => <div className={styles['day']} key={day}>{day}</div>)}
+                        {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
                     </div>
                     <div className={styles['month-days']}>
                         {this.pads.map((pad) =>
-                            <div className={styles['pad']} key={pad} />
+                            <div key={pad} className={styles['pad']} />
                         )}
                         {this.monthDays.map((day) =>
-                            <div className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === day + 1 })} key={day} data-day={new Date(new Date().getFullYear(), this.state.date.getMonth(), day + 1)} onClick={this.changeSelectedDate}>
+                            <div key={day}
+                                className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === day + 1 })}
+                                data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), day + 1)}
+                                onClick={this.changeSelectedDate}
+                            >
                                 <div className={styles['date-container']}>
-                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === day + 1 })}>{day + 1}</div>
+                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === day + 1 })}>{day + 1}</div>
                                 </div>
                                 <div className={styles['episodes']}>
                                     {this.props.metaItems
-                                        .map((metaitem) => metaitem.metaItem.videos
-                                            .filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
+                                        .map((metaitem) => metaitem.videos
+                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
                                             .map((video) =>
                                                 //////indicator for >3 posters?
                                                 //getTime()?
-                                                <div style={{ backgroundImage: `url('${metaitem.metaItem.background}')` }} className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() })} key={video.id} data-video-name={video.name} onClick={this.showEpisodeInfo} />
+                                                <div key={video.id}
+                                                    style={{ backgroundImage: `url('${metaitem.background}')` }}
+                                                    className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() })}
+                                                    data-video-name={video.name}
+                                                    data-video-date={video.released}
+                                                    onClick={this.showEpisodeInfo}
+                                                />
                                             )
                                         )}
                                 </div>
@@ -133,53 +158,64 @@ class Calendar extends Component {
                     </div>
                 </div>
                 <div ref={this.futureEpisodesRef} className={styles['future-episodes']}>
-                    {this.props.metaItems
-                        .map((metaitem) => metaitem.metaItem.videos
-                            .filter((video) => video.released.getMonth() === this.state.date.getMonth()))
-                        .map((videos) => videos.map((video) => video.released.getDate()))
-                        .join()
-                        .split(',')
-                        .filter((date, index, dates) => dates.indexOf(date) === index)
-                        .sort(function(a, b) {
-                            return a - b;
-                        })
-                        .map((videoDate) =>
-                            <div ref={parseInt(videoDate) === this.state.selectedDate.getDate() ? this.dateRef : null} className={classnames(styles['episode-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })} key={videoDate} data-day={new Date(new Date().getFullYear(), new Date().getMonth(), parseInt(videoDate))} onClick={this.changeSelectedDate}>
-                                <div className={styles['date']}>
-                                    {months[this.state.date.getMonth()].slice(0, 3)} {videoDate}
-                                </div>
-                                {this.props.metaItems
-                                    .map((metaitem) => metaitem.metaItem.videos
-                                        .filter((video) => video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
-                                        .map((video) =>
-                                            <div className={classnames(styles['episode'], { [styles['selected']]: this.state.episodeInfo === video.name }, { [styles['today']]: parseInt(videoDate) === new Date().getDate() })} key={video.name} data-video-name={video.name} onClick={this.showEpisodeInfo}>
-                                                <div className={classnames(styles['info'])} >
-                                                    <div className={styles['main-info']}>
-                                                        <div className={styles['serie-name']}>
-                                                            {metaitem.metaItem.name}
+                    {
+                        videosDates.length > 0
+                            ?
+                            videosDates
+                                .join()
+                                .split(',')
+                                .filter((date, index, dates) => dates.indexOf(date) === index)
+                                .sort(function(a, b) {
+                                    return a - b;
+                                })
+                                .map((videoDate) =>
+                                    <div key={videoDate}
+                                        ref={parseInt(videoDate) === this.state.selectedDate.getDate() ? this.dateRef : null}
+                                        className={classnames(styles['episode-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })}
+                                        data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), parseInt(videoDate))}
+                                        onClick={this.changeSelectedDate}
+                                    >
+                                        <div className={styles['date']}>
+                                            {months[this.state.date.getMonth()].slice(0, 3)} {videoDate}
+                                        </div>
+                                        {this.props.metaItems
+                                            .map((metaitem) => metaitem.videos
+                                                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
+                                                .map((video) =>
+                                                    <div key={video.name}
+                                                        className={classnames(styles['episode'], { [styles['selected']]: this.state.episodeInfo === video.name }, { [styles['today']]: video.released.getFullYear() === new Date().getFullYear() && video.released.getMonth() === new Date().getMonth() && parseInt(videoDate) === new Date().getDate() && this.state.episodeInfo !== video.name })}
+                                                        data-video-name={video.name}
+                                                        data-video-date={video.released}
+                                                        onClick={this.showEpisodeInfo}
+                                                    >
+                                                        <div className={styles['main-info']}>
+                                                            <div className={styles['serie-name']}>
+                                                                {metaitem.name}
+                                                            </div>
+                                                            <div className={styles['episode-number']}>
+                                                                S{video.season} E{video.episode}
+                                                            </div>
                                                         </div>
-                                                        <div className={styles['episode-number']}>
-                                                            S{video.season} E{video.episode}
+                                                        <div className={styles['name']}>
+                                                            "{video.name}"
+                                                            </div>
+                                                        <div className={styles['description']}>
+                                                            {video.description}
                                                         </div>
+                                                        <a className={styles['watch-button-container']} href={'#/detail'}>
+                                                            <div className={styles['watch-button']}>
+                                                                <Icon className={styles['icon']} icon={'ic_play'} />
+                                                                <div className={styles['label']}>WATCH NOW</div>
+                                                            </div>
+                                                        </a>
                                                     </div>
-                                                    <div className={styles['name']}>
-                                                        "{video.name}"
-                                                    </div>
-                                                    <div className={styles['description']}>
-                                                        {video.description}
-                                                    </div>
-                                                    <a className={styles['watch-button-container']} href={'#/detail'}>
-                                                        <div className={styles['watch-button']}>
-                                                            <Icon className={styles['icon']} icon={'ic_play'} />
-                                                            <div className={styles['label']}>WATCH NOW</div>
-                                                        </div>
-                                                    </a>
-                                                </div>
-                                            </div>
-                                        )
-                                    )}
-                            </div>
-                        )}
+                                                )
+                                            )}
+                                    </div>
+                                )
+                            :
+                            null
+                    }
                 </div>
             </div>
         );
@@ -193,79 +229,69 @@ Calendar.propTypes = {
 Calendar.defaultProps = {
     metaItems: [
         {
-            metaItem: {
-                background: 'https://images.metahub.space/poster/medium/tt2306299/img',
-                releaseInfo: '2018',
-                released: new Date(2018, 4, 23),
-                name: 'Vikings',
-                videos: [
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 6), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 12), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 18), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
-                ]
-            }
+            background: 'https://images.metahub.space/poster/medium/tt2306299/img',
+            releaseInfo: '2018',
+            released: new Date(2018, 4, 23),
+            name: 'Vikings',
+            videos: [
+                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 1), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 2), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 5), isUpcoming: true, isWatched: true, season: 5 }
+            ]
         },
         {
-            metaItem: {
-                background: 'https://images.metahub.space/poster/medium/tt1520211/img',
-                releaseInfo: '2018',
-                released: new Date(2018, 4, 23),
-                name: 'The Walking Dead',
-                videos: [
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 6), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 12), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 19), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
-                ]
-            }
+            background: 'https://images.metahub.space/poster/medium/tt1520211/img',
+            releaseInfo: '2018',
+            released: new Date(2018, 4, 23),
+            name: 'The Walking Dead',
+            videos: [
+                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 7), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 12), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 19), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+            ]
         },
         {
-            metaItem: {
-                background: 'https://images.metahub.space/poster/medium/tt0944947/img',
-                releaseInfo: '2018',
-                released: new Date(2018, 4, 23),
-                name: 'Game of Thrones',
-                videos: [
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
-                ]
-            }
+            background: 'https://images.metahub.space/poster/medium/tt0944947/img',
+            releaseInfo: '2018',
+            released: new Date(2018, 4, 23),
+            name: 'Game of Thrones',
+            videos: [
+                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+            ]
         },
         {
-            metaItem: {
-                background: 'https://images.metahub.space/poster/medium/tt0411008/img',
-                releaseInfo: '2018',
-                released: new Date(2018, 4, 23),
-                name: 'Lost',
-                videos: [
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 4), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 17), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 10), isUpcoming: true, isWatched: true, season: 5 }
-                ]
-            }
+            background: 'https://images.metahub.space/poster/medium/tt0411008/img',
+            releaseInfo: '2018',
+            released: new Date(2018, 4, 23),
+            name: 'Lost',
+            videos: [
+                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 17), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 }
+            ]
         },
         {
-            metaItem: {
-                background: 'https://images.metahub.space/poster/medium/tt0813715/img',
-                releaseInfo: '2018',
-                released: new Date(2018, 4, 23),
-                name: 'Heroes',
-                videos: [
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 3), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 1, 8), isUpcoming: true, isWatched: true, season: 5 },
-                    { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
-                ]
-            }
+            background: 'https://images.metahub.space/poster/medium/tt0813715/img',
+            releaseInfo: '2018',
+            released: new Date(2018, 4, 23),
+            name: 'Heroes',
+            videos: [
+                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 10), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 8), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+            ]
         }
     ]
 };
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index b4317bc29..750c62073 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -10,17 +10,16 @@
     flex-direction: row;
 
     .calendar {
-        // width: 75%;
         flex: 1;
 
         .months {
-            padding: var(--spacing) calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 2);
+            padding: var(--spacing) 0 calc(var(--spacing) * 2) 0;
             display: flex;
             flex-direction: row;
-            justify-content: space-evenly;
+            align-items: center;
+            justify-content: center;
 
             .month {
-                margin-right: var(--spacing);
                 font-size: 1.7em;
                 color: var(--color-surfacelighter);
                 cursor: pointer;
@@ -33,8 +32,11 @@
                         color: var(--color-surfacelight);
                     }
                 }
-            }
 
+                &:not(:last-child) {
+                    margin-right: calc(var(--spacing) * 4);
+                }
+            }
         }
 
         .week-days {
@@ -43,7 +45,7 @@
             flex-direction: row;
 
             .day {
-                margin: 0 1px 1px 0;
+                margin-right: calc(var(--focusable-border-size) * 0.5);
                 width: 14%;
                 font-size: 1.2em;
                 color: var(--color-secondarylighter);
@@ -54,26 +56,26 @@
             height: 100%;
 
             .pad {
-                margin: 0 1px 1px 0;
+                margin: 0 calc(var(--focusable-border-size) * 0.5) calc(var(--focusable-border-size) * 0.5) 0;
                 width: 14%;
                 height: 14%;
                 float: left;
             }
 
             .day {
-                margin: 0 1px 1px 0;
+                margin: 0 calc(var(--focusable-border-size) * 0.5) calc(var(--focusable-border-size) * 0.5) 0;
                 width: 14%;
-                height: 16%;
+                height: 14%;
                 float: left;
                 font-size: 1.4em;
-                border: 2px solid transparent;
+                border: var(--focusable-border-size) solid transparent;
                 background-color: var(--color-backgroundlighter);
                 cursor: pointer;
 
                 .date-container {
                     margin: calc(var(--spacing) * 0.5);
-                    width: 34px;
-                    height: 34px;
+                    width: 30px;
+                    height: 30px;
 
                     .date {
                         width: 100%;
@@ -92,14 +94,15 @@
                 }
 
                 .episodes {
-                    margin: 0 2px;
-                    height: 42px;
+                    margin: 0 var(--focusable-border-size) var(--focusable-border-size) var(--focusable-border-size);
+                    height: 34px;
                     display: flex;
                     flex-direction: row;
 
                     .poster {
+                        margin-right: var(--focusable-border-size);
                         display: none;
-                        width: 33%;
+                        width: 25%;
                         height: 100%;
                         background-size: cover;
                         background-repeat: no-repeat;
@@ -109,7 +112,7 @@
                             opacity: 0.4;
                         }
 
-                        &:nth-child(-n+3) {
+                        &:nth-child(-n+4) {
                             display: inline-block;
                         }
                     }
@@ -124,16 +127,16 @@
     }
 
     .future-episodes {
+        padding-right: 10px;
         width: 270px;
-        // width: 25%;
-        // padding: 10px;
         overflow-y: auto;
         overflow-x: hidden;
         scroll-behavior: smooth;
 
         .episode-container {
             margin-bottom: var(--spacing);
-            border: 2px solid transparent;
+            width: 252px;
+            border: var(--focusable-border-size) solid var(--color-background);
             background-color: var(--color-backgroundlighter);
 
             .date {
@@ -143,60 +146,64 @@
             }
 
             .episode {
+                padding: var(--spacing);
                 display: flex;
                 flex-direction: column;
+                justify-content: space-between;
                 cursor: pointer;
 
-                .info {
-                    padding: var(--spacing);
+                .main-info {
                     display: flex;
-                    flex-direction: column;
+                    flex-direction: row;
                     justify-content: space-between;
 
-                    .main-info {
+                    .serie-name {
+                        color: var(--color-surface);
+                    }
+
+                    .episode-number {
+                        color: var(--color-surface);
+                    }
+                }
+
+                .name {
+                    display: none;
+                    padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
+                    color: var(--color-surfacelighter);
+                }
+
+                .description {
+                    display: none;
+                    padding: var(--spacing) 0;
+                    line-height: 1.2em;
+                    color: var(--color-surfacelighter);
+                }
+
+                .watch-button-container {
+                    display: none;
+                    margin: 0 calc(var(--spacing) * 0.5);
+                    padding: var(--spacing);
+                    border-top: calc(var(--focusable-border-size) * 0.5) solid var(--color-background);
+                    cursor: pointer;
+
+                    .watch-button {
                         display: flex;
                         flex-direction: row;
-                        justify-content: space-between;
+                        align-items: center;
+                        justify-content: center;
 
-                        .serie-name {
-                            color: var(--color-surface);
+                        .icon {
+                            margin-right: var(--spacing);
+                            width: 8%;
+                            fill: var(--color-surfacelight);
                         }
 
-                        .episode-number {
-                            color: var(--color-surface);
+                        .label {
+                            color: var(--color-surfacelight);
                         }
-                    }
-
-                    .name {
-                        display: none;
-                        padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
-                        color: var(--color-surfacelighter);
-                    }
-
-                    .description {
-                        display: none;
-                        padding: var(--spacing) 0;
-                        line-height: 1.2em;
-                        color: var(--color-surfacelighter);
-                    }
-
-                    .watch-button-container {
-                        display: none;
-                        margin: 0 calc(var(--spacing) * 0.5);
-                        padding: var(--spacing);
-                        border-top: 1px solid var(--color-background);
-                        cursor: pointer;
-
-                        .watch-button {
-                            display: flex;
-                            flex-direction: row;
-                            align-items: center;
-                            justify-content: center;
 
+                        &:hover {
                             .icon {
-                                margin-right: var(--spacing);
-                                width: 6%;
-                                height: 6%;
                                 fill: var(--color-surfacelighter);
                             }
 
@@ -208,22 +215,24 @@
                 }
 
                 &.selected {
-                    .info {
-                        padding-bottom: 0;
+                    padding-bottom: 0;
+                    background-color: var(--color-primarydark);
+                    cursor: default;
+
+                    .name {
+                        display: inline-block;
+                    }
+
+                    .description {
+                        display: inline-block;
+                    }
+
+                    .watch-button-container {
+                        display: inline-block;
+                    }
+
+                    &:hover {
                         background-color: var(--color-primarydark);
-                        cursor: default;
-
-                        .name {
-                            display: inline-block;
-                        }
-
-                        .description {
-                            display: inline-block;
-                        }
-
-                        .watch-button-container {
-                            display: inline-block;
-                        }
                     }
                 }
 

From 87fe0a18245e00061bcc53ae2b286569c519fbe7 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 13 Mar 2019 18:58:17 +0200
Subject: [PATCH 23/49] resetMonth func replaced with getMonthInfo; styles
 fixes (table used)

---
 src/routes/Calendar/Calendar.js | 179 ++++++++++++++-------------
 src/routes/Calendar/styles.less | 213 +++++++++++++++++++-------------
 2 files changed, 216 insertions(+), 176 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 49084d6d8..764c3c2b3 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -11,8 +11,6 @@ class Calendar extends Component {
     constructor(props) {
         super(props);
 
-        this.resetMonth(new Date());
-
         this.dateRef = React.createRef();
         this.futureEpisodesRef = React.createRef();
 
@@ -23,10 +21,37 @@ class Calendar extends Component {
         };
     }
 
+    componentDidMount() {
+        this.scrollTo();
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.date !== this.state.date ||
+            nextState.episodeInfo !== this.state.episodeInfo ||
+            nextState.selectedDate !== this.state.selectedDate;
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.selectedDate !== this.state.selectedDate) {
+            this.scrollTo();
+        }
+
+        if (prevState.date.getMonth() !== this.state.date.getMonth()) {
+            this.setState({ selectedDate: new Date(this.state.date.getFullYear(), this.state.date.getMonth(), 1) });
+        }
+    }
+
+    scrollTo = () => {
+        if (this.dateRef.current !== null) {
+            var topPosition = this.dateRef.current.offsetTop;
+            this.futureEpisodesRef.current.scrollTop = topPosition - this.futureEpisodesRef.current.offsetTop;
+        } else {
+            this.setState({ episodeInfo: '' });
+        }
+    }
+
     changeDate = (event) => {
-        const date = new Date(parseInt(event.currentTarget.dataset.date));
-        this.resetMonth(date);
-        this.setState({ date });
+        this.setState({ date: new Date(parseInt(event.currentTarget.dataset.date)) });
     }
 
     showEpisodeInfo = (event) => {
@@ -52,51 +77,20 @@ class Calendar extends Component {
         }
     }
 
-    scrollTo = () => {
-        if (this.dateRef.current !== null) {
-            var topPosition = this.dateRef.current.offsetTop;
-            this.futureEpisodesRef.current.scrollTop = topPosition - this.futureEpisodesRef.current.offsetTop;
-        } else {
-            this.setState({ episodeInfo: '' });
-        }
-    }
+    getMonthInfo = (date) => {
+        const monthDate = new Date(date);
+        monthDate.setDate(1);
+        var padsCount = (monthDate.getDay() + 6) % 7;
+        monthDate.setMonth(monthDate.getMonth() + 1);
+        monthDate.setDate(0);
+        var daysCount = monthDate.getDate();
+        var rowsCount = Math.ceil((padsCount + daysCount) / 7);
 
-    resetMonth(newDate) {
-        this.monthDays = [];
-        this.monthStart = new Date(newDate.getFullYear(), newDate.getMonth());
-        this.monthEnd = new Date(this.monthStart.getFullYear(), this.monthStart.getMonth() + 1, 0);
-        this.pads = [];
-        var pad = (this.monthStart.getDay() + 6) % 7;
-
-        for (var i = 0; i != pad; i++) {
-            this.pads.push(i);
-        }
-
-        for (var i = 0; i != this.monthEnd.getDate(); i++) {
-            this.monthDays.push(i);
-        }
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextState.date !== this.state.date ||
-            nextState.episodeInfo !== this.state.episodeInfo ||
-            nextState.selectedDate !== this.state.selectedDate;
-    }
-
-    componentDidMount() {
-        this.scrollTo();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.selectedDate !== this.state.selectedDate) {
-            this.scrollTo();
-        }
-
-        if (prevState.date.getMonth() !== this.state.date.getMonth()) {
-            this.setState({ selectedDate: new Date(this.state.date.getFullYear(), this.state.date.getMonth(), 1) });
-            const newDate = this.state.date;
-            this.resetMonth(newDate);
-        }
+        return {
+            padsCount,
+            daysCount,
+            rowsCount
+        };
     }
 
     renderMonthButton(date) {
@@ -106,6 +100,9 @@ class Calendar extends Component {
     }
 
     render() {
+        const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
+        var currentDay = 0;
+
         const videosDates = this.props.metaItems
             .map((metaitem) => metaitem.videos
                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
@@ -120,42 +117,50 @@ class Calendar extends Component {
                         {this.renderMonthButton(new Date(this.state.date))}
                         {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
                     </div>
-                    <div className={styles['week-days']}>
-                        {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
-                    </div>
-                    <div className={styles['month-days']}>
-                        {this.pads.map((pad) =>
-                            <div key={pad} className={styles['pad']} />
-                        )}
-                        {this.monthDays.map((day) =>
-                            <div key={day}
-                                className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === day + 1 })}
-                                data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), day + 1)}
-                                onClick={this.changeSelectedDate}
-                            >
-                                <div className={styles['date-container']}>
-                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === day + 1 })}>{day + 1}</div>
-                                </div>
-                                <div className={styles['episodes']}>
-                                    {this.props.metaItems
-                                        .map((metaitem) => metaitem.videos
-                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === day + 1)
-                                            .map((video) =>
-                                                //////indicator for >3 posters?
-                                                //getTime()?
-                                                <div key={video.id}
-                                                    style={{ backgroundImage: `url('${metaitem.background}')` }}
-                                                    className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() })}
-                                                    data-video-name={video.name}
-                                                    data-video-date={video.released}
-                                                    onClick={this.showEpisodeInfo}
-                                                />
-                                            )
-                                        )}
-                                </div>
-                            </div>
-                        )}
-                    </div>
+                    <table className={styles['month-days']}>
+                        <tr className={styles['week-days']}>
+                            {days.map((day) => <td key={day} className={styles['day']}>{day}</td>)}
+                        </tr>
+                        {Array.apply(null, { length: rowsCount }).map((_, row) => (
+                            <tr key={row} className={styles['row']}>
+                                {Array.apply(null, { length: 7 }).map((_, day) => (
+                                    day < padsCount && row === 0
+                                        ?
+                                        <td key={day} />
+                                        :
+                                        currentDay < daysCount
+                                            ?
+                                            ++currentDay &&
+                                            <td key={day}
+                                                className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === currentDay })}
+                                                data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), currentDay)}
+                                                onClick={this.changeSelectedDate}
+                                            >
+                                                <div className={styles['date-container']}>
+                                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === currentDay })}>{currentDay}</div>
+                                                </div>
+                                                <div className={classnames(styles['episodes'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
+                                                    {this.props.metaItems
+                                                        .map((metaitem) => metaitem.videos
+                                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === currentDay)
+                                                            .map((video) =>
+                                                                <div key={video.id}
+                                                                    style={{ backgroundImage: `url('${metaitem.background}')` }}
+                                                                    className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() })}
+                                                                    data-video-name={video.name}
+                                                                    data-video-date={video.released}
+                                                                    onClick={this.showEpisodeInfo}
+                                                                />
+                                                            )
+                                                        )}
+                                                </div>
+                                            </td>
+                                            :
+                                            null
+                                ))}
+                            </tr>
+                        ))}
+                    </table>
                 </div>
                 <div ref={this.futureEpisodesRef} className={styles['future-episodes']}>
                     {
@@ -202,10 +207,10 @@ class Calendar extends Component {
                                                         <div className={styles['description']}>
                                                             {video.description}
                                                         </div>
-                                                        <a className={styles['watch-button-container']} href={'#/detail'}>
+                                                        <a className={styles['watch-button-container']} href={video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() ? '#/player' : '#/detail'}>
                                                             <div className={styles['watch-button']}>
                                                                 <Icon className={styles['icon']} icon={'ic_play'} />
-                                                                <div className={styles['label']}>WATCH NOW</div>
+                                                                <div className={styles['label']}>{video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() ? 'WATCH NOW' : 'SHOW'}</div>
                                                             </div>
                                                         </a>
                                                     </div>
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index 750c62073..de69b03d5 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -1,5 +1,7 @@
 .calendar-container {
     --spacing: 16px;
+    --episodes-height: 50px;
+    --future-episodes-width: 270px;
     font-size: 14px;
 }
 
@@ -11,16 +13,22 @@
 
     .calendar {
         flex: 1;
+        padding-right: calc(var(--spacing) * 0.5);
 
         .months {
-            padding: var(--spacing) 0 calc(var(--spacing) * 2) 0;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
+            padding-top: calc(var(--spacing) * 0.5);
+            height: 8%;
+            text-align: center;
 
             .month {
+                width: 12%;
+                display: inline-block;
                 font-size: 1.7em;
+                line-height: 1.2em;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                vertical-align: middle;
                 color: var(--color-surfacelighter);
                 cursor: pointer;
 
@@ -33,109 +41,109 @@
                     }
                 }
 
-                &:not(:last-child) {
-                    margin-right: calc(var(--spacing) * 4);
+                &:not(:first-child):not(:last-child) {
+                    margin: 0 var(--spacing);
                 }
             }
         }
 
-        .week-days {
-            margin-bottom: var(--spacing);
-            display: flex;
-            flex-direction: row;
-
-            .day {
-                margin-right: calc(var(--focusable-border-size) * 0.5);
-                width: 14%;
-                font-size: 1.2em;
-                color: var(--color-secondarylighter);
-            }
-        }
-
         .month-days {
-            height: 100%;
+            width: 100%;
+            height: 92%;
+            table-layout: fixed;
 
-            .pad {
-                margin: 0 calc(var(--focusable-border-size) * 0.5) calc(var(--focusable-border-size) * 0.5) 0;
-                width: 14%;
-                height: 14%;
-                float: left;
+            .week-days {
+                .day {
+                    padding: 0 calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.5) 0;
+                    font-size: 1.2em;
+                    line-height: 1.2em;
+                    text-align: left;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    color: var(--color-secondarylighter);
+                }
             }
 
-            .day {
-                margin: 0 calc(var(--focusable-border-size) * 0.5) calc(var(--focusable-border-size) * 0.5) 0;
-                width: 14%;
-                height: 14%;
-                float: left;
-                font-size: 1.4em;
-                border: var(--focusable-border-size) solid transparent;
-                background-color: var(--color-backgroundlighter);
-                cursor: pointer;
+            .row {
+                .day {
+                    border: var(--focusable-border-size) solid transparent;
+                    background-color: var(--color-backgroundlighter);
+                    cursor: pointer;
 
-                .date-container {
-                    margin: calc(var(--spacing) * 0.5);
-                    width: 30px;
-                    height: 30px;
+                    .date-container {
+                        margin: calc(var(--spacing) * 0.5);
+                        width: calc(var(--episodes-height) * 0.64);
+                        height: calc(var(--episodes-height) * 0.64);
 
-                    .date {
-                        width: 100%;
-                        height: 100%;
+                        .date {
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            font-size: 1.4em;
+                            color: var(--color-secondarylighter);
+
+                            &.selected {
+                                border-radius: 50%;
+                                color: var(--color-surfacelighter);
+                                background-color: var(--color-primary);
+                            }
+                        }
+                    }
+
+                    .episodes {
+                        margin: var(--focusable-border-size);
+                        height: var(--episodes-height);
                         display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: var(--color-secondarylighter);
+                        flex-direction: row;
 
-                        &.selected {
-                            border-radius: 50%;
-                            color: var(--color-surfacelighter);
-                            background-color: var(--color-primary);
+                        .poster {
+                            margin-right: var(--focusable-border-size);
+                            display: none;
+                            width: 25%;
+                            height: 100%;
+                            background-size: cover;
+                            background-repeat: no-repeat;
+                            background-position: center;
+
+                            &.past {
+                                opacity: 0.4;
+                            }
+
+                            &:nth-child(-n+4) {
+                                display: block;
+                            }
+                        }
+
+                        &.small {
+                            height: calc(var(--episodes-height) * 0.64);
+                        }
+
+                        &.big {
+                            height: calc(var(--episodes-height) * 1.54);
                         }
                     }
-                }
 
-                .episodes {
-                    margin: 0 var(--focusable-border-size) var(--focusable-border-size) var(--focusable-border-size);
-                    height: 34px;
-                    display: flex;
-                    flex-direction: row;
-
-                    .poster {
-                        margin-right: var(--focusable-border-size);
-                        display: none;
-                        width: 25%;
-                        height: 100%;
-                        background-size: cover;
-                        background-repeat: no-repeat;
-                        background-position: center;
-
-                        &.past {
-                            opacity: 0.4;
-                        }
-
-                        &:nth-child(-n+4) {
-                            display: inline-block;
-                        }
+                    &.selected {
+                        border-color: var(--color-primary);
+                        background-color: var(--color-backgroundlighter60);
                     }
                 }
-
-                &.selected {
-                    border-color: var(--color-primary);
-                    background-color: var(--color-backgroundlighter60);
-                }
             }
         }
     }
 
     .future-episodes {
-        padding-right: 10px;
-        width: 270px;
+        padding-right: calc(var(--spacing) * 0.5);
+        width: var(--future-episodes-width);
         overflow-y: auto;
         overflow-x: hidden;
         scroll-behavior: smooth;
 
         .episode-container {
-            margin-bottom: var(--spacing);
-            width: 252px;
+            margin-bottom: calc(var(--spacing) * 0.5);
             border: var(--focusable-border-size) solid var(--color-background);
             background-color: var(--color-backgroundlighter);
 
@@ -147,9 +155,6 @@
 
             .episode {
                 padding: var(--spacing);
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
                 cursor: pointer;
 
                 .main-info {
@@ -158,17 +163,28 @@
                     justify-content: space-between;
 
                     .serie-name {
+                        margin-right: 5%;
+                        width: 75%;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
                         color: var(--color-surface);
                     }
 
                     .episode-number {
+                        width: 20%;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
                         color: var(--color-surface);
                     }
                 }
 
                 .name {
+                    width: 100%;
                     display: none;
                     padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
+                    overflow-wrap: break-word;
                     color: var(--color-surfacelighter);
                 }
 
@@ -193,16 +209,21 @@
                         justify-content: center;
 
                         .icon {
-                            margin-right: var(--spacing);
+                            margin-right: 8%;
                             width: 8%;
                             fill: var(--color-surfacelight);
                         }
 
                         .label {
+                            max-width: 84%;
+                            word-break: break-all; //Firefox doesn't support { break-word }
+                            word-break: break-word;
                             color: var(--color-surfacelight);
                         }
+                    }
 
-                        &:hover {
+                    &:hover {
+                        .watch-button {
                             .icon {
                                 fill: var(--color-surfacelighter);
                             }
@@ -219,16 +240,30 @@
                     background-color: var(--color-primarydark);
                     cursor: default;
 
+                    .main-info {
+                        .serie-name {
+                            white-space: unset;
+                            overflow: visible;
+                            overflow-wrap: break-word;
+                        }
+
+                        .episode-number {
+                            white-space: unset;
+                            overflow: visible;
+                            overflow-wrap: break-word;
+                        }
+                    }
+
                     .name {
-                        display: inline-block;
+                        display: block;
                     }
 
                     .description {
-                        display: inline-block;
+                        display: block;
                     }
 
                     .watch-button-container {
-                        display: inline-block;
+                        display: block;
                     }
 
                     &:hover {

From fa45bb401898ced93e173eae51f0020034d6be39 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 14 Mar 2019 16:59:52 +0200
Subject: [PATCH 24/49] calendar refactored

---
 src/routes/Calendar/Calendar.js | 204 ++++++++++++++++----------------
 src/routes/Calendar/styles.less |  21 ++--
 2 files changed, 117 insertions(+), 108 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 764c3c2b3..32e82a344 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -11,29 +11,29 @@ class Calendar extends Component {
     constructor(props) {
         super(props);
 
-        this.dateRef = React.createRef();
-        this.futureEpisodesRef = React.createRef();
+        this.videosContainerRef = React.createRef();
+        this.videosScrollContainerRef = React.createRef();
 
         this.state = {
             date: new Date(),
-            episodeInfo: '',
+            videoId: '',
             selectedDate: new Date()
         };
     }
 
     componentDidMount() {
-        this.scrollTo();
+        this.scrollToSelectedVideo();
     }
 
     shouldComponentUpdate(nextProps, nextState) {
         return nextState.date !== this.state.date ||
-            nextState.episodeInfo !== this.state.episodeInfo ||
+            nextState.videoId !== this.state.videoId ||
             nextState.selectedDate !== this.state.selectedDate;
     }
 
     componentDidUpdate(prevProps, prevState) {
         if (prevState.selectedDate !== this.state.selectedDate) {
-            this.scrollTo();
+            this.scrollToSelectedVideo();
         }
 
         if (prevState.date.getMonth() !== this.state.date.getMonth()) {
@@ -41,12 +41,12 @@ class Calendar extends Component {
         }
     }
 
-    scrollTo = () => {
-        if (this.dateRef.current !== null) {
-            var topPosition = this.dateRef.current.offsetTop;
-            this.futureEpisodesRef.current.scrollTop = topPosition - this.futureEpisodesRef.current.offsetTop;
+    scrollToSelectedVideo = () => {
+        if (this.videosContainerRef.current !== null) {
+            var topPosition = this.videosContainerRef.current.offsetTop;
+            this.videosScrollContainerRef.current.scrollTop = topPosition - this.videosScrollContainerRef.current.offsetTop;
         } else {
-            this.setState({ episodeInfo: '' });
+            this.setState({ videoId: '' });
         }
     }
 
@@ -54,24 +54,31 @@ class Calendar extends Component {
         this.setState({ date: new Date(parseInt(event.currentTarget.dataset.date)) });
     }
 
-    showEpisodeInfo = (event) => {
+    showVideoInfo = (event) => {
         event.stopPropagation();
-        this.setState({ episodeInfo: event.currentTarget.dataset.videoName, selectedDate: new Date(event.currentTarget.dataset.videoDate) });
+
+        var selectedVideoDate = this.props.metaItems
+            .map((metaitem) => metaitem.videos
+                .filter((video) => video.id == event.currentTarget.dataset.videoId))
+            .reduce((result, videoDates) => {
+                result = result.concat(videoDates);
+                return result;
+            }, [])[0].released;
+
+        this.setState({ videoId: event.currentTarget.dataset.videoId, selectedDate: new Date(selectedVideoDate) });
     }
 
     changeSelectedDate = (event) => {
         const selectedDate = new Date(event.currentTarget.dataset.day);
 
-        var firstEpisode = this.props.metaItems
+        var videosIds = this.props.metaItems
             .map((metaitem) => metaitem.videos
                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === selectedDate.getDate())
-                .map((video) => video.name))
-            .filter((videos) => videos.length > 0)
-            .join()
-            .split(',')[0];
+                .map((video) => video.id))
+            .filter((videos) => videos.length > 0);
 
-        if (firstEpisode.length > 0) {
-            this.setState({ episodeInfo: firstEpisode, selectedDate });
+        if (videosIds.length > 0) {
+            this.setState({ videoId: videosIds[0][0], selectedDate });
         } else {
             this.setState({ selectedDate });
         }
@@ -101,13 +108,16 @@ class Calendar extends Component {
 
     render() {
         const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
-        var currentDay = 0;
 
         const videosDates = this.props.metaItems
             .map((metaitem) => metaitem.videos
                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
             .filter((videos) => videos.length > 0)
-            .map((videos) => videos.map((video) => video.released.getDate()));
+            .map((videos) => videos.map((video) => video.released.getDate()))
+            .reduce((result, videoDates) => {
+                result = result.concat(videoDates);
+                return result;
+            }, []);
 
         return (
             <div className={styles['calendar-container']}>
@@ -118,65 +128,63 @@ class Calendar extends Component {
                         {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
                     </div>
                     <table className={styles['month-days']}>
-                        <tr className={styles['week-days']}>
-                            {days.map((day) => <td key={day} className={styles['day']}>{day}</td>)}
-                        </tr>
-                        {Array.apply(null, { length: rowsCount }).map((_, row) => (
-                            <tr key={row} className={styles['row']}>
-                                {Array.apply(null, { length: 7 }).map((_, day) => (
-                                    day < padsCount && row === 0
-                                        ?
-                                        <td key={day} />
-                                        :
-                                        currentDay < daysCount
-                                            ?
-                                            ++currentDay &&
-                                            <td key={day}
-                                                className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === currentDay })}
-                                                data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), currentDay)}
-                                                onClick={this.changeSelectedDate}
-                                            >
-                                                <div className={styles['date-container']}>
-                                                    <div className={classnames(styles['date'], { [styles['selected']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === currentDay })}>{currentDay}</div>
-                                                </div>
-                                                <div className={classnames(styles['episodes'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
-                                                    {this.props.metaItems
-                                                        .map((metaitem) => metaitem.videos
-                                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === currentDay)
-                                                            .map((video) =>
-                                                                <div key={video.id}
-                                                                    style={{ backgroundImage: `url('${metaitem.background}')` }}
-                                                                    className={classnames(styles['poster'], { [styles['past']]: video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() })}
-                                                                    data-video-name={video.name}
-                                                                    data-video-date={video.released}
-                                                                    onClick={this.showEpisodeInfo}
-                                                                />
-                                                            )
-                                                        )}
-                                                </div>
-                                            </td>
-                                            :
-                                            null
-                                ))}
+                        <tbody>
+                            <tr className={styles['week-days']}>
+                                {days.map((day) => <td key={day} className={styles['day']}>{day}</td>)}
                             </tr>
-                        ))}
+                            {Array.apply(null, { length: rowsCount }).map((_, row) => (
+                                <tr key={row} className={styles['row']}>
+                                    {Array.apply(null, { length: 7 }).map((_, day) => (
+                                        day < padsCount && row === 0
+                                            ?
+                                            <td key={day} />
+                                            :
+                                            (row * 7) + (day - padsCount) < daysCount
+                                                ?
+                                                <td key={day}
+                                                    className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === (row * 7) + (day - padsCount + 1) })}
+                                                    data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1))}
+                                                    onClick={this.changeSelectedDate}
+                                                >
+                                                    <div className={styles['date-container']}>
+                                                        <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
+                                                    </div>
+                                                    <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
+                                                        {this.props.metaItems
+                                                            .map((metaitem) => metaitem.videos
+                                                                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
+                                                                .map((video) =>
+                                                                    <div key={video.id}
+                                                                        style={{ backgroundImage: `url('${metaitem.background}')` }}
+                                                                        className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
+                                                                        data-video-id={video.id}
+                                                                        onClick={this.showVideoInfo}
+                                                                    />
+                                                                )
+                                                            )}
+                                                    </div>
+                                                </td>
+                                                :
+                                                null
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
                     </table>
                 </div>
-                <div ref={this.futureEpisodesRef} className={styles['future-episodes']}>
+                <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
                     {
                         videosDates.length > 0
                             ?
                             videosDates
-                                .join()
-                                .split(',')
                                 .filter((date, index, dates) => dates.indexOf(date) === index)
                                 .sort(function(a, b) {
                                     return a - b;
                                 })
                                 .map((videoDate) =>
                                     <div key={videoDate}
-                                        ref={parseInt(videoDate) === this.state.selectedDate.getDate() ? this.dateRef : null}
-                                        className={classnames(styles['episode-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })}
+                                        ref={videoDate === this.state.selectedDate.getDate() ? this.videosContainerRef : null}
+                                        className={classnames(styles['videos-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })}
                                         data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), parseInt(videoDate))}
                                         onClick={this.changeSelectedDate}
                                     >
@@ -187,23 +195,22 @@ class Calendar extends Component {
                                             .map((metaitem) => metaitem.videos
                                                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
                                                 .map((video) =>
-                                                    <div key={video.name}
-                                                        className={classnames(styles['episode'], { [styles['selected']]: this.state.episodeInfo === video.name }, { [styles['today']]: video.released.getFullYear() === new Date().getFullYear() && video.released.getMonth() === new Date().getMonth() && parseInt(videoDate) === new Date().getDate() && this.state.episodeInfo !== video.name })}
-                                                        data-video-name={video.name}
-                                                        data-video-date={video.released}
-                                                        onClick={this.showEpisodeInfo}
+                                                    <div key={video.id}
+                                                        className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: video.released.getFullYear() === new Date().getFullYear() && video.released.getMonth() === new Date().getMonth() && parseInt(videoDate) === new Date().getDate() && this.state.videoId !== video.id })}
+                                                        data-video-id={video.id}
+                                                        onClick={this.showVideoInfo}
                                                     >
                                                         <div className={styles['main-info']}>
-                                                            <div className={styles['serie-name']}>
+                                                            <div className={styles['meta-item-name']}>
                                                                 {metaitem.name}
                                                             </div>
-                                                            <div className={styles['episode-number']}>
+                                                            <div className={styles['video-number']}>
                                                                 S{video.season} E{video.episode}
                                                             </div>
                                                         </div>
                                                         <div className={styles['name']}>
-                                                            "{video.name}"
-                                                            </div>
+                                                            {video.name}
+                                                        </div>
                                                         <div className={styles['description']}>
                                                             {video.description}
                                                         </div>
@@ -228,8 +235,7 @@ class Calendar extends Component {
 }
 
 Calendar.propTypes = {
-    metaItems: PropTypes.arrayOf(PropTypes.object).isRequired,
-    toggleLibraryButton: PropTypes.func
+    metaItems: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 Calendar.defaultProps = {
     metaItems: [
@@ -252,11 +258,11 @@ Calendar.defaultProps = {
             released: new Date(2018, 4, 23),
             name: 'The Walking Dead',
             videos: [
-                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 7), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 12), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 19), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '6', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 7), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '7', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 12), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '8', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 19), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '9', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '10', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
             ]
         },
         {
@@ -265,11 +271,11 @@ Calendar.defaultProps = {
             released: new Date(2018, 4, 23),
             name: 'Game of Thrones',
             videos: [
-                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '11', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '12', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '13', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '14', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '15', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
             ]
         },
         {
@@ -278,11 +284,11 @@ Calendar.defaultProps = {
             released: new Date(2018, 4, 23),
             name: 'Lost',
             videos: [
-                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 17), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '16', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '17', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '18', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 17), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '19', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '20', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 }
             ]
         },
         {
@@ -291,11 +297,11 @@ Calendar.defaultProps = {
             released: new Date(2018, 4, 23),
             name: 'Heroes',
             videos: [
-                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 10), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 8), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '21', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 3), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '22', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 10), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '23', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '24', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 8), isUpcoming: true, isWatched: true, season: 5 },
+                { id: '25', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
             ]
         }
     ]
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index de69b03d5..4131f3044 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -1,7 +1,7 @@
 .calendar-container {
     --spacing: 16px;
     --episodes-height: 50px;
-    --future-episodes-width: 270px;
+    --videos-scroll-container-width: 270px;
     font-size: 14px;
 }
 
@@ -21,6 +21,7 @@
             text-align: center;
 
             .month {
+                padding: 2px;
                 width: 12%;
                 display: inline-block;
                 font-size: 1.7em;
@@ -29,6 +30,7 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 vertical-align: middle;
+                border: 1px solid transparent;
                 color: var(--color-surfacelighter);
                 cursor: pointer;
 
@@ -85,7 +87,7 @@
                             font-size: 1.4em;
                             color: var(--color-secondarylighter);
 
-                            &.selected {
+                            &.today {
                                 border-radius: 50%;
                                 color: var(--color-surfacelighter);
                                 background-color: var(--color-primary);
@@ -93,7 +95,7 @@
                         }
                     }
 
-                    .episodes {
+                    .videos {
                         margin: var(--focusable-border-size);
                         height: var(--episodes-height);
                         display: flex;
@@ -135,14 +137,14 @@
         }
     }
 
-    .future-episodes {
+    .videos-scroll-container {
         padding-right: calc(var(--spacing) * 0.5);
-        width: var(--future-episodes-width);
+        width: var(--videos-scroll-container-width);
         overflow-y: auto;
         overflow-x: hidden;
         scroll-behavior: smooth;
 
-        .episode-container {
+        .videos-container {
             margin-bottom: calc(var(--spacing) * 0.5);
             border: var(--focusable-border-size) solid var(--color-background);
             background-color: var(--color-backgroundlighter);
@@ -151,9 +153,10 @@
                 padding: var(--spacing);
                 font-size: 1.2em;
                 color: var(--color-primarylight);
+                cursor: pointer;
             }
 
-            .episode {
+            .video {
                 padding: var(--spacing);
                 cursor: pointer;
 
@@ -162,7 +165,7 @@
                     flex-direction: row;
                     justify-content: space-between;
 
-                    .serie-name {
+                    .meta-item-name {
                         margin-right: 5%;
                         width: 75%;
                         white-space: nowrap;
@@ -171,7 +174,7 @@
                         color: var(--color-surface);
                     }
 
-                    .episode-number {
+                    .video-number {
                         width: 20%;
                         white-space: nowrap;
                         overflow: hidden;

From 7da5745078f61464ee2807ba98631470be811346 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 15 Mar 2019 12:11:59 +0200
Subject: [PATCH 25/49] second date from state removed

---
 src/routes/Calendar/Calendar.js | 66 ++++++++++++++-------------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 32e82a344..0c25f28a7 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -16,8 +16,7 @@ class Calendar extends Component {
 
         this.state = {
             date: new Date(),
-            videoId: '',
-            selectedDate: new Date()
+            videoId: ''
         };
     }
 
@@ -27,18 +26,13 @@ class Calendar extends Component {
 
     shouldComponentUpdate(nextProps, nextState) {
         return nextState.date !== this.state.date ||
-            nextState.videoId !== this.state.videoId ||
-            nextState.selectedDate !== this.state.selectedDate;
+            nextState.videoId !== this.state.videoId;
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (prevState.selectedDate !== this.state.selectedDate) {
+        if (prevState.date !== this.state.date) {
             this.scrollToSelectedVideo();
         }
-
-        if (prevState.date.getMonth() !== this.state.date.getMonth()) {
-            this.setState({ selectedDate: new Date(this.state.date.getFullYear(), this.state.date.getMonth(), 1) });
-        }
     }
 
     scrollToSelectedVideo = () => {
@@ -51,7 +45,19 @@ class Calendar extends Component {
     }
 
     changeDate = (event) => {
-        this.setState({ date: new Date(parseInt(event.currentTarget.dataset.date)) });
+        const date = new Date(parseInt(event.currentTarget.dataset.date));
+
+        var videosIds = this.props.metaItems
+            .map((metaitem) => metaitem.videos
+                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === date.getDate())
+                .map((video) => video.id))
+            .filter((videos) => videos.length > 0);
+
+        if (videosIds.length > 0) {
+            this.setState({ date, videoId: videosIds[0][0] });
+        } else {
+            this.setState({ date });
+        }
     }
 
     showVideoInfo = (event) => {
@@ -65,23 +71,7 @@ class Calendar extends Component {
                 return result;
             }, [])[0].released;
 
-        this.setState({ videoId: event.currentTarget.dataset.videoId, selectedDate: new Date(selectedVideoDate) });
-    }
-
-    changeSelectedDate = (event) => {
-        const selectedDate = new Date(event.currentTarget.dataset.day);
-
-        var videosIds = this.props.metaItems
-            .map((metaitem) => metaitem.videos
-                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === selectedDate.getDate())
-                .map((video) => video.id))
-            .filter((videos) => videos.length > 0);
-
-        if (videosIds.length > 0) {
-            this.setState({ videoId: videosIds[0][0], selectedDate });
-        } else {
-            this.setState({ selectedDate });
-        }
+        this.setState({ videoId: event.currentTarget.dataset.videoId, date: new Date(selectedVideoDate) });
     }
 
     getMonthInfo = (date) => {
@@ -123,9 +113,9 @@ class Calendar extends Component {
             <div className={styles['calendar-container']}>
                 <div className={styles['calendar']}>
                     <div className={styles['months']}>
-                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1)))}
-                        {this.renderMonthButton(new Date(this.state.date))}
-                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
+                        {this.renderMonthButton(new Date(new Date(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1))).setDate(1)))}
+                        {this.renderMonthButton(new Date(new Date(new Date(this.state.date)).setDate(1)))}
+                        {this.renderMonthButton(new Date(new Date(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1))).setDate(1)))}
                     </div>
                     <table className={styles['month-days']}>
                         <tbody>
@@ -142,12 +132,12 @@ class Calendar extends Component {
                                             (row * 7) + (day - padsCount) < daysCount
                                                 ?
                                                 <td key={day}
-                                                    className={classnames(styles['day'], { [styles['selected']]: this.state.selectedDate.getDate() === (row * 7) + (day - padsCount + 1) })}
-                                                    data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1))}
-                                                    onClick={this.changeSelectedDate}
+                                                    className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
+                                                    data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
+                                                    onClick={this.changeDate}
                                                 >
                                                     <div className={styles['date-container']}>
-                                                        <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
+                                                        <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
                                                     </div>
                                                     <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
                                                         {this.props.metaItems
@@ -183,10 +173,10 @@ class Calendar extends Component {
                                 })
                                 .map((videoDate) =>
                                     <div key={videoDate}
-                                        ref={videoDate === this.state.selectedDate.getDate() ? this.videosContainerRef : null}
-                                        className={classnames(styles['videos-container'], { [styles['selected']]: parseInt(videoDate) === this.state.selectedDate.getDate() })}
-                                        data-day={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), parseInt(videoDate))}
-                                        onClick={this.changeSelectedDate}
+                                        ref={videoDate === this.state.date.getDate() ? this.videosContainerRef : null}
+                                        className={classnames(styles['videos-container'], { [styles['selected']]: parseInt(videoDate) === this.state.date.getDate() })}
+                                        data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), parseInt(videoDate)).getTime()}
+                                        onClick={this.changeDate}
                                     >
                                         <div className={styles['date']}>
                                             {months[this.state.date.getMonth()].slice(0, 3)} {videoDate}

From 35038779454f4f7f497cd562303ba77462c421de Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 15 Mar 2019 15:33:54 +0200
Subject: [PATCH 26/49] Calendar proptypes updated

---
 src/routes/Calendar/Calendar.js | 85 +++++++++++++++++----------------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 0c25f28a7..99e78490c 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -145,7 +145,7 @@ class Calendar extends Component {
                                                                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
                                                                 .map((video) =>
                                                                     <div key={video.id}
-                                                                        style={{ backgroundImage: `url('${metaitem.background}')` }}
+                                                                        style={{ backgroundImage: `url('${metaitem.poster}')` }}
                                                                         className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
                                                                         data-video-id={video.id}
                                                                         onClick={this.showVideoInfo}
@@ -225,73 +225,74 @@ class Calendar extends Component {
 }
 
 Calendar.propTypes = {
-    metaItems: PropTypes.arrayOf(PropTypes.object).isRequired
+    metaItems: PropTypes.arrayOf(PropTypes.shape({
+        poster: PropTypes.string,
+        name: PropTypes.string.isRequired,
+        videos: PropTypes.arrayOf(PropTypes.shape({
+            id: PropTypes.string.isRequired,
+            name: PropTypes.string.isRequired,
+            description: PropTypes.string,
+            released: PropTypes.PropTypes.instanceOf(Date),
+            season: PropTypes.number,
+            episode: PropTypes.number
+        }))
+    }))
 };
 Calendar.defaultProps = {
     metaItems: [
         {
-            background: 'https://images.metahub.space/poster/medium/tt2306299/img',
-            releaseInfo: '2018',
-            released: new Date(2018, 4, 23),
+            poster: 'https://images.metahub.space/poster/medium/tt2306299/img',
             name: 'Vikings',
             videos: [
-                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 1), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '2', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 2), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '3', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '4', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '5', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 5), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '1', episode: 16, name: 'Homeland', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 1), season: 5 },
+                { id: '2', episode: 17, name: 'The Buddha', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 2), season: 5 },
+                { id: '3', episode: 18, name: 'Boneless', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 3), season: 5 },
+                { id: '4', episode: 19, name: 'Revenge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), season: 5 },
+                { id: '5', episode: 20, name: 'Ragnarok', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 5), season: 5 }
             ]
         },
         {
-            background: 'https://images.metahub.space/poster/medium/tt1520211/img',
-            releaseInfo: '2018',
-            released: new Date(2018, 4, 23),
+            poster: 'https://images.metahub.space/poster/medium/tt1520211/img',
             name: 'The Walking Dead',
             videos: [
-                { id: '6', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 7), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '7', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 12), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '8', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 19), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '9', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '10', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '6', episode: 16, name: 'Sing me a song', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 7), season: 5 },
+                { id: '7', episode: 17, name: 'Say yes', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 12), season: 5 },
+                { id: '8', episode: 18, name: 'Bury me here', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 19), season: 5 },
+                { id: '9', episode: 19, name: 'Honor', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), season: 5 },
+                { id: '10', episode: 20, name: 'The Bridge', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), season: 5 }
             ]
         },
         {
-            background: 'https://images.metahub.space/poster/medium/tt0944947/img',
-            releaseInfo: '2018',
-            released: new Date(2018, 4, 23),
+            poster: 'https://images.metahub.space/poster/medium/tt0944947/img',
             name: 'Game of Thrones',
             videos: [
-                { id: '11', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '12', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '13', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '14', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '15', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '11', episode: 16, name: 'The North Remembers', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), season: 5 },
+                { id: '12', episode: 17, name: 'Garden of Bones', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), season: 5 },
+                { id: '13', episode: 18, name: 'Dragonstone', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), season: 5 },
+                { id: '14', episode: 19, name: 'Stormborn', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), season: 5 },
+                { id: '15', episode: 20, name: 'Eastwatch', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), season: 5 }
             ]
         },
         {
-            background: 'https://images.metahub.space/poster/medium/tt0411008/img',
-            releaseInfo: '2018',
-            released: new Date(2018, 4, 23),
+            poster: 'https://images.metahub.space/poster/medium/tt0411008/img',
             name: 'Lost',
             videos: [
-                { id: '16', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '17', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '18', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 17), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '19', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '20', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '16', episode: 16, name: 'The Lie', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 4), season: 5 },
+                { id: '17', episode: 17, name: '316', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), season: 5 },
+                { id: '18', episode: 18, name: 'Dead Is Dead', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 17), season: 5 },
+                { id: '19', episode: 19, name: 'Racon', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 4, 3), season: 5 },
+                { id: '20', episode: 20, name: 'Sundown', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 2, 10), season: 5 }
             ]
         },
         {
-            background: 'https://images.metahub.space/poster/medium/tt0813715/img',
-            releaseInfo: '2018',
-            released: new Date(2018, 4, 23),
+            poster: 'https://images.metahub.space/poster/medium/tt0813715/img',
             name: 'Heroes',
             videos: [
-                { id: '21', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 3), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '22', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 10), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '23', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '24', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 8), isUpcoming: true, isWatched: true, season: 5 },
-                { id: '25', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), isUpcoming: true, isWatched: true, season: 5 }
+                { id: '21', episode: 16, name: 'Genesis', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 3), season: 5 },
+                { id: '22', episode: 17, name: 'Six Months Ago', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 10), season: 5 },
+                { id: '23', episode: 18, name: 'Fallout', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 17), season: 5 },
+                { id: '24', episode: 19, name: 'Parasite', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 3, 8), season: 5 },
+                { id: '25', episode: 20, name: 'The Wall', description: 'Bjorn achieves one of Ragnars dreams. Back in Kattegat, Ivar hatches a new plan while preparing for a divine arrival. In Iceland, a settler returns in a terrible state. King Alfred faces his greatest threat yet.', released: new Date(2019, 5, 10), season: 5 }
             ]
         }
     ]

From 6ed66f70c3941db0b909b4869f928d2c3542691b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 18 Mar 2019 11:23:13 +0200
Subject: [PATCH 27/49] Input imported; focus implemented

---
 src/routes/Calendar/Calendar.js | 98 +++++++++++++++++----------------
 src/routes/Calendar/styles.less | 48 ++++++++++++++--
 2 files changed, 93 insertions(+), 53 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 99e78490c..8f598b641 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Input } from 'stremio-common';
 import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
@@ -92,7 +93,10 @@ class Calendar extends Component {
 
     renderMonthButton(date) {
         return (
-            <div className={styles['month']} data-date={date.getTime()} onClick={this.changeDate}>{months[date.getMonth()]}</div>
+            date.getMonth() === this.state.date.getMonth() ?
+                <div className={styles['month']} data-date={date.getTime()}>{months[date.getMonth()]}</div>
+                :
+                <Input className={styles['month']} type={'button'} data-date={date.getTime()} onClick={this.changeDate}>{months[date.getMonth()]}</Input>
         );
     }
 
@@ -117,50 +121,49 @@ class Calendar extends Component {
                         {this.renderMonthButton(new Date(new Date(new Date(this.state.date)).setDate(1)))}
                         {this.renderMonthButton(new Date(new Date(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1))).setDate(1)))}
                     </div>
-                    <table className={styles['month-days']}>
-                        <tbody>
-                            <tr className={styles['week-days']}>
-                                {days.map((day) => <td key={day} className={styles['day']}>{day}</td>)}
-                            </tr>
-                            {Array.apply(null, { length: rowsCount }).map((_, row) => (
-                                <tr key={row} className={styles['row']}>
-                                    {Array.apply(null, { length: 7 }).map((_, day) => (
-                                        day < padsCount && row === 0
+                    <div className={styles['month-days']}>
+                        <div className={styles['week-days']}>
+                            {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
+                        </div>
+                        {Array.apply(null, { length: rowsCount }).map((_, row) => (
+                            <div key={row} className={styles['row']}>
+                                {Array.apply(null, { length: 7 }).map((_, day) => (
+                                    day < padsCount && row === 0
+                                        ?
+                                        <div key={day} className={styles['pad']} />
+                                        :
+                                        (row * 7) + (day - padsCount) < daysCount
                                             ?
-                                            <td key={day} />
+                                            <Input key={day}
+                                                className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
+                                                type={'button'}
+                                                data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
+                                                onClick={this.changeDate}
+                                            >
+                                                <div className={styles['date-container']}>
+                                                    <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
+                                                </div>
+                                                <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
+                                                    {this.props.metaItems
+                                                        .map((metaitem) => metaitem.videos
+                                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
+                                                            .map((video) =>
+                                                                <div key={video.id}
+                                                                    style={{ backgroundImage: `url('${metaitem.poster}')` }}
+                                                                    className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
+                                                                    data-video-id={video.id}
+                                                                    onClick={this.showVideoInfo}
+                                                                />
+                                                            )
+                                                        )}
+                                                </div>
+                                            </Input>
                                             :
-                                            (row * 7) + (day - padsCount) < daysCount
-                                                ?
-                                                <td key={day}
-                                                    className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
-                                                    data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
-                                                    onClick={this.changeDate}
-                                                >
-                                                    <div className={styles['date-container']}>
-                                                        <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
-                                                    </div>
-                                                    <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
-                                                        {this.props.metaItems
-                                                            .map((metaitem) => metaitem.videos
-                                                                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
-                                                                .map((video) =>
-                                                                    <div key={video.id}
-                                                                        style={{ backgroundImage: `url('${metaitem.poster}')` }}
-                                                                        className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
-                                                                        data-video-id={video.id}
-                                                                        onClick={this.showVideoInfo}
-                                                                    />
-                                                                )
-                                                            )}
-                                                    </div>
-                                                </td>
-                                                :
-                                                null
-                                    ))}
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                                            null
+                                ))}
+                            </div>
+                        ))}
+                    </div>
                 </div>
                 <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
                     {
@@ -185,8 +188,9 @@ class Calendar extends Component {
                                             .map((metaitem) => metaitem.videos
                                                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
                                                 .map((video) =>
-                                                    <div key={video.id}
+                                                    <Input key={video.id}
                                                         className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: video.released.getFullYear() === new Date().getFullYear() && video.released.getMonth() === new Date().getMonth() && parseInt(videoDate) === new Date().getDate() && this.state.videoId !== video.id })}
+                                                        type={'button'}
                                                         data-video-id={video.id}
                                                         onClick={this.showVideoInfo}
                                                     >
@@ -204,13 +208,13 @@ class Calendar extends Component {
                                                         <div className={styles['description']}>
                                                             {video.description}
                                                         </div>
-                                                        <a className={styles['watch-button-container']} href={video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() ? '#/player' : '#/detail'}>
+                                                        <Input className={styles['watch-button-container']} type={'link'} href={video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() ? '#/player' : '#/detail'}>
                                                             <div className={styles['watch-button']}>
                                                                 <Icon className={styles['icon']} icon={'ic_play'} />
                                                                 <div className={styles['label']}>{video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() ? 'WATCH NOW' : 'SHOW'}</div>
                                                             </div>
-                                                        </a>
-                                                    </div>
+                                                        </Input>
+                                                    </Input>
                                                 )
                                             )}
                                     </div>
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index 4131f3044..88c15179c 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -21,7 +21,7 @@
             text-align: center;
 
             .month {
-                padding: 2px;
+                padding: var(--focusable-border-size);
                 width: 12%;
                 display: inline-block;
                 font-size: 1.7em;
@@ -30,9 +30,13 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 vertical-align: middle;
-                border: 1px solid transparent;
+                border: calc(var(--focusable-border-size) * 0.5) solid transparent;
                 color: var(--color-surfacelighter);
                 cursor: pointer;
+                
+                &:focus {
+                    border-color: var(--color-surfacelighter);
+                }
 
                 &:first-child, &:last-child {
                     font-size: 1.4em;
@@ -52,11 +56,16 @@
         .month-days {
             width: 100%;
             height: 92%;
+            display: table;
             table-layout: fixed;
+            border-spacing: var(--focusable-border-size);
 
             .week-days {
+                display: table-row;
+
                 .day {
                     padding: 0 calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.5) 0;
+                    display: table-cell;
                     font-size: 1.2em;
                     line-height: 1.2em;
                     text-align: left;
@@ -68,7 +77,14 @@
             }
 
             .row {
+                display: table-row;
+
+                .pad {
+                    display: table-cell;
+                }
+
                 .day {
+                    display: table-cell;
                     border: var(--focusable-border-size) solid transparent;
                     background-color: var(--color-backgroundlighter);
                     cursor: pointer;
@@ -128,9 +144,17 @@
                         }
                     }
 
+                    &:focus {
+                        border-color: var(--color-surfacelighter);
+                    }
+
                     &.selected {
                         border-color: var(--color-primary);
                         background-color: var(--color-backgroundlighter60);
+
+                        &:focus {
+                            border-color: var(--color-surfacelighter);
+                        }
                     }
                 }
             }
@@ -158,6 +182,7 @@
 
             .video {
                 padding: var(--spacing);
+                border: calc(var(--focusable-border-size) * 0.5) solid transparent;
                 cursor: pointer;
 
                 .main-info {
@@ -168,6 +193,7 @@
                     .meta-item-name {
                         margin-right: 5%;
                         width: 75%;
+                        line-height: 1.2em;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
@@ -175,7 +201,8 @@
                     }
 
                     .video-number {
-                        width: 20%;
+                        width: 22%;
+                        line-height: 1.2em;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
@@ -186,7 +213,7 @@
                 .name {
                     width: 100%;
                     display: none;
-                    padding: calc(var(--spacing) * 0.5) 0 var(--spacing) 0;
+                    padding: calc(var(--spacing) * 0.5) 0;
                     overflow-wrap: break-word;
                     color: var(--color-surfacelighter);
                 }
@@ -195,14 +222,15 @@
                     display: none;
                     padding: var(--spacing) 0;
                     line-height: 1.2em;
+                    border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-background);
                     color: var(--color-surfacelighter);
                 }
 
                 .watch-button-container {
                     display: none;
-                    margin: 0 calc(var(--spacing) * 0.5);
+                    margin: calc(var(--spacing) * 0.5);
                     padding: var(--spacing);
-                    border-top: calc(var(--focusable-border-size) * 0.5) solid var(--color-background);
+                    border: calc(var(--focusable-border-size) * 0.5) solid transparent;
                     cursor: pointer;
 
                     .watch-button {
@@ -225,6 +253,10 @@
                         }
                     }
 
+                    &:focus {
+                        border: calc(var(--focusable-border-size) * 0.5) solid var(--color-surfacelighter);
+                    }
+
                     &:hover {
                         .watch-button {
                             .icon {
@@ -278,6 +310,10 @@
                     background-color: var(--color-primarydarker40);
                 }
 
+                &:focus {
+                    border-color: var(--color-surfacelighter);
+                }
+
                 &:hover {
                     background-color: var(--color-primarydark60);
                 }

From 4639d15e800701443013f4c3540986d85a33a58f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 18 Mar 2019 19:05:01 +0200
Subject: [PATCH 28/49] 'for' loop instead of Array.apply; new Date
 optimization

---
 src/routes/Calendar/Calendar.js | 106 +++++++++++++++++++-------------
 1 file changed, 63 insertions(+), 43 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 8f598b641..2e780cead 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -91,10 +91,12 @@ class Calendar extends Component {
         };
     }
 
-    renderMonthButton(date) {
+    renderMonthButton(month) {
+        const date = new Date(new Date(month).setDate(1));
+
         return (
             date.getMonth() === this.state.date.getMonth() ?
-                <div className={styles['month']} data-date={date.getTime()}>{months[date.getMonth()]}</div>
+                <div className={styles['month']}>{months[date.getMonth()]}</div>
                 :
                 <Input className={styles['month']} type={'button'} data-date={date.getTime()} onClick={this.changeDate}>{months[date.getMonth()]}</Input>
         );
@@ -117,52 +119,70 @@ class Calendar extends Component {
             <div className={styles['calendar-container']}>
                 <div className={styles['calendar']}>
                     <div className={styles['months']}>
-                        {this.renderMonthButton(new Date(new Date(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1))).setDate(1)))}
-                        {this.renderMonthButton(new Date(new Date(new Date(this.state.date)).setDate(1)))}
-                        {this.renderMonthButton(new Date(new Date(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1))).setDate(1)))}
+                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1)))}
+                        {this.renderMonthButton(this.state.date)}
+                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
                     </div>
                     <div className={styles['month-days']}>
                         <div className={styles['week-days']}>
                             {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
                         </div>
-                        {Array.apply(null, { length: rowsCount }).map((_, row) => (
-                            <div key={row} className={styles['row']}>
-                                {Array.apply(null, { length: 7 }).map((_, day) => (
-                                    day < padsCount && row === 0
-                                        ?
-                                        <div key={day} className={styles['pad']} />
-                                        :
-                                        (row * 7) + (day - padsCount) < daysCount
-                                            ?
-                                            <Input key={day}
-                                                className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
-                                                type={'button'}
-                                                data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
-                                                onClick={this.changeDate}
-                                            >
-                                                <div className={styles['date-container']}>
-                                                    <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
-                                                </div>
-                                                <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
-                                                    {this.props.metaItems
-                                                        .map((metaitem) => metaitem.videos
-                                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
-                                                            .map((video) =>
-                                                                <div key={video.id}
-                                                                    style={{ backgroundImage: `url('${metaitem.poster}')` }}
-                                                                    className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
-                                                                    data-video-id={video.id}
-                                                                    onClick={this.showVideoInfo}
-                                                                />
-                                                            )
-                                                        )}
-                                                </div>
-                                            </Input>
-                                            :
-                                            null
-                                ))}
-                            </div>
-                        ))}
+                        {
+                            (() => {
+                                var rows = [];
+
+                                for (let row = 0; row < rowsCount; row++) {
+                                    rows.push(
+                                        <div key={row} className={styles['row']}>
+                                            {
+                                                (() => {
+                                                    var days = [];
+
+                                                    for (let day = 0; day < 7; day++) {
+                                                        days.push(
+                                                            day < padsCount && row === 0
+                                                                ?
+                                                                <div key={day} className={styles['pad']} />
+                                                                :
+                                                                (row * 7) + (day - padsCount) < daysCount
+                                                                    ?
+                                                                    <Input key={day}
+                                                                        className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
+                                                                        type={'button'}
+                                                                        data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
+                                                                        onClick={this.changeDate}
+                                                                    >
+                                                                        <div className={styles['date-container']}>
+                                                                            <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
+                                                                        </div>
+                                                                        <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
+                                                                            {this.props.metaItems
+                                                                                .map((metaitem) => metaitem.videos
+                                                                                    .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
+                                                                                    .map((video) =>
+                                                                                        <div key={video.id}
+                                                                                            style={{ backgroundImage: `url('${metaitem.poster}')` }}
+                                                                                            className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
+                                                                                            data-video-id={video.id}
+                                                                                            onClick={this.showVideoInfo}
+                                                                                        />
+                                                                                    )
+                                                                                )}
+                                                                        </div>
+                                                                    </Input>
+                                                                    :
+                                                                    null
+                                                        )
+                                                    }
+                                                    return days;
+                                                })()
+                                            }
+                                        </div>
+                                    )
+                                }
+                                return rows;
+                            })()
+                        }
                     </div>
                 </div>
                 <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>

From c1b8a7a46992b1995bcd34a04fa5ceb8bae3ec22 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 19 Mar 2019 11:15:26 +0200
Subject: [PATCH 29/49] separate functions for month rows and days

---
 src/routes/Calendar/Calendar.js | 121 ++++++++++++++++----------------
 1 file changed, 59 insertions(+), 62 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 2e780cead..ab9a8bf57 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -91,9 +91,7 @@ class Calendar extends Component {
         };
     }
 
-    renderMonthButton(month) {
-        const date = new Date(new Date(month).setDate(1));
-
+    renderMonthButton(date) {
         return (
             date.getMonth() === this.state.date.getMonth() ?
                 <div className={styles['month']}>{months[date.getMonth()]}</div>
@@ -102,9 +100,63 @@ class Calendar extends Component {
         );
     }
 
-    render() {
+    renderMonthRows = () => {
         const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
+        var rows = [];
 
+        for (let row = 0; row < rowsCount; row++) {
+            rows.push(
+                <div key={row} className={styles['row']}>
+                    {this.renderMonthDays(row, rowsCount, padsCount, daysCount)}
+                </div>
+            )
+        }
+        return rows;
+    }
+
+    renderMonthDays = (row, rowsCount, padsCount, daysCount) => {
+        var days = [];
+
+        for (let day = 0; day < 7; day++) {
+            days.push(
+                day < padsCount && row === 0
+                    ?
+                    <div key={day} className={styles['pad']} />
+                    :
+                    (row * 7) + (day - padsCount) < daysCount
+                        ?
+                        <Input key={day}
+                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
+                            type={'button'}
+                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
+                            onClick={this.changeDate}
+                        >
+                            <div className={styles['date-container']}>
+                                <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
+                            </div>
+                            <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
+                                {this.props.metaItems
+                                    .map((metaitem) => metaitem.videos
+                                        .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
+                                        .map((video) =>
+                                            <div key={video.id}
+                                                style={{ backgroundImage: `url('${metaitem.poster}')` }}
+                                                className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
+                                                data-video-id={video.id}
+                                                onClick={this.showVideoInfo}
+                                            />
+                                        )
+                                    )}
+                            </div>
+                        </Input>
+                        :
+                        null
+            )
+        }
+        return days;
+    }
+
+    render() {
         const videosDates = this.props.metaItems
             .map((metaitem) => metaitem.videos
                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
@@ -119,70 +171,15 @@ class Calendar extends Component {
             <div className={styles['calendar-container']}>
                 <div className={styles['calendar']}>
                     <div className={styles['months']}>
-                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1)))}
+                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() - 1), 1)}
                         {this.renderMonthButton(this.state.date)}
-                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
+                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1), 1)}
                     </div>
                     <div className={styles['month-days']}>
                         <div className={styles['week-days']}>
                             {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
                         </div>
-                        {
-                            (() => {
-                                var rows = [];
-
-                                for (let row = 0; row < rowsCount; row++) {
-                                    rows.push(
-                                        <div key={row} className={styles['row']}>
-                                            {
-                                                (() => {
-                                                    var days = [];
-
-                                                    for (let day = 0; day < 7; day++) {
-                                                        days.push(
-                                                            day < padsCount && row === 0
-                                                                ?
-                                                                <div key={day} className={styles['pad']} />
-                                                                :
-                                                                (row * 7) + (day - padsCount) < daysCount
-                                                                    ?
-                                                                    <Input key={day}
-                                                                        className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
-                                                                        type={'button'}
-                                                                        data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
-                                                                        onClick={this.changeDate}
-                                                                    >
-                                                                        <div className={styles['date-container']}>
-                                                                            <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
-                                                                        </div>
-                                                                        <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
-                                                                            {this.props.metaItems
-                                                                                .map((metaitem) => metaitem.videos
-                                                                                    .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
-                                                                                    .map((video) =>
-                                                                                        <div key={video.id}
-                                                                                            style={{ backgroundImage: `url('${metaitem.poster}')` }}
-                                                                                            className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
-                                                                                            data-video-id={video.id}
-                                                                                            onClick={this.showVideoInfo}
-                                                                                        />
-                                                                                    )
-                                                                                )}
-                                                                        </div>
-                                                                    </Input>
-                                                                    :
-                                                                    null
-                                                        )
-                                                    }
-                                                    return days;
-                                                })()
-                                            }
-                                        </div>
-                                    )
-                                }
-                                return rows;
-                            })()
-                        }
+                        {this.renderMonthRows()}
                     </div>
                 </div>
                 <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>

From e713533b9d36f2d5df28aed788ce6d85f30d772d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 19 Mar 2019 14:45:47 +0200
Subject: [PATCH 30/49] rows renamed to weeks; date constructor optimized

---
 src/routes/Calendar/Calendar.js | 50 ++++++++++++++++-----------------
 src/routes/Calendar/styles.less |  2 +-
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index ab9a8bf57..7bc574867 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -82,12 +82,12 @@ class Calendar extends Component {
         monthDate.setMonth(monthDate.getMonth() + 1);
         monthDate.setDate(0);
         var daysCount = monthDate.getDate();
-        var rowsCount = Math.ceil((padsCount + daysCount) / 7);
+        var weeksCount = Math.ceil((padsCount + daysCount) / 7);
 
         return {
             padsCount,
             daysCount,
-            rowsCount
+            weeksCount
         };
     }
 
@@ -100,44 +100,44 @@ class Calendar extends Component {
         );
     }
 
-    renderMonthRows = () => {
-        const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
-        var rows = [];
+    renderMonthWeeks = () => {
+        const { padsCount, daysCount, weeksCount } = this.getMonthInfo(this.state.date);
+        var weeks = [];
 
-        for (let row = 0; row < rowsCount; row++) {
-            rows.push(
-                <div key={row} className={styles['row']}>
-                    {this.renderMonthDays(row, rowsCount, padsCount, daysCount)}
+        for (let week = 0; week < weeksCount; week++) {
+            weeks.push(
+                <div key={week} className={styles['week']}>
+                    {this.renderMonthDays(week, weeksCount, padsCount, daysCount)}
                 </div>
             )
         }
-        return rows;
+        return weeks;
     }
 
-    renderMonthDays = (row, rowsCount, padsCount, daysCount) => {
+    renderMonthDays = (week, weeksCount, padsCount, daysCount) => {
         var days = [];
 
         for (let day = 0; day < 7; day++) {
             days.push(
-                day < padsCount && row === 0
+                day < padsCount && week === 0
                     ?
                     <div key={day} className={styles['pad']} />
                     :
-                    (row * 7) + (day - padsCount) < daysCount
+                    (week * 7) + (day - padsCount) < daysCount
                         ?
                         <Input key={day}
-                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
+                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (week * 7) + (day - padsCount + 1) })}
                             type={'button'}
-                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
+                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (week * 7) + (day - padsCount + 1)).getTime()}
                             onClick={this.changeDate}
                         >
                             <div className={styles['date-container']}>
-                                <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
+                                <div className={classnames(styles['date'], { [styles['today']]: new Date().toDateString() === new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (week * 7) + day - padsCount + 1).toDateString() })}>{(week * 7) + (day - padsCount + 1)}</div>
                             </div>
-                            <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
+                            <div className={classnames(styles['videos'], { [styles['small']]: weeksCount === 6 }, { [styles['big']]: weeksCount === 4 })}>
                                 {this.props.metaItems
                                     .map((metaitem) => metaitem.videos
-                                        .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
+                                        .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (week * 7) + (day - padsCount + 1))
                                         .map((video) =>
                                             <div key={video.id}
                                                 style={{ backgroundImage: `url('${metaitem.poster}')` }}
@@ -179,7 +179,7 @@ class Calendar extends Component {
                         <div className={styles['week-days']}>
                             {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
                         </div>
-                        {this.renderMonthRows()}
+                        {this.renderMonthWeeks()}
                     </div>
                 </div>
                 <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
@@ -194,8 +194,8 @@ class Calendar extends Component {
                                 .map((videoDate) =>
                                     <div key={videoDate}
                                         ref={videoDate === this.state.date.getDate() ? this.videosContainerRef : null}
-                                        className={classnames(styles['videos-container'], { [styles['selected']]: parseInt(videoDate) === this.state.date.getDate() })}
-                                        data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), parseInt(videoDate)).getTime()}
+                                        className={classnames(styles['videos-container'], { [styles['selected']]: videoDate === this.state.date.getDate() })}
+                                        data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), videoDate).getTime()}
                                         onClick={this.changeDate}
                                     >
                                         <div className={styles['date']}>
@@ -203,10 +203,10 @@ class Calendar extends Component {
                                         </div>
                                         {this.props.metaItems
                                             .map((metaitem) => metaitem.videos
-                                                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === parseInt(videoDate))
+                                                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === videoDate)
                                                 .map((video) =>
                                                     <Input key={video.id}
-                                                        className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: video.released.getFullYear() === new Date().getFullYear() && video.released.getMonth() === new Date().getMonth() && parseInt(videoDate) === new Date().getDate() && this.state.videoId !== video.id })}
+                                                        className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: new Date().toDateString() === new Date(video.released.getFullYear(), video.released.getMonth(), videoDate).toDateString() && this.state.videoId !== video.id })}
                                                         type={'button'}
                                                         data-video-id={video.id}
                                                         onClick={this.showVideoInfo}
@@ -225,10 +225,10 @@ class Calendar extends Component {
                                                         <div className={styles['description']}>
                                                             {video.description}
                                                         </div>
-                                                        <Input className={styles['watch-button-container']} type={'link'} href={video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() ? '#/player' : '#/detail'}>
+                                                        <Input className={styles['watch-button-container']} type={'link'} href={video.released.getTime() < new Date().getTime() ? '#/player' : '#/detail'}>
                                                             <div className={styles['watch-button']}>
                                                                 <Icon className={styles['icon']} icon={'ic_play'} />
-                                                                <div className={styles['label']}>{video.released.getDate() < new Date().getDate() && video.released.getMonth() <= new Date().getMonth() && video.released.getFullYear() <= new Date().getFullYear() ? 'WATCH NOW' : 'SHOW'}</div>
+                                                                <div className={styles['label']}>{video.released.getTime() < new Date().getTime() ? 'WATCH NOW' : 'SHOW'}</div>
                                                             </div>
                                                         </Input>
                                                     </Input>
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index 88c15179c..7a7188c0a 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -76,7 +76,7 @@
                 }
             }
 
-            .row {
+            .week {
                 display: table-row;
 
                 .pad {

From e561a878e25579349b29d84471536c14264c458c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 19 Mar 2019 18:24:40 +0200
Subject: [PATCH 31/49] videosContainerRef renamed; videoDates improved

---
 src/routes/Calendar/Calendar.js | 119 +++++++++++++++++---------------
 1 file changed, 63 insertions(+), 56 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 7bc574867..e91b531ef 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -12,7 +12,7 @@ class Calendar extends Component {
     constructor(props) {
         super(props);
 
-        this.videosContainerRef = React.createRef();
+        this.selectedDateVideosContainerRef = React.createRef();
         this.videosScrollContainerRef = React.createRef();
 
         this.state = {
@@ -37,8 +37,8 @@ class Calendar extends Component {
     }
 
     scrollToSelectedVideo = () => {
-        if (this.videosContainerRef.current !== null) {
-            var topPosition = this.videosContainerRef.current.offsetTop;
+        if (this.selectedDateVideosContainerRef.current !== null) {
+            var topPosition = this.selectedDateVideosContainerRef.current.offsetTop;
             this.videosScrollContainerRef.current.scrollTop = topPosition - this.videosScrollContainerRef.current.offsetTop;
         } else {
             this.setState({ videoId: '' });
@@ -157,15 +157,27 @@ class Calendar extends Component {
     }
 
     render() {
-        const videosDates = this.props.metaItems
+        const videoDates = this.props.metaItems
             .map((metaitem) => metaitem.videos
                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
             .filter((videos) => videos.length > 0)
-            .map((videos) => videos.map((video) => video.released.getDate()))
+            .map((videos) => videos.map((video) => video.released))
             .reduce((result, videoDates) => {
                 result = result.concat(videoDates);
                 return result;
-            }, []);
+            }, [])
+            .filter((date, index, dates) => {
+                for (var i = 0; i < dates.length; i++) {
+                    if (dates[i].getTime() === date.getTime()) {
+                        return i === index;
+                    }
+                }
+
+                return false;
+            })
+            .sort(function(a, b) {
+                return a - b;
+            });
 
         return (
             <div className={styles['calendar-container']}>
@@ -184,58 +196,53 @@ class Calendar extends Component {
                 </div>
                 <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
                     {
-                        videosDates.length > 0
+                        videoDates.length > 0
                             ?
-                            videosDates
-                                .filter((date, index, dates) => dates.indexOf(date) === index)
-                                .sort(function(a, b) {
-                                    return a - b;
-                                })
-                                .map((videoDate) =>
-                                    <div key={videoDate}
-                                        ref={videoDate === this.state.date.getDate() ? this.videosContainerRef : null}
-                                        className={classnames(styles['videos-container'], { [styles['selected']]: videoDate === this.state.date.getDate() })}
-                                        data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), videoDate).getTime()}
-                                        onClick={this.changeDate}
-                                    >
-                                        <div className={styles['date']}>
-                                            {months[this.state.date.getMonth()].slice(0, 3)} {videoDate}
-                                        </div>
-                                        {this.props.metaItems
-                                            .map((metaitem) => metaitem.videos
-                                                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === videoDate)
-                                                .map((video) =>
-                                                    <Input key={video.id}
-                                                        className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: new Date().toDateString() === new Date(video.released.getFullYear(), video.released.getMonth(), videoDate).toDateString() && this.state.videoId !== video.id })}
-                                                        type={'button'}
-                                                        data-video-id={video.id}
-                                                        onClick={this.showVideoInfo}
-                                                    >
-                                                        <div className={styles['main-info']}>
-                                                            <div className={styles['meta-item-name']}>
-                                                                {metaitem.name}
-                                                            </div>
-                                                            <div className={styles['video-number']}>
-                                                                S{video.season} E{video.episode}
-                                                            </div>
-                                                        </div>
-                                                        <div className={styles['name']}>
-                                                            {video.name}
-                                                        </div>
-                                                        <div className={styles['description']}>
-                                                            {video.description}
-                                                        </div>
-                                                        <Input className={styles['watch-button-container']} type={'link'} href={video.released.getTime() < new Date().getTime() ? '#/player' : '#/detail'}>
-                                                            <div className={styles['watch-button']}>
-                                                                <Icon className={styles['icon']} icon={'ic_play'} />
-                                                                <div className={styles['label']}>{video.released.getTime() < new Date().getTime() ? 'WATCH NOW' : 'SHOW'}</div>
-                                                            </div>
-                                                        </Input>
-                                                    </Input>
-                                                )
-                                            )}
+                            videoDates.map((videoDate) =>
+                                <div key={videoDate.getDate()}
+                                    ref={videoDate.getDate() === this.state.date.getDate() ? this.selectedDateVideosContainerRef : null}
+                                    className={classnames(styles['videos-container'], { [styles['selected']]: videoDate.getDate() === this.state.date.getDate() })}
+                                    data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), videoDate.getDate()).getTime()}
+                                    onClick={this.changeDate}
+                                >
+                                    <div className={styles['date']}>
+                                        {months[this.state.date.getMonth()].slice(0, 3)} {videoDate.getDate()}
                                     </div>
-                                )
+                                    {this.props.metaItems
+                                        .map((metaitem) => metaitem.videos
+                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === videoDate.getDate())
+                                            .map((video) =>
+                                                <Input key={video.id}
+                                                    className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: new Date().toDateString() === new Date(video.released.getFullYear(), video.released.getMonth(), videoDate.getDate()).toDateString() && this.state.videoId !== video.id })}
+                                                    type={'button'}
+                                                    data-video-id={video.id}
+                                                    onClick={this.showVideoInfo}
+                                                >
+                                                    <div className={styles['main-info']}>
+                                                        <div className={styles['meta-item-name']}>
+                                                            {metaitem.name}
+                                                        </div>
+                                                        <div className={styles['video-number']}>
+                                                            S{video.season} E{video.episode}
+                                                        </div>
+                                                    </div>
+                                                    <div className={styles['name']}>
+                                                        {video.name}
+                                                    </div>
+                                                    <div className={styles['description']}>
+                                                        {video.description}
+                                                    </div>
+                                                    <Input className={styles['watch-button-container']} type={'link'} href={video.released.getTime() < new Date().getTime() ? '#/player' : '#/detail'}>
+                                                        <div className={styles['watch-button']}>
+                                                            <Icon className={styles['icon']} icon={'ic_play'} />
+                                                            <div className={styles['label']}>{video.released.getTime() < new Date().getTime() ? 'WATCH NOW' : 'SHOW'}</div>
+                                                        </div>
+                                                    </Input>
+                                                </Input>
+                                            )
+                                        )}
+                                </div>
+                            )
                             :
                             null
                     }

From e8ef50c7909cabc3422470a2dcd08520818927b0 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 21 Mar 2019 10:54:06 +0200
Subject: [PATCH 32/49] calendar improved

---
 src/routes/Calendar/Calendar.js | 261 ++++++++++++++++++--------------
 src/routes/Calendar/styles.less |  28 ++--
 2 files changed, 155 insertions(+), 134 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index e91b531ef..902beb357 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -5,8 +5,8 @@ import { Input } from 'stremio-common';
 import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
-const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
 class Calendar extends Component {
     constructor(props) {
@@ -47,32 +47,30 @@ class Calendar extends Component {
 
     changeDate = (event) => {
         const date = new Date(parseInt(event.currentTarget.dataset.date));
-
-        var videosIds = this.props.metaItems
-            .map((metaitem) => metaitem.videos
-                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === date.getDate())
-                .map((video) => video.id))
-            .filter((videos) => videos.length > 0);
-
-        if (videosIds.length > 0) {
-            this.setState({ date, videoId: videosIds[0][0] });
-        } else {
-            this.setState({ date });
+        for (let metaItem of this.props.metaItems) {
+            let video = metaItem.videos.find((video) => {
+                return video.released.getFullYear() === date.getFullYear() && video.released.getMonth() === date.getMonth() && video.released.getDate() === date.getDate();
+            });
+            if (video) {
+                this.setState({ date, videoId: video.id });
+                return;
+            }
         }
+
+        this.setState({ date, videoId: '' });
     }
 
     showVideoInfo = (event) => {
         event.stopPropagation();
+        for (let metaItem of this.props.metaItems) {
+            let video = metaItem.videos.find((video) => video.id == event.currentTarget.dataset.videoId);
+            if (video) {
+                this.setState({ date: new Date(video.released), videoId: video.id });
+                return;
+            }
+        }
 
-        var selectedVideoDate = this.props.metaItems
-            .map((metaitem) => metaitem.videos
-                .filter((video) => video.id == event.currentTarget.dataset.videoId))
-            .reduce((result, videoDates) => {
-                result = result.concat(videoDates);
-                return result;
-            }, [])[0].released;
-
-        this.setState({ videoId: event.currentTarget.dataset.videoId, date: new Date(selectedVideoDate) });
+        this.setState({ date: new Date(), videoId: '' });
     }
 
     getMonthInfo = (date) => {
@@ -92,61 +90,66 @@ class Calendar extends Component {
     }
 
     renderMonthButton(date) {
-        return (
-            date.getMonth() === this.state.date.getMonth() ?
-                <div className={styles['month']}>{months[date.getMonth()]}</div>
-                :
-                <Input className={styles['month']} type={'button'} data-date={date.getTime()} onClick={this.changeDate}>{months[date.getMonth()]}</Input>
-        );
+        return date.getMonth() === this.state.date.getMonth() ?
+            <div className={styles['month']}>{MONTHS[date.getMonth()]}</div>
+            :
+            <Input className={styles['month']} type={'button'} data-date={date.getTime()} onClick={this.changeDate}>{MONTHS[date.getMonth()]}</Input>
     }
 
-    renderMonthWeeks = () => {
+    renderCalendar = (videosForMonth) => {
         const { padsCount, daysCount, weeksCount } = this.getMonthInfo(this.state.date);
-        var weeks = [];
-
-        for (let week = 0; week < weeksCount; week++) {
+        const weeks = [];
+        for (let weekNumber = 0; weekNumber < weeksCount; weekNumber++) {
             weeks.push(
-                <div key={week} className={styles['week']}>
-                    {this.renderMonthDays(week, weeksCount, padsCount, daysCount)}
+                <div key={weekNumber} className={styles['week']}>
+                    {this.renderMonthDays(weekNumber, padsCount, daysCount, weeksCount, videosForMonth)}
                 </div>
             )
         }
-        return weeks;
+
+        return (
+            <div className={styles['month-days']}>
+                <div className={styles['week-days']}>
+                    {DAYS.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
+                </div>
+                {weeks}
+            </div>
+        );
     }
 
-    renderMonthDays = (week, weeksCount, padsCount, daysCount) => {
-        var days = [];
-
+    renderMonthDays = (weekNumber, padsCount, daysCount, weeksCount, videosForMonth) => {
+        const today = new Date();
+        const days = [];
         for (let day = 0; day < 7; day++) {
             days.push(
-                day < padsCount && week === 0
+                day < padsCount && weekNumber === 0
                     ?
                     <div key={day} className={styles['pad']} />
                     :
-                    (week * 7) + (day - padsCount) < daysCount
+                    (weekNumber * 7) + (day - padsCount) < daysCount
                         ?
                         <Input key={day}
-                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (week * 7) + (day - padsCount + 1) })}
+                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (weekNumber * 7) + (day - padsCount + 1) })}
                             type={'button'}
-                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (week * 7) + (day - padsCount + 1)).getTime()}
+                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (weekNumber * 7) + (day - padsCount + 1)).getTime()}
                             onClick={this.changeDate}
                         >
                             <div className={styles['date-container']}>
-                                <div className={classnames(styles['date'], { [styles['today']]: new Date().toDateString() === new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (week * 7) + day - padsCount + 1).toDateString() })}>{(week * 7) + (day - padsCount + 1)}</div>
+                                <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === today.getFullYear() && this.state.date.getMonth() === today.getMonth() && ((weekNumber * 7) + day - padsCount + 1) === today.getDate() })}>{(weekNumber * 7) + (day - padsCount + 1)}</div>
                             </div>
-                            <div className={classnames(styles['videos'], { [styles['small']]: weeksCount === 6 }, { [styles['big']]: weeksCount === 4 })}>
-                                {this.props.metaItems
-                                    .map((metaitem) => metaitem.videos
-                                        .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (week * 7) + (day - padsCount + 1))
+                            <div className={styles['videos']}>
+                                {
+                                    videosForMonth
+                                        .filter((video) => video.released.getDate() === (weekNumber * 7) + (day - padsCount + 1))
                                         .map((video) =>
                                             <div key={video.id}
-                                                style={{ backgroundImage: `url('${metaitem.poster}')` }}
-                                                className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
+                                                style={{ backgroundImage: `url('${video.metaPoster}')` }}
+                                                className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < today.getTime() })}
                                                 data-video-id={video.id}
                                                 onClick={this.showVideoInfo}
                                             />
                                         )
-                                    )}
+                                }
                             </div>
                         </Input>
                         :
@@ -156,16 +159,99 @@ class Calendar extends Component {
         return days;
     }
 
+    renderSideBar = (videoDates, videosForMonth) => {
+        const today = new Date();
+
+        return (
+            <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
+                {
+                    videoDates.length > 0
+                        ?
+                        videoDates.map((videoDate) =>
+                            <div key={videoDate.getDate()}
+                                ref={videoDate.getDate() === this.state.date.getDate() ? this.selectedDateVideosContainerRef : null}
+                                className={classnames(styles['videos-container'], { [styles['selected']]: videoDate.getDate() === this.state.date.getDate() })}
+                                data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), videoDate.getDate()).getTime()}
+                                onClick={this.changeDate}
+                            >
+                                <div className={styles['date']}>
+                                    {MONTHS[this.state.date.getMonth()].slice(0, 3)} {videoDate.getDate()}
+                                </div>
+                                {
+                                    videosForMonth
+                                        .filter((video) => video.released.getDate() === videoDate.getDate())
+                                        .map((video) =>
+                                            <Input key={video.id}
+                                                className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: video.released.getFullYear() === today.getFullYear() && video.released.getMonth() === today.getMonth() && video.released.getDate() === today.getDate() && this.state.videoId !== video.id })}
+                                                type={'button'}
+                                                data-video-id={video.id}
+                                                onClick={this.showVideoInfo}
+                                            >
+                                                <div className={styles['main-info']}>
+                                                    <div className={styles['meta-item-name']}>
+                                                        {video.metaName}
+                                                    </div>
+                                                    {
+                                                        video.season || video.episode
+                                                            ?
+                                                            <div className={styles['video-number']}>
+                                                                S{video.season} E{video.episode}
+                                                            </div>
+                                                            :
+                                                            null
+                                                    }
+                                                </div>
+                                                <div className={styles['name']}>
+                                                    {video.name}
+                                                </div>
+                                                {
+                                                    video.description
+                                                        ?
+                                                        <div className={styles['description']}>
+                                                            {video.description}
+                                                        </div>
+                                                        :
+                                                        null
+                                                }
+                                                <Input className={styles['watch-button-container']} type={'link'} href={video.released.getTime() < today.getTime() ? '#/player' : '#/detail'}>
+                                                    <div className={styles['watch-button']}>
+                                                        <Icon className={styles['icon']} icon={'ic_play'} />
+                                                        <div className={styles['label']}>{video.released.getTime() < today.getTime() ? 'WATCH NOW' : 'SHOW'}</div>
+                                                    </div>
+                                                </Input>
+                                            </Input>
+                                        )
+                                }
+                            </div>
+                        )
+                        :
+                        null
+                }
+            </div>
+        );
+    }
+
     render() {
-        const videoDates = this.props.metaItems
-            .map((metaitem) => metaitem.videos
-                .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
+        const videosForMonth = this.props.metaItems
+            .map((mItem) => {
+                return mItem.videos
+                    .filter((video) => {
+                        return video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth();
+                    })
+                    .map((video) => ({
+                        ...video,
+                        metaPoster: mItem.poster,
+                        metaName: mItem.name
+                    }));
+            })
             .filter((videos) => videos.length > 0)
-            .map((videos) => videos.map((video) => video.released))
-            .reduce((result, videoDates) => {
-                result = result.concat(videoDates);
+            .reduce((result, videos) => {
+                result = result.concat(videos);
                 return result;
-            }, [])
+            }, []);
+
+        const videoDates = videosForMonth
+            .map((video) => video.released)
             .filter((date, index, dates) => {
                 for (var i = 0; i < dates.length; i++) {
                     if (dates[i].getTime() === date.getTime()) {
@@ -187,66 +273,9 @@ class Calendar extends Component {
                         {this.renderMonthButton(this.state.date)}
                         {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1), 1)}
                     </div>
-                    <div className={styles['month-days']}>
-                        <div className={styles['week-days']}>
-                            {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
-                        </div>
-                        {this.renderMonthWeeks()}
-                    </div>
-                </div>
-                <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
-                    {
-                        videoDates.length > 0
-                            ?
-                            videoDates.map((videoDate) =>
-                                <div key={videoDate.getDate()}
-                                    ref={videoDate.getDate() === this.state.date.getDate() ? this.selectedDateVideosContainerRef : null}
-                                    className={classnames(styles['videos-container'], { [styles['selected']]: videoDate.getDate() === this.state.date.getDate() })}
-                                    data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), videoDate.getDate()).getTime()}
-                                    onClick={this.changeDate}
-                                >
-                                    <div className={styles['date']}>
-                                        {months[this.state.date.getMonth()].slice(0, 3)} {videoDate.getDate()}
-                                    </div>
-                                    {this.props.metaItems
-                                        .map((metaitem) => metaitem.videos
-                                            .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === videoDate.getDate())
-                                            .map((video) =>
-                                                <Input key={video.id}
-                                                    className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: new Date().toDateString() === new Date(video.released.getFullYear(), video.released.getMonth(), videoDate.getDate()).toDateString() && this.state.videoId !== video.id })}
-                                                    type={'button'}
-                                                    data-video-id={video.id}
-                                                    onClick={this.showVideoInfo}
-                                                >
-                                                    <div className={styles['main-info']}>
-                                                        <div className={styles['meta-item-name']}>
-                                                            {metaitem.name}
-                                                        </div>
-                                                        <div className={styles['video-number']}>
-                                                            S{video.season} E{video.episode}
-                                                        </div>
-                                                    </div>
-                                                    <div className={styles['name']}>
-                                                        {video.name}
-                                                    </div>
-                                                    <div className={styles['description']}>
-                                                        {video.description}
-                                                    </div>
-                                                    <Input className={styles['watch-button-container']} type={'link'} href={video.released.getTime() < new Date().getTime() ? '#/player' : '#/detail'}>
-                                                        <div className={styles['watch-button']}>
-                                                            <Icon className={styles['icon']} icon={'ic_play'} />
-                                                            <div className={styles['label']}>{video.released.getTime() < new Date().getTime() ? 'WATCH NOW' : 'SHOW'}</div>
-                                                        </div>
-                                                    </Input>
-                                                </Input>
-                                            )
-                                        )}
-                                </div>
-                            )
-                            :
-                            null
-                    }
+                    {this.renderCalendar(videosForMonth)}
                 </div>
+                {this.renderSideBar(videoDates, videosForMonth)}
             </div>
         );
     }
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index 7a7188c0a..bc87e2d2e 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -85,14 +85,13 @@
 
                 .day {
                     display: table-cell;
-                    border: var(--focusable-border-size) solid transparent;
+                    border: calc(var(--focusable-border-size) * 0.5) solid transparent;
                     background-color: var(--color-backgroundlighter);
                     cursor: pointer;
 
                     .date-container {
                         margin: calc(var(--spacing) * 0.5);
-                        width: calc(var(--episodes-height) * 0.64);
-                        height: calc(var(--episodes-height) * 0.64);
+                        flex: 1;
 
                         .date {
                             width: 100%;
@@ -104,7 +103,6 @@
                             color: var(--color-secondarylighter);
 
                             &.today {
-                                border-radius: 50%;
                                 color: var(--color-surfacelighter);
                                 background-color: var(--color-primary);
                             }
@@ -112,15 +110,13 @@
                     }
 
                     .videos {
-                        margin: var(--focusable-border-size);
                         height: var(--episodes-height);
                         display: flex;
                         flex-direction: row;
 
                         .poster {
-                            margin-right: var(--focusable-border-size);
                             display: none;
-                            width: 25%;
+                            flex: calc(1 / var(--poster-shape-ratio));
                             height: 100%;
                             background-size: cover;
                             background-repeat: no-repeat;
@@ -133,18 +129,14 @@
                             &:nth-child(-n+4) {
                                 display: block;
                             }
-                        }
 
-                        &.small {
-                            height: calc(var(--episodes-height) * 0.64);
-                        }
-
-                        &.big {
-                            height: calc(var(--episodes-height) * 1.54);
+                            &:not(:last-child) {
+                                margin-right: var(--focusable-border-size);
+                            }
                         }
                     }
 
-                    &:focus {
+                    &:hover, &:focus {
                         border-color: var(--color-surfacelighter);
                     }
 
@@ -240,13 +232,13 @@
                         justify-content: center;
 
                         .icon {
-                            margin-right: 8%;
-                            width: 8%;
+                            margin-right: 1em;
+                            width: 1em;
                             fill: var(--color-surfacelight);
                         }
 
                         .label {
-                            max-width: 84%;
+                            max-width: 9em;
                             word-break: break-all; //Firefox doesn't support { break-word }
                             word-break: break-word;
                             color: var(--color-surfacelight);

From a3da21915f98917cb2cdf3a9c85e02b4a193565d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 21 Mar 2019 17:08:51 +0200
Subject: [PATCH 33/49] calendar styles improved

---
 src/routes/Calendar/Calendar.js |  12 ++-
 src/routes/Calendar/styles.less | 126 +++++++++++++++++---------------
 2 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 902beb357..503150978 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -109,9 +109,6 @@ class Calendar extends Component {
 
         return (
             <div className={styles['month-days']}>
-                <div className={styles['week-days']}>
-                    {DAYS.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
-                </div>
                 {weeks}
             </div>
         );
@@ -134,10 +131,8 @@ class Calendar extends Component {
                             data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (weekNumber * 7) + (day - padsCount + 1)).getTime()}
                             onClick={this.changeDate}
                         >
-                            <div className={styles['date-container']}>
-                                <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === today.getFullYear() && this.state.date.getMonth() === today.getMonth() && ((weekNumber * 7) + day - padsCount + 1) === today.getDate() })}>{(weekNumber * 7) + (day - padsCount + 1)}</div>
-                            </div>
-                            <div className={styles['videos']}>
+                            <div className={classnames(styles['date'], { [styles['today']]: /*this.state.date.getFullYear() === today.getFullYear() && this.state.date.getMonth() === today.getMonth() &&*/ ((weekNumber * 7) + day - padsCount + 1) === today.getDate() })}>{(weekNumber * 7) + (day - padsCount + 1)}</div>
+                            <div className={styles['posters-container']}>
                                 {
                                     videosForMonth
                                         .filter((video) => video.released.getDate() === (weekNumber * 7) + (day - padsCount + 1))
@@ -273,6 +268,9 @@ class Calendar extends Component {
                         {this.renderMonthButton(this.state.date)}
                         {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1), 1)}
                     </div>
+                    <div className={styles['week-days']}>
+                        {DAYS.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
+                    </div>
                     {this.renderCalendar(videosForMonth)}
                 </div>
                 {this.renderSideBar(videoDates, videosForMonth)}
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index bc87e2d2e..8194b7981 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -1,6 +1,5 @@
 .calendar-container {
     --spacing: 16px;
-    --episodes-height: 50px;
     --videos-scroll-container-width: 270px;
     font-size: 14px;
 }
@@ -10,19 +9,20 @@
     height: 100%;
     display: flex;
     flex-direction: row;
+    background-color: var(--color-background);
 
     .calendar {
-        flex: 1;
         padding-right: calc(var(--spacing) * 0.5);
+        flex: 1;
 
         .months {
             padding-top: calc(var(--spacing) * 0.5);
-            height: 8%;
+            height: 3.5em;
             text-align: center;
 
             .month {
-                padding: var(--focusable-border-size);
-                width: 12%;
+                padding: calc(var(--spacing) * 0.25);
+                width: 6em;
                 display: inline-block;
                 font-size: 1.7em;
                 line-height: 1.2em;
@@ -33,7 +33,7 @@
                 border: calc(var(--focusable-border-size) * 0.5) solid transparent;
                 color: var(--color-surfacelighter);
                 cursor: pointer;
-                
+
                 &:focus {
                     border-color: var(--color-surfacelighter);
                 }
@@ -53,29 +53,32 @@
             }
         }
 
+        .week-days {
+            height: 3.5em;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .day {
+                padding-right: calc(var(--spacing) * 0.5);
+                flex: 1;
+                font-size: 1.2em;
+                line-height: 1.2em;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: var(--color-secondarylighter);
+            }
+        }
+
         .month-days {
             width: 100%;
-            height: 92%;
+            height: 36.5em;
             display: table;
             table-layout: fixed;
             border-spacing: var(--focusable-border-size);
 
-            .week-days {
-                display: table-row;
-
-                .day {
-                    padding: 0 calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.5) 0;
-                    display: table-cell;
-                    font-size: 1.2em;
-                    line-height: 1.2em;
-                    text-align: left;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    color: var(--color-secondarylighter);
-                }
-            }
-
             .week {
                 display: table-row;
 
@@ -85,39 +88,41 @@
 
                 .day {
                     display: table-cell;
+                    position: relative;
+                    z-index: 0;
                     border: calc(var(--focusable-border-size) * 0.5) solid transparent;
                     background-color: var(--color-backgroundlighter);
                     cursor: pointer;
 
-                    .date-container {
-                        margin: calc(var(--spacing) * 0.5);
-                        flex: 1;
+                    .date {
+                        position: absolute;
+                        z-index: 1;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        padding: 0.4em 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 1.4em;
+                        color: var(--color-secondarylighter);
 
-                        .date {
-                            width: 100%;
-                            height: 100%;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            font-size: 1.4em;
-                            color: var(--color-secondarylighter);
-
-                            &.today {
-                                color: var(--color-surfacelighter);
-                                background-color: var(--color-primary);
-                            }
+                        &.today {
+                            color: var(--color-surfacelighter);
+                            background-color: var(--color-primary);
                         }
                     }
 
-                    .videos {
-                        height: var(--episodes-height);
-                        display: flex;
-                        flex-direction: row;
+                    .posters-container {
+                        position: absolute;
+                        z-index: 0;
+                        right: 0;
+                        bottom: 0;
+                        left: 0;
 
                         .poster {
                             display: none;
-                            flex: calc(1 / var(--poster-shape-ratio));
-                            height: 100%;
+                            width: calc(100% / 4);
                             background-size: cover;
                             background-repeat: no-repeat;
                             background-position: center;
@@ -127,11 +132,13 @@
                             }
 
                             &:nth-child(-n+4) {
-                                display: block;
+                                display: inline-block;
                             }
 
-                            &:not(:last-child) {
-                                margin-right: var(--focusable-border-size);
+                            &:before {
+                                content: "";
+                                display: inline-block;
+                                padding-top: calc(100% * var(--poster-shape-ratio));
                             }
                         }
                     }
@@ -156,12 +163,11 @@
     .videos-scroll-container {
         padding-right: calc(var(--spacing) * 0.5);
         width: var(--videos-scroll-container-width);
-        overflow-y: auto;
         overflow-x: hidden;
+        overflow-y: auto;
         scroll-behavior: smooth;
 
         .videos-container {
-            margin-bottom: calc(var(--spacing) * 0.5);
             border: var(--focusable-border-size) solid var(--color-background);
             background-color: var(--color-backgroundlighter);
 
@@ -183,20 +189,20 @@
                     justify-content: space-between;
 
                     .meta-item-name {
-                        margin-right: 5%;
-                        width: 75%;
+                        flex: 3;
                         line-height: 1.2em;
-                        white-space: nowrap;
                         overflow: hidden;
+                        white-space: nowrap;
                         text-overflow: ellipsis;
                         color: var(--color-surface);
                     }
 
                     .video-number {
-                        width: 22%;
+                        flex: 1;
                         line-height: 1.2em;
-                        white-space: nowrap;
+                        text-align: end;
                         overflow: hidden;
+                        white-space: nowrap;
                         text-overflow: ellipsis;
                         color: var(--color-surface);
                     }
@@ -268,15 +274,13 @@
                     cursor: default;
 
                     .main-info {
-                        .serie-name {
+                        .meta-item-name {
                             white-space: unset;
-                            overflow: visible;
                             overflow-wrap: break-word;
                         }
 
-                        .episode-number {
+                        .video-number {
                             white-space: unset;
-                            overflow: visible;
                             overflow-wrap: break-word;
                         }
                     }
@@ -314,6 +318,10 @@
             &.selected {
                 border-color: var(--color-primary);
             }
+
+            &:not(:last-child) {
+                margin-bottom: calc(var(--spacing) * 0.5);
+            }
         }
     }
 }
\ No newline at end of file

From 3ffbe491b4fce13a5b64d15b61cd33f6b80f9a32 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 21 Mar 2019 18:14:33 +0200
Subject: [PATCH 34/49] uncomment classname condition

---
 src/routes/Calendar/Calendar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 503150978..5f257dc04 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -131,7 +131,7 @@ class Calendar extends Component {
                             data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (weekNumber * 7) + (day - padsCount + 1)).getTime()}
                             onClick={this.changeDate}
                         >
-                            <div className={classnames(styles['date'], { [styles['today']]: /*this.state.date.getFullYear() === today.getFullYear() && this.state.date.getMonth() === today.getMonth() &&*/ ((weekNumber * 7) + day - padsCount + 1) === today.getDate() })}>{(weekNumber * 7) + (day - padsCount + 1)}</div>
+                            <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === today.getFullYear() && this.state.date.getMonth() === today.getMonth() && ((weekNumber * 7) + day - padsCount + 1) === today.getDate() })}>{(weekNumber * 7) + (day - padsCount + 1)}</div>
                             <div className={styles['posters-container']}>
                                 {
                                     videosForMonth

From df209b42038deea3be5ee08cca117a5fe0a3cb1f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 25 Mar 2019 15:37:53 +0200
Subject: [PATCH 35/49] Loader implemented

---
 src/common/Loader/Loader.js | 61 +++++++++++++++++++++++++++++++++++++
 src/common/Loader/index.js  |  3 ++
 src/common/index.js         |  2 ++
 3 files changed, 66 insertions(+)
 create mode 100644 src/common/Loader/Loader.js
 create mode 100644 src/common/Loader/index.js

diff --git a/src/common/Loader/Loader.js b/src/common/Loader/Loader.js
new file mode 100644
index 000000000..d4cf37105
--- /dev/null
+++ b/src/common/Loader/Loader.js
@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react';
+import colors from 'stremio-colors';
+
+class Loader extends PureComponent {
+    render() {
+        return (
+            <svg width="100" height="100" viewBox="0 0 1024 1024">
+
+                <path d={'M512 0l-512 512 512 512 512-512zM411.106 752.941v-480.376l323.464 240.941z'} fill={colors.surfacelighter}/>
+
+                <path d={'M256,256 512,0 768,256 512,512Z'} fillOpacity={0.8}>
+                    <animate
+                        attributeType="CSS"
+                        attributeName="opacity"
+                        dur="3s"
+                        values="0.8;0.3;0.3;0.3;0.3;0.3"
+                        keyTimes="0;0.2;0.4;0.6;0.8;1"
+                        calcMode="discrete"
+                        repeatCount="indefinite"
+                    />
+                </path>
+                <path d={'M768,256 1024,512 768,768 512,512Z'} fillOpacity={0.8}>
+                    <animate
+                        attributeType="CSS"
+                        attributeName="opacity"
+                        dur="3s"
+                        values="0.8;0.8;0.3;0.3;0.3;0.3"
+                        keyTimes="0;0.2;0.4;0.6;0.8;1"
+                        calcMode="discrete"
+                        repeatCount="indefinite"
+                    />
+                </path>
+                <path d={'M768,768 512,1024 256,768 512,512Z'} fillOpacity={0.8}>
+                    <animate
+                        attributeType="CSS"
+                        attributeName="opacity"
+                        dur="3s"
+                        values="0.8;0.8;0.8;0.3;0.3;0.3"
+                        keyTimes="0;0.2;0.4;0.6;0.8;1"
+                        calcMode="discrete"
+                        repeatCount="indefinite"
+                    />
+                </path>
+                <path d={'M256,768 0,512 256,256 512,512Z'} fillOpacity={0.8}>
+                    <animate
+                        attributeType="CSS"
+                        attributeName="opacity"
+                        dur="3s"
+                        values="0.8;0.8;0.8;0.8;0.3;0.3"
+                        keyTimes="0;0.2;0.4;0.6;0.8;1"
+                        calcMode="discrete"
+                        repeatCount="indefinite"
+                    />
+                </path>
+            </svg>
+
+        );
+    }
+}
+
+export default Loader;
diff --git a/src/common/Loader/index.js b/src/common/Loader/index.js
new file mode 100644
index 000000000..832fbc442
--- /dev/null
+++ b/src/common/Loader/index.js
@@ -0,0 +1,3 @@
+import Loader from './Loader';
+
+export default Loader;
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 7d4d2e23e..1f63b50bc 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -9,6 +9,7 @@ import NavBar from './NavBar';
 import MetaItem from './MetaItem';
 import ShareAddon from './ShareAddon';
 import UserPanel from './UserPanel';
+import Loader from './Loader';
 
 export {
     Checkbox,
@@ -22,6 +23,7 @@ export {
     MetaItem,
     ShareAddon,
     UserPanel,
+    Loader,
     Slider,
     FocusableProvider,
     withFocusable

From 53919e33d1a09167df0133802b7ae2d6907a86c3 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 25 Mar 2019 15:43:47 +0200
Subject: [PATCH 36/49] white spaces removed

---
 src/common/Loader/Loader.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/common/Loader/Loader.js b/src/common/Loader/Loader.js
index d4cf37105..5a5bcd9fc 100644
--- a/src/common/Loader/Loader.js
+++ b/src/common/Loader/Loader.js
@@ -5,9 +5,7 @@ class Loader extends PureComponent {
     render() {
         return (
             <svg width="100" height="100" viewBox="0 0 1024 1024">
-
                 <path d={'M512 0l-512 512 512 512 512-512zM411.106 752.941v-480.376l323.464 240.941z'} fill={colors.surfacelighter}/>
-
                 <path d={'M256,256 512,0 768,256 512,512Z'} fillOpacity={0.8}>
                     <animate
                         attributeType="CSS"

From f88e6d52ff6fa9e05c47913afabe092d33c606b7 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 25 Mar 2019 16:01:07 +0200
Subject: [PATCH 37/49] single quotes

---
 src/common/Loader/Loader.js | 63 ++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/common/Loader/Loader.js b/src/common/Loader/Loader.js
index 5a5bcd9fc..ef54811ca 100644
--- a/src/common/Loader/Loader.js
+++ b/src/common/Loader/Loader.js
@@ -1,57 +1,56 @@
 import React, { PureComponent } from 'react';
-import colors from 'stremio-colors';
 
 class Loader extends PureComponent {
     render() {
+        const { fill, children, ...props } = this.props;
         return (
-            <svg width="100" height="100" viewBox="0 0 1024 1024">
-                <path d={'M512 0l-512 512 512 512 512-512zM411.106 752.941v-480.376l323.464 240.941z'} fill={colors.surfacelighter}/>
+            <svg {...props} viewBox="0 0 1024 1024">
+                <path d={'M512 0l-512 512 512 512 512-512zM411.106 752.941v-480.376l323.464 240.941z'} fill={fill} />
                 <path d={'M256,256 512,0 768,256 512,512Z'} fillOpacity={0.8}>
                     <animate
-                        attributeType="CSS"
-                        attributeName="opacity"
-                        dur="3s"
-                        values="0.8;0.3;0.3;0.3;0.3;0.3"
-                        keyTimes="0;0.2;0.4;0.6;0.8;1"
-                        calcMode="discrete"
-                        repeatCount="indefinite"
+                        attributeType={'CSS'}
+                        attributeName={'opacity'}
+                        dur={'3s'}
+                        values={'0.8;0.3;0.3;0.3;0.3;0.3'}
+                        keyTimes={'0;0.2;0.4;0.6;0.8;1'}
+                        calcMode={'discrete'}
+                        repeatCount={'indefinite'}
                     />
                 </path>
                 <path d={'M768,256 1024,512 768,768 512,512Z'} fillOpacity={0.8}>
                     <animate
-                        attributeType="CSS"
-                        attributeName="opacity"
-                        dur="3s"
-                        values="0.8;0.8;0.3;0.3;0.3;0.3"
-                        keyTimes="0;0.2;0.4;0.6;0.8;1"
-                        calcMode="discrete"
-                        repeatCount="indefinite"
+                        attributeType={'CSS'}
+                        attributeName={'opacity'}
+                        dur={'3s'}
+                        values={'0.8;0.8;0.3;0.3;0.3;0.3'}
+                        keyTimes={'0;0.2;0.4;0.6;0.8;1'}
+                        calcMode={'discrete'}
+                        repeatCount={'indefinite'}
                     />
                 </path>
                 <path d={'M768,768 512,1024 256,768 512,512Z'} fillOpacity={0.8}>
                     <animate
-                        attributeType="CSS"
-                        attributeName="opacity"
-                        dur="3s"
-                        values="0.8;0.8;0.8;0.3;0.3;0.3"
-                        keyTimes="0;0.2;0.4;0.6;0.8;1"
-                        calcMode="discrete"
-                        repeatCount="indefinite"
+                        attributeType={'CSS'}
+                        attributeName={'opacity'}
+                        dur={'3s'}
+                        values={'0.8;0.8;0.8;0.3;0.3;0.3'}
+                        keyTimes={'0;0.2;0.4;0.6;0.8;1'}
+                        calcMode={'discrete'}
+                        repeatCount={'indefinite'}
                     />
                 </path>
                 <path d={'M256,768 0,512 256,256 512,512Z'} fillOpacity={0.8}>
                     <animate
-                        attributeType="CSS"
-                        attributeName="opacity"
-                        dur="3s"
-                        values="0.8;0.8;0.8;0.8;0.3;0.3"
-                        keyTimes="0;0.2;0.4;0.6;0.8;1"
-                        calcMode="discrete"
-                        repeatCount="indefinite"
+                        attributeType={'CSS'}
+                        attributeName={'opacity'}
+                        dur={'3s'}
+                        values={'0.8;0.8;0.8;0.8;0.3;0.3'}
+                        keyTimes={'0;0.2;0.4;0.6;0.8;1'}
+                        calcMode={'discrete'}
+                        repeatCount={'indefinite'}
                     />
                 </path>
             </svg>
-
         );
     }
 }

From d01c168418a6a07486765b8430d7869034dfad76 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 25 Mar 2019 16:10:01 +0200
Subject: [PATCH 38/49] viewBox syntax fixed

---
 src/common/Loader/Loader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/Loader/Loader.js b/src/common/Loader/Loader.js
index ef54811ca..41dcb23cf 100644
--- a/src/common/Loader/Loader.js
+++ b/src/common/Loader/Loader.js
@@ -4,7 +4,7 @@ class Loader extends PureComponent {
     render() {
         const { fill, children, ...props } = this.props;
         return (
-            <svg {...props} viewBox="0 0 1024 1024">
+            <svg {...props} viewBox={'0 0 1024 1024'}>
                 <path d={'M512 0l-512 512 512 512 512-512zM411.106 752.941v-480.376l323.464 240.941z'} fill={fill} />
                 <path d={'M256,256 512,0 768,256 512,512Z'} fillOpacity={0.8}>
                     <animate

From 7e9bd49d8cdac7d19639572731181c8fc1a67c7f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 27 Mar 2019 16:04:29 +0200
Subject: [PATCH 39/49] addons loader added

---
 src/routes/Addons/Addons.js   | 45 ++++++++++++++++-------
 src/routes/Addons/styles.less | 67 +++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 650f56bd2..e8798b0b3 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -27,7 +27,8 @@ class Addons extends Component {
 
         this.state = {
             selectedCategory: ADDON_CATEGORIES.OFFICIAL,
-            selectedAddonType: DEFAULT_TYPE
+            selectedAddonType: DEFAULT_TYPE,
+            isLoaded: true
         };
     }
 
@@ -75,6 +76,21 @@ class Addons extends Component {
         return addonTypes;
     }
 
+    renderAddonPlaceholders(key) {
+        return (
+            <div key={key} className={styles['placeholder']}>
+                <div className={styles['logo-placeholder']}>
+                    <div className={styles['logo']} />
+                </div>
+                <div className={styles['text-placeholder']} />
+                <div className={styles['buttons-placeholder']}>
+                    <div className={styles['button']} />
+                    <div className={styles['button']} />
+                </div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <div className={styles['addons-container']}>
@@ -109,17 +125,21 @@ class Addons extends Component {
                                 addon.types.indexOf(this.state.selectedAddonType) !== -1;
                         })
                         .map((addon) =>
-                            <Addon key={addon.name}
-                                className={styles['addon']}
-                                logo={addon.logo}
-                                name={addon.name}
-                                version={addon.version}
-                                isOfficial={addon.isOfficial}
-                                isInstalled={addon.isInstalled}
-                                types={addon.types}
-                                hostname={addon.hostname}
-                                description={addon.description}
-                            />
+                            this.state.isLoaded
+                                ?
+                                this.renderAddonPlaceholders(addon.name)
+                                :
+                                <Addon key={addon.name}
+                                    className={styles['addon']}
+                                    logo={addon.logo}
+                                    name={addon.name}
+                                    version={addon.version}
+                                    isOfficial={addon.isOfficial}
+                                    isInstalled={addon.isInstalled}
+                                    types={addon.types}
+                                    hostname={addon.hostname}
+                                    description={addon.description}
+                                />
                         )}
                 </div>
             </div>
@@ -132,6 +152,7 @@ Addons.propTypes = {
 };
 Addons.defaultProps = {
     addons: [
+        { logo: '', name: '', version: '', isOfficial: true, isInstalled: false, types: [], hostname: '', description: '' },
         { logo: 'ic_series', name: 'Watch Hub', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['ovies', 'Series'], hostname: 'piratebay-stremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuapp.com', description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' },
         { name: 'Cinemeta', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Moies', 'Series'], hostname: 'stremio-zooqle.now.sh', description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' },
         { logo: 'ic_youtube_small', name: 'YouTube', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], hostname: 'pct.best4stremio.space', description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' },
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 1ff9dcd3b..152040dbd 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -101,6 +101,73 @@
         overflow-y: auto;
         overflow-x: hidden;
 
+        .placeholder {
+            display: inline-grid;
+            position: relative;
+            width: var(--addon-width);
+            padding: 1.6em;
+            overflow: hidden;
+            background-color: var(--color-backgroundlighter);
+            grid-template-columns: 1fr 5fr 4fr;
+            grid-template-rows: calc(0.12 * var(--addon-width));
+            grid-template-areas:
+                "logo-placeholder text-placeholder buttons-placeholder";
+
+            &:before {
+                content: " ";
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 50%;
+                z-index: 1;
+                width: 500%;
+                margin-left: -250%;
+                animation: placeholderAnimation 0.8s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
+            }
+
+            @keyframes placeholderAnimation {
+                0% {
+                    transform: translate3d(-30%, 0, 0);
+                }
+
+                100% {
+                    transform: translate3d(30%, 0, 0);
+                }
+            }
+
+            .logo-placeholder {
+                grid-area: logo-placeholder;
+                background-color: var(--color-secondarylighter40);
+
+                .logo {
+                    width: calc(0.12 * var(--addon-width));
+                    height: calc(0.12 * var(--addon-width));
+                }
+            }
+
+            .text-placeholder {
+                grid-area: text-placeholder;
+                margin-left: 4%;
+                background-color: var(--color-secondarylighter40);
+            }
+
+            .buttons-placeholder {
+                grid-area: buttons-placeholder;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                justify-content: space-between;
+
+                .button {
+                    width: 65%;
+                    height: calc(0.05 * var(--addon-width));
+                    background-color: var(--color-secondarylighter40);
+                }
+            }
+        }
+
         >:not(:first-child) {
             margin-top: calc(var(--spacing) * 2.5 + var(--button-border-width));
         }

From c74a841c12e71ad964c14abd667d60c7648f66bb Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 27 Mar 2019 17:41:17 +0200
Subject: [PATCH 40/49] addons loader fixed

---
 src/routes/Addons/Addons.js   | 85 +++++++++++++++++++----------------
 src/routes/Addons/styles.less | 10 ++---
 2 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index e8798b0b3..a02e3ed7a 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -76,19 +76,24 @@ class Addons extends Component {
         return addonTypes;
     }
 
-    renderAddonPlaceholders(key) {
-        return (
-            <div key={key} className={styles['placeholder']}>
-                <div className={styles['logo-placeholder']}>
-                    <div className={styles['logo']} />
+    renderAddonPlaceholders() {
+        const addonPlaceholders = [];
+        for (let placeholderNumber = 0; placeholderNumber < 6; placeholderNumber++) {
+            addonPlaceholders.push(
+                <div key={placeholderNumber} className={styles['placeholder']}>
+                    <div className={styles['logo-placeholder']}>
+                        <div className={styles['logo']} />
+                    </div>
+                    <div className={styles['text-placeholder']} />
+                    <div className={styles['buttons-placeholder']}>
+                        <div className={styles['button']} />
+                        <div className={styles['button']} />
+                    </div>
                 </div>
-                <div className={styles['text-placeholder']} />
-                <div className={styles['buttons-placeholder']}>
-                    <div className={styles['button']} />
-                    <div className={styles['button']} />
-                </div>
-            </div>
-        );
+            )
+        }
+
+        return addonPlaceholders;
     }
 
     render() {
@@ -114,33 +119,35 @@ class Addons extends Component {
                     )}
                 </div>
                 <div className={styles['scroll-container']}>
-                    {this.props.addons
-                        .filter((addon) => {
-                            if (this.state.selectedCategory === ADDON_CATEGORIES.OFFICIAL) return addon.isOfficial === true;
-                            if (this.state.selectedCategory === ADDON_CATEGORIES.COMMUNITY) return addon.isOfficial === false;
-                            if (this.state.selectedCategory === ADDON_CATEGORIES.MY) return addon.isInstalled === true;
-                        })
-                        .filter((addon) => {
-                            return this.state.selectedAddonType === DEFAULT_TYPE ||
-                                addon.types.indexOf(this.state.selectedAddonType) !== -1;
-                        })
-                        .map((addon) =>
-                            this.state.isLoaded
-                                ?
-                                this.renderAddonPlaceholders(addon.name)
-                                :
-                                <Addon key={addon.name}
-                                    className={styles['addon']}
-                                    logo={addon.logo}
-                                    name={addon.name}
-                                    version={addon.version}
-                                    isOfficial={addon.isOfficial}
-                                    isInstalled={addon.isInstalled}
-                                    types={addon.types}
-                                    hostname={addon.hostname}
-                                    description={addon.description}
-                                />
-                        )}
+                    {
+                        this.state.isLoaded
+                            ?
+                            this.renderAddonPlaceholders()
+                            :
+                            this.props.addons
+                                .filter((addon) => {
+                                    if (this.state.selectedCategory === ADDON_CATEGORIES.OFFICIAL) return addon.isOfficial === true;
+                                    if (this.state.selectedCategory === ADDON_CATEGORIES.COMMUNITY) return addon.isOfficial === false;
+                                    if (this.state.selectedCategory === ADDON_CATEGORIES.MY) return addon.isInstalled === true;
+                                })
+                                .filter((addon) => {
+                                    return this.state.selectedAddonType === DEFAULT_TYPE ||
+                                        addon.types.indexOf(this.state.selectedAddonType) !== -1;
+                                })
+                                .map((addon) =>
+                                    <Addon key={addon.name}
+                                        className={styles['addon']}
+                                        logo={addon.logo}
+                                        name={addon.name}
+                                        version={addon.version}
+                                        isOfficial={addon.isOfficial}
+                                        isInstalled={addon.isInstalled}
+                                        types={addon.types}
+                                        hostname={addon.hostname}
+                                        description={addon.description}
+                                    />
+                                )
+                    }
                 </div>
             </div>
         );
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 152040dbd..ee69cd0fb 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -123,8 +123,8 @@
                 z-index: 1;
                 width: 500%;
                 margin-left: -250%;
-                animation: placeholderAnimation 0.8s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
+                animation: placeholderAnimation 1s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
             }
 
             @keyframes placeholderAnimation {
@@ -139,7 +139,7 @@
 
             .logo-placeholder {
                 grid-area: logo-placeholder;
-                background-color: var(--color-secondarylighter40);
+                background-color: var(--color-secondarylighter20);
 
                 .logo {
                     width: calc(0.12 * var(--addon-width));
@@ -150,7 +150,7 @@
             .text-placeholder {
                 grid-area: text-placeholder;
                 margin-left: 4%;
-                background-color: var(--color-secondarylighter40);
+                background-color: var(--color-secondarylighter20);
             }
 
             .buttons-placeholder {
@@ -163,7 +163,7 @@
                 .button {
                     width: 65%;
                     height: calc(0.05 * var(--addon-width));
-                    background-color: var(--color-secondarylighter40);
+                    background-color: var(--color-secondarylighter20);
                 }
             }
         }

From f75ce7be6efc9fcb79734c5299704155f1ceb52d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 28 Mar 2019 13:31:04 +0200
Subject: [PATCH 41/49] addons loader improved

---
 src/routes/Addons/Addons.js   | 10 +++++++-
 src/routes/Addons/styles.less | 47 +++++++++++++++++++++++++----------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index a02e3ed7a..bbb746753 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -84,7 +84,15 @@ class Addons extends Component {
                     <div className={styles['logo-placeholder']}>
                         <div className={styles['logo']} />
                     </div>
-                    <div className={styles['text-placeholder']} />
+                    <div className={styles['text-placeholder']}>
+                        <div className={styles['header-placeholder']}>
+                            <div className={styles['name']} />
+                            <div className={styles['version']} />
+                        </div>
+                        <div className={styles['types-placeholder']} />
+                        <div className={styles['hostname-placeholder']} />
+                        <div className={styles['description-placeholder']} />
+                    </div>
                     <div className={styles['buttons-placeholder']}>
                         <div className={styles['button']} />
                         <div className={styles['button']} />
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index ee69cd0fb..3fca515cc 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -97,30 +97,26 @@
     .scroll-container {
         flex: 1;
         align-self: stretch;
-        margin: calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) 0;
+        padding: calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) 0;
         overflow-y: auto;
         overflow-x: hidden;
 
         .placeholder {
-            display: inline-grid;
+            display: flex;
             position: relative;
+            z-index: 0;
             width: var(--addon-width);
             padding: 1.6em;
             overflow: hidden;
             background-color: var(--color-backgroundlighter);
-            grid-template-columns: 1fr 5fr 4fr;
-            grid-template-rows: calc(0.12 * var(--addon-width));
-            grid-template-areas:
-                "logo-placeholder text-placeholder buttons-placeholder";
 
-            &:before {
+            &:after {
                 content: " ";
                 position: absolute;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 50%;
-                z-index: 1;
                 width: 500%;
                 margin-left: -250%;
                 animation: placeholderAnimation 1s linear infinite;
@@ -138,7 +134,7 @@
             }
 
             .logo-placeholder {
-                grid-area: logo-placeholder;
+                flex: 1;
                 background-color: var(--color-secondarylighter20);
 
                 .logo {
@@ -148,13 +144,38 @@
             }
 
             .text-placeholder {
-                grid-area: text-placeholder;
-                margin-left: 4%;
-                background-color: var(--color-secondarylighter20);
+                flex: 5;
+                margin-left: 3em;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .header-placeholder {
+                    height: 15%;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+
+                    .name {
+                        flex: 2;
+                        margin-right: 3em;
+                        background-color: var(--color-secondarylighter20);
+                    }
+
+                    .version {
+                        flex: 1;
+                        background-color: var(--color-secondarylighter20);
+                    }
+                }
+
+                .types-placeholder, .hostname-placeholder, .description-placeholder {
+                    height: 15%;
+                    background-color: var(--color-secondarylighter20);
+                }
             }
 
             .buttons-placeholder {
-                grid-area: buttons-placeholder;
+                flex: 4;
                 display: flex;
                 flex-direction: column;
                 align-items: flex-end;

From 8ed5ca164ab992907d7996cd95b8b7e3c30abe00 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 29 Mar 2019 11:43:20 +0200
Subject: [PATCH 42/49] board loader added

---
 src/routes/Board/Board.js    | 97 ++++++++++++++++++++++++------------
 src/routes/Board/styles.less | 59 ++++++++++++++++++++++
 2 files changed, 123 insertions(+), 33 deletions(-)

diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index d0c8279bc..7b609e50d 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import classnames from 'classnames';
 import { MetaItem, Input } from 'stremio-common';
 import styles from './styles';
@@ -125,6 +125,10 @@ class Board extends PureComponent {
                 }
             ]
         };
+
+        this.state = {
+            isLoaded: true
+        }
     }
 
     onClick = (event) => {
@@ -144,41 +148,68 @@ class Board extends PureComponent {
         });
     }
 
+    renderMetaItemPlaceholders() {
+        const metaItemPlaceholders = [];
+        for (let placeholderNumber = 0; placeholderNumber < 20; placeholderNumber++) {
+            metaItemPlaceholders.push(
+                <div key={placeholderNumber} className={styles['placeholder']}>
+                    <div className={styles['poster-image-placeholder']}>
+                        <div className={styles['poster']} />
+                    </div>
+                    <div className={styles['title-bar-placeholder']} />
+                </div>
+            )
+        }
+
+        return (
+            <div className={styles['placeholder-container']}>
+                {metaItemPlaceholders}
+            </div>
+        );
+    }
+
     render() {
         return (
             <div className={styles['board-container']}>
-                <div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
-                    <div className={styles['meta-items-container']}>
-                        {this.items.continueWatchingItems.map((item) => (
-                            <MetaItem
-                                {...item}
-                                key={item.id}
-                                className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
-                                popupClassName={styles['meta-item-popup-container']}
-                                posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
-                                menuOptions={CONTINUE_WATCHING_MENU}
-                                menuOptionOnSelect={this.menuOptionOnSelect}
-                                onClick={this.onClick}
-                            />
-                        ))}
-                    </div>
-                    <Input className={styles['show-more-container']} type={'button'} />
-                </div>
-                <div className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
-                    <div className={styles['meta-items-container']}>
-                        {this.items.addonCatalogItems2.map((item, _, metaItems) => (
-                            <MetaItem
-                                {...item}
-                                key={item.id}
-                                className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
-                                posterShape={metaItems[0].posterShape}
-                                progress={0}
-                                onClick={this.onClick}
-                            />
-                        ))}
-                    </div>
-                    <Input className={styles['show-more-container']} type={'button'} />
-                </div>
+                {
+                    this.state.isLoaded ?
+                        this.renderMetaItemPlaceholders()
+                        :
+                        <Fragment>
+                            <div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
+                                <div className={styles['meta-items-container']}>
+                                    {this.items.continueWatchingItems.map((item) => (
+                                        <MetaItem
+                                            {...item}
+                                            key={item.id}
+                                            className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
+                                            popupClassName={styles['meta-item-popup-container']}
+                                            posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
+                                            menuOptions={CONTINUE_WATCHING_MENU}
+                                            menuOptionOnSelect={this.menuOptionOnSelect}
+                                            onClick={this.onClick}
+                                        />
+                                    ))}
+                                </div>
+                                <Input className={styles['show-more-container']} type={'button'} />
+                            </div>
+                            <div className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
+                                <div className={styles['meta-items-container']}>
+                                    {this.items.addonCatalogItems2.map((item, _, metaItems) => (
+                                        <MetaItem
+                                            {...item}
+                                            key={item.id}
+                                            className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
+                                            posterShape={metaItems[0].posterShape}
+                                            progress={0}
+                                            onClick={this.onClick}
+                                        />
+                                    ))}
+                                </div>
+                                <Input className={styles['show-more-container']} type={'button'} />
+                            </div>
+                        </Fragment>
+                }
             </div>
         );
     }
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 8f4561689..92174354b 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -41,6 +41,65 @@
     overflow-x: hidden;
     overflow-y: auto;
 
+    .placeholder-container {
+        display: flex;
+        flex-direction: row;
+
+        .placeholder {
+            flex: 1;
+            margin: 1em;
+            position: relative;
+            overflow: hidden;
+            background-color: var(--color-backgroundlighter);
+
+            .poster-image-placeholder {
+                flex: calc(1 / var(--poster-shape-ratio));
+                margin-bottom: 1em;
+                background-color: var(--color-secondarylighter20);
+
+                &:before {
+                    content: "";
+                    display: inline-block;
+                    padding-top: calc(100% * var(--poster-shape-ratio));
+                }
+            }
+
+            .title-bar-placeholder {
+                height: 2em;
+                display: flex;
+                flex-direction: row;
+                background-color: var(--color-secondarylighter20);
+            }
+
+            &:after {
+                content: " ";
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 50%;
+                width: 600%;
+                margin-left: -300%;
+                animation: placeholderAnimation 0.8s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
+            }
+
+            @keyframes placeholderAnimation {
+                0% {
+                    transform: translate3d(-30%, 0, 0);
+                }
+
+                100% {
+                    transform: translate3d(30%, 0, 0);
+                }
+            }
+
+            &:nth-child(n+8) {
+                display: none;
+            }
+        }
+    }
+
     .board-row {
         width: 100%;
         display: flex;

From 93fd2b82dd8c34ee4d67beadfd0b526f7dfb4a7d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 1 Apr 2019 11:22:09 +0300
Subject: [PATCH 43/49] streams list loader added

---
 src/routes/Detail/StreamsList/StreamsList.js | 21 +++++++-
 src/routes/Detail/StreamsList/styles.less    | 57 ++++++++++++++++++++
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/src/routes/Detail/StreamsList/StreamsList.js b/src/routes/Detail/StreamsList/StreamsList.js
index c590e09c9..dee270eb7 100644
--- a/src/routes/Detail/StreamsList/StreamsList.js
+++ b/src/routes/Detail/StreamsList/StreamsList.js
@@ -4,12 +4,29 @@ import Icon from 'stremio-icons/dom';
 import Stream from './Stream';
 import styles from './styles';
 
+const renderStreamPlaceholders = () => {
+    const streamPlaceholders = [];
+    for (let placeholderNumber = 0; placeholderNumber < 20; placeholderNumber++) {
+        streamPlaceholders.push(
+            <div key={placeholderNumber} className={styles['placeholder']}>
+                <div className={styles['logo-placeholder']}></div>
+                <div className={styles['text-placeholder']}></div>
+                <div className={styles['button-placeholder']}></div>
+            </div>
+        )
+    }
+
+    return streamPlaceholders;
+}
+
 const StreamsList = (props) => {
     return (
         <div className={styles['streams-list-container']}>
             <div className={styles['scroll-container']}>
-                {props.streams
-                    .map((stream) =>
+                {props.streams.length === 0 ?
+                    renderStreamPlaceholders()
+                    :
+                    props.streams.map((stream) =>
                         <Stream key={stream.id}
                             className={styles['stream']}
                             logo={stream.logo}
diff --git a/src/routes/Detail/StreamsList/styles.less b/src/routes/Detail/StreamsList/styles.less
index afc323479..28bdde8f2 100644
--- a/src/routes/Detail/StreamsList/styles.less
+++ b/src/routes/Detail/StreamsList/styles.less
@@ -19,6 +19,63 @@
         overflow-y: auto;
         overflow-x: hidden;
 
+        .placeholder {
+            margin-top: var(--spacing);
+            width: var(--stream-width);
+            display: flex;
+            position: relative;
+            overflow: hidden;
+            background-color: var(--color-backgroundlighter);
+            
+            .logo-placeholder {
+                flex: 1;
+                margin: var(--spacing) 0 var(--spacing) var(--spacing);
+                height: calc(.2 * var(--stream-width));
+                background-color: var(--color-secondarylighter20);
+            }
+
+            .text-placeholder {
+                flex: 3;
+                margin: var(--spacing) 0 var(--spacing) var(--spacing);
+                height: calc(.2 * var(--stream-width));
+                background-color: var(--color-secondarylighter20);
+            }
+
+            .button-placeholder {
+                margin: var(--spacing) var(--spacing) var(--spacing) 0;
+                height: calc(.2 * var(--stream-width));
+                width: calc(0.07 * var(--stream-width));
+                background-color: var(--color-secondarylighter20);
+            }
+
+            &:after {
+                content: " ";
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 50%;
+                width: 600%;
+                margin-left: -300%;
+                animation: placeholderAnimation 0.8s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
+            }
+
+            @keyframes placeholderAnimation {
+                0% {
+                    transform: translate3d(-30%, 0, 0);
+                }
+
+                100% {
+                    transform: translate3d(30%, 0, 0);
+                }
+            }
+
+            &:nth-child(n+8) {
+                display: none;
+            }
+        }
+
         >:not(:first-child) {
             margin-top: var(--spacing);
         }

From 822835642f920a7bfd3cc1b2830cf6186eed1551 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 1 Apr 2019 14:22:52 +0300
Subject: [PATCH 44/49] isLoaded removed from state

---
 src/routes/Addons/Addons.js   |  7 +++--
 src/routes/Addons/styles.less | 50 +++++++++++++++++++----------------
 src/routes/Board/Board.js     |  6 +----
 3 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index bbb746753..b39a12c9f 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -27,8 +27,7 @@ class Addons extends Component {
 
         this.state = {
             selectedCategory: ADDON_CATEGORIES.OFFICIAL,
-            selectedAddonType: DEFAULT_TYPE,
-            isLoaded: true
+            selectedAddonType: DEFAULT_TYPE
         };
     }
 
@@ -78,7 +77,7 @@ class Addons extends Component {
 
     renderAddonPlaceholders() {
         const addonPlaceholders = [];
-        for (let placeholderNumber = 0; placeholderNumber < 6; placeholderNumber++) {
+        for (let placeholderNumber = 0; placeholderNumber < 20; placeholderNumber++) {
             addonPlaceholders.push(
                 <div key={placeholderNumber} className={styles['placeholder']}>
                     <div className={styles['logo-placeholder']}>
@@ -128,7 +127,7 @@ class Addons extends Component {
                 </div>
                 <div className={styles['scroll-container']}>
                     {
-                        this.state.isLoaded
+                        this.props.addons.length === 0
                             ?
                             this.renderAddonPlaceholders()
                             :
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 3fca515cc..11d139dad 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -110,29 +110,6 @@
             overflow: hidden;
             background-color: var(--color-backgroundlighter);
 
-            &:after {
-                content: " ";
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 50%;
-                width: 500%;
-                margin-left: -250%;
-                animation: placeholderAnimation 1s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
-            }
-
-            @keyframes placeholderAnimation {
-                0% {
-                    transform: translate3d(-30%, 0, 0);
-                }
-
-                100% {
-                    transform: translate3d(30%, 0, 0);
-                }
-            }
-
             .logo-placeholder {
                 flex: 1;
                 background-color: var(--color-secondarylighter20);
@@ -187,6 +164,33 @@
                     background-color: var(--color-secondarylighter20);
                 }
             }
+
+            &:after {
+                content: " ";
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 50%;
+                width: 500%;
+                margin-left: -250%;
+                animation: placeholderAnimation 1s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
+            }
+
+            @keyframes placeholderAnimation {
+                0% {
+                    transform: translate3d(-30%, 0, 0);
+                }
+
+                100% {
+                    transform: translate3d(30%, 0, 0);
+                }
+            }
+
+            &:nth-child(n+8) {
+                display: none;
+            }
         }
 
         >:not(:first-child) {
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 7b609e50d..88e519697 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -125,10 +125,6 @@ class Board extends PureComponent {
                 }
             ]
         };
-
-        this.state = {
-            isLoaded: true
-        }
     }
 
     onClick = (event) => {
@@ -172,7 +168,7 @@ class Board extends PureComponent {
         return (
             <div className={styles['board-container']}>
                 {
-                    this.state.isLoaded ?
+                    this.items.addonCatalogItems2.length === 0 || this.items.continueWatchingItems.length === 0 ?
                         this.renderMetaItemPlaceholders()
                         :
                         <Fragment>

From eb2dee45a0a086e4dc2180cdd85185bbaa5fec72 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 1 Apr 2019 18:41:19 +0300
Subject: [PATCH 45/49] loaders improvements

---
 src/routes/Addons/styles.less                |  3 ++-
 src/routes/Board/styles.less                 | 12 ++++++----
 src/routes/Detail/StreamsList/StreamsList.js |  5 ++--
 src/routes/Detail/StreamsList/styles.less    | 24 ++++++++------------
 4 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 11d139dad..315baef0c 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -103,6 +103,7 @@
 
         .placeholder {
             display: flex;
+            flex-direction: row;
             position: relative;
             z-index: 0;
             width: var(--addon-width);
@@ -175,7 +176,7 @@
                 width: 500%;
                 margin-left: -250%;
                 animation: placeholderAnimation 1s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%);
             }
 
             @keyframes placeholderAnimation {
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 92174354b..2b65afd6e 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -48,7 +48,9 @@
         .placeholder {
             flex: 1;
             margin: 1em;
+            padding: 0.4em;
             position: relative;
+            z-index: 0;
             overflow: hidden;
             background-color: var(--color-backgroundlighter);
 
@@ -78,10 +80,10 @@
                 right: 0;
                 bottom: 0;
                 left: 50%;
-                width: 600%;
-                margin-left: -300%;
-                animation: placeholderAnimation 0.8s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
+                width: 800%;
+                margin-left: -400%;
+                animation: placeholderAnimation 1s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 56%);
             }
 
             @keyframes placeholderAnimation {
@@ -94,7 +96,7 @@
                 }
             }
 
-            &:nth-child(n+8) {
+            &:nth-child(n+7) {
                 display: none;
             }
         }
diff --git a/src/routes/Detail/StreamsList/StreamsList.js b/src/routes/Detail/StreamsList/StreamsList.js
index dee270eb7..a70faa00b 100644
--- a/src/routes/Detail/StreamsList/StreamsList.js
+++ b/src/routes/Detail/StreamsList/StreamsList.js
@@ -9,9 +9,8 @@ const renderStreamPlaceholders = () => {
     for (let placeholderNumber = 0; placeholderNumber < 20; placeholderNumber++) {
         streamPlaceholders.push(
             <div key={placeholderNumber} className={styles['placeholder']}>
-                <div className={styles['logo-placeholder']}></div>
-                <div className={styles['text-placeholder']}></div>
-                <div className={styles['button-placeholder']}></div>
+                <div className={styles['logo-placeholder']} />
+                <div className={styles['text-placeholder']} />
             </div>
         )
     }
diff --git a/src/routes/Detail/StreamsList/styles.less b/src/routes/Detail/StreamsList/styles.less
index 28bdde8f2..7f512dada 100644
--- a/src/routes/Detail/StreamsList/styles.less
+++ b/src/routes/Detail/StreamsList/styles.less
@@ -23,28 +23,22 @@
             margin-top: var(--spacing);
             width: var(--stream-width);
             display: flex;
+            flex-direction: row;
             position: relative;
+            z-index: 0;
             overflow: hidden;
             background-color: var(--color-backgroundlighter);
             
             .logo-placeholder {
-                flex: 1;
                 margin: var(--spacing) 0 var(--spacing) var(--spacing);
+                width: calc(.2 * var(--stream-width));
                 height: calc(.2 * var(--stream-width));
                 background-color: var(--color-secondarylighter20);
             }
 
             .text-placeholder {
-                flex: 3;
-                margin: var(--spacing) 0 var(--spacing) var(--spacing);
-                height: calc(.2 * var(--stream-width));
-                background-color: var(--color-secondarylighter20);
-            }
-
-            .button-placeholder {
-                margin: var(--spacing) var(--spacing) var(--spacing) 0;
-                height: calc(.2 * var(--stream-width));
-                width: calc(0.07 * var(--stream-width));
+                flex: 1;
+                margin: var(--spacing);
                 background-color: var(--color-secondarylighter20);
             }
 
@@ -55,10 +49,10 @@
                 right: 0;
                 bottom: 0;
                 left: 50%;
-                width: 600%;
-                margin-left: -300%;
-                animation: placeholderAnimation 0.8s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
+                width: 800%;
+                margin-left: -400%;
+                animation: placeholderAnimation 1s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 56%);
             }
 
             @keyframes placeholderAnimation {

From 0a175402639a4438212b7d5c77f5bc72d21ca601 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 2 Apr 2019 14:56:04 +0300
Subject: [PATCH 46/49] separate functions; const instead of var; focus fixed

---
 src/routes/Calendar/Calendar.js | 163 ++++++++++++++++++--------------
 src/routes/Calendar/styles.less |  12 ++-
 2 files changed, 103 insertions(+), 72 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 5f257dc04..c370ca2a5 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -38,8 +38,7 @@ class Calendar extends Component {
 
     scrollToSelectedVideo = () => {
         if (this.selectedDateVideosContainerRef.current !== null) {
-            var topPosition = this.selectedDateVideosContainerRef.current.offsetTop;
-            this.videosScrollContainerRef.current.scrollTop = topPosition - this.videosScrollContainerRef.current.offsetTop;
+            this.videosScrollContainerRef.current.scrollTop = this.selectedDateVideosContainerRef.current.offsetTop - this.videosScrollContainerRef.current.offsetTop;
         } else {
             this.setState({ videoId: '' });
         }
@@ -47,9 +46,11 @@ class Calendar extends Component {
 
     changeDate = (event) => {
         const date = new Date(parseInt(event.currentTarget.dataset.date));
-        for (let metaItem of this.props.metaItems) {
-            let video = metaItem.videos.find((video) => {
-                return video.released.getFullYear() === date.getFullYear() && video.released.getMonth() === date.getMonth() && video.released.getDate() === date.getDate();
+        for (let mItem of this.props.metaItems) {
+            const video = mItem.videos.find((video) => {
+                return video.released.getFullYear() === date.getFullYear() &&
+                    video.released.getMonth() === date.getMonth() &&
+                    video.released.getDate() === date.getDate();
             });
             if (video) {
                 this.setState({ date, videoId: video.id });
@@ -62,8 +63,8 @@ class Calendar extends Component {
 
     showVideoInfo = (event) => {
         event.stopPropagation();
-        for (let metaItem of this.props.metaItems) {
-            let video = metaItem.videos.find((video) => video.id == event.currentTarget.dataset.videoId);
+        for (let mItem of this.props.metaItems) {
+            const video = mItem.videos.find((video) => video.id == event.currentTarget.dataset.videoId);
             if (video) {
                 this.setState({ date: new Date(video.released), videoId: video.id });
                 return;
@@ -76,11 +77,11 @@ class Calendar extends Component {
     getMonthInfo = (date) => {
         const monthDate = new Date(date);
         monthDate.setDate(1);
-        var padsCount = (monthDate.getDay() + 6) % 7;
+        const padsCount = (monthDate.getDay() + 6) % 7;
         monthDate.setMonth(monthDate.getMonth() + 1);
         monthDate.setDate(0);
-        var daysCount = monthDate.getDate();
-        var weeksCount = Math.ceil((padsCount + daysCount) / 7);
+        const daysCount = monthDate.getDate();
+        const weeksCount = Math.ceil((padsCount + daysCount) / 7);
 
         return {
             padsCount,
@@ -91,9 +92,9 @@ class Calendar extends Component {
 
     renderMonthButton(date) {
         return date.getMonth() === this.state.date.getMonth() ?
-            <div className={styles['month']}>{MONTHS[date.getMonth()]}</div>
+            <div className={styles['month-button']}>{MONTHS[date.getMonth()]}</div>
             :
-            <Input className={styles['month']} type={'button'} data-date={date.getTime()} onClick={this.changeDate}>{MONTHS[date.getMonth()]}</Input>
+            <Input className={styles['month-button']} type={'button'} data-date={date.getTime()} onClick={this.changeDate}>{MONTHS[date.getMonth()]}</Input>
     }
 
     renderCalendar = (videosForMonth) => {
@@ -102,9 +103,9 @@ class Calendar extends Component {
         for (let weekNumber = 0; weekNumber < weeksCount; weekNumber++) {
             weeks.push(
                 <div key={weekNumber} className={styles['week']}>
-                    {this.renderMonthDays(weekNumber, padsCount, daysCount, weeksCount, videosForMonth)}
+                    {this.renderMonthDays(weekNumber, padsCount, daysCount, videosForMonth)}
                 </div>
-            )
+            );
         }
 
         return (
@@ -114,28 +115,38 @@ class Calendar extends Component {
         );
     }
 
-    renderMonthDays = (weekNumber, padsCount, daysCount, weeksCount, videosForMonth) => {
+    renderMonthDays = (weekNumber, padsCount, daysCount, videosForMonth) => {
         const today = new Date();
         const days = [];
         for (let day = 0; day < 7; day++) {
+            const sequentDay = (weekNumber * 7) + (day - padsCount + 1);
             days.push(
                 day < padsCount && weekNumber === 0
                     ?
                     <div key={day} className={styles['pad']} />
                     :
-                    (weekNumber * 7) + (day - padsCount) < daysCount
+                    sequentDay <= daysCount
                         ?
                         <Input key={day}
-                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (weekNumber * 7) + (day - padsCount + 1) })}
+                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === sequentDay })}
                             type={'button'}
-                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (weekNumber * 7) + (day - padsCount + 1)).getTime()}
+                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), sequentDay).getTime()}
                             onClick={this.changeDate}
                         >
-                            <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === today.getFullYear() && this.state.date.getMonth() === today.getMonth() && ((weekNumber * 7) + day - padsCount + 1) === today.getDate() })}>{(weekNumber * 7) + (day - padsCount + 1)}</div>
+                            <div className={classnames(
+                                styles['date'],
+                                {
+                                    [styles['today']]: this.state.date.getFullYear() === today.getFullYear() &&
+                                        this.state.date.getMonth() === today.getMonth() &&
+                                        sequentDay === today.getDate()
+                                })}
+                            >
+                                {sequentDay}
+                            </div>
                             <div className={styles['posters-container']}>
                                 {
                                     videosForMonth
-                                        .filter((video) => video.released.getDate() === (weekNumber * 7) + (day - padsCount + 1))
+                                        .filter((video) => video.released.getDate() === sequentDay)
                                         .map((video) =>
                                             <div key={video.id}
                                                 style={{ backgroundImage: `url('${video.metaPoster}')` }}
@@ -149,14 +160,70 @@ class Calendar extends Component {
                         </Input>
                         :
                         null
-            )
+            );
         }
         return days;
     }
 
-    renderSideBar = (videoDates, videosForMonth) => {
+    renderVideosForMonth = (videoDate, videosForMonth) => {
         const today = new Date();
 
+        return (
+            videosForMonth
+                .filter((video) => video.released.getDate() === videoDate.getDate())
+                .map((video) =>
+                    <Input key={video.id}
+                        className={classnames(
+                            styles['video'],
+                            { [styles['selected']]: this.state.videoId === video.id },
+                            {
+                                [styles['today']]: video.released.getFullYear() === today.getFullYear() &&
+                                    video.released.getMonth() === today.getMonth() && video.released.getDate() === today.getDate() &&
+                                    this.state.videoId !== video.id
+                            }
+                        )}
+                        type={'button'}
+                        data-video-id={video.id}
+                        onClick={this.showVideoInfo}
+                    >
+                        <div className={styles['main-info']}>
+                            <div className={styles['meta-item-name']}>
+                                {video.metaName}
+                            </div>
+                            {
+                                video.season || video.episode
+                                    ?
+                                    <div className={styles['video-number']}>
+                                        S{video.season} E{video.episode}
+                                    </div>
+                                    :
+                                    null
+                            }
+                        </div>
+                        <div className={styles['name']}>
+                            {video.name}
+                        </div>
+                        {
+                            video.description
+                                ?
+                                <div className={styles['description']}>
+                                    {video.description}
+                                </div>
+                                :
+                                null
+                        }
+                        <Input className={styles['watch-button-container']} type={'link'} href={video.released.getTime() < today.getTime() ? '#/player' : '#/detail'}>
+                            <div className={styles['watch-button']}>
+                                <Icon className={styles['icon']} icon={'ic_play'} />
+                                <div className={styles['label']}>{video.released.getTime() < today.getTime() ? 'WATCH NOW' : 'SHOW'}</div>
+                            </div>
+                        </Input>
+                    </Input>
+                )
+        );
+    }
+
+    renderSideBar = (videoDates, videosForMonth) => {
         return (
             <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>
                 {
@@ -172,51 +239,7 @@ class Calendar extends Component {
                                 <div className={styles['date']}>
                                     {MONTHS[this.state.date.getMonth()].slice(0, 3)} {videoDate.getDate()}
                                 </div>
-                                {
-                                    videosForMonth
-                                        .filter((video) => video.released.getDate() === videoDate.getDate())
-                                        .map((video) =>
-                                            <Input key={video.id}
-                                                className={classnames(styles['video'], { [styles['selected']]: this.state.videoId === video.id }, { [styles['today']]: video.released.getFullYear() === today.getFullYear() && video.released.getMonth() === today.getMonth() && video.released.getDate() === today.getDate() && this.state.videoId !== video.id })}
-                                                type={'button'}
-                                                data-video-id={video.id}
-                                                onClick={this.showVideoInfo}
-                                            >
-                                                <div className={styles['main-info']}>
-                                                    <div className={styles['meta-item-name']}>
-                                                        {video.metaName}
-                                                    </div>
-                                                    {
-                                                        video.season || video.episode
-                                                            ?
-                                                            <div className={styles['video-number']}>
-                                                                S{video.season} E{video.episode}
-                                                            </div>
-                                                            :
-                                                            null
-                                                    }
-                                                </div>
-                                                <div className={styles['name']}>
-                                                    {video.name}
-                                                </div>
-                                                {
-                                                    video.description
-                                                        ?
-                                                        <div className={styles['description']}>
-                                                            {video.description}
-                                                        </div>
-                                                        :
-                                                        null
-                                                }
-                                                <Input className={styles['watch-button-container']} type={'link'} href={video.released.getTime() < today.getTime() ? '#/player' : '#/detail'}>
-                                                    <div className={styles['watch-button']}>
-                                                        <Icon className={styles['icon']} icon={'ic_play'} />
-                                                        <div className={styles['label']}>{video.released.getTime() < today.getTime() ? 'WATCH NOW' : 'SHOW'}</div>
-                                                    </div>
-                                                </Input>
-                                            </Input>
-                                        )
-                                }
+                                {this.renderVideosForMonth(videoDate, videosForMonth)}
                             </div>
                         )
                         :
@@ -263,10 +286,10 @@ class Calendar extends Component {
         return (
             <div className={styles['calendar-container']}>
                 <div className={styles['calendar']}>
-                    <div className={styles['months']}>
-                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() - 1), 1)}
+                    <div className={styles['month-buttons-container']}>
+                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() - 1, 1))}
                         {this.renderMonthButton(this.state.date)}
-                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1), 1)}
+                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1, 1))}
                     </div>
                     <div className={styles['week-days']}>
                         {DAYS.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
diff --git a/src/routes/Calendar/styles.less b/src/routes/Calendar/styles.less
index 8194b7981..8afda4cb6 100644
--- a/src/routes/Calendar/styles.less
+++ b/src/routes/Calendar/styles.less
@@ -15,12 +15,12 @@
         padding-right: calc(var(--spacing) * 0.5);
         flex: 1;
 
-        .months {
+        .month-buttons-container {
             padding-top: calc(var(--spacing) * 0.5);
             height: 3.5em;
             text-align: center;
 
-            .month {
+            .month-button {
                 padding: calc(var(--spacing) * 0.25);
                 width: 6em;
                 display: inline-block;
@@ -43,6 +43,7 @@
                     color: var(--color-surface);
 
                     &:hover {
+                        border-color: transparent;
                         color: var(--color-surfacelight);
                     }
                 }
@@ -154,6 +155,10 @@
                         &:focus {
                             border-color: var(--color-surfacelighter);
                         }
+
+                        &:hover {
+                            border-color: var(--color-primary);
+                        }
                     }
                 }
             }
@@ -256,6 +261,8 @@
                     }
 
                     &:hover {
+                        border-color: transparent;
+
                         .watch-button {
                             .icon {
                                 fill: var(--color-surfacelighter);
@@ -311,6 +318,7 @@
                 }
 
                 &:hover {
+                    border-color: transparent;
                     background-color: var(--color-primarydark60);
                 }
             }

From f906b5d6664786e99ff4404d8a40a88efcc49b40 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 3 Apr 2019 14:54:14 +0300
Subject: [PATCH 47/49] storybook fixed

---
 src/common/UserPanel/styles.less |   2 +-
 stories/index.stories.js         | 493 ++++++++++++++++---------------
 stories/styles.less              |  35 ++-
 3 files changed, 289 insertions(+), 241 deletions(-)

diff --git a/src/common/UserPanel/styles.less b/src/common/UserPanel/styles.less
index 463c79bfe..3de1bedb9 100644
--- a/src/common/UserPanel/styles.less
+++ b/src/common/UserPanel/styles.less
@@ -6,7 +6,7 @@
 
 .user-panel {
     width: var(--user-panel-width);
-    background-color: var(--color-background);
+    background-color: var(--color-backgroundlighter);
 
     .user-info {
         display: grid;
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 2401ba71f..4ab294ead 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Checkbox, LibraryItemList, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
+import { Checkbox, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
 import Addon from '../src/routes/Addons/Addon';
-import Stream from '../src/routes/Detail/StreamsList/Stream';
 import Video from '../src/routes/Detail/VideosList/Video';
 import VideosList from '../src/routes/Detail/VideosList';
+import Stream from '../src/routes/Detail/StreamsList/Stream';
 import StreamsList from '../src/routes/Detail/StreamsList';
 import colors from 'stremio-colors';
-import appStyles from '../src/app/styles';
+import appStyles from '../src/App/styles';
 import styles from './styles';
 
 const storyStyle = {
@@ -16,14 +16,6 @@ const storyStyle = {
     minHeight: 'initial'
 };
 
-const videosListStyle = {
-    position: 'absolute',
-    height: '100%',
-    padding: '10px',
-    minHeight: 'initial',
-    background: colors.backgroundlighter
-}
-
 const streamsListStyle = {
     position: 'absolute',
     height: '100%',
@@ -32,51 +24,57 @@ const streamsListStyle = {
     background: colors.backgroundlighter
 }
 
+const CONTINUE_WATCHING_MENU = [
+    {
+        label: 'Play',
+        type: 'play'
+    },
+    {
+        label: 'Dismiss',
+        type: 'dismiss'
+    }
+];
+
 storiesOf('Addon', module)
     .add('not-installed', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <Addon
-                onToggleClicked={function() { alert('1') }}
+                className={styles['addon']}
                 logo={'ic_series'}
                 name={'Watch Hub'}
                 version={'1.3.0'}
                 isInstalled={false}
                 types={['Movies', 'Series']}
+                hostname={'piratebay-stremio-addon.herokuapp'}
                 description={'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.'}
+                onToggleClicked={function() { alert('1') }}
             />
         </div>
     ))
     .add('installed', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <Addon
+                className={styles['addon']}
                 name={'Cinemeta'}
                 version={'2.4.0'}
                 isInstalled={true}
                 types={['Movies', 'Series']}
+                hostname={'pct.best4stremio.space'}
                 description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'}
             />
         </div>
     ))
-    .add('long-description', () => (
+    .add('long-text', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <Addon
+                className={styles['addon']}
                 logo={'ic_youtube_small'}
-                name={'YouTube'}
-                version={'1.3.0'}
-                isInstalled={true}
-                types={['Channels', 'Videos']}
-                description={'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.'}
-            />
-        </div>
-    ))
-    .add('long-urls', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <Addon
-                name={'OpenSubtitles'}
-                version={'1.3.0'}
+                name={'YouTubeYouTube YouTubeYouTube'}
+                version={'1.3.0.1.3.0.1.3.0.1.3.0'}
                 isInstalled={false}
-                types={['Movies', 'Series']}
-                description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'}
+                types={['Channels', 'Videos', 'Movies', 'Channels', 'Movies', 'Videos', 'Movies', 'Videos', 'Channels']}
+                hostname={'piratebay-stremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuappstremio-addon.herokuapp.com'}
+                description={'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.'}
             />
         </div>
     ));
@@ -84,93 +82,98 @@ storiesOf('Addon', module)
 storiesOf('Checkbox', module)
     .add('checked-disabled', () => (
         <div style={storyStyle} className={appStyles['app']}>
-            <Checkbox
-                className={styles['checkbox-size']}
-                checked={true}
-                enabled={false}
-            />
+            <Checkbox className={styles['checkbox-size']} checked={true} disabled={true}>
+                <div />
+            </Checkbox>
         </div>
     ))
     .add('not-checked-disabled', () => (
         <div style={storyStyle} className={appStyles['app']}>
-            <Checkbox
-                className={styles['checkbox-size']}
-                checked={false}
-                enabled={false}
-            />
+            <Checkbox className={styles['checkbox-size']} checked={false} disabled={true}>
+                <div />
+            </Checkbox>
         </div>
     ))
     .add('not-checked', () => (
         <div style={storyStyle} className={appStyles['app']}>
-            <Checkbox
-                className={styles['checkbox-size']}
-                checked={false}
-                enabled={true}
-            />
+            <Checkbox className={styles['checkbox-size']} checked={false} disabled={false}>
+                <div />
+            </Checkbox>
         </div>
     ))
     .add('checked', () => (
         <div style={storyStyle} className={appStyles['app']}>
-            <Checkbox
-                className={styles['checkbox-size']}
-                checked={true}
-                enabled={true}
-            />
-        </div>
-    ))
-
-storiesOf('LibraryItemList', module)
-    .add('library item list', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <LibraryItemList
-                poster={'http://t3.gstatic.com/images?q=tbn:ANd9GcST1uigGrukMvSAVUefFNuQ0NMZAR-FjfFIwSZFCR5ZkyMSgCyj'}
-                title={'Thor Ragnarok'}
-                type={'Movies'}
-                releaseInfo={new Date(2018)}
-                released={new Date(2018, 4, 23)}
-                views={12}
-                hours={1245}
-                lastViewed={new Date(2018, 4, 23)}
-            />
+            <Checkbox className={styles['checkbox-size']} checked={true} disabled={false}>
+                <div />
+            </Checkbox>
         </div>
     ));
 
 storiesOf('MetaItem', module)
-    .add('poster', () => (
+    .add('continue-watching-poster', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <MetaItem
-                poster={'https://m.media-amazon.com/images/M/MV5BODQ0NDhjYWItYTMxZi00NTk2LWIzNDEtOWZiYWYxZjc2MTgxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg'}
+                className={styles['meta-item-continue-watching']}
+                id={'0'}
+                type={'movie'}
+                posterShape={'poster'}
+                poster={'https://blog.stremio.com/wp-content/uploads/2018/11/product-post-360x240.jpg'}
+                title={'Movie title'}
+                progress={0.7}
+                menuOptions={CONTINUE_WATCHING_MENU}
             />
         </div>
     ))
-    .add('with-title', () => (
+    .add('continue-watching-square', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <MetaItem
-                title={'Red Sparrow'}
-                poster={'https://m.media-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_.jpg'}
+                className={styles['meta-item-continue-watching']}
+                id={'1'}
+                type={'movie'}
+                posterShape={'square'}
+                title={'Movie title'}
+                progress={0.2}
+                menuOptions={CONTINUE_WATCHING_MENU}
             />
         </div>
     ))
-    .add('with-progress', () => (
+    .add('addon-catalog-poster-movie', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <MetaItem
-                play={function() { alert('32423') }}
-                showInfo={function() { alert('222') }}
-                progress={50}
-                poster={'https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_.jpg'}
+                id={'0'}
+                type={'movie'}
+                posterShape={'poster'}
+                poster={'qwe'}
+                title={'Movie title'}
+                progress={0.7}
             />
         </div>
     ))
-    .add('landscape-shape', () => (
+    .add('addon-catalog-square-channel', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <MetaItem
+                id={'120'}
+                type={'channel'}
+                posterShape={'square'}
+                poster={'qwe'}
+                title={'Channel title'}
+                progress={0.7}
+            />
+        </div>
+    ))
+    .add('addon-catalog-landscape-series', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <MetaItem
+                id={'1200'}
+                type={'series'}
                 posterShape={'landscape'}
-                poster={'https://m.media-amazon.com/images/M/MV5BYWVhZjZkYTItOGIwYS00NmRkLWJlYjctMWM0ZjFmMDU4ZjEzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg'}
+                poster={'qwe'}
+                title={'Series title'}
+                progress={0.7}
             />
         </div>
     ));
 
-
 storiesOf('ShareAddon', module)
     .add('share addon', () => (
         <div style={storyStyle} className={appStyles['app']}>
@@ -178,6 +181,161 @@ storiesOf('ShareAddon', module)
         </div>
     ));
 
+storiesOf('UserPanel', module)
+    .add('anonymous', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <UserPanel
+                resizeWindow={function() { alert('asdas') }}
+            />
+        </div>
+    ))
+    .add('without avatar', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <UserPanel
+                resizeWindow={function() { alert('asdas') }}
+                email={'animals@mail.com'}
+            />
+        </div>
+    ))
+    .add('with avatar', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <UserPanel
+                resizeWindow={function() { alert('asdas') }}
+                avatar={'https://www.stremio.com/website/home-stremio.png'}
+                email={'animals@mail.com'}
+            />
+        </div>
+    ));
+
+storiesOf('Video', module)
+    .add('poster-upcoming-watched-long-title', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <Video
+                className={styles['video']}
+                id={'1'}
+                poster={'https://www.stremio.com/website/home-stremio.png'}
+                episode={2}
+                title={'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
+                released={new Date(2018, 4, 23)}
+                isUpcoming={true}
+                isWatched={true}
+                season={2}
+                onClick={function() { alert(8) }}
+            />
+        </div>
+    ))
+    .add('empty-poster-progress', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <Video
+                className={styles['video']}
+                id={'2'}
+                poster={''}
+                episode={2}
+                title={'The Bing Bran Hypothesis'}
+                progress={20}
+                season={2}
+                onClick={function() { alert(8) }}
+            />
+        </div>
+    ))
+    .add('no-poster-upcoming', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <Video
+                className={styles['video']}
+                id={'3'}
+                episode={4}
+                title={'The Luminous Fish Effect'}
+                isUpcoming={true}
+                season={2}
+            />
+        </div>
+    ))
+    .add('no-poster-upcoming-watched', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <Video
+                className={styles['video']}
+                id={'4'}
+                poster={'5'}
+                episode={5}
+                title={'The Dumpling Paradox'}
+                isUpcoming={true}
+                isWatched={true}
+                season={2}
+            />
+        </div>
+    ))
+    .add('no-poster-long-title-progress', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <Video
+                className={styles['video']}
+                id={'5'}
+                episode={8}
+                title={'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
+                released={new Date(2018, 4, 23)}
+                isUpcoming={true}
+                progress={50}
+                season={2}
+            />
+        </div>
+    ));
+
+storiesOf('VideosList', module)
+    .add('list of videos', () => (
+        <div className={appStyles['app']}>
+            <VideosList
+                className={styles['videos-list']}
+                videos={[
+                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
+                    { id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
+                    { id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
+                    { id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                    { id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                    { id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                    { id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                    { id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                    { id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                    { id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                    { id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                    { id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                    { id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                    { id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                    { id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                    { id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                    { id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                    { id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                    { id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                    { id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                    { id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                    { id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+                    { id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                    { id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                    { id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+                    { id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                    { id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                    { id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                    { id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                    { id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+                    { id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                    { id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
+                ]}
+            />
+        </div>
+    ));
+
 storiesOf('Stream', module)
     .add('no-logo-title', () => (
         <div style={storyStyle} className={appStyles['app']}>
@@ -228,170 +386,35 @@ storiesOf('Stream', module)
         </div>
     ));
 
-storiesOf('UserPanel', module)
-    .add('anonymous', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <UserPanel
-                resizeWindow={function() { alert('asdas') }}
-            />
-        </div>
-    ))
-    .add('without avatar', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <UserPanel
-                resizeWindow={function() { alert('asdas') }}
-                email={'animals@mail.com'}
-            />
-        </div>
-    ))
-    .add('with avatar', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <UserPanel
-                resizeWindow={function() { alert('asdas') }}
-                avatar={'https://www.stremio.com/website/home-stremio.png'}
-                email={'animals@mail.com'}
-            />
-        </div>
-    ));
-
-storiesOf('Video', module)
-    .add('poster-upcoming-watched-long-title', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <Video
-                className={styles['video']}
-                poster={'https://www.stremio.com/website/home-stremio.png'}
-                episode={2}
-                title={'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
-                released={new Date(2018, 4, 23)}
-                isUpcoming={true}
-                isWatched={true}
-                onVideoClicked={function() { alert(8) }}
-            />
-        </div>
-    ))
-    .add('poster-watched', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <Video
-                className={styles['video']}
-                poster={'https://www.stremio.com/website/home-stremio.png'}
-                episode={2}
-                title={'The Bing Bran Hypothesis'}
-                isWatched={true}
-                onVideoClicked={function() { alert(8) }}
-            />
-        </div>
-    ))
-    .add('no-poster-progress', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <Video
-                className={styles['video']}
-                episode={4}
-                title={'The Luminous Fish Effect'}
-                progress={50}
-            />
-        </div>
-    ))
-    .add('poster-progress', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <Video
-                className={styles['video']}
-                poster={'5'}
-                episode={5}
-                title={'The Dumpling Paradox'}
-                progress={50}
-            />
-        </div>
-    ))
-    .add('no-poster-upcoming', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <Video
-                className={styles['video']}
-                episode={8}
-                title={'The Loobendfeld Decay'}
-                released={new Date(2018, 4, 23)}
-                isUpcoming={true}
-            />
-        </div>
-    ));
-
-storiesOf('VideosList', module)
-    .add('list of videos', () => (
-        <div style={videosListStyle} className={appStyles['app']}>
-            <VideosList videos={[
-                { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
-                { id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
-                { id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
-                { id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                { id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                { id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                { id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                { id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                { id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                { id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                { id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                { id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                { id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                { id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                { id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                { id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                { id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                { id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                { id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                { id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                { id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                { id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-                { id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                { id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                { id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-                { id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                { id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                { id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                { id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                { id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-                { id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                { id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
-            ]}></VideosList>
-        </div>
-    ));
-
 storiesOf('StreamsList', module)
     .add('short list of streams', () => (
         <div style={streamsListStyle} className={appStyles['app']}>
-            <StreamsList streams={[
-                { id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
-                { id: '2', logo: '', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 50 },
-                { id: '3', logo: '', sourceName: 'Juan Carlos 2', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
-                { id: '4', logo: 'ic_amazon', sourceName: 'Amazon', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: '', progress: 0 }
-            ]}></StreamsList>
+            <StreamsList
+                streams={[
+                    { id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
+                    { id: '2', logo: '', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 50 },
+                    { id: '3', logo: '', sourceName: 'Juan Carlos 2', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
+                    { id: '4', logo: 'ic_amazon', sourceName: 'Amazon', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: '', progress: 0 }
+                ]}
+                onMoreAddonsClicked={function() { alert(123) }}
+            />
         </div>
     ))
     .add('long list of streams', () => (
         <div style={streamsListStyle} className={appStyles['app']}>
-            <StreamsList streams={[
-                { id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
-                { id: '2', logo: '', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 50 },
-                { id: '3', logo: '', sourceName: 'Juan Carlos 2', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
-                { id: '4', logo: 'ic_amazon', sourceName: 'Amazon', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: '', progress: 0 },
-                { id: '5', logo: 'ic_amazon', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 0 },
-                { id: '6', logo: 'ic_netflix', sourceName: 'Netflix', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: 'HDTV', progress: 50 },
-                { id: '7', logo: '', sourceName: 'IBERIAN', title: '', subtitle: '', progress: 0 },
-                { id: '8', logo: 'ic_netflix', sourceName: 'Netflix', title: 'SD', subtitle: '', progress: 50 },
-                { id: '9', logo: 'ic_itunes', sourceName: 'Netflix', title: 'SD', subtitle: 'HDTV', progress: 50 },
-                { id: '10', logo: 'ic_amazon', sourceName: 'Amazon', title: '', subtitle: 'HDTV', progress: 0 }
-            ]}></StreamsList>
+            <StreamsList
+                streams={[
+                    { id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
+                    { id: '2', logo: '', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 50 },
+                    { id: '3', logo: '', sourceName: 'Juan Carlos 2', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
+                    { id: '4', logo: 'ic_amazon', sourceName: 'Amazon', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: '', progress: 0 },
+                    { id: '5', logo: 'ic_amazon', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 0 },
+                    { id: '6', logo: 'ic_netflix', sourceName: 'Netflix', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: 'HDTV', progress: 50 },
+                    { id: '7', logo: '', sourceName: 'IBERIAN', title: '', subtitle: '', progress: 0 },
+                    { id: '8', logo: 'ic_netflix', sourceName: 'Netflix', title: 'SD', subtitle: '', progress: 50 },
+                    { id: '9', logo: 'ic_itunes', sourceName: 'Netflix', title: 'SD', subtitle: 'HDTV', progress: 50 },
+                    { id: '10', logo: 'ic_amazon', sourceName: 'Amazon', title: '', subtitle: 'HDTV', progress: 0 }
+                ]}
+            />
         </div>
     ));
\ No newline at end of file
diff --git a/stories/styles.less b/stories/styles.less
index fbffe29e8..bc9bc4f9f 100644
--- a/stories/styles.less
+++ b/stories/styles.less
@@ -1,7 +1,32 @@
-.checkbox-size {
-    height: 16px;
-    width: 16px;
+.addon {
+    --addon-width: 960px;
+    --button-border-width: 2px;
+    font-size: 14px;
 }
-.video, .stream {
-    margin: 10px;
+
+.checkbox-size {
+    --icon-size: 1.2em;
+    --icon-color: var(--color-surfacelighter);
+}
+
+.meta-item-continue-watching {
+    --play-icon-visibility: visible;
+}
+
+.video {
+    --video-width: 360px;
+    --spacing: 8px;
+    font-size: 12px;
+}
+
+.videos-list {
+    --spacing: 8px;
+    --video-width: 360px;
+    font-size: 12px;
+
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    bottom: 0;
+    padding: calc(3 * var(--spacing)) 0;
 }
\ No newline at end of file

From bcb11ba2660385219c0cd8734a61ffe220501b06 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 4 Apr 2019 11:16:56 +0300
Subject: [PATCH 48/49] ModalsContainerProvider moved

---
 .../ModalsContainerProvider.js                     |  9 ++-------
 .../Router/Route/ModalsContainerProvider/index.js  |  3 +++
 .../Route/ModalsContainerProvider/styles.less      | 13 +++++++++++++
 src/common/Router/Route/Route.js                   |  2 +-
 src/common/Router/Route/styles.less                | 14 --------------
 5 files changed, 19 insertions(+), 22 deletions(-)
 rename src/common/Router/Route/{ => ModalsContainerProvider}/ModalsContainerProvider.js (72%)
 create mode 100644 src/common/Router/Route/ModalsContainerProvider/index.js
 create mode 100644 src/common/Router/Route/ModalsContainerProvider/styles.less

diff --git a/src/common/Router/Route/ModalsContainerProvider.js b/src/common/Router/Route/ModalsContainerProvider/ModalsContainerProvider.js
similarity index 72%
rename from src/common/Router/Route/ModalsContainerProvider.js
rename to src/common/Router/Route/ModalsContainerProvider/ModalsContainerProvider.js
index 44f2ee914..91828e996 100644
--- a/src/common/Router/Route/ModalsContainerProvider.js
+++ b/src/common/Router/Route/ModalsContainerProvider/ModalsContainerProvider.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { ModalsContainerContext } from 'stremio-common';
+import styles from './styles';
 
 class ModalsContainerProvider extends Component {
     constructor(props) {
@@ -13,7 +13,6 @@ class ModalsContainerProvider extends Component {
 
     shouldComponentUpdate(nextProps, nextState) {
         return nextState.modalsContainer !== this.state.modalsContainer ||
-            nextProps.modalsContainerClassName !== this.props.modalsContainerClassName ||
             nextProps.children !== this.props.children;
     }
 
@@ -25,14 +24,10 @@ class ModalsContainerProvider extends Component {
         return (
             <ModalsContainerContext.Provider value={this.state.modalsContainer}>
                 {this.state.modalsContainer ? this.props.children : null}
-                <div ref={this.modalsContainerRef} className={this.props.modalsContainerClassName} />
+                <div ref={this.modalsContainerRef} className={styles['modals-container']} />
             </ModalsContainerContext.Provider>
         );
     }
 }
 
-ModalsContainerProvider.propTypes = {
-    modalsContainerClassName: PropTypes.string
-};
-
 export default ModalsContainerProvider;
diff --git a/src/common/Router/Route/ModalsContainerProvider/index.js b/src/common/Router/Route/ModalsContainerProvider/index.js
new file mode 100644
index 000000000..71c3e7ef8
--- /dev/null
+++ b/src/common/Router/Route/ModalsContainerProvider/index.js
@@ -0,0 +1,3 @@
+import ModalsContainerProvider from './ModalsContainerProvider';
+
+export default ModalsContainerProvider;
diff --git a/src/common/Router/Route/ModalsContainerProvider/styles.less b/src/common/Router/Route/ModalsContainerProvider/styles.less
new file mode 100644
index 000000000..f0d7a65c7
--- /dev/null
+++ b/src/common/Router/Route/ModalsContainerProvider/styles.less
@@ -0,0 +1,13 @@
+  .modals-container {
+      width: 0;
+      height: 0;
+
+      >:global(.modal-container) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          z-index: 1;
+      }
+  }
\ No newline at end of file
diff --git a/src/common/Router/Route/Route.js b/src/common/Router/Route/Route.js
index cb502d424..04f5c12fc 100644
--- a/src/common/Router/Route/Route.js
+++ b/src/common/Router/Route/Route.js
@@ -15,7 +15,7 @@ class Route extends Component {
     render() {
         return (
             <div className={styles['route']}>
-                <ModalsContainerProvider modalsContainerClassName={styles['modals-container']}>
+                <ModalsContainerProvider>
                     <FocusableProvider onModalsContainerDomTreeChange={this.onModalsContainerDomTreeChange}>
                         <div className={styles['route-content']}>
                             {this.props.children}
diff --git a/src/common/Router/Route/styles.less b/src/common/Router/Route/styles.less
index 3ea772dee..22fef257f 100644
--- a/src/common/Router/Route/styles.less
+++ b/src/common/Router/Route/styles.less
@@ -10,20 +10,6 @@
         height: 100%;
     }
 
-    .modals-container {
-        width: 0;
-        height: 0;
-
-        >:global(.modal-container) {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 1;
-        }
-    }
-
     &:not(:last-child) {
         display: none;
     }

From f7c82d6ad944b3040b376b056c6ec0f28f74ca74 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 4 Apr 2019 11:17:52 +0300
Subject: [PATCH 49/49] ModalsContainerProvider added to storybook

---
 stories/index.stories.js | 171 +++++++++++++++++++++------------------
 stories/styles.less      |   4 +-
 2 files changed, 96 insertions(+), 79 deletions(-)

diff --git a/stories/index.stories.js b/stories/index.stories.js
index 4ab294ead..dea353c9a 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Checkbox, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
+import { Checkbox, MetaItem, ShareAddon, UserPanel, FocusableProvider } from 'stremio-common';
 import Addon from '../src/routes/Addons/Addon';
 import Video from '../src/routes/Detail/VideosList/Video';
 import VideosList from '../src/routes/Detail/VideosList';
 import Stream from '../src/routes/Detail/StreamsList/Stream';
 import StreamsList from '../src/routes/Detail/StreamsList';
+import ModalsContainerProvider from '../src/common/Router/Route/ModalsContainerProvider';
 import colors from 'stremio-colors';
 import appStyles from '../src/App/styles';
 import styles from './styles';
@@ -35,6 +36,10 @@ const CONTINUE_WATCHING_MENU = [
     }
 ];
 
+const onModalsContainerDomTreeChange = ({ modalsContainerElement }) => {
+    return modalsContainerElement.childElementCount === 0;
+};
+
 storiesOf('Addon', module)
     .add('not-installed', () => (
         <div style={storyStyle} className={appStyles['app']}>
@@ -111,31 +116,39 @@ storiesOf('Checkbox', module)
 
 storiesOf('MetaItem', module)
     .add('continue-watching-poster', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <MetaItem
-                className={styles['meta-item-continue-watching']}
-                id={'0'}
-                type={'movie'}
-                posterShape={'poster'}
-                poster={'https://blog.stremio.com/wp-content/uploads/2018/11/product-post-360x240.jpg'}
-                title={'Movie title'}
-                progress={0.7}
-                menuOptions={CONTINUE_WATCHING_MENU}
-            />
-        </div>
+        <ModalsContainerProvider>
+            <FocusableProvider onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
+                <div style={storyStyle} className={appStyles['app']}>
+                    <MetaItem
+                        className={styles['meta-item-continue-watching']}
+                        id={'0'}
+                        type={'movie'}
+                        posterShape={'poster'}
+                        poster={'https://blog.stremio.com/wp-content/uploads/2018/11/product-post-360x240.jpg'}
+                        title={'Movie title'}
+                        progress={0.7}
+                        menuOptions={CONTINUE_WATCHING_MENU}
+                    />
+                </div>
+            </FocusableProvider>
+        </ModalsContainerProvider>
     ))
     .add('continue-watching-square', () => (
-        <div style={storyStyle} className={appStyles['app']}>
-            <MetaItem
-                className={styles['meta-item-continue-watching']}
-                id={'1'}
-                type={'movie'}
-                posterShape={'square'}
-                title={'Movie title'}
-                progress={0.2}
-                menuOptions={CONTINUE_WATCHING_MENU}
-            />
-        </div>
+        <ModalsContainerProvider>
+            <FocusableProvider onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
+                <div style={storyStyle} className={appStyles['app']}>
+                    <MetaItem
+                        className={styles['meta-item-continue-watching']}
+                        id={'1'}
+                        type={'movie'}
+                        posterShape={'square'}
+                        title={'Movie title'}
+                        progress={0.2}
+                        menuOptions={CONTINUE_WATCHING_MENU}
+                    />
+                </div>
+            </FocusableProvider>
+        </ModalsContainerProvider>
     ))
     .add('addon-catalog-poster-movie', () => (
         <div style={storyStyle} className={appStyles['app']}>
@@ -281,59 +294,63 @@ storiesOf('Video', module)
 
 storiesOf('VideosList', module)
     .add('list of videos', () => (
-        <div className={appStyles['app']}>
-            <VideosList
-                className={styles['videos-list']}
-                videos={[
-                    { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
-                    { id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
-                    { id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
-                    { id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                    { id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                    { id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                    { id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                    { id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                    { id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                    { id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                    { id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                    { id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                    { id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                    { id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                    { id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                    { id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                    { id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                    { id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-                    { id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                    { id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-                    { id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                    { id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-                    { id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                    { id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                    { id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-                    { id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                    { id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-                    { id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-                    { id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-                    { id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-                    { id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-                    { id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
-                ]}
-            />
-        </div>
+        <ModalsContainerProvider>
+            <FocusableProvider onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
+                <div className={appStyles['app']}>
+                    <VideosList
+                        className={styles['videos-list']}
+                        videos={[
+                            { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
+                            { id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
+                            { id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
+                            { id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                            { id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                            { id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                            { id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                            { id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                            { id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                            { id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                            { id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                            { id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                            { id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                            { id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                            { id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                            { id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                            { id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                            { id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
+                            { id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                            { id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
+                            { id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                            { id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+                            { id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                            { id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                            { id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+                            { id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                            { id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
+                            { id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
+                            { id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
+                            { id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
+                            { id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
+                            { id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
+                        ]}
+                    />
+                </div>
+            </FocusableProvider>
+        </ModalsContainerProvider>
     ));
 
 storiesOf('Stream', module)
diff --git a/stories/styles.less b/stories/styles.less
index bc9bc4f9f..8ad56cdf4 100644
--- a/stories/styles.less
+++ b/stories/styles.less
@@ -19,13 +19,13 @@
     font-size: 12px;
 }
 
-.videos-list {
+.videos-list, :global(.detail-popup-container) {
     --spacing: 8px;
     --video-width: 360px;
     font-size: 12px;
 
     position: absolute;
-    z-index: 2;
+    z-index: 1;
     top: 0;
     bottom: 0;
     padding: calc(3 * var(--spacing)) 0;