player bar appearance

src/components/bars/PlayerBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useState, useEffect } from 'react';
 import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
 import { Filler } from '~/components/containers/Filler';
@@ -7,27 +7,79 @@ import { connect } from 'react-redux';
 import pick from 'ramda/es/pick';
 import { selectPlayer } from '~/redux/player/selectors';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
+import { IPlayerProgress, Player } from '~/utils/player';
 
-const mapStateToProps = state => pick(['status'], selectPlayer(state));
+const mapStateToProps = state => pick(['status', 'file'], selectPlayer(state));
 const mapDispatchToProps = {
   playerPlay: PLAYER_ACTIONS.playerPlay,
   playerPause: PLAYER_ACTIONS.playerPause,
+  playerSeek: PLAYER_ACTIONS.playerSeek,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const PlayerBarUnconnected: FC<IProps> = ({ status }) => {
+const PlayerBarUnconnected: FC<IProps> = ({
+  status,
+  playerPlay,
+  playerPause,
+  playerSeek,
+  file,
+}) => {
+  const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
+
+  const onClick = useCallback(() => {
+    if (status === PLAYER_STATES.PLAYING) return playerPause();
+    return playerPlay();
+  }, [playerPlay, playerPause, status]);
+
+  const onProgress = useCallback(
+    ({ detail }: { detail: IPlayerProgress }) => {
+      if (!detail || !detail.total) return;
+      setProgress(detail);
+    },
+    [setProgress]
+  );
+
+  const onSeek = useCallback(
+    event => {
+      event.stopPropagation();
+      const { clientX, target } = event;
+      const { left, width } = target.getBoundingClientRect();
+      playerSeek((clientX - left) / width);
+    },
+    [playerSeek]
+  );
+
+  useEffect(() => {
+    Player.on('playprogress', onProgress);
+
+    return () => {
+      Player.off('playprogress', onProgress);
+    };
+  }, [onProgress]);
+
   if (status === PLAYER_STATES.UNSET) return null;
 
+  const title =
+    file.metadata &&
+    (file.metadata.title ||
+      [file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
+
   return (
     <div className={styles.place}>
       <div className={styles.wrap}>
         <div className={styles.status}>
-          <div className={styles.playpause}>
-            <Icon icon="play" />
+          <div className={styles.playpause} onClick={onClick}>
+            {status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
           </div>
 
-          <Filler />
+          <div className={styles.info}>
+            <div className={styles.title}>{title}</div>
+
+            <div className={styles.progress} onClick={onSeek}>
+              <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
+            </div>
+          </div>
 
           <div className={styles.close}>
             <Icon icon="close" />

src/components/bars/PlayerBar/styles.scss

@@ -1,6 +1,6 @@
 .place {
   position: relative;
-  height: 54px;
+  height: 64px;
   flex: 0 1 500px;
   display: flex;
 
@@ -13,29 +13,30 @@
 
 .wrap {
   display: flex;
-  border-radius: 27px;
+  border-radius: $radius $radius 0 0;
   background: $green_gradient;
   align-items: center;
-  box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 0 1px,
+  box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 1px 1px,
     inset rgba(0, 0, 0, 0.3) 0 -1px;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 54px;
+  height: 64px;
   flex-direction: column;
   transform: translate(0, 0);
   z-index: 3;
+  min-width: 0;
 }
 
 .status {
-  flex: 0 0 54px;
+  flex: 0 0 64px;
   display: flex;
   flex-direction: row;
   width: 100%;
   position: absolute;
   z-index: 1;
-  height: 54px;
+  height: 64px;
 }
 
 .playpause,
@@ -60,3 +61,50 @@
     height: 24px;
   }
 }
+
+.info {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  flex-direction: column;
+}
+
+.title {
+  color: #222222;
+  font: $font_14_semibold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.progress {
+  position: relative;
+  height: 20px;
+  width: 100%;
+  cursor: pointer;
+
+  &::after {
+    content: ' ';
+    top: 9px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: #222222;
+    position: absolute;
+    border-radius: 2px;
+    opacity: 0.5;
+  }
+}
+
+.bar {
+  top: 7px;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  background: #222222;
+  position: absolute;
+  border-radius: 2px;
+}

src/components/media/AudioPlayer/index.tsx

@@ -86,10 +86,11 @@ const AudioPlayerUnconnected = ({
         {playing && status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
       </div>
       <div className={styles.content}>
+        <div className={styles.title}>{title || 'Unknown'}</div>
+
         <div className={styles.progress} onClick={onSeek}>
           <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
         </div>
-        <div className={styles.title}>{title || 'Unknown'}</div>
       </div>
     </div>
   );

src/containers/main/BottomContainer/styles.scss

@@ -1,10 +1,10 @@
 .wrap {
   position: fixed;
   transform: translateZ(0);
-  bottom: $gap;
+  bottom: 0;
   pointer-events: none;
   touch-action: none;
-  height: 54px;
+  height: 64px;
   display: flex;
   z-index: 10;
   width: 100%;

src/containers/main/MainLayout/styles.scss

@@ -14,6 +14,6 @@
   width: 100%;
   max-width: $content_width;
   display: flex;
-  padding-bottom: 10px;
+  padding-bottom: 64px;
   flex-direction: column;
 }

src/containers/node/NodeLayout/index.tsx

@@ -56,6 +56,7 @@ const NodeLayoutUnconnected: FC<IProps> = ({
     },
     [node, nodeUpdateTags]
   );
+
   const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];
 
   return (