mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-08-15 06:26:21 +00:00
'addon' component
This commit is contained in:
svetlagasheva
parent
b430daccfd
commit
cfa004c688
5 changed files with 287 additions and 11 deletions
167
src/common/Addon/Addon.js
Normal file
167
src/common/Addon/Addon.js
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
class Addon extends Component {
|
||||
renderLogo() {
|
||||
if(this.props.logo.length === 0) {
|
||||
return (
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={'ic_addons'}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={this.props.logo}/>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
renderName() {
|
||||
if(this.props.name.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['name']}>{this.props.name}</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderVersion() {
|
||||
if(this.props.version.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['version']}>{'v. ' + this.props.version}</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderInstalled() {
|
||||
if(!this.props.isInstalled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['check-container']}>
|
||||
<Icon className={styles['check-icon']} icon={'ic_check'}/> Installed
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderType() {
|
||||
var allTypes = this.props.types;
|
||||
|
||||
if(this.props.types.length <= 1) {
|
||||
return (
|
||||
<div className={styles['type']}>
|
||||
{allTypes.join('')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['type']}>
|
||||
{allTypes.slice(0, -1).join(', ') + ' & ' + allTypes[allTypes.length - 1]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderDescription() {
|
||||
if(this.props.description.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['description']}>{this.props.description}</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderUrls() {
|
||||
if(this.props.urls.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['urls']}>
|
||||
{this.props.urls.map((item, key) => {
|
||||
return (
|
||||
<label className={styles['url-container']}>
|
||||
<input type='checkbox' className={styles['default-checkbox']}/>
|
||||
<p className={styles['checkbox']}>
|
||||
<Icon className={styles['checkmark']} icon={'ic_check'}/>
|
||||
</p>
|
||||
<span key={key} className={styles['url']}>{item}</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderShareButton() {
|
||||
return (
|
||||
<div className={styles['share-container']}>
|
||||
<Icon className={styles['share-icon']} icon={'ic_share'}/>
|
||||
<span className={styles['share-label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderState() {
|
||||
if(this.props.isInstalled) {
|
||||
return (
|
||||
<div className={styles['uninstall-label']}>Uninstall</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['install-label']}>Install</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['addon']}>
|
||||
<div className={styles['info-container']}>
|
||||
{this.renderLogo()}
|
||||
{this.renderName()}
|
||||
{this.renderVersion()}
|
||||
{this.renderInstalled()}
|
||||
{this.renderType()}
|
||||
{this.renderDescription()}
|
||||
</div>
|
||||
{this.renderUrls()}
|
||||
<div className={styles['buttons']}>
|
||||
{this.renderShareButton()}
|
||||
{this.renderState()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Addon.propTypes = {
|
||||
logo: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
version: PropTypes.string.isRequired,
|
||||
isInstalled: PropTypes.bool.isRequired,
|
||||
types: PropTypes.array.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
urls: PropTypes.array.isRequired
|
||||
};
|
||||
Addon.defaultProps = {
|
||||
logo: '',
|
||||
name: '',
|
||||
version: '',
|
||||
isInstalled: false,
|
||||
types: [],
|
||||
description: '',
|
||||
urls: []
|
||||
};
|
||||
|
||||
export default Addon;
|
||||
3
src/common/Addon/index.js
Normal file
3
src/common/Addon/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import Addon from './Addon';
|
||||
|
||||
export default Addon;
|
||||
109
src/common/Addon/styles.less
Normal file
109
src/common/Addon/styles.less
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
@import 'stremio-colors';
|
||||
.addon {
|
||||
float: left;
|
||||
width: 550px;
|
||||
margin: 10px;
|
||||
padding: 18px;
|
||||
display: grid;
|
||||
font-size: 12px;
|
||||
color: @colorwhite;
|
||||
font-family: LatoLight;
|
||||
background-color: @colorglass;
|
||||
.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;
|
||||
}
|
||||
.version {
|
||||
margin: 10px;
|
||||
color: @colorwhite60;
|
||||
}
|
||||
.check-container {
|
||||
color: @colorwhite60;
|
||||
.check-icon {
|
||||
width: 10px;
|
||||
fill: @colorsignal5;
|
||||
}
|
||||
}
|
||||
.type {
|
||||
color: @coloraccent;
|
||||
}
|
||||
.urls {
|
||||
margin: 20px 0px;
|
||||
.url-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.default-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
border: 2px solid @colorwhite60;
|
||||
.checkmark {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: none;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
input:checked ~ .checkbox {
|
||||
background-color: @colorprimlight;
|
||||
border: 2px solid @colorprimlight;
|
||||
.checkmark {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
input:not(:checked) ~ .url {
|
||||
color: @colorwhite60;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
.share-container {
|
||||
width: 50%;
|
||||
margin-right: 50px;
|
||||
.share-icon {
|
||||
width: 20px;
|
||||
margin-right: 6px;
|
||||
fill: @coloraccent;
|
||||
}
|
||||
.share-label {
|
||||
font-size: larger;
|
||||
color:@coloraccent;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
.install-label, .uninstall-label {
|
||||
width: 50%;
|
||||
font-weight: 600;
|
||||
font-size: larger;
|
||||
padding: 10px 80px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.install-label {
|
||||
border: 2px solid @colorsignal5;
|
||||
background-color: @colorsignal5;
|
||||
}
|
||||
.uninstall-label {
|
||||
border: 2px solid @colorwhite20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ import Stream from './Stream';
|
|||
import Episode from './Episode';
|
||||
import LibraryItemList from './LibraryItemList';
|
||||
import LibraryItemGrid from './LibraryItemGrid';
|
||||
import Addon from './Addon';
|
||||
|
||||
export {
|
||||
Checkbox,
|
||||
|
|
@ -19,5 +20,6 @@ export {
|
|||
Stream,
|
||||
Episode,
|
||||
LibraryItemList,
|
||||
LibraryItemGrid
|
||||
LibraryItemGrid,
|
||||
Addon
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { Stream } from 'stremio-common';
|
|||
import { Episode } from 'stremio-common';
|
||||
import { LibraryItemList } from 'stremio-common';
|
||||
import { LibraryItemGrid } from 'stremio-common';
|
||||
import { Addon } from 'stremio-common';
|
||||
|
||||
class Board extends PureComponent {
|
||||
constructor(props) {
|
||||
|
|
@ -33,16 +34,10 @@ class Board extends PureComponent {
|
|||
render() {
|
||||
return (
|
||||
<div style={{ paddingTop: 40, color: 'yellow' }}>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BODQ0NDhjYWItYTMxZi00NTk2LWIzNDEtOWZiYWYxZjc2MTgxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BYWVhZjZkYTItOGIwYS00NmRkLWJlYjctMWM0ZjFmMDU4ZjEzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BYjQ5NjM0Y2YtNjZkNC00ZDhkLWJjMWItN2QyNzFkMDE3ZjAxXkEyXkFqcGdeQXVyODIxMzk5NjA@._V1_UY268_CR3,0,182,268_AL_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BMTU5NDI1MjkwMF5BMl5BanBnXkFtZTgwNjIxNTY2MzI@._V1_UX182_CR0,0,182,268_AL_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BODAxNDFhNGItMzdiMC00NDM1LWExYWUtZjNiMGIzYTc0MTM5XkEyXkFqcGdeQXVyMjYzMjA3NzI@._V1_UY268_CR3,0,182,268_AL_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BNGNiNWQ5M2MtNGI0OC00MDA2LWI5NzEtMmZiYjVjMDEyOWYzXkEyXkFqcGdeQXVyMjM4NTM5NDY@._V1_.jpg'}></LibraryItemGrid>
|
||||
<LibraryItemGrid poster={'https://m.media-amazon.com/images/M/MV5BNjFhZjM4ZDYtMGRjYi00Yzc2LWExYmEtMDQ3NzA4ODU4YTljXkEyXkFqcGdeQXVyNjkwMzU3NDI@._V1_UX182_CR0,0,182,268_AL_.jpg'}></LibraryItemGrid>
|
||||
<Addon 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue