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

search added to VideosList

Browse source
This commit is contained in:
svetlagasheva 2020-03-23 13:17:22 +02:00
parent e08fe92336
commit 43718197e4
1 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/routes/MetaDetails/VideosList/VideosList.js
View file

@ -1,6 +1,8 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const TextInput = require('stremio/common/TextInput');
const SeasonsBar = require('./SeasonsBar');
const Video = require('./Video');
const useSelectableSeasons = require('./useSelectableSeasons');
@ -17,6 +19,10 @@ const VideosList = ({ className, metaResource }) => {
const seasonOnSelect = React.useCallback((event) => {
selectSeason(event.value);
}, []);
const [search, setSearch] = React.useState('');
const searchInputOnChange = React.useCallback((event) => {
setSearch(event.currentTarget.value);
}, []);
return (
<div className={classnames(className, styles['videos-list-container'])}>
{
@ -49,14 +55,34 @@ const VideosList = ({ className, metaResource }) => {
:
null
}
<div className={styles['videos-scroll-container']}>
{videosForSeason.map((video, index) => (
<Video
{...video}
key={index}
className={styles['video']}
<div className={styles['search-container']}>
<label className={styles['search-bar-container']}>
<TextInput
className={styles['search-input']}
type={'text'}
placeholder={'Search addons'}
value={search}
onChange={searchInputOnChange}
/>
))}
<Icon className={styles['icon']} icon={'ic_search'} />
</label>
</div>
<div className={styles['videos-scroll-container']}>
{videosForSeason
.filter((video) => {
return search.length === 0 ||
(
(typeof video.title === 'string' && video.title.toLowerCase().includes(search.toLowerCase())) ||
(video.released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' }).toLowerCase().includes(search.toLowerCase()))
);
})
.map((video, index) => (
<Video
{...video}
key={index}
className={styles['video']}
/>
))}
</div>
</React.Fragment>
}