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] 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