mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 19:14:16 +00:00
delete unused pages
This commit is contained in:
parent
b9ce363ef3
commit
c4011f0674
@ -1,35 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
|
|
||||||
import * as antd from "antd"
|
|
||||||
|
|
||||||
import SyncModel from "@models/sync"
|
|
||||||
|
|
||||||
export default (props) => {
|
|
||||||
const [error, setError] = React.useState(null)
|
|
||||||
|
|
||||||
const makeSync = async () => {
|
|
||||||
const result = await SyncModel.spotifyCore.syncAuthCode(window.location.search.split("=")[1]).catch((err) => {
|
|
||||||
setError(err.message)
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
window.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
makeSync()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <antd.Result
|
|
||||||
status="error"
|
|
||||||
title="Error while syncing your Spotify account"
|
|
||||||
subTitle={error}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
return <h3>Please wait meanwhile we are syncing your Spotify account</h3>
|
|
||||||
}
|
|
||||||
@ -1,178 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import * as antd from "antd"
|
|
||||||
|
|
||||||
import { Icons } from "@components/Icons"
|
|
||||||
import UploadButton from "@components/UploadButton"
|
|
||||||
|
|
||||||
export default (props) => {
|
|
||||||
const [releaseName, setReleaseName] = React.useState(props.release.title)
|
|
||||||
const [releaseDescription, setReleaseDescription] = React.useState(props.release.description)
|
|
||||||
const [releaseThumbnail, setReleaseThumbnail] = React.useState(props.release.cover ?? props.release.thumbnail)
|
|
||||||
const [releaseVisibility, setReleaseVisibility] = React.useState(props.release.visibility)
|
|
||||||
const [releaseType, setReleaseType] = React.useState(props.release.type)
|
|
||||||
|
|
||||||
const handleReleaseTypeChange = (value) => {
|
|
||||||
setReleaseType(value)
|
|
||||||
|
|
||||||
props.onValueChange("type", value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTitleOnChange = (event) => {
|
|
||||||
setReleaseName(event.target.value)
|
|
||||||
|
|
||||||
props.onValueChange("title", event.target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDescriptionOnChange = (event) => {
|
|
||||||
setReleaseDescription(event.target.value)
|
|
||||||
|
|
||||||
props.onValueChange("description", event.target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCoverChange = (file) => {
|
|
||||||
setReleaseThumbnail(file.url)
|
|
||||||
|
|
||||||
props.onValueChange("cover", file.url)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRemoveCover = () => {
|
|
||||||
setReleaseThumbnail(null)
|
|
||||||
|
|
||||||
props.onValueChange("cover", null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleVisibilityChange = (value) => {
|
|
||||||
setReleaseVisibility(value)
|
|
||||||
|
|
||||||
props.onValueChange("public", value === "public")
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="playlistCreator_layout_row">
|
|
||||||
<div
|
|
||||||
className="playlistCreator_layout_column"
|
|
||||||
>
|
|
||||||
<div className="field">
|
|
||||||
<div className="field_header">
|
|
||||||
<Icons.MdOutlineMusicNote />
|
|
||||||
<span>Title</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Input
|
|
||||||
className="inputText"
|
|
||||||
placeholder="Publish Title"
|
|
||||||
size="large"
|
|
||||||
bordered={false}
|
|
||||||
value={releaseName}
|
|
||||||
onChange={handleTitleOnChange}
|
|
||||||
maxLength={120}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field">
|
|
||||||
<div className="field_header">
|
|
||||||
<Icons.MdOutlineDescription />
|
|
||||||
<span>Description</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Input.TextArea
|
|
||||||
className="inputText"
|
|
||||||
placeholder="Description (Support Markdown)"
|
|
||||||
bordered={false}
|
|
||||||
value={releaseDescription}
|
|
||||||
onChange={handleDescriptionOnChange}
|
|
||||||
maxLength={2500}
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Divider />
|
|
||||||
|
|
||||||
<div className="field">
|
|
||||||
<div className="field_header">
|
|
||||||
<Icons.IoMdRecording />
|
|
||||||
<span>Type</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Select
|
|
||||||
value={releaseType}
|
|
||||||
onChange={handleReleaseTypeChange}
|
|
||||||
defaultValue="album"
|
|
||||||
>
|
|
||||||
<antd.Select.Option value="album">Album</antd.Select.Option>
|
|
||||||
<antd.Select.Option value="ep">EP</antd.Select.Option>
|
|
||||||
<antd.Select.Option value="single">Single</antd.Select.Option>
|
|
||||||
</antd.Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field">
|
|
||||||
<div className="field_header">
|
|
||||||
<Icons.FiEye />
|
|
||||||
<span>Visibility</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Select
|
|
||||||
value={releaseVisibility}
|
|
||||||
onChange={handleVisibilityChange}
|
|
||||||
defaultValue={props.release.public ? "public" : "private"}
|
|
||||||
>
|
|
||||||
<antd.Select.Option value="public">Public</antd.Select.Option>
|
|
||||||
<antd.Select.Option value="private">Private</antd.Select.Option>
|
|
||||||
</antd.Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="playlistCreator_layout_column"
|
|
||||||
style={{
|
|
||||||
width: "50%",
|
|
||||||
maxWidth: "300px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="field">
|
|
||||||
<div className="field_header">
|
|
||||||
<Icons.MdImage />
|
|
||||||
<span>Cover</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="coverPreview">
|
|
||||||
<div className="coverPreview_preview">
|
|
||||||
<img src={releaseThumbnail ?? "/assets/no_song.png"} alt="Thumbnail" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="coverPreview_actions">
|
|
||||||
<UploadButton
|
|
||||||
onUploadDone={handleCoverChange}
|
|
||||||
multiple={false}
|
|
||||||
accept="image/*"
|
|
||||||
>
|
|
||||||
Upload cover
|
|
||||||
</UploadButton>
|
|
||||||
|
|
||||||
<antd.Button
|
|
||||||
onClick={handleRemoveCover}
|
|
||||||
disabled={!releaseThumbnail}
|
|
||||||
icon={<Icons.MdClose />}
|
|
||||||
type="text"
|
|
||||||
>
|
|
||||||
Remove Cover
|
|
||||||
</antd.Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Divider />
|
|
||||||
|
|
||||||
<div className="field">
|
|
||||||
{
|
|
||||||
props.release._id && <antd.Button
|
|
||||||
onClick={props.onDeletePlaylist}
|
|
||||||
icon={<Icons.MdDelete />}
|
|
||||||
danger
|
|
||||||
>
|
|
||||||
Delete Playlist
|
|
||||||
</antd.Button>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@ -1,423 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import * as antd from "antd"
|
|
||||||
import classnames from "classnames"
|
|
||||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
|
|
||||||
|
|
||||||
import UploadButton from "@components/UploadButton"
|
|
||||||
import { Icons } from "@components/Icons"
|
|
||||||
|
|
||||||
import MusicModel from "@models/music"
|
|
||||||
|
|
||||||
import "./index.less"
|
|
||||||
|
|
||||||
const UploadHint = (props) => {
|
|
||||||
return <div className="uploadHint">
|
|
||||||
<Icons.MdPlaylistAdd />
|
|
||||||
<p>Upload your tracks</p>
|
|
||||||
<p>Drag and drop your tracks here or click this box to start uploading files.</p>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
const FileItemEditor = (props) => {
|
|
||||||
const [track, setTrack] = React.useState(props.track ?? {})
|
|
||||||
|
|
||||||
const handleChange = (key, value) => {
|
|
||||||
setTrack((oldData) => {
|
|
||||||
return {
|
|
||||||
...oldData,
|
|
||||||
[key]: value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const onRefreshCache = () => {
|
|
||||||
props.onRefreshCache(track)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onClose = () => {
|
|
||||||
if (typeof props.close === "function") {
|
|
||||||
props.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onSave = async () => {
|
|
||||||
await props.onSave(track)
|
|
||||||
|
|
||||||
if (typeof props.close === "function") {
|
|
||||||
props.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="fileItemEditor">
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.MdImage />
|
|
||||||
<span>Thumbnail</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field_thumnail">
|
|
||||||
<img src={track.cover ?? track.thumbnail} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_actions">
|
|
||||||
<UploadButton
|
|
||||||
accept="image/*"
|
|
||||||
onUploadDone={(file) => handleChange("cover", file.url)}
|
|
||||||
/>
|
|
||||||
{
|
|
||||||
(track.cover ?? track.thumbnail) && <antd.Button
|
|
||||||
icon={<Icons.MdClose />}
|
|
||||||
type="text"
|
|
||||||
onClick={() => handleChange("cover", null)}
|
|
||||||
>
|
|
||||||
Remove
|
|
||||||
</antd.Button>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.MdOutlineMusicNote />
|
|
||||||
<span>Title</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Input
|
|
||||||
value={track.title}
|
|
||||||
placeholder="Track title"
|
|
||||||
onChange={(e) => handleChange("title", e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.FiUser />
|
|
||||||
<span>Artist</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Input
|
|
||||||
value={track.artist}
|
|
||||||
placeholder="Artist"
|
|
||||||
onChange={(e) => handleChange("artist", e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.MdAlbum />
|
|
||||||
<span>Album</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Input
|
|
||||||
value={track.album}
|
|
||||||
placeholder="Album"
|
|
||||||
onChange={(e) => handleChange("album", e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.MdExplicit />
|
|
||||||
<span>Explicit</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Switch
|
|
||||||
checked={track.explicit}
|
|
||||||
onChange={(value) => handleChange("explicit", value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.MdTimeline />
|
|
||||||
<span>Timestamps</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Button
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</antd.Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Divider
|
|
||||||
style={{
|
|
||||||
margin: "5px 0",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.MdLyrics />
|
|
||||||
<span>Enable lyrics</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Switch
|
|
||||||
checked={track.lyricsEnabled}
|
|
||||||
onChange={(value) => handleChange("lyricsEnabled", value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.MdTextFormat />
|
|
||||||
<span>Upload LRC</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Button
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
Upload
|
|
||||||
</antd.Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_field">
|
|
||||||
<div className="fileItemEditor_field_header">
|
|
||||||
<Icons.FiTag />
|
|
||||||
<span>Spotify ID</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<antd.Input
|
|
||||||
value={track.spotifyId}
|
|
||||||
placeholder="ID"
|
|
||||||
onChange={(e) => handleChange("spotifyId", e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileItemEditor_actions">
|
|
||||||
{
|
|
||||||
track._id && <antd.Button
|
|
||||||
type="text"
|
|
||||||
icon={<Icons.MdRefresh />}
|
|
||||||
onClick={onRefreshCache}
|
|
||||||
>
|
|
||||||
Refresh Cache
|
|
||||||
</antd.Button>
|
|
||||||
}
|
|
||||||
<antd.Button
|
|
||||||
type="text"
|
|
||||||
icon={<Icons.MdClose />}
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</antd.Button>
|
|
||||||
|
|
||||||
<antd.Button
|
|
||||||
type="primary"
|
|
||||||
icon={<Icons.MdCheck />}
|
|
||||||
onClick={onSave}
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</antd.Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
const FileListItem = (props) => {
|
|
||||||
const isUploading = props.track.status === "uploading"
|
|
||||||
|
|
||||||
return <Draggable key={props.track.uid} draggableId={props.track.uid} index={props.index}>
|
|
||||||
{(provided, snapshot) => {
|
|
||||||
return <div
|
|
||||||
className={classnames(
|
|
||||||
"fileListItem",
|
|
||||||
{
|
|
||||||
["uploading"]: isUploading,
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
ref={provided.innerRef}
|
|
||||||
{...provided.draggableProps}
|
|
||||||
>
|
|
||||||
|
|
||||||
{
|
|
||||||
isUploading &&
|
|
||||||
<Icons.LoadingOutlined
|
|
||||||
spin
|
|
||||||
className="fileListItem_loadingIcon"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div className={classnames(
|
|
||||||
"fileListItem_progress",
|
|
||||||
{
|
|
||||||
["hidden"]: !isUploading,
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
<antd.Progress
|
|
||||||
percent={props.track.progress ?? 0}
|
|
||||||
status={props.track.status === "error" ? "exception" : (props.track.progress === 100 ? "success" : "active")}
|
|
||||||
showInfo={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileListItem_cover">
|
|
||||||
<img
|
|
||||||
src={props.track.cover ?? props.track?.thumbnail}
|
|
||||||
alt="Track cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileListItem_details">
|
|
||||||
<div className="fileListItem_namings">
|
|
||||||
<h4>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
marginRight: "0.6rem",
|
|
||||||
fontSize: "0.7rem"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{props.index + 1} -
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{
|
|
||||||
props.track?.title ?? "Unknown title"
|
|
||||||
}
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "0.6rem",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{
|
|
||||||
props.track?.artist ?? "Unknown artist"
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>-</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
{
|
|
||||||
props.track?.album ?? "Unknown album"
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="fileListItem_actions">
|
|
||||||
<antd.Button
|
|
||||||
type="primary"
|
|
||||||
icon={<Icons.MdEdit />}
|
|
||||||
onClick={props.onClickEdit}
|
|
||||||
disabled={isUploading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<antd.Popconfirm
|
|
||||||
title="Delete this track?"
|
|
||||||
description="Are you sure to delete this track?"
|
|
||||||
onConfirm={props.onClickRemove}
|
|
||||||
okText="Yes"
|
|
||||||
cancelText="No"
|
|
||||||
>
|
|
||||||
<antd.Button
|
|
||||||
icon={<Icons.MdDelete />}
|
|
||||||
/>
|
|
||||||
</antd.Popconfirm>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
{...provided.dragHandleProps}
|
|
||||||
className="fileListItem_dragHandle"
|
|
||||||
>
|
|
||||||
<Icons.MdDragIndicator />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}}
|
|
||||||
</Draggable>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props) => {
|
|
||||||
const onClickEditTrack = (track) => {
|
|
||||||
app.layout.drawer.open("track_editor", FileItemEditor, {
|
|
||||||
type: "drawer",
|
|
||||||
props: {
|
|
||||||
width: "30vw",
|
|
||||||
minWidth: "600px",
|
|
||||||
},
|
|
||||||
componentProps: {
|
|
||||||
track,
|
|
||||||
onSave: (newTrackData) => {
|
|
||||||
console.log("Saving track", newTrackData)
|
|
||||||
|
|
||||||
props.handleTrackInfoChange(newTrackData.uid, newTrackData)
|
|
||||||
},
|
|
||||||
onRefreshCache: () => {
|
|
||||||
console.log("Refreshing cache for track", track.uid)
|
|
||||||
|
|
||||||
MusicModel.refreshTrackCache(track._id)
|
|
||||||
.catch(() => {
|
|
||||||
app.message.error("Failed to refresh cache for track")
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
app.message.success("Successfully refreshed cache for track")
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="tracksUploads">
|
|
||||||
<p>
|
|
||||||
Uploading files that are not permitted by our <a onClick={() => app.location.push("/terms")}>Terms of Service</a> may result in your account being suspended.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="uploadBox">
|
|
||||||
<antd.Upload
|
|
||||||
className="uploader"
|
|
||||||
customRequest={props.handleUploadTrack}
|
|
||||||
onChange={props.onTrackUploaderChange}
|
|
||||||
accept="audio/*"
|
|
||||||
multiple
|
|
||||||
showUploadList={false}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
props.fileList.length === 0 ?
|
|
||||||
<UploadHint /> : <antd.Button
|
|
||||||
className="uploadMoreButton"
|
|
||||||
icon={<Icons.FiPlus />}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</antd.Upload>
|
|
||||||
|
|
||||||
<div className="fileList_wrapper">
|
|
||||||
<DragDropContext onDragEnd={props.handleTrackDragEnd}>
|
|
||||||
<Droppable droppableId="droppable">
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
{...provided.droppableProps}
|
|
||||||
ref={provided.innerRef}
|
|
||||||
className="fileList"
|
|
||||||
>
|
|
||||||
{
|
|
||||||
props.trackList.map((track, index) => {
|
|
||||||
return <FileListItem
|
|
||||||
index={index}
|
|
||||||
track={track}
|
|
||||||
onClickChangeCover={() => {
|
|
||||||
return props.handleTrackCoverChange(track.uid)
|
|
||||||
}}
|
|
||||||
onTitleChange={(event) => {
|
|
||||||
return props.handleTrackInfoChange(track.uid, "title", event.target.value)
|
|
||||||
}}
|
|
||||||
onClickRemove={() => {
|
|
||||||
return props.handleTrackRemove(track.uid)
|
|
||||||
}}
|
|
||||||
onClickEdit={() => {
|
|
||||||
return onClickEditTrack(track)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
})
|
|
||||||
}
|
|
||||||
{provided.placeholder}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Droppable>
|
|
||||||
</DragDropContext>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@ -1,387 +0,0 @@
|
|||||||
.tracksUploads {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.uploadBox {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
//height: 100%;
|
|
||||||
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
.ant-upload {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.uploadMoreButton {
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
outline: 1px solid var(--border-color);
|
|
||||||
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
height: 70px;
|
|
||||||
background-color: var(--background-color-accent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-upload-wrapper {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileList_wrapper {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// add a blur effect on top and bottom to decorate overflown content
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
z-index: 50;
|
|
||||||
content: "";
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
background: linear-gradient(0deg,
|
|
||||||
rgba(255, 255, 255, 0) 0%,
|
|
||||||
var(--background-color-primary) 40%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
background: linear-gradient(180deg,
|
|
||||||
rgba(255, 255, 255, 0) 0%,
|
|
||||||
var(--background-color-primary) 40%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileList {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
max-height: 60vh;
|
|
||||||
|
|
||||||
overflow-y: scroll;
|
|
||||||
|
|
||||||
padding: 15px 0;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.fileListItem {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
z-index: 49;
|
|
||||||
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
background-color: var(--background-color-accent);
|
|
||||||
color: var(--text-color);
|
|
||||||
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
&.uploading {
|
|
||||||
.fileListItem_cover {
|
|
||||||
img {
|
|
||||||
filter: blur(3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileListItem_progress {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.ant-progress-line {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hidden {
|
|
||||||
animation: hide 0.2s ease-in-out forwards;
|
|
||||||
animation-delay: 2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileListItem_loadingIcon {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-btn {
|
|
||||||
svg {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileListItem_cover {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
|
|
||||||
object-fit: cover;
|
|
||||||
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileListItem_details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
margin-left: 20px;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.fileListItem_namings {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileListItem_artist {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileListItem_actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.ant-btn {
|
|
||||||
svg {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileListItem_dragHandle {
|
|
||||||
color: var(--text-color);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploadHint {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-self: center;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileItemEditor {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
.fileItemEditor_actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
align-self: center;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileItemEditor_field {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.fileItemEditor_field_header {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
//margin-bottom: 10px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileItemEditor_field_actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileItemEditor_field_thumnail {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 15vw;
|
|
||||||
height: 15vw;
|
|
||||||
|
|
||||||
max-width: 330px;
|
|
||||||
max-height: 330px;
|
|
||||||
|
|
||||||
object-fit: cover;
|
|
||||||
|
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes hide {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
99% {
|
|
||||||
opacity: 0;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
width: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,646 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import * as antd from "antd"
|
|
||||||
import jsmediatags from "jsmediatags/dist/jsmediatags.min.js"
|
|
||||||
|
|
||||||
import MusicModel from "@models/music"
|
|
||||||
|
|
||||||
import BasicInformation from "./components/BasicInformation"
|
|
||||||
import TracksUploads from "./components/TracksUploads"
|
|
||||||
|
|
||||||
import "./index.less"
|
|
||||||
|
|
||||||
const allowedTrackFieldChanges = [
|
|
||||||
"title",
|
|
||||||
"artist",
|
|
||||||
"cover",
|
|
||||||
"thumbnail",
|
|
||||||
"album",
|
|
||||||
"year",
|
|
||||||
"genre",
|
|
||||||
"comment",
|
|
||||||
"explicit",
|
|
||||||
"lyricsEnabled",
|
|
||||||
"spotifyId",
|
|
||||||
"public",
|
|
||||||
]
|
|
||||||
|
|
||||||
function createDefaultTrackData({
|
|
||||||
uid,
|
|
||||||
status = "uploading",
|
|
||||||
title,
|
|
||||||
artist,
|
|
||||||
album,
|
|
||||||
source,
|
|
||||||
cover = "https://storage.ragestudio.net/comty-static-assets/default_song.png",
|
|
||||||
lyricsEnabled = false,
|
|
||||||
explicit = false,
|
|
||||||
spotifyId = null,
|
|
||||||
}) {
|
|
||||||
return {
|
|
||||||
uid: uid,
|
|
||||||
title: title,
|
|
||||||
artist: artist,
|
|
||||||
album: album,
|
|
||||||
source: source,
|
|
||||||
status: status,
|
|
||||||
cover: cover,
|
|
||||||
lyricsEnabled: lyricsEnabled,
|
|
||||||
explicit: explicit,
|
|
||||||
spotifyId: spotifyId,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class PlaylistPublisherSteps extends React.Component {
|
|
||||||
state = {
|
|
||||||
releaseData: {
|
|
||||||
type: "album",
|
|
||||||
public: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
fileList: [],
|
|
||||||
trackList: [],
|
|
||||||
pendingTracksUpload: [],
|
|
||||||
|
|
||||||
loading: true,
|
|
||||||
submitting: false,
|
|
||||||
|
|
||||||
currentStep: 0,
|
|
||||||
}
|
|
||||||
|
|
||||||
_hacks = {
|
|
||||||
revertTrackOrders: () => {
|
|
||||||
this.setState({
|
|
||||||
trackList: this.state.trackList.reverse()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
enableLyricsForAllTracks: () => {
|
|
||||||
this.setState({
|
|
||||||
trackList: this.state.trackList.map((track) => {
|
|
||||||
track.lyricsEnabled = true
|
|
||||||
return track
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
disableLyricsForAllTracks: () => {
|
|
||||||
this.setState({
|
|
||||||
trackList: this.state.trackList.map((track) => {
|
|
||||||
track.lyricsEnabled = false
|
|
||||||
return track
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
orderTracksByFileName: () => {
|
|
||||||
let fileList = this.state.fileList
|
|
||||||
|
|
||||||
fileList = fileList.sort((a, b) => {
|
|
||||||
return a.name.localeCompare(b.name)
|
|
||||||
})
|
|
||||||
|
|
||||||
const trackList = fileList.map((file) => {
|
|
||||||
const track = this.state.trackList.find((track) => track.uid === file.uid)
|
|
||||||
|
|
||||||
return track
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(fileList, trackList)
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
fileList,
|
|
||||||
trackList
|
|
||||||
})
|
|
||||||
},
|
|
||||||
orderByArrayIndex: (order) => {
|
|
||||||
const trackList = this.state.trackList
|
|
||||||
|
|
||||||
let orderedTrackList = trackList.map((track, index) => {
|
|
||||||
// find in order
|
|
||||||
const orderIndex = order.findIndex((_track) => {
|
|
||||||
return _track.title === track.title && _track.artist === track.artist && _track.album === track.album
|
|
||||||
})
|
|
||||||
|
|
||||||
if (orderIndex === -1) {
|
|
||||||
track.order = index
|
|
||||||
} else {
|
|
||||||
track.order = orderIndex
|
|
||||||
}
|
|
||||||
|
|
||||||
return track
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(orderedTrackList)
|
|
||||||
|
|
||||||
orderedTrackList = orderedTrackList.sort((a, b) => {
|
|
||||||
return a.order - b.order
|
|
||||||
})
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
trackList: orderedTrackList
|
|
||||||
})
|
|
||||||
},
|
|
||||||
removeMetadataFromAllTracks: () => {
|
|
||||||
this.setState({
|
|
||||||
trackList: this.state.trackList.map((track) => {
|
|
||||||
delete track.metadata
|
|
||||||
|
|
||||||
return track
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
updateReleaseData = (key, value) => {
|
|
||||||
this.setState({
|
|
||||||
releaseData: {
|
|
||||||
...this.state.releaseData,
|
|
||||||
[key]: value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
updateTrackList = (trackList) => {
|
|
||||||
this.setState({
|
|
||||||
trackList
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
canSubmit = () => {
|
|
||||||
const { releaseData, trackList, pendingTracksUpload } = this.state
|
|
||||||
|
|
||||||
const hasValidTitle = releaseData.title && releaseData.title.length > 0
|
|
||||||
const hasTracks = trackList.length > 0
|
|
||||||
const hasPendingUploads = pendingTracksUpload.length > 0
|
|
||||||
const tracksHasValidData = trackList.every((track) => {
|
|
||||||
return track.title !== null && track.title?.length !== 0 && track.source !== null && track.source?.length !== 0
|
|
||||||
})
|
|
||||||
|
|
||||||
return hasValidTitle && hasTracks && !hasPendingUploads && tracksHasValidData
|
|
||||||
}
|
|
||||||
|
|
||||||
submit = async () => {
|
|
||||||
this.setState({
|
|
||||||
submitting: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const { releaseData: releaseData, trackList } = this.state
|
|
||||||
|
|
||||||
console.log(`Submitting playlist ${releaseData.title} with ${trackList.length} tracks`, releaseData, trackList)
|
|
||||||
|
|
||||||
const result = await MusicModel.putRelease({
|
|
||||||
...releaseData,
|
|
||||||
list: trackList,
|
|
||||||
})
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
submitting: false
|
|
||||||
})
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
app.message.success("Playlist published")
|
|
||||||
|
|
||||||
if (typeof this.props.onModification === "function") {
|
|
||||||
this.props.onModification()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof this.props.close === "function") {
|
|
||||||
this.props.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TRACK UPLOADS METHODS
|
|
||||||
analyzeTrackMetadata = async (file) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
jsmediatags.read(file, {
|
|
||||||
onSuccess: (data) => {
|
|
||||||
return resolve(data)
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
return reject(error)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleFileProgress = (file, progress) => {
|
|
||||||
const trackList = this.state.trackList
|
|
||||||
|
|
||||||
const track = trackList.find((track) => track.uid === file.uid)
|
|
||||||
|
|
||||||
if (track) {
|
|
||||||
track.progress = progress
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
trackList
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleUploadTrack = async (req) => {
|
|
||||||
const response = await app.cores.remoteStorage.uploadFile(req.file, {
|
|
||||||
onProgress: this.handleFileProgress,
|
|
||||||
service: "premium-cdn"
|
|
||||||
}).catch((error) => {
|
|
||||||
console.error(error)
|
|
||||||
antd.message.error(error)
|
|
||||||
|
|
||||||
req.onError(error)
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
|
|
||||||
if (response) {
|
|
||||||
req.onSuccess(response)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTrackDragEnd = (result) => {
|
|
||||||
if (!result.destination) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const trackList = this.state.trackList
|
|
||||||
|
|
||||||
const [removed] = trackList.splice(result.source.index, 1)
|
|
||||||
|
|
||||||
trackList.splice(result.destination.index, 0, removed)
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
trackList,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTrackRemove = (uid) => {
|
|
||||||
this.setState({
|
|
||||||
fileList: this.state.fileList.filter((file) => file.uid !== uid),
|
|
||||||
trackList: this.state.trackList.filter((file) => file.uid !== uid),
|
|
||||||
pendingTracksUpload: this.state.pendingTracksUpload.filter((file_uid) => file_uid !== uid)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTrackInfoChange = (uid, key, value) => {
|
|
||||||
if (!uid) {
|
|
||||||
console.error(`Cannot update track withouth uid`)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let trackList = this.state.trackList
|
|
||||||
|
|
||||||
const track = trackList.find((track) => track.uid === uid)
|
|
||||||
|
|
||||||
if (typeof key === "object") {
|
|
||||||
allowedTrackFieldChanges.forEach((_key) => {
|
|
||||||
if (typeof key[_key] !== "undefined") {
|
|
||||||
track[_key] = key[_key]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
if (!allowedTrackFieldChanges.includes(key)) {
|
|
||||||
console.error(`Cannot update track with key ${key}`)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
track[key] = value
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
trackList: trackList
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(`New data for track ${uid}: `, this.state.trackList.find((track) => track.uid === uid))
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTrackCoverChange = async (uid, file) => {
|
|
||||||
if (!uid) {
|
|
||||||
console.error(`Cannot update track withouth uid`)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// upload cover file
|
|
||||||
const result = await app.cores.remoteStorage.uploadFile(file, {
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(`Uploaded cover for track ${uid}: `, result)
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
this.handleTrackInfoChange(uid, "cover", result.url)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDeletePlaylist = async () => {
|
|
||||||
if (!this.props.release_id) {
|
|
||||||
console.error(`Cannot delete release without id`)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
antd.Modal.confirm({
|
|
||||||
title: "Are you sure you want to delete this release?",
|
|
||||||
content: "This action cannot be undone",
|
|
||||||
okText: "Delete",
|
|
||||||
okType: "danger",
|
|
||||||
cancelText: "Cancel",
|
|
||||||
onOk: async () => {
|
|
||||||
const result = await MusicModel.deleteRelease(this.props.release_id, {
|
|
||||||
remove_with_tracks: true
|
|
||||||
})
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
app.message.success("Playlist deleted")
|
|
||||||
|
|
||||||
if (typeof this.props.onModification === "function") {
|
|
||||||
this.props.onModification()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof this.props.close === "function") {
|
|
||||||
this.props.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onTrackUploaderChange = async (change) => {
|
|
||||||
switch (change.file.status) {
|
|
||||||
case "uploading": {
|
|
||||||
const { pendingTracksUpload } = this.state
|
|
||||||
|
|
||||||
if (!pendingTracksUpload.includes(change.file.uid)) {
|
|
||||||
pendingTracksUpload.push(change.file.uid)
|
|
||||||
}
|
|
||||||
|
|
||||||
const trackMetadata = await this.analyzeTrackMetadata(change.file.originFileObj)
|
|
||||||
.catch((error) => {
|
|
||||||
console.error(`Failed to analyze track metadata: `, error)
|
|
||||||
|
|
||||||
// return empty metadata
|
|
||||||
return {
|
|
||||||
tags: {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(trackMetadata)
|
|
||||||
|
|
||||||
if (trackMetadata.tags.picture) {
|
|
||||||
const data = trackMetadata.tags.picture.data
|
|
||||||
const format = trackMetadata.tags.picture.format
|
|
||||||
|
|
||||||
if (data && format) {
|
|
||||||
console.log(data, format)
|
|
||||||
|
|
||||||
const filenameExt = format.split("/")[1]
|
|
||||||
const filename = `cover.${filenameExt}`
|
|
||||||
|
|
||||||
const byteArray = new Uint8Array(data)
|
|
||||||
const blob = new Blob([byteArray], { type: data.type })
|
|
||||||
|
|
||||||
// create a file object
|
|
||||||
const file = new File([blob], filename, {
|
|
||||||
type: format,
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(file)
|
|
||||||
|
|
||||||
this.handleTrackCoverChange(change.file.uid, file)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
pendingTracksUpload: pendingTracksUpload,
|
|
||||||
fileList: [...this.state.fileList, change.file],
|
|
||||||
trackList: [...this.state.trackList, createDefaultTrackData({
|
|
||||||
uid: change.file.uid,
|
|
||||||
title: trackMetadata.tags.title ?? change.file.name,
|
|
||||||
artist: trackMetadata.tags.artist ?? null,
|
|
||||||
album: trackMetadata.tags.album ?? null,
|
|
||||||
tags: trackMetadata.tags,
|
|
||||||
})]
|
|
||||||
})
|
|
||||||
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "done": {
|
|
||||||
// remove pending file
|
|
||||||
this.setState({
|
|
||||||
pendingTracksUpload: this.state.pendingTracksUpload.filter((uid) => uid !== change.file.uid)
|
|
||||||
})
|
|
||||||
|
|
||||||
// update file url in the track info
|
|
||||||
const track = this.state.trackList.find((file) => file.uid === change.file.uid)
|
|
||||||
|
|
||||||
if (track) {
|
|
||||||
track.source = change.file.response.url
|
|
||||||
track.status = "done"
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
trackList: this.state.trackList
|
|
||||||
})
|
|
||||||
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case "error": {
|
|
||||||
// remove pending file
|
|
||||||
this.handleTrackRemove(change.file.uid)
|
|
||||||
|
|
||||||
// open a dialog to show the error and ask user to retry
|
|
||||||
antd.Modal.error({
|
|
||||||
title: "Upload failed",
|
|
||||||
content: "An error occurred while uploading the file. You want to retry?",
|
|
||||||
cancelText: "No",
|
|
||||||
okText: "Retry",
|
|
||||||
onOk: () => {
|
|
||||||
this.handleUploadTrack(change)
|
|
||||||
},
|
|
||||||
onCancel: () => {
|
|
||||||
this.handleTrackRemove(change.file.uid)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
case "removed": {
|
|
||||||
this.handleTrackRemove(change.file.uid)
|
|
||||||
}
|
|
||||||
|
|
||||||
default: {
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
steps = [
|
|
||||||
{
|
|
||||||
title: "Information",
|
|
||||||
crender: BasicInformation,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Tracks",
|
|
||||||
crender: TracksUploads,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
onChangeStep = (toStep) => {
|
|
||||||
// check if can change step
|
|
||||||
if (toStep > this.state.currentStep) {
|
|
||||||
if (!this.canNextStep()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
currentStep: toStep
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
nextStep = () => {
|
|
||||||
if (!this.canNextStep()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextStep = this.state.currentStep + 1
|
|
||||||
|
|
||||||
if (nextStep >= this.steps.length) {
|
|
||||||
return this.submit()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
currentStep: nextStep
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
previousStep = () => {
|
|
||||||
const previusStep = this.state.currentStep - 1
|
|
||||||
|
|
||||||
if (previusStep < 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
currentStep: previusStep
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
canNextStep = () => {
|
|
||||||
// check current step
|
|
||||||
switch (this.state.currentStep) {
|
|
||||||
case 0:
|
|
||||||
return typeof this.state.releaseData.title === "string" && this.state.releaseData.title.length > 0
|
|
||||||
case 1:
|
|
||||||
return this.canSubmit()
|
|
||||||
default:
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
window._hacks = this._hacks
|
|
||||||
|
|
||||||
if (this.props.release_id) {
|
|
||||||
this.loadReleaseData(this.props.release_id)
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
loading: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
delete window._hacks
|
|
||||||
}
|
|
||||||
|
|
||||||
loadReleaseData = async (id) => {
|
|
||||||
console.log(`Loading release data for ${id}...`)
|
|
||||||
|
|
||||||
const releaseData = await MusicModel.getReleaseData(id).catch((error) => {
|
|
||||||
console.error(error)
|
|
||||||
antd.message.error(error)
|
|
||||||
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(releaseData)
|
|
||||||
|
|
||||||
if (releaseData) {
|
|
||||||
const trackList = releaseData.list.map((track) => {
|
|
||||||
return {
|
|
||||||
...track,
|
|
||||||
_id: track._id,
|
|
||||||
uid: track._id,
|
|
||||||
status: "done",
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
releaseData: releaseData,
|
|
||||||
trackList: trackList,
|
|
||||||
fileList: trackList.map((track) => {
|
|
||||||
return {
|
|
||||||
uid: track.uid,
|
|
||||||
name: track.title,
|
|
||||||
status: "done",
|
|
||||||
url: track.source
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
loading: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.state.loading) {
|
|
||||||
return <antd.Skeleton active />
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="playlistCreator">
|
|
||||||
<antd.Steps
|
|
||||||
direction="horizontal"
|
|
||||||
current={this.state.currentStep}
|
|
||||||
onChange={this.onChangeStep}
|
|
||||||
items={this.steps}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="stepContent">
|
|
||||||
{
|
|
||||||
React.createElement(this.steps[this.state.currentStep].crender, {
|
|
||||||
release: this.state.releaseData,
|
|
||||||
|
|
||||||
trackList: this.state.trackList,
|
|
||||||
fileList: this.state.fileList,
|
|
||||||
|
|
||||||
onValueChange: (key, value) => {
|
|
||||||
this.updateReleaseData(key, value)
|
|
||||||
},
|
|
||||||
|
|
||||||
onDeletePlaylist: this.handleDeletePlaylist,
|
|
||||||
|
|
||||||
handleUploadTrack: this.handleUploadTrack,
|
|
||||||
handleTrackDragEnd: this.handleTrackDragEnd,
|
|
||||||
handleTrackRemove: this.handleTrackRemove,
|
|
||||||
handleTrackInfoChange: this.handleTrackInfoChange,
|
|
||||||
onTrackUploaderChange: this.onTrackUploaderChange,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="stepActions">
|
|
||||||
<antd.Button
|
|
||||||
onClick={this.previousStep}
|
|
||||||
disabled={this.state.currentStep === 0}
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</antd.Button>
|
|
||||||
|
|
||||||
<antd.Button
|
|
||||||
type="primary"
|
|
||||||
onClick={this.nextStep}
|
|
||||||
disabled={!this.canNextStep()}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
this.state.currentStep === this.steps.length - 1 ? "Finish" : "Next"
|
|
||||||
}
|
|
||||||
</antd.Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
.playlistCreator {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
//justify-content: center;
|
|
||||||
|
|
||||||
width: 50vw;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
min-width: 800px;
|
|
||||||
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
|
|
||||||
.stepContent {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stepActions {
|
|
||||||
position: sticky;
|
|
||||||
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
//justify-content: flex-end;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
background-color: var(--background-color-accent);
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlistCreator_layout_row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
.playlistCreator_layout_column {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-self: start;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
color: var(--text-color);
|
|
||||||
|
|
||||||
.field_header {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputText {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
outline: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.coverPreview {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.coverPreview_preview {
|
|
||||||
align-self: center;
|
|
||||||
|
|
||||||
width: 15vw;
|
|
||||||
height: 15vw;
|
|
||||||
|
|
||||||
max-width: 300px;
|
|
||||||
max-height: 300px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 15vw;
|
|
||||||
height: 15vw;
|
|
||||||
|
|
||||||
max-width: 300px;
|
|
||||||
max-height: 300px;
|
|
||||||
|
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.coverPreview_actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-steps-icon {
|
|
||||||
svg {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user