mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
MetaPreview wip
This commit is contained in:
NikolaBorislavovHristov
parent
2006b33e6c
commit
d9ee95a008
4 changed files with 271 additions and 0 deletions
148
src/common/MetaPreview/MetaPreview.js
Normal file
148
src/common/MetaPreview/MetaPreview.js
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
const React = require('react');
|
||||
const classnames = require('classnames');
|
||||
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 logoOnError = React.useCallback((event) => {
|
||||
event.currentTarget.style.display = 'none';
|
||||
}, []);
|
||||
const releaseInfoText = releaseInfo.length > 0 ?
|
||||
releaseInfo
|
||||
:
|
||||
released instanceof Date && !isNaN(released.getFullYear()) ?
|
||||
released.getFullYear()
|
||||
:
|
||||
'';
|
||||
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} />
|
||||
{
|
||||
releaseInfoText.length > 0 || duration.length > 0 ?
|
||||
<div className={styles['duration-release-info-container']}>
|
||||
{
|
||||
releaseInfoText.length > 0 ?
|
||||
<div className={styles['release-info']}>{releaseInfoText}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
duration.length > 0 ?
|
||||
<div className={styles['duration']}>{duration}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
name.length > 0 ?
|
||||
<div className={styles['name-container']}>
|
||||
<div className={styles['name']} title={name}>{name}</div>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
description.length > 0 ?
|
||||
<div className={styles['description-container']}>
|
||||
<div className={styles['description']}>{description}</div>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
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>
|
||||
:
|
||||
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 ?
|
||||
<Input className={styles['action-button-container']} type={'link'} href={`#/player?stream=${trailer}`}>
|
||||
<Icon className={styles['icon']} icon={'ic_movies'} />
|
||||
<div className={styles['label']}>Trailer</div>
|
||||
</Input>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
imdbId.length > 0 ?
|
||||
<Input className={styles['action-button-container']} type={'link'} href={`https://imdb.com/title/${imdbId}`} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_imdb'} />
|
||||
{
|
||||
imdbRating.length > 0 ?
|
||||
<div className={styles['label']}>{imdbRating} / 10</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</Input>
|
||||
:
|
||||
null
|
||||
}
|
||||
<Input className={styles['action-button-container']} type={'button'} data-meta-item-id={id} onClick={toggleLibraryOnClick}>
|
||||
<Icon className={styles['icon']} icon={inLibrary ? 'ic_removelib' : 'ic_addlib'} />
|
||||
<div className={styles['label']}>{inLibrary ? 'Remove from Library' : 'Add to library'}</div>
|
||||
</Input>
|
||||
{
|
||||
share.length > 0 ?
|
||||
<Input className={styles['action-button-container']} type={'button'}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<div className={styles['label']}>Share</div>
|
||||
{
|
||||
shareModalOpen ?
|
||||
<Modal>
|
||||
|
||||
</Modal>
|
||||
:
|
||||
null
|
||||
}
|
||||
</Input>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div> */}
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = MetaPreview;
|
||||
3
src/common/MetaPreview/index.js
Normal file
3
src/common/MetaPreview/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
const MetaItemPreview = require('./MetaPreview');
|
||||
|
||||
module.exports = MetaItemPreview;
|
||||
118
src/common/MetaPreview/styles.less
Normal file
118
src/common/MetaPreview/styles.less
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
.meta-preview-container {
|
||||
background-color: var(--color-backgrounddarker);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-origin: border-box;
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
&.compact {
|
||||
.meta-preview-content {
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
object-position: center;
|
||||
background-color: var(--color-surfacedark20);
|
||||
}
|
||||
|
||||
.duration-release-info-container {
|
||||
justify-content: space-evenly;
|
||||
|
||||
.duration, .release-info {
|
||||
margin-left: 0.4em;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meta-preview-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.8em;
|
||||
background-color: var(--color-backgrounddarker60);
|
||||
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
height: 7em;
|
||||
margin-bottom: 0.8em;
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.name-container {
|
||||
width: 100%;
|
||||
margin-bottom: 0.8em;
|
||||
|
||||
.name {
|
||||
font-size: 1.3em;
|
||||
line-height: 1.2em;
|
||||
max-height: 3.6em;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.description-container {
|
||||
width: 100%;
|
||||
margin-bottom: 0.8em;
|
||||
|
||||
.description {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.15em;
|
||||
max-height: 4.8em;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.links-container {
|
||||
width: 100%;
|
||||
max-height: 3.2em;
|
||||
margin-bottom: 0.8em;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
padding-right: 0.4em;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.15em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ const ColorPicker = require('./ColorPicker');
|
|||
const Loader = require('./Loader');
|
||||
const MainNavBar = require('./MainNavBar');
|
||||
const MetaItem = require('./MetaItem');
|
||||
const MetaPreview = require('./MetaPreview');
|
||||
const NavBar = require('./NavBar');
|
||||
const Popup = require('./Popup');
|
||||
const ShareModal = require('./ShareModal');
|
||||
|
|
@ -17,6 +18,7 @@ module.exports = {
|
|||
Loader,
|
||||
MainNavBar,
|
||||
MetaItem,
|
||||
MetaPreview,
|
||||
NavBar,
|
||||
Popup,
|
||||
ShareModal,
|
||||
|
|
|
|||
Loading…
Reference in a new issue