muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

dropping audio attaches

Browse source
This commit is contained in:
Fedor Katurov 2019-11-01 16:47:04 +07:00
parent 5a46bef7ca
commit cfeafcdc04
3 changed files with 59 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/media/AudioPlayer/index.tsx
View file

@ -24,11 +24,13 @@ type Props = ReturnType<typeof mapStateToProps> &
typeof mapDispatchToProps & { typeof mapDispatchToProps & {
file: IFile; file: IFile;
nonInteractive?: boolean; nonInteractive?: boolean;
onDrop?: (id: IFile['id']) => void;
}; };
const AudioPlayerUnconnected = memo( const AudioPlayerUnconnected = memo(
({ ({
file, file,
onDrop,
nonInteractive, nonInteractive,
player: { file: current, status }, player: { file: current, status },
playerSetFileAndPlay, playerSetFileAndPlay,
@ -72,6 +74,12 @@ const AudioPlayerUnconnected = memo(
[playerSeek] [playerSeek]
); );
const onDropClick = useCallback(() => {
if (!onDrop) return;
onDrop(file.id);
}, [file, onDrop]);
useEffect(() => { useEffect(() => {
const active = current && current.id === file.id; const active = current && current.id === file.id;
setPlaying(current && current.id === file.id); setPlaying(current && current.id === file.id);
@ -90,6 +98,12 @@ const AudioPlayerUnconnected = memo(
return ( return (
<div onClick={onPlay} className={classNames(styles.wrap, { playing })}> <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
{onDrop && (
<div className={styles.drop} onMouseDown={onDropClick}>
<Icon icon="close" />
</div>
)}
<div className={styles.playpause}> <div className={styles.playpause}>
{playing && status === PLAYER_STATES.PLAYING ? ( {playing && status === PLAYER_STATES.PLAYING ? (
<Icon icon="pause" /> <Icon icon="pause" />
@ -97,6 +111,7 @@ const AudioPlayerUnconnected = memo(
<Icon icon="play" /> <Icon icon="play" />
)} )}
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.title}>{title || 'Unknown'}</div> <div className={styles.title}>{title || 'Unknown'}</div>

21
src/components/media/AudioPlayer/styles.scss
View file

@ -109,3 +109,24 @@
min-width: 10px; min-width: 10px;
transition: width 0.5s; transition: width 0.5s;
} }
.drop {
width: 24px;
height: 24px;
background: #222222;
position: absolute;
right: 10px;
top: 10px;
border-radius: 12px;
z-index: 2;
transition: background-color 250ms, opacity 0.25s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
svg {
width: 20px;
height: 20px;
}
}

42
src/components/node/CommentForm/index.tsx
View file

@ -202,26 +202,30 @@ const CommentFormUnconnected: FC<IProps> = ({
{(!!images.length || !!audios.length) && ( {(!!images.length || !!audios.length) && (
<div className={styles.attaches}> <div className={styles.attaches}>
<SortableImageGrid {!!images.length && (
onDrop={onFileDrop} <SortableImageGrid
onSortEnd={onImageMove} onDrop={onFileDrop}
axis="xy" onSortEnd={onImageMove}
items={images} axis="xy"
locked={locked_images} items={images}
pressDelay={50} locked={locked_images}
helperClass={styles.helper} pressDelay={50}
size={120} helperClass={styles.helper}
/> size={120}
/>
)}
<SortableAudioGrid {!!audios.length && (
items={audios} <SortableAudioGrid
onDrop={onFileDrop} items={audios}
onSortEnd={onAudioMove} onDrop={onFileDrop}
axis="y" onSortEnd={onAudioMove}
locked={[]} axis="y"
pressDelay={50} locked={[]}
helperClass={styles.helper} pressDelay={50}
/> helperClass={styles.helper}
/>
)}
</div> </div>
)} )}