mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-29 01:28:48 +00:00
Merge branch 'master' of github.com:Stremio/stremio-web into player
This commit is contained in:
NikolaBorislavovHristov
commit
7987bbe48c
35 changed files with 841 additions and 505 deletions
|
|
@ -25,7 +25,7 @@
|
|||
"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#v2.0.2",
|
||||
"stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.3",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -80,11 +80,11 @@ const Addon = (props) => {
|
|||
{renderDescription(props.description)}
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={props.shareAddon} className={classnames(styles['button'], styles['share-button'])}>
|
||||
<div className={classnames(styles['button'], styles['share-button'])} onClick={props.shareAddon}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<span className={styles['label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
<div onClick={props.onToggleClicked} className={classnames(styles['button'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])}>
|
||||
<div className={classnames(styles['button'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])} onClick={props.onToggleClicked}>
|
||||
<span className={styles['label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,21 @@
|
|||
@addon-width: 514px;
|
||||
@logo-width: floor((@addon-width * 0.2));
|
||||
|
||||
.addon {
|
||||
width: @addon-width;
|
||||
grid-template-rows: floor((@logo-width * 0.25)) floor((@logo-width * 0.20)) auto auto ceil((@addon-width * 0.08));
|
||||
|
||||
.logo {
|
||||
width: @logo-width;
|
||||
height: @logo-width;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.urls-container {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-width: 2px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
--addon-width: 514px;
|
||||
--name-font-size: 20px;
|
||||
--version-font-size: 12px;
|
||||
--type-font-size: 12px;
|
||||
--description-font-size: 12px;
|
||||
--url-font-size: 12px;
|
||||
--button-border-width: 2px;
|
||||
--button-label-font-size: 14px;
|
||||
}
|
||||
|
||||
.addon {
|
||||
display: grid;
|
||||
width: var(--addon-width);
|
||||
padding: 2%;
|
||||
// background-color: @colorglass;
|
||||
background-color: var(--color-background);
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-rows: calc(0.04 * var(--addon-width)) calc(0.04 * var(--addon-width)) auto auto calc((0.08 * var(--addon-width)));
|
||||
grid-template-areas:
|
||||
"logo header"
|
||||
"logo type"
|
||||
|
|
@ -51,9 +27,11 @@
|
|||
grid-area: logo;
|
||||
|
||||
.logo {
|
||||
width: calc(0.2 * var(--addon-width));
|
||||
height: calc(0.2 * var(--addon-width));
|
||||
padding: 20%;
|
||||
// fill: @colorwhite;
|
||||
// background-color: @colordarkest;
|
||||
fill: var(--color-surfacelighter);
|
||||
background-color: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +50,8 @@
|
|||
.name {
|
||||
max-width: 80%;
|
||||
margin-right: 3%;
|
||||
// color: @colorwhite;
|
||||
font-size: var(--name-font-size);
|
||||
color: var(--color-surfacelighter);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -80,7 +59,8 @@
|
|||
|
||||
.version {
|
||||
flex: 1;
|
||||
// color: @colorwhite60;
|
||||
font-size: var(--version-font-size);
|
||||
color: var(--color-surface);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -93,13 +73,15 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 4%;
|
||||
// color: @coloraccent;
|
||||
font-size: var(--type-font-size);
|
||||
color: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
padding-left: 4%;
|
||||
// color: @colorwhite;
|
||||
font-size: var(--description-font-size);
|
||||
color: var(--color-surfacelighter);
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
|
@ -111,7 +93,8 @@
|
|||
word-break: break-all;
|
||||
|
||||
.url {
|
||||
// color: @colorwhite60;
|
||||
font-size: var(--url-font-size);
|
||||
color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,6 +110,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-width: var(--button-border-width);
|
||||
border-style: solid;
|
||||
|
||||
.icon {
|
||||
|
|
@ -135,47 +119,47 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&.share-button {
|
||||
// border-color: @coloraccent;
|
||||
border-color: var(--color-secondarylighter);
|
||||
|
||||
.icon {
|
||||
// fill: @coloraccent;
|
||||
fill: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
// color: @coloraccent;
|
||||
color: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// background-color: @coloraccent;
|
||||
background-color: var(--color-secondarylighter);
|
||||
|
||||
.icon {
|
||||
// fill: @colorwhite;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.install-button {
|
||||
// border-color: @colorsignal5;
|
||||
// background-color: @colorsignal5;
|
||||
border-color: var(--color-signal5);
|
||||
background-color: var(--color-signal5);
|
||||
|
||||
&:hover {
|
||||
// background-color: @colorsignal580;
|
||||
background-color: var(--color-signal580);
|
||||
}
|
||||
}
|
||||
|
||||
&.uninstall-button {
|
||||
// border-color: @colorneutral;
|
||||
border-color: var(--color-surfacedark);
|
||||
|
||||
&:hover {
|
||||
// background-color: @colorneutral;
|
||||
background-color: var(--color-surfacedark);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
cursor: pointer;
|
||||
|
||||
&.checkbox-checked {
|
||||
// background-color: @colorprimlight;
|
||||
background-color: var(--color-primarylight);
|
||||
|
||||
.icon {
|
||||
padding: 10%;
|
||||
// fill: @colorwhite;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,6 +28,6 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
// fill: @colorwhite60;
|
||||
fill: var(--color-surfacelighter60);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
display: flex;
|
||||
padding: 8px;
|
||||
align-items: center;
|
||||
// color: @colorwhite60;
|
||||
// border-top: 1px solid @colorwhite20;
|
||||
color: var(--color-surfacelighter60);
|
||||
border-top: 1px solid var(--color-surfacelighter20);
|
||||
.poster {
|
||||
width: 75px;
|
||||
display: flex;
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
.play {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
// fill: @colortransparent;
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 170px;
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
.type, .year, .views, .hours {
|
||||
width: 100px;
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
.icon-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
// fill: @colorprim;
|
||||
// color: @colorprim;
|
||||
fill: var(--color-primarydark);
|
||||
color: var(--color-primarydark);
|
||||
padding-top: 24px;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
|
|
@ -52,25 +52,25 @@
|
|||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
// color: @colorblack;
|
||||
// background-color: @colorwhite;
|
||||
color: var(--color-backgrounddarker);
|
||||
background-color: var(--color-surfacelighter);
|
||||
.play-container {
|
||||
// background-color: @colorwhite;
|
||||
background-color: var(--color-surfacelighter);
|
||||
.play {
|
||||
// fill: @colormedium;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
// color: @colorblack;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
.icon-container {
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
&:hover, &:focus {
|
||||
// background-color: @colorblack20;
|
||||
background-color: var(--color-backgrounddarker20);
|
||||
.trailer-icon, .addlib-icon, .trailer, .addlib {
|
||||
// fill: @colorprimdark;
|
||||
// color: @colorprimdark;
|
||||
fill: var(--color-primarydarker);
|
||||
color: var(--color-primarydarker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.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;
|
||||
color: var(--color-surfacelighter);
|
||||
.poster {
|
||||
grid-area: poster;
|
||||
display: flex;
|
||||
background-position: center;
|
||||
background-size: cover, auto;
|
||||
background-repeat: no-repeat;
|
||||
// background-color: @colordarkest;
|
||||
background-color: var(--color-backgrounddark);
|
||||
.play-container {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
|
|
@ -15,61 +15,61 @@
|
|||
display: flex;
|
||||
visibility: hidden;
|
||||
border-radius: 50%;
|
||||
// background-color: @colorwhite;
|
||||
background-color: var(--color-surfacelighter);
|
||||
.play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: auto;
|
||||
margin-left: 26px;
|
||||
// fill: @colormedium;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-container {
|
||||
grid-area: progress;
|
||||
// background-color: @colorneutral;
|
||||
background-color: var(--color-surface);
|
||||
.progress {
|
||||
height: 4px;
|
||||
// background-color: @colorprimlight;
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
.info {
|
||||
grid-area: info;
|
||||
.title, .year, .episode {
|
||||
grid-area: text;
|
||||
// color: @colorwhite60;
|
||||
color: var(--color-surfacelighter60);
|
||||
}
|
||||
:first-child {
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
.popup-icon-container {
|
||||
grid-area: popupIcon;
|
||||
cursor: pointer;
|
||||
// fill: @colorwhite;
|
||||
fill: var(--color-surfacelighter);
|
||||
.popup-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
// color: @colorblack;
|
||||
// background-color: @colorwhite;
|
||||
// outline: 2px solid @colorwhite;
|
||||
color: var(--color-backgrounddarker);
|
||||
background-color: var(--color-surfacelighter);
|
||||
outline: 2px solid var(--color-surfacelighter);
|
||||
.play-container {
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
}
|
||||
.info {
|
||||
.title, .year {
|
||||
// color: @colorblack60;
|
||||
color: var(--color-backgrounddarker60);
|
||||
}
|
||||
:first-child {
|
||||
// color: @colorblack;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
.popup-icon {
|
||||
// fill: @colorblack40;
|
||||
fill: var(--color-backgrounddarker40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,24 +14,24 @@
|
|||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-origin: border-box;
|
||||
// background-color: @colordarkest;
|
||||
background-color: var(--color-backgrounddark);
|
||||
.in-cinema-container {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background-color: @colormedium;
|
||||
background-color: var(--color-primary);
|
||||
.in-cinema-icon {
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
// fill: @colorwhite;
|
||||
fill: var(--color-surfacelighter);
|
||||
margin-right: 6px;
|
||||
}
|
||||
.in-cinema-label {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -44,20 +44,20 @@
|
|||
}
|
||||
.name {
|
||||
font-size: 12px;
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
.year {
|
||||
font-size: 11px;
|
||||
// color: @colorwhite80;
|
||||
color: var(--color-surfacelighter80);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
// background: @colorwhite;
|
||||
background: var(--color-surfacelighter);
|
||||
.name {
|
||||
// color: @colorblack;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
.year {
|
||||
// color: @colorneutral;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,26 +7,26 @@
|
|||
align-items: center;
|
||||
.nav-tab-icon {
|
||||
height: @nav-bar-height;
|
||||
// fill: @colorwhite80;
|
||||
fill: var(--color-surfacelighter80);
|
||||
width: 18px;
|
||||
}
|
||||
.nav-tab-label {
|
||||
// color: @colorwhite80;
|
||||
color: var(--color-surfacelighter80);
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
&.active {
|
||||
// background-color: @colorbgmain;
|
||||
background-color: var(--color-backgrounddark);
|
||||
}
|
||||
&:hover:not(.active) {
|
||||
// background-color: @colordarkest20;
|
||||
background-color: var(--color-backgrounddark20);
|
||||
}
|
||||
&:hover, &.active {
|
||||
.nav-tab-icon {
|
||||
// fill: @colorwhite;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
.nav-tab-label {
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,11 +16,11 @@
|
|||
outline: none;
|
||||
appearance: none;
|
||||
user-select: text;
|
||||
// background-color: @colorsecondarylight80;
|
||||
// color: @colorwhite80;
|
||||
background-color: var(--color-secondary80);
|
||||
color: var(--color-surfacelighter80);
|
||||
font-size: 14px;
|
||||
&::placeholder {
|
||||
// color: @colorwhite80;
|
||||
color: var(--color-surfacelighter80);
|
||||
}
|
||||
}
|
||||
.submit-button {
|
||||
|
|
@ -28,11 +28,11 @@
|
|||
height: 100%;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
// background-color: @coloraccent80;
|
||||
background-color: var(--color-secondarylighter80);
|
||||
.submit-icon {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
// fill: @colorwhite80;
|
||||
fill: var(--color-surfacelighter80);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -40,19 +40,19 @@
|
|||
.search-label {
|
||||
padding: 0;
|
||||
.query-input {
|
||||
// background-color: @colorbgmain;
|
||||
// color: @colorwhite;
|
||||
background-color: var(--color-backgrounddark);
|
||||
color: var(--color-surfacelighter);
|
||||
font-size: 16px;
|
||||
&::placeholder {
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
.submit-button {
|
||||
width: @nav-bar-height;
|
||||
// background-color: @coloraccent;
|
||||
background-color: var(--color-secondarylighter);
|
||||
.submit-icon {
|
||||
width: 16px;
|
||||
// fill: @colorwhite;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
background-color: transparent;
|
||||
.icon {
|
||||
height: @nav-bar-height;
|
||||
// fill: @colorwhite80
|
||||
fill: var(--color-surfacelighter80)
|
||||
}
|
||||
.user-icon {
|
||||
width: 40%;
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
width: 16%;
|
||||
}
|
||||
&:hover, &.active {
|
||||
// background-color: @colordarkest20;
|
||||
background-color: var(--color-backgrounddark20);
|
||||
.icon {
|
||||
// fill: @colorwhite;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
.nav-bar {
|
||||
display: flex;
|
||||
height: @nav-bar-height;
|
||||
// background-color: @colorsecondary;
|
||||
background-color: var(--color-secondarydark);
|
||||
.nav-title {
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
.search-input {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -12,18 +12,16 @@ const renderUrl = (copyToClipboard, url) => {
|
|||
return (
|
||||
<div className={styles['url-container']}>
|
||||
<input className={styles['url']} defaultValue={url} readOnly={true} />
|
||||
<span onClick={copyToClipboard} className={styles['copy-label']}>
|
||||
<div onClick={copyToClipboard} className={styles['copy-label']}>
|
||||
<Icon className={styles['copy-icon']} icon={'ic_link'} />Copy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ShareAddon = (props) => {
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.surface });
|
||||
const imageStyle = {
|
||||
width: 10,
|
||||
height: 10,
|
||||
backgroundImage: `url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
|
|
@ -33,7 +31,7 @@ const ShareAddon = (props) => {
|
|||
<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>
|
||||
<div className={styles['share-label']}>Share Add-on</div>
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={props.shareInFacebook} className={styles['facebook-button']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK
|
||||
|
|
|
|||
|
|
@ -1,8 +1,62 @@
|
|||
@share-addon-width: 380px;
|
||||
@spacing: floor((@share-addon-width * 0.06));
|
||||
|
||||
.share-addon {
|
||||
width: 380px;
|
||||
padding: 10px;
|
||||
// color: @colorwhite;
|
||||
// background-color: @colorwhite;
|
||||
width: @share-addon-width;
|
||||
padding: ceil((@spacing * 0.5));
|
||||
|
||||
.x-icon {
|
||||
width: ceil((@spacing * 0.5));
|
||||
height: ceil((@spacing * 0.5));
|
||||
}
|
||||
|
||||
.info-container {
|
||||
padding: floor((@spacing * 0.3)) ceil((@spacing * 0.9)) @spacing ceil((@spacing * 0.9));
|
||||
|
||||
.buttons {
|
||||
padding: @spacing 0;
|
||||
}
|
||||
|
||||
.facebook-button, .twitter-button, .gplus-button {
|
||||
width: ceil((@share-addon-width * 0.26));
|
||||
height: floor((@share-addon-width * 0.09));
|
||||
|
||||
.facebook-icon, .twitter-icon, .gplus-icon {
|
||||
width: ceil((@spacing * 0.6));
|
||||
height: ceil((@spacing * 0.6));
|
||||
margin-right: floor((@spacing * 0.3));
|
||||
}
|
||||
}
|
||||
|
||||
.url-container {
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
|
||||
.url {
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
padding: ceil((@spacing * 0.5));
|
||||
}
|
||||
|
||||
.copy-label {
|
||||
font-size: 14px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
padding: ceil((@spacing * 0.5));
|
||||
|
||||
.copy-icon {
|
||||
width: ceil((@spacing * 0.7));
|
||||
height: ceil((@spacing * 0.7));
|
||||
margin-right: floor((@spacing * 0.3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-addon {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.x-container {
|
||||
display: flex;
|
||||
|
|
@ -15,87 +69,67 @@
|
|||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
padding: 6px 20px 30px 20px;
|
||||
.share-label {
|
||||
color: var(--color-backgrounddarker);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.share-label {
|
||||
// color: @colorblack;
|
||||
font-weight: 600;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
justify-content: space-between;
|
||||
|
||||
.buttons {
|
||||
.facebook-button, .twitter-button, .gplus-button {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
margin: 22px 0px;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.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;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.url-container {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
.facebook-button {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.twitter-button {
|
||||
background-color: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
.gplus-button {
|
||||
background-color: var(--color-signal2);
|
||||
}
|
||||
}
|
||||
|
||||
.url-container {
|
||||
display: flex;
|
||||
border-style: solid;
|
||||
border-color: var(--color-surface);
|
||||
|
||||
.url, .copy-label {
|
||||
color: var(--color-backgrounddarker40);
|
||||
}
|
||||
|
||||
.url {
|
||||
width: 75%;
|
||||
outline: none;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
// border: 1px solid @colorneutrallight;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.url, .copy-label {
|
||||
padding: 10px;
|
||||
font-weight: 600;
|
||||
// color: @colorblack40;
|
||||
}
|
||||
.copy-label {
|
||||
cursor: pointer;
|
||||
width: 25%;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--color-backgrounddarker20);
|
||||
|
||||
.url {
|
||||
width: 90%;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding-right: 30px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.copy-icon {
|
||||
fill: var(--color-backgrounddarker40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,113 +0,0 @@
|
|||
@stream-width: 360px;
|
||||
@spacing: max(12px, ceil((@stream-width * 0.04)));
|
||||
@progress-height: 5px;
|
||||
|
||||
.stream-container {
|
||||
width: @stream-width;
|
||||
|
||||
.logo-container {
|
||||
margin: @spacing 0 @spacing @spacing;
|
||||
}
|
||||
|
||||
.source-name {
|
||||
font-size: 13px;
|
||||
margin: @spacing 0 @spacing @spacing;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
min-height: ceil((@stream-width * 0.16));
|
||||
padding: @spacing;
|
||||
|
||||
.title {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
:not(:last-child) {
|
||||
margin-bottom: (@spacing * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.play-container {
|
||||
width: floor((@stream-width * 0.08));
|
||||
padding: @spacing @spacing @spacing 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: @progress-height;
|
||||
}
|
||||
}
|
||||
|
||||
.stream-container {
|
||||
// background-color: @colorglass;
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
// fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.source-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// color: @colorwhite;
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
// color: @colorwhite;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
// color: @colorwhite;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.play-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.play {
|
||||
width: 100%;
|
||||
// fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
// background-color: @colorprim;
|
||||
|
||||
.progress {
|
||||
// background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// background-color: @colorwhite20;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +1,18 @@
|
|||
@user-panel-width: 260px;
|
||||
@spacing: max(16px, ceil((@user-panel-width * 0.06)));
|
||||
|
||||
.user-panel {
|
||||
width: @user-panel-width;
|
||||
|
||||
.user-info {
|
||||
grid-template-columns: ceil((@user-panel-width * 0.2)) auto;
|
||||
grid-template-rows: ceil((@user-panel-width * 0.1)) ceil((@user-panel-width * 0.1));
|
||||
padding: @spacing;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: @spacing;
|
||||
|
||||
.icon {
|
||||
width: floor((@user-panel-width * 0.08));
|
||||
height: floor((@user-panel-width * 0.08));
|
||||
margin-right: @spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: ceil((@spacing * 0.6)) (2 * ceil((@spacing * 0.6)));
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 1px;
|
||||
}
|
||||
--user-panel-width: 260px;
|
||||
--spacing: 16px;
|
||||
--separator-height: 1px;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
// background-color: @colordarkest;
|
||||
width: var(--user-panel-width);
|
||||
background-color: var(--color-background);
|
||||
|
||||
.user-info {
|
||||
display: grid;
|
||||
padding: var(--spacing);
|
||||
grid-template-columns: calc(0.2 * var(--user-panel-width)) auto;
|
||||
grid-template-rows: calc(0.1 * var(--user-panel-width)) calc(0.1 * var(--user-panel-width));
|
||||
grid-template-areas:
|
||||
"avatar email"
|
||||
"avatar login-logout";
|
||||
|
|
@ -50,8 +29,8 @@
|
|||
grid-area: email;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// color: @colorwhite;
|
||||
padding-left: @spacing;
|
||||
color: var(--color-surfacelighter);
|
||||
padding-left: var(--spacing);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -61,15 +40,15 @@
|
|||
grid-area: login-logout;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// color: @colorneutral;
|
||||
padding-left: @spacing;
|
||||
color: var(--color-surface);
|
||||
padding-left: var(--spacing);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -77,20 +56,25 @@
|
|||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// color: @colorwhite80;
|
||||
padding: var(--spacing);
|
||||
color: var(--color-surfacelighter80);
|
||||
|
||||
.icon {
|
||||
// fill: @coloraccent;
|
||||
width: calc(var(--user-panel-width) * 0.08);
|
||||
height: calc(var(--user-panel-width) * 0.08);
|
||||
margin-right: var(--spacing);
|
||||
fill: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// color: @colorwhite;
|
||||
// background-color: @coloraccent20;
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-secondarylighter20);
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
// background-color: @colorneutral;
|
||||
height: var(--separator-height);
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
@video-width: 360px;
|
||||
@spacing: max(8px, ceil((@video-width * 0.02)));
|
||||
@progress-height: 5px;
|
||||
|
||||
.video-container {
|
||||
width: @video-width;
|
||||
|
||||
.poster {
|
||||
margin: @spacing 0 @spacing @spacing;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
min-height: ceil((@video-width * 0.2));
|
||||
padding: @spacing;
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.released-date {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.upcoming-label, .watched-label {
|
||||
font-size: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.upcoming-label {
|
||||
margin-right: @spacing;
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
margin-bottom: (@spacing * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
width: floor((@video-width * 0.07));
|
||||
padding: @spacing @spacing @spacing 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: @progress-height;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
// background-color: @colorglass;
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.poster {
|
||||
flex: 1;
|
||||
background-position: center;
|
||||
background-size: cover, auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
// color: @colorwhite;
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.released-date {
|
||||
// color: @colorwhite60;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
display: flex;
|
||||
|
||||
.upcoming-label, .watched-label {
|
||||
padding: 0 0.6em;
|
||||
font-weight: 600;
|
||||
// color: @colorwhite;
|
||||
}
|
||||
|
||||
.upcoming-label {
|
||||
// background-color: @colorsignal5;
|
||||
}
|
||||
|
||||
.watched-label {
|
||||
// background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
width: 100%;
|
||||
// fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
// background-color: @colorprim;
|
||||
|
||||
.progress {
|
||||
// background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// background-color: @colorwhite20;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,6 @@ import NavBar from './NavBar';
|
|||
import Modal from './Modal';
|
||||
import MetadataItem from './MetadataItem';
|
||||
import Router from './Router';
|
||||
import Stream from './Stream';
|
||||
import Video from './Video';
|
||||
import LibraryItemList from './LibraryItemList';
|
||||
import MetaItem from './MetaItem';
|
||||
import Addon from './Addon';
|
||||
|
|
@ -20,8 +18,6 @@ export {
|
|||
Modal,
|
||||
MetadataItem,
|
||||
Router,
|
||||
Stream,
|
||||
Video,
|
||||
LibraryItemList,
|
||||
MetaItem,
|
||||
Addon,
|
||||
|
|
|
|||
9
src/routes/Detail/Detail.js
Normal file
9
src/routes/Detail/Detail.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
class Detail extends Component {
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default Detail;
|
||||
96
src/routes/Detail/StreamsList/Stream/styles.less
Normal file
96
src/routes/Detail/StreamsList/Stream/styles.less
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
.stream-container {
|
||||
--stream-width: 360px;
|
||||
--spacing: 8px;
|
||||
--source-name-font-size: 13px;
|
||||
--title-font-size: 11px;
|
||||
--subtitle-font-size: 11px;
|
||||
}
|
||||
|
||||
.stream-container {
|
||||
width: var(--stream-width);
|
||||
background-color: var(--color-backgroundlight);
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: var(--spacing) 0 var(--spacing) var(--spacing);
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.source-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: var(--spacing) 0 var(--spacing) var(--spacing);
|
||||
font-size: var(--source-name-font-size);
|
||||
color: var(--color-surfacelighter);
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
flex: 3;
|
||||
min-height: calc(0.2 * var(--stream-width));
|
||||
padding: var(--spacing);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
font-size: var(--title-font-size);
|
||||
color: var(--color-surfacelighter);
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--subtitle-font-size);
|
||||
color: var(--color-surfacelighter);
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
:not(:last-child) {
|
||||
margin-bottom: calc(0.5 * var(--spacing));
|
||||
}
|
||||
}
|
||||
|
||||
.play-container {
|
||||
width: calc(0.07 * var(--stream-width));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing) var(--spacing) var(--spacing) 0;
|
||||
|
||||
.play {
|
||||
width: 100%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
height: calc(0.5 * var(--spacing));
|
||||
background-color: var(--color-primarydark);
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-surfacelighter20);
|
||||
}
|
||||
}
|
||||
39
src/routes/Detail/StreamsList/StreamsList.js
Normal file
39
src/routes/Detail/StreamsList/StreamsList.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import Stream from './Stream';
|
||||
import styles from './styles';
|
||||
|
||||
const StreamsList = (props) => {
|
||||
return (
|
||||
<div className={styles['streams-list-container']}>
|
||||
<div className={styles['scroll-container']}>
|
||||
{props.streams
|
||||
.map((stream) =>
|
||||
<Stream key={stream.id}
|
||||
className={styles['stream']}
|
||||
logo={stream.logo}
|
||||
sourceName={stream.sourceName}
|
||||
title={stream.title}
|
||||
subtitle={stream.subtitle}
|
||||
progress={stream.progress}
|
||||
/>
|
||||
)}
|
||||
<div className={styles['button']} onClick={props.onMoreAddonsClicked}>
|
||||
<Icon className={styles['button-icon']} icon={'ic_addons'} />
|
||||
<div className={styles['button-label']}>More Add-ons</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
StreamsList.propTypes = {
|
||||
streams: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
onMoreAddonsClicked: PropTypes.func
|
||||
};
|
||||
StreamsList.defaultProps = {
|
||||
streams: []
|
||||
};
|
||||
|
||||
export default StreamsList;
|
||||
3
src/routes/Detail/StreamsList/index.js
Normal file
3
src/routes/Detail/StreamsList/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import StreamsList from './StreamsList';
|
||||
|
||||
export default StreamsList;
|
||||
59
src/routes/Detail/StreamsList/styles.less
Normal file
59
src/routes/Detail/StreamsList/styles.less
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
.streams-list-container {
|
||||
--scroll-container-width: 392px;
|
||||
--stream-width: 360px;
|
||||
--spacing: 8px;
|
||||
--button-label-font-size: 18px;
|
||||
}
|
||||
|
||||
.streams-list-container {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-background);
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
width: var(--scroll-container-width);
|
||||
padding: 0 calc(2 * var(--spacing));
|
||||
margin: var(--spacing);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
>:not(:first-child) {
|
||||
margin-top: var(--spacing);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: var(--stream-width);
|
||||
height: calc(0.2 * var(--stream-width));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.button-icon {
|
||||
height: 44%;
|
||||
margin-right: var(--spacing);
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
|
||||
.button-label {
|
||||
font-size: var(--button-label-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: var(--spacing);
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-secondarylighter80);
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar-track {
|
||||
background-color: var(--color-backgroundlight);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
|
||||
import colors from 'stremio-colors';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const MAX_TITLE_SYMBOLS = 100;
|
||||
|
|
@ -12,23 +11,20 @@ const renderPoster = (poster) => {
|
|||
return null;
|
||||
}
|
||||
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent });
|
||||
const imageStyle = {
|
||||
backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={imageStyle} className={styles['poster']} />
|
||||
<div className={styles['poster-container']}>
|
||||
<img className={styles['poster']} src={poster} alt={''} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderTitle = (number, title) => {
|
||||
const renderTitle = (episode, title) => {
|
||||
if (title.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['title']}>{number}. {title.length > MAX_TITLE_SYMBOLS ? title.slice(0, MAX_TITLE_SYMBOLS) + '...' : title}</div>
|
||||
<div className={styles['title']}>{episode}. {title.length > MAX_TITLE_SYMBOLS ? title.slice(0, MAX_TITLE_SYMBOLS) + '...' : title}</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +91,7 @@ const Video = (props) => {
|
|||
<div className={styles['flex-row-container']}>
|
||||
{renderPoster(props.poster)}
|
||||
<div className={styles['info-container']}>
|
||||
{renderTitle(props.number, props.title)}
|
||||
{renderTitle(props.episode, props.title)}
|
||||
{renderReleasedDate(props.released)}
|
||||
{renderLabels(props.isUpcoming, props.isWatched)}
|
||||
</div>
|
||||
|
|
@ -111,7 +107,7 @@ const Video = (props) => {
|
|||
Video.propTypes = {
|
||||
className: PropTypes.string,
|
||||
poster: PropTypes.string.isRequired,
|
||||
number: PropTypes.number.isRequired,
|
||||
episode: PropTypes.number.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
released: PropTypes.instanceOf(Date).isRequired,
|
||||
isWatched: PropTypes.bool.isRequired,
|
||||
|
|
@ -121,7 +117,7 @@ Video.propTypes = {
|
|||
};
|
||||
Video.defaultProps = {
|
||||
poster: '',
|
||||
number: 0,
|
||||
episode: 0,
|
||||
title: '',
|
||||
released: new Date(''), //Invalid Date
|
||||
isWatched: false,
|
||||
116
src/routes/Detail/VideosList/Video/styles.less
Normal file
116
src/routes/Detail/VideosList/Video/styles.less
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
.video-container {
|
||||
--video-width: 360px;
|
||||
--spacing: 8px;
|
||||
--title-font-size: 12px;
|
||||
--released-date-font-size: 11px;
|
||||
--label-font-size: 10px;
|
||||
--label-border-width: 2px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: var(--video-width);
|
||||
background-color: var(--color-backgroundlight);
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.poster-container {
|
||||
flex: 1;
|
||||
margin: var(--spacing) 0 var(--spacing) var(--spacing);
|
||||
|
||||
.poster {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
|
||||
&[alt]:after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1391 1024\" width=\"undefined\" height=\"undefined\" fill=\"rgba(140,163,220,1)\"><path d=\"M501.459 632.471v-377.374c-0-0-0-0.001-0-0.001 0-22.516 18.167-40.788 40.643-40.959l0.016-0c7.294 0.019 14.141 1.915 20.089 5.228l-0.212-0.108 341.534 188.536c12.694 7.123 21.13 20.496 21.13 35.84s-8.437 28.717-20.924 35.734l-0.206 0.106-341.233 188.838c-5.741 3.22-12.599 5.116-19.9 5.116-15.251 0-28.57-8.275-35.712-20.58l-0.106-0.198c-3.172-5.843-5.060-12.784-5.12-20.16l-0-0.018z\" /><path d=\"M1141.459 1024h-897.807c-22.669-1.937-40.336-20.816-40.336-43.821s17.666-41.884 40.173-43.81l0.163-0.011h897.807c22.669 1.937 40.336 20.816 40.336 43.821s-17.666 41.884-40.173 43.81l-0.163 0.011z\" /><path d=\"M1275.181 887.868h-1159.529c-63.841-0.341-115.482-52.088-115.652-115.937l-0-0.016v-656.264c0-63.873 51.779-115.652 115.652-115.652v0h1159.529c63.873 0 115.652 51.779 115.652 115.652v0 656.264c-0.17 63.865-51.811 115.612-115.619 115.953l-0.032 0zM115.652 74.692c-22.622 0-40.96 18.338-40.96 40.96l-0-0v656.264c-0.001 0.089-0.001 0.195-0.001 0.301 0 22.622 18.338 40.96 40.96 40.96 0 0 0.001-0 0.001-0l1159.529 0c22.622 0 40.96-18.338 40.96-40.96v0 0-656.565c0-22.622-18.338-40.96-40.96-40.96v0h-1159.529z\" /></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
flex: 3;
|
||||
min-height: calc(0.2 * var(--video-width));
|
||||
padding: var(--spacing);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
font-size: var(--title-font-size);
|
||||
color: var(--color-surfacelighter);
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.released-date {
|
||||
font-size: var(--released-date-font-size);
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.label-container {
|
||||
display: flex;
|
||||
|
||||
.upcoming-label, .watched-label {
|
||||
font-size: var(--label-font-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
border-width: var(--label-border-width);
|
||||
border-style: solid;
|
||||
padding: 0 0.6em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.upcoming-label {
|
||||
margin-right: var(--spacing);
|
||||
border-color: var(--color-signal5);
|
||||
}
|
||||
|
||||
.watched-label {
|
||||
border-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
margin-bottom: calc(0.5 * var(--spacing));
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
width: calc(0.07 * var(--video-width));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing) var(--spacing) var(--spacing) 0;
|
||||
|
||||
.arrow {
|
||||
width: 100%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
height: calc(0.5 * var(--spacing));
|
||||
background-color: var(--color-primarydark);
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-surfacelighter20);
|
||||
}
|
||||
}
|
||||
83
src/routes/Detail/VideosList/VideosList.js
Normal file
83
src/routes/Detail/VideosList/VideosList.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import Video from './Video';
|
||||
import styles from './styles';
|
||||
|
||||
class VideosList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.seasons = this.props.videos.map((video) => video.season)
|
||||
.filter((season, index, seasons) => seasons.indexOf(season) === index);
|
||||
|
||||
this.state = {
|
||||
selectedSeason: this.seasons[0]
|
||||
}
|
||||
}
|
||||
|
||||
changeSeason = (event) => {
|
||||
this.setState({ selectedSeason: parseInt(event.target.value) });
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return nextState.selectedSeason !== this.state.selectedSeason;
|
||||
}
|
||||
|
||||
onPrevButtonClicked = () => {
|
||||
const prevSeasonIndex = Math.max(this.seasons.indexOf(this.state.selectedSeason) - 1, 0);
|
||||
this.setState({ selectedSeason: this.seasons[prevSeasonIndex] });
|
||||
}
|
||||
|
||||
onNextButtonClicked = () => {
|
||||
const nextSeasonIndex = Math.min(this.seasons.indexOf(this.state.selectedSeason) + 1, this.seasons.length - 1);
|
||||
this.setState({ selectedSeason: this.seasons[nextSeasonIndex] });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['videos-list-container']}>
|
||||
<div className={styles['seasons-bar']}>
|
||||
<div className={styles['button-container']} onClick={this.onPrevButtonClicked}>
|
||||
<Icon className={styles['button-icon']} icon={'ic_arrow_left'} />
|
||||
</div>
|
||||
<select value={this.state.selectedSeason} onChange={this.changeSeason}>
|
||||
{this.seasons.map((season) =>
|
||||
<option key={season} value={season}>
|
||||
{season}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
<div className={styles['button-container']} onClick={this.onNextButtonClicked} >
|
||||
<Icon className={styles['button-icon']} icon={'ic_arrow_left'} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['scroll-container']}>
|
||||
{this.props.videos
|
||||
.filter((video) => video.season === this.state.selectedSeason)
|
||||
.map((video) =>
|
||||
<Video key={video.id}
|
||||
className={styles['video']}
|
||||
poster={video.poster}
|
||||
episode={video.episode}
|
||||
title={video.name}
|
||||
released={video.released}
|
||||
isWatched={video.isWatched}
|
||||
isUpcoming={video.isUpcoming}
|
||||
progress={video.progress}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
VideosList.propTypes = {
|
||||
videos: PropTypes.arrayOf(PropTypes.object).isRequired
|
||||
};
|
||||
VideosList.defaultProps = {
|
||||
videos: []
|
||||
};
|
||||
|
||||
export default VideosList;
|
||||
3
src/routes/Detail/VideosList/index.js
Normal file
3
src/routes/Detail/VideosList/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import VideosList from './VideosList';
|
||||
|
||||
export default VideosList;
|
||||
62
src/routes/Detail/VideosList/styles.less
Normal file
62
src/routes/Detail/VideosList/styles.less
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.videos-list-container {
|
||||
--scroll-container-width: 392px;
|
||||
--seasons-bar-height: 50px;
|
||||
--spacing: 8px;
|
||||
}
|
||||
|
||||
.videos-list-container {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-background);
|
||||
|
||||
.seasons-bar {
|
||||
height: var(--seasons-bar-height);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
.button-container {
|
||||
width: calc(1.5 * var(--seasons-bar-height));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.button-icon {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surfacelighter20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
width: var(--scroll-container-width);
|
||||
padding: 0 calc(2 * var(--spacing));
|
||||
margin: 0 var(--spacing);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
>:not(:first-child) {
|
||||
margin-top: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: var(--spacing);
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-secondarylighter80);
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar-track {
|
||||
background-color: var(--color-backgroundlight);
|
||||
}
|
||||
}
|
||||
3
src/routes/Detail/index.js
Normal file
3
src/routes/Detail/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import Detail from './Detail';
|
||||
|
||||
export default Detail;
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// color: @colorwhite60;
|
||||
color: var(--color-surfacelighter60);
|
||||
|
||||
.side-menu {
|
||||
width: 240px;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
// background: @colordarkest;
|
||||
background: var(--color-backgrounddark);
|
||||
|
||||
.menu-option {
|
||||
padding: 14px;
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
&:hover, &.selected {
|
||||
cursor: pointer;
|
||||
// color: @colorwhite;
|
||||
// background: @colorglass;
|
||||
color: var(--color-surfacelighter);
|
||||
background: var(--color-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,14 +52,14 @@
|
|||
|
||||
&:hover {
|
||||
.preference {
|
||||
// color: @colorwhite;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
// border-bottom: 1px solid @colormedium;
|
||||
border-bottom: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import Calendar from './Calendar';
|
|||
import Search from './Search';
|
||||
import Settings from './Settings';
|
||||
import Player from './Player';
|
||||
import Detail from './Detail';
|
||||
|
||||
export {
|
||||
Addons,
|
||||
|
|
@ -17,5 +18,6 @@ export {
|
|||
Calendar,
|
||||
Search,
|
||||
Settings,
|
||||
Player
|
||||
Player,
|
||||
Detail
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';
|
||||
import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
|
||||
import Stream from '../src/routes/Detail/StreamsList/Stream';
|
||||
import Video from '../src/routes/Detail/VideosList/Video';
|
||||
import VideosList from '../src/routes/Detail/VideosList';
|
||||
import StreamsList from '../src/routes/Detail/StreamsList';
|
||||
import colors from 'stremio-colors';
|
||||
import appStyles from '../src/app/styles';
|
||||
import styles from './styles';
|
||||
|
||||
|
|
@ -10,6 +15,22 @@ const storyStyle = {
|
|||
minHeight: 'initial'
|
||||
};
|
||||
|
||||
const videosListStyle = {
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
padding: '10px',
|
||||
minHeight: 'initial',
|
||||
background: colors.backgroundlighter
|
||||
}
|
||||
|
||||
const streamsListStyle = {
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
padding: '10px',
|
||||
minHeight: 'initial',
|
||||
background: colors.backgroundlighter
|
||||
}
|
||||
|
||||
storiesOf('Addon', module)
|
||||
.add('not-installed', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
|
|
@ -242,7 +263,7 @@ storiesOf('Video', module)
|
|||
<Video
|
||||
className={styles['video']}
|
||||
poster={'https://www.stremio.com/website/home-stremio.png'}
|
||||
number={2}
|
||||
episode={2}
|
||||
title={'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
|
||||
released={new Date(2018, 4, 23)}
|
||||
isUpcoming={true}
|
||||
|
|
@ -256,7 +277,7 @@ storiesOf('Video', module)
|
|||
<Video
|
||||
className={styles['video']}
|
||||
poster={'https://www.stremio.com/website/home-stremio.png'}
|
||||
number={2}
|
||||
episode={2}
|
||||
title={'The Bing Bran Hypothesis'}
|
||||
isWatched={true}
|
||||
onVideoClicked={function() { alert(8) }}
|
||||
|
|
@ -267,7 +288,7 @@ storiesOf('Video', module)
|
|||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
number={4}
|
||||
episode={4}
|
||||
title={'The Luminous Fish Effect'}
|
||||
progress={50}
|
||||
/>
|
||||
|
|
@ -278,7 +299,7 @@ storiesOf('Video', module)
|
|||
<Video
|
||||
className={styles['video']}
|
||||
poster={'5'}
|
||||
number={5}
|
||||
episode={5}
|
||||
title={'The Dumpling Paradox'}
|
||||
progress={50}
|
||||
/>
|
||||
|
|
@ -288,10 +309,92 @@ storiesOf('Video', module)
|
|||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
number={8}
|
||||
episode={8}
|
||||
title={'The Loobendfeld Decay'}
|
||||
released={new Date(2018, 4, 23)}
|
||||
isUpcoming={true}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('VideosList', module)
|
||||
.add('list of videos', () => (
|
||||
<div style={videosListStyle} className={appStyles['app']}>
|
||||
<VideosList videos={[
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
|
||||
{ id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
|
||||
{ id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
|
||||
{ id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
|
||||
{ id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
|
||||
{ id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
|
||||
]}></VideosList>
|
||||
</div>
|
||||
));
|
||||
|
||||
storiesOf('StreamsList', module)
|
||||
.add('short list of streams', () => (
|
||||
<div style={streamsListStyle} className={appStyles['app']}>
|
||||
<StreamsList streams={[
|
||||
{ id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
|
||||
{ id: '2', logo: '', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 50 },
|
||||
{ id: '3', logo: '', sourceName: 'Juan Carlos 2', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
|
||||
{ id: '4', logo: 'ic_amazon', sourceName: 'Amazon', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: '', progress: 0 }
|
||||
]}></StreamsList>
|
||||
</div>
|
||||
))
|
||||
.add('long list of streams', () => (
|
||||
<div style={streamsListStyle} className={appStyles['app']}>
|
||||
<StreamsList streams={[
|
||||
{ id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
|
||||
{ id: '2', logo: '', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 50 },
|
||||
{ id: '3', logo: '', sourceName: 'Juan Carlos 2', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
|
||||
{ id: '4', logo: 'ic_amazon', sourceName: 'Amazon', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: '', progress: 0 },
|
||||
{ id: '5', logo: 'ic_amazon', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 0 },
|
||||
{ id: '6', logo: 'ic_netflix', sourceName: 'Netflix', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: 'HDTV', progress: 50 },
|
||||
{ id: '7', logo: '', sourceName: 'IBERIAN', title: '', subtitle: '', progress: 0 },
|
||||
{ id: '8', logo: 'ic_netflix', sourceName: 'Netflix', title: 'SD', subtitle: '', progress: 50 },
|
||||
{ id: '9', logo: 'ic_itunes', sourceName: 'Netflix', title: 'SD', subtitle: 'HDTV', progress: 50 },
|
||||
{ id: '10', logo: 'ic_amazon', sourceName: 'Amazon', title: '', subtitle: 'HDTV', progress: 0 }
|
||||
]}></StreamsList>
|
||||
</div>
|
||||
));
|
||||
|
|
@ -6857,9 +6857,9 @@ stremio-addon-linter@^1.2.1:
|
|||
dependencies:
|
||||
events "1.1.0"
|
||||
|
||||
"stremio-colors@git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.2":
|
||||
version "2.0.2"
|
||||
resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#d91ec32305eef62fbd5a1da6aba8ab52060f58a1"
|
||||
"stremio-colors@git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.3":
|
||||
version "2.0.3"
|
||||
resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#23d5fcec9049dc3e5a2b3da0dec637fda702c9c5"
|
||||
|
||||
"stremio-icons@git+ssh://git@github.com/Stremio/stremio-icons.git#v1.0.2":
|
||||
version "1.0.2"
|
||||
|
|
|
|||
Loading…
Reference in a new issue