1234567891011121314151617181920212223242526272829303132 |
- import { FileWrap, FileIconWrap, FileIcon, AudioPlayer, FileTitle, DownloaderFile } from "./AudioItem.style";
- import MusicIcon from '../../DropMediaItem/DropMediaFiles/icons8-music.png';
- import { useState } from "react";
- import { backendURL } from "../../../helpers/gql";
- import DownloadIcon from './icons8-download.png';
- import { saveFile } from "../../utils/saveFile";
- export const AudioItem = ({url, name}) => {
- const [isOpen, setIsOpen] = useState(false);
- const handleOpen = () => setIsOpen(!isOpen);
- return (
- <div>
- <FileWrap>
- <FileIconWrap isAudio={true} onClick={handleOpen}>
- <FileIcon src={MusicIcon}/>
- </FileIconWrap>
- <div>
- <FileTitle>{name}</FileTitle>
- <div style={{display: 'flex', justifyContent: 'right'}}>
- <DownloaderFile onClick={() => saveFile(`${backendURL}/${url}`, name)} src={DownloadIcon}></DownloaderFile>
- </div>
-
- </div>
- </FileWrap>
- {isOpen && <AudioPlayer controls src={`${backendURL}/${url || ''}`}/>}
- </div>
- )
- }
|