improve style & mobile layout

packages/app/src/components/Player/Controls/index.jsx

@@ -5,6 +5,7 @@ import UseAnimations from "react-useanimations"
 import LoadingAnimation from "react-useanimations/lib/loading"
 
 import { Icons } from "components/Icons"
+import LikeButton from "components/LikeButton"
 
 import AudioVolume from "components/Player/AudioVolume"
 import AudioPlayerChangeModeButton from "components/Player/ChangeModeButton"
@@ -23,6 +24,7 @@ export default ({
     audioVolume = 0.3,
     audioMuted = false,
     loading = false,
+    liked = false,
 } = {}) => {
     const onClickActionsButton = (event) => {
         if (typeof controls !== "object") {
@@ -79,6 +81,12 @@ export default ({
             onClick={() => onClickActionsButton("next")}
             disabled={syncModeLocked}
         />
+        {
+            app.isMobile && <LikeButton
+                onClick={controls.like}
+                liked={liked}
+            />
+        }
         {
             !app.isMobile && <antd.Popover
                 content={React.createElement(

packages/app/src/components/Player/Controls/index.less

@@ -1,3 +1,13 @@
+#root {
+    &.mobile {
+        .player-controls {
+            svg {
+                font-size: 1rem;
+            }
+        }
+    }
+}
+
 .player-controls {
     display: inline-flex;
     flex-direction: row;

packages/app/src/components/Player/MediaPlayer/index.jsx

@@ -9,8 +9,6 @@ import SeekBar from "components/Player/SeekBar"
 import Controls from "components/Player/Controls"
 import { WithPlayerContext, Context } from "contexts/WithPlayerContext"
 
-import PlaylistsModel from "models/playlists"
-
 import "./index.less"
 
 export default (props) => {
@@ -25,10 +23,6 @@ export default (props) => {
 export class AudioPlayer extends React.Component {
     static contextType = Context
 
-    state = {
-        liked: false,
-    }
-
     onMouse = (event) => {
         const { type } = event
 
@@ -64,7 +58,7 @@ export class AudioPlayer extends React.Component {
     }
 
     onClickPlayButton = () => {
-        if (this.state.streamMode) {
+        if (this.context.streamMode) {
             return app.cores.player.playback.stop()
         }
 
@@ -79,59 +73,50 @@ export class AudioPlayer extends React.Component {
         app.cores.player.playback.next()
     }
 
-    onClickLikeButton = async () => {
-        const result = await PlaylistsModel.toggleTrackLike(this.context.currentManifest._id).catch((err) => {
-            return null
-        })
-
-        if (result) {
-            this.setState({
-                liked: result.action === "liked"
-            })
-        }
-    }
-
     render() {
         return <div
             className={classnames(
                 "embbededMediaPlayerWrapper",
                 {
                     ["hovering"]: this.props.frame !== false && this.state.showControls,
-                    ["minimized"]: this.context.minimized,
+                    ["minimized"]: !app.isMobile && this.context.minimized,
                     ["no-frame"]: this.props.frame === false,
                 }
             )}
             onMouseEnter={this.onMouse}
             onMouseLeave={this.onMouse}
         >
-            <div className="top_controls">
+            {
-                <antd.Button
+                !app.isMobile && <div className="top_controls">
-                    icon={<Icons.MdFirstPage />}
+                    <antd.Button
-                    onClick={this.minimize}
+                        icon={<Icons.MdFirstPage />}
-                    shape="circle"
+                        onClick={this.minimize}
-                />
-
-                {
-                    !this.context.syncModeLocked && !this.context.syncMode && <antd.Button
-                        icon={<Icons.MdShare />}
-                        onClick={this.inviteSync}
                         shape="circle"
                     />
-                }
 
-                <antd.Button
+                    {
-                    icon={<Icons.MdOpenInFull />}
+                        !this.context.syncModeLocked && !this.context.syncMode && <antd.Button
-                    onClick={this.openVisualizer}
+                            icon={<Icons.MdShare />}
-                    shape="circle"
+                            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>
+            }
 
-                <antd.Button
-                    className="bottom_btn"
-                    icon={<Icons.X />}
-                    onClick={this.close}
-                    shape="square"
-                />
-            </div>
             <div className="player">
                 <div
                     className="cover"
@@ -159,10 +144,12 @@ export class AudioPlayer extends React.Component {
                                 </div>
                             }
 
-                            <LikeButton
+                            {
-                                onClick={this.onClickLikeButton}
+                                !app.isMobile && <LikeButton
-                                liked={this.state.liked}
+                                    onClick={app.cores.player.toggleCurrentTrackLike}
-                            />
+                                    liked={this.context.liked}
+                                />
+                            }
                         </div>
                     </div>
                 </div>
@@ -179,7 +166,9 @@ export class AudioPlayer extends React.Component {
                         previous: this.onClickPreviousButton,
                         toggle: this.onClickPlayButton,
                         next: this.onClickNextButton,
+                        like: app.cores.player.toggleCurrentTrackLike,
                     }}
+                    liked={this.context.liked}
                 />
 
                 <SeekBar

packages/app/src/components/Player/MediaPlayer/index.less

@@ -1,5 +1,18 @@
 @top_controls_height: 55px;
 
+#root {
+    &.mobile {
+        .embbededMediaPlayerWrapper {
+            .player {
+                .cover {
+                    min-height: 250px;
+                    min-width: 250px;
+                }
+            }
+        }
+    }
+}
+
 .embbededMediaPlayerWrapper {
     position: relative;
 

packages/app/src/components/Player/SeekBar/index.less

@@ -48,6 +48,20 @@
         align-items: center;
     }
 
+    .MuiSlider-rail {
+        height: 5px;
+    }
+
+    .MuiSlider-track {
+        height: 5px;
+        background-color: var(--colorPrimary);
+    }
+
+    .MuiSlider-thumb {
+        background-color: var(--colorPrimary);
+
+    }
+
     h1,
     h2,
     h3,