mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
storybook; format and style changes
This commit is contained in:
svetlagasheva
parent
ef5bf029d3
commit
043c7cb321
16 changed files with 2423 additions and 448 deletions
9
.storybook/config.js
Normal file
9
.storybook/config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { configure } from '@storybook/react';
|
||||
|
||||
// automatically import all files ending in *.stories.js
|
||||
const req = require.context('../stories', true, /.stories.js$/);
|
||||
function loadStories() {
|
||||
req.keys().forEach(filename => req(filename));
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
67
.storybook/webpack.config.js
Normal file
67
.storybook/webpack.config.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
output: {
|
||||
publicPath: '/'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: [
|
||||
path.resolve(__dirname, '../src'),
|
||||
path.resolve(__dirname, '../node_modules/stremio-icons/dom')
|
||||
],
|
||||
use: {
|
||||
loader: 'babel-loader'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader'
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
localIdentName: '[hash:base64:5]',
|
||||
importLoaders: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss-id',
|
||||
plugins: () => [
|
||||
require('autoprefixer')()
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
strictMath: true,
|
||||
noIeCompat: true,
|
||||
compress: true,
|
||||
paths: [
|
||||
path.resolve(__dirname, '../node_modules/stremio-colors'),
|
||||
path.resolve(__dirname, '../src/common')
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.json', '.less'],
|
||||
alias: {
|
||||
'stremio-common': path.resolve(__dirname, '../src/common'),
|
||||
'stremio-routes': path.resolve(__dirname, '../src/routes'),
|
||||
'stremio-services': path.resolve(__dirname, '../src/services')
|
||||
}
|
||||
}
|
||||
};
|
||||
101
package.json
101
package.json
|
|
@ -1,49 +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"
|
||||
},
|
||||
"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": {
|
||||
"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.14.0",
|
||||
"webpack-cli": "3.0.8",
|
||||
"webpack-dev-server": "3.1.4"
|
||||
}
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,6 @@ import PropTypes from 'prop-types';
|
|||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const renderLogo = (logo) => {
|
||||
return (
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={logo.length === 0 ? 'ic_addons' : logo} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderName = (name) => {
|
||||
if (name.length === 0) {
|
||||
return null;
|
||||
|
|
@ -32,6 +24,10 @@ const renderVersion = (version) => {
|
|||
}
|
||||
|
||||
const renderType = (types) => {
|
||||
if (types.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['type']}>
|
||||
{types.length <= 1 ? types.join('') : types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]}
|
||||
|
|
@ -50,7 +46,7 @@ const renderDescription = (description) => {
|
|||
}
|
||||
|
||||
const renderUrls = (urls) => {
|
||||
if (urls.length === 0) {
|
||||
if(!urls) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -65,33 +61,25 @@ const renderUrls = (urls) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderShareButton = (shareAddon) => {
|
||||
return (
|
||||
<div onClick={shareAddon} className={styles['share-container']}>
|
||||
<Icon className={styles['share-icon']} icon={'ic_share'} />
|
||||
<span className={styles['share-label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderState = (onToggleClicked, isInstalled) => {
|
||||
return (
|
||||
<div onClick={onToggleClicked} className={styles[isInstalled ? 'install-label' : 'uninstall-label']}>{isInstalled ? 'Install' : 'Uninstall'}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Addon = (props) => {
|
||||
return (
|
||||
<div className={styles['addon']}>
|
||||
{renderLogo(props.logo)}
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
<div className={styles['info-container']}>
|
||||
<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>
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
{renderShareButton(props.shareAddon)}
|
||||
{renderState(props.onToggleClicked, props.isInstalled)}
|
||||
<div onClick={props.shareAddon} className={styles['share-container']}>
|
||||
<Icon className={styles['share-icon']} icon={'ic_share'} />
|
||||
<span className={styles['share-label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
<div onClick={props.onToggleClicked} className={styles[props.isInstalled ? 'install-label' : 'uninstall-label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -103,7 +91,7 @@ Addon.propTypes = {
|
|||
version: PropTypes.string.isRequired,
|
||||
types: PropTypes.array.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
urls: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
urls: PropTypes.arrayOf(PropTypes.string),
|
||||
isInstalled: PropTypes.bool.isRequired,
|
||||
shareAddon: PropTypes.func,
|
||||
onToggleClicked: PropTypes.func
|
||||
|
|
|
|||
|
|
@ -6,33 +6,39 @@
|
|||
color: @colorwhite;
|
||||
font-family: LatoLight;
|
||||
background-color: @colorglass;
|
||||
.logo-container {
|
||||
width: 80px;
|
||||
.info-container {
|
||||
height: 80px;
|
||||
float: left;
|
||||
display: flex;
|
||||
margin-right: 14px;
|
||||
background-color: @colordarkest;
|
||||
.logo {
|
||||
width: 40px;
|
||||
margin: auto;
|
||||
fill: @colorwhite;
|
||||
margin-bottom: 26px;
|
||||
.logo-container {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
display: flex;
|
||||
margin-right: 14px;
|
||||
background-color: @colordarkest;
|
||||
.logo {
|
||||
width: 40px;
|
||||
margin: auto;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.version {
|
||||
margin-right: 10px;
|
||||
color: @colorwhite60;
|
||||
}
|
||||
.type {
|
||||
color: @coloraccent;
|
||||
}
|
||||
.type, .description {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.version {
|
||||
margin-right: 10px;
|
||||
color: @colorwhite60;
|
||||
}
|
||||
.type {
|
||||
color: @coloraccent;
|
||||
}
|
||||
.urls {
|
||||
display: flex;
|
||||
margin: 26px 0px;
|
||||
flex-direction: column;
|
||||
.url {
|
||||
color: @colorwhite60;
|
||||
|
|
@ -40,30 +46,28 @@
|
|||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin-top: 26px;
|
||||
justify-content: space-between;
|
||||
.share-container {
|
||||
width: 50%;
|
||||
margin-right: 50px;
|
||||
border: 2px solid @coloraccent;
|
||||
.share-icon {
|
||||
width: 20px;
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
fill: @coloraccent;
|
||||
}
|
||||
.share-label {
|
||||
cursor: pointer;
|
||||
font-size: larger;
|
||||
color: @coloraccent;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
.install-label, .uninstall-label {
|
||||
width: 50%;
|
||||
.share-container, .install-label, .uninstall-label {
|
||||
width: 230px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: larger;
|
||||
padding: 10px 80px;
|
||||
border-radius: 2px;
|
||||
padding: 10px 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.install-label {
|
||||
border: 2px solid @colorsignal5;
|
||||
|
|
|
|||
|
|
@ -67,24 +67,6 @@ const renderLastViewed = (lastViewed) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderTrailerButton = (watchTrailer) => {
|
||||
return (
|
||||
<div onClick={watchTrailer} className={styles['icon-container']}>
|
||||
<Icon className={styles['trailer-icon']} icon={'ic_movies'} />
|
||||
<div className={styles['trailer']}>Trailer</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderAddToLibraryButton = (addToLibrary) => {
|
||||
return (
|
||||
<div onClick={addToLibrary} className={styles['icon-container']}>
|
||||
<Icon className={styles['addlib-icon']} icon={'ic_addlib'} />
|
||||
<div className={styles['addlib']}>Add to Library</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const LibraryItemList = (props) => {
|
||||
return (
|
||||
<div className={styles['library-item']}>
|
||||
|
|
@ -96,8 +78,14 @@ const LibraryItemList = (props) => {
|
|||
<span className={styles['views']}>{props.views}</span>
|
||||
<span className={styles['hours']}>{props.hours}</span>
|
||||
{renderLastViewed(props.lastViewed)}
|
||||
{renderTrailerButton(props.watchTrailer)}
|
||||
{renderAddToLibraryButton(props.addToLibrary)}
|
||||
<div onClick={props.watchTrailer} className={styles['icon-container']}>
|
||||
<Icon className={styles['trailer-icon']} icon={'ic_movies'} />
|
||||
<div className={styles['trailer']}>Trailer</div>
|
||||
</div>
|
||||
<div onClick={props.addToLibrary} className={styles['icon-container']}>
|
||||
<Icon className={styles['addlib-icon']} icon={'ic_addlib'} />
|
||||
<div className={styles['addlib']}>Add to Library</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,14 +55,6 @@ const getPlaceholderIcon = (type) => {
|
|||
}
|
||||
}
|
||||
|
||||
const renderPlay = (play, progress) => {
|
||||
return (
|
||||
<div onClick={play} style={progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
|
||||
<Icon className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderProgress = (progress) => {
|
||||
if (progress <= 0) {
|
||||
return null;
|
||||
|
|
@ -132,7 +124,9 @@ const MetaItem = (props) => {
|
|||
return (
|
||||
<div style={contentContainerStyle} className={styles['meta-item']}>
|
||||
<div style={imageStyle} className={styles['poster']}>
|
||||
{renderPlay(props.play, props.progress)}
|
||||
<div onClick={props.play} style={props.progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
|
||||
<Icon className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
</div>
|
||||
{renderProgress(props.progress)}
|
||||
<div className={styles['info-container']}>
|
||||
|
|
|
|||
|
|
@ -4,36 +4,6 @@ import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
|
|||
import colors from 'stremio-colors';
|
||||
import styles from './styles';
|
||||
|
||||
const renderX = (closeModalDialog) => {
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
|
||||
const imageStyle = {
|
||||
width: 10,
|
||||
height: 10,
|
||||
backgroundImage: `url('${placeholderIconUrl}')`
|
||||
};
|
||||
return (
|
||||
<div className={styles['x-container']}>
|
||||
<div onClick={closeModalDialog} style={imageStyle} className={styles['x-icon']} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderButtons = (shareInFacebook, shareInTwitter, shareInGplus) => {
|
||||
return (
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={shareInFacebook} className={styles['facebook-button']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK
|
||||
</div>
|
||||
<div onClick={shareInTwitter} className={styles['twitter-button']}>
|
||||
<Icon className={styles['twitter-icon']} icon={'ic_twitter'} />TWITTER
|
||||
</div>
|
||||
<div onClick={shareInGplus} className={styles['gplus-button']}>
|
||||
<Icon className={styles['gplus-icon']} icon={'ic_gplus'} />GOOGLE+
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderUrl = (copyToClipboard, url) => {
|
||||
if (url.length === 0) {
|
||||
return null;
|
||||
|
|
@ -42,18 +12,39 @@ const renderUrl = (copyToClipboard, url) => {
|
|||
return (
|
||||
<div className={styles['url-container']}>
|
||||
<input className={styles['url']} defaultValue={url} readOnly />
|
||||
<span onClick={copyToClipboard} className={styles['copy-label']}>Copy</span>
|
||||
<span onClick={copyToClipboard} className={styles['copy-label']}>
|
||||
<Icon className={styles['copy-icon']} icon={'ic_link'} />Copy
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ShareAddon = (props) => {
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
|
||||
const imageStyle = {
|
||||
width: 10,
|
||||
height: 10,
|
||||
backgroundImage: `url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles['share-addon']}>
|
||||
{renderX(props.closeModalDialog)}
|
||||
<div className={styles['x-container']}>
|
||||
<div onClick={props.closeModalDialog} style={imageStyle} className={styles['x-icon']} />
|
||||
</div>
|
||||
<div className={styles['info-container']}>
|
||||
<span className={styles['share-label']}>Share Add-on</span>
|
||||
{renderButtons(props.shareInFacebook, props.shareInTwitter, props.shareInGplus)}
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={props.shareInFacebook} className={styles['facebook-button']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK
|
||||
</div>
|
||||
<div onClick={props.shareInTwitter} className={styles['twitter-button']}>
|
||||
<Icon className={styles['twitter-icon']} icon={'ic_twitter'} />TWITTER
|
||||
</div>
|
||||
<div onClick={props.shareInGplus} className={styles['gplus-button']}>
|
||||
<Icon className={styles['gplus-icon']} icon={'ic_gplus'} />GOOGLE+
|
||||
</div>
|
||||
</div>
|
||||
{renderUrl(props.copyToClipboard, props.url)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,10 +71,19 @@
|
|||
}
|
||||
.copy-label {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background-color: @colorblack20;
|
||||
.copy-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
fill: @colorblack40;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,14 +47,6 @@ const renderSubtitle = (isFree, isSubscription, subtitle) => {
|
|||
return null;
|
||||
}
|
||||
|
||||
const renderPlay = (progress) => {
|
||||
return (
|
||||
<div style={{ backgroundColor: progress ? colors.white : null }} className={styles['play-container']}>
|
||||
<Icon style={{ fill: progress ? colors.medium : null }} className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderProgress = (progress) => {
|
||||
if (progress <= 0) {
|
||||
return null;
|
||||
|
|
@ -80,7 +72,9 @@ const Stream = (props) => {
|
|||
</div>
|
||||
{renderProgress(props.progress)}
|
||||
</div>
|
||||
{renderPlay(props.progress)}
|
||||
<div style={{ backgroundColor: props.progress ? colors.white : null }} className={styles['play-container']}>
|
||||
<Icon style={{ fill: props.progress ? colors.medium : null }} className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,6 @@ import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
|
|||
import colors from 'stremio-colors';
|
||||
import styles from './styles';
|
||||
|
||||
const renderPhoto = (photo) => {
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent, width: 34, height: 34 });
|
||||
const photoStyle = {
|
||||
backgroundImage: `url('${photo}'), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={photoStyle} className={styles['profile-picture']}></div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderEmail = (email) => {
|
||||
if (email.length === 0) {
|
||||
return null;
|
||||
|
|
@ -25,58 +14,42 @@ const renderEmail = (email) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderFullscreen = (onFullscreenMode) => {
|
||||
return (
|
||||
<div onClick={onFullscreenMode} className={styles['fullscreen-option']}>
|
||||
<Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'} />Fullscreen mode
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderOptions = (showSettings, showAddons, playMagnetLink, importFromFB, showHelpCenter) => {
|
||||
return (
|
||||
<ul className={styles['options']}>
|
||||
<li onClick={showSettings} className={styles['settings-option']}>
|
||||
<Icon className={styles['settings-icon']} icon={'ic_settings'} />Settings
|
||||
</li>
|
||||
<li onClick={showAddons} className={styles['addons-option']}>
|
||||
<Icon className={styles['addons-icon']} icon={'ic_addons'} />Add-ons
|
||||
</li>
|
||||
<li onClick={playMagnetLink} className={styles['magnet-option']}>
|
||||
<Icon className={styles['magnet-icon']} icon={'ic_magnet'} />Play Magnet Link
|
||||
</li>
|
||||
<li onClick={importFromFB} className={styles['facebook-option']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />Import from Facebook
|
||||
</li>
|
||||
<li onClick={showHelpCenter} className={styles['help-option']}>
|
||||
<Icon className={styles['help-icon']} icon={'ic_help'} />Help & Feedback
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
const renderFooter = (showTermsOfService, showInfo) => {
|
||||
return (
|
||||
<ul className={styles['footer']}>
|
||||
<li onClick={showTermsOfService} className={styles['terms-label']}>Terms of Service</li>
|
||||
<li onClick={showInfo} className={styles['about-label']}>About Stremio</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
const UserPanel = (props) => {
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent, width: 34, height: 34 });
|
||||
const photoStyle = {
|
||||
backgroundImage: `url('${props.photo}'), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles['user-panel']}>
|
||||
<div className={styles['user-info']}>
|
||||
{renderPhoto(props.photo)}
|
||||
<div style={photoStyle} className={styles['profile-picture']}></div>
|
||||
<div className={styles['profile-info']}>
|
||||
{renderEmail(props.email)}
|
||||
<span onClick={props.logout} className={styles['log-out']}>Log out</span>
|
||||
</div>
|
||||
</div>
|
||||
{renderFullscreen(props.onFullscreenMode)}
|
||||
{renderOptions(props.showSettings, props.showAddons, props.playMagnetLink, props.importFromFB, props.showHelpCenter)}
|
||||
{renderFooter(props.showTermsOfService, props.showInfo)}
|
||||
<div onClick={props.resizeWindow} className={styles['fullscreen-option']}>
|
||||
<Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'} />Fullscreen mode
|
||||
</div>
|
||||
<div className={styles['options']}>
|
||||
<a href="#settings" className={styles['settings-option']}>
|
||||
<Icon className={styles['settings-icon']} icon={'ic_settings'} />Settings
|
||||
</a>
|
||||
<a href="#addons" 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']}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -85,14 +58,8 @@ UserPanel.propTypes = {
|
|||
photo: PropTypes.string.isRequired,
|
||||
email: PropTypes.string.isRequired,
|
||||
logout: PropTypes.func,
|
||||
onFullscreenMode: PropTypes.func,
|
||||
showSettings: PropTypes.func,
|
||||
showAddons: PropTypes.func,
|
||||
resizeWindow: PropTypes.func,
|
||||
playMagnetLink: PropTypes.func,
|
||||
importFromFB: PropTypes.func,
|
||||
showHelpCenter: PropTypes.func,
|
||||
showTermsOfService: PropTypes.func,
|
||||
showInfo: PropTypes.func
|
||||
};
|
||||
UserPanel.defaultProps = {
|
||||
photo: '',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@import 'stremio-colors';
|
||||
.user-panel {
|
||||
width: 260px;
|
||||
fill: @coloraccent;
|
||||
color: @colorwhite80;
|
||||
font-family: LatoLight;
|
||||
background-color: @colordarkest;
|
||||
.user-info {
|
||||
|
|
@ -25,6 +23,7 @@
|
|||
color: @colorwhite40;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -32,14 +31,16 @@
|
|||
border-top: 1px solid @colorwhite20;
|
||||
border-bottom: 1px solid @colorwhite20;
|
||||
}
|
||||
.fullscreen-option, .settings-option, .addons-option, .magnet-option, .facebook-option, .help-option {
|
||||
.fullscreen-option, .settings-option, .addons-option, .magnet-option, .help-option {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
.fullscreen-icon, .settings-icon, .addons-icon, .magnet-icon, .facebook-icon, .help-icon {
|
||||
color: @colorwhite80;
|
||||
.fullscreen-icon, .settings-icon, .addons-icon, .magnet-icon, .help-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 12px;
|
||||
fill: @coloraccent;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -51,9 +52,12 @@
|
|||
padding: 15px 0px;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid @colorwhite20;
|
||||
.terms-label, .about-label {
|
||||
padding: 10px 20px;
|
||||
color: @colorwhite80;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: @colorwhite;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const renderPoster = (poster) => {
|
|||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: 40, height: 36 });
|
||||
const imageStyle = {
|
||||
width: 70,
|
||||
height: 40,
|
||||
height: 42,
|
||||
backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import 'stremio-colors';
|
||||
.video {
|
||||
height: 60px;
|
||||
height: 62px;
|
||||
width: 340px;
|
||||
padding: 10px 10px;
|
||||
background-color: @colorblack20;
|
||||
|
|
|
|||
92
stories/index.stories.js
Normal file
92
stories/index.stories.js
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import React from 'react';
|
||||
import styles from '../src/app/styles';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
import { Button, Welcome } from '@storybook/react/demo';
|
||||
import { Addon } from 'stremio-common';
|
||||
import { LibraryItemList } from 'stremio-common';
|
||||
import { MetaItem } from 'stremio-common';
|
||||
import { ShareAddon } from 'stremio-common';
|
||||
import { Stream } from 'stremio-common';
|
||||
import { UserPanel } from 'stremio-common';
|
||||
import { Video } from 'stremio-common';
|
||||
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
|
||||
.add('with some emoji', () => (
|
||||
<Button onClick={action('clicked')}>
|
||||
<span role="img" aria-label="so cool">
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Button>
|
||||
));
|
||||
|
||||
storiesOf('Addon', module)
|
||||
.add('addon', () => (
|
||||
<div style={{padding: '10px'}} className={styles['app']}>
|
||||
<Addon onToggleClicked={function() {alert('1')}} logo={'ic_series'} name={'Watch Hub'} version={'1.3.0'} isInstalled={false} types={['Movies', 'Series']} description={'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.'} urls={['http://nfxaddon.strem.io/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.localfiles/stremioget']}></Addon>
|
||||
<Addon name={'Cinemeta'} version={'2.4.0'} isInstalled={true} types={['Movies', 'Series']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
|
||||
<Addon logo={'ic_youtube_small'} name={'YouTube'} version={'1.3.0'} isInstalled={true} types={['Channels', 'Videos']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
|
||||
<Addon name={'OpenSubtitles'} version={'1.3.0'} isInstalled={false} types={['Movies', 'Series']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('LibraryItemList', module)
|
||||
.add('library item list', () => (
|
||||
<div style={{padding: '10px'}} className={styles['app']}>
|
||||
<LibraryItemList poster={'http://t3.gstatic.com/images?q=tbn:ANd9GcST1uigGrukMvSAVUefFNuQ0NMZAR-FjfFIwSZFCR5ZkyMSgCyj'} title={'Thor Ragnarok'} type={'Movies'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={12} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
|
||||
<LibraryItemList play={function() {alert('2')}} watchTrailer={function() {alert('4')}} addToLibrary={function() {alert('24')}} poster={'https://m.media-amazon.com/images/M/MV5BMTU5NDI1MjkwMF5BMl5BanBnXkFtZTgwNjIxNTY2MzI@._V1_UX182_CR0,0,182,268_AL_.jpg'} title={'Pitch Perfect 3'} type={'Series'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={1} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
|
||||
<LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BODAxNDFhNGItMzdiMC00NDM1LWExYWUtZjNiMGIzYTc0MTM5XkEyXkFqcGdeQXVyMjYzMjA3NzI@._V1_UY268_CR3,0,182,268_AL_.jpg'} title={'Deadpool'} type={'Channel'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={3} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
|
||||
<LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BNGNiNWQ5M2MtNGI0OC00MDA2LWI5NzEtMmZiYjVjMDEyOWYzXkEyXkFqcGdeQXVyMjM4NTM5NDY@._V1_.jpg'} title={'The Shape of Water'} type={'Movies'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={8} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('MetaItem', module)
|
||||
.add('meta item', () => (
|
||||
<div style={{padding: '10px'}} className={styles['app']}>
|
||||
<MetaItem poster={'https://m.media-amazon.com/images/M/MV5BODQ0NDhjYWItYTMxZi00NTk2LWIzNDEtOWZiYWYxZjc2MTgxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg'}></MetaItem>
|
||||
<MetaItem title={'Red Sparrow'} poster={'https://m.media-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_.jpg'}></MetaItem>
|
||||
<MetaItem play={function() {alert('32423')}} showInfo={function() {alert('222')}} progress={50} poster={'https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_.jpg'}></MetaItem>
|
||||
<MetaItem poster={'https://m.media-amazon.com/images/M/MV5BYWVhZjZkYTItOGIwYS00NmRkLWJlYjctMWM0ZjFmMDU4ZjEzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg'}></MetaItem>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('ShareAddon', module)
|
||||
.add('share addon', () => (
|
||||
<div style={{padding: '10px'}} className={styles['app']}>
|
||||
<ShareAddon url={'....'}></ShareAddon>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('Stream', module)
|
||||
.add('stream', () => (
|
||||
<div style={{padding: '10px'}} className={styles['app']}>
|
||||
<Stream sourceName={'Amazon'} title={'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1'}/>
|
||||
<Stream sourceName={'iTunes'} subtitle={'Aasdasd dsasa sad.'}/>
|
||||
<Stream play={function() {alert(122)}} progress={40} logo={'ic_itunes'} title={'$1.99 purchase SD,$2.99 purchase HD'}/>
|
||||
<Stream logo={'ic_amazon'} title={'HDTV'} isFree={true}/>
|
||||
<Stream sourceName={'Amazon'} title={'SD'} isSubscription={true}/>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('UserPanel', module)
|
||||
.add('user panel', () => (
|
||||
<div style={{padding: '10px'}} className={styles['app']}>
|
||||
<UserPanel resizeWindow={function() {alert('asdas')}} photo={'https://image.freepik.com/free-vector/wild-animals-cartoon_1196-361.jpg'} email={'animals@mail.com'}></UserPanel>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('Video', module)
|
||||
.add('video', () => (
|
||||
<div style={{padding: '10px'}} className={styles['app']}>
|
||||
<Video poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'} episode={2} name={'The Bing Bran Hypothesis'} duration={23} isWatched={true} onVideoClicked={function() {alert(8)}}></Video>
|
||||
<Video poster={'5'} episode={4} name={'The Luminous Fish Effect'} duration={22}></Video>
|
||||
<Video poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'} episode={5} name={'The Dumpling Paradox'} progress={50} duration={22}></Video>
|
||||
<Video episode={8} name={'The Loobendfeld Decay'} released={new Date(2018, 4, 23)} isUpcoming={true}></Video>
|
||||
</div>
|
||||
));
|
||||
Loading…
Reference in a new issue