Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

remove float, rename props/func

Browse source
This commit is contained in:
svetlagasheva 2018-10-16 14:46:00 +03:00
parent 043c7cb321
commit f30827ab18
7 changed files with 128 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
package.json
View file

@ -1,56 +1,56 @@
{ {
"name": "stremio", "name": "stremio",
"displayName": "Stremio", "displayName": "Stremio",
"version": "5.0.0", "version": "5.0.0",
"publisher": "Smart Code Ltd.", "publisher": "Smart Code Ltd.",
"website": "http://www.strem.io", "website": "http://www.strem.io",
"private": true, "private": true,
"scripts": { "scripts": {
"start": "webpack-dev-server --mode development --hot", "start": "webpack-dev-server --mode development --hot",
"build": "webpack --mode production", "build": "webpack --mode production",
"storybook": "start-storybook -p 6006", "storybook": "start-storybook -s ./ -p 6006",
"build-storybook": "build-storybook" "build-storybook": "build-storybook"
}, },
"dependencies": { "dependencies": {
"classnames": "2.2.6", "classnames": "2.2.6",
"prop-types": "15.6.1", "prop-types": "15.6.1",
"react": "^16.4.1", "react": "^16.4.1",
"react-dom": "^16.4.1", "react-dom": "^16.4.1",
"react-router": "4.3.1", "react-router": "4.3.1",
"react-router-dom": "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-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-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-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-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-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-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-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-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-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" "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#v1.41.0"
}, },
"devDependencies": { "devDependencies": {
"@storybook/react": "^3.4.11", "@storybook/react": "^3.4.11",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-loader": "7.1.4", "babel-loader": "7.1.4",
"babel-plugin-transform-class-properties": "6.24.1", "babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.7.0", "babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1", "babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.5.2", "copy-webpack-plugin": "4.5.2",
"css-loader": "0.28.11", "css-loader": "0.28.11",
"html-webpack-plugin": "3.2.0", "html-webpack-plugin": "3.2.0",
"less": "3.0.4", "less": "3.0.4",
"less-loader": "4.1.0", "less-loader": "4.1.0",
"postcss-loader": "2.1.5", "postcss-loader": "2.1.5",
"style-loader": "0.21.0", "style-loader": "0.21.0",
"uglifyjs-webpack-plugin": "1.2.7", "uglifyjs-webpack-plugin": "1.2.7",
"webpack": "^4.20.2", "webpack": "^4.20.2",
"webpack-cli": "3.0.8", "webpack-cli": "3.0.8",
"webpack-dev-server": "3.1.4", "webpack-dev-server": "3.1.4",
"@storybook/addon-actions": "^3.4.11", "@storybook/addon-actions": "^3.4.11",
"@storybook/addon-links": "^3.4.11", "@storybook/addon-links": "^3.4.11",
"@storybook/addons": "^3.4.11", "@storybook/addons": "^3.4.11",
"babel-runtime": "^6.26.0" "babel-runtime": "^6.26.0"
} }
} }

19
src/common/Addon/Addon.js
View file

@ -41,17 +41,17 @@ const renderDescription = (description) => {
} }
return ( return (
<div style={description.length > 150 ? { overflowY: 'scroll', height: 36 } : null} className={styles['description']}>{description}</div> <div style={description.length > 150 ? { overflow: 'auto', height: 36 } : null} className={styles['description']}>{description}</div>
); );
} }
const renderUrls = (urls) => { const renderUrls = (urls) => {
if(!urls) { if(urls.length === 0) {
return null; return null;
} }
return ( return (
<div className={styles['urls']}> <div className={styles['urls-container']}>
{urls.map((url) => { {urls.map((url) => {
return ( return (
<span key={url} className={styles['url']}>{url}</span> <span key={url} className={styles['url']}>{url}</span>
@ -68,10 +68,12 @@ const Addon = (props) => {
<div className={styles['logo-container']}> <div className={styles['logo-container']}>
<Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} /> <Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
</div> </div>
{renderName(props.name)} <div className={styles['info']}>
{renderVersion(props.version)} {renderName(props.name)}
{renderType(props.types)} {renderVersion(props.version)}
{renderDescription(props.description)} {renderType(props.types)}
{renderDescription(props.description)}
</div>
</div> </div>
{renderUrls(props.urls)} {renderUrls(props.urls)}
<div className={styles['buttons']}> <div className={styles['buttons']}>
@ -91,7 +93,7 @@ Addon.propTypes = {
version: PropTypes.string.isRequired, version: PropTypes.string.isRequired,
types: PropTypes.array.isRequired, types: PropTypes.array.isRequired,
description: PropTypes.string.isRequired, description: PropTypes.string.isRequired,
urls: PropTypes.arrayOf(PropTypes.string), urls: PropTypes.arrayOf(PropTypes.string).isRequired,
isInstalled: PropTypes.bool.isRequired, isInstalled: PropTypes.bool.isRequired,
shareAddon: PropTypes.func, shareAddon: PropTypes.func,
onToggleClicked: PropTypes.func onToggleClicked: PropTypes.func
@ -102,6 +104,7 @@ Addon.defaultProps = {
version: '', version: '',
types: [], types: [],
description: '', description: '',
urls: [],
isInstalled: false isInstalled: false
}; };

33
src/common/Addon/styles.less
View file

@ -8,11 +8,11 @@
background-color: @colorglass; background-color: @colorglass;
.info-container { .info-container {
height: 80px; height: 80px;
display: flex;
margin-bottom: 26px; margin-bottom: 26px;
.logo-container { .logo-container {
width: 80px; width: 80px;
height: 80px; height: 80px;
float: left;
display: flex; display: flex;
margin-right: 14px; margin-right: 14px;
background-color: @colordarkest; background-color: @colordarkest;
@ -22,22 +22,25 @@
fill: @colorwhite; fill: @colorwhite;
} }
} }
.name { .info {
font-size: 20px; width: 420px;
margin-right: 10px; .name {
} font-size: 20px;
.version { margin-right: 10px;
margin-right: 10px; }
color: @colorwhite60; .version {
} margin-right: 10px;
.type { color: @colorwhite60;
color: @coloraccent; }
} .type {
.type, .description { color: @coloraccent;
margin-top: 2px; }
.type, .description {
margin-top: 2px;
}
} }
} }
.urls { .urls-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.url { .url {

8
src/common/MetaItem/MetaItem.js
View file

@ -97,10 +97,10 @@ const renderReleaseInfo = (releaseInfo) => {
); );
} }
const renderIcon = (showInfo, progress) => { const renderIcon = (onItemClicked, progress) => {
if (progress > 0) { if (progress > 0) {
return ( return (
<div onClick={showInfo} className={styles['more-icon-container']}> <div onClick={onItemClicked} className={styles['more-icon-container']}>
<Icon className={styles['more-icon']} icon={'ic_more'} /> <Icon className={styles['more-icon']} icon={'ic_more'} />
</div> </div>
); );
@ -135,7 +135,7 @@ const MetaItem = (props) => {
{renderTitle(props.title)} {renderTitle(props.title)}
{renderReleaseInfo(props.releaseInfo)} {renderReleaseInfo(props.releaseInfo)}
</div> </div>
{renderIcon(props.showInfo, props.progress)} {renderIcon(props.onItemClicked, props.progress)}
</div> </div>
</div> </div>
); );
@ -150,7 +150,7 @@ MetaItem.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
releaseInfo: PropTypes.string.isRequired, releaseInfo: PropTypes.string.isRequired,
play: PropTypes.func, play: PropTypes.func,
showInfo: PropTypes.func onItemClicked: PropTypes.func
}; };
MetaItem.defaultProps = { MetaItem.defaultProps = {
type: 'other', type: 'other',

20
src/common/UserPanel/UserPanel.js
View file

@ -16,14 +16,14 @@ const renderEmail = (email) => {
const UserPanel = (props) => { const UserPanel = (props) => {
const placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent, width: 34, height: 34 }); const placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent, width: 34, height: 34 });
const photoStyle = { const avatarStyle = {
backgroundImage: `url('${props.photo}'), url('${placeholderIconUrl}')` backgroundImage: `url('${props.avatar}'), url('${placeholderIconUrl}')`
}; };
return ( return (
<div className={styles['user-panel']}> <div className={styles['user-panel']}>
<div className={styles['user-info']}> <div className={styles['user-info']}>
<div style={photoStyle} className={styles['profile-picture']}></div> <div style={avatarStyle} className={styles['profile-picture']}></div>
<div className={styles['profile-info']}> <div className={styles['profile-info']}>
{renderEmail(props.email)} {renderEmail(props.email)}
<span onClick={props.logout} className={styles['log-out']}>Log out</span> <span onClick={props.logout} className={styles['log-out']}>Log out</span>
@ -33,36 +33,36 @@ const UserPanel = (props) => {
<Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'} />Fullscreen mode <Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'} />Fullscreen mode
</div> </div>
<div className={styles['options']}> <div className={styles['options']}>
<a href="#settings" className={styles['settings-option']}> <a href={'#settings'} target="_blank" className={styles['settings-option']}>
<Icon className={styles['settings-icon']} icon={'ic_settings'} />Settings <Icon className={styles['settings-icon']} icon={'ic_settings'} />Settings
</a> </a>
<a href="#addons" className={styles['addons-option']}> <a href={'#addons'} target="_blank" className={styles['addons-option']}>
<Icon className={styles['addons-icon']} icon={'ic_addons'} />Add-ons <Icon className={styles['addons-icon']} icon={'ic_addons'} />Add-ons
</a> </a>
<div onClick={props.playMagnetLink} className={styles['magnet-option']}> <div onClick={props.playMagnetLink} className={styles['magnet-option']}>
<Icon className={styles['magnet-icon']} icon={'ic_magnet'} />Play Magnet Link <Icon className={styles['magnet-icon']} icon={'ic_magnet'} />Play Magnet Link
</div> </div>
<a href="https://stremio.zendesk.com" className={styles['help-option']}> <a href={'https://stremio.zendesk.com'} target="_blank" className={styles['help-option']}>
<Icon className={styles['help-icon']} icon={'ic_help'} />Help & Feedback <Icon className={styles['help-icon']} icon={'ic_help'} />Help & Feedback
</a> </a>
</div> </div>
<div className={styles['footer']}> <div className={styles['footer']}>
<a href="https://www.stremio.com/tos" className={styles['terms-label']}>Terms of Service</a> <a href={'https://www.stremio.com/tos'} target="_blank" className={styles['terms-label']}>Terms of Service</a>
<a href="https://www.stremio.com" className={styles['about-label']}>About Stremio</a> <a href={'https://www.stremio.com'} target="_blank" className={styles['about-label']}>About Stremio</a>
</div> </div>
</div> </div>
); );
} }
UserPanel.propTypes = { UserPanel.propTypes = {
photo: PropTypes.string.isRequired, avatar: PropTypes.string.isRequired,
email: PropTypes.string.isRequired, email: PropTypes.string.isRequired,
logout: PropTypes.func, logout: PropTypes.func,
resizeWindow: PropTypes.func, resizeWindow: PropTypes.func,
playMagnetLink: PropTypes.func, playMagnetLink: PropTypes.func,
}; };
UserPanel.defaultProps = { UserPanel.defaultProps = {
photo: '', avatar: '',
email: '' email: ''
}; };

33
src/common/Video/Video.js
View file

@ -5,6 +5,10 @@ import colors from 'stremio-colors';
import styles from './styles'; import styles from './styles';
const renderPoster = (poster) => { const renderPoster = (poster) => {
if (poster.length === 0) {
return null;
}
const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: 40, height: 36 }); const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: 40, height: 36 });
const imageStyle = { const imageStyle = {
width: 70, width: 70,
@ -12,22 +16,18 @@ const renderPoster = (poster) => {
backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')` backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')`
}; };
if (poster.length === 0) {
return null;
}
return ( return (
<div style={imageStyle} className={styles['poster']}></div> <div style={imageStyle} className={styles['poster']}></div>
); );
} }
const renderEpisode = (episode) => { const renderNumber = (number) => {
if (episode <= 0) { if (number <= 0) {
return null; return null;
} }
return ( return (
<span className={styles['episode']}>{episode + '.'}</span> <span className={styles['number']}>{number + '.'}</span>
); );
} }
@ -37,7 +37,7 @@ const renderName = (name) => {
} }
return ( return (
<div className={styles['name']}>{name}</div> <span className={styles['name']}>{name}</span>
); );
} }
@ -52,10 +52,11 @@ const renderDuration = (duration) => {
} }
const renderReleasedDate = (released) => { const renderReleasedDate = (released) => {
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
if (isNaN(released.getTime())) { if (isNaN(released.getTime())) {
return null; return null;
} }
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return ( return (
<span className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth()]}</span> <span className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth()]}</span>
@ -96,11 +97,13 @@ const renderProgress = (poster, progress) => {
const Video = (props) => { const Video = (props) => {
return ( return (
<div onClick={props.showEpisodeInfo} style={{ backgroundColor: props.progress ? colors.black40 : null, display: props.poster.length > 0 && props.progress ? 'flex' : null }} className={styles['video']}> <div onClick={props.onVideoClicked} style={{ backgroundColor: props.progress ? colors.black40 : null, display: props.poster.length > 0 && props.progress ? 'flex' : null }} className={styles['video']}>
{renderPoster(props.poster)} {renderPoster(props.poster)}
<div className={styles['video-container']}> <div className={styles['video-container']}>
{renderEpisode(props.episode)} <div className={styles['main-info']}>
{renderName(props.name)} {renderNumber(props.number)}
{renderName(props.name)}
</div>
{renderDuration(props.duration)} {renderDuration(props.duration)}
{renderReleasedDate(props.released)} {renderReleasedDate(props.released)}
{renderWatched(props.isWatched)} {renderWatched(props.isWatched)}
@ -113,18 +116,18 @@ const Video = (props) => {
Video.propTypes = { Video.propTypes = {
poster: PropTypes.string.isRequired, poster: PropTypes.string.isRequired,
episode: PropTypes.number.isRequired, number: PropTypes.number.isRequired,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
duration: PropTypes.number.isRequired, duration: PropTypes.number.isRequired,
released: PropTypes.instanceOf(Date).isRequired, released: PropTypes.instanceOf(Date).isRequired,
isWatched: PropTypes.bool.isRequired, isWatched: PropTypes.bool.isRequired,
isUpcoming: PropTypes.bool.isRequired, isUpcoming: PropTypes.bool.isRequired,
progress: PropTypes.number.isRequired, progress: PropTypes.number.isRequired,
showEpisodeInfo: PropTypes.func onVideoClicked: PropTypes.func
}; };
Video.defaultProps = { Video.defaultProps = {
poster: '', poster: '',
episode: 0, number: 0,
name: '', name: '',
duration: 0, duration: 0,
released: new Date(''), //Invalid Date released: new Date(''), //Invalid Date

22
src/common/Video/styles.less
View file

@ -2,26 +2,28 @@
.video { .video {
height: 62px; height: 62px;
width: 340px; width: 340px;
display: flex;
padding: 10px 10px; padding: 10px 10px;
background-color: @colorblack20; background-color: @colorblack20;
.poster { .poster {
float: left;
margin-right: 10px; margin-right: 10px;
background-position: center; background-position: center;
background-size: cover, auto; background-size: cover, auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.video-container { .video-container {
font-size: 12px; width: 240px;
color: @colorwhite; color: @colorwhite;
.episode { .main-info {
float: left; font-size: 12px;
margin-right: 6px; .number {
} margin-right: 6px;
.name { }
overflow: hidden; .name {
white-space: pre; overflow: hidden;
text-overflow: ellipsis; white-space: pre;
text-overflow: ellipsis;
}
} }
.duration, .released-date { .duration, .released-date {
font-size: 11px; font-size: 11px;