diff --git a/src/common/LibraryItemGrid/LibraryItemGrid.js b/src/common/LibraryItemGrid/LibraryItemGrid.js deleted file mode 100644 index 3c170cbf5..000000000 --- a/src/common/LibraryItemGrid/LibraryItemGrid.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import Icon from 'stremio-icons/dom'; -import styles from './styles'; - -class LibraryItemGrid extends Component { - renderPlay() { - return ( -
- -
- ); - } - - render() { - return ( -
- {this.renderPlay()} -
- ); - } -} - -LibraryItemGrid.propTypes = { - poster: PropTypes.string.isRequired -}; -LibraryItemGrid.defaultProps = { - poster: '' -}; - -export default LibraryItemGrid; \ No newline at end of file diff --git a/src/common/LibraryItemGrid/index.js b/src/common/LibraryItemGrid/index.js deleted file mode 100644 index 4bd7c68bd..000000000 --- a/src/common/LibraryItemGrid/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import LibraryItemGrid from './LibraryItemGrid'; - -export default LibraryItemGrid; \ No newline at end of file diff --git a/src/common/LibraryItemGrid/styles.less b/src/common/LibraryItemGrid/styles.less deleted file mode 100644 index 59aa21e69..000000000 --- a/src/common/LibraryItemGrid/styles.less +++ /dev/null @@ -1,34 +0,0 @@ -@import 'stremio-colors'; -.library-item { - width: 150px; - height: 222px; - float: left; - margin: 8px; - display: flex; - background-size: cover; - background-position: center; - .play-container { - width: 70px; - height: 70px; - margin: auto; - display: flex; - .play { - width: 26px; - height: 26px; - margin: auto; - margin-left: 26px; - fill: @colortransparent; - } - } - &:hover, &:focus { - cursor: pointer; - outline: 2px solid @colorwhite; - .play-container { - border-radius: 50%; - background-color: @colorwhite; - .play { - fill: @colormedium; - } - } - } -} \ No newline at end of file diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js new file mode 100644 index 000000000..66307cf6b --- /dev/null +++ b/src/common/MetaItem/MetaItem.js @@ -0,0 +1,166 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom'; +import colors from 'stremio-colors'; +import { RELATIVE_POSTER_SIZE } from './constants'; +import styles from './styles'; + +class MetaItem extends PureComponent { + getShapeSize = () => { + switch (this.props.posterShape) { + case 'poster': + return { + containerHeight: 290, + width: RELATIVE_POSTER_SIZE, + height: RELATIVE_POSTER_SIZE * 1.464 + }; + case 'landscape': + if (this.props.progress) { + return { + containerHeight: 290, + width: RELATIVE_POSTER_SIZE / 0.5625, + height: RELATIVE_POSTER_SIZE * 1.464 + }; + } + return { + containerHeight: 210, + width: RELATIVE_POSTER_SIZE / 0.5625, + height: RELATIVE_POSTER_SIZE + }; + default: + if (this.props.progress) { + return { + containerHeight: 290, + width: RELATIVE_POSTER_SIZE * 1.464, + height: RELATIVE_POSTER_SIZE * 1.464 + }; + } + return { + containerHeight: 210, + width: RELATIVE_POSTER_SIZE, + height: RELATIVE_POSTER_SIZE + }; + } + } + + getPlaceholderIcon = () => { + switch (this.props.type) { + case 'tv': + return 'ic_tv'; + case 'series': + return 'ic_series'; + case 'channel': + return 'ic_channels'; + default: + return 'ic_movies'; + } + } + + renderPlay() { + return ( +
+ +
+ ); + } + + renderProgress() { + if (this.props.progress <= 0) { + return null; + } + + return ( +
+
+
+ ); + } + + renderEpisode() { + if (this.props.episode.length === 0) { + return null; + } + + return ( +
{this.props.episode}
+ ); + } + + renderTitle() { + if (this.props.title.length === 0) { + return null; + } + + return ( +
{this.props.title}
+ ); + } + + renderYear() { + if (this.props.year.length === 0) { + return null; + } + + return ( +
{this.props.year}
+ ); + } + + renderIcon() { + return ( + + ); + } + + render() { + const posterSize = this.getShapeSize(); + const contentContainerStyle = { + width: posterSize.width, + height: posterSize.containerHeight + }; + const placeholderIcon = this.getPlaceholderIcon(); + const placeholderIconUrl = iconDataUrl({ icon: placeholderIcon, fill: colors.accent, width: Math.round(RELATIVE_POSTER_SIZE / 2.2), height: Math.round(RELATIVE_POSTER_SIZE / 2.2) }); + const imageStyle = { + height: posterSize.height, + backgroundImage: `url(${this.props.poster}), url('${placeholderIconUrl}')` + }; + + return ( +
+
+ {this.renderPlay()} +
+ {this.renderProgress()} +
+
+ {this.renderEpisode()} + {this.renderTitle()} + {this.renderYear()} +
+ {this.renderIcon()} +
+
+ ); + } +} + +MetaItem.propTypes = { + type: PropTypes.oneOf(['movie', 'series', 'channel', 'tv', 'other']).isRequired, + poster: PropTypes.string.isRequired, + posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired, + progress: PropTypes.number.isRequired, + episode: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + year: PropTypes.string.isRequired +}; +MetaItem.defaultProps = { + type: 'other', + poster: '', + posterShape: 'poster', + progress: 0, + episode: '', + title: '', + year: '' +}; + +export default MetaItem; \ No newline at end of file diff --git a/src/common/MetaItem/constants.json b/src/common/MetaItem/constants.json new file mode 100644 index 000000000..b477ccb3d --- /dev/null +++ b/src/common/MetaItem/constants.json @@ -0,0 +1,3 @@ +{ + "RELATIVE_POSTER_SIZE": 138 +} \ No newline at end of file diff --git a/src/common/MetaItem/index.js b/src/common/MetaItem/index.js new file mode 100644 index 000000000..9952a4119 --- /dev/null +++ b/src/common/MetaItem/index.js @@ -0,0 +1,3 @@ +import MetaItem from './MetaItem'; + +export default MetaItem; \ No newline at end of file diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less new file mode 100644 index 000000000..26abb69ce --- /dev/null +++ b/src/common/MetaItem/styles.less @@ -0,0 +1,77 @@ +@import 'stremio-colors'; +.meta-item { + margin: 4px; + float: left; + color: @colorwhite; + font-family: LatoLight; + .poster { + display: flex; + background-position: center; + background-size: cover, auto; + background-repeat: no-repeat; + background-color: @colordarkest; + .play-container { + width: 70px; + height: 70px; + margin: auto; + display: flex; + visibility: hidden; + border-radius: 50%; + background-color: @colorwhite; + .play { + width: 26px; + height: 26px; + margin: auto; + margin-left: 26px; + fill: @colormedium; + } + } + } + .progress-container { + background-color: @colorneutral; + .progress { + height: 4px; + background-color: @colorprimlight; + } + } + .info-container { + display: flex; + margin-top: 6px; + align-items: baseline; + .info { + width: 100%; + .title, .year{ + color: @colorwhite60; + } + :first-child { + color: @colorwhite; + } + } + } + .more-icon { + width: 10px; + height: 10px; + cursor: pointer; + fill: @colorwhite; + } + &:hover { + cursor: pointer; + color: @colorblack; + background-color: @colorwhite; + outline: 2px solid @colorwhite; + .play-container { + visibility: visible; + } + .info { + .title, .year { + color: @colorblack60; + } + :first-child { + color: @colorblack; + } + } + .more-icon { + fill: @colorblack40; + } + } +} \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index 71d7c4b59..60381c022 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -7,7 +7,7 @@ import Router from './Router'; import Stream from './Stream'; import Video from './Video'; import LibraryItemList from './LibraryItemList'; -import LibraryItemGrid from './LibraryItemGrid'; +import MetaItem from './MetaItem'; import Addon from './Addon'; import ShareAddon from './ShareAddon'; import UserPanel from './UserPanel'; @@ -22,7 +22,7 @@ export { Stream, Video, LibraryItemList, - LibraryItemGrid, + MetaItem, Addon, ShareAddon, UserPanel, diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 903d67d85..4b23257a3 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -4,7 +4,7 @@ import { addons } from 'stremio-services'; import { Stream } from 'stremio-common'; import { Video } from 'stremio-common'; import { LibraryItemList } from 'stremio-common'; -import { LibraryItemGrid } from 'stremio-common'; +import { MetaItem } from 'stremio-common'; import { Addon } from 'stremio-common'; import { ShareAddon } from 'stremio-common'; import { UserPanel } from 'stremio-common';