From f126f8d789fa708f6fd4be795d1268bfa08740de Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Fri, 11 Jan 2019 17:23:33 +0200 Subject: [PATCH] addons screen implemented --- src/routes/Addons/Addons.js | 139 +++++++++++++++++++++++++++++++++- src/routes/Addons/styles.less | 106 ++++++++++++++++++++++++++ 2 files changed, 244 insertions(+), 1 deletion(-) create mode 100644 src/routes/Addons/styles.less diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index b876cb41b..cc53570e1 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -1,11 +1,148 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import Addon from './Addon'; +import styles from './styles'; + +const ADDON_CATEGORIES = { + OFFICIAL: 1, + COMMUNITY: 2, + MY: 3 +}; + +const ADDON_TYPES = { + All: -1, + Movies: 0, + Series: 1, + Channels: 2, + Others: 3 +}; + +const DEFAULT_TYPE = 'All'; class Addons extends Component { + constructor(props) { + super(props); + + this.state = { + selectedCategory: ADDON_CATEGORIES.OFFICIAL, + selectedAddonType: DEFAULT_TYPE + }; + } + + changeSelectedCategory = (event) => { + this.setState({ selectedCategory: ADDON_CATEGORIES[event.currentTarget.dataset.category] }); + } + + changeSelectedAddonType = (event) => { + this.setState({ selectedAddonType: event.currentTarget.dataset.type }) + } + + shouldComponentUpdate(nextProps, nextState) { + return nextState.selectedCategory !== this.state.selectedCategory || + nextState.selectedAddonType !== this.state.selectedAddonType; + } + + componentDidUpdate(prevProps, prevState) { + if (this.state.selectedCategory !== prevState.selectedCategory || !this.getAddonTypes().includes(this.state.selectedAddonType)) { + this.setState({ selectedAddonType: DEFAULT_TYPE }) + } + } + + getAddonTypes() { + const addonTypes = this.props.addons + .filter((addon) => { + if (this.state.selectedCategory === ADDON_CATEGORIES.OFFICIAL) return addon.isOfficial === true; + if (this.state.selectedCategory === ADDON_CATEGORIES.COMMUNITY) return addon.isOfficial === false; + if (this.state.selectedCategory === ADDON_CATEGORIES.MY) return addon.isInstalled === true; + }) + .map((addon) => addon.types) + .join() + .split(',') + .filter((type, index, types) => types.indexOf(type) === index) + .sort(function(a, b) { + const valueA = ADDON_TYPES[a]; + const valueB = ADDON_TYPES[b]; + if (!isNaN(valueA) && !isNaN(valueB)) return valueA - valueB; + if (!isNaN(valueA)) return -1; + if (!isNaN(valueB)) return 1; + return a - b; + }); + + return addonTypes; + } + render() { return ( -
You're on the Addons Tab
+
+
+ {Object.keys(ADDON_CATEGORIES).map((category) => +
+
+ {category} +
+
+ )} +
+
All
+
+ {this.getAddonTypes().map((type) => +
+
{type}
+
+ )} +
+
+ {this.props.addons + .filter((addon) => { + if (this.state.selectedCategory === ADDON_CATEGORIES.OFFICIAL) return addon.isOfficial === true; + if (this.state.selectedCategory === ADDON_CATEGORIES.COMMUNITY) return addon.isOfficial === false; + if (this.state.selectedCategory === ADDON_CATEGORIES.MY) return addon.isInstalled === true; + }) + .filter((addon) => { + return this.state.selectedAddonType === DEFAULT_TYPE || + addon.types.indexOf(this.state.selectedAddonType) !== -1; + }) + .map((addon) => + + )} +
+
); } } +Addons.propTypes = { + addons: PropTypes.arrayOf(PropTypes.object).isRequired +}; +Addons.defaultProps = { + addons: [ + { logo: 'ic_series', name: 'Watch Hub', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['ovies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' }, + { name: 'Cinemeta', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Moies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { logo: 'ic_youtube_small', name: 'YouTube', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { name: 'OpenSubtitles', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Movie', 'Seies'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { logo: 'ic_series', name: 'Zooqle', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' }, + { name: 'PirateBay Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'eries'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { logo: 'ic_youtube_small', name: 'Popcorn Time', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { name: 'IBERIAN', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Other'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { logo: 'ic_series', name: 'Ex Addon', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' }, + { name: 'Juan Carlos', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Seris', 'Channels'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { logo: 'ic_youtube_small', name: 'Juan Carlos Torrents', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Channels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { name: 'Juan Carlos 2', version: '1.3.0', isOfficial: false, isInstalled: false, types: ['Moes', 'Serie'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { logo: 'ic_series', name: 'Netflix', version: '1.3.0', isOfficial: true, isInstalled: false, types: ['Movies', 'Series'], description: 'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.' }, + { name: 'Anime Addon', version: '2.4.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { logo: 'ic_youtube_small', name: 'DTube', version: '1.3.0', isOfficial: true, isInstalled: true, types: ['hannels', 'Videos'], description: 'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.' }, + { name: 'Mixer', version: '1.3.0', isOfficial: false, isInstalled: true, types: ['Movies', 'Series'], description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.' } + ] +}; + export default Addons; diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less new file mode 100644 index 000000000..a6b780f59 --- /dev/null +++ b/src/routes/Addons/styles.less @@ -0,0 +1,106 @@ +.addons-container { + --addon-width: 960px; + --label-width: 196px; + --spacing: 8px; + --button-border-width: 2px; + font-size: 14px; +} + +.addons-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + + .side-menu { + width: calc(var(--addon-width) * 0.25); + display: flex; + flex-direction: column; + padding: 0 calc(var(--spacing) * 2.5 + var(--button-border-width)); + margin: calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 4.5) calc(var(--spacing) * 2.5 + var(--button-border-width)) 0; + overflow-y: auto; + overflow-x: hidden; + + .label-container { + width: var(--label-width); + cursor: pointer; + margin-top: var(--button-border-width); + padding: calc(var(--spacing) * 1.5); + font-size: 1.2em; + color: var(--color-surfacelight); + + .label { + overflow: hidden; + white-space: pre; + text-overflow: ellipsis; + } + + &.selected { + color: var(--color-surfacelighter); + background: var(--color-primarydark); + + &:hover { + background: var(--color-primarydark); + } + + &:focus { + outline: none; + } + } + + &:hover { + color: var(--color-surfacelighter); + background: var(--color-backgroundlighter); + } + + &:focus { + outline: var(--button-border-width) solid var(--color-surfacelighter); + + } + + &:nth-child(3) { + margin-bottom: calc(var(--spacing) * 2.5 + var(--button-border-width)); + } + + &:last-child { + margin-bottom: var(--button-border-width); + } + } + } + + .side-menu::-webkit-scrollbar { + width: var(--spacing) !important; + } + + .side-menu::-webkit-scrollbar-thumb { + background-color: var(--color-secondarylighter); + } + + .side-menu::-webkit-scrollbar-track { + background-color: var(--color-backgroundlighter); + } + + .scroll-container { + flex: 1; + align-self: stretch; + margin: calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) calc(var(--spacing) * 2.5 + var(--button-border-width)) 0; + overflow-y: auto; + overflow-x: hidden; + + >:not(:first-child) { + margin-top: calc(var(--spacing) * 2.5 + var(--button-border-width)); + } + } + + .scroll-container::-webkit-scrollbar { + width: var(--spacing) !important; + } + + .scroll-container::-webkit-scrollbar-thumb { + background-color: var(--color-secondarylighter); + } + + .scroll-container::-webkit-scrollbar-track { + background-color: var(--color-backgroundlighter); + } +} \ No newline at end of file