player bar

src/components/bars/PlayerBar/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { Icon } from '~/components/input/Icon';
+import { Filler } from '~/components/containers/Filler';
+import { PLAYER_STATES } from '~/redux/player/constants';
+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';
+
+const mapStateToProps = state => pick(['status'], selectPlayer(state));
+const mapDispatchToProps = {
+  playerPlay: PLAYER_ACTIONS.playerPlay,
+  playerPause: PLAYER_ACTIONS.playerPause,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const PlayerBarUnconnected: FC<IProps> = ({ status }) => {
+  if (status === PLAYER_STATES.UNSET) return null;
+
+  return (
+    <div className={styles.place}>
+      <div className={styles.seeker}>S</div>
+      <div className={styles.wrap}>
+        <div className={styles.status}>
+          <div className={styles.playpause}>
+            <Icon icon="play" />
+          </div>
+
+          <Filler />
+
+          <div className={styles.close}>
+            <Icon icon="close" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const PlayerBar = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PlayerBarUnconnected);

src/components/bars/PlayerBar/styles.scss

@@ -0,0 +1,77 @@
+.place {
+  position: relative;
+  height: 54px;
+  flex: 0 1 500px;
+  display: flex;
+
+  &:hover {
+    .seeker {
+      transform: translate(0, -40px);
+    }
+  }
+}
+
+.wrap {
+  display: flex;
+  border-radius: $radius 0 0 0;
+  background: $green_gradient;
+  align-items: center;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 0 1px,
+    inset rgba(0, 0, 0, 0.3) 0 -1px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 54px;
+  flex-direction: column;
+  transform: translate(0, 0);
+  z-index: 3;
+}
+
+.status {
+  flex: 0 0 54px;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  height: 54px;
+}
+
+.seeker {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 54px;
+  left: 0;
+  background: transparentize($content_bg, 0);
+  transform: translate(0, 0);
+  transition: transform 0.25s;
+  border-radius: $radius;
+  box-sizing: border-box;
+  padding: $gap;
+  @include outer_shadow();
+}
+
+.playpause,
+.close {
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  svg {
+    width: 32px;
+    height: 32px;
+    fill: #222222;
+    stroke: none;
+  }
+}
+
+.close {
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}