mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-07 10:29:37 +00:00
sample detail page implemented
This commit is contained in:
NikolaBorislavovHristov
parent
4b4d2c055e
commit
493b6c3d79
5 changed files with 83 additions and 324 deletions
|
|
@ -1,161 +1,26 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import VideosList from './VideosList';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
const React = require('react');
|
||||
const { NavBar, MetaPreview } = require('stremio/common');
|
||||
const useMetaItem = require('./useMetaItem');
|
||||
const useInLibrary = require('./useInLibrary');
|
||||
require('./styles');
|
||||
|
||||
class Detail extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
logoLoaded: true
|
||||
};
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return nextState.logoLoaded !== this.state.logoLoaded;
|
||||
}
|
||||
|
||||
renderSection({ title, links }) {
|
||||
return (
|
||||
<div className={styles['section-container']}>
|
||||
{
|
||||
title ?
|
||||
<div className={styles['title']}>{title}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{links.map(link => <a key={link} className={styles['link']}>{link}</a>)}
|
||||
const Detail = ({ urlParams }) => {
|
||||
const metaItem = useMetaItem(urlParams.type, urlParams.id, urlParams.videoId);
|
||||
const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useInLibrary(urlParams.id);
|
||||
return (
|
||||
<div className={'detail-container'}>
|
||||
<NavBar className={'nav-bar'} backButton={true} title={metaItem.name} />
|
||||
<div className={'detail-content'}>
|
||||
<MetaPreview
|
||||
{...metaItem}
|
||||
className={'meta-preview'}
|
||||
background={null}
|
||||
inLibrary={inLibrary}
|
||||
toggleInLibrary={toggleInLibrary}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={this.props.metaItem.background.length > 0 ? { backgroundImage: 'url(' + this.props.metaItem.background + ')' } : { backgroundColor: colors.backgrounddarker }} className={styles['detail-container']}>
|
||||
<div className={styles['overlay-container']} />
|
||||
<div className={styles['info-container']}>
|
||||
{
|
||||
this.state.logoLoaded ?
|
||||
<img className={styles['logo']} src={this.props.metaItem.logo} onError={() => this.setState({ logoLoaded: false })} />
|
||||
:
|
||||
null
|
||||
}
|
||||
<div className={styles['duration']}>{this.props.metaItem.duration}</div>
|
||||
<div className={styles['release-info']}>
|
||||
{
|
||||
this.props.metaItem.releaseInfo.length > 0 ?
|
||||
this.props.metaItem.releaseInfo
|
||||
:
|
||||
this.props.metaItem.released.getFullYear()
|
||||
}
|
||||
</div>
|
||||
<div className={styles['name']}>{this.props.metaItem.name}</div>
|
||||
<div className={styles['description']}>{this.props.metaItem.description}</div>
|
||||
{this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })}
|
||||
{this.renderSection({ title: 'WRITTEN BY', links: this.props.metaItem.writers })}
|
||||
{this.renderSection({ title: 'DIRECTED BY', links: this.props.metaItem.directors })}
|
||||
{this.renderSection({ title: 'CAST', links: this.props.metaItem.cast })}
|
||||
<div className={styles['action-buttons-container']}>
|
||||
<a href={this.props.metaItem.links.youtube} className={styles['action-button-container']}>
|
||||
<Icon className={styles['icon']} icon={'ic_movies'} />
|
||||
<div className={styles['label']}>Trailer</div>
|
||||
</a>
|
||||
<a href={this.props.metaItem.links.imdb} target={'_blank'} className={styles['action-button-container']}>
|
||||
<Icon className={styles['icon']} icon={'ic_imdb'} />
|
||||
<div className={styles['label']}>{this.props.metaItem.imdbRating} / 10</div>
|
||||
</a>
|
||||
<div className={styles['action-button-container']} onClick={this.props.toggleLibraryButton}>
|
||||
<Icon className={styles['icon']} icon={this.props.inLibrary ? 'ic_removelib' : 'ic_addlib'} />
|
||||
<div className={styles['label']}>{this.props.inLibrary ? 'Remove from Library' : 'Add to library'}</div>
|
||||
</div>
|
||||
<div className={styles['action-button-container']}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<div className={styles['label']}>Share</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VideosList className={styles['videos-list']} videos={this.props.metaItem.videos}></VideosList>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Detail.propTypes = {
|
||||
inLibrary: PropTypes.bool.isRequired,
|
||||
metaItem: PropTypes.object.isRequired,
|
||||
toggleLibraryButton: PropTypes.func
|
||||
};
|
||||
Detail.defaultProps = {
|
||||
inLibrary: false,
|
||||
metaItem: {
|
||||
logo: 'https://images.metahub.space/logo/medium/tt4123430/img',
|
||||
background: 'https://images.metahub.space/background/medium/tt4123430/img',
|
||||
duration: '134 min',
|
||||
releaseInfo: '2018',
|
||||
released: new Date(2018, 4, 23),
|
||||
imdbRating: '7.4',
|
||||
name: 'Fantastic Beasts and Where to Find Them: The Original Screenplay',
|
||||
description: 'In an effort to thwart Grindelwald' + 's plans ofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards to rule over all non-magical beings, Albus Dumbledore enlists his former student Newt Scamander, who agrees to help, unaware of the dangers that lie ahead. Lines are drawn as love and loyalty are tested, even among the truest friends and family, in an increasingly divided wizarding world.',
|
||||
genres: ['Adventure', 'Family', 'Fantasy'],
|
||||
writers: ['J. K. Rowling'],
|
||||
directors: ['David Yates'],
|
||||
cast: ['Johny Depp', 'Kevin Guthrie', 'Carmen Ejogo', 'Wolf Roth'],
|
||||
videos: [
|
||||
{ id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
|
||||
{ id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
|
||||
{ id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
|
||||
{ id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
|
||||
{ id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
|
||||
{ id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
|
||||
{ id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
|
||||
{ id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
|
||||
{ id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
|
||||
{ id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
|
||||
{ id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
|
||||
{ id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
|
||||
{ id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
|
||||
],
|
||||
links: {
|
||||
share: '',
|
||||
imdb: 'https://www.imdb.com/title/tt4123430/?ref_=fn_al_tt_3',
|
||||
youtube: '#/player'
|
||||
}
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detail;
|
||||
module.exports = Detail;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
import Detail from './Detail';
|
||||
const Detail = require('./Detail');
|
||||
|
||||
export default Detail;
|
||||
module.exports = Detail;
|
||||
|
|
|
|||
|
|
@ -1,175 +1,22 @@
|
|||
.detail-container, :global(.detail-popup-container) {
|
||||
--spacing: 8px;
|
||||
--action-button-width: 80px;
|
||||
--video-width: 360px;
|
||||
--stream-width: 360px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: var(--color-background);
|
||||
|
||||
.overlay-container {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-backgrounddarker60);
|
||||
.nav-bar {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 40%;
|
||||
bottom: 0;
|
||||
padding: calc(var(--spacing) * 3);
|
||||
.detail-content {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
height: calc(var(--action-button-width) * 1.2);
|
||||
object-fit: contain;
|
||||
.meta-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.duration {
|
||||
display: inline-block;
|
||||
max-width: 45%;
|
||||
margin-right: 1.2em;
|
||||
font-size: 1.15em;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.release-info {
|
||||
display: inline-block;
|
||||
max-width: 45%;
|
||||
font-size: 1.15em;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.name {
|
||||
max-height: 3em;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.description {
|
||||
max-height: 10.5em;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.5;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.section-container {
|
||||
max-height: 3.2em;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0.3em;
|
||||
font-size: 1.15em;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
padding: 0.3em 0.6em;
|
||||
font-size: 1.15em;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-surface40);
|
||||
}
|
||||
|
||||
&:nth-child(-n+6) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons-container {
|
||||
position: absolute;
|
||||
left: calc(var(--spacing) * 3);
|
||||
bottom: calc(var(--spacing) * 3);
|
||||
|
||||
.action-button-container {
|
||||
cursor: pointer;
|
||||
width: var(--action-button-width);
|
||||
height: var(--action-button-width);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
height: 30%;
|
||||
margin: 10% 0;
|
||||
fill: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 2.4em;
|
||||
padding: 0 1em;
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
font-size: 1.05em;
|
||||
line-height: 1.2em;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
|
||||
.icon {
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.videos-list {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: calc(3 * var(--spacing)) 0;
|
||||
}
|
||||
}
|
||||
8
src/routes/Detail/useInLibrary.js
Normal file
8
src/routes/Detail/useInLibrary.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
const { useBinaryState } = require('stremio/common');
|
||||
|
||||
const useInLibrary = (id = '') => {
|
||||
const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useBinaryState(false);
|
||||
return [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary];
|
||||
};
|
||||
|
||||
module.exports = useInLibrary;
|
||||
39
src/routes/Detail/useMetaItem.js
Normal file
39
src/routes/Detail/useMetaItem.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
const React = require('react');
|
||||
|
||||
const useMetaItem = (type = '', id = '', videoId = '') => {
|
||||
const [metaItem] = React.useState(() => ({
|
||||
id,
|
||||
type,
|
||||
name: 'Underworld',
|
||||
logo: 'https://images.metahub.space/logo/medium/tt0320691/img',
|
||||
background: 'https://images.metahub.space/background/medium/tt0320691/img',
|
||||
duration: '121 min',
|
||||
releaseInfo: '2003',
|
||||
released: '2003-09-19T00:00:00.000Z',
|
||||
description: 'Selene, a vampire warrior, is entrenched in a conflict between vampires and werewolves, while falling in love with Michael, a human who is sought by werewolves for unknown reasons.',
|
||||
genres: ['Action', 'Fantasy', 'Thriller'],
|
||||
writers: ['Kevin Grevioux', 'Len Wiseman', 'Danny McBride', 'Danny McBride'],
|
||||
directors: ['Len Wiseman'],
|
||||
cast: ['Kate Beckinsale', 'Scott Speedman', 'Michael Sheen', 'Shane Brolly'],
|
||||
imdbRating: '7.0',
|
||||
links: {
|
||||
trailer: 'mn4O3iQ8B_s',
|
||||
imdb: 'tt0320691',
|
||||
share: 'movie/underworld-0320691'
|
||||
},
|
||||
videos: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'How to create a Stremio add-on with Node.js',
|
||||
description: 'This is a step-by-step tutorial on how to create your own add-on using Node.js.',
|
||||
released: 'Mon Jul 01 2019 00:00:00 GMT+0300 (Eastern European Summer Time)',
|
||||
poster: 'https://theme.zdassets.com/theme_assets/2160011/77a6ad5aee11a07eb9b87281070f1aadf946f2b3.png',
|
||||
season: 0,
|
||||
episode: 0
|
||||
}
|
||||
]
|
||||
}));
|
||||
return metaItem;
|
||||
};
|
||||
|
||||
module.exports = useMetaItem;
|
||||
Loading…
Reference in a new issue