Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 19:02:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

nav bar added to player

Browse source
This commit is contained in:
nklhrstv 2020-03-11 15:25:53 +02:00
parent 365c5e43f4
commit 428cb776ce
2 changed files with 47 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/routes/Player/Player.js
View file

@ -1,7 +1,7 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const { useDeepEqualEffect, useBinaryState } = require('stremio/common'); const { HorizontalNavBar, useDeepEqualEffect, useBinaryState } = require('stremio/common');
const BufferingLoader = require('./BufferingLoader'); const BufferingLoader = require('./BufferingLoader');
const ControlBar = require('./ControlBar'); const ControlBar = require('./ControlBar');
const SubtitlesPicker = require('./SubtitlesPicker'); const SubtitlesPicker = require('./SubtitlesPicker');
@ -153,6 +153,17 @@ const Player = ({ urlParams }) => {
: :
null null
} }
<HorizontalNavBar
className={classnames(styles['layer'], styles['nav-bar-layer'])}
title={
player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
player.meta_resource.content.content.name
:
null
}
backButton={true}
fullscreenButton={true}
/>
<ControlBar <ControlBar
className={classnames(styles['layer'], styles['control-bar-layer'])} className={classnames(styles['layer'], styles['control-bar-layer'])}
paused={state.paused} paused={state.paused}

35
src/routes/Player/styles.less
View file

@ -1,5 +1,11 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/NavBar/HorizontalNavBar/styles.less') {
nav-bar-button-container: button-container;
nav-bar-title: title;
nav-bar-icon: icon;
}
.player-container { .player-container {
position: relative; position: relative;
z-index: 0; z-index: 0;
@ -15,6 +21,35 @@
bottom: 0; bottom: 0;
z-index: 0; z-index: 0;
&.nav-bar-layer {
bottom: initial;
background: transparent;
&::before {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: -1;
box-shadow: 0 0 8rem 6rem @color-background-dark5;
content: "";
}
.nav-bar-button-container {
&:hover {
background: transparent;
}
.nav-bar-icon {
fill: @color-surface-light5;
}
}
.nav-bar-title {
color: @color-surface-light5;
}
}
&.control-bar-layer { &.control-bar-layer {
top: initial; top: initial;
overflow: visible; overflow: visible;