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

popup imported

Browse source
This commit is contained in:
svetlagasheva 2019-01-02 11:03:25 +02:00
parent b3ca3de8ab
commit 06af08c424
2 changed files with 89 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/routes/Detail/VideosList/VideosList.js
View file

@ -1,6 +1,8 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from 'stremio-icons/dom';
import { Popup } from 'stremio-common';
import Video from './Video';
import styles from './styles';
@ -8,16 +10,19 @@ class VideosList extends Component {
constructor(props) {
super(props);
this.seasonsPopupRef = React.createRef();
this.seasons = this.props.videos.map((video) => video.season)
.filter((season, index, seasons) => seasons.indexOf(season) === index);
this.state = {
selectedSeason: this.seasons[0]
selectedSeason: this.seasons[0],
selectedVideoId: 0
}
}
changeSeason = (event) => {
this.setState({ selectedSeason: parseInt(event.target.value) });
this.setState({ selectedSeason: parseInt(event.currentTarget.dataset.season) });
this.seasonsPopupRef.current && this.seasonsPopupRef.current.close();
}
shouldComponentUpdate(nextProps, nextState) {
@ -34,20 +39,35 @@ class VideosList extends Component {
this.setState({ selectedSeason: this.seasons[nextSeasonIndex] });
}
onClick = (event) => {
this.setState({ selectedVideoId: event.currentTarget.dataset.id });
console.log(event.currentTarget.dataset.id);
}
render() {
return (
<div className={styles['videos-list-container']}>
<div className={classnames(styles['videos-list-container'], this.props.className)}>
<div className={styles['seasons-bar']}>
<div className={styles['button-container']} onClick={this.onPrevButtonClicked}>
<Icon className={styles['button-icon']} icon={'ic_arrow_left'} />
</div>
<select value={this.state.selectedSeason} onChange={this.changeSeason}>
{this.seasons.map((season) =>
<option key={season} value={season}>
{season}
</option>
)}
</select>
<Popup ref={this.seasonsPopupRef} className={styles['popup-container']} border={true}>
<Popup.Label>
<div className={styles['control-bar-button']}>
S {this.state.selectedSeason}
<Icon className={styles['icon']} icon={'ic_arrow_down'} />
</div>
</Popup.Label>
<Popup.Menu>
<div className={styles['popup-content']}>
{this.seasons.map((season) =>
<div className={styles['season']} key={season} data-season={season} onClick={this.changeSeason}>
S {season}
</div>
)}
</div>
</Popup.Menu>
</Popup>
<div className={styles['button-container']} onClick={this.onNextButtonClicked} >
<Icon className={styles['button-icon']} icon={'ic_arrow_left'} />
</div>
@ -58,13 +78,16 @@ class VideosList extends Component {
.map((video) =>
<Video key={video.id}
className={styles['video']}
id={video.id}
poster={video.poster}
episode={video.episode}
season={video.season}
title={video.name}
released={video.released}
isWatched={video.isWatched}
isUpcoming={video.isUpcoming}
progress={video.progress}
onClick={this.onClick}
/>
)}
</div>
@ -74,6 +97,7 @@ class VideosList extends Component {
}
VideosList.propTypes = {
className: PropTypes.string,
videos: PropTypes.arrayOf(PropTypes.object).isRequired
};
VideosList.defaultProps = {

68
src/routes/Detail/VideosList/styles.less
View file

@ -1,20 +1,37 @@
.videos-list-container {
--scroll-container-width: 392px;
--seasons-bar-height: 50px;
--spacing: 8px;
}
.videos-list-container {
height: 100%;
display: inline-flex;
flex-direction: column;
background: var(--color-background);
padding: calc(3 * var(--spacing)) 0;
background: var(--color-backgrounddarker40);
.seasons-bar {
height: var(--seasons-bar-height);
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing);
background: var(--color-backgrounddarker);
.control-bar-button {
cursor: pointer;
width: 258px;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-surfacelighter);
.icon {
width: 14%;
height: 14%;
fill: var(--color-surfacelight);
}
&:hover {
background-color: var(--color-surfacedarker60);
.icon {
fill: var(--color-surfacelighter);
}
}
}
.button-container {
width: calc(1.5 * var(--seasons-bar-height));
@ -30,14 +47,14 @@
}
&:hover {
background-color: var(--color-surfacelighter20);
background-color: var(--color-surfacedarker60);
}
}
}
.scroll-container {
flex: 1;
width: var(--scroll-container-width);
width: calc(var(--video-width) + 4 * var(--spacing));
padding: 0 calc(2 * var(--spacing));
margin: 0 var(--spacing);
overflow-y: auto;
@ -53,10 +70,35 @@
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: var(--color-secondarylighter80);
background-color: var(--color-secondarylighter);
}
.scroll-container::-webkit-scrollbar-track {
background-color: var(--color-backgroundlight);
background-color: var(--color-backgroundlighter);
}
}
.popup-container {
--border-color: var(--color-primarylight);
.popup-content {
cursor: pointer;
width: 258px;
background-color: var(--color-backgrounddark);
.season {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
width: 258px;
border-top: 1px solid var(--color-primarylight);
color: var(--color-surfacelight);
&:hover {
color: var(--color-surfacelighter);
background-color: var(--color-surfacedarker60);
}
}
}
}