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;
+  }
+}

src/containers/App.tsx

@@ -15,6 +15,7 @@ import { Modal } from '~/containers/dialogs/Modal';
 import { selectModal } from '~/redux/modal/selectors';
 import { BlurWrapper } from '~/components/containers/BlurWrapper';
 import { NodeLayout } from './node/NodeLayout';
+import { BottomContainer } from '~/containers/main/BottomContainer';
 
 const mapStateToProps = selectModal;
 const mapDispatchToProps = {};
@@ -23,22 +24,26 @@ type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {
 
 const Component: FC<IProps> = ({ is_shown }) => (
   <ConnectedRouter history={history}>
-    <BlurWrapper is_blurred={is_shown}>
-      <MainLayout>
-        <Modal />
-        <Sprites />
+    <div>
+      <BlurWrapper is_blurred={is_shown}>
+        <MainLayout>
+          <Modal />
+          <Sprites />
 
-        <Switch>
-          <Route exact path={URLS.BASE} component={FlowLayout} />
-          <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
-          <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-          <Route path="/examples/horizontal" component={HorizontalExample} />
-          <Route path="/post:id" component={NodeLayout} />
+          <Switch>
+            <Route exact path={URLS.BASE} component={FlowLayout} />
+            <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
+            <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
+            <Route path="/examples/horizontal" component={HorizontalExample} />
+            <Route path="/post:id" component={NodeLayout} />
 
-          <Redirect to="/" />
-        </Switch>
-      </MainLayout>
-    </BlurWrapper>
+            <Redirect to="/" />
+          </Switch>
+        </MainLayout>
+      </BlurWrapper>
+
+      <BottomContainer />
+    </div>
   </ConnectedRouter>
 );
 

src/containers/main/BottomContainer/index.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { PlayerBar } from '~/components/bars/PlayerBar';
+
+interface IProps {}
+
+const BottomContainer: FC<IProps> = ({}) => (
+  <div className={styles.wrap}>
+    <div className={styles.content}>
+      <PlayerBar />
+    </div>
+  </div>
+);
+
+export { BottomContainer };

src/containers/main/BottomContainer/styles.scss

@@ -0,0 +1,30 @@
+.wrap {
+  position: fixed;
+  transform: translateZ(0);
+  bottom: 0px;
+  pointer-events: none;
+  touch-action: none;
+  height: 54px;
+  display: flex;
+  z-index: 10;
+  width: 100%;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0 $gap;
+  box-sizing: border-box;
+}
+
+.content {
+  position: relative;
+  flex: 0 1 $content_width;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  & > div {
+    pointer-events: all;
+    touch-action: all;
+  }
+}