diff --git a/packages/app/src/components/EmbbededMediaPlayer/index.jsx b/packages/app/src/components/EmbbededMediaPlayer/index.jsx index bb0102af..e03ac318 100755 --- a/packages/app/src/components/EmbbededMediaPlayer/index.jsx +++ b/packages/app/src/components/EmbbededMediaPlayer/index.jsx @@ -429,6 +429,7 @@ export default class AudioPlayer extends React.Component { } } onClick={this.close} shape="circle" diff --git a/packages/app/src/components/EmbbededMediaPlayer/index.less b/packages/app/src/components/EmbbededMediaPlayer/index.less index 33110082..0363d97f 100755 --- a/packages/app/src/components/EmbbededMediaPlayer/index.less +++ b/packages/app/src/components/EmbbededMediaPlayer/index.less @@ -16,10 +16,8 @@ &.minimized { pointer-events: none; - opacity: 0; - height: 0px; - width: 0px; + animation: minimize 150ms ease-in-out forwards; } &.hovering { @@ -96,15 +94,18 @@ top: 0; left: 0; - width: 100%; + width: fit-content; + height: 100%; .extra_btns { display: flex; - flex-direction: row; + flex-direction: column; - align-items: center; - justify-content: space-between; + //align-items: center; + //justify-content: flex-start; + + gap: 10px; opacity: 0; @@ -119,6 +120,10 @@ margin: 0 !important; } } + + .bottom_btn { + // + } } } @@ -220,6 +225,7 @@ .controls { display: inline-flex; + flex-direction: row; align-items: center; justify-content: space-evenly; @@ -341,47 +347,6 @@ color: var(--text-color); } } - - .bpmTicker { - position: absolute; - - top: 0; - left: 0; - - width: 30px; - height: 30px; - - border-radius: 50%; - - background-color: var(--background-color-contrast); - - transform: translate(-50%, -50%); - - &.pulse { - animation: pulseBPM; - animation-iteration-count: infinite; - animation-fill-mode: forwards; - - animation-duration: 1s; - } - } -} - -@keyframes pulseBPM { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); - } - - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); - } - - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - } } .ant-popover-inner-content { @@ -407,4 +372,20 @@ to { opacity: 1; } +} + +@keyframes minimize { + 0% { + opacity: 1; + } + + 99% { + opacity: 0; + //transform: translateX(100%); + } + + 100% { + opacity: 0; + height: 0px; + } } \ No newline at end of file