mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
remove float, rename props/func
This commit is contained in:
svetlagasheva
parent
043c7cb321
commit
f30827ab18
7 changed files with 128 additions and 117 deletions
110
package.json
110
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"
|
||||
}
|
||||
}
|
||||
|
|
@ -41,17 +41,17 @@ const renderDescription = (description) => {
|
|||
}
|
||||
|
||||
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) => {
|
||||
if(!urls) {
|
||||
if(urls.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['urls']}>
|
||||
<div className={styles['urls-container']}>
|
||||
{urls.map((url) => {
|
||||
return (
|
||||
<span key={url} className={styles['url']}>{url}</span>
|
||||
|
|
@ -68,10 +68,12 @@ const Addon = (props) => {
|
|||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
|
||||
</div>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
<div className={styles['info']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
</div>
|
||||
</div>
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
|
|
@ -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
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -97,10 +97,10 @@ const renderReleaseInfo = (releaseInfo) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderIcon = (showInfo, progress) => {
|
||||
const renderIcon = (onItemClicked, progress) => {
|
||||
if (progress > 0) {
|
||||
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'} />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -135,7 +135,7 @@ const MetaItem = (props) => {
|
|||
{renderTitle(props.title)}
|
||||
{renderReleaseInfo(props.releaseInfo)}
|
||||
</div>
|
||||
{renderIcon(props.showInfo, props.progress)}
|
||||
{renderIcon(props.onItemClicked, props.progress)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={styles['user-panel']}>
|
||||
<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']}>
|
||||
{renderEmail(props.email)}
|
||||
<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
|
||||
</div>
|
||||
<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
|
||||
</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
|
||||
</a>
|
||||
<div onClick={props.playMagnetLink} className={styles['magnet-option']}>
|
||||
<Icon className={styles['magnet-icon']} icon={'ic_magnet'} />Play Magnet Link
|
||||
</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
|
||||
</a>
|
||||
</div>
|
||||
<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" className={styles['about-label']}>About Stremio</a>
|
||||
<a href={'https://www.stremio.com/tos'} target="_blank" className={styles['terms-label']}>Terms of Service</a>
|
||||
<a href={'https://www.stremio.com'} target="_blank" className={styles['about-label']}>About Stremio</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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: ''
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div style={imageStyle} className={styles['poster']}></div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderEpisode = (episode) => {
|
||||
if (episode <= 0) {
|
||||
const renderNumber = (number) => {
|
||||
if (number <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['episode']}>{episode + '.'}</span>
|
||||
<span className={styles['number']}>{number + '.'}</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ const renderName = (name) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={styles['name']}>{name}</div>
|
||||
<span className={styles['name']}>{name}</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -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 (
|
||||
<span className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth()]}</span>
|
||||
|
|
@ -96,11 +97,13 @@ const renderProgress = (poster, progress) => {
|
|||
|
||||
const Video = (props) => {
|
||||
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)}
|
||||
<div className={styles['video-container']}>
|
||||
{renderEpisode(props.episode)}
|
||||
{renderName(props.name)}
|
||||
<div className={styles['main-info']}>
|
||||
{renderNumber(props.number)}
|
||||
{renderName(props.name)}
|
||||
</div>
|
||||
{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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue