From b3ca3de8ab24ff9785b1bf7acc86d3bf9ab8c149 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 2 Jan 2019 10:59:39 +0200 Subject: [PATCH 01/26] video fixes --- src/routes/Detail/VideosList/Video/Video.js | 6 ++-- .../Detail/VideosList/Video/styles.less | 36 ++++++++----------- 2 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/routes/Detail/VideosList/Video/Video.js b/src/routes/Detail/VideosList/Video/Video.js index e516fbf31..1c62a020f 100644 --- a/src/routes/Detail/VideosList/Video/Video.js +++ b/src/routes/Detail/VideosList/Video/Video.js @@ -87,7 +87,7 @@ const renderProgress = (progress) => { const Video = (props) => { return ( -
+
{renderPoster(props.poster)}
@@ -106,14 +106,16 @@ const Video = (props) => { Video.propTypes = { className: PropTypes.string, + id: PropTypes.string.isRequired, poster: PropTypes.string.isRequired, episode: PropTypes.number.isRequired, + season: PropTypes.number.isRequired, title: PropTypes.string.isRequired, released: PropTypes.instanceOf(Date).isRequired, isWatched: PropTypes.bool.isRequired, isUpcoming: PropTypes.bool.isRequired, progress: PropTypes.number.isRequired, - onVideoClicked: PropTypes.func + onClick: PropTypes.func }; Video.defaultProps = { poster: '', diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less index 1c4b6719a..0da43ffe0 100644 --- a/src/routes/Detail/VideosList/Video/styles.less +++ b/src/routes/Detail/VideosList/Video/styles.less @@ -1,15 +1,6 @@ -.video-container { - --video-width: 360px; - --spacing: 8px; - --title-font-size: 12px; - --released-date-font-size: 11px; - --label-font-size: 10px; - --label-border-width: 2px; -} - .video-container { width: var(--video-width); - background-color: var(--color-backgroundlight); + background-color: var(--color-surfacedarker60); .flex-row-container { display: flex; @@ -18,7 +9,7 @@ .poster-container { flex: 1; - margin: var(--spacing) 0 var(--spacing) var(--spacing); + margin: var(--video-spacing) 0 var(--video-spacing) var(--video-spacing); .poster { display: block; @@ -41,20 +32,21 @@ .info-container { flex: 3; min-height: calc(0.2 * var(--video-width)); - padding: var(--spacing); + padding: var(--video-spacing); display: flex; flex-direction: column; justify-content: center; .title { - font-size: var(--title-font-size); + font-size: var(--video-title-font-size); + line-height: 1.2em; color: var(--color-surfacelighter); word-break: break-all; //Firefox doesn't support { break-word } word-break: break-word; } .released-date { - font-size: var(--released-date-font-size); + font-size: var(--video-released-date-font-size); color: var(--color-surface); } @@ -62,17 +54,17 @@ display: flex; .upcoming-label, .watched-label { - font-size: var(--label-font-size); - font-weight: 600; + font-size: var(--video-label-font-size); + font-weight: 500; line-height: 1.5; - border-width: var(--label-border-width); + border-width: var(--video-label-border-width); border-style: solid; padding: 0 0.6em; color: var(--color-surfacelighter); } .upcoming-label { - margin-right: var(--spacing); + margin-right: var(--video-spacing); border-color: var(--color-signal5); } @@ -82,7 +74,7 @@ } >:not(:last-child) { - margin-bottom: calc(0.5 * var(--spacing)); + margin-bottom: calc(0.5 * var(--video-spacing)); } } @@ -90,7 +82,7 @@ width: calc(0.07 * var(--video-width)); display: flex; align-items: center; - padding: var(--spacing) var(--spacing) var(--spacing) 0; + padding: var(--video-spacing) var(--video-spacing) var(--video-spacing) 0; .arrow { width: 100%; @@ -100,7 +92,7 @@ } .progress-container { - height: calc(0.5 * var(--spacing)); + height: calc(0.5 * var(--video-spacing)); background-color: var(--color-primarydark); .progress { @@ -111,6 +103,6 @@ &:hover { cursor: pointer; - background-color: var(--color-surfacelighter20); + background-color: var(--color-surfacedarker); } } \ No newline at end of file From 06af08c424083374515500f931a0978c8e830b62 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 2 Jan 2019 11:03:25 +0200 Subject: [PATCH 02/26] popup imported --- src/routes/Detail/VideosList/VideosList.js | 44 ++++++++++---- src/routes/Detail/VideosList/styles.less | 68 +++++++++++++++++----- 2 files changed, 89 insertions(+), 23 deletions(-) diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js index 3cc1be171..6498cf154 100644 --- a/src/routes/Detail/VideosList/VideosList.js +++ b/src/routes/Detail/VideosList/VideosList.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import classnames from 'classnames'; import Icon from 'stremio-icons/dom'; +import { Popup } from 'stremio-common'; import Video from './Video'; import styles from './styles'; @@ -8,16 +10,19 @@ class VideosList extends Component { constructor(props) { super(props); + this.seasonsPopupRef = React.createRef(); this.seasons = this.props.videos.map((video) => video.season) .filter((season, index, seasons) => seasons.indexOf(season) === index); this.state = { - selectedSeason: this.seasons[0] + selectedSeason: this.seasons[0], + selectedVideoId: 0 } } changeSeason = (event) => { - this.setState({ selectedSeason: parseInt(event.target.value) }); + this.setState({ selectedSeason: parseInt(event.currentTarget.dataset.season) }); + this.seasonsPopupRef.current && this.seasonsPopupRef.current.close(); } shouldComponentUpdate(nextProps, nextState) { @@ -34,20 +39,35 @@ class VideosList extends Component { this.setState({ selectedSeason: this.seasons[nextSeasonIndex] }); } + onClick = (event) => { + this.setState({ selectedVideoId: event.currentTarget.dataset.id }); + console.log(event.currentTarget.dataset.id); + } + render() { return ( -
+
- + + +
+ S {this.state.selectedSeason} + +
+ + +
+ {this.seasons.map((season) => +
+ S {season} +
+ )} +
+ +
@@ -58,13 +78,16 @@ class VideosList extends Component { .map((video) =>
@@ -74,6 +97,7 @@ class VideosList extends Component { } VideosList.propTypes = { + className: PropTypes.string, videos: PropTypes.arrayOf(PropTypes.object).isRequired }; VideosList.defaultProps = { diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less index 41f242d3b..cc504a348 100644 --- a/src/routes/Detail/VideosList/styles.less +++ b/src/routes/Detail/VideosList/styles.less @@ -1,20 +1,37 @@ .videos-list-container { - --scroll-container-width: 392px; - --seasons-bar-height: 50px; - --spacing: 8px; -} - -.videos-list-container { - height: 100%; - display: inline-flex; flex-direction: column; - background: var(--color-background); + padding: calc(3 * var(--spacing)) 0; + background: var(--color-backgrounddarker40); .seasons-bar { height: var(--seasons-bar-height); display: flex; justify-content: space-between; margin-bottom: var(--spacing); + background: var(--color-backgrounddarker); + + .control-bar-button { + cursor: pointer; + width: 258px; + display: flex; + justify-content: center; + align-items: center; + color: var(--color-surfacelighter); + + .icon { + width: 14%; + height: 14%; + fill: var(--color-surfacelight); + } + + &:hover { + background-color: var(--color-surfacedarker60); + + .icon { + fill: var(--color-surfacelighter); + } + } + } .button-container { width: calc(1.5 * var(--seasons-bar-height)); @@ -30,14 +47,14 @@ } &:hover { - background-color: var(--color-surfacelighter20); + background-color: var(--color-surfacedarker60); } } } .scroll-container { flex: 1; - width: var(--scroll-container-width); + width: calc(var(--video-width) + 4 * var(--spacing)); padding: 0 calc(2 * var(--spacing)); margin: 0 var(--spacing); overflow-y: auto; @@ -53,10 +70,35 @@ } .scroll-container::-webkit-scrollbar-thumb { - background-color: var(--color-secondarylighter80); + background-color: var(--color-secondarylighter); } .scroll-container::-webkit-scrollbar-track { - background-color: var(--color-backgroundlight); + background-color: var(--color-backgroundlighter); + } +} + +.popup-container { + --border-color: var(--color-primarylight); + + .popup-content { + cursor: pointer; + width: 258px; + background-color: var(--color-backgrounddark); + + .season { + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + width: 258px; + border-top: 1px solid var(--color-primarylight); + color: var(--color-surfacelight); + + &:hover { + color: var(--color-surfacelighter); + background-color: var(--color-surfacedarker60); + } + } } } \ No newline at end of file From f311729577ceb4a30f84c6e3458b4d69cde76c5c Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 2 Jan 2019 11:08:22 +0200 Subject: [PATCH 03/26] detail screen implemented --- src/app/routerConfig.js | 6 +- src/routes/Detail/Detail.js | 137 +++++++++++- src/routes/Detail/styles.less | 378 ++++++++++++++++++++++++++++++++++ 3 files changed, 519 insertions(+), 2 deletions(-) create mode 100644 src/routes/Detail/styles.less diff --git a/src/app/routerConfig.js b/src/app/routerConfig.js index 095a290d4..562ae002b 100644 --- a/src/app/routerConfig.js +++ b/src/app/routerConfig.js @@ -1,4 +1,4 @@ -import { Calendar, Discover, Addons, Settings, Board, Player } from 'stremio-routes'; +import { Calendar, Discover, Addons, Settings, Board, Player, Detail } from 'stremio-routes'; const config = { views: [ @@ -27,6 +27,10 @@ const config = { { path: '/settings', component: Settings + }, + { + path: '/detail', + component: Detail } ] }, diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js index ff647ded3..15fceb8aa 100644 --- a/src/routes/Detail/Detail.js +++ b/src/routes/Detail/Detail.js @@ -1,9 +1,144 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import VideosList from './VideosList'; +import Icon from 'stremio-icons/dom'; +import styles from './styles'; class Detail extends Component { + constructor(props) { + super(props); + + this.state = { + logoLoaded: true + }; + } + + renderSection({ title, links }) { + return ( +
+ {title ?
{title}
: null} + {links.slice(0, 4).map(link => {link})} +
+ ); + } + render() { - return null; + return ( +
0 ? { backgroundImage: 'url(' + this.props.metaItem.background + ')' } : { backgroundColor: colors.backgrounddarker }} className={styles['detail-container']}> +
+
+ { + this.state.logoLoaded ? this.setState({ logoLoaded: false })} /> : null + } +
+
{this.props.metaItem.duration} min
+
{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}
+ + +
{this.props.metaItem.imdbRating}
+ +
+
{this.props.metaItem.name}
+
{this.props.metaItem.description}
+ {this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })} + {this.renderSection({ title: 'WRITTEN BY', links: this.props.metaItem.writers })} + {this.renderSection({ title: 'DIRECTED BY', links: this.props.metaItem.directors })} + {this.renderSection({ title: 'CAST', links: this.props.metaItem.cast })} +
+ + +
Trailer
+ +
+ +
{this.props.inLibrary ? 'Remove from Library' : 'Add to library'}
+
+
+ +
Share
+
+
+
+ +
+ ); } } +Detail.propTypes = { + inLibrary: PropTypes.bool.isRequired, + metaItem: PropTypes.object.isRequired, + toggleLibraryButton: PropTypes.func +}; +Detail.defaultProps = { + inLibrary: false, + metaItem: { + logo: 'https://images.metahub.space/logo/medium/tt4123430/img', + background: 'https://images.metahub.space/background/medium/tt4123430/img', + duration: '134', + releaseInfo: '2018', + released: new Date(2018, 4, 23), + imdbRating: '7.4', + name: 'Fantastic Beasts and Where to Find Them: The Original Screenplay', + description: 'In an effort to thwart Grindelwald' + 's plans ofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards to rule over all non-magical beings, Albus Dumbledore enlists his former student Newt Scamander, who agrees to help, unaware of the dangers that lie ahead. Lines are drawn as love and loyalty are tested, even among the truest friends and family, in an increasingly divided wizarding world.', + genres: ['Adventure', 'Family', 'Fantasy'], + writers: ['J. K. Rowling'], + directors: ['David Yates'], + cast: ['Johny Depp', 'Kevin Guthrie', 'Carmen Ejogo', 'Wolf Roth'], + 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 } + ], + links: { + share: '', + imdb: 'https://www.imdb.com/title/tt4123430/?ref_=fn_al_tt_3', + youtube: '#/player' + } + } +}; + export default Detail; diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less new file mode 100644 index 000000000..c51633a93 --- /dev/null +++ b/src/routes/Detail/styles.less @@ -0,0 +1,378 @@ +.detail-container { + --logo-height: 90px; + --button-width: 80px; + --name-font-size: 20px; + --description-font-size: 12px; + --button-label-font-size: 13px; + --link-font-size: 14px; + --seasons-bar-height: 50px; + --spacing: 8px; + --video-width: 360px; + --video-spacing: 8px; + --video-title-font-size: 12px; + --video-released-date-font-size: 11px; + --video-label-font-size: 10px; + --video-label-border-width: 2px; +} + +@media screen and (max-width: 1220px) { + .detail-container { + --logo-height: 80px; + --button-width: 70px; + --name-font-size: 18px; + --description-font-size: 10px; + --button-label-font-size: 11px; + --link-font-size: 12px; + --seasons-bar-height: 40px; + --spacing: 6px; + --video-width: 300px; + --video-spacing: 6px; + --video-title-font-size: 10px; + --video-released-date-font-size: 9px; + --video-label-font-size: 8px; + --video-label-border-width: 2px; + } +} + +@media screen and (min-width: 1440px) { + .detail-container { + --logo-height: 110px; + --button-width: 90px; + --name-font-size: 22px; + --description-font-size: 14px; + --button-label-font-size: 15px; + --link-font-size: 16px; + --seasons-bar-height: 60px; + --spacing: 8px; + --video-width: 420px; + --video-spacing: 8px; + --video-title-font-size: 13px; + --video-released-date-font-size: 13px; + --video-label-font-size: 12px; + --video-label-border-width: 2px; + } +} + +@media screen and (min-width: 1680px) { + .detail-container { + --logo-height: 130px; + --button-width: 110px; + --name-font-size: 26px; + --description-font-size: 17px; + --button-label-font-size: 18px; + --link-font-size: 20px; + --seasons-bar-height: 70px; + --spacing: 10px; + --video-width: 480px; + --video-spacing: 10px; + --video-title-font-size: 16px; + --video-released-date-font-size: 15px; + --video-label-font-size: 14px; + --video-label-border-width: 3px; + } +} + +@media screen and (min-width: 1920px) { + .detail-container { + --logo-height: 140px; + --button-width: 140px; + --name-font-size: 32px; + --description-font-size: 22px; + --button-label-font-size: 24px; + --link-font-size: 26px; + --seasons-bar-height: 80px; + --spacing: 10px; + --video-width: 560px; + --video-spacing: 10px; + --video-title-font-size: 20px; + --video-released-date-font-size: 19px; + --video-label-font-size: 18px; + --video-label-border-width: 4px; + } +} + +@media screen and (min-width: 2048px) { + .detail-container { + --logo-height: 140px; + --button-width: 140px; + --name-font-size: 34px; + --description-font-size: 22px; + --button-label-font-size: 23px; + --link-font-size: 26px; + --seasons-bar-height: 80px; + --spacing: 14px; + --video-width: 600px; + --video-spacing: 14px; + --video-title-font-size: 20px; + --video-released-date-font-size: 19px; + --video-label-font-size: 18px; + --video-label-border-width: 4px; + } +} + +@media screen and (min-width: 2560px) { + .detail-container { + --logo-height: 220px; + --button-width: 170px; + --name-font-size: 44px; + --description-font-size: 30px; + --button-label-font-size: 32px; + --link-font-size: 34px; + --seasons-bar-height: 100px; + --spacing: 16px; + --video-width: 740px; + --video-spacing: 16px; + --video-title-font-size: 26px; + --video-released-date-font-size: 25px; + --video-label-font-size: 22px; + --video-label-border-width: 4px; + } +} + +@media screen and (min-width: 2880px) { + .detail-container { + --logo-height: 260px; + --button-width: 190px; + --name-font-size: 50px; + --description-font-size: 36px; + --button-label-font-size: 37px; + --link-font-size: 40px; + --seasons-bar-height: 120px; + --spacing: 20px; + --video-width: 800px; + --video-spacing: 20px; + --video-title-font-size: 28px; + --video-released-date-font-size: 27px; + --video-label-font-size: 26px; + --video-label-border-width: 4px; + } +} + +@media screen and (min-width: 3440px) { + .detail-container { + --logo-height: 380px; + --button-width: 240px; + --name-font-size: 64px; + --description-font-size: 48px; + --button-label-font-size: 49px; + --link-font-size: 54px; + --seasons-bar-height: 160px; + --spacing: 24px; + --video-width: 1100px; + --video-spacing: 24px; + --video-title-font-size: 36px; + --video-released-date-font-size: 35px; + --video-label-font-size: 34px; + --video-label-border-width: 8px; + } +} + +@media screen and (min-height: 700px) { + .detail-container { + --logo-height: 100px; + --button-width: 90px; + --name-font-size: 22px; + --description-font-size: 14px; + --button-label-font-size: 15px; + --link-font-size: 16px; + --seasons-bar-height: 50px; + --spacing: 8px; + --video-width: 360px; + --video-spacing: 8px; + --video-title-font-size: 12px; + --video-released-date-font-size: 11px; + --video-label-font-size: 10px; + --video-label-border-width: 2px; + } +} + +@media screen and (min-height: 800px) { + .detail-container { + --logo-height: 110px; + --button-width: 100px; + --name-font-size: 24px; + --description-font-size: 16px; + --button-label-font-size: 17px; + --link-font-size: 18px; + --seasons-bar-height: 50px; + --spacing: 8px; + --video-width: 360px; + --video-spacing: 8px; + --video-title-font-size: 12px; + --video-released-date-font-size: 11px; + --video-label-font-size: 10px; + --video-label-border-width: 2px; + } +} + +.detail-container { + position: relative; + z-index: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + align-items: stretch; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + .overlay-container { + position: absolute; + z-index: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--color-backgrounddarker60); + } + + .info-container { + position: absolute; + z-index: 1; + top: 0; + left: 0; + right: 40%; + bottom: 0; + padding: calc(var(--spacing) * 3); + + .logo { + height: var(--logo-height); + object-fit: contain; + } + + .logo-error { + display: none; + } + + .basic-info { + display: flex; + flex-direction: row; + align-items: center; + margin: 0.6em 0; + + .duration { + padding: 0.3em 0.6em; + font-size: var(--link-font-size); + color: var(--color-surfacelighter); + } + + .release-info { + padding: 0.3em 0.6em; + font-size: var(--link-font-size); + color: var(--color-surfacelighter); + } + + .imdb-container { + cursor: pointer; + width: var(--button-width); + display: flex; + flex-direction: row; + padding: 0.3em 0.6em; + + .imdb-logo { + flex: 1; + height: 100%; + margin-right: 10%; + fill: var(--color-surface); + } + + .imdb-rating { + font-size: var(--link-font-size); + color: var(--color-surfacelighter); + } + + &:hover { + background-color: var(--color-surface40); + } + } + } + + .name { + padding: 0.3em 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: var(--name-font-size); + color: var(--color-surfacelighter); + } + + .description { + max-height: 7.5em; + margin: 1em 0; + overflow: hidden; + overflow-wrap: break-word; + font-size: var(--description-font-size); + line-height: 1.5; + color: var(--color-surfacelighter); + } + + .section-container { + margin: 0.8em 0em; + + .title { + margin-bottom: calc(0.05 * var(--button-width)); + font-size: var(--link-font-size); + color: var(--color-surface); + } + + .link { + display: inline-block; + cursor: pointer; + padding: 0.3em 0.6em; + font-size: var(--link-font-size); + color: var(--color-surfacelighter); + + &:hover { + background-color: var(--color-surface40); + } + } + } + + .buttons { + position: absolute; + left: calc(var(--spacing) * 3); + bottom: calc(var(--spacing) * 3); + + .button-container { + cursor: pointer; + width: var(--button-width); + height: var(--button-width); + display: inline-flex; + flex-direction: column; + align-items: center; + text-align: center; + + .icon { + height: 30%; + margin: 20% 0 10% 0; + fill: var(--color-surfacelighter); + } + + .label { + height: 40%; + padding: 0 calc(0.1 * var(--button-width)); + overflow-wrap: break-word; + overflow: hidden; + font-size: var(--button-label-font-size); + color: var(--color-surfacelight); + } + + &:hover { + background-color: var(--color-surfacedarker60); + } + } + } + } + + .videos-list { + position: absolute; + z-index: 2; + top: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file From 98a6f30c4c7d5969b07a92aa060cd8fa8f73aae3 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 2 Jan 2019 15:50:27 +0200 Subject: [PATCH 04/26] data-id renamed to data-video-id --- src/routes/Detail/VideosList/Video/Video.js | 2 +- src/routes/Detail/VideosList/VideosList.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Detail/VideosList/Video/Video.js b/src/routes/Detail/VideosList/Video/Video.js index 1c62a020f..e5c2ea13e 100644 --- a/src/routes/Detail/VideosList/Video/Video.js +++ b/src/routes/Detail/VideosList/Video/Video.js @@ -87,7 +87,7 @@ const renderProgress = (progress) => { const Video = (props) => { return ( -
+
{renderPoster(props.poster)}
diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js index 6498cf154..55aa870ae 100644 --- a/src/routes/Detail/VideosList/VideosList.js +++ b/src/routes/Detail/VideosList/VideosList.js @@ -40,8 +40,8 @@ class VideosList extends Component { } onClick = (event) => { - this.setState({ selectedVideoId: event.currentTarget.dataset.id }); - console.log(event.currentTarget.dataset.id); + this.setState({ selectedVideoId: event.currentTarget.dataset.videoId }); + console.log(event.currentTarget.dataset.videoId); } render() { From afa188c3cb81a5992937484a1c696e9e51d7639c Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 2 Jan 2019 16:00:51 +0200 Subject: [PATCH 05/26] detail screen styles refactored --- src/routes/Detail/styles.less | 216 +++++++++------------------------- 1 file changed, 58 insertions(+), 158 deletions(-) diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less index c51633a93..e996042e8 100644 --- a/src/routes/Detail/styles.less +++ b/src/routes/Detail/styles.less @@ -1,209 +1,110 @@ .detail-container { - --logo-height: 90px; - --button-width: 80px; - --name-font-size: 20px; - --description-font-size: 12px; - --button-label-font-size: 13px; - --link-font-size: 14px; - --seasons-bar-height: 50px; --spacing: 8px; + --action-button-width: 80px; --video-width: 360px; - --video-spacing: 8px; - --video-title-font-size: 12px; - --video-released-date-font-size: 11px; - --video-label-font-size: 10px; - --video-label-border-width: 2px; + --stream-width: 360px; + font-size: 12px; } @media screen and (max-width: 1220px) { .detail-container { - --logo-height: 80px; - --button-width: 70px; - --name-font-size: 18px; - --description-font-size: 10px; - --button-label-font-size: 11px; - --link-font-size: 12px; - --seasons-bar-height: 40px; --spacing: 6px; + --action-button-width: 70px; --video-width: 300px; - --video-spacing: 6px; - --video-title-font-size: 10px; - --video-released-date-font-size: 9px; - --video-label-font-size: 8px; - --video-label-border-width: 2px; + --stream-width: 300px; + font-size: 10px; } } @media screen and (min-width: 1440px) { .detail-container { - --logo-height: 110px; - --button-width: 90px; - --name-font-size: 22px; - --description-font-size: 14px; - --button-label-font-size: 15px; - --link-font-size: 16px; - --seasons-bar-height: 60px; --spacing: 8px; + --action-button-width: 90px; --video-width: 420px; - --video-spacing: 8px; - --video-title-font-size: 13px; - --video-released-date-font-size: 13px; - --video-label-font-size: 12px; - --video-label-border-width: 2px; + --stream-width: 420px; + font-size: 13px; } } @media screen and (min-width: 1680px) { .detail-container { - --logo-height: 130px; - --button-width: 110px; - --name-font-size: 26px; - --description-font-size: 17px; - --button-label-font-size: 18px; - --link-font-size: 20px; - --seasons-bar-height: 70px; --spacing: 10px; + --action-button-width: 110px; --video-width: 480px; - --video-spacing: 10px; - --video-title-font-size: 16px; - --video-released-date-font-size: 15px; - --video-label-font-size: 14px; - --video-label-border-width: 3px; + --stream-width: 480px; + font-size: 16px; } } @media screen and (min-width: 1920px) { .detail-container { - --logo-height: 140px; - --button-width: 140px; - --name-font-size: 32px; - --description-font-size: 22px; - --button-label-font-size: 24px; - --link-font-size: 26px; - --seasons-bar-height: 80px; --spacing: 10px; + --action-button-width: 140px; --video-width: 560px; - --video-spacing: 10px; - --video-title-font-size: 20px; - --video-released-date-font-size: 19px; - --video-label-font-size: 18px; - --video-label-border-width: 4px; + --stream-width: 560px; + font-size: 20px; } } @media screen and (min-width: 2048px) { .detail-container { - --logo-height: 140px; - --button-width: 140px; - --name-font-size: 34px; - --description-font-size: 22px; - --button-label-font-size: 23px; - --link-font-size: 26px; - --seasons-bar-height: 80px; --spacing: 14px; + --action-button-width: 140px; --video-width: 600px; - --video-spacing: 14px; - --video-title-font-size: 20px; - --video-released-date-font-size: 19px; - --video-label-font-size: 18px; - --video-label-border-width: 4px; + --stream-width: 600px; + font-size: 20px; } } @media screen and (min-width: 2560px) { .detail-container { - --logo-height: 220px; - --button-width: 170px; - --name-font-size: 44px; - --description-font-size: 30px; - --button-label-font-size: 32px; - --link-font-size: 34px; - --seasons-bar-height: 100px; --spacing: 16px; + --action-button-width: 170px; --video-width: 740px; - --video-spacing: 16px; - --video-title-font-size: 26px; - --video-released-date-font-size: 25px; - --video-label-font-size: 22px; - --video-label-border-width: 4px; + --stream-width: 740px; + font-size: 26px; } } @media screen and (min-width: 2880px) { .detail-container { - --logo-height: 260px; - --button-width: 190px; - --name-font-size: 50px; - --description-font-size: 36px; - --button-label-font-size: 37px; - --link-font-size: 40px; - --seasons-bar-height: 120px; --spacing: 20px; + --action-button-width: 190px; --video-width: 800px; - --video-spacing: 20px; - --video-title-font-size: 28px; - --video-released-date-font-size: 27px; - --video-label-font-size: 26px; - --video-label-border-width: 4px; + --stream-width: 800px; + font-size: 28px; } } @media screen and (min-width: 3440px) { .detail-container { - --logo-height: 380px; - --button-width: 240px; - --name-font-size: 64px; - --description-font-size: 48px; - --button-label-font-size: 49px; - --link-font-size: 54px; - --seasons-bar-height: 160px; --spacing: 24px; + --action-button-width: 240px; --video-width: 1100px; - --video-spacing: 24px; - --video-title-font-size: 36px; - --video-released-date-font-size: 35px; - --video-label-font-size: 34px; - --video-label-border-width: 8px; + --stream-width: 1100px; + font-size: 40px; } } -@media screen and (min-height: 700px) { - .detail-container { - --logo-height: 100px; - --button-width: 90px; - --name-font-size: 22px; - --description-font-size: 14px; - --button-label-font-size: 15px; - --link-font-size: 16px; - --seasons-bar-height: 50px; - --spacing: 8px; - --video-width: 360px; - --video-spacing: 8px; - --video-title-font-size: 12px; - --video-released-date-font-size: 11px; - --video-label-font-size: 10px; - --video-label-border-width: 2px; - } -} +// @media screen and (min-height: 700px) { +// .detail-container { +// --font-size: 12px; +// --spacing: 8px; +// --action-button-width: 90px; +// --video-width: 360px; +// --stream-width: 360px; +// } +// } -@media screen and (min-height: 800px) { - .detail-container { - --logo-height: 110px; - --button-width: 100px; - --name-font-size: 24px; - --description-font-size: 16px; - --button-label-font-size: 17px; - --link-font-size: 18px; - --seasons-bar-height: 50px; - --spacing: 8px; - --video-width: 360px; - --video-spacing: 8px; - --video-title-font-size: 12px; - --video-released-date-font-size: 11px; - --video-label-font-size: 10px; - --video-label-border-width: 2px; - } -} +// @media screen and (min-height: 800px) { +// .detail-container { +// --font-size: 12px; +// --spacing: 8px; +// --action-button-width: 100px; +// --video-width: 360px; +// --stream-width: 360px; +// } +// } .detail-container { position: relative; @@ -237,7 +138,7 @@ padding: calc(var(--spacing) * 3); .logo { - height: var(--logo-height); + height: calc(var(--action-button-width) * 1.2); object-fit: contain; } @@ -253,19 +154,19 @@ .duration { padding: 0.3em 0.6em; - font-size: var(--link-font-size); + font-size: 120%; color: var(--color-surfacelighter); } .release-info { padding: 0.3em 0.6em; - font-size: var(--link-font-size); + font-size: 120%; color: var(--color-surfacelighter); } .imdb-container { cursor: pointer; - width: var(--button-width); + width: var(--action-button-width); display: flex; flex-direction: row; padding: 0.3em 0.6em; @@ -278,7 +179,7 @@ } .imdb-rating { - font-size: var(--link-font-size); + font-size: 120%; color: var(--color-surfacelighter); } @@ -293,7 +194,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - font-size: var(--name-font-size); + font-size: 160%; color: var(--color-surfacelighter); } @@ -302,7 +203,6 @@ margin: 1em 0; overflow: hidden; overflow-wrap: break-word; - font-size: var(--description-font-size); line-height: 1.5; color: var(--color-surfacelighter); } @@ -311,8 +211,8 @@ margin: 0.8em 0em; .title { - margin-bottom: calc(0.05 * var(--button-width)); - font-size: var(--link-font-size); + margin-bottom: calc(var(--action-button-width) * 0.05); + font-size: 120%; color: var(--color-surface); } @@ -320,7 +220,7 @@ display: inline-block; cursor: pointer; padding: 0.3em 0.6em; - font-size: var(--link-font-size); + font-size: 120%; color: var(--color-surfacelighter); &:hover { @@ -336,8 +236,8 @@ .button-container { cursor: pointer; - width: var(--button-width); - height: var(--button-width); + width: var(--action-button-width); + height: var(--action-button-width); display: inline-flex; flex-direction: column; align-items: center; @@ -351,10 +251,10 @@ .label { height: 40%; - padding: 0 calc(0.1 * var(--button-width)); + padding: 0 calc(var(--action-button-width) * 0.1); overflow-wrap: break-word; overflow: hidden; - font-size: var(--button-label-font-size); + font-size: 110%; color: var(--color-surfacelight); } From e31498f7df32e4e476dcb448d5166caedc35de2d Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 2 Jan 2019 16:03:05 +0200 Subject: [PATCH 06/26] video styles refactored --- .../Detail/VideosList/Video/styles.less | 23 +++++++++---------- src/routes/Detail/VideosList/styles.less | 18 ++++++++------- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less index 0da43ffe0..a6d165be0 100644 --- a/src/routes/Detail/VideosList/Video/styles.less +++ b/src/routes/Detail/VideosList/Video/styles.less @@ -9,7 +9,7 @@ .poster-container { flex: 1; - margin: var(--video-spacing) 0 var(--video-spacing) var(--video-spacing); + margin: var(--spacing) 0 var(--spacing) var(--spacing); .poster { display: block; @@ -31,14 +31,13 @@ .info-container { flex: 3; - min-height: calc(0.2 * var(--video-width)); - padding: var(--video-spacing); + min-height: calc(var(--video-width) * 0.2); + padding: var(--spacing); display: flex; flex-direction: column; justify-content: center; .title { - font-size: var(--video-title-font-size); line-height: 1.2em; color: var(--color-surfacelighter); word-break: break-all; //Firefox doesn't support { break-word } @@ -46,7 +45,7 @@ } .released-date { - font-size: var(--video-released-date-font-size); + font-size: 90%; color: var(--color-surface); } @@ -54,17 +53,17 @@ display: flex; .upcoming-label, .watched-label { - font-size: var(--video-label-font-size); + font-size: 80%; font-weight: 500; line-height: 1.5; - border-width: var(--video-label-border-width); + border-width: calc(var(--spacing) * 0.25); border-style: solid; padding: 0 0.6em; color: var(--color-surfacelighter); } .upcoming-label { - margin-right: var(--video-spacing); + margin-right: var(--spacing); border-color: var(--color-signal5); } @@ -74,15 +73,15 @@ } >:not(:last-child) { - margin-bottom: calc(0.5 * var(--video-spacing)); + margin-bottom: calc(var(--spacing) * 0.5); } } .arrow-container { - width: calc(0.07 * var(--video-width)); + width: calc(var(--video-width) * 0.07); display: flex; align-items: center; - padding: var(--video-spacing) var(--video-spacing) var(--video-spacing) 0; + padding: var(--spacing) var(--spacing) var(--spacing) 0; .arrow { width: 100%; @@ -92,7 +91,7 @@ } .progress-container { - height: calc(0.5 * var(--video-spacing)); + height: calc(var(--spacing) * 0.5); background-color: var(--color-primarydark); .progress { diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less index cc504a348..73a645e92 100644 --- a/src/routes/Detail/VideosList/styles.less +++ b/src/routes/Detail/VideosList/styles.less @@ -1,10 +1,12 @@ .videos-list-container { + width: calc(var(--video-width) + var(--spacing) * 6); flex-direction: column; padding: calc(3 * var(--spacing)) 0; background: var(--color-backgrounddarker40); .seasons-bar { - height: var(--seasons-bar-height); + height: calc(var(--video-width) * 0.14); + width: 100%; display: flex; justify-content: space-between; margin-bottom: var(--spacing); @@ -12,7 +14,7 @@ .control-bar-button { cursor: pointer; - width: 258px; + flex: 3; display: flex; justify-content: center; align-items: center; @@ -34,8 +36,8 @@ } .button-container { - width: calc(1.5 * var(--seasons-bar-height)); cursor: pointer; + flex: 1; display: flex; align-items: center; justify-content: center; @@ -54,7 +56,7 @@ .scroll-container { flex: 1; - width: calc(var(--video-width) + 4 * var(--spacing)); + width: calc(var(--video-width) + var(--spacing) * 4); padding: 0 calc(2 * var(--spacing)); margin: 0 var(--spacing); overflow-y: auto; @@ -66,7 +68,7 @@ } .scroll-container::-webkit-scrollbar { - width: var(--spacing); + width: var(--spacing) !important; } .scroll-container::-webkit-scrollbar-thumb { @@ -82,16 +84,16 @@ --border-color: var(--color-primarylight); .popup-content { - cursor: pointer; width: 258px; background-color: var(--color-backgrounddark); - + .season { + cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 16px; - width: 258px; + width: 100%; border-top: 1px solid var(--color-primarylight); color: var(--color-surfacelight); From 1184ef21e3b3110b8b4323ef886b276fcc056f42 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Thu, 3 Jan 2019 17:11:43 +0200 Subject: [PATCH 07/26] detail screen style improvements --- src/routes/Detail/Detail.js | 24 ++- src/routes/Detail/VideosList/styles.less | 5 +- src/routes/Detail/styles.less | 214 +++++------------------ 3 files changed, 61 insertions(+), 182 deletions(-) diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js index 15fceb8aa..c2cc92c0e 100644 --- a/src/routes/Detail/Detail.js +++ b/src/routes/Detail/Detail.js @@ -17,7 +17,7 @@ class Detail extends Component { return (
{title ?
{title}
: null} - {links.slice(0, 4).map(link => {link})} + {links.map(link => {link})}
); } @@ -30,30 +30,28 @@ class Detail extends Component { { this.state.logoLoaded ? this.setState({ logoLoaded: false })} /> : null } -
-
{this.props.metaItem.duration} min
-
{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}
- - -
{this.props.metaItem.imdbRating}
- -
+
{this.props.metaItem.duration} min
+
{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}
{this.props.metaItem.name}
{this.props.metaItem.description}
{this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })} {this.renderSection({ title: 'WRITTEN BY', links: this.props.metaItem.writers })} {this.renderSection({ title: 'DIRECTED BY', links: this.props.metaItem.directors })} {this.renderSection({ title: 'CAST', links: this.props.metaItem.cast })} -
- +
+
Trailer
 -
+ + +
{this.props.metaItem.imdbRating} / 10
+ +
{this.props.inLibrary ? 'Remove from Library' : 'Add to library'}
-
+
Share
diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less index 73a645e92..74bc958b9 100644 --- a/src/routes/Detail/VideosList/styles.less +++ b/src/routes/Detail/VideosList/styles.less @@ -1,16 +1,15 @@ .videos-list-container { width: calc(var(--video-width) + var(--spacing) * 6); + display: flex; flex-direction: column; - padding: calc(3 * var(--spacing)) 0; + align-items: center; background: var(--color-backgrounddarker40); .seasons-bar { height: calc(var(--video-width) * 0.14); width: 100%; display: flex; - justify-content: space-between; margin-bottom: var(--spacing); - background: var(--color-backgrounddarker); .control-bar-button { cursor: pointer; diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less index e996042e8..1d16cd253 100644 --- a/src/routes/Detail/styles.less +++ b/src/routes/Detail/styles.less @@ -6,114 +6,11 @@ font-size: 12px; } -@media screen and (max-width: 1220px) { - .detail-container { - --spacing: 6px; - --action-button-width: 70px; - --video-width: 300px; - --stream-width: 300px; - font-size: 10px; - } -} - -@media screen and (min-width: 1440px) { - .detail-container { - --spacing: 8px; - --action-button-width: 90px; - --video-width: 420px; - --stream-width: 420px; - font-size: 13px; - } -} - -@media screen and (min-width: 1680px) { - .detail-container { - --spacing: 10px; - --action-button-width: 110px; - --video-width: 480px; - --stream-width: 480px; - font-size: 16px; - } -} - -@media screen and (min-width: 1920px) { - .detail-container { - --spacing: 10px; - --action-button-width: 140px; - --video-width: 560px; - --stream-width: 560px; - font-size: 20px; - } -} - -@media screen and (min-width: 2048px) { - .detail-container { - --spacing: 14px; - --action-button-width: 140px; - --video-width: 600px; - --stream-width: 600px; - font-size: 20px; - } -} - -@media screen and (min-width: 2560px) { - .detail-container { - --spacing: 16px; - --action-button-width: 170px; - --video-width: 740px; - --stream-width: 740px; - font-size: 26px; - } -} - -@media screen and (min-width: 2880px) { - .detail-container { - --spacing: 20px; - --action-button-width: 190px; - --video-width: 800px; - --stream-width: 800px; - font-size: 28px; - } -} - -@media screen and (min-width: 3440px) { - .detail-container { - --spacing: 24px; - --action-button-width: 240px; - --video-width: 1100px; - --stream-width: 1100px; - font-size: 40px; - } -} - -// @media screen and (min-height: 700px) { -// .detail-container { -// --font-size: 12px; -// --spacing: 8px; -// --action-button-width: 90px; -// --video-width: 360px; -// --stream-width: 360px; -// } -// } - -// @media screen and (min-height: 800px) { -// .detail-container { -// --font-size: 12px; -// --spacing: 8px; -// --action-button-width: 100px; -// --video-width: 360px; -// --stream-width: 360px; -// } -// } - .detail-container { position: relative; z-index: 0; width: 100%; height: 100%; - display: flex; - flex-direction: row; - align-items: stretch; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -138,6 +35,7 @@ padding: calc(var(--spacing) * 3); .logo { + display: block; height: calc(var(--action-button-width) * 1.2); object-fit: contain; } @@ -146,61 +44,30 @@ display: none; } - .basic-info { - display: flex; - flex-direction: row; - align-items: center; - margin: 0.6em 0; + .duration { + display: inline-flex; + margin-right: 0.6em; + font-size: 115%; + color: var(--color-surfacelighter); + } - .duration { - padding: 0.3em 0.6em; - font-size: 120%; - color: var(--color-surfacelighter); - } - - .release-info { - padding: 0.3em 0.6em; - font-size: 120%; - color: var(--color-surfacelighter); - } - - .imdb-container { - cursor: pointer; - width: var(--action-button-width); - display: flex; - flex-direction: row; - padding: 0.3em 0.6em; - - .imdb-logo { - flex: 1; - height: 100%; - margin-right: 10%; - fill: var(--color-surface); - } - - .imdb-rating { - font-size: 120%; - color: var(--color-surfacelighter); - } - - &:hover { - background-color: var(--color-surface40); - } - } + .release-info { + display: inline-flex; + font-size: 115%; + color: var(--color-surfacelighter); } .name { - padding: 0.3em 0; + max-height: 3em; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 160%; + overflow-wrap: break-word; + font-size: 150%; + line-height: 1.5; color: var(--color-surfacelighter); } .description { - max-height: 7.5em; - margin: 1em 0; + max-height: 10.5em; overflow: hidden; overflow-wrap: break-word; line-height: 1.5; @@ -208,61 +75,78 @@ } .section-container { - margin: 0.8em 0em; - .title { - margin-bottom: calc(var(--action-button-width) * 0.05); - font-size: 120%; + margin-bottom: 0.3em; + font-size: 115%; color: var(--color-surface); } .link { - display: inline-block; + display: none; cursor: pointer; padding: 0.3em 0.6em; - font-size: 120%; - color: var(--color-surfacelighter); + font-size: 115%; + color: var(--color-surfacelight); &:hover { + color: var(--color-surfacelighter); background-color: var(--color-surface40); } + + &:nth-child(-n+5) { + display: inline-block; + } } } - .buttons { + .action-buttons-container { position: absolute; left: calc(var(--spacing) * 3); bottom: calc(var(--spacing) * 3); - .button-container { + .action-button-container { cursor: pointer; width: var(--action-button-width); height: var(--action-button-width); display: inline-flex; flex-direction: column; align-items: center; + justify-content: center; text-align: center; .icon { height: 30%; - margin: 20% 0 10% 0; - fill: var(--color-surfacelighter); + margin: 10% 0; + fill: var(--color-surfacelight); } .label { - height: 40%; - padding: 0 calc(var(--action-button-width) * 0.1); + height: 2.4em; + padding: 0 1em; overflow-wrap: break-word; overflow: hidden; - font-size: 110%; + font-size: 105%; + line-height: 1.2em; color: var(--color-surfacelight); } &:hover { background-color: var(--color-surfacedarker60); + + .icon { + fill: var(--color-surfacelighter); + } + + .label { + color: var(--color-surfacelighter); + } } } } + + >:not(:last-child) { + margin-bottom: calc(var(--spacing) * 1.5); + } } .videos-list { @@ -271,8 +155,6 @@ top: 0; right: 0; bottom: 0; - display: flex; - flex-direction: column; - align-items: center; + padding: calc(3 * var(--spacing)) 0; } } \ No newline at end of file From 6ddad3253ddffda5a8e06493fb0120562a552349 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 7 Jan 2019 11:59:40 +0200 Subject: [PATCH 08/26] video style changes --- .../Detail/VideosList/Video/styles.less | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less index a6d165be0..7864b0843 100644 --- a/src/routes/Detail/VideosList/Video/styles.less +++ b/src/routes/Detail/VideosList/Video/styles.less @@ -39,13 +39,13 @@ .title { line-height: 1.2em; - color: var(--color-surfacelighter); + color: var(--color-surfacelight); word-break: break-all; //Firefox doesn't support { break-word } word-break: break-word; } .released-date { - font-size: 90%; + font-size: 0.9em; color: var(--color-surface); } @@ -53,13 +53,13 @@ display: flex; .upcoming-label, .watched-label { - font-size: 80%; + font-size: 0.8em; font-weight: 500; line-height: 1.5; border-width: calc(var(--spacing) * 0.25); border-style: solid; padding: 0 0.6em; - color: var(--color-surfacelighter); + color: var(--color-surfacelight); } .upcoming-label { @@ -85,7 +85,7 @@ .arrow { width: 100%; - fill: var(--color-surfacelighter); + fill: var(--color-surfacelight); } } } @@ -103,5 +103,23 @@ &:hover { cursor: pointer; background-color: var(--color-surfacedarker); + + .info-container { + .title { + color: var(--color-surfacelighter); + } + + .label-container { + .upcoming-label, .watched-label { + color: var(--color-surfacelighter); + } + } + } + + .arrow-container { + .arrow { + fill: var(--color-surfacelighter); + } + } } } \ No newline at end of file From 128de1555a31d04a0912d73659bdb81fac488132 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 7 Jan 2019 12:05:28 +0200 Subject: [PATCH 09/26] popup changes in video list --- src/routes/Detail/VideosList/VideosList.js | 26 +++++-- src/routes/Detail/VideosList/styles.less | 80 +++++++++++++++++----- 2 files changed, 82 insertions(+), 24 deletions(-) diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js index 55aa870ae..c2559ad91 100644 --- a/src/routes/Detail/VideosList/VideosList.js +++ b/src/routes/Detail/VideosList/VideosList.js @@ -16,7 +16,8 @@ class VideosList extends Component { this.state = { selectedSeason: this.seasons[0], - selectedVideoId: 0 + selectedVideoId: 0, + seasonsPopupOpen: false } } @@ -26,7 +27,8 @@ class VideosList extends Component { } shouldComponentUpdate(nextProps, nextState) { - return nextState.selectedSeason !== this.state.selectedSeason; + return nextState.selectedSeason !== this.state.selectedSeason || + nextState.seasonsPopupOpen !== this.state.seasonsPopupOpen; } onPrevButtonClicked = () => { @@ -39,6 +41,14 @@ class VideosList extends Component { this.setState({ selectedSeason: this.seasons[nextSeasonIndex] }); } + onSeasonsPopupOpen = () => { + this.setState({ seasonsPopupOpen: true }); + } + + onSeasonsPopupClose = () => { + this.setState({ seasonsPopupOpen: false }); + } + onClick = (event) => { this.setState({ selectedVideoId: event.currentTarget.dataset.videoId }); console.log(event.currentTarget.dataset.videoId); @@ -51,18 +61,20 @@ class VideosList extends Component {
- + -
- S {this.state.selectedSeason} +
+
Season
+
{this.state.selectedSeason}
{this.seasons.map((season) => -
- S {season} +
+
Season
+
{season}
)}
diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less index 74bc958b9..f52f596d6 100644 --- a/src/routes/Detail/VideosList/styles.less +++ b/src/routes/Detail/VideosList/styles.less @@ -9,34 +9,61 @@ height: calc(var(--video-width) * 0.14); width: 100%; display: flex; + justify-content: space-between; margin-bottom: var(--spacing); - .control-bar-button { + .season-bar-button { cursor: pointer; - flex: 3; + width: calc(var(--video-width) * 0.6); display: flex; - justify-content: center; align-items: center; - color: var(--color-surfacelighter); + justify-content: center; + padding: var(--spacing); + color: var(--color-surfacelight); + + .season-label { + max-width: 8em; + max-height: 2.4em; + font-size: 1.2em; + line-height: 1.2em; + text-align: end; + overflow: hidden; + } + + .season-number { + margin: 0 calc(var(--spacing) * 1.5) 0 var(--spacing); + font-size: 1.2em; + line-height: 1.2em; + } .icon { - width: 14%; - height: 14%; + width: calc(var(--video-width) * 0.04); + height: calc(var(--video-width) * 0.04); fill: var(--color-surfacelight); } &:hover { + color: var(--color-surfacelighter); background-color: var(--color-surfacedarker60); .icon { fill: var(--color-surfacelighter); } } + + &:global(.active) { + color: var(--color-backgrounddarker); + background-color: var(--color-surfacelighter); + + .icon { + fill: var(--color-backgrounddarker); + } + } } .button-container { cursor: pointer; - flex: 1; + width: calc(var(--video-width) * 0.2); display: flex; align-items: center; justify-content: center; @@ -44,11 +71,15 @@ .button-icon { width: 60%; height: 60%; - fill: var(--color-surfacelighter); + fill: var(--color-surfacelight); } &:hover { background-color: var(--color-surfacedarker60); + + .button-icon { + fill: var(--color-surfacelighter); + } } } } @@ -79,26 +110,41 @@ } } -.popup-container { - --border-color: var(--color-primarylight); +:global(.detail-popup-container) { + --border-color: var(--color-backgrounddarker80); .popup-content { - width: 258px; - background-color: var(--color-backgrounddark); + width: calc(var(--video-width) * 0.6); + background-color: var(--color-surfacelighter); .season { cursor: pointer; display: flex; align-items: center; - justify-content: center; - padding: 16px; width: 100%; - border-top: 1px solid var(--color-primarylight); - color: var(--color-surfacelight); + padding: calc(var(--spacing) * 1.5); + font-size: 1.2em; + color: var(--color-backgrounddark); + + .season-label { + max-height: 2.4em; + line-height: 1.2em; + overflow: hidden; + } + + .season-number { + margin-left: var(--spacing); + line-height: 1.2em; + } + + &.selected-season { + color: var(--color-surfacelighter); + background-color: var(--color-primarydark); + } &:hover { color: var(--color-surfacelighter); - background-color: var(--color-surfacedarker60); + background-color: var(--color-primarylight); } } } From 40606257f3af2df3ddd607586e751e5fc2a5add3 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 7 Jan 2019 12:07:36 +0200 Subject: [PATCH 10/26] detail screen style changes --- src/routes/Detail/Detail.js | 25 +++++++++++++++---- src/routes/Detail/styles.less | 47 +++++++++++++++++++++++------------ 2 files changed, 51 insertions(+), 21 deletions(-) diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js index c2cc92c0e..c2e6e8332 100644 --- a/src/routes/Detail/Detail.js +++ b/src/routes/Detail/Detail.js @@ -16,7 +16,12 @@ class Detail extends Component { renderSection({ title, links }) { return (
- {title ?
{title}
: null} + { + title ? +
{title}
+ : + null + } {links.map(link => {link})}
); @@ -28,10 +33,20 @@ class Detail extends Component {
{ - this.state.logoLoaded ? this.setState({ logoLoaded: false })} /> : null + this.state.logoLoaded ? + this.setState({ logoLoaded: false })} /> + : + null } -
{this.props.metaItem.duration} min
-
{this.props.metaItem.releaseInfo.length > 0 ? this.props.metaItem.releaseInfo : this.props.metaItem.released.getFullYear()}
+
{this.props.metaItem.duration}
+
+ { + this.props.metaItem.releaseInfo.length > 0 ? + this.props.metaItem.releaseInfo + : + this.props.metaItem.released.getFullYear() + } +
{this.props.metaItem.name}
{this.props.metaItem.description}
{this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })} @@ -73,7 +88,7 @@ Detail.defaultProps = { metaItem: { logo: 'https://images.metahub.space/logo/medium/tt4123430/img', background: 'https://images.metahub.space/background/medium/tt4123430/img', - duration: '134', + duration: '134 min', releaseInfo: '2018', released: new Date(2018, 4, 23), imdbRating: '7.4', diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less index 1d16cd253..c45e3e2fa 100644 --- a/src/routes/Detail/styles.less +++ b/src/routes/Detail/styles.less @@ -1,4 +1,4 @@ -.detail-container { +.detail-container, :global(.detail-popup-container) { --spacing: 8px; --action-button-width: 80px; --video-width: 360px; @@ -45,25 +45,33 @@ } .duration { - display: inline-flex; - margin-right: 0.6em; - font-size: 115%; - color: var(--color-surfacelighter); + display: inline-block; + max-width: 45%; + margin-right: 1.2em; + font-size: 1.15em; + overflow: hidden; + white-space: pre; + text-overflow: ellipsis; + color: var(--color-surfacelight); } .release-info { - display: inline-flex; - font-size: 115%; - color: var(--color-surfacelighter); + display: inline-block; + max-width: 45%; + font-size: 1.15em; + overflow: hidden; + white-space: pre; + text-overflow: ellipsis; + color: var(--color-surfacelight); } .name { max-height: 3em; overflow: hidden; overflow-wrap: break-word; - font-size: 150%; + font-size: 1.5em; line-height: 1.5; - color: var(--color-surfacelighter); + color: var(--color-surfacelight); } .description { @@ -71,29 +79,36 @@ overflow: hidden; overflow-wrap: break-word; line-height: 1.5; - color: var(--color-surfacelighter); + color: var(--color-surfacelight); } .section-container { + max-height: 3.2em; + overflow: hidden; + .title { margin-bottom: 0.3em; - font-size: 115%; + font-size: 1.15em; color: var(--color-surface); } .link { display: none; - cursor: pointer; + max-width: 100%; padding: 0.3em 0.6em; - font-size: 115%; + font-size: 1.15em; + overflow: hidden; + white-space: pre; + text-overflow: ellipsis; color: var(--color-surfacelight); + cursor: pointer; &:hover { color: var(--color-surfacelighter); background-color: var(--color-surface40); } - &:nth-child(-n+5) { + &:nth-child(-n+6) { display: inline-block; } } @@ -125,7 +140,7 @@ padding: 0 1em; overflow-wrap: break-word; overflow: hidden; - font-size: 105%; + font-size: 1.05em; line-height: 1.2em; color: var(--color-surfacelight); } From cd0455e8b57293d1b97323a6c60b57ccae8577ec Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 7 Jan 2019 17:14:12 +0200 Subject: [PATCH 11/26] shouldComponentUpdate added --- src/routes/Detail/Detail.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js index c2e6e8332..3c73a7859 100644 --- a/src/routes/Detail/Detail.js +++ b/src/routes/Detail/Detail.js @@ -13,6 +13,10 @@ class Detail extends Component { }; } + shouldComponentUpdate(nextProps, nextState) { + return nextState.logoLoaded !== this.state.logoLoaded; + } + renderSection({ title, links }) { return (
From 6572650b3823f91b5fbf03a4b3d97a24456cb278 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Tue, 8 Jan 2019 17:32:42 +0200 Subject: [PATCH 12/26] popup frame color changed --- src/routes/Player/ControlBar/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less index 5cb2d305d..964d9c341 100644 --- a/src/routes/Player/ControlBar/styles.less +++ b/src/routes/Player/ControlBar/styles.less @@ -80,7 +80,7 @@ } :global(.player-popup-container) { - --border-color: var(--color-primarylight); + --border-color: var(--color-surfacelighter); .popup-content { background-color: var(--color-backgrounddark); From ede0b2be1cdc6188aeb81d10f875d33e6997964e Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Tue, 8 Jan 2019 17:33:38 +0200 Subject: [PATCH 13/26] control bar disabled styles implemented --- src/routes/Player/ControlBar/ControlBar.js | 9 +++------ src/routes/Player/ControlBar/styles.less | 10 +++++++++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index f24539088..8c0f83f81 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -9,8 +9,8 @@ import VolumeBar from './VolumeBar'; import SubtitlesPicker from './SubtitlesPicker'; import styles from './styles'; -const ControlBarButton = React.forwardRef(({ icon, active, onClick }, ref) => ( -
+const ControlBarButton = React.forwardRef(({ icon, active, disabled, onClick }, ref) => ( +
)); @@ -109,15 +109,12 @@ class ControlBar extends Component { } renderSubtitlesButton() { - if (this.props.subtitleTracks.length === 0) { - return null; - } - return ( diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less index 964d9c341..7216d6dc0 100644 --- a/src/routes/Player/ControlBar/styles.less +++ b/src/routes/Player/ControlBar/styles.less @@ -41,7 +41,15 @@ } } - &:hover { + &:global(.disabled) { + cursor: default; + + .icon { + fill: var(--color-surfacedark); + } + } + + &:hover:not(:global(.disabled)) { .icon { fill: var(--color-surfacelighter); } From 5143d43434ab047b1fa4aa9b6e9e652e5d22cf05 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Tue, 8 Jan 2019 17:51:57 +0200 Subject: [PATCH 14/26] proptypes added to PlayPauseButton --- .../ControlBar/PlayPauseButton/PlayPauseButton.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js b/src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js index 02d64c5b6..8d75851b3 100644 --- a/src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js +++ b/src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; class PlayPauseButton extends Component { shouldComponentUpdate(nextProps, nextState) { @@ -20,4 +21,14 @@ class PlayPauseButton extends Component { } } +PlayPauseButton.propTypes = { + paused: PropTypes.bool, + dispatch: PropTypes.func.isRequired, + toggleButtonComponent: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.shape({ render: PropTypes.func.isRequired }), + ]).isRequired +}; + export default PlayPauseButton; From 7637d293a5f45d4d9ff7a21b48b1ecbe20b24629 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Tue, 8 Jan 2019 17:56:40 +0200 Subject: [PATCH 15/26] VolumeBar proptypes updated --- src/routes/Player/ControlBar/VolumeBar/VolumeBar.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/routes/Player/ControlBar/VolumeBar/VolumeBar.js b/src/routes/Player/ControlBar/VolumeBar/VolumeBar.js index 9d66e3a6f..98f8f8996 100644 --- a/src/routes/Player/ControlBar/VolumeBar/VolumeBar.js +++ b/src/routes/Player/ControlBar/VolumeBar/VolumeBar.js @@ -81,7 +81,11 @@ class VolumeBar extends Component { VolumeBar.propTypes = { className: PropTypes.string, volume: PropTypes.number, - toggleButtonComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired, + toggleButtonComponent: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.shape({ render: PropTypes.func.isRequired }), + ]).isRequired, dispatch: PropTypes.func.isRequired }; From d6b1d3a3ed0262577a2a0f32dabd28963a425c2f Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 9 Jan 2019 16:21:13 +0200 Subject: [PATCH 16/26] popup listen for dom mutations and update its styles --- src/common/Popup/Popup.js | 33 +++++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js index 372d4f3b0..ccd370ceb 100644 --- a/src/common/Popup/Popup.js +++ b/src/common/Popup/Popup.js @@ -22,6 +22,7 @@ class Popup extends Component { this.menuBorderBottomRef = React.createRef(); this.menuBorderLeftRef = React.createRef(); this.hiddenBorderRef = React.createRef(); + this.labelMutationObserver = this.createLabelMutationObserver(); this.state = { open: false @@ -38,6 +39,7 @@ class Popup extends Component { window.removeEventListener('blur', this.close); window.removeEventListener('resize', this.close); window.removeEventListener('keyup', this.onKeyUp); + this.labelMutationObserver.disconnect(); } shouldComponentUpdate(nextProps, nextState) { @@ -48,14 +50,41 @@ class Popup extends Component { componentDidUpdate(prevProps, prevState) { if (this.state.open && !prevState.open) { this.updateStyles(); + this.labelMutationObserver.observe(document.documentElement, { + childList: true, + attributes: true, + subtree: true + }); if (typeof this.props.onOpen === 'function') { this.props.onOpen(); } - } else if (!this.state.open && prevState.open && typeof this.props.onClose === 'function') { - this.props.onClose(); + } else if (!this.state.open && prevState.open) { + this.labelMutationObserver.disconnect(); + if (typeof this.props.onClose === 'function') { + this.props.onClose(); + } } } + createLabelMutationObserver = () => { + let prevLabelRect = {}; + return new MutationObserver(() => { + if (this.state.open) { + const labelRect = this.labelRef.current.getBoundingClientRect(); + if (labelRect.x !== prevLabelRect.x || + labelRect.y !== prevLabelRect.y || + labelRect.width !== prevLabelRect.width || + labelRect.height !== prevLabelRect.height) { + this.updateStyles(); + } + + prevLabelRect = labelRect; + } else { + prevLabelRect = {}; + } + }); + } + updateStyles = () => { const menuDirections = {}; const bodyRect = document.body.getBoundingClientRect(); From f1a70932d8cb7fc6adb725aef5413f7dcb07dc26 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 9 Jan 2019 17:31:36 +0200 Subject: [PATCH 17/26] popup border fixed --- src/common/Popup/Popup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js index ccd370ceb..8eb9b7b6e 100644 --- a/src/common/Popup/Popup.js +++ b/src/common/Popup/Popup.js @@ -157,14 +157,14 @@ class Popup extends Component { this.labelBorderLeftRef.current.style.left = `${labelPosition.left}px`; if (menuDirections.top) { - this.labelBorderTopRef.current.style.display = 'none'; + this.labelBorderTopRef.current.style.left = `${labelPosition.left + menuRect.width}px`; if (menuDirections.left) { this.menuBorderBottomRef.current.style.right = `${labelRect.width - borderSize}px`; } else { this.menuBorderBottomRef.current.style.left = `${labelRect.width - borderSize}px`; } } else { - this.labelBorderBottomRef.current.style.display = 'none'; + this.labelBorderBottomRef.current.style.left = `${labelPosition.left + menuRect.width}px`; if (menuDirections.left) { this.menuBorderTopRef.current.style.right = `${labelRect.width - borderSize}px`; } else { From c0ea366fc4dbeeac913c6f2e4df4e70d0ca2910b Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Tue, 15 Jan 2019 15:56:06 +0200 Subject: [PATCH 18/26] resizable label/menu in popup implemented --- src/common/Popup/Popup.js | 74 +++++++++++++++++++++++------------- src/common/Popup/styles.less | 2 +- 2 files changed, 49 insertions(+), 27 deletions(-) diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js index 8eb9b7b6e..6ad80d7bb 100644 --- a/src/common/Popup/Popup.js +++ b/src/common/Popup/Popup.js @@ -15,14 +15,15 @@ class Popup extends Component { this.labelBorderRightRef = React.createRef(); this.labelBorderBottomRef = React.createRef(); this.labelBorderLeftRef = React.createRef(); - this.menuRef = React.createRef(); + this.menuContainerRef = React.createRef(); this.menuScrollRef = React.createRef(); + this.menuChildrenRef = React.createRef(); this.menuBorderTopRef = React.createRef(); this.menuBorderRightRef = React.createRef(); this.menuBorderBottomRef = React.createRef(); this.menuBorderLeftRef = React.createRef(); this.hiddenBorderRef = React.createRef(); - this.labelMutationObserver = this.createLabelMutationObserver(); + this.popupMutationObserver = this.createPopupMutationObserver(); this.state = { open: false @@ -39,7 +40,7 @@ class Popup extends Component { window.removeEventListener('blur', this.close); window.removeEventListener('resize', this.close); window.removeEventListener('keyup', this.onKeyUp); - this.labelMutationObserver.disconnect(); + this.popupMutationObserver.disconnect(); } shouldComponentUpdate(nextProps, nextState) { @@ -50,7 +51,7 @@ class Popup extends Component { componentDidUpdate(prevProps, prevState) { if (this.state.open && !prevState.open) { this.updateStyles(); - this.labelMutationObserver.observe(document.documentElement, { + this.popupMutationObserver.observe(document.documentElement, { childList: true, attributes: true, subtree: true @@ -59,37 +60,56 @@ class Popup extends Component { this.props.onOpen(); } } else if (!this.state.open && prevState.open) { - this.labelMutationObserver.disconnect(); + this.popupMutationObserver.disconnect(); if (typeof this.props.onClose === 'function') { this.props.onClose(); } } } - createLabelMutationObserver = () => { + createPopupMutationObserver = () => { let prevLabelRect = {}; + let prevMenuChildrenRect = {}; return new MutationObserver(() => { if (this.state.open) { const labelRect = this.labelRef.current.getBoundingClientRect(); + const menuChildrenRect = this.menuChildrenRef.current.getBoundingClientRect(); if (labelRect.x !== prevLabelRect.x || labelRect.y !== prevLabelRect.y || labelRect.width !== prevLabelRect.width || - labelRect.height !== prevLabelRect.height) { + labelRect.height !== prevLabelRect.height || + menuChildrenRect.x !== prevMenuChildrenRect.x || + menuChildrenRect.y !== prevMenuChildrenRect.y || + menuChildrenRect.width !== prevMenuChildrenRect.width || + menuChildrenRect.height !== prevMenuChildrenRect.height) { this.updateStyles(); } prevLabelRect = labelRect; + prevMenuChildrenRect = menuChildrenRect; } else { prevLabelRect = {}; + prevMenuChildrenRect = {}; } }); } updateStyles = () => { + this.menuContainerRef.current.removeAttribute('style'); + this.menuScrollRef.current.removeAttribute('style'); + this.menuBorderTopRef.current.removeAttribute('style'); + this.menuBorderRightRef.current.removeAttribute('style'); + this.menuBorderBottomRef.current.removeAttribute('style'); + this.menuBorderLeftRef.current.removeAttribute('style'); + this.labelBorderTopRef.current.removeAttribute('style'); + this.labelBorderRightRef.current.removeAttribute('style'); + this.labelBorderBottomRef.current.removeAttribute('style'); + this.labelBorderLeftRef.current.removeAttribute('style'); + const menuDirections = {}; const bodyRect = document.body.getBoundingClientRect(); - const menuRect = this.menuRef.current.getBoundingClientRect(); const labelRect = this.labelRef.current.getBoundingClientRect(); + const menuChildredRect = this.menuChildrenRef.current.getBoundingClientRect(); const borderSize = parseFloat(window.getComputedStyle(this.hiddenBorderRef.current).getPropertyValue('border-top-width')); const labelPosition = { left: labelRect.x - bodyRect.x, @@ -98,38 +118,38 @@ class Popup extends Component { bottom: (bodyRect.height + bodyRect.y) - (labelRect.y + labelRect.height) }; - if (menuRect.height <= labelPosition.bottom) { - this.menuRef.current.style.top = `${labelPosition.top + labelRect.height}px`; + if (menuChildredRect.height <= labelPosition.bottom) { + this.menuContainerRef.current.style.top = `${labelPosition.top + labelRect.height}px`; this.menuScrollRef.current.style.maxHeight = `${labelPosition.bottom}px`; menuDirections.bottom = true; - } else if (menuRect.height <= labelPosition.top) { - this.menuRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`; + } else if (menuChildredRect.height <= labelPosition.top) { + this.menuContainerRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`; this.menuScrollRef.current.style.maxHeight = `${labelPosition.top}px`; menuDirections.top = true; } else if (labelPosition.bottom >= labelPosition.top) { - this.menuRef.current.style.top = `${labelPosition.top + labelRect.height}px`; + this.menuContainerRef.current.style.top = `${labelPosition.top + labelRect.height}px`; this.menuScrollRef.current.style.maxHeight = `${labelPosition.bottom}px`; menuDirections.bottom = true; } else { - this.menuRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`; + this.menuContainerRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`; this.menuScrollRef.current.style.maxHeight = `${labelPosition.top}px`; menuDirections.top = true; } - if (menuRect.width <= (labelPosition.right + labelRect.width)) { - this.menuRef.current.style.left = `${labelPosition.left}px`; + if (menuChildredRect.width <= (labelPosition.right + labelRect.width)) { + this.menuContainerRef.current.style.left = `${labelPosition.left}px`; this.menuScrollRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`; menuDirections.right = true; - } else if (menuRect.width <= (labelPosition.left + labelRect.width)) { - this.menuRef.current.style.right = `${labelPosition.right}px`; + } else if (menuChildredRect.width <= (labelPosition.left + labelRect.width)) { + this.menuContainerRef.current.style.right = `${labelPosition.right}px`; this.menuScrollRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`; menuDirections.left = true; } else if (labelPosition.right > labelPosition.left) { - this.menuRef.current.style.left = `${labelPosition.left}px`; + this.menuContainerRef.current.style.left = `${labelPosition.left}px`; this.menuScrollRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`; menuDirections.right = true; } else { - this.menuRef.current.style.right = `${labelPosition.right}px`; + this.menuContainerRef.current.style.right = `${labelPosition.right}px`; this.menuScrollRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`; menuDirections.left = true; } @@ -157,14 +177,14 @@ class Popup extends Component { this.labelBorderLeftRef.current.style.left = `${labelPosition.left}px`; if (menuDirections.top) { - this.labelBorderTopRef.current.style.left = `${labelPosition.left + menuRect.width}px`; + this.labelBorderTopRef.current.style.left = `${labelPosition.left + menuChildredRect.width}px`; if (menuDirections.left) { this.menuBorderBottomRef.current.style.right = `${labelRect.width - borderSize}px`; } else { this.menuBorderBottomRef.current.style.left = `${labelRect.width - borderSize}px`; } } else { - this.labelBorderBottomRef.current.style.left = `${labelPosition.left + menuRect.width}px`; + this.labelBorderBottomRef.current.style.left = `${labelPosition.left + menuChildredRect.width}px`; if (menuDirections.left) { this.menuBorderTopRef.current.style.right = `${labelRect.width - borderSize}px`; } else { @@ -173,7 +193,7 @@ class Popup extends Component { } } - this.menuRef.current.style.visibility = 'visible'; + this.menuContainerRef.current.style.visibility = 'visible'; } onKeyUp = (event) => { @@ -206,9 +226,11 @@ class Popup extends Component { return ( -
-
- {children} +
+
+
+ {children} +
diff --git a/src/common/Popup/styles.less b/src/common/Popup/styles.less index 9f542e699..daa8bacf6 100644 --- a/src/common/Popup/styles.less +++ b/src/common/Popup/styles.less @@ -2,7 +2,7 @@ position: absolute; visibility: hidden; - .scroll-container { + .menu-scroll-container { overflow: auto; } } From 425e7adeb29c64b07f1d0c8fc3589d11187ff52e Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 16 Jan 2019 12:22:04 +0200 Subject: [PATCH 19/26] buffering prop implemented in HTMLVideo --- .../Player/Video/stremio-video/HTMLVideo.js | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/routes/Player/Video/stremio-video/HTMLVideo.js b/src/routes/Player/Video/stremio-video/HTMLVideo.js index 5b7f74357..98daad540 100644 --- a/src/routes/Player/Video/stremio-video/HTMLVideo.js +++ b/src/routes/Player/Video/stremio-video/HTMLVideo.js @@ -51,6 +51,13 @@ var HTMLVideo = function(containerElement) { return Math.floor(videoElement.duration * 1000); } + function getBuffering() { + if (!loaded) { + return null; + } + + return videoElement.readyState < videoElement.HAVE_FUTURE_DATA; + } function getVolume() { if (destroyed) { return null; @@ -140,6 +147,9 @@ var HTMLVideo = function(containerElement) { function onDurationChanged() { events.emit('propChanged', 'duration', getDuration()); } + function onBufferingChanged() { + events.emit('propChanged', 'buffering', getBuffering()); + } function onVolumeChanged() { events.emit('propChanged', 'volume', getVolume()); } @@ -216,6 +226,13 @@ var HTMLVideo = function(containerElement) { videoElement.removeEventListener('durationchange', onDurationChanged); videoElement.addEventListener('durationchange', onDurationChanged); return; + case 'buffering': + events.emit('propValue', 'buffering', getBuffering()); + videoElement.removeEventListener('waiting', onBufferingChanged); + videoElement.addEventListener('waiting', onBufferingChanged); + videoElement.removeEventListener('playing', onBufferingChanged); + videoElement.addEventListener('playing', onBufferingChanged); + return; case 'volume': events.emit('propValue', 'volume', getVolume()); videoElement.removeEventListener('volumechange', onVolumeChanged); @@ -383,6 +400,7 @@ var HTMLVideo = function(containerElement) { onPausedChanged(); onTimeChanged(); onDurationChanged(); + onBufferingChanged(); onSubtitleTracksChanged(); onSelectedSubtitleTrackIdChanged(); onSubtitleDelayChanged(); @@ -402,6 +420,7 @@ var HTMLVideo = function(containerElement) { onPausedChanged(); onTimeChanged(); onDurationChanged(); + onBufferingChanged(); updateSubtitleText(); flushArgsQueue(); return; @@ -417,6 +436,8 @@ var HTMLVideo = function(containerElement) { videoElement.removeEventListener('timeupdate', onTimeChanged); videoElement.removeEventListener('durationchange', onDurationChanged); videoElement.removeEventListener('volumechange', onVolumeChanged); + videoElement.removeEventListener('waiting', onBufferingChanged); + videoElement.removeEventListener('playing', onBufferingChanged); containerElement.removeChild(videoElement); containerElement.removeChild(stylesElement); containerElement.removeChild(subtitlesElement); @@ -438,7 +459,7 @@ var HTMLVideo = function(containerElement) { HTMLVideo.manifest = { name: 'HTMLVideo', embedded: true, - props: ['paused', 'time', 'duration', 'volume', 'subtitleTracks', 'selectedSubtitleTrackId', 'subtitleSize', 'subtitleDelay', 'subtitleDarkBackground'] + props: ['paused', 'time', 'duration', 'volume', 'buffering', 'subtitleTracks', 'selectedSubtitleTrackId', 'subtitleSize', 'subtitleDelay', 'subtitleDarkBackground'] }; module.exports = HTMLVideo; From 3df2901900e32c7be998d200f7f7ca396696f0fd Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 16 Jan 2019 12:48:03 +0200 Subject: [PATCH 20/26] simple buffering loaded implemented --- .../Player/BufferingLoader/BufferingLoader.js | 25 +++++++++++++++++++ src/routes/Player/BufferingLoader/index.js | 3 +++ src/routes/Player/BufferingLoader/styles.less | 24 ++++++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 src/routes/Player/BufferingLoader/BufferingLoader.js create mode 100644 src/routes/Player/BufferingLoader/index.js create mode 100644 src/routes/Player/BufferingLoader/styles.less diff --git a/src/routes/Player/BufferingLoader/BufferingLoader.js b/src/routes/Player/BufferingLoader/BufferingLoader.js new file mode 100644 index 000000000..113719174 --- /dev/null +++ b/src/routes/Player/BufferingLoader/BufferingLoader.js @@ -0,0 +1,25 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import styles from './styles'; + +class BufferingLoader extends PureComponent { + render() { + if (!this.props.buffering) { + return null; + } + + return ( +
+
+
+ ); + } +} + +BufferingLoader.propTypes = { + className: PropTypes.string, + buffering: PropTypes.bool +}; + +export default BufferingLoader; diff --git a/src/routes/Player/BufferingLoader/index.js b/src/routes/Player/BufferingLoader/index.js new file mode 100644 index 000000000..cc509df35 --- /dev/null +++ b/src/routes/Player/BufferingLoader/index.js @@ -0,0 +1,3 @@ +import BufferingLoader from './BufferingLoader'; + +export default BufferingLoader; diff --git a/src/routes/Player/BufferingLoader/styles.less b/src/routes/Player/BufferingLoader/styles.less new file mode 100644 index 000000000..fc7f36800 --- /dev/null +++ b/src/routes/Player/BufferingLoader/styles.less @@ -0,0 +1,24 @@ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.buffering-loader-container { + display: flex; + align-items: center; + justify-content: center; + + .bufferring-loader { + width: 150px; + height: 150px; + border-radius: 50%; + border: 10px solid #f3f3f3; + border-top: 10px solid #3498db; + animation: spin 2s linear infinite; + } +} \ No newline at end of file From f22fde396227095c4e94be1b2b28102323d0450e Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 16 Jan 2019 12:52:58 +0200 Subject: [PATCH 21/26] buffering loaded rendered in player --- src/routes/Player/Player.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 9bba9aa74..ef9998a43 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import Video from './Video'; +import BufferingLoader from './BufferingLoader'; import ControlBar from './ControlBar'; import styles from './styles'; @@ -15,6 +16,7 @@ class Player extends Component { paused: null, time: null, duration: null, + buffering: null, volume: null, subtitleTracks: [], selectedSubtitleTrackId: null, @@ -28,6 +30,7 @@ class Player extends Component { return nextState.paused !== this.state.paused || nextState.time !== this.state.time || nextState.duration !== this.state.duration || + nextState.buffering !== this.state.buffering || nextState.volume !== this.state.volume || nextState.subtitleTracks !== this.state.subtitleTracks || nextState.selectedSubtitleTrackId !== this.state.selectedSubtitleTrackId || @@ -82,6 +85,15 @@ class Player extends Component { ); } + renderBufferingLoader() { + return ( + + ); + } + renderControlBar() { return ( {this.renderVideo()} + {this.renderBufferingLoader()} {this.renderControlBar()}
); From 509313eac9f8098165337d8d8ffed2f943200f80 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 16 Jan 2019 13:12:02 +0200 Subject: [PATCH 22/26] emit buffering propChanged when autoplay is not set --- src/routes/Player/Video/stremio-video/HTMLVideo.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/routes/Player/Video/stremio-video/HTMLVideo.js b/src/routes/Player/Video/stremio-video/HTMLVideo.js index 98daad540..da6395132 100644 --- a/src/routes/Player/Video/stremio-video/HTMLVideo.js +++ b/src/routes/Player/Video/stremio-video/HTMLVideo.js @@ -232,6 +232,8 @@ var HTMLVideo = function(containerElement) { videoElement.addEventListener('waiting', onBufferingChanged); videoElement.removeEventListener('playing', onBufferingChanged); videoElement.addEventListener('playing', onBufferingChanged); + videoElement.removeEventListener('loadeddata', onBufferingChanged); + videoElement.addEventListener('loadeddata', onBufferingChanged); return; case 'volume': events.emit('propValue', 'volume', getVolume()); @@ -438,6 +440,7 @@ var HTMLVideo = function(containerElement) { videoElement.removeEventListener('volumechange', onVolumeChanged); videoElement.removeEventListener('waiting', onBufferingChanged); videoElement.removeEventListener('playing', onBufferingChanged); + videoElement.removeEventListener('loadeddata', onBufferingChanged); containerElement.removeChild(videoElement); containerElement.removeChild(stylesElement); containerElement.removeChild(subtitlesElement); From 425f50724d7e1c9f516762639eaa4d9af6e8d806 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 16 Jan 2019 14:29:18 +0200 Subject: [PATCH 23/26] emit missing subtitlesDelayChanged event on media loaded --- src/routes/Player/Video/stremio-video/HTMLVideo.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Player/Video/stremio-video/HTMLVideo.js b/src/routes/Player/Video/stremio-video/HTMLVideo.js index da6395132..bff9754d7 100644 --- a/src/routes/Player/Video/stremio-video/HTMLVideo.js +++ b/src/routes/Player/Video/stremio-video/HTMLVideo.js @@ -423,6 +423,7 @@ var HTMLVideo = function(containerElement) { onTimeChanged(); onDurationChanged(); onBufferingChanged(); + onSubtitleDelayChanged(); updateSubtitleText(); flushArgsQueue(); return; From bde6e72e7cf258d483262a487ae331fb37ab9867 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 16 Jan 2019 15:00:37 +0200 Subject: [PATCH 24/26] Video component refactored to be used through dispatch method only --- src/routes/Player/Player.js | 2 +- src/routes/Player/Video/Video.js | 37 +++++++++++++++----------------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index ef9998a43..185879c6a 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -46,6 +46,7 @@ class Player extends Component { label: 'English' }]); this.dispatch('setProp', 'selectedSubtitleTrackId', 'https://raw.githubusercontent.com/caitp/ng-media/master/example/assets/captions/bunny-en.vtt'); + this.dispatch('command', 'load', this.props.stream); } onEnded = () => { @@ -74,7 +75,6 @@ class Player extends Component {