From c25528269a122469c5e83309377be1c175ca9084 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Wed, 5 Jul 2023 19:02:59 +0000 Subject: [PATCH] handle track likes --- .../components/Player/MediaPlayer/index.jsx | 16 ++++++--- packages/app/src/pages/play/[play_id].jsx | 34 +++++++++++++++++++ .../comty.js/src/models/playlists/index.js | 14 ++++++++ 3 files changed, 59 insertions(+), 5 deletions(-) diff --git a/packages/app/src/components/Player/MediaPlayer/index.jsx b/packages/app/src/components/Player/MediaPlayer/index.jsx index 6809bf71..9a0369d6 100755 --- a/packages/app/src/components/Player/MediaPlayer/index.jsx +++ b/packages/app/src/components/Player/MediaPlayer/index.jsx @@ -9,6 +9,8 @@ import SeekBar from "components/Player/SeekBar" import Controls from "components/Player/Controls" import { WithPlayerContext, Context } from "contexts/WithPlayerContext" +import PlaylistsModel from "models/playlists" + import "./index.less" export default (props) => { @@ -77,12 +79,16 @@ export class AudioPlayer extends React.Component { app.cores.player.playback.next() } - onClickLikeButton = () => { - // TODO: Like + onClickLikeButton = async () => { + const result = await PlaylistsModel.toogleTrackLike(this.context.currentManifest._id).catch((err) => { + return null + }) - console.log("Like") - - this.setState({ liked: !this.state.liked }) + if (result) { + this.setState({ + liked: result.action === "liked" + }) + } } render() { diff --git a/packages/app/src/pages/play/[play_id].jsx b/packages/app/src/pages/play/[play_id].jsx index d9c6d0a4..ca25f8f2 100755 --- a/packages/app/src/pages/play/[play_id].jsx +++ b/packages/app/src/pages/play/[play_id].jsx @@ -5,6 +5,7 @@ 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" @@ -53,6 +54,10 @@ export default (props) => { app.cores.player.startPlaylist(playlist.list, index) } + const handleTrackLike = async (track) => { + return await PlaylistsModel.toogleTrackLike(track._id) + } + const makeSearch = (value) => { const options = { includeScore: true, @@ -77,6 +82,7 @@ export default (props) => { order={index + 1} track={item} onClick={() => handleOnClickTrack(item)} + onLike={() => handleTrackLike(item)} /> }) } @@ -95,6 +101,34 @@ export default (props) => { 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(() => { loadData() diff --git a/packages/comty.js/src/models/playlists/index.js b/packages/comty.js/src/models/playlists/index.js index 536a3208..7a31b974 100755 --- a/packages/comty.js/src/models/playlists/index.js +++ b/packages/comty.js/src/models/playlists/index.js @@ -107,4 +107,18 @@ export default class PlaylistsModel { return data } + + static toogleTrackLike = async (track_id) => { + if (!track_id) { + throw new Error("Track ID is required") + } + + const { data } = await request({ + instance: PlaylistsModel.api_instance, + method: "POST", + url: `/tracks/${track_id}/toggle-like`, + }) + + return data + } } \ No newline at end of file