diff --git a/package.json b/package.json index a1c8f1c5d..3f2dbde6e 100755 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/common/Addon/Addon.js b/src/common/Addon/Addon.js index 61b492053..51be92291 100644 --- a/src/common/Addon/Addon.js +++ b/src/common/Addon/Addon.js @@ -80,11 +80,11 @@ const Addon = (props) => { {renderDescription(props.description)} {renderUrls(props.urls)}
-
+
SHARE ADD-ON
-
+
{props.isInstalled ? 'Install' : 'Uninstall'}
diff --git a/src/common/Addon/styles.less b/src/common/Addon/styles.less index 6e0104e6a..c87733d00 100644 --- a/src/common/Addon/styles.less +++ b/src/common/Addon/styles.less @@ -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); } } diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less index 628d705e5..ddd98d566 100644 --- a/src/common/Checkbox/styles.less +++ b/src/common/Checkbox/styles.less @@ -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); } } \ No newline at end of file diff --git a/src/common/LibraryItemList/styles.less b/src/common/LibraryItemList/styles.less index 25454eeee..1e4ab0804 100644 --- a/src/common/LibraryItemList/styles.less +++ b/src/common/LibraryItemList/styles.less @@ -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); } } } diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less index 906c4b261..fa53551c5 100644 --- a/src/common/MetaItem/styles.less +++ b/src/common/MetaItem/styles.less @@ -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); } } } diff --git a/src/common/MetadataItem/styles.less b/src/common/MetadataItem/styles.less index be384fecf..2342c3a76 100644 --- a/src/common/MetadataItem/styles.less +++ b/src/common/MetadataItem/styles.less @@ -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); } } } \ No newline at end of file diff --git a/src/common/NavBar/NavTab/styles.less b/src/common/NavBar/NavTab/styles.less index a7a652035..e0b70cee0 100644 --- a/src/common/NavBar/NavTab/styles.less +++ b/src/common/NavBar/NavTab/styles.less @@ -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); } } } \ No newline at end of file diff --git a/src/common/NavBar/SearchInput/styles.less b/src/common/NavBar/SearchInput/styles.less index 62976693e..52f49ef8b 100644 --- a/src/common/NavBar/SearchInput/styles.less +++ b/src/common/NavBar/SearchInput/styles.less @@ -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); } } } diff --git a/src/common/NavBar/UserMenu/styles.less b/src/common/NavBar/UserMenu/styles.less index 86c5d225c..db9a24054 100644 --- a/src/common/NavBar/UserMenu/styles.less +++ b/src/common/NavBar/UserMenu/styles.less @@ -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); } } } \ No newline at end of file diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less index 084c09fa8..95410f41b 100644 --- a/src/common/NavBar/styles.less +++ b/src/common/NavBar/styles.less @@ -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; diff --git a/src/common/ShareAddon/ShareAddon.js b/src/common/ShareAddon/ShareAddon.js index 68766f7ae..889c1d8b5 100644 --- a/src/common/ShareAddon/ShareAddon.js +++ b/src/common/ShareAddon/ShareAddon.js @@ -12,18 +12,16 @@ const renderUrl = (copyToClipboard, url) => { return (
- +
Copy - +
); } 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) => {
- Share Add-on +
Share Add-on
FACEBOOK diff --git a/src/common/ShareAddon/styles.less b/src/common/ShareAddon/styles.less index 688075825..ae15605b6 100644 --- a/src/common/ShareAddon/styles.less +++ b/src/common/ShareAddon/styles.less @@ -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); } } } diff --git a/src/common/Stream/styles.less b/src/common/Stream/styles.less deleted file mode 100644 index bd8ac68d7..000000000 --- a/src/common/Stream/styles.less +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/common/UserPanel/styles.less b/src/common/UserPanel/styles.less index 2dcaac451..463c79bfe 100644 --- a/src/common/UserPanel/styles.less +++ b/src/common/UserPanel/styles.less @@ -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); } } \ No newline at end of file diff --git a/src/common/Video/styles.less b/src/common/Video/styles.less deleted file mode 100644 index b6092c8d8..000000000 --- a/src/common/Video/styles.less +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index 088e91c77..0853dc433 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -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, diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js new file mode 100644 index 000000000..ff647ded3 --- /dev/null +++ b/src/routes/Detail/Detail.js @@ -0,0 +1,9 @@ +import React, { Component } from 'react'; + +class Detail extends Component { + render() { + return null; + } +} + +export default Detail; diff --git a/src/common/Stream/Stream.js b/src/routes/Detail/StreamsList/Stream/Stream.js similarity index 100% rename from src/common/Stream/Stream.js rename to src/routes/Detail/StreamsList/Stream/Stream.js diff --git a/src/common/Stream/index.js b/src/routes/Detail/StreamsList/Stream/index.js similarity index 100% rename from src/common/Stream/index.js rename to src/routes/Detail/StreamsList/Stream/index.js diff --git a/src/routes/Detail/StreamsList/Stream/styles.less b/src/routes/Detail/StreamsList/Stream/styles.less new file mode 100644 index 000000000..31ee039d8 --- /dev/null +++ b/src/routes/Detail/StreamsList/Stream/styles.less @@ -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); + } +} \ No newline at end of file diff --git a/src/routes/Detail/StreamsList/StreamsList.js b/src/routes/Detail/StreamsList/StreamsList.js new file mode 100644 index 000000000..c590e09c9 --- /dev/null +++ b/src/routes/Detail/StreamsList/StreamsList.js @@ -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 ( +
+
+ {props.streams + .map((stream) => + + )} +
+ +
More Add-ons
+
+
+
+ ); +} + +StreamsList.propTypes = { + streams: PropTypes.arrayOf(PropTypes.object).isRequired, + onMoreAddonsClicked: PropTypes.func +}; +StreamsList.defaultProps = { + streams: [] +}; + +export default StreamsList; diff --git a/src/routes/Detail/StreamsList/index.js b/src/routes/Detail/StreamsList/index.js new file mode 100644 index 000000000..0c7fdb10c --- /dev/null +++ b/src/routes/Detail/StreamsList/index.js @@ -0,0 +1,3 @@ +import StreamsList from './StreamsList'; + +export default StreamsList; diff --git a/src/routes/Detail/StreamsList/styles.less b/src/routes/Detail/StreamsList/styles.less new file mode 100644 index 000000000..afc323479 --- /dev/null +++ b/src/routes/Detail/StreamsList/styles.less @@ -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); + } +} \ No newline at end of file diff --git a/src/common/Video/Video.js b/src/routes/Detail/VideosList/Video/Video.js similarity index 81% rename from src/common/Video/Video.js rename to src/routes/Detail/VideosList/Video/Video.js index 1964a9b93..e516fbf31 100644 --- a/src/common/Video/Video.js +++ b/src/routes/Detail/VideosList/Video/Video.js @@ -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 ( -
+
+ {''} +
); } -const renderTitle = (number, title) => { +const renderTitle = (episode, title) => { if (title.length === 0) { return null; } return ( -
{number}. {title.length > MAX_TITLE_SYMBOLS ? title.slice(0, MAX_TITLE_SYMBOLS) + '...' : title}
+
{episode}. {title.length > MAX_TITLE_SYMBOLS ? title.slice(0, MAX_TITLE_SYMBOLS) + '...' : title}
); } @@ -95,7 +91,7 @@ const Video = (props) => {
{renderPoster(props.poster)}
- {renderTitle(props.number, props.title)} + {renderTitle(props.episode, props.title)} {renderReleasedDate(props.released)} {renderLabels(props.isUpcoming, props.isWatched)}
@@ -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, diff --git a/src/common/Video/index.js b/src/routes/Detail/VideosList/Video/index.js similarity index 100% rename from src/common/Video/index.js rename to src/routes/Detail/VideosList/Video/index.js diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less new file mode 100644 index 000000000..1c4b6719a --- /dev/null +++ b/src/routes/Detail/VideosList/Video/styles.less @@ -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,"); + 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); + } +} \ No newline at end of file diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js new file mode 100644 index 000000000..3cc1be171 --- /dev/null +++ b/src/routes/Detail/VideosList/VideosList.js @@ -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 ( +
+
+
+ +
+ +
+ +
+
+
+ {this.props.videos + .filter((video) => video.season === this.state.selectedSeason) + .map((video) => +
+
+ ); + } +} + +VideosList.propTypes = { + videos: PropTypes.arrayOf(PropTypes.object).isRequired +}; +VideosList.defaultProps = { + videos: [] +}; + +export default VideosList; diff --git a/src/routes/Detail/VideosList/index.js b/src/routes/Detail/VideosList/index.js new file mode 100644 index 000000000..bea9d6457 --- /dev/null +++ b/src/routes/Detail/VideosList/index.js @@ -0,0 +1,3 @@ +import VideosList from './VideosList'; + +export default VideosList; diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less new file mode 100644 index 000000000..41f242d3b --- /dev/null +++ b/src/routes/Detail/VideosList/styles.less @@ -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); + } +} \ No newline at end of file diff --git a/src/routes/Detail/index.js b/src/routes/Detail/index.js new file mode 100644 index 000000000..ccf95e690 --- /dev/null +++ b/src/routes/Detail/index.js @@ -0,0 +1,3 @@ +import Detail from './Detail'; + +export default Detail; diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index a9c8601fb..ddbcf29b4 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -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); } } } diff --git a/src/routes/index.js b/src/routes/index.js index b54b42c8b..f931b9c08 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -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 }; diff --git a/stories/index.stories.js b/stories/index.stories.js index 8d26e8fbe..996e11312 100644 --- a/stories/index.stories.js +++ b/stories/index.stories.js @@ -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', () => (
@@ -242,7 +263,7 @@ storiesOf('Video', module)