mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-16 09:16:29 +00:00
drop not used common components
This commit is contained in:
NikolaBorislavovHristov
parent
b0267f4ed1
commit
4db8fabe3d
8 changed files with 0 additions and 389 deletions
|
|
@ -1,117 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const renderPoster = (play, poster) => {
|
||||
if (poster.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['poster']} style={{ backgroundImage: 'url(' + poster + ')' }}>
|
||||
<div onClick={play} className={styles['play-container']}>
|
||||
<Icon className={styles['play']} icon={'ic_play'} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderTitle = (title) => {
|
||||
if (title.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['title']}>{title}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const renderType = (type) => {
|
||||
if (type.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['type']}>{type}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const renderReleasedInfo = (releaseInfo) => {
|
||||
if (isNaN(releaseInfo.getTime())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['year']}>{releaseInfo.getFullYear()}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const renderReleasedDate = (released) => {
|
||||
if (isNaN(released.getTime())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['date-added']}>{released.getDate() + '.' + released.getMonth() + '.' + released.getFullYear()}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const renderLastViewed = (lastViewed) => {
|
||||
if (isNaN(lastViewed.getTime())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['last-viewed']}>{lastViewed.getDate() + '.' + lastViewed.getMonth() + '.' + lastViewed.getFullYear()}</span>
|
||||
);
|
||||
}
|
||||
|
||||
const LibraryItemList = (props) => {
|
||||
return (
|
||||
<div className={styles['library-item']}>
|
||||
{renderPoster(props.play, props.poster)}
|
||||
{renderTitle(props.title)}
|
||||
{renderType(props.type)}
|
||||
{renderReleasedInfo(props.releaseInfo)}
|
||||
{renderReleasedDate(props.released)}
|
||||
<span className={styles['views']}>{props.views}</span>
|
||||
<span className={styles['hours']}>{props.hours}</span>
|
||||
{renderLastViewed(props.lastViewed)}
|
||||
<div onClick={props.watchTrailer} className={styles['icon-container']}>
|
||||
<Icon className={styles['trailer-icon']} icon={'ic_movies'} />
|
||||
<div className={styles['trailer']}>Trailer</div>
|
||||
</div>
|
||||
<div onClick={props.addToLibrary} className={styles['icon-container']}>
|
||||
<Icon className={styles['addlib-icon']} icon={'ic_addlib'} />
|
||||
<div className={styles['addlib']}>Add to Library</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
LibraryItemList.propTypes = {
|
||||
poster: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
releaseInfo: PropTypes.instanceOf(Date).isRequired,
|
||||
released: PropTypes.instanceOf(Date).isRequired,
|
||||
views: PropTypes.number.isRequired,
|
||||
hours: PropTypes.number.isRequired,
|
||||
lastViewed: PropTypes.instanceOf(Date).isRequired,
|
||||
play: PropTypes.func,
|
||||
watchTrailer: PropTypes.func,
|
||||
addToLibrary: PropTypes.func
|
||||
};
|
||||
LibraryItemList.defaultProps = {
|
||||
poster: '',
|
||||
title: '',
|
||||
type: '',
|
||||
releaseInfo: new Date(''),
|
||||
released: new Date(''), //Invalid Date
|
||||
views: 0,
|
||||
hours: 0,
|
||||
lastViewed: new Date('')
|
||||
};
|
||||
|
||||
export default LibraryItemList;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import LibraryItemList from './LibraryItemList';
|
||||
|
||||
export default LibraryItemList;
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
.library-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
align-items: center;
|
||||
color: var(--color-surfacelighter60);
|
||||
border-top: 1px solid var(--color-surfacelighter20);
|
||||
.poster {
|
||||
width: 75px;
|
||||
display: flex;
|
||||
height: 110px;
|
||||
margin-right: 20px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.play-container {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
padding: 16px 19px;
|
||||
.play {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 170px;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
.type, .year, .views, .hours {
|
||||
width: 100px;
|
||||
}
|
||||
.date-added, .last-viewed {
|
||||
width: 130px;
|
||||
}
|
||||
.icon-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
fill: var(--color-primarydark);
|
||||
color: var(--color-primarydark);
|
||||
padding-top: 24px;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
.trailer-icon {
|
||||
width: 22px;
|
||||
}
|
||||
.addlib-icon {
|
||||
width: 34px;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: var(--color-backgrounddarker);
|
||||
background-color: var(--color-surfacelighter);
|
||||
.play-container {
|
||||
background-color: var(--color-surfacelighter);
|
||||
.play {
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
.icon-container {
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-backgrounddarker20);
|
||||
.trailer-icon, .addlib-icon, .trailer, .addlib {
|
||||
fill: var(--color-primarydarker);
|
||||
color: var(--color-primarydarker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
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 MetadataItem extends PureComponent {
|
||||
getPosterSize = () => {
|
||||
switch (this.props.posterShape) {
|
||||
case 'poster':
|
||||
return {
|
||||
width: RELATIVE_POSTER_SIZE,
|
||||
height: RELATIVE_POSTER_SIZE * 1.464
|
||||
};
|
||||
case 'landscape':
|
||||
return {
|
||||
width: RELATIVE_POSTER_SIZE / 0.5625,
|
||||
height: RELATIVE_POSTER_SIZE
|
||||
};
|
||||
default:
|
||||
return {
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
renderInCinemaLabel() {
|
||||
if (!this.props.isInCinema) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['in-cinema-container']}>
|
||||
<Icon className={styles['in-cinema-icon']} icon={'ic_star'} />
|
||||
<span className={styles['in-cinema-label']}>IN CINEMA</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderName() {
|
||||
if (this.props.name.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['name']}>{this.props.name}</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderYear() {
|
||||
if (this.props.year.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={styles['year']}>{this.props.year}</span>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const posterSize = this.getPosterSize();
|
||||
const contentContainerStyle = {
|
||||
width: posterSize.width
|
||||
};
|
||||
const placeholderIcon = this.getPlaceholderIcon();
|
||||
const placeholderIconUrl = iconDataUrl({ icon: placeholderIcon, fill: colors.accent, width: Math.round(RELATIVE_POSTER_SIZE / 2.2) });
|
||||
const imageStyle = {
|
||||
height: posterSize.height,
|
||||
backgroundImage: `url(${this.props.posterUrl}), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles['root-container']}>
|
||||
<div style={contentContainerStyle} className={styles['content-container']}>
|
||||
<div style={imageStyle} className={styles['poster']}>
|
||||
{this.renderInCinemaLabel()}
|
||||
</div>
|
||||
{this.renderName()}
|
||||
{this.renderYear()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MetadataItem.propTypes = {
|
||||
type: PropTypes.oneOf(['movie', 'series', 'channel', 'tv', 'other']).isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
posterUrl: PropTypes.string.isRequired,
|
||||
posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired,
|
||||
isInCinema: PropTypes.bool.isRequired,
|
||||
year: PropTypes.string.isRequired
|
||||
};
|
||||
MetadataItem.defaultProps = {
|
||||
type: 'other',
|
||||
name: '',
|
||||
posterUrl: '',
|
||||
posterShape: 'poster',
|
||||
isInCinema: false,
|
||||
year: ''
|
||||
};
|
||||
|
||||
export default MetadataItem;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"RELATIVE_POSTER_SIZE": 138
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import MetadataItem from './MetadataItem';
|
||||
|
||||
export default MetadataItem;
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
|
||||
.root-container {
|
||||
padding: 1px;
|
||||
display: inline-block;
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
.poster {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
background-size: cover, auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-origin: border-box;
|
||||
background-color: var(--color-backgrounddark);
|
||||
.in-cinema-container {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-primary);
|
||||
.in-cinema-icon {
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
fill: var(--color-surfacelighter);
|
||||
margin-right: 6px;
|
||||
}
|
||||
.in-cinema-label {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
.name, .year {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.name {
|
||||
font-size: 12px;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
.year {
|
||||
font-size: 11px;
|
||||
color: var(--color-surfacelighter80);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-surfacelighter);
|
||||
.name {
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
.year {
|
||||
color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,8 +7,6 @@ import { Modal, ModalsContainerContext, withModalsContainer } from './Modal';
|
|||
import Popup from './Popup';
|
||||
import Router from './Router';
|
||||
import NavBar from './NavBar';
|
||||
import MetadataItem from './MetadataItem';
|
||||
import LibraryItemList from './LibraryItemList';
|
||||
import MetaItem from './MetaItem';
|
||||
import ShareAddon from './ShareAddon';
|
||||
import UserPanel from './UserPanel';
|
||||
|
|
@ -21,9 +19,7 @@ export {
|
|||
ModalsContainerContext,
|
||||
Modal,
|
||||
withModalsContainer,
|
||||
MetadataItem,
|
||||
Router,
|
||||
LibraryItemList,
|
||||
MetaItem,
|
||||
ShareAddon,
|
||||
UserPanel,
|
||||
|
|
|
|||
Loading…
Reference in a new issue