From f30827ab18f5dd54cbf446e54b5a98e445b80842 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Tue, 16 Oct 2018 14:46:00 +0300 Subject: [PATCH] remove float, rename props/func --- package.json | 110 +++++++++++++++--------------- src/common/Addon/Addon.js | 19 +++--- src/common/Addon/styles.less | 33 +++++---- src/common/MetaItem/MetaItem.js | 8 +-- src/common/UserPanel/UserPanel.js | 20 +++--- src/common/Video/Video.js | 33 +++++---- src/common/Video/styles.less | 22 +++--- 7 files changed, 128 insertions(+), 117 deletions(-) diff --git a/package.json b/package.json index 0f39c6593..4d990d94a 100755 --- a/package.json +++ b/package.json @@ -1,56 +1,56 @@ { - "name": "stremio", - "displayName": "Stremio", - "version": "5.0.0", - "publisher": "Smart Code Ltd.", - "website": "http://www.strem.io", - "private": true, - "scripts": { - "start": "webpack-dev-server --mode development --hot", - "build": "webpack --mode production", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook" - }, - "dependencies": { - "classnames": "2.2.6", - "prop-types": "15.6.1", - "react": "^16.4.1", - "react-dom": "^16.4.1", - "react-router": "4.3.1", - "react-router-dom": "4.3.1", - "stremio-addon-client": "git+ssh://git@github.com/Stremio/stremio-addon-client.git#v1.5.1", - "stremio-addons": "git+ssh://git@github.com/Stremio/stremio-addons.git#v2.8.14", - "stremio-aggregators": "git+ssh://git@github.com/Stremio/stremio-aggregators.git#v1.4.1", - "stremio-api-client": "git+ssh://git@github.com/Stremio/stremio-api-client.git#e8459d01fdd3507113b13b02aab628d24e20515e", - "stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v1.0.0", - "stremio-icons": "git+ssh://git@github.com/Stremio/stremio-icons.git#v1.0.2", - "stremio-json-data": "git+ssh://git@github.com/stremio/stremio-json-data.git#v1.2.3", - "stremio-models": "git+ssh://git@github.com/stremio/stremio-models.git#v1.51.5", - "stremio-official-addons": "git+ssh://git@github.com/Stremio/stremio-official-addons.git#v1.1.1", - "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#v1.41.0" - }, - "devDependencies": { - "@storybook/react": "^3.4.11", - "babel-core": "^6.26.3", - "babel-loader": "7.1.4", - "babel-plugin-transform-class-properties": "6.24.1", - "babel-plugin-transform-object-rest-spread": "6.26.0", - "babel-preset-env": "1.7.0", - "babel-preset-react": "6.24.1", - "copy-webpack-plugin": "4.5.2", - "css-loader": "0.28.11", - "html-webpack-plugin": "3.2.0", - "less": "3.0.4", - "less-loader": "4.1.0", - "postcss-loader": "2.1.5", - "style-loader": "0.21.0", - "uglifyjs-webpack-plugin": "1.2.7", - "webpack": "^4.20.2", - "webpack-cli": "3.0.8", - "webpack-dev-server": "3.1.4", - "@storybook/addon-actions": "^3.4.11", - "@storybook/addon-links": "^3.4.11", - "@storybook/addons": "^3.4.11", - "babel-runtime": "^6.26.0" - } -} + "name": "stremio", + "displayName": "Stremio", + "version": "5.0.0", + "publisher": "Smart Code Ltd.", + "website": "http://www.strem.io", + "private": true, + "scripts": { + "start": "webpack-dev-server --mode development --hot", + "build": "webpack --mode production", + "storybook": "start-storybook -s ./ -p 6006", + "build-storybook": "build-storybook" + }, + "dependencies": { + "classnames": "2.2.6", + "prop-types": "15.6.1", + "react": "^16.4.1", + "react-dom": "^16.4.1", + "react-router": "4.3.1", + "react-router-dom": "4.3.1", + "stremio-addon-client": "git+ssh://git@github.com/Stremio/stremio-addon-client.git#v1.5.1", + "stremio-addons": "git+ssh://git@github.com/Stremio/stremio-addons.git#v2.8.14", + "stremio-aggregators": "git+ssh://git@github.com/Stremio/stremio-aggregators.git#v1.4.1", + "stremio-api-client": "git+ssh://git@github.com/Stremio/stremio-api-client.git#e8459d01fdd3507113b13b02aab628d24e20515e", + "stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v1.0.0", + "stremio-icons": "git+ssh://git@github.com/Stremio/stremio-icons.git#v1.0.2", + "stremio-json-data": "git+ssh://git@github.com/stremio/stremio-json-data.git#v1.2.3", + "stremio-models": "git+ssh://git@github.com/stremio/stremio-models.git#v1.51.5", + "stremio-official-addons": "git+ssh://git@github.com/Stremio/stremio-official-addons.git#v1.1.1", + "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#v1.41.0" + }, + "devDependencies": { + "@storybook/react": "^3.4.11", + "babel-core": "^6.26.3", + "babel-loader": "7.1.4", + "babel-plugin-transform-class-properties": "6.24.1", + "babel-plugin-transform-object-rest-spread": "6.26.0", + "babel-preset-env": "1.7.0", + "babel-preset-react": "6.24.1", + "copy-webpack-plugin": "4.5.2", + "css-loader": "0.28.11", + "html-webpack-plugin": "3.2.0", + "less": "3.0.4", + "less-loader": "4.1.0", + "postcss-loader": "2.1.5", + "style-loader": "0.21.0", + "uglifyjs-webpack-plugin": "1.2.7", + "webpack": "^4.20.2", + "webpack-cli": "3.0.8", + "webpack-dev-server": "3.1.4", + "@storybook/addon-actions": "^3.4.11", + "@storybook/addon-links": "^3.4.11", + "@storybook/addons": "^3.4.11", + "babel-runtime": "^6.26.0" + } +} \ No newline at end of file diff --git a/src/common/Addon/Addon.js b/src/common/Addon/Addon.js index 7c86879de..dcd6bce92 100644 --- a/src/common/Addon/Addon.js +++ b/src/common/Addon/Addon.js @@ -41,17 +41,17 @@ const renderDescription = (description) => { } return ( -
150 ? { overflowY: 'scroll', height: 36 } : null} className={styles['description']}>{description}
+
150 ? { overflow: 'auto', height: 36 } : null} className={styles['description']}>{description}
); } const renderUrls = (urls) => { - if(!urls) { + if(urls.length === 0) { return null; } return ( -
+
{urls.map((url) => { return ( {url} @@ -68,10 +68,12 @@ const Addon = (props) => {
- {renderName(props.name)} - {renderVersion(props.version)} - {renderType(props.types)} - {renderDescription(props.description)} +
+ {renderName(props.name)} + {renderVersion(props.version)} + {renderType(props.types)} + {renderDescription(props.description)} +
{renderUrls(props.urls)}
@@ -91,7 +93,7 @@ Addon.propTypes = { version: PropTypes.string.isRequired, types: PropTypes.array.isRequired, description: PropTypes.string.isRequired, - urls: PropTypes.arrayOf(PropTypes.string), + urls: PropTypes.arrayOf(PropTypes.string).isRequired, isInstalled: PropTypes.bool.isRequired, shareAddon: PropTypes.func, onToggleClicked: PropTypes.func @@ -102,6 +104,7 @@ Addon.defaultProps = { version: '', types: [], description: '', + urls: [], isInstalled: false }; diff --git a/src/common/Addon/styles.less b/src/common/Addon/styles.less index 2d45b9612..618d423f7 100644 --- a/src/common/Addon/styles.less +++ b/src/common/Addon/styles.less @@ -8,11 +8,11 @@ background-color: @colorglass; .info-container { height: 80px; + display: flex; margin-bottom: 26px; .logo-container { width: 80px; height: 80px; - float: left; display: flex; margin-right: 14px; background-color: @colordarkest; @@ -22,22 +22,25 @@ fill: @colorwhite; } } - .name { - font-size: 20px; - margin-right: 10px; - } - .version { - margin-right: 10px; - color: @colorwhite60; - } - .type { - color: @coloraccent; - } - .type, .description { - margin-top: 2px; + .info { + width: 420px; + .name { + font-size: 20px; + margin-right: 10px; + } + .version { + margin-right: 10px; + color: @colorwhite60; + } + .type { + color: @coloraccent; + } + .type, .description { + margin-top: 2px; + } } } - .urls { + .urls-container { display: flex; flex-direction: column; .url { diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js index b5d2ac5d4..30d1e4f71 100644 --- a/src/common/MetaItem/MetaItem.js +++ b/src/common/MetaItem/MetaItem.js @@ -97,10 +97,10 @@ const renderReleaseInfo = (releaseInfo) => { ); } -const renderIcon = (showInfo, progress) => { +const renderIcon = (onItemClicked, progress) => { if (progress > 0) { return ( -
+
); @@ -135,7 +135,7 @@ const MetaItem = (props) => { {renderTitle(props.title)} {renderReleaseInfo(props.releaseInfo)}
- {renderIcon(props.showInfo, props.progress)} + {renderIcon(props.onItemClicked, props.progress)}
); @@ -150,7 +150,7 @@ MetaItem.propTypes = { title: PropTypes.string.isRequired, releaseInfo: PropTypes.string.isRequired, play: PropTypes.func, - showInfo: PropTypes.func + onItemClicked: PropTypes.func }; MetaItem.defaultProps = { type: 'other', diff --git a/src/common/UserPanel/UserPanel.js b/src/common/UserPanel/UserPanel.js index 28d92a288..adcf92c29 100644 --- a/src/common/UserPanel/UserPanel.js +++ b/src/common/UserPanel/UserPanel.js @@ -16,14 +16,14 @@ const renderEmail = (email) => { const UserPanel = (props) => { const placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent, width: 34, height: 34 }); - const photoStyle = { - backgroundImage: `url('${props.photo}'), url('${placeholderIconUrl}')` + const avatarStyle = { + backgroundImage: `url('${props.avatar}'), url('${placeholderIconUrl}')` }; return (
-
+
{renderEmail(props.email)} Log out @@ -33,36 +33,36 @@ const UserPanel = (props) => { Fullscreen mode
- + Settings - + Add-ons
Play Magnet Link
- + Help & Feedback
- Terms of Service - About Stremio + Terms of Service + About Stremio
); } UserPanel.propTypes = { - photo: PropTypes.string.isRequired, + avatar: PropTypes.string.isRequired, email: PropTypes.string.isRequired, logout: PropTypes.func, resizeWindow: PropTypes.func, playMagnetLink: PropTypes.func, }; UserPanel.defaultProps = { - photo: '', + avatar: '', email: '' }; diff --git a/src/common/Video/Video.js b/src/common/Video/Video.js index 19f55e9ea..c501b1fde 100644 --- a/src/common/Video/Video.js +++ b/src/common/Video/Video.js @@ -5,6 +5,10 @@ import colors from 'stremio-colors'; import styles from './styles'; const renderPoster = (poster) => { + if (poster.length === 0) { + return null; + } + const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: 40, height: 36 }); const imageStyle = { width: 70, @@ -12,22 +16,18 @@ const renderPoster = (poster) => { backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')` }; - if (poster.length === 0) { - return null; - } - return (
); } -const renderEpisode = (episode) => { - if (episode <= 0) { +const renderNumber = (number) => { + if (number <= 0) { return null; } return ( - {episode + '.'} + {number + '.'} ); } @@ -37,7 +37,7 @@ const renderName = (name) => { } return ( -
{name}
+ {name} ); } @@ -52,10 +52,11 @@ const renderDuration = (duration) => { } const renderReleasedDate = (released) => { - const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; if (isNaN(released.getTime())) { return null; } + + const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; return ( {released.getDate() + ' ' + months[released.getMonth()]} @@ -96,11 +97,13 @@ const renderProgress = (poster, progress) => { const Video = (props) => { return ( -
0 && props.progress ? 'flex' : null }} className={styles['video']}> +
0 && props.progress ? 'flex' : null }} className={styles['video']}> {renderPoster(props.poster)}
- {renderEpisode(props.episode)} - {renderName(props.name)} +
+ {renderNumber(props.number)} + {renderName(props.name)} +
{renderDuration(props.duration)} {renderReleasedDate(props.released)} {renderWatched(props.isWatched)} @@ -113,18 +116,18 @@ const Video = (props) => { Video.propTypes = { poster: PropTypes.string.isRequired, - episode: PropTypes.number.isRequired, + number: PropTypes.number.isRequired, name: PropTypes.string.isRequired, duration: PropTypes.number.isRequired, released: PropTypes.instanceOf(Date).isRequired, isWatched: PropTypes.bool.isRequired, isUpcoming: PropTypes.bool.isRequired, progress: PropTypes.number.isRequired, - showEpisodeInfo: PropTypes.func + onVideoClicked: PropTypes.func }; Video.defaultProps = { poster: '', - episode: 0, + number: 0, name: '', duration: 0, released: new Date(''), //Invalid Date diff --git a/src/common/Video/styles.less b/src/common/Video/styles.less index 75d63be8a..e42108878 100644 --- a/src/common/Video/styles.less +++ b/src/common/Video/styles.less @@ -2,26 +2,28 @@ .video { height: 62px; width: 340px; + display: flex; padding: 10px 10px; background-color: @colorblack20; .poster { - float: left; margin-right: 10px; background-position: center; background-size: cover, auto; background-repeat: no-repeat; } .video-container { - font-size: 12px; + width: 240px; color: @colorwhite; - .episode { - float: left; - margin-right: 6px; - } - .name { - overflow: hidden; - white-space: pre; - text-overflow: ellipsis; + .main-info { + font-size: 12px; + .number { + margin-right: 6px; + } + .name { + overflow: hidden; + white-space: pre; + text-overflow: ellipsis; + } } .duration, .released-date { font-size: 11px;