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

VerticalNavBar used in MetaDetails

Browse source
This commit is contained in:
svetlagasheva 2020-04-08 21:42:40 +03:00
parent 88a91f4f93
commit 7087eb368a
2 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/routes/MetaDetails/MetaDetails.js
View file

@ -1,6 +1,6 @@
const React = require('react');
const PropTypes = require('prop-types');
const { HorizontalNavBar, MetaPreview, Image, useInLibrary } = require('stremio/common');
const { VerticalNavBar, HorizontalNavBar, MetaPreview, Image, useInLibrary } = require('stremio/common');
const StreamsList = require('./StreamsList');
const VideosList = require('./VideosList');
const useMetaDetails = require('./useMetaDetails');
@ -9,12 +9,13 @@ const styles = require('./styles');
const MetaDetails = ({ urlParams }) => {
const metaDetails = useMetaDetails(urlParams);
const [metaResourceRef, metaResources, selectedMetaResource] = useSelectableResource(
const [metaResourceRef, metaResources, selectedMetaResource, selectResource] = useSelectableResource(
metaDetails.selected !== null ? metaDetails.selected.meta_resource_ref : null,
metaDetails.meta_resources
);
const streamsResourceRef = metaDetails.selected !== null ? metaDetails.selected.streams_resource_ref : null;
const streamsResources = metaDetails.streams_resources;
const metaResourcesReady = metaDetails.meta_resources.filter((metaResource) => metaResource.content.type === 'Ready');
const selectedVideo = React.useMemo(() => {
return streamsResourceRef !== null && selectedMetaResource !== null ?
selectedMetaResource.content.content.videos.reduce((result, video) => {
@ -70,6 +71,22 @@ const MetaDetails = ({ urlParams }) => {
:
null
}
{
metaResourcesReady.length > 0 ?
<VerticalNavBar
className={styles['vertical-nav-bar']}
detailsMenu={true}
tabs={metaResourcesReady.map((metaResource) => ({
id: metaResource.addon.transportUrl,
label: metaResource.addon.manifest.name,
icon: metaResource.addon.manifest.logo,
onClick: () => { selectResource(metaResource.request); }
}))}
selected={selectedMetaResource.request.base}
/>
:
null
}
<MetaPreview
className={styles['meta-preview']}
name={selectedMetaResource.content.content.name + (selectedVideo !== null && typeof selectedVideo.title === 'string' ? ` - ${selectedVideo.title}` : '')}

12
src/routes/MetaDetails/styles.less
View file

@ -5,6 +5,10 @@
meta-info-container: meta-info-container;
}
:import('~stremio/common/NavBar/VerticalNavBar/styles.less') {
nav-tab-button: nav-tab-button;
}
.metadetails-container {
display: flex;
flex-direction: column;
@ -83,6 +87,14 @@
}
}
.vertical-nav-bar {
width: 6rem;
.nav-tab-button {
width: 6rem;
}
}
.meta-preview {
flex: 0 1 40rem;
align-self: stretch;