move player actions to a top card

packages/app/src/components/EmbbededMediaPlayer/index.jsx

@@ -6,11 +6,11 @@ import classnames from "classnames"
 import UseAnimations from "react-useanimations"
 import LoadingAnimation from "react-useanimations/lib/loading"
 
+import LikeButton from "components/LikeButton"
 import { Icons, createIconRender } from "components/Icons"
 
 import "./index.less"
 
-// TODO: Add close button
 // TODO: Queue view
 const AudioVolume = (props) => {
     return <div className="volumeSlider">
@@ -275,7 +275,7 @@ const AudioPlayerChangeModeButton = (props) => {
     return <antd.Button
         icon={createIconRender(modeToIcon[mode])}
         onClick={onClick}
-        disabled={props.disabled}
+        disabled={props.disabled ?? false}
         type="ghost"
     />
 }
@@ -325,11 +325,7 @@ export default class AudioPlayer extends React.Component {
             this.setState({ audioVolume: data })
         },
         "player.minimized.update": (minimized) => {
-            console.log(`Player minimized updated: ${minimized}`)
+            this.setState({ minimized })
-
-            this.setState({
-                minimized
-            })
         }
     }
 
@@ -363,6 +359,10 @@ export default class AudioPlayer extends React.Component {
         app.cores.player.close()
     }
 
+    openVisualizer = () => {
+        app.setLocation("/lyrics")
+    }
+
     inviteSync = () => {
         app.cores.sync.music.createSyncRoom()
     }
@@ -391,6 +391,14 @@ export default class AudioPlayer extends React.Component {
         app.cores.player.playback.next()
     }
 
+    onClickLikeButton = () => {
+        // TODO: Like
+
+        console.log("Like")
+
+        this.setState({ liked: !this.state.liked })
+    }
+
     render() {
         const {
             loading,
@@ -411,31 +419,35 @@ export default class AudioPlayer extends React.Component {
             onMouseEnter={this.onMouse}
             onMouseLeave={this.onMouse}
         >
+            <div className="top_controls">
+                <antd.Button
+                    icon={<Icons.MdFirstPage />}
+                    onClick={this.minimize}
+                    shape="circle"
+                />
+
+                {
+                    !this.state.syncModeLocked && !this.state.syncMode && <antd.Button
+                        icon={<Icons.MdShare />}
+                        onClick={this.inviteSync}
+                        shape="circle"
+                    />
+                }
+
+                <antd.Button
+                    icon={<Icons.MdOpenInFull />}
+                    onClick={this.openVisualizer}
+                    shape="circle"
+                />
+
+                <antd.Button
+                    className="bottom_btn"
+                    icon={<Icons.X />}
+                    onClick={this.close}
+                    shape="square"
+                />
+            </div>
             <div className="player">
-                <div className="extra_btns_wrapper">
-                    <div className="extra_btns">
-                        <antd.Button
-                            icon={<Icons.MdFirstPage />}
-                            onClick={this.minimize}
-                            shape="circle"
-                        />
-
-                        {
-                            !this.state.syncModeLocked && !this.state.syncMode && <antd.Button
-                                icon={<Icons.MdShare />}
-                                onClick={this.inviteSync}
-                                shape="circle"
-                            />
-                        }
-
-                        <antd.Button
-                            className="bottom_btn"
-                            icon={<Icons.X />}
-                            onClick={this.close}
-                            shape="circle"
-                        />
-                    </div>
-                </div>
                 <div
                     className="cover"
                     style={{
@@ -453,7 +465,7 @@ export default class AudioPlayer extends React.Component {
                                 }
                             </h2>
                         </div>
-                        <div>
+                        <div className="subTitle">
                             {
                                 currentPlaying?.artist && <div className="artist">
                                     <h3>
@@ -461,6 +473,11 @@ export default class AudioPlayer extends React.Component {
                                     </h3>
                                 </div>
                             }
+
+                            <LikeButton
+                                onClick={this.onClickLikeButton}
+                                liked={this.state.liked}
+                            />
                         </div>
                     </div>
                 </div>

packages/app/src/components/EmbbededMediaPlayer/index.less

@@ -1,4 +1,8 @@
+@top_controls_height: 55px;
+
 .embbededMediaPlayerWrapper {
+    position: relative;
+
     display: flex;
     flex-direction: row;
 
@@ -21,110 +25,46 @@
     }
 
     &.hovering {
-        .actions_wrapper {
+        .top_controls {
-            .actions {
+            height: @top_controls_height;
-                opacity: 1;
+            opacity: 1;
-                transform: translate(-90%, 0);
+
-            }
+            // translate y negative height of @top_controls_height minus 10px
+            transform: translateY(calc(-1 * (@top_controls_height - 5px)));
         }
 
-        .extra_btns_wrapper {
+        margin-top: 45px;
-            .extra_btns {
-                opacity: 1;
-                padding: 20px;
-            }
-        }
     }
 
-    .actions_wrapper {
+    .top_controls {
-        display: flex;
+        position: absolute;
-
+        top: 0;
-        flex-direction: column;
-        align-items: center;
 
         z-index: 300;
 
-        position: absolute;
+        display: flex;
+        flex-direction: row;
 
-        top: 0;
+        align-items: center;
-        left: 0;
 
-        height: 96%;
+        justify-content: space-between;
 
-        .actions {
+        gap: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
 
-            width: 60px;
+        width: 100%;
-            height: fit-content;
+        height: 0px;
 
-            padding: 10px 8px 10px 5px;
+        background-color: var(--background-color-accent);
 
-            background-color: rgba(var(--bg_color_2), 0.3);
+        border-radius: 8px 8px 0 0;
 
-            transform: translate(-25%, 0);
+        padding: 10px 10px 15px 10px;
 
-            border-radius: 12px 0 0 12px;
+        opacity: 0;
 
-            opacity: 0.5;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
 
-            transition: all 150ms ease-in-out;
+        transition: all 150ms ease-in-out;
-
-            .ant-btn {
-                margin-bottom: 20px;
-
-                svg {
-                    margin: 0 !important;
-                }
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-            }
-        }
-    }
-
-    .extra_btns_wrapper {
-        position: absolute;
-
-        z-index: 330;
-
-        top: 0;
-        left: 0;
-
-        width: fit-content;
-        height: 100%;
-
-        .extra_btns {
-            display: flex;
-
-            flex-direction: column;
-
-            //align-items: center;
-            //justify-content: flex-start;
-
-            gap: 10px;
-
-            opacity: 0;
-
-            transition: all 150ms ease-in-out;
-
-            //transform: translate(60%, 60%);
-
-            .ant-btn {
-                background-color: var(--background-color-accent);
-
-                svg {
-                    margin: 0 !important;
-                }
-            }
-
-            .bottom_btn {
-                // 
-            }
-        }
     }
 
     .player {
@@ -205,6 +145,8 @@
                     color: var(--text-color);
                 }
 
+                width: 100%;
+
                 .title {
                     font-size: 1rem;
                     font-weight: 600;
@@ -215,10 +157,23 @@
                     font-family: "Space Grotesk", sans-serif;
                 }
 
-                .artist {
+                .subTitle {
-                    font-size: 0.6rem;
+                    display: flex;
-                    font-weight: 400;
+                    flex-direction: row;
-                    color: var(--text-color);
+
+                    width: 100%;
+
+                    justify-content: space-between;
+
+                    .likeButton {
+                        margin-right: 20px;
+                    }
+
+                    .artist {
+                        font-size: 0.6rem;
+                        font-weight: 400;
+                        color: var(--text-color);
+                    }
                 }
             }
         }