implement SearchButton on playlist view

packages/app/src/components/SearchButton/index.jsx

@@ -6,6 +6,8 @@ import "./index.less"
 
 export default (props) => {
     const searchBoxRef = React.useRef(null)
+
+    const [value, setValue] = React.useState()
     const [open, setOpen] = React.useState()
 
     const openSearchBox = (to) => {
@@ -17,16 +19,38 @@ export default (props) => {
         }
     }
 
+    const handleOnChange = (value) => {
+        setValue(value)
+
+        if (!value || value.length === 0 || value === "" || value === " ") {
+            if (typeof props.onEmpty === "function") {
+                props.onEmpty()
+            }
+
+            return false
+        }
+
+        if (typeof props.onChange === "function") {
+            props.onChange(value)
+        }
+    }
+
     return <div
+        className="searchButton"
         onClick={() => openSearchBox(true)}
-        className="searchButton">
+    >
         <SearchBar
             ref={searchBoxRef}
             className={classnames("searchBox", { ["open"]: open })}
             onSearch={props.onSearch}
-            onChange={props.onChange}
+            onChange={handleOnChange}
+            value={value}
             onFocus={() => openSearchBox(true)}
-            onBlur={() => openSearchBox(false)}
+            onBlur={() => {
+                if (value.length === 0) {
+                    openSearchBox(false)
+                }
+            }}
         />
     </div>
 }

packages/app/src/components/SearchButton/index.less

@@ -1,18 +1,38 @@
 .searchButton {
-	.searchBox {
-        .adm-search-bar-input {
-            transition: all 150ms ease-in-out;
-            width: 0px;
-        }
-        
-		&.open {
-            .adm-search-bar-input {
-                width: 20vw;
-            }
-		}
-	}
+    .searchBox {
+        color: var(--text-color);
 
-	svg {
-		margin: 0;
-	}
-}
+        svg {
+            color: var(--text-color);
+            margin: 0;
+        }
+
+        .adm-search-bar-input-box {
+            color: var(--text-color);
+
+            background-color: var(--background-color-accent);
+
+            padding: 0 6px;
+
+            border-radius: 12px;
+
+            .adm-search-bar-input {
+                transition: all 150ms ease-in-out;
+                width: 0px;
+
+                padding: 0;
+            }
+        }
+
+        &.open {
+            .adm-search-bar-input-box {
+                .adm-search-bar-input {
+                    width: 20vw;
+                    max-width: 400px;
+
+                    padding-left: 10px;
+                }
+            }
+        }
+    }
+}

packages/app/src/pages/play/[play_id].jsx

@@ -4,6 +4,7 @@ import classnames from "classnames"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import moment from "moment"
+import fuse from "fuse.js"
 
 import { WithPlayerContext } from "contexts/WithPlayerContext"
 
@@ -13,12 +14,17 @@ import { Icons } from "components/Icons"
 import PlaylistsModel from "models/playlists"
 import MusicTrack from "components/MusicTrack"
 
+import SearchButton from "components/SearchButton"
+
 import "./index.less"
 
 export default (props) => {
     const play_id = props.params.play_id
 
     const [playlist, setPlaylist] = React.useState(null)
+    const [searchResults, setSearchResults] = React.useState(null)
+
+    let debounceSearch = null
 
     const loadData = async () => {
         const response = await PlaylistsModel.getPlaylist(play_id).catch((err) => {
@@ -47,6 +53,48 @@ export default (props) => {
         app.cores.player.startPlaylist(playlist.list, index)
     }
 
+    const makeSearch = (value) => {
+        const options = {
+            includeScore: true,
+            keys: [
+                "title",
+                "artist",
+                "album",
+            ],
+        }
+
+        const fuseInstance = new fuse(playlist.list, options)
+        const results = fuseInstance.search(value)
+
+        setSearchResults(results.map((result) => {
+            return result.item
+        }))
+    }
+
+    const returnTracks = (list) => {
+        return list.map((item, index) => {
+            return <MusicTrack
+                order={index + 1}
+                track={item}
+                onClick={() => handleOnClickTrack(item)}
+            />
+        })
+    }
+
+    const handleOnSearchChange = (value) => {
+        debounceSearch = setTimeout(() => {
+            makeSearch(value)
+        }, 500)
+    }
+
+    const handleOnSearchEmpty = () => {
+        if (debounceSearch) {
+            clearTimeout(debounceSearch)
+        }
+
+        setSearchResults(null)
+    }
+
     React.useEffect(() => {
         loadData()
     }, [])
@@ -108,19 +156,20 @@ export default (props) => {
         </div>
 
         <div className="list">
-            <h1>
-                <Icons.MdPlaylistPlay /> Tracks
-            </h1>
+            <div className="list_header">
+                <h1>
+                    <Icons.MdPlaylistPlay /> Tracks
+                </h1>
+
+                <SearchButton
+                    onChange={handleOnSearchChange}
+                    onEmpty={handleOnSearchEmpty}
+                />
+            </div>
 
             <WithPlayerContext>
                 {
-                    playlist.list.map((item, index) => {
-                        return <MusicTrack
-                            order={index + 1}
-                            track={item}
-                            onClick={() => handleOnClickTrack(item)}
-                        />
-                    })
+                    returnTracks(searchResults ?? playlist.list)
                 }
             </WithPlayerContext>
         </div>

packages/app/src/pages/play/index.less

@@ -152,5 +152,17 @@
         padding: 20px 30px;
 
         gap: 10px;
+
+        h1 {
+            margin: 0;
+        }
+
+        .list_header {
+            display: flex;
+            flex-direction: row;
+
+            align-items: center;
+            justify-content: space-between;
+        }
     }
 }