57 lines
1.8 KiB
React
57 lines
1.8 KiB
React
|
import {useState, React} from "react";
|
||
|
|
import jQuery from "jquery";
|
||
|
|
import Play from '@mui/icons-material/PlayArrow';
|
||
|
|
import Pause from '@mui/icons-material/Pause';
|
||
|
|
<style>
|
||
|
|
@import "@styles/player.css";
|
||
|
|
</style>
|
||
|
|
|
||
|
|
export const render = false;
|
||
|
|
|
||
|
|
const PlayIcon = () => {
|
||
|
|
return (
|
||
|
|
<Play />
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const PauseIcon = () => {
|
||
|
|
return (
|
||
|
|
<Pause />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Player() {
|
||
|
|
const [isPlaying, setPlaying] = useState(false);
|
||
|
|
window.isPlaying = isPlaying;
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="c-containter">
|
||
|
|
<div className="music-container">
|
||
|
|
<section className="album-cover">
|
||
|
|
|
||
|
|
<img src="https://api.codey.lol/radio/album_art" className="cover" alt="Cover Art" />
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<section className="music-player">
|
||
|
|
<h1 className='music-player__header'>serious.FM</h1>
|
||
|
|
<h1 className="music-player__title"></h1>
|
||
|
|
<h2 className="music-player__author"></h2>
|
||
|
|
<h2 className="music-player__genre"></h2>
|
||
|
|
<div className="music-time">
|
||
|
|
<p className="music-time__current"></p>
|
||
|
|
<p className="music-time__last"></p>
|
||
|
|
</div>
|
||
|
|
<div className="music-bar" id="progress">
|
||
|
|
<div id="length"></div>
|
||
|
|
</div>
|
||
|
|
<div className="music-control">
|
||
|
|
<div className="music-control__play" id="play">
|
||
|
|
{isPlaying == false && (<Play onClick={(e) => { setPlaying(!isPlaying); togglePlayback(); } } />)}
|
||
|
|
{isPlaying && (<Pause onClick={(e) => { setPlaying(!isPlaying); togglePlayback(); }} />)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)};
|