RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

use PlaylistView

Browse Source
This commit is contained in:
SrGooglo 2023-07-13 15:51:58 +00:00
parent c9842f9f1e
commit 596d0567a5
1 changed files with 5 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
packages/app/src/pages/play/[play_id].jsx
View File

@ -1,21 +1,9 @@
import React from "react" import React from "react"
import * as antd from "antd" import * as antd from "antd"
import classnames from "classnames"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import moment from "moment"
import fuse from "fuse.js"
import useWsEvents from "hooks/useWsEvents"
import { WithPlayerContext } from "contexts/WithPlayerContext"
import { ImageViewer } from "components"
import { Icons } from "components/Icons"
import PlaylistsModel from "models/playlists" import PlaylistsModel from "models/playlists"
import MusicTrack from "components/MusicTrack"
import SearchButton from "components/SearchButton" import PlaylistView from "components/Music/PlaylistView"
import "./index.less" import "./index.less"
@ -23,9 +11,6 @@ export default (props) => {
const play_id = props.params.play_id const play_id = props.params.play_id
const [playlist, setPlaylist] = React.useState(null) const [playlist, setPlaylist] = React.useState(null)
const [searchResults, setSearchResults] = React.useState(null)
let debounceSearch = null
const loadData = async () => { const loadData = async () => {
const response = await PlaylistsModel.getPlaylist(play_id).catch((err) => { const response = await PlaylistsModel.getPlaylist(play_id).catch((err) => {
@ -41,177 +26,16 @@ export default (props) => {
} }
} }
const handleOnClickTrack = (track) => {
// search index of track
const index = playlist.list.findIndex((item) => {
return item._id === track._id
})
if (index === -1) {
return
}
app.cores.player.startPlaylist(playlist.list, index)
}
const handleTrackLike = async (track) => {
return await PlaylistsModel.toggleTrackLike(track._id)
}
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)}
onLike={() => handleTrackLike(item)}
/>
})
}
const handleOnSearchChange = (value) => {
debounceSearch = setTimeout(() => {
makeSearch(value)
}, 500)
}
const handleOnSearchEmpty = () => {
if (debounceSearch) {
clearTimeout(debounceSearch)
}
setSearchResults(null)
}
const updateTrackLike = (track_id, liked) => {
setPlaylist((prev) => {
const index = prev.list.findIndex((item) => {
return item._id === track_id
})
if (index !== -1) {
const newState = {
...prev,
}
newState.list[index].liked = liked
return newState
}
return prev
})
}
useWsEvents({
"music:self:track:toggle:like": (data) => {
updateTrackLike(data.track_id, data.action === "liked")
}
}, {
socketName: "music",
})
React.useEffect(() => { React.useEffect(() => {
loadData() loadData()
app.layout.toggleCenteredContent(true)
return () => {
app.layout.toggleCenteredContent(false)
}
}, []) }, [])
if (!playlist) { if (!playlist) {
return <antd.Skeleton active /> return <antd.Skeleton active />
} }
return <div return <PlaylistView
className={ playlist={playlist}
classnames("playlist_view", playlist.type) centered={app.isMobile}
} />
>
<div className="play_info_wrapper">
<div className="play_info">
<div className="play_info_cover">
<ImageViewer src={playlist.cover ?? playlist?.thumbnail ?? "/assets/no_song.png"} />
</div>
<div className="play_info_details">
<div className="play_info_title">
<h1>{playlist.title}</h1>
</div>
<div className="play_info_description">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{playlist.description}
</ReactMarkdown>
</div>
<div className="play_info_statistics">
{
playlist.publisher && <div className="play_info_statistics_item">
<p
onClick={() => {
app.navigation.goToAccount(playlist.publisher.username)
}}
>
<Icons.MdPerson />
Publised by <a>{playlist.publisher.username}</a>
</p>
</div>
}
<div className="play_info_statistics_item">
<p>
<Icons.MdLibraryMusic /> {playlist.list.length} Tracks
</p>
</div>
<div className="play_info_statistics_item">
<p>
<Icons.MdAccessTime /> Released on {moment(playlist.created_at).format("DD/MM/YYYY")}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="list">
<div className="list_header">
<h1>
<Icons.MdPlaylistPlay /> Tracks
</h1>
<SearchButton
onChange={handleOnSearchChange}
onEmpty={handleOnSearchEmpty}
/>
</div>
<WithPlayerContext>
{
returnTracks(searchResults ?? playlist.list)
}
</WithPlayerContext>
</div>
</div>
} }