RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

use searcher

Browse Source
This commit is contained in:
SrGooglo 2023-05-30 01:10:41 +00:00
parent b41cb980dc
commit ace6e10a92
2 changed files with 122 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/app/src/pages/music/components/dashboard/releases/index.jsx
View File

@ -3,10 +3,12 @@ import * as antd from "antd"
import { Icons } from "components/Icons"
import { ImageViewer } from "components"
import Searcher from "components/Searcher"
import PlaylistCreator from "../../../creator"
import PlaylistsModel from "models/playlists"
import "./index.less"
const ReleaseItem = (props) => {
@ -59,33 +61,34 @@ const ReleaseItem = (props) => {
</div>
}
const openPlaylistCreator = (playlist_id) => {
console.log("Opening playlist creator", playlist_id)
app.DrawerController.open("playlist_creator", PlaylistCreator, {
type: "drawer",
props: {
title: <h2
style={{
margin: 0,
}}
>
<Icons.MdOutlineQueueMusic />
Creator
</h2>,
width: "fit-content",
},
componentProps: {
playlist_id: playlist_id,
}
})
}
const navigateToPlaylist = (playlist_id) => {
return app.setLocation(`/play/${playlist_id}`)
}
export default (props) => {
const openPlaylistCreator = (playlist_id) => {
console.log("Opening playlist creator", playlist_id)
app.DrawerController.open("playlist_creator", PlaylistCreator, {
type: "drawer",
props: {
title: <h2
style={{
margin: 0,
}}
>
<Icons.MdOutlineQueueMusic />
Creator
</h2>,
width: "fit-content",
},
componentProps: {
playlist_id: playlist_id,
}
})
}
const navigateToPlaylist = (playlist_id) => {
return app.setLocation(`/play/${playlist_id}`)
}
const [searchResults, setSearchResults] = React.useState(null)
const [L_Releases, R_Releases, E_Releases] = app.cores.api.useRequest(PlaylistsModel.getMyReleases)
if (E_Releases) {
@ -122,9 +125,34 @@ export default (props) => {
</div>
</div>
<Searcher
small
renderResults={false}
model={PlaylistsModel.getMyReleases}
onSearchResult={setSearchResults}
onEmpty={() => setSearchResults(null)}
/>
<div className="music_panel_releases_list">
{
R_Releases.map((release) => {
searchResults && searchResults.length === 0 && <antd.Result
status="info"
title="No results"
subTitle="We are sorry, but we could not find any results for your search."
/>
}
{
searchResults && searchResults.length > 0 && searchResults.map((release) => {
return <ReleaseItem
key={release._id}
release={release}
onClickEditTrack={() => openPlaylistCreator(release._id)}
onClickNavigate={() => navigateToPlaylist(release._id)}
/>
})
}
{
!searchResults && R_Releases.map((release) => {
return <ReleaseItem
key={release._id}
release={release}

67
packages/app/src/pages/music/components/dashboard/releases/index.less
View File

@ -4,6 +4,8 @@
width: 100%;
gap: 20px;
.music_panel_releases_header {
display: flex;
flex-direction: row;
@ -13,6 +15,10 @@
width: 100%;
h1 {
margin: 0;
}
.music_panel_releases_header_actions {
display: flex;
flex-direction: row;
@ -36,6 +42,8 @@
width: 100%;
padding-bottom: 20px;
.music_panel_releases_item {
display: flex;
flex-direction: row;
@ -106,4 +114,63 @@
}
}
}
}
.music-explorer_search_results {
display: grid;
// if only need 1 column, it will be 1fr
// if need 2 colums, first column will be 1fr, and the second one will be 2fr
grid-template-columns: 1fr 2fr;
// auto generate rows
grid-template-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
&.one_column {
grid-template-columns: 1fr;
}
&.no_results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.music-explorer_search_results_group {
background-color: var(--background-color-accent);
padding: 20px;
border-radius: 8px;
height: fit-content;
gap: 20px;
.explorer_search_results_group_header {
h1 {
margin: 0;
}
}
.music-explorer_search_results_group_list {
display: flex;
flex-direction: column;
gap: 10px;
.playlistItem {
background-color: var(--background-color-primary);
}
.music-track {
background-color: var(--background-color-primary);
}
}
}
}