- :
- null
- }
- {links.map(link =>
)}
+const Detail = ({ urlParams }) => {
+ const metaItem = useMetaItem(urlParams.type, urlParams.id, urlParams.videoId);
+ const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useInLibrary(urlParams.id);
+ return (
+
+
+
+
- );
- }
-
- render() {
- return (
-
0 ? { backgroundImage: 'url(' + this.props.metaItem.background + ')' } : { backgroundColor: colors.backgrounddarker }} className={styles['detail-container']}>
-
-
- {
- this.state.logoLoaded ?
-

this.setState({ logoLoaded: false })} />
- :
- null
- }
-
{this.props.metaItem.duration}
-
- {
- this.props.metaItem.releaseInfo.length > 0 ?
- this.props.metaItem.releaseInfo
- :
- this.props.metaItem.released.getFullYear()
- }
-
-
{this.props.metaItem.name}
-
{this.props.metaItem.description}
- {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 })}
-
-
-
-
- );
- }
-}
-
-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'
- }
- }
+
+ );
};
-export default Detail;
+module.exports = Detail;
diff --git a/src/routes/Detail/index.js b/src/routes/Detail/index.js
index ccf95e690..89fc1aead 100644
--- a/src/routes/Detail/index.js
+++ b/src/routes/Detail/index.js
@@ -1,3 +1,3 @@
-import Detail from './Detail';
+const Detail = require('./Detail');
-export default Detail;
+module.exports = Detail;
diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less
index c45e3e2fa..2ee876369 100644
--- a/src/routes/Detail/styles.less
+++ b/src/routes/Detail/styles.less
@@ -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;
}
}
\ No newline at end of file
diff --git a/src/routes/Detail/useInLibrary.js b/src/routes/Detail/useInLibrary.js
new file mode 100644
index 000000000..08ffd21fd
--- /dev/null
+++ b/src/routes/Detail/useInLibrary.js
@@ -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;
diff --git a/src/routes/Detail/useMetaItem.js b/src/routes/Detail/useMetaItem.js
new file mode 100644
index 000000000..dc5134320
--- /dev/null
+++ b/src/routes/Detail/useMetaItem.js
@@ -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;