RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve actions

Browse Source
This commit is contained in:
SrGooglo 2023-04-04 23:51:46 +00:00
parent dedbe3d368
commit 5c3fa422cb
2 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/app/src/components/EmbbededMediaPlayer/index.jsx
View File

@ -10,11 +10,8 @@ import { Icons, createIconRender } from "components/Icons"
import "./index.less" import "./index.less"
// TODO: Check AUDIO quality and show a quality indicator
// TODO: Add close button // TODO: Add close button
// TODO: Add repeat & shuffle mode
// TODO: Queue view // TODO: Queue view
const AudioVolume = (props) => { const AudioVolume = (props) => {
return <div className="volumeSlider"> return <div className="volumeSlider">
<antd.Slider <antd.Slider
@ -34,7 +31,7 @@ const AudioVolume = (props) => {
</div> </div>
} }
class SeekBar extends React.Component { export class SeekBar extends React.Component {
state = { state = {
timeText: "00:00", timeText: "00:00",
durationText: "00:00", durationText: "00:00",
@ -352,6 +349,10 @@ export default class AudioPlayer extends React.Component {
app.cores.player.minimize() app.cores.player.minimize()
} }
close = () => {
app.cores.player.close()
}
updateVolume = (value) => { updateVolume = (value) => {
app.cores.player.volume(value) app.cores.player.volume(value)
} }
@ -397,12 +398,19 @@ export default class AudioPlayer extends React.Component {
onMouseLeave={this.onMouse} onMouseLeave={this.onMouse}
> >
<div className="player"> <div className="player">
<div className="minimize_btn"> <div className="extra_btns_wrapper">
<antd.Button <div className="extra_btns">
icon={<Icons.MdFirstPage />} <antd.Button
onClick={this.minimize} icon={<Icons.MdFirstPage />}
shape="circle" onClick={this.minimize}
/> shape="circle"
/>
<antd.Button
icon={<Icons.X />}
onClick={this.close}
shape="circle"
/>
</div>
</div> </div>
<div <div
className="cover" className="cover"
@ -444,7 +452,7 @@ export default class AudioPlayer extends React.Component {
<antd.Button <antd.Button
type="primary" type="primary"
shape="circle" shape="circle"
icon={this.state.streamMode ? <Icons.MdStop /> : playbackStatus === "playing" ? <Icons.Pause /> : <Icons.Play />} icon={this.state.streamMode ? <Icons.MdStop /> : playbackStatus === "playing" ? <Icons.MdPause /> : <Icons.MdPlayArrow />}
onClick={this.onClickPlayButton} onClick={this.onClickPlayButton}
className="playButton" className="playButton"
> >

38
packages/app/src/components/EmbbededMediaPlayer/index.less
View File

@ -35,8 +35,11 @@
} }
} }
.minimize_btn { .extra_btns_wrapper {
opacity: 1; .extra_btns {
opacity: 1;
padding: 20px;
}
} }
} }
@ -90,7 +93,7 @@
} }
} }
.minimize_btn { .extra_btns_wrapper{
position: absolute; position: absolute;
z-index: 330; z-index: 330;
@ -98,17 +101,28 @@
top: 0; top: 0;
left: 0; left: 0;
opacity: 0; width: 100%;
transition: all 150ms ease-in-out; .extra_btns {
display: flex;
flex-direction: row;
transform: translate(60%, 60%); align-items: center;
justify-content: space-between;
.ant-btn {
background-color: var(--background-color-accent); opacity: 0;
svg { transition: all 150ms ease-in-out;
margin: 0 !important;
//transform: translate(60%, 60%);
.ant-btn {
background-color: var(--background-color-accent);
svg {
margin: 0 !important;
}
} }
} }
} }