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

fix uploads

Browse Source
This commit is contained in:
SrGooglo 2023-04-13 00:24:39 +00:00
parent 16eb7eb437
commit b10f29fc5e
2 changed files with 51 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/app/src/pages/music/creator/index.jsx
View File

@ -20,8 +20,6 @@ const UploadHint = (props) => {
}
const FileListItem = React.memo((props) => {
console.log(props)
const isUploading = props.track.status === "uploading"
return <Draggable key={props.track.uid} draggableId={props.track.uid} index={props.index}>
@ -46,6 +44,10 @@ const FileListItem = React.memo((props) => {
}
<div className="fileListItem_cover">
<div className="fileListItem_cover_mask">
<Icons.MdEdit />
</div>
<img
src={props.track?.thumbnail}
alt="Track cover"
@ -160,13 +162,6 @@ export default class PlaylistCreator extends React.Component {
})
}
handleTrackRemove = (uid) => {
this.setState({
fileList: this.state.fileList.filter((file) => file.uid !== uid),
trackList: this.state.trackList.filter((file) => file.uid !== uid)
})
}
handleTrackCoverChange = (uid) => {
// open a file dialog
const fileInput = document.createElement("input")
@ -201,7 +196,7 @@ export default class PlaylistCreator extends React.Component {
this.setState({
fileList: this.state.fileList.filter((file) => file.uid !== uid),
trackList: this.state.trackList.filter((file) => file.uid !== uid),
pendingUploads: this.state.pendingUploads.filter((uid) => uid !== uid)
pendingUploads: this.state.pendingUploads.filter((file_uid) => file_uid !== uid)
})
}
@ -252,9 +247,7 @@ export default class PlaylistCreator extends React.Component {
}
case "error": {
// remove pending file
this.setState({
pendingUploads: this.state.pendingUploads.filter(uid => uid !== change.file.uid)
})
this.removeTrack(change.file.uid)
// open a dialog to show the error and ask user to retry
antd.Modal.error({
@ -271,7 +264,6 @@ export default class PlaylistCreator extends React.Component {
})
}
case "removed": {
// remove from file list and if it's pending, remove from pending list
this.removeTrack(change.file.uid)
}
@ -282,7 +274,9 @@ export default class PlaylistCreator extends React.Component {
}
handleUpload = async (req) => {
const response = await FilesModel.uploadFile(req.file).catch((error) => {
const response = await FilesModel.uploadFile(req.file, {
timeout: 2000
}).catch((error) => {
console.error(error)
antd.message.error(error)
@ -383,12 +377,12 @@ export default class PlaylistCreator extends React.Component {
let playlistPublishResponse = null
if (this.props.query.playlist_id) {
console.log(`Playlist ${this.props.query.playlist_id} is already published. Updating...`)
if (this.props.playlist_id) {
console.log(`Playlist ${this.props.playlist_id} is already published. Updating...`)
// update the playlist
playlistPublishResponse = await PlaylistModel.updatePlaylist({
_id: this.props.query.playlist_id,
_id: this.props.playlist_id,
title: playlistName,
description: playlistDescription,
thumbnail: playlistThumbnail,
@ -434,7 +428,7 @@ export default class PlaylistCreator extends React.Component {
loading: true
})
const deleteResponse = await PlaylistModel.deletePlaylist(this.props.query.playlist_id).catch((error) => {
const deleteResponse = await PlaylistModel.deletePlaylist(this.props.playlist_id).catch((error) => {
console.error(error)
antd.message.error(error)
@ -519,10 +513,10 @@ export default class PlaylistCreator extends React.Component {
}
componentDidMount() {
console.log(this.props.query.playlist_id)
console.log(this.props.playlist_id)
if (this.props.query.playlist_id) {
this.loadData(this.props.query.playlist_id)
if (this.props.playlist_id) {
this.loadData(this.props.playlist_id)
}
window._hacks = {
@ -537,25 +531,6 @@ export default class PlaylistCreator extends React.Component {
render() {
return <div className="playlistCreator">
<div className="header">
<h1>
<Icons.MdOutlineQueueMusic />
Creator
</h1>
<div className="actions">
{
this.props.query.playlist_id && <antd.Button
type="primary"
onClick={this.handleDeletePlaylist}
danger
>
Delete Playlist
</antd.Button>
}
</div>
</div>
<div className="inputField">
<Icons.MdOutlineMusicNote />
<antd.Input
@ -570,17 +545,20 @@ export default class PlaylistCreator extends React.Component {
</div>
<div className="inputField">
<Icons.MdOutlineDescription />
<antd.Input
<antd.Input.TextArea
className="inputText"
placeholder="Description"
placeholder="Description (Support Markdown)"
bordered={false}
value={this.state.playlistDescription}
onChange={this.handleDescriptionOnChange}
maxLength={2500}
value={this.state.playlistDescription}
rows={4}
/>
</div>
<div className="inputField">
<Icons.MdImage />
{
this.state.playlistThumbnail && <div className="coverPreview">
<img src={this.state.playlistThumbnail} alt="cover" />
@ -598,6 +576,7 @@ export default class PlaylistCreator extends React.Component {
</antd.Button>
</div>
}
{
!this.state.playlistThumbnail && <UploadButton
onUploadDone={(file) => {
@ -607,7 +586,6 @@ export default class PlaylistCreator extends React.Component {
}}
multiple={false}
accept="image/*"
icon={<Icons.MdImage />}
>
Upload cover
</UploadButton>
@ -651,7 +629,7 @@ export default class PlaylistCreator extends React.Component {
return this.handleTrackTitleOnChange(event, track.uid)
}}
onClickRemove={() => {
return this.handleTrackRemove(track.uid)
return this.removeTrack(track.uid)
}}
/>
})
@ -676,7 +654,7 @@ export default class PlaylistCreator extends React.Component {
}
</div>
<div>
<div className="actions">
<antd.Button
type="primary"
size="large"
@ -687,6 +665,16 @@ export default class PlaylistCreator extends React.Component {
>
Publish
</antd.Button>
{
this.props.playlist_id && <antd.Button
type="link"
onClick={this.handleDeletePlaylist}
danger
>
Delete Playlist
</antd.Button>
}
</div>
<div className="footer">

39
packages/app/src/pages/music/creator/index.less
View File

@ -9,34 +9,14 @@
transition: all 0.3s ease-in-out;
.header {
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 1rem;
justify-content: flex-end;
width: 100%;
margin-bottom: 10px;
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
.ant-btn {
margin-left: 10px;
&:first-child {
margin-left: 0;
}
}
}
gap: 20px;
}
.inputField {
@ -154,6 +134,8 @@
img {
filter: blur(3px);
}
pointer-events: none;
}
}
@ -197,6 +179,17 @@
object-fit: cover;
border-radius: 12px;
}
.fileListItem_cover_mask {
opacity: 0;
backdrop-filter: blur(3px);
}
&:hover {
.fileListItem_cover_mask {
opacity: 1;
}
}
}
.fileListItem_details {