mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
'ShareAddon' component
This commit is contained in:
svetlagasheva
parent
cfa004c688
commit
3db3eb3f9c
5 changed files with 159 additions and 5 deletions
71
src/common/ShareAddon/ShareAddon.js
Normal file
71
src/common/ShareAddon/ShareAddon.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
class ShareAddon extends Component {
|
||||
renderX() {
|
||||
return(
|
||||
<div className={styles['x-container']}>
|
||||
<Icon className={styles['x-icon']} icon={'ic_x'}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderShareLabel() {
|
||||
return (
|
||||
<span className={styles['share-label']}>Share Add-on</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderButtons() {
|
||||
return (
|
||||
<div className={styles['buttons']}>
|
||||
<div className={styles['facebook-button']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'}/>FACEBOOK
|
||||
</div>
|
||||
<div className={styles['twitter-button']}>
|
||||
<Icon className={styles['twitter-icon']} icon={'ic_twitter'}/>TWITTER
|
||||
</div>
|
||||
<div className={styles['gplus-button']}>
|
||||
<Icon className={styles['gplus-icon']} icon={'ic_gplus'}/>GOOGLE+
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderUrl() {
|
||||
if(this.props.url.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['url-container']}>
|
||||
<input className={styles['url']} defaultValue={this.props.url}/>
|
||||
<span className={styles['copy-label']}>Copy</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['share-addon']}>
|
||||
{this.renderX()}
|
||||
<div className={styles['info-container']}>
|
||||
{this.renderShareLabel()}
|
||||
{this.renderButtons()}
|
||||
{this.renderUrl()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ShareAddon.propTypes = {
|
||||
url: PropTypes.string.isRequired
|
||||
};
|
||||
ShareAddon.defaultProps = {
|
||||
url: ''
|
||||
};
|
||||
|
||||
export default ShareAddon;
|
||||
3
src/common/ShareAddon/index.js
Normal file
3
src/common/ShareAddon/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import ShareAddon from './ShareAddon';
|
||||
|
||||
export default ShareAddon;
|
||||
80
src/common/ShareAddon/styles.less
Normal file
80
src/common/ShareAddon/styles.less
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
@import 'stremio-colors';
|
||||
.share-addon {
|
||||
width: 380px;
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
color: @colorwhite;
|
||||
background-color: @colorwhite;
|
||||
.x-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.x-icon {
|
||||
height: 10px;
|
||||
fill: @colorneutrallight;
|
||||
}
|
||||
}
|
||||
.info-container {
|
||||
padding: 6px 20px 0px 20px;
|
||||
.share-label {
|
||||
color: @colorblack;
|
||||
font-weight: 600;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
margin: 22px 0px;
|
||||
font-family: LatoLight;
|
||||
justify-content: space-between;
|
||||
.facebook-icon, .twitter-icon, .gplus-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
.facebook-button {
|
||||
background-color: @colorfb;
|
||||
}
|
||||
.twitter-button {
|
||||
background-color: @coloraccent;
|
||||
}
|
||||
.gplus-button {
|
||||
background-color: #dd4b39;
|
||||
}
|
||||
.facebook-button, .twitter-button, .gplus-button {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.url-container {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
border: 1px solid @colorneutrallight;
|
||||
.url, .copy-label {
|
||||
padding: 10px;
|
||||
font-weight: 600;
|
||||
color: @colorblack40;
|
||||
}
|
||||
.url {
|
||||
width: 90%;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.copy-label {
|
||||
width: 30%;
|
||||
cursor: pointer;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background-color: @colorblack20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import Episode from './Episode';
|
|||
import LibraryItemList from './LibraryItemList';
|
||||
import LibraryItemGrid from './LibraryItemGrid';
|
||||
import Addon from './Addon';
|
||||
import ShareAddon from './ShareAddon';
|
||||
|
||||
export {
|
||||
Checkbox,
|
||||
|
|
@ -21,5 +22,6 @@ export {
|
|||
Episode,
|
||||
LibraryItemList,
|
||||
LibraryItemGrid,
|
||||
Addon
|
||||
Addon,
|
||||
ShareAddon
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Episode } from 'stremio-common';
|
|||
import { LibraryItemList } from 'stremio-common';
|
||||
import { LibraryItemGrid } from 'stremio-common';
|
||||
import { Addon } from 'stremio-common';
|
||||
import { ShareAddon } from 'stremio-common';
|
||||
|
||||
class Board extends PureComponent {
|
||||
constructor(props) {
|
||||
|
|
@ -34,10 +35,7 @@ class Board extends PureComponent {
|
|||
render() {
|
||||
return (
|
||||
<div style={{ paddingTop: 40, color: 'yellow' }}>
|
||||
<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>
|
||||
<ShareAddon url={'http://nfxaddon.strem.io/stremioget'}></ShareAddon>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue