From 43718197e4eef5b6e46492d31796ef25aa587977 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 23 Mar 2020 13:17:22 +0200
Subject: [PATCH] search added to VideosList

---
 .../MetaDetails/VideosList/VideosList.js      | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index d7e04b78a..88990d005 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -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>
             }