mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
grid style merged
This commit is contained in:
svetlagasheva
parent
acfd230b9c
commit
dc9da52c1d
11 changed files with 447 additions and 338 deletions
|
|
@ -19,7 +19,9 @@ const renderVersion = (version) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<span className={styles['version']}>{'v. ' + version}</span>
|
||||
<div className={styles['version-container']}>
|
||||
<div className={styles['version']}>{'v. ' + version}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -68,12 +70,12 @@ const Addon = (props) => {
|
|||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
|
||||
</div>
|
||||
<div className={styles['info']}>
|
||||
<div className={styles['header']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
</div>
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
</div>
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
.addon {
|
||||
width: 550px;
|
||||
padding: 18px;
|
||||
|
|
@ -7,78 +6,93 @@
|
|||
color: @colorwhite;
|
||||
font-family: LatoLight;
|
||||
background-color: @colorglass;
|
||||
|
||||
.info-container {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
display: grid;
|
||||
margin-bottom: 26px;
|
||||
|
||||
grid-template-columns: 80px 14px 420px;
|
||||
grid-template-rows: 22px 2px 18px 2px 36px;
|
||||
grid-template-areas:
|
||||
"logo . header"
|
||||
"logo . ."
|
||||
"logo . type"
|
||||
"logo . ."
|
||||
"logo . description";
|
||||
.logo-container {
|
||||
grid-area: logo;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin-right: 14px;
|
||||
background-color: @colordarkest;
|
||||
|
||||
.logo {
|
||||
width: 40px;
|
||||
margin: auto;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 420px;
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
.name {
|
||||
font-size: 20px;
|
||||
max-width: 350px;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
margin-right: 10px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-right: 10px;
|
||||
.version-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: @colorwhite60;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: @coloraccent;
|
||||
}
|
||||
|
||||
.type, .description {
|
||||
margin-top: 2px;
|
||||
.version {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.type {
|
||||
grid-area: type;
|
||||
color: @coloraccent;
|
||||
}
|
||||
.description {
|
||||
grid-area: description;
|
||||
}
|
||||
}
|
||||
|
||||
.urls-container {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
|
||||
.url {
|
||||
color: @colorwhite60;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-top: 26px;
|
||||
justify-content: space-between;
|
||||
|
||||
.share-container {
|
||||
border: 2px solid @coloraccent;
|
||||
|
||||
.share-icon {
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
fill: @coloraccent;
|
||||
}
|
||||
|
||||
.share-label {
|
||||
color: @coloraccent;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @coloraccent;
|
||||
.share-icon {
|
||||
fill: @colorwhite;
|
||||
}
|
||||
.share-label {
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-container, .install-label, .uninstall-label {
|
||||
width: 230px;
|
||||
display: flex;
|
||||
|
|
@ -88,15 +102,22 @@
|
|||
padding: 10px 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.install-label {
|
||||
border: 2px solid @colorsignal5;
|
||||
background-color: @colorsignal5;
|
||||
&:hover {
|
||||
background-color: @colorsignal580;
|
||||
}
|
||||
}
|
||||
|
||||
.uninstall-label {
|
||||
border: 2px solid @colorwhite20;
|
||||
border: 2px solid @colorneutral;
|
||||
&:hover {
|
||||
background-color: @colorneutral;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,35 +9,20 @@ const getShapeSize = (posterShape, progress) => {
|
|||
switch (posterShape) {
|
||||
case 'poster':
|
||||
return {
|
||||
containerHeight: 290,
|
||||
width: RELATIVE_POSTER_SIZE,
|
||||
height: RELATIVE_POSTER_SIZE * 1.464
|
||||
width: RELATIVE_POSTER_SIZE
|
||||
};
|
||||
case 'landscape':
|
||||
if (progress) {
|
||||
return {
|
||||
containerHeight: 290,
|
||||
width: RELATIVE_POSTER_SIZE / 0.5625,
|
||||
height: RELATIVE_POSTER_SIZE * 1.464
|
||||
};
|
||||
}
|
||||
return {
|
||||
containerHeight: 210,
|
||||
width: RELATIVE_POSTER_SIZE / 0.5625,
|
||||
height: RELATIVE_POSTER_SIZE
|
||||
width: RELATIVE_POSTER_SIZE / 0.5625
|
||||
};
|
||||
default:
|
||||
if (progress) {
|
||||
return {
|
||||
containerHeight: 290,
|
||||
width: RELATIVE_POSTER_SIZE * 1.464,
|
||||
height: RELATIVE_POSTER_SIZE * 1.464
|
||||
width: RELATIVE_POSTER_SIZE * 1.464
|
||||
};
|
||||
}
|
||||
return {
|
||||
containerHeight: 210,
|
||||
width: RELATIVE_POSTER_SIZE,
|
||||
height: RELATIVE_POSTER_SIZE
|
||||
width: RELATIVE_POSTER_SIZE
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -97,46 +82,66 @@ const renderReleaseInfo = (releaseInfo) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderIcon = (onItemClicked, progress) => {
|
||||
if (progress > 0) {
|
||||
return (
|
||||
<div onClick={onItemClicked} className={styles['more-icon-container']}>
|
||||
<Icon className={styles['more-icon']} icon={'ic_more'} />
|
||||
</div>
|
||||
);
|
||||
const renderPopupIcon = (onItemClicked, popup) => {
|
||||
if (!popup) {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
return (
|
||||
<div onClick={onItemClicked} className={styles['popup-icon-container']}>
|
||||
<Icon className={styles['popup-icon']} icon={'ic_more'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getClassName = (progress, posterShape, title, releaseInfo, episode) => {
|
||||
if ((progress > 0) && (title.length > 0 || releaseInfo.length > 0 || episode.length > 0)) {
|
||||
if (posterShape === 'landscape') return 'progress-info-landscape-shape';
|
||||
if (posterShape === 'square') return 'progress-info-square-shape';
|
||||
return 'progress-info-poster-shape';
|
||||
}
|
||||
if ((progress > 0) && (title.length === 0 && releaseInfo.length === 0 && episode.length === 0)) {
|
||||
if (posterShape === 'landscape') return 'progress-landscape-shape';
|
||||
if (posterShape === 'square') return 'progress-square-shape';
|
||||
return 'progress-poster-shape';
|
||||
}
|
||||
if (!progress && (title.length > 0 || releaseInfo.length > 0 || episode.length > 0)) {
|
||||
if (posterShape === 'landscape') return 'info-landscape-shape';
|
||||
if (posterShape === 'square') return 'info-square-shape';
|
||||
return 'info-poster-shape';
|
||||
}
|
||||
if (!progress && (title.length === 0 && releaseInfo.length === 0 && episode.length === 0)) {
|
||||
if (posterShape === 'landscape') return 'landscape-shape';
|
||||
if (posterShape === 'square') return 'square-shape';
|
||||
return 'poster-shape';
|
||||
}
|
||||
return 'meta-item';
|
||||
}
|
||||
|
||||
const MetaItem = (props) => {
|
||||
const posterSize = getShapeSize(props.posterShape, props.progress);
|
||||
const contentContainerStyle = {
|
||||
width: posterSize.width,
|
||||
height: props.episode.length === 0 && props.title.length === 0 && props.releaseInfo.length === 0 && props.progress == 0 ? posterSize.height : posterSize.containerHeight
|
||||
width: posterSize.width
|
||||
};
|
||||
const placeholderIcon = getPlaceholderIcon(props.type);
|
||||
const placeholderIconUrl = iconDataUrl({ icon: placeholderIcon, fill: colors.accent, width: Math.round(RELATIVE_POSTER_SIZE / 2.2), height: Math.round(RELATIVE_POSTER_SIZE / 2.2) });
|
||||
const imageStyle = {
|
||||
height: posterSize.height,
|
||||
backgroundImage: `url(${props.poster}), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={contentContainerStyle} className={styles['meta-item']}>
|
||||
<div style={contentContainerStyle} className={styles[getClassName(props.progress, props.posterShape, props.title, props.releaseInfo, props.episode)]}>
|
||||
<div style={imageStyle} className={styles['poster']}>
|
||||
<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']}>
|
||||
<div className={styles['info']}>
|
||||
{renderEpisode(props.episode)}
|
||||
{renderTitle(props.title)}
|
||||
{renderReleaseInfo(props.releaseInfo)}
|
||||
</div>
|
||||
{renderIcon(props.onItemClicked, props.progress)}
|
||||
<div className={styles['info']}>
|
||||
{renderEpisode(props.episode)}
|
||||
{renderTitle(props.title)}
|
||||
{renderReleaseInfo(props.releaseInfo)}
|
||||
</div>
|
||||
{renderPopupIcon(props.onItemClicked, props.popup)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -149,6 +154,7 @@ MetaItem.propTypes = {
|
|||
episode: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
releaseInfo: PropTypes.string.isRequired,
|
||||
popup: PropTypes.bool.isRequired,
|
||||
play: PropTypes.func,
|
||||
onItemClicked: PropTypes.func
|
||||
};
|
||||
|
|
@ -159,7 +165,8 @@ MetaItem.defaultProps = {
|
|||
progress: 0,
|
||||
episode: '',
|
||||
title: '',
|
||||
releaseInfo: ''
|
||||
releaseInfo: '',
|
||||
popup: false
|
||||
};
|
||||
|
||||
export default MetaItem;
|
||||
|
|
@ -1,16 +1,15 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
.meta-item {
|
||||
.meta-item, .progress-poster-shape, .progress-landscape-shape, .progress-square-shape, .progress-info-poster-shape, .progress-info-landscape-shape, .progress-info-square-shape, .poster-shape, .landscape-shape, .square-shape, .info-poster-shape, .info-landscape-shape, .info-square-shape {
|
||||
display: grid;
|
||||
color: @colorwhite;
|
||||
font-family: LatoLight;
|
||||
|
||||
.poster {
|
||||
grid-area: poster;
|
||||
display: flex;
|
||||
background-position: center;
|
||||
background-size: cover, auto;
|
||||
background-repeat: no-repeat;
|
||||
background-color: @colordarkest;
|
||||
|
||||
.play-container {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
|
|
@ -19,7 +18,6 @@
|
|||
visibility: hidden;
|
||||
border-radius: 50%;
|
||||
background-color: @colorwhite;
|
||||
|
||||
.play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
|
@ -29,66 +27,129 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
grid-area: progress;
|
||||
background-color: @colorneutral;
|
||||
|
||||
.progress {
|
||||
height: 4px;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
margin-top: 6px;
|
||||
align-items: baseline;
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
|
||||
.title, .year {
|
||||
color: @colorwhite60;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
color: @colorwhite;
|
||||
}
|
||||
.info {
|
||||
grid-area: info;
|
||||
.title, .year, .episode {
|
||||
grid-area: text;
|
||||
color: @colorwhite60;
|
||||
}
|
||||
:first-child {
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.more-icon-container {
|
||||
.popup-icon-container {
|
||||
grid-area: popupIcon;
|
||||
cursor: pointer;
|
||||
fill: @colorwhite;
|
||||
|
||||
.more-icon {
|
||||
.popup-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @colorblack;
|
||||
background-color: @colorwhite;
|
||||
outline: 2px solid @colorwhite;
|
||||
|
||||
.play-container {
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.info {
|
||||
.title, .year {
|
||||
color: @colorblack60;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
color: @colorblack;
|
||||
}
|
||||
}
|
||||
|
||||
.more-icon {
|
||||
.popup-icon {
|
||||
fill: @colorblack40;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-poster-shape, .progress-landscape-shape, .progress-square-shape {
|
||||
grid-template-areas:
|
||||
"poster poster"
|
||||
"progress progress"
|
||||
". popupIcon";
|
||||
}
|
||||
.progress-poster-shape {
|
||||
grid-template-columns: 128px 10px;
|
||||
grid-template-rows: 202.03px 4px;
|
||||
}
|
||||
.progress-landscape-shape {
|
||||
grid-template-columns: 235.33px 10px;
|
||||
grid-template-rows: 202.03px 4px;
|
||||
}
|
||||
.progress-square-shape {
|
||||
grid-template-columns: 192.33px 10px;
|
||||
grid-template-rows: 202.03px 4px;
|
||||
}
|
||||
.progress-info-poster-shape, .progress-info-landscape-shape, .progress-info-square-shape {
|
||||
grid-template-areas:
|
||||
"poster poster"
|
||||
"progress progress"
|
||||
". ."
|
||||
"info popupIcon";
|
||||
}
|
||||
.progress-info-poster-shape {
|
||||
grid-template-columns: 128px 10px;
|
||||
grid-template-rows: 202.03px 4px 6px 77.97px;
|
||||
}
|
||||
.progress-info-landscape-shape {
|
||||
grid-template-columns: 235.33px 10px;
|
||||
grid-template-rows: 202.03px 4px 6px 77.97px;
|
||||
}
|
||||
.progress-info-square-shape {
|
||||
grid-template-columns: 192.33px 10px;
|
||||
grid-template-rows: 202.03px 4px 6px 77.97px;
|
||||
}
|
||||
.poster-shape, .landscape-shape, .square-shape {
|
||||
grid-template-areas:
|
||||
"poster poster"
|
||||
". popupIcon";
|
||||
}
|
||||
.poster-shape {
|
||||
grid-template-columns: 128px 10px;
|
||||
grid-template-rows: 202.03px;
|
||||
}
|
||||
.landscape-shape {
|
||||
grid-template-columns: 235.33px 10px;
|
||||
grid-template-rows: 138px;
|
||||
}
|
||||
.square-shape {
|
||||
grid-template-columns: 128px 10px;
|
||||
grid-template-rows: 138px;
|
||||
}
|
||||
.info-poster-shape, .info-landscape-shape, .info-square-shape {
|
||||
grid-template-areas:
|
||||
"poster poster"
|
||||
". ."
|
||||
"info popupIcon";
|
||||
}
|
||||
.info-poster-shape {
|
||||
grid-template-columns: 128px 10px;
|
||||
grid-template-rows: 202.03px 6px 81.97px;
|
||||
}
|
||||
.info-landscape-shape {
|
||||
grid-template-columns: 235.33px 10px;
|
||||
grid-template-rows: 138px 6px 64.97px;
|
||||
}
|
||||
.info-square-shape {
|
||||
grid-template-columns: 128px 10px;
|
||||
grid-template-rows: 138px 6px 64.97px;
|
||||
}
|
||||
.meta-item {
|
||||
grid-template-columns: 138px;
|
||||
grid-template-rows: 202.03px;
|
||||
grid-template-areas:
|
||||
"poster";
|
||||
}
|
||||
|
|
@ -26,6 +26,13 @@ const renderTitle = (title) => {
|
|||
);
|
||||
}
|
||||
|
||||
const getClassName = (isFree, isSubscription, title, subtitle) => {
|
||||
if (isFree) return 'free-subtitle';
|
||||
if (title.length > 0 && subtitle.length === 0 && !isSubscription) return 'with-title';
|
||||
if (title.length === 0 && subtitle.length > 0) return 'with-subtitle';
|
||||
return 'text-container';
|
||||
}
|
||||
|
||||
const renderSubtitle = (isFree, isSubscription, subtitle) => {
|
||||
if (isFree) {
|
||||
return (
|
||||
|
|
@ -62,16 +69,12 @@ const renderProgress = (progress) => {
|
|||
const Stream = (props) => {
|
||||
return (
|
||||
<div onClick={props.play} style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['stream']}>
|
||||
<div className={styles['stream-info-container']}>
|
||||
<div className={styles['stream-info']}>
|
||||
{renderLogo(props.logo, props.sourceName)}
|
||||
<div className={styles['text-container']}>
|
||||
{renderTitle(props.title)}
|
||||
{renderSubtitle(props.isFree, props.isSubscription, props.subtitle)}
|
||||
</div>
|
||||
</div>
|
||||
{renderProgress(props.progress)}
|
||||
{renderLogo(props.logo, props.sourceName)}
|
||||
<div className={styles[getClassName(props.isFree, props.isSubscription, props.title, props.subtitle)]}>
|
||||
{renderTitle(props.title)}
|
||||
{renderSubtitle(props.isFree, props.isSubscription, props.subtitle)}
|
||||
</div>
|
||||
{renderProgress(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>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,102 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
.stream {
|
||||
width: 340px;
|
||||
display: flex;
|
||||
display: grid;
|
||||
font-size: 11px;
|
||||
padding: 7px 20px;
|
||||
color: @colorwhite;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: @colorblack20;
|
||||
|
||||
.stream-info-container {
|
||||
width: 230px;
|
||||
|
||||
.stream-info {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.logo {
|
||||
width: 74px;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
|
||||
.source-name {
|
||||
width: 80px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
margin-left: -180%;
|
||||
text-overflow: initial;
|
||||
transition: margin-left 3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.free-label, .subscription-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.free-label {
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
|
||||
.subscription-label {
|
||||
color: @colorsignal1;
|
||||
}
|
||||
grid-template-columns: 74px 36px 120px 24px 46px;
|
||||
grid-template-rows: 40px 3px 3px;
|
||||
grid-template-areas:
|
||||
"logo . text . play"
|
||||
"progress progress progress . play"
|
||||
". . . . play";
|
||||
.logo {
|
||||
grid-area: logo;
|
||||
width: 74px;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
.source-name {
|
||||
grid-area: logo;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.free-subtitle, .with-title, .with-subtitle, .text-container {
|
||||
grid-area: text;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
grid-area: title;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
&:hover {
|
||||
margin-left: -180%;
|
||||
text-overflow: initial;
|
||||
transition: margin-left 3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
background-color: @colorneutral;
|
||||
|
||||
.progress {
|
||||
height: 3px;
|
||||
border-radius: 1px;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
.subtitle, .subscription-label {
|
||||
grid-area: subtitle;
|
||||
}
|
||||
.free-label, .subscription-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
.free-label {
|
||||
grid-area: free;
|
||||
padding: 0px 6px;
|
||||
border-radius: 2px;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
.subscription-label {
|
||||
color: @colorsignal1;
|
||||
}
|
||||
}
|
||||
.free-subtitle {
|
||||
grid-template-columns: 38px 82px;
|
||||
grid-template-rows: 18px 17px 1px;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"free ."
|
||||
". .";
|
||||
}
|
||||
.with-title {
|
||||
grid-template-columns: 120px;
|
||||
grid-template-rows: 18px;
|
||||
grid-template-areas:
|
||||
"title";
|
||||
}
|
||||
.with-subtitle {
|
||||
grid-template-columns: 120px;
|
||||
grid-template-rows: 18px;
|
||||
grid-template-areas:
|
||||
"subtitle";
|
||||
}
|
||||
.text-container {
|
||||
grid-template-columns: 120px;
|
||||
grid-template-rows: 18px 18px;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"subtitle";
|
||||
}
|
||||
.progress-container {
|
||||
grid-area: progress;
|
||||
background-color: @colorneutral;
|
||||
.progress {
|
||||
height: 3px;
|
||||
border-radius: 1px;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
|
||||
.play-container {
|
||||
width: 46px;
|
||||
grid-area: play;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
|
||||
.play {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
|
@ -88,7 +105,6 @@
|
|||
fill: @colorwhite60;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: @colorwhite20;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
.user-panel {
|
||||
width: 260px;
|
||||
font-family: LatoLight;
|
||||
background-color: @colordarkest;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
|
||||
.profile-picture {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
|
@ -19,59 +16,52 @@
|
|||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.email {
|
||||
color: @colorwhite;
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.log-out {
|
||||
color: @colorwhite40;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen-option {
|
||||
border-top: 1px solid @colorwhite20;
|
||||
border-bottom: 1px solid @colorwhite20;
|
||||
}
|
||||
|
||||
.fullscreen-option, .settings-option, .addons-option, .magnet-option, .help-option {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
color: @colorwhite80;
|
||||
|
||||
.fullscreen-icon, .settings-icon, .addons-icon, .magnet-icon, .help-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 12px;
|
||||
fill: @coloraccent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: @colorwhite;
|
||||
background-color: @coloraccent20;
|
||||
}
|
||||
}
|
||||
|
||||
.options, .footer {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ const renderPoster = (poster) => {
|
|||
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: 40, height: 36 });
|
||||
const imageStyle = {
|
||||
width: 70,
|
||||
height: 42,
|
||||
backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
|
|
@ -63,53 +61,47 @@ const renderReleasedDate = (released) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderWatched = (isWatched) => {
|
||||
if (!isWatched) {
|
||||
const renderLabel = (isWatched, isUpcoming) => {
|
||||
if (!isWatched && !isUpcoming) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['watched-label']}>WATCHED</span>
|
||||
<div className={styles['label-container']}>
|
||||
<span className={styles[isWatched ? 'watched-label' : 'upcoming-label']}>{isWatched ? 'WATCHED' : 'UPCOMING'}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderUpcoming = (isUpcoming) => {
|
||||
if (!isUpcoming) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['upcoming-label']}>UPCOMING</span>
|
||||
);
|
||||
}
|
||||
|
||||
const renderProgress = (poster, progress) => {
|
||||
const renderProgress = (progress) => {
|
||||
if (progress <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: poster.length > 0 ? 220 : 300 }} className={styles['progress-container']}>
|
||||
<div className={styles['progress-container']}>
|
||||
<div style={{ width: progress + '%' }} className={styles['progress']}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getClassName = (poster, progress) => {
|
||||
if (poster.length > 0 && !progress) return 'with-poster';
|
||||
if (progress && poster.length === 0) return 'with-progress';
|
||||
if (poster.length > 0 && progress) return 'with-poster-progress';
|
||||
return 'video';
|
||||
}
|
||||
|
||||
const Video = (props) => {
|
||||
return (
|
||||
<div onClick={props.onVideoClicked} style={{ backgroundColor: props.progress ? colors.black40 : null, display: props.poster.length > 0 && props.progress ? 'flex' : null }} className={styles['video']}>
|
||||
<div onClick={props.onVideoClicked} style={{ padding: props.poster.length > 0 ? '10px 10px' : '10px 16px' }} className={styles[getClassName(props.poster, props.progress)]}>
|
||||
{renderPoster(props.poster)}
|
||||
<div className={styles['video-container']}>
|
||||
<div className={styles['main-info']}>
|
||||
{renderNumber(props.number)}
|
||||
{renderName(props.name)}
|
||||
</div>
|
||||
{renderDuration(props.duration)}
|
||||
{renderReleasedDate(props.released)}
|
||||
{renderWatched(props.isWatched)}
|
||||
{renderUpcoming(props.isUpcoming)}
|
||||
{renderProgress(props.poster, props.progress)}
|
||||
</div>
|
||||
{renderNumber(props.number)}
|
||||
{renderName(props.name)}
|
||||
{renderDuration(props.duration)}
|
||||
{renderReleasedDate(props.released)}
|
||||
{renderLabel(props.isWatched, props.isUpcoming)}
|
||||
{renderProgress(props.progress)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,89 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
.video {
|
||||
height: 62px;
|
||||
.with-poster, .with-progress, .with-poster-progress, .video {
|
||||
width: 340px;
|
||||
display: flex;
|
||||
padding: 10px 10px;
|
||||
display: grid;
|
||||
font-size: 12px;
|
||||
color: @colorwhite;
|
||||
background-color: @colorblack20;
|
||||
|
||||
.poster {
|
||||
margin-right: 10px;
|
||||
grid-area: poster;
|
||||
background-position: center;
|
||||
background-size: cover, auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 240px;
|
||||
color: @colorwhite;
|
||||
|
||||
.main-info {
|
||||
font-size: 12px;
|
||||
|
||||
.number {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.duration, .released-date {
|
||||
font-size: 11px;
|
||||
padding-left: 1px;
|
||||
margin-right: 10px;
|
||||
color: @colorwhite60;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
background-color: @colorwhite20;
|
||||
|
||||
.progress {
|
||||
height: 3px;
|
||||
margin-top: 2px;
|
||||
border-radius: 1px;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
grid-area: number;
|
||||
}
|
||||
.name {
|
||||
grid-area: name;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.duration, .released-date {
|
||||
grid-area: time;
|
||||
font-size: 11px;
|
||||
color: @colorwhite60;
|
||||
}
|
||||
.label-container {
|
||||
grid-area: label;
|
||||
.watched-label, .upcoming-label {
|
||||
grid-area: label;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.watched-label {
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
|
||||
.upcoming-label {
|
||||
background-color: @colorsignal5;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
grid-area: progress;
|
||||
background-color: @colorwhite20;
|
||||
.progress {
|
||||
height: 3px;
|
||||
border-radius: 1px;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
cursor: pointer;
|
||||
background-color: @colorwhite20;
|
||||
}
|
||||
}
|
||||
.with-poster {
|
||||
grid-template-columns: 70px 10px 1px 15px 28px 196px;
|
||||
grid-template-rows: 18px 24px;
|
||||
grid-template-areas:
|
||||
"poster . number number name name"
|
||||
"poster . . time time label";
|
||||
}
|
||||
.with-progress {
|
||||
background-color: @colorblack40;
|
||||
grid-template-columns: 1px 15px 278px 14px;
|
||||
grid-template-rows: 18px 19px 3px 2px;
|
||||
grid-template-areas:
|
||||
"number number name"
|
||||
". time time"
|
||||
"progress progress progress";
|
||||
}
|
||||
.with-poster-progress {
|
||||
background-color: @colorblack40;
|
||||
grid-template-columns: 70px 10px 1px 15px 204px 20px;
|
||||
grid-template-rows: 18px 19px 3px 2px;
|
||||
grid-template-areas:
|
||||
"poster . number number name"
|
||||
"poster . . time time"
|
||||
"poster . progress progress progress";
|
||||
}
|
||||
.video {
|
||||
grid-template-columns: 1px 15px 28px 264px;
|
||||
grid-template-rows: 18px 24px;
|
||||
grid-template-areas:
|
||||
"number number name name"
|
||||
". time time label";
|
||||
}
|
||||
|
|
@ -1,83 +1,80 @@
|
|||
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 { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';
|
||||
import appStyles from '../src/app/styles';
|
||||
import styles from './styles';
|
||||
|
||||
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>
|
||||
));
|
||||
.add('addon', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['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 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 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 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']} />
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('Checkbox', module)
|
||||
.add('checkbox', () => (
|
||||
<div style={{ padding: '10px' }} className={styles['app']}>
|
||||
<Checkbox className={styles['checkbox-size']} checked={true} enabled={false}></Checkbox>
|
||||
<Checkbox className={styles['checkbox-size']} checked={false} enabled={false}></Checkbox>
|
||||
<Checkbox className={styles['checkbox-size']} checked={false} enabled={true}></Checkbox>
|
||||
<Checkbox className={styles['checkbox-size']} checked={true} enabled={true}></Checkbox>
|
||||
</div>
|
||||
))
|
||||
.add('checkbox', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['app']}>
|
||||
<Checkbox className={styles['checkbox-size']} checked={true} enabled={false} />
|
||||
<Checkbox className={styles['checkbox-size']} checked={false} enabled={false} />
|
||||
<Checkbox className={styles['checkbox-size']} checked={false} enabled={true} />
|
||||
<Checkbox className={styles['checkbox-size']} checked={true} enabled={true} />
|
||||
</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>
|
||||
));
|
||||
.add('library item list', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['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 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 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 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)} />
|
||||
</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>
|
||||
));
|
||||
.add('meta item', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['app']}>
|
||||
<MetaItem poster={'https://m.media-amazon.com/images/M/MV5BODQ0NDhjYWItYTMxZi00NTk2LWIzNDEtOWZiYWYxZjc2MTgxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg'} />
|
||||
<MetaItem title={'Red Sparrow'} poster={'https://m.media-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_.jpg'} />
|
||||
<MetaItem play={function() { alert('32423') }} showInfo={function() { alert('222') }} progress={50} poster={'https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_.jpg'} />
|
||||
<MetaItem poster={'https://m.media-amazon.com/images/M/MV5BYWVhZjZkYTItOGIwYS00NmRkLWJlYjctMWM0ZjFmMDU4ZjEzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg'} />
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('ShareAddon', module)
|
||||
.add('share addon', () => (
|
||||
<div style={{ padding: '10px' }} className={styles['app']}>
|
||||
<ShareAddon url={'....'}></ShareAddon>
|
||||
</div>
|
||||
));
|
||||
.add('share addon', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['app']}>
|
||||
<ShareAddon url={'....'} />
|
||||
</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>
|
||||
));
|
||||
.add('stream', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['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>
|
||||
));
|
||||
.add('user panel', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['app']}>
|
||||
<UserPanel resizeWindow={function() { alert('asdas') }} photo={'https://image.freepik.com/free-vector/wild-animals-cartoon_1196-361.jpg'} email={'animals@mail.com'} />
|
||||
</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>
|
||||
));
|
||||
.add('video', () => (
|
||||
<div style={{ padding: '10px' }} className={appStyles['app']}>
|
||||
<Video poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'} number={2} name={'The Bing Bran Hypothesis'} duration={23} isWatched={true} onVideoClicked={function() { alert(8) }} />
|
||||
<Video number={4} name={'The Luminous Fish Effect'} progress={50} duration={22} />
|
||||
<Video poster={'5'} number={5} name={'The Dumpling Paradox'} progress={50} duration={22} />
|
||||
<Video number={8} name={'The Loobendfeld Decay'} released={new Date(2018, 4, 23)} isUpcoming={true} />
|
||||
</div>
|
||||
));
|
||||
4
stories/styles.less
Normal file
4
stories/styles.less
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.checkbox-size {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
Loading…
Reference in a new issue