Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Links extracted in a separete component

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-29 16:47:33 +03:00
parent c9ec249ca3
commit 3ebbead33d
2 changed files with 89 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
src/common/MetaPreview/MetaPreview.js
View file

@ -4,21 +4,54 @@ const Icon = require('stremio-icons/dom');
const { Input } = require('stremio-navigation');
const styles = require('./styles');
const MetaPreview = ({ className, compact, id, type, name, logo = '', background = '', duration = '', releaseInfo = '', released, description, genres = [], writers = [], directors = [], cast = [], imdbId = '', imdbRating = '', inLibrary = false, trailer = '', share = '', toggleLibraryOnClick }) => {
const MetaLinks = ({ label, links, href }) => (
<React.Fragment>
<div className={styles['links-label']}>{label}</div>
<div className={styles['links-container']}>
{links.map((link, index) => (
<Input key={`${link}-${index}`} className={styles['link']} title={link} type={'link'} tabIndex={-1} href={href(link)}>
{link}
{index < links.length - 1 ? ',' : null}
</Input>
))}
</div>
</React.Fragment>
);
const MetaPreview = ({ className, compact, id, type, name, logo = '', background = '', duration = '', releaseInfo = '', released = '', description = '', genres = [], writers = [], directors = [], cast = [], imdbId = '', imdbRating = '', inLibrary = false, trailer = '', share = '', toggleLibraryOnClick }) => {
const releaseInfoText = React.useMemo(() => {
const releasedDate = new Date(released);
return releaseInfo.length > 0 ?
releaseInfo
:
!isNaN(releasedDate.getFullYear()) ?
releasedDate.getFullYear()
:
'';
}, [releaseInfo, released]);
const logoOnError = React.useCallback((event) => {
event.currentTarget.style.display = 'none';
}, []);
const releaseInfoText = releaseInfo.length > 0 ?
releaseInfo
:
released instanceof Date && !isNaN(released.getFullYear()) ?
released.getFullYear()
:
'';
const hrefForGenre = React.useCallback((genre) => {
return `#/discover/${type}//${genre}`;
}, [type]);
const hrefForCrew = React.useCallback((name) => {
return `#/search?q=${name}`;
}, []);
return (
<div className={classnames(className, styles['meta-preview-container'], { [styles['compact']]: compact })} style={{ backgroundImage: `url(${background})` }}>
<div className={styles['meta-preview-content']}>
<img className={styles['logo']} src={logo} onError={logoOnError} />
{
logo.length > 0 ?
<img
key={logo}
className={styles['logo']}
src={logo}
onError={logoOnError}
/>
:
null
}
{
releaseInfoText.length > 0 || duration.length > 0 ?
<div className={styles['duration-release-info-container']}>
@ -41,7 +74,7 @@ const MetaPreview = ({ className, compact, id, type, name, logo = '', background
{
name.length > 0 ?
<div className={styles['name-container']}>
<div className={styles['name']} title={name}>{name}</div>
<div className={styles['name']}>{name}</div>
</div>
:
null
@ -56,45 +89,30 @@ const MetaPreview = ({ className, compact, id, type, name, logo = '', background
}
{
genres.length > 0 ?
<div className={styles['links-container']}>
<div className={styles['title']}>Genres:</div>
{genres.map((genre) => (
<Input key={genre} className={styles['link']} tabIndex={-1} type={'link'} href={`#/discover/${type}//${genre}`}>
{genre}
</Input>
))}
</div>
<MetaLinks label={'Genres:'} links={genres} href={hrefForGenre} />
:
null
}
{
cast.length > 0 ?
<MetaLinks label={'Cast:'} links={cast} href={hrefForCrew} />
:
null
}
{
writers.length > 0 && !compact ?
<MetaLinks label={'Writers:'} links={writers} href={hrefForCrew} />
:
null
}
{
directors.length > 0 && !compact ?
<MetaLinks label={'Directors:'} links={directors} href={hrefForCrew} />
:
null
}
</div>
{/*
{
writers.length > 0 ?
<div className={styles['links-container']}>
<div className={styles['title']}>Writers</div>
{writers.map((writer) => (
<Input key={writer} className={styles['link']} type={'link'} href={`#/search?q=${writer}`}>
{writer}
</Input>
))}
</div>
:
null
}
{
cast.length > 0 ?
<div className={styles['links-container']}>
<div className={styles['title']}>Cast</div>
{cast.map((actor) => (
<Input key={actor} className={styles['link']} type={'link'} href={`#/search?q=${actor}`}>
{actor}
</Input>
))}
</div>
:
null
}
<div className={styles['action-buttons-container']}>
{
trailer.length > 0 ?

52
src/common/MetaPreview/styles.less
View file

@ -4,15 +4,15 @@
background-repeat: no-repeat;
background-position: center;
background-origin: border-box;
color: var(--color-surfacelighter);
&.compact {
.meta-preview-content {
overflow-x: hidden;
overflow-y: auto;
.logo {
width: 100%;
object-position: center;
background-color: var(--color-surfacedark20);
}
.duration-release-info-container {
@ -31,80 +31,82 @@
height: 100%;
padding: 0.8em;
background-color: var(--color-backgrounddarker60);
color: var(--color-surfacelighter);
.logo {
display: block;
max-width: 100%;
height: 7em;
margin-bottom: 0.8em;
object-fit: contain;
object-position: left center;
background-color: var(--color-surfacedarker40)
}
.duration-release-info-container {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
.duration, .release-info {
flex-grow: 0;
flex-shrink: 1;
max-width: 100%;
margin-bottom: 0.8em;
margin-right: 0.8em;
line-height: 1.1em;
max-height: 2.2em;
text-align: center;
word-wrap: break-word;
word-break: break-word;
overflow: visible;
}
}
.name-container {
width: 100%;
margin-bottom: 0.8em;
overflow: visible;
.name {
font-size: 1.3em;
line-height: 1.2em;
max-height: 3.6em;
word-wrap: break-word;
word-break: break-word;
overflow: visible;
}
}
.description-container {
width: 100%;
margin-bottom: 0.8em;
overflow: visible;
.description {
font-size: 0.9em;
line-height: 1.15em;
max-height: 4.8em;
word-wrap: break-word;
word-break: break-word;
overflow: visible;
}
}
.links-label {
font-size: 1.1em;
color: var(--color-surfacelight);
word-wrap: break-word;
word-break: break-word;
overflow: visible;
}
.links-container {
width: 100%;
max-height: 3.2em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0.8em;
.title {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-surfacelight);
}
.link {
display: inline-block;
flex-grow: 0;
flex-shrink: 1;
max-width: 100%;
padding-right: 0.4em;
margin-right: 0.4em;
font-size: 0.9em;
line-height: 1.15em;
line-height: 1.2em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-surfacelighter);