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

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

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

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