From 582c9ecbbe0060b23482cad8858ac82eed85005c Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 17:44:21 +0200 Subject: [PATCH 01/21] stream moved --- src/{common => routes/Detail/StreamsList}/Stream/Stream.js | 0 src/{common => routes/Detail/StreamsList}/Stream/index.js | 0 src/{common => routes/Detail/StreamsList}/Stream/styles.less | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename src/{common => routes/Detail/StreamsList}/Stream/Stream.js (100%) rename src/{common => routes/Detail/StreamsList}/Stream/index.js (100%) rename src/{common => routes/Detail/StreamsList}/Stream/styles.less (100%) diff --git a/src/common/Stream/Stream.js b/src/routes/Detail/StreamsList/Stream/Stream.js similarity index 100% rename from src/common/Stream/Stream.js rename to src/routes/Detail/StreamsList/Stream/Stream.js diff --git a/src/common/Stream/index.js b/src/routes/Detail/StreamsList/Stream/index.js similarity index 100% rename from src/common/Stream/index.js rename to src/routes/Detail/StreamsList/Stream/index.js diff --git a/src/common/Stream/styles.less b/src/routes/Detail/StreamsList/Stream/styles.less similarity index 100% rename from src/common/Stream/styles.less rename to src/routes/Detail/StreamsList/Stream/styles.less From f863b5a0b999d27d927c703088ed2f8d1a36490f Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 17:44:48 +0200 Subject: [PATCH 02/21] video moved --- .../Detail/VideosList}/Video/Video.js | 10 +++++----- .../Detail/VideosList}/Video/index.js | 0 .../Detail/VideosList}/Video/styles.less | 7 +++++-- 3 files changed, 10 insertions(+), 7 deletions(-) rename src/{common => routes/Detail/VideosList}/Video/Video.js (91%) rename src/{common => routes/Detail/VideosList}/Video/index.js (100%) rename src/{common => routes/Detail/VideosList}/Video/styles.less (92%) diff --git a/src/common/Video/Video.js b/src/routes/Detail/VideosList/Video/Video.js similarity index 91% rename from src/common/Video/Video.js rename to src/routes/Detail/VideosList/Video/Video.js index 1964a9b93..6d25b3d40 100644 --- a/src/common/Video/Video.js +++ b/src/routes/Detail/VideosList/Video/Video.js @@ -22,13 +22,13 @@ const renderPoster = (poster) => { ); } -const renderTitle = (number, title) => { +const renderTitle = (episode, title) => { if (title.length === 0) { return null; } return ( -
{number}. {title.length > MAX_TITLE_SYMBOLS ? title.slice(0, MAX_TITLE_SYMBOLS) + '...' : title}
+
{episode}. {title.length > MAX_TITLE_SYMBOLS ? title.slice(0, MAX_TITLE_SYMBOLS) + '...' : title}
); } @@ -95,7 +95,7 @@ const Video = (props) => {
{renderPoster(props.poster)}
- {renderTitle(props.number, props.title)} + {renderTitle(props.episode, props.title)} {renderReleasedDate(props.released)} {renderLabels(props.isUpcoming, props.isWatched)}
@@ -111,7 +111,7 @@ const Video = (props) => { Video.propTypes = { className: PropTypes.string, poster: PropTypes.string.isRequired, - number: PropTypes.number.isRequired, + episode: PropTypes.number.isRequired, title: PropTypes.string.isRequired, released: PropTypes.instanceOf(Date).isRequired, isWatched: PropTypes.bool.isRequired, @@ -121,7 +121,7 @@ Video.propTypes = { }; Video.defaultProps = { poster: '', - number: 0, + episode: 0, title: '', released: new Date(''), //Invalid Date isWatched: false, diff --git a/src/common/Video/index.js b/src/routes/Detail/VideosList/Video/index.js similarity index 100% rename from src/common/Video/index.js rename to src/routes/Detail/VideosList/Video/index.js diff --git a/src/common/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less similarity index 92% rename from src/common/Video/styles.less rename to src/routes/Detail/VideosList/Video/styles.less index 5ea778361..fa892ad69 100644 --- a/src/common/Video/styles.less +++ b/src/routes/Detail/VideosList/Video/styles.less @@ -25,6 +25,8 @@ .upcoming-label, .watched-label { font-size: 10px; + line-height: 15px; + border-width: 2px; border-radius: 2px; } @@ -84,15 +86,16 @@ .upcoming-label, .watched-label { padding: 0 0.6em; font-weight: 600; + border-style: solid; color: @colorwhite; } .upcoming-label { - background-color: @colorsignal5; + border-color: @colorsignal5; } .watched-label { - background-color: @colorprimlight; + border-color: @colorprimlight; } } } From 8fd7d8e60c1eb4c2e9a93bbc2713e8f84ed87f8b Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 17:45:05 +0200 Subject: [PATCH 03/21] videos list implemented --- src/routes/Detail/VideosList/VideosList.js | 86 ++++++++++++++++++++++ src/routes/Detail/VideosList/index.js | 3 + src/routes/Detail/VideosList/styles.less | 85 +++++++++++++++++++++ 3 files changed, 174 insertions(+) create mode 100644 src/routes/Detail/VideosList/VideosList.js create mode 100644 src/routes/Detail/VideosList/index.js create mode 100644 src/routes/Detail/VideosList/styles.less diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js new file mode 100644 index 000000000..8f6499f8b --- /dev/null +++ b/src/routes/Detail/VideosList/VideosList.js @@ -0,0 +1,86 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import Icon from 'stremio-icons/dom'; +import Video from './Video'; +import styles from './styles'; + +class VideosList extends Component { + constructor(props) { + super(props); + + this.seasons = this.props.videos.map((video) => video.season) + .filter((season, index, seasons) => seasons.indexOf(season) === index); + + this.state = { + selectedSeason: this.seasons[0] + } + } + + changeSeason = (event) => { + this.setState({ selectedSeason: parseInt(event.target.value) }); + } + + shouldComponentUpdate(nextProps, nextState) { + return nextState.selectedSeason !== this.state.selectedSeason; + } + + onPrevButtonClicked = () => { + const prevSeasonIndex = Math.max(this.seasons.indexOf(this.state.selectedSeason) - 1, 0); + this.setState({ selectedSeason: this.seasons[prevSeasonIndex] }); + } + + onNextButtonClicked = () => { + const nextSeasonIndex = Math.min(this.seasons.indexOf(this.state.selectedSeason) + 1, this.seasons.length - 1); + this.setState({ selectedSeason: this.seasons[nextSeasonIndex] }); + } + + render() { + return ( +
+
+
+ +
+ +
+ +
+
+
+
+ {this.props.videos + .filter((video) => video.season === this.state.selectedSeason) + .map((video) => +
+
+
+ ); + } +} + +VideosList.propTypes = { + videos: PropTypes.arrayOf(PropTypes.object).isRequired +}; +VideosList.defaultProps = { + videos: [] +}; + +export default VideosList; diff --git a/src/routes/Detail/VideosList/index.js b/src/routes/Detail/VideosList/index.js new file mode 100644 index 000000000..bea9d6457 --- /dev/null +++ b/src/routes/Detail/VideosList/index.js @@ -0,0 +1,3 @@ +import VideosList from './VideosList'; + +export default VideosList; diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less new file mode 100644 index 000000000..3723c0797 --- /dev/null +++ b/src/routes/Detail/VideosList/styles.less @@ -0,0 +1,85 @@ +@import 'stremio-colors'; + +@scroll-container-width: 392px; +@seasons-bar-height: 50px; +@spacing: 8px; + +.videos-list-container { + .seasons-bar { + height: @seasons-bar-height; + margin-bottom: @spacing; + + .button-container { + width: (@seasons-bar-height * 1.5); + } + } + + .scroll-container { + width: @scroll-container-width; + margin: 0 @spacing; + + .videos-list { + padding: 0 (2 * @spacing); + + >:not(:first-child) { + margin-top: @spacing; + } + } + } + + .scroll-container::-webkit-scrollbar { + width: @spacing; + } +} + +.videos-list-container { + height: 100%; + display: inline-flex; + flex-direction: column; + background: @colordarkest; + + .seasons-bar { + display: flex; + justify-content: space-between; + + .button-container { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + .button-icon { + width: 60%; + height: 60%; + fill: @colorwhite; + } + + &:hover { + background-color: @colorwhite20; + } + } + } + + .scroll-container { + flex: 1; + position: relative; + overflow-y: auto; + overflow-x: hidden; + + .videos-list { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + } + + .scroll-container::-webkit-scrollbar-thumb { + background-color: @coloraccent80; + } + + .scroll-container::-webkit-scrollbar-track { + background-color: @colorglass; + } +} \ No newline at end of file From dd028d2ecc90e5514e4c104968e31bba2bb78675 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 17:46:00 +0200 Subject: [PATCH 04/21] share addon improved --- src/common/ShareAddon/ShareAddon.js | 8 +- src/common/ShareAddon/styles.less | 176 +++++++++++++++++----------- 2 files changed, 108 insertions(+), 76 deletions(-) diff --git a/src/common/ShareAddon/ShareAddon.js b/src/common/ShareAddon/ShareAddon.js index 68766f7ae..13b816804 100644 --- a/src/common/ShareAddon/ShareAddon.js +++ b/src/common/ShareAddon/ShareAddon.js @@ -12,9 +12,9 @@ const renderUrl = (copyToClipboard, url) => { return (
- +
Copy - +
); } @@ -22,8 +22,6 @@ const renderUrl = (copyToClipboard, url) => { const ShareAddon = (props) => { const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight }); const imageStyle = { - width: 10, - height: 10, backgroundImage: `url('${placeholderIconUrl}')` }; @@ -33,7 +31,7 @@ const ShareAddon = (props) => {
- Share Add-on +
Share Add-on
FACEBOOK diff --git a/src/common/ShareAddon/styles.less b/src/common/ShareAddon/styles.less index df48ff5b4..de2416b0d 100644 --- a/src/common/ShareAddon/styles.less +++ b/src/common/ShareAddon/styles.less @@ -1,8 +1,62 @@ @import 'stremio-colors'; +@share-addon-width: 380px; +@spacing: floor((@share-addon-width * 0.06)); + +.share-addon { + width: @share-addon-width; + padding: ceil((@spacing * 0.5)); + + .x-icon { + width: ceil((@spacing * 0.5)); + height: ceil((@spacing * 0.5)); + } + + .info-container { + padding: floor((@spacing * 0.3)) ceil((@spacing * 0.9)) @spacing ceil((@spacing * 0.9)); + + .buttons { + padding: @spacing 0; + } + + .facebook-button, .twitter-button, .gplus-button { + width: ceil((@share-addon-width * 0.26)); + height: floor((@share-addon-width * 0.09)); + + .facebook-icon, .twitter-icon, .gplus-icon { + width: ceil((@spacing * 0.6)); + height: ceil((@spacing * 0.6)); + margin-right: floor((@spacing * 0.3)); + } + } + + .url-container { + border-radius: 4px; + border-width: 1px; + + .url { + font-size: 12px; + border-radius: 4px; + padding: ceil((@spacing * 0.5)); + } + + .copy-label { + font-size: 14px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + padding: ceil((@spacing * 0.5)); + + .copy-icon { + width: ceil((@spacing * 0.7)); + height: ceil((@spacing * 0.7)); + margin-right: floor((@spacing * 0.3)); + } + } + } + } +} + .share-addon { - width: 380px; - padding: 10px; color: @colorwhite; background-color: @colorwhite; @@ -17,87 +71,67 @@ } } - .info-container { - padding: 6px 20px 30px 20px; + .share-label { + color: @colorblack; + font-weight: 500; + } - .share-label { - color: @colorblack; - font-weight: 600; - } + .buttons { + display: flex; + font-size: 11px; + justify-content: space-between; - .buttons { + .facebook-button, .twitter-button, .gplus-button { display: flex; - font-size: 11px; - margin: 22px 0px; - justify-content: space-between; + cursor: pointer; + align-items: center; + justify-content: center; .facebook-icon, .twitter-icon, .gplus-icon { - width: 14px; - height: 14px; - margin-right: 6px; fill: @colorwhite; } - - .facebook-button { - background-color: @colorfb; - } - - .twitter-button { - background-color: @coloraccent; - } - - .gplus-button { - background-color: #dd4b39; - } - - .facebook-button, .twitter-button, .gplus-button { - display: flex; - cursor: pointer; - width: 100px; - height: 32px; - align-items: center; - justify-content: center; - } } - .url-container { - display: flex; - border-radius: 4px; + .facebook-button { + background-color: @colorfb; + } + + .twitter-button { + background-color: @coloraccent; + } + + .gplus-button { + background-color: #dd4b39; + } + } + + .url-container { + display: flex; + border-style: solid; + border-color: @colorneutrallight; + + .url, .copy-label { + color: @colorblack40; + } + + .url { + width: 75%; + outline: none; + font-weight: 600; text-align: center; - border: 1px solid @colorneutrallight; + text-overflow: ellipsis; + } - .url, .copy-label { - padding: 10px; - font-weight: 600; - color: @colorblack40; - } + .copy-label { + cursor: pointer; + width: 25%; + font-weight: 500; + display: flex; + justify-content: center; + background-color: @colorblack20; - .url { - width: 90%; - outline: none; - font-size: 12px; - text-align: center; - border-radius: 4px; - padding-right: 30px; - text-overflow: ellipsis; - } - - .copy-label { - width: 30%; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - background-color: @colorblack20; - - .copy-icon { - width: 16px; - height: 16px; - margin-right: 4px; - fill: @colorblack40; - } + .copy-icon { + fill: @colorblack40; } } } From 9fe40eb5b6379b3255cab7618fccc20bb4a1e3cb Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 18:28:18 +0200 Subject: [PATCH 05/21] streams list created --- src/routes/Detail/StreamsList/StreamsList.js | 13 +++++++++++++ src/routes/Detail/StreamsList/index.js | 3 +++ src/routes/Detail/StreamsList/styles.less | 0 3 files changed, 16 insertions(+) create mode 100644 src/routes/Detail/StreamsList/StreamsList.js create mode 100644 src/routes/Detail/StreamsList/index.js create mode 100644 src/routes/Detail/StreamsList/styles.less diff --git a/src/routes/Detail/StreamsList/StreamsList.js b/src/routes/Detail/StreamsList/StreamsList.js new file mode 100644 index 000000000..09a14fec9 --- /dev/null +++ b/src/routes/Detail/StreamsList/StreamsList.js @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; + +class StreamsList extends Component { + render() { + return ( +
+ +
+ ); + } +} + +export default StreamsList; \ No newline at end of file diff --git a/src/routes/Detail/StreamsList/index.js b/src/routes/Detail/StreamsList/index.js new file mode 100644 index 000000000..0c7fdb10c --- /dev/null +++ b/src/routes/Detail/StreamsList/index.js @@ -0,0 +1,3 @@ +import StreamsList from './StreamsList'; + +export default StreamsList; diff --git a/src/routes/Detail/StreamsList/styles.less b/src/routes/Detail/StreamsList/styles.less new file mode 100644 index 000000000..e69de29bb From c3d7c1c8af6e410e470a4eec2410d50a0d121bfd Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 18:30:59 +0200 Subject: [PATCH 06/21] incorrect imported components removed --- src/common/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/common/index.js b/src/common/index.js index 088e91c77..0853dc433 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -4,8 +4,6 @@ import NavBar from './NavBar'; import Modal from './Modal'; import MetadataItem from './MetadataItem'; import Router from './Router'; -import Stream from './Stream'; -import Video from './Video'; import LibraryItemList from './LibraryItemList'; import MetaItem from './MetaItem'; import Addon from './Addon'; @@ -20,8 +18,6 @@ export { Modal, MetadataItem, Router, - Stream, - Video, LibraryItemList, MetaItem, Addon, From bb6ef3185b79f7ac8fc161ecdd620d131da31ec2 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 18:31:48 +0200 Subject: [PATCH 07/21] detail page imported --- src/routes/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/routes/index.js b/src/routes/index.js index b54b42c8b..f931b9c08 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -7,6 +7,7 @@ import Calendar from './Calendar'; import Search from './Search'; import Settings from './Settings'; import Player from './Player'; +import Detail from './Detail'; export { Addons, @@ -17,5 +18,6 @@ export { Calendar, Search, Settings, - Player + Player, + Detail }; From b33229a519cd0ae887f33c7e5ad6bf2a667c10cd Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 18:33:07 +0200 Subject: [PATCH 08/21] detail page added --- src/routes/Detail/Detail.js | 9 +++++++++ src/routes/Detail/index.js | 3 +++ 2 files changed, 12 insertions(+) create mode 100644 src/routes/Detail/Detail.js create mode 100644 src/routes/Detail/index.js diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js new file mode 100644 index 000000000..ff647ded3 --- /dev/null +++ b/src/routes/Detail/Detail.js @@ -0,0 +1,9 @@ +import React, { Component } from 'react'; + +class Detail extends Component { + render() { + return null; + } +} + +export default Detail; diff --git a/src/routes/Detail/index.js b/src/routes/Detail/index.js new file mode 100644 index 000000000..ccf95e690 --- /dev/null +++ b/src/routes/Detail/index.js @@ -0,0 +1,3 @@ +import Detail from './Detail'; + +export default Detail; From cd87409810807244725f540b7626282b89da1654 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 5 Dec 2018 18:38:06 +0200 Subject: [PATCH 09/21] videos list added to storybook --- stories/index.stories.js | 78 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 72 insertions(+), 6 deletions(-) diff --git a/stories/index.stories.js b/stories/index.stories.js index 8d26e8fbe..362e1865c 100644 --- a/stories/index.stories.js +++ b/stories/index.stories.js @@ -1,6 +1,10 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; -import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common'; +import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, UserPanel } from 'stremio-common'; +import Stream from '../src/routes/Detail/StreamsList/Stream'; +import Video from '../src/routes/Detail/VideosList/Video'; +import VideosList from '../src/routes/Detail/VideosList'; +import colors from 'stremio-colors'; import appStyles from '../src/app/styles'; import styles from './styles'; @@ -10,6 +14,14 @@ const storyStyle = { minHeight: 'initial' }; +const videosListStyle = { + position: 'absolute', + height: '100%', + padding: '10px', + minHeight: 'initial', + background: colors.glass +} + storiesOf('Addon', module) .add('not-installed', () => (
@@ -242,7 +254,7 @@ storiesOf('Video', module)