Merge remote-tracking branch 'origin/master'

# Conflicts: # src/components/node/CommentForm/index.tsx
2025-04-24 20:36:40 +07:00 · 2019-10-14 20:29:12 +07:00 · 2019-10-14 20:29:12 +07:00 · 1e269e08cd
commit 1e269e08cd
parent a95d12db5b e825db6d63
76 changed files with 7203 additions and 18321 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,5 +1,11 @@
 module.exports = {
-  extends: ['plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint', 'airbnb', 'airbnb-base'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'airbnb',
+    'airbnb-base',
+    'prettier',
+  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
@ -25,6 +31,18 @@ module.exports = {
    'global-require': 1,
    'react/no-multi-comp': 1,
    'react/jsx-filename-extension': 0,
+    'react/jsx-wrap-multilines': [
+      'warn',
+      {
+        declaration: 'parens',
+        assignment: 'parens',
+        return: 'parens',
+        arrow: 'parens',
+        condition: 'ignore',
+        logical: 'ignore',
+        prop: 'ignore',
+      },
+    ],
    '@typescript-eslint/camelcase': 0,
    '@typescript-eslint/interface-name-prefix': 0,
    camelcase: 0,
@ -43,18 +61,21 @@ module.exports = {
    'max-line-length': [true, 100],
    // 'max-len': 100,
    // 'max-len': { "code": 100 },
-    'max-len': ["warn", { "code": 100 }],
-    "template-curly-spacing": "off",
-    "comma-dangle": ["warn", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "never"
-    }],
-    indent: "off",
-    "import/order": "off",
-    "arrow-parens": ["warn", "as-needed"],
+    'max-len': ['warn', { code: 100 }],
+    'template-curly-spacing': 'off',
+    'comma-dangle': [
+      'warn',
+      {
+        arrays: 'always-multiline',
+        objects: 'always-multiline',
+        imports: 'always-multiline',
+        exports: 'always-multiline',
+        functions: 'never',
+      },
+    ],
+    indent: 'off',
+    'import/order': 'off',
+    'arrow-parens': ['warn', 'as-needed'],
  },
  globals: {
    document: false,
@ -62,5 +83,8 @@ module.exports = {
    HTMLInputElement: false,
    HTMLDivElement: false,
    FormData: false,
+    FileReader: false,
+    Audio: false,
+    CustomEvent: false,
  },
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -14,14 +14,14 @@
    "url": "https://github.com/muerwre/my-empty-react-project"
  },
  "devDependencies": {
-    "@babel/cli": "^7.0.0-rc.1",
-    "@babel/preset-env": "^7.0.0-rc.1",
+    "@babel/cli": "^7.6.3",
+    "@babel/preset-env": "^7.6.3",
    "@babel/types": "7.5.5",
    "@types/react-router": "^5.0.3",
    "autoresponsive-react": "^1.1.31",
    "awesome-typescript-loader": "^5.2.1",
    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.0.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
@ -39,21 +39,20 @@
    "prettier": "^1.18.2",
    "resolve-url-loader": "^3.0.1",
    "style-loader": "^0.21.0",
-    "ts-node": "^8.0.1",
-    "typescript": "^3.2.4",
+    "ts-node": "^8.4.1",
+    "typescript": "^3.6.4",
    "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.6.0",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2"
  },
  "license": "MIT",
  "dependencies": {
-    "@hot-loader/react-dom": "^16.8.1",
+    "@hot-loader/react-dom": "^16.10.2",
    "@types/classnames": "^2.2.7",
-    "@types/node": "^11.9.0",
-    "@types/ramda": "^0.26.19",
+    "@types/node": "^11.13.22",
+    "@types/ramda": "^0.26.29",
    "@types/react": "16.8.23",
-    "@types/redux-saga": "^0.10.5",
    "@typescript-eslint/eslint-plugin": "^1.13.0",
    "@typescript-eslint/parser": "^1.13.0",
    "axios": "^0.18.0",
@ -61,12 +60,12 @@
    "classnames": "^2.2.6",
    "clean-webpack-plugin": "^0.1.9",
    "connected-react-router": "^6.3.2",
-    "date-fns": "^2.0.0-alpha.27",
-    "dotenv": "^8.0.0",
+    "date-fns": "^2.4.1",
+    "dotenv": "^8.1.0",
    "dotenv-webpack": "^1.7.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.1",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint-config-prettier": "^6.4.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-import-resolver-typescript": "^1.1.1",
    "eslint-import-resolver-webpack": "^0.9.0",
@ -74,40 +73,41 @@
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^1.7.0",
-    "history": "^4.7.2",
+    "flexbin": "^0.2.0",
+    "history": "^4.10.1",
    "http-errors": "~1.6.2",
-    "less": "^3.8.1",
+    "less": "^3.10.3",
    "less-middleware": "~2.2.1",
    "lodash": "^4.17.10",
    "node-sass": "^4.11.0",
    "raleway-cyrillic": "^4.0.2",
    "ramda": "^0.26.1",
    "react": "16.8.6",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.10.2",
    "react-grid-layout": "^0.16.6",
-    "react-hot-loader": "^4.1.1",
+    "react-hot-loader": "^4.12.15",
    "react-layout-pack": "^0.2.3",
    "react-packery-component": "^1.0.2",
    "react-redux": "^6.0.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scrollbar": "^0.5.4",
-    "react-sortable-hoc": "^1.9.1",
+    "react-sortable-hoc": "^1.10.1",
    "react-stack-grid": "^0.7.1",
    "redux": "^4.0.1",
    "redux-persist": "^5.10.0",
-    "redux-saga": "^1.0.5",
+    "redux-saga": "^1.1.1",
    "reduxsauce": "^1.0.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^7.3.1",
    "sass-resources-loader": "^2.0.0",
    "scrypt": "^6.0.3",
    "throttle-debounce": "^2.1.0",
-    "tslint": "^5.18.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "tslint-react": "^4.0.0",
+    "tslint": "^5.20.0",
+    "tslint-config-airbnb": "^5.11.2",
+    "tslint-react": "^4.1.0",
    "tslint-react-hooks": "^2.2.1",
    "tt-react-custom-scrollbars": "latest",
    "uuid4": "^1.1.4"
--- a/src/components/bars/PlayerBar/index.tsx
+++ b/src/components/bars/PlayerBar/index.tsx
@ -0,0 +1,44 @@
+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.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);
--- a/src/components/bars/PlayerBar/styles.scss
+++ b/src/components/bars/PlayerBar/styles.scss
@ -0,0 +1,62 @@
+.place {
+  position: relative;
+  height: 54px;
+  flex: 0 1 500px;
+  display: flex;
+
+  &:hover {
+    .seeker {
+      transform: translate(0, -64px);
+    }
+  }
+}
+
+.wrap {
+  display: flex;
+  border-radius: 27px;
+  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,
+    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;
+}
+
+.playpause,
+.close {
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  svg {
+    width: 32px;
+    height: 32px;
+    fill: $content_bg;
+    stroke: none;
+  }
+}
+
+.close {
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
--- a/src/components/containers/Card/index.tsx
+++ b/src/components/containers/Card/index.tsx
@ -1,22 +1,14 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';

-import classNames = require('classnames');
+import classNames from 'classnames';

 type IProps = React.HTMLAttributes<HTMLDivElement> & {
  seamless?: boolean;
-}
+};

-const Card: FC<IProps> = ({
-  className,
-  children,
-  seamless,
-  ...props
-}) => (
-  <div
-    className={classNames(styles.card, className, { seamless })}
-    {...props}
-  >
+const Card: FC<IProps> = ({ className, children, seamless, ...props }) => (
+  <div className={classNames(styles.card, className, { seamless })} {...props}>
    {children}
  </div>
 );
--- a/src/components/containers/CellGrid/index.tsx
+++ b/src/components/containers/CellGrid/index.tsx
@ -1,6 +1,4 @@
-import React, {
-  FC, HTMLAttributes, ReactChild, ReactChildren
-} from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 import * as styles from './styles.scss';

 import classNames = require('classnames');
@ -8,14 +6,9 @@ import classNames = require('classnames');
 type IProps = HTMLAttributes<HTMLDivElement> & {
  children: any;
  size: number;
-}
+};

-const CellGrid: FC<IProps> = ({
-  children,
-  size,
-  className,
-  ...props
-}) => (
+const CellGrid: FC<IProps> = ({ children, size, className, ...props }) => (
  <div
    className={classNames(styles.grid, className)}
    style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))` }}
--- a/src/components/containers/CommentWrapper/index.tsx
+++ b/src/components/containers/CommentWrapper/index.tsx
@ -8,6 +8,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
  photo?: string;
  is_empty?: boolean;
  is_loading?: boolean;
+  is_same?: boolean;
 };

 const CommentWrapper: FC<IProps> = ({
@ -16,15 +17,16 @@ const CommentWrapper: FC<IProps> = ({
  is_empty,
  is_loading,
  className,
+  is_same,
  ...props
 }) => (
  <Card
-    className={classNames(styles.wrap, className, { is_empty, is_loading })}
+    className={classNames(styles.wrap, className, { is_empty, is_loading, is_same })}
    seamless
    {...props}
  >
    <div className={styles.thumb}>
-      {photo && (
+      {!is_same && photo && (
        <div className={styles.thumb_image} style={{ backgroundImage: `url("${photo}")` }} />
      )}
    </div>
--- a/src/components/containers/CommentWrapper/styles.scss
+++ b/src/components/containers/CommentWrapper/styles.scss
@ -1,26 +1,35 @@
 .wrap {
  background: $comment_bg;
-  min-height: 64px;
+  min-height: $comment_height;
  display: flex;
-  box-shadow: $comment_shadow;
+  position: relative;
+  box-shadow: none;
+  min-width: 0;

  &:global(.is_empty) {
    opacity: 0.5;
  }
+
+  &:global(.is_same) {
+    margin: 0 !important;
+    border-radius: 0;
+  }
 }

 .text {
  flex: 1;
+  min-width: 0;
 }

 .thumb {
-  flex: 0 0 64px;
-  background: transparentize(black, 0.9);
+  flex: 0 0 $comment_height;
  border-radius: $panel_radius 0 0 $panel_radius;
+  background-color: transparentize(black, 0.9);
 }

 .thumb_image {
-  height: 64px;
-  background: transparentize(white, 0.97);
+  height: $comment_height;
+  background: transparentize(white, 0.97) no-repeat 50% 50%;
  border-radius: $panel_radius 0 0 $panel_radius;
+  background-size: cover;
 }
--- a/src/components/editors/ImageGrid/index.tsx
+++ b/src/components/editors/ImageGrid/index.tsx
@ -1,6 +1,4 @@
-import React, {
- FC, useCallback, ChangeEventHandler, DragEventHandler,
-} from 'react';
+import React, { FC, useCallback, ChangeEventHandler, DragEventHandler } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import * as styles from './styles.scss';
 import { ImageUpload } from '~/components/upload/ImageUpload';
@ -31,7 +29,7 @@ const SortableList = SortableContainer(
    <div className={styles.grid}>
      {items.map((file, index) => (
        <SortableItem key={file.id} index={index} collection={0}>
-          <ImageUpload id={file.id} thumb={getURL(file.url)} />
+          <ImageUpload id={file.id} thumb={getURL(file)} />
        </SortableItem>
      ))}

@ -44,9 +42,7 @@ const SortableList = SortableContainer(
  )
 );

-const ImageGrid: FC<IProps> = ({
- items, locked, onFileMove, onUpload,
-}) => {
+const ImageGrid: FC<IProps> = ({ items, locked, onFileMove, onUpload }) => {
  const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [
    onFileMove,
  ]);
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@ -1,8 +1,7 @@
 import React, { FC, useState, useCallback } from 'react';
-import { NavLink } from 'react-router-dom';
 import { INode } from '~/redux/types';
 import { URLS } from '~/constants/urls';
-import { getImageSize } from '~/utils/dom';
+import { getImageSize, getURL } from '~/utils/dom';
 import classNames = require('classnames');

 import * as styles from './styles.scss';
@ -38,11 +37,11 @@ const Cell: FC<IProps> = ({ node: { id, title, brief, type }, onSelect, is_text
        <div
          className={styles.thumbnail}
          style={{
-            backgroundImage: `url("${getImageSize(brief.thumbnail, 'medium')}")`,
+            backgroundImage: `url("${getURL({ url: brief.thumbnail })}")`,
            opacity: is_loaded ? 1 : 0,
          }}
        >
-          <img src={getImageSize(brief.thumbnail, 'medium')} onLoad={onImageLoad} alt="" />
+          <img src={getURL({ url: brief.thumbnail })} onLoad={onImageLoad} alt="" />
        </div>
      )}
    </div>
@ -50,12 +49,3 @@ const Cell: FC<IProps> = ({ node: { id, title, brief, type }, onSelect, is_text
 };

 export { Cell };
-
-/*
-  {is_text && (
-    <div className={styles.text}>
-      <div className={styles.text_title}>{node.title}</div>
-      {TEXTS.LOREM_IPSUM}
-    </div>
-  )}
-*/
--- a/src/components/flow/FlowGrid/styles.scss
+++ b/src/components/flow/FlowGrid/styles.scss
@ -7,9 +7,9 @@ $cols: $content_width / $cell;

 .grid_test {
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-template-rows: 360px;
-  grid-auto-rows: 256px;
+  grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
+  grid-template-rows: $cell;
+  grid-auto-rows: $cell;
  grid-auto-flow: row dense;
  grid-column-gap: $grid_line;
  grid-row-gap: $grid_line;
@ -22,8 +22,8 @@ $cols: $content_width / $cell;
 .hero {
  grid-row-start: 1;
  grid-row-end: span 1;
-  grid-column-start: 0;
-  grid-column-end: span 4;
+  grid-column-start: 1;
+  grid-column-end: -1;
  // gridRow: "1 / 2",
  // gridColumn: "1 / -1",
  background: darken($content_bg, 2%);
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@ -8,7 +8,7 @@ type IButtonProps = DetailedHTMLProps<
  ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
 > & {
-  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
+  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
  iconLeft?: IIcon;
  iconRight?: IIcon;
  seamless?: boolean;
@ -19,6 +19,7 @@ type IButtonProps = DetailedHTMLProps<
  non_submitting?: boolean;
  is_loading?: boolean;
  stretchy?: boolean;
+  iconOnly?: boolean;
 };

 export const Button: FC<IButtonProps> = ({
@ -36,6 +37,7 @@ export const Button: FC<IButtonProps> = ({
  title,
  stretchy,
  disabled,
+  iconOnly,
  ...props
 }) =>
  createElement(
@ -49,7 +51,7 @@ export const Button: FC<IButtonProps> = ({
        disabled,
        is_loading,
        stretchy,
-        icon: (iconLeft || iconRight) && !title && !children,
+        icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
        has_icon_left: !!iconLeft,
        has_icon_right: !!iconRight,
      }),
@ -57,7 +59,7 @@ export const Button: FC<IButtonProps> = ({
    },
    [
      iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-      title ? <span key={1}>{title}</span> : (children && <span key={1}>{children}</span>) || null,
+      title ? <span>{title}</span> : children || null,
      iconRight && <Icon icon={iconRight} size={20} key={2} />,
    ]
  );
--- a/src/components/input/Button/styles.scss
+++ b/src/components/input/Button/styles.scss
@ -27,10 +27,12 @@
  stroke: white;
  user-select: none;

-  display: inline-flex;
+  display: flex;
  align-items: center;
  justify-content: center;

+  position: relative;
+
  filter: grayscale(0);

  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
@ -38,6 +40,22 @@

  @include outer_shadow();

+  input {
+    color: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    opacity: 0;
+  }
+
+  svg {
+    fill: white;
+    stroke: white;
+  }
+
  span {
    flex: 1;
  }
@ -89,14 +107,22 @@

  &:global(.disabled),
  &:global(.grey) {
-    opacity: 0.3;
-    background: lighten(black, 2%);
+    background: transparentize(white, 0.9);
+    // background: lighten(white, 0.5);
    // filter: grayscale(100%);
  }

+  &:global(.disabled) {
+    opacity: 0.3;
+  }
+
  &:global(.icon) {
    padding-left: 10px;
    padding-right: 10px;
+
+    svg {
+      margin: 0;
+    }
  }

  &:global(.is_loading) {
@ -138,6 +164,15 @@
  height: 28px;
  border-radius: $radius / 2;
 }
+.small {
+  height: 32px;
+  // border-radius: $radius / 2;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
 .normal {
  height: 38px;
 }
--- a/src/components/input/ButtonGroup/index.tsx
+++ b/src/components/input/ButtonGroup/index.tsx
@ -0,0 +1,6 @@
+import React, { HTMLAttributes } from 'react';
+import * as styles from './styles.scss';
+
+type IProps = HTMLAttributes<HTMLDivElement> & {};
+
+export const ButtonGroup = ({ children }: IProps) => <div className={styles.wrap}>{children}</div>;
--- a/src/components/input/ButtonGroup/styles.scss
+++ b/src/components/input/ButtonGroup/styles.scss
@ -0,0 +1,21 @@
+.wrap {
+  display: flex;
+  flex-direction: row;
+
+  & > * {
+    border-radius: 0;
+    box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
+
+    &:last-child {
+      border-radius: 0 $input_radius $input_radius 0;
+
+      &.small {
+        border-radius: 0 3px 3px 0;
+      }
+    }
+
+    &:first-child {
+      border-radius: $input_radius 0 0 $input_radius;
+    }
+  }
+}
--- a/src/components/main/Header/index.tsx
+++ b/src/components/main/Header/index.tsx
@ -10,8 +10,15 @@ import { selectUser } from '~/redux/auth/selectors';
 import { Group } from '~/components/containers/Group';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { DIALOGS } from '~/redux/modal/constants';
+import { pick } from 'ramda';
+import { Icon } from '~/components/input/Icon';
+import { url } from 'inspector';
+import { getURL } from '~/utils/dom';
+import path from 'ramda/es/path';

-const mapStateToProps = selectUser;
+const mapStateToProps = state => ({
+  user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
+});

 const mapDispatchToProps = {
  push: historyPush,
@ -20,7 +27,7 @@ const mapDispatchToProps = {

 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};

-const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
+const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, showDialog }) => {
  const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
  const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);

@ -31,17 +38,16 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
      <Filler />

      <div className={style.plugs}>
-        <Link to="/">flow</Link>
-        <Link to="/examples/image">image</Link>
        <div onClick={onOpenEditor}>editor</div>
+        <Link to="/">flow</Link>
      </div>

-      <Filler />
-
      {is_user && (
        <Group horizontal className={style.user_button}>
          <div>{username}</div>
-          <div className={style.user_avatar} />
+          <div className={style.user_avatar} style={{ backgroundImage: `url('${getURL(photo)}')` }}>
+            {(!photo || !photo.id) && <Icon icon="profile" />}
+          </div>
        </Group>
      )}

--- a/src/components/main/Header/style.scss
+++ b/src/components/main/Header/style.scss
@ -3,7 +3,7 @@
  align-items: center;
  justify-content: flex-end;
  font-weight: 500;
-  height: 80px;
+  height: 120px;
 }

 .spacer {
@ -47,11 +47,11 @@
    }

    &:last-child {
-      padding-right: 0;
+      // padding-right: 0;

-      &::after {
-        display: none;
-      }
+      // &::after {
+      // display: none;
+      // }
    }
  }
 }
@ -65,16 +65,31 @@
 .user_button {
  align-items: center;
  border-radius: $input_radius;
-  font: $font_16_medium;
+  font: $font_16_semibold;
  text-transform: uppercase;
  flex: 0 !important;
-  opacity: 0.3;
  cursor: pointer;
+  margin-left: $gap;
 }

 .user_avatar {
-  width: 20px;
-  height: 20px;
+  @include outer_shadow();
+
+  width: 32px;
+  height: 32px;
  background: white;
  border-radius: $radius;
+  margin-left: ($gap + 2px) !important;
+  background: 50% 50% no-repeat $wisegreen;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+
+  svg {
+    fill: #222222;
+    stroke: #222222;
+    width: 24px;
+    height: 24px;
+  }
 }
--- a/src/components/media/AudioPlayer/index.tsx
+++ b/src/components/media/AudioPlayer/index.tsx
@ -0,0 +1,101 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { selectPlayer } from '~/redux/player/selectors';
+import * as PLAYER_ACTIONS from '~/redux/player/actions';
+import { IFile } from '~/redux/types';
+import { PLAYER_STATES } from '~/redux/player/constants';
+import { Player, IPlayerProgress } from '~/utils/player';
+import classNames from 'classnames';
+import * as styles from './styles.scss';
+import { Icon } from '~/components/input/Icon';
+
+const mapStateToProps = state => ({
+  player: selectPlayer(state),
+});
+
+const mapDispatchToProps = {
+  playerSetFile: PLAYER_ACTIONS.playerSetFile,
+  playerPlay: PLAYER_ACTIONS.playerPlay,
+  playerPause: PLAYER_ACTIONS.playerPause,
+  playerSeek: PLAYER_ACTIONS.playerSeek,
+};
+
+type Props = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    file: IFile;
+  };
+
+const AudioPlayerUnconnected = ({
+  file,
+  player: { file: current, status },
+
+  playerSetFile,
+  playerPlay,
+  playerPause,
+  playerSeek,
+}: Props) => {
+  const [playing, setPlaying] = useState(false);
+  const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
+
+  const onPlay = useCallback(() => {
+    if (current && current.id === file.id) {
+      if (status === PLAYER_STATES.PLAYING) return playerPause();
+      return playerPlay();
+    }
+
+    playerSetFile(file);
+  }, [file, current, status, playerPlay, playerPause, playerSetFile]);
+
+  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(() => {
+    const active = current && current.id === file.id;
+    setPlaying(current && current.id === file.id);
+
+    if (active) Player.on('playprogress', onProgress);
+
+    return () => {
+      if (active) Player.off('playprogress', onProgress);
+    };
+  }, [file, current, setPlaying, onProgress]);
+
+  const title =
+    file.metadata &&
+    (file.metadata.title ||
+      [file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
+
+  return (
+    <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
+      <div className={styles.playpause}>
+        {playing && status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
+      </div>
+      <div className={styles.content}>
+        <div className={styles.progress} onClick={onSeek}>
+          <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
+        </div>
+        <div className={styles.title}>{title || 'Unknown'}</div>
+      </div>
+    </div>
+  );
+};
+
+export const AudioPlayer = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AudioPlayerUnconnected);
--- a/src/components/media/AudioPlayer/styles.scss
+++ b/src/components/media/AudioPlayer/styles.scss
@ -0,0 +1,104 @@
+.wrap {
+  display: flex;
+  flex-direction: row;
+
+  &:global(.playing) {
+    .progress {
+      opacity: 1;
+      pointer-events: all;
+      touch-action: auto;
+    }
+
+    .title {
+      top: 20px;
+      opacity: 1;
+      font-size: 12px;
+      padding-right: 140px;
+    }
+  }
+}
+
+.playpause {
+  flex: 0 0 $comment_height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  svg {
+    width: 32px;
+    height: 32px;
+    fill: transparentize($color: white, $amount: 0.5);
+    stroke: transparentize($color: white, $amount: 0.5);
+    transition: fill 250ms, stroke 250ms;
+  }
+
+  &:hover {
+    svg {
+      fill: white;
+      stroke: white;
+    }
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 0 $gap * 2 0 $gap;
+  position: relative;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0.7;
+  pointer-events: none;
+  touch-action: none;
+  padding: 0 10px;
+  box-sizing: border-box;
+  height: 100%;
+  top: 0;
+  text-align: left;
+  transition: all 0.5s;
+  font: $font_16_medium;
+}
+
+.progress {
+  height: 20px;
+  position: relative;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.5s;
+  left: 0;
+  cursor: pointer;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    height: 10px;
+    border-radius: 5px;
+    background: transparentize(white, 0.95);
+    width: 100%;
+    top: 5px;
+    left: 0;
+  }
+}
+
+.bar {
+  background: linear-gradient(270deg, $green, $wisegreen);
+  position: absolute;
+  height: 10px;
+  left: 0;
+  top: 5px;
+  border-radius: 5px;
+  min-width: 10px;
+  transition: width 0.5s;
+}
--- a/src/components/node/Comment/index.tsx
+++ b/src/components/node/Comment/index.tsx
@ -1,28 +1,75 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, useMemo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { IComment } from '~/redux/types';
+import { IComment, IFile } from '~/redux/types';
 import * as styles from './styles.scss';
-import { formatCommentText } from '~/utils/dom';
+import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
+import assocPath from 'ramda/es/assocPath';
+import append from 'ramda/es/append';
+import reduce from 'ramda/es/reduce';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { AudioPlayer } from '~/components/media/AudioPlayer';

 type IProps = HTMLAttributes<HTMLDivElement> & {
  is_empty?: boolean;
  is_loading?: boolean;
-  photo?: string;
  comment?: IComment;
+  is_same?: boolean;
 };

-const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => (
-  <CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}>
-    {comment.text && (
-      <Group
-        className={styles.text}
-        dangerouslySetInnerHTML={{
-          __html: formatCommentText(comment.user && comment.user.username, comment.text),
-        }}
-      />
-    )}
-  </CommentWrapper>
-);
+const Comment: FC<IProps> = ({ comment, is_empty, is_same, is_loading, className, ...props }) => {
+  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+    () =>
+      reduce(
+        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
+        {},
+        comment.files
+      ),
+    [comment]
+  );
+
+  return (
+    <CommentWrapper
+      className={className}
+      is_empty={is_empty}
+      is_loading={is_loading}
+      photo={getURL(comment.user.photo)}
+      is_same={is_same}
+      {...props}
+    >
+      {comment.text && (
+        <Group
+          className={styles.text}
+          dangerouslySetInnerHTML={{
+            __html: formatCommentText(
+              !is_same && comment.user && comment.user.username,
+              comment.text
+            ),
+          }}
+        />
+      )}
+
+      <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+
+      {groupped.image && (
+        <div className={styles.images}>
+          {groupped.image.map(file => (
+            <div key={file.id}>
+              <img src={getURL(file)} alt={file.name} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {groupped.audio && (
+        <div className={styles.audios}>
+          {groupped.audio.map(file => (
+            <AudioPlayer key={file.id} file={file} />
+          ))}
+        </div>
+      )}
+    </CommentWrapper>
+  );
+};

 export { Comment };
--- a/src/components/node/Comment/styles.scss
+++ b/src/components/node/Comment/styles.scss
@ -1,8 +1,48 @@
+@import 'flexbin/flexbin.scss';
+
 .text {
-  padding: $gap / 2;
+  // @include outer_shadow();
+
+  padding: $gap;
  font-weight: 300;
+  font: $font_16_medium;
+  min-height: $comment_height;
+  box-sizing: border-box;
+  position: relative;
+  color: #cccccc;

  b {
    font-weight: 600;
  }
 }
+
+.date {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font: $font_12_regular;
+  color: transparentize($color: white, $amount: 0.8);
+  padding: 2px 4px;
+  border-radius: 0 0 $radius 0;
+}
+
+.images {
+  @include flexbin(240px, 5px);
+
+  img {
+    border-radius: $radius;
+  }
+}
+
+.audios {
+  & > div {
+    @include outer_shadow();
+
+    height: $comment_height;
+    border-radius: $radius;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}
--- a/src/components/node/CommentForm/index.tsx
+++ b/src/components/node/CommentForm/index.tsx
@ -5,7 +5,7 @@ import * as styles from './styles.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import assocPath from 'ramda/es/assocPath';
-import { InputHandler, IFileWithUUID, IFile, IComment } from '~/redux/types';
+import { InputHandler, IFileWithUUID } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectNode } from '~/redux/node/selectors';
@ -16,12 +16,15 @@ import uuid from 'uuid4';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { IState } from '~/redux/store';
-import pipe from 'ramda/es/pipe';
-import { ImageUpload } from '~/components/upload/ImageUpload';
-import { getImageSize } from '~/utils/dom';
+import { getFileType } from '~/utils/uploader';
+import { selectUser } from '~/redux/auth/selectors';
+import { getURL } from '~/utils/dom';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { AudioPlayer } from '~/components/media/AudioPlayer';

 const mapStateToProps = (state: IState) => ({
  node: selectNode(state),
+  user: selectUser(state),
  uploads: selectUploads(state),
 });

@ -39,12 +42,12 @@ type IProps = ReturnType<typeof mapStateToProps> &
 const CommentFormUnconnected: FC<IProps> = ({
  node: { comment_data, is_sending_comment },
  uploads: { statuses, files },
+  user: { photo },
  id,
  nodePostComment,
  nodeSetCommentData,
  uploadUploadFiles,
 }) => {
-  // const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
  const onInputChange = useCallback(
    event => {
      event.preventDefault();
@ -57,7 +60,7 @@ const CommentFormUnconnected: FC<IProps> = ({
          temp_id: uuid(),
          subject: UPLOAD_SUBJECTS.COMMENT,
          target: UPLOAD_TARGETS.COMMENTS,
-          type: UPLOAD_TYPES.IMAGE,
+          type: getFileType(file),
        })
      );

@ -94,68 +97,79 @@ const CommentFormUnconnected: FC<IProps> = ({
    [onSubmit]
  );

-  const onFileAdd = useCallback(
-    (file: IFile, temp_id: string) => {
-      const comment = comment_data[id];
-      nodeSetCommentData(id, pipe(
-        assocPath(['files'], [...comment.files, file]),
-        assocPath(['temp_ids'], comment.temp_ids.filter(el => el !== temp_id))
-      )(comment) as IComment);
-    },
-    [nodeSetCommentData, comment_data, id]
-  );
-
  useEffect(() => {
-    Object.entries(statuses).forEach(([file_id, status]) => {
-      const comment = comment_data[id];
+    const temp_ids = (comment_data && comment_data[id] && comment_data[id].temp_ids) || [];
+    const added_files = temp_ids
+      .map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
+      .map(el => !!el && files[el])
+      .filter(el => !!el && !comment_data[id].files.some(file => file.id === el.id));

-      if (comment.temp_ids.includes(file_id) && !!status.uuid && files[status.uuid]) {
-        onFileAdd(files[status.uuid], file_id);
-      }
-    });
-  }, [statuses, comment_data, id, nodeSetCommentData, onFileAdd, files]);
+    const filtered_temps = temp_ids.filter(
+      temp_id =>
+        statuses[temp_id] &&
+        (!statuses[temp_id].uuid || !added_files.some(file => file.id === statuses[temp_id].uuid))
+    );
+
+    if (added_files.length) {
+      nodeSetCommentData(id, {
+        ...comment_data[id],
+        temp_ids: filtered_temps,
+        files: [...comment_data[id].files, ...added_files],
+      });
+    }
+  }, [statuses, files]);
+
+  const comment = comment_data[id];

  return (
-    <CommentWrapper>
-      <form onSubmit={onSubmit}>
+    <CommentWrapper photo={getURL(photo)}>
+      <form onSubmit={onSubmit} className={styles.wrap}>
        <div className={styles.input}>
          <Textarea
-            value={comment_data[id].text}
+            value={comment.text}
            handler={onInput}
            onKeyDown={onKeyDown}
            disabled={is_sending_comment}
+            minRows={2}
          />
        </div>

-        <div className={styles.uploads}>
-          {comment_data[id].files.map(file => (
-            <ImageUpload id={file.id} thumb={getImageSize(file.url)} key={file.id} />
-          ))}
-          {comment_data[id].temp_ids.map(
-            status =>
-              statuses[status] && (
-                <ImageUpload
-                  id={statuses[status].uuid}
-                  thumb={statuses[status].preview}
-                  key={status}
-                  progress={statuses[status].progress}
-                />
-              )
-          )}
-        </div>
-
        <Group horizontal className={styles.buttons}>
-          <input type="file" onInput={onInputChange} />
+          <ButtonGroup>
+            <Button iconLeft="image" size="small" grey iconOnly>
+              <input type="file" onInput={onInputChange} multiple accept="image/*" />
+            </Button>
+
+            <Button iconRight="enter" size="small" grey iconOnly>
+              <input type="file" onInput={onInputChange} multiple accept="audio/*" />
+            </Button>
+          </ButtonGroup>

          <Filler />

          {is_sending_comment && <LoaderCircle size={20} />}

-          <Button size="mini" grey iconRight="enter" disabled={is_sending_comment}>
+          <Button size="small" grey iconRight="enter" disabled={is_sending_comment}>
            Сказать
          </Button>
        </Group>
      </form>
+
+      {comment.temp_ids.map(
+        temp_id =>
+          statuses[temp_id] &&
+          statuses[temp_id].is_uploading && (
+            <div key={statuses[temp_id].temp_id}>{statuses[temp_id].progress}</div>
+          )
+      )}
+
+      {comment.files.map(file => {
+        if (file.type === UPLOAD_TYPES.AUDIO) {
+          return <AudioPlayer file={file} />;
+        }
+
+        return <div>file.name</div>;
+      })}
    </CommentWrapper>
  );
 };
--- a/src/components/node/CommentForm/styles.scss
+++ b/src/components/node/CommentForm/styles.scss
@ -1,11 +1,15 @@
 .wrap {
  display: flex;
  flex-direction: column;
+
+  textarea {
+    min-height: 62px !important;
+  }
 }

 .input {
  flex: 1;
-  padding: $gap / 2;
+  padding: ($gap / 2) ($gap / 2 + 1px);
 }

 .buttons {
@ -14,12 +18,7 @@
  background: transparentize(black, 0.8);
  padding: $gap / 2;
  border-radius: 0 0 $radius $radius;
-
-  svg {
-    fill: transparentize(white, 0.9);
-  }
-
-  @include outer_shadow();
+  flex-wrap: wrap;
 }

 .uploads {
--- a/src/components/node/ImageSwitcher/index.tsx
+++ b/src/components/node/ImageSwitcher/index.tsx
@ -11,18 +11,22 @@ interface IProps {
  onChange: (current: number) => void;
 }

-const ImageSwitcher: FC<IProps> = ({ total, current, onChange, loaded }) => (
-  <div className={styles.wrap}>
-    <div className={styles.switcher}>
-      {range(0, total).map(item => (
-        <div
-          className={classNames({ is_active: item === current, is_loaded: loaded[item] })}
-          key={item}
-          onClick={() => onChange(item)}
-        />
-      ))}
+const ImageSwitcher: FC<IProps> = ({ total, current, onChange, loaded }) => {
+  if (total <= 1) return null;
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.switcher}>
+        {range(0, total).map(item => (
+          <div
+            className={classNames({ is_active: item === current, is_loaded: loaded[item] })}
+            key={item}
+            onClick={() => onChange(item)}
+          />
+        ))}
+      </div>
    </div>
-  </div>
-);
+  );
+};

 export { ImageSwitcher };
--- a/src/components/node/NodeComments/index.tsx
+++ b/src/components/node/NodeComments/index.tsx
@ -1,24 +1,24 @@
 import React, { FC } from 'react';
-import range from 'ramda/es/range';
 import { Comment } from '../Comment';
-import { INode } from '~/redux/types';
-import { CommentForm } from '../CommentForm';
-import { Group } from '~/components/containers/Group';
-import * as styles from './styles.scss';
 import { Filler } from '~/components/containers/Filler';

+import * as styles from './styles.scss';
+
 interface IProps {
  comments?: any;
 }

+const isSameComment = (comments, index) =>
+  comments[index - 1] && comments[index - 1].user.id === comments[index].user.id;
+
 const NodeComments: FC<IProps> = ({ comments }) => (
-  <Group className={styles.wrap}>
-    {comments.map(comment => (
-      <Comment key={comment.id} comment={comment} />
+  <div className={styles.wrap}>
+    {comments.map((comment, index) => (
+      <Comment key={comment.id} comment={comment} is_same={isSameComment(comments, index)} />
    ))}

    <Filler />
-  </Group>
+  </div>
 );

 export { NodeComments };
--- a/src/components/node/NodeComments/styles.scss
+++ b/src/components/node/NodeComments/styles.scss
@ -1,4 +1,8 @@
 .wrap {
+  & > div {
+    margin: $gap 0 0 0;
+  }
+
  // display: flex;
  // flex-direction: column !important;

--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@ -18,9 +18,11 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 interface IProps {
  is_loading: boolean;
  node: INode;
+  layout: {};
+  updateLayout: () => void;
 }

-const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
+const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
  const [is_animated, setIsAnimated] = useState(false);
  const [current, setCurrent] = useState(0);
  const [height, setHeight] = useState(320);
@ -39,6 +41,8 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
    loaded,
  ]);

+  useEffect(() => updateLayout(), [loaded]);
+
  useEffect(() => {
    if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);

@ -78,7 +82,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
            >
              <img
                className={styles.image}
-                src={getImageSize(file.url, 'node')}
+                src={getImageSize(file, 'node')}
                alt=""
                key={file.id}
                onLoad={onImageLoad(index)}
--- a/src/components/node/NodeNoComments/styles.scss
+++ b/src/components/node/NodeNoComments/styles.scss
@ -31,6 +31,8 @@
  text-transform: uppercase;
  font: $font_18_semibold;
  color: transparentize(white, 0.5);
+  flex: 0 0 $comment_height;
+
  @include outer_shadow();

  &:nth-child(2) {
--- a/src/components/node/NodePanel/index.tsx
+++ b/src/components/node/NodePanel/index.tsx
@ -1,30 +1,48 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import * as styles from './styles.scss';
-import { Group } from '~/components/containers/Group';
-import { Filler } from '~/components/containers/Filler';
-import {Icon} from "~/components/input/Icon";
+import { INode } from '~/redux/types';
+import { createPortal } from 'react-dom';
+import { NodePanelInner } from '~/components/node/NodePanelInner';

-interface IProps {}
+interface IProps {
+  node: INode;
+  layout: {};
+}

-const NodePanel: FC<IProps> = () => (
-  <div className={styles.wrap}>
-    <Group horizontal className={styles.panel}>
-      <Filler>
-        <div className={styles.title}>Node title</div>
-        <div className={styles.name}>~author</div>
-      </Filler>
-    </Group>
+const NodePanel: FC<IProps> = ({ node, layout }) => {
+  const [stack, setStack] = useState(false);

-    <div className={styles.buttons}>
-      <Icon icon="edit" size={24} />
+  const ref = useRef(null);
+  const getPlace = useCallback(() => {
+    if (!ref.current) return;

-      <div className={styles.sep} />
+    const { offsetTop } = ref.current;
+    const { height } = ref.current.getBoundingClientRect();
+    const { scrollY, innerHeight } = window;

-      <Icon icon="heart" size={24} />
+    setStack(offsetTop > scrollY + innerHeight - height);
+  }, [ref]);
+
+  useEffect(() => {
+    getPlace();
+    window.addEventListener('scroll', getPlace);
+    window.addEventListener('resize', getPlace);
+
+    return () => {
+      window.removeEventListener('scroll', getPlace);
+      window.removeEventListener('resize', getPlace);
+    };
+  }, [layout]);
+
+  return (
+    <div className={styles.place} ref={ref}>
+      {stack ? (
+        createPortal(<NodePanelInner node={node} stack />, document.body)
+      ) : (
+        <NodePanelInner node={node} />
+      )}
    </div>
-  </div>
-);
+  );
+};

 export { NodePanel };
-
-// <div className={styles.mark} />
--- a/src/components/node/NodePanel/styles.scss
+++ b/src/components/node/NodePanel/styles.scss
@ -1,91 +1,6 @@
-.wrap {
-  background: $node_bg;
-  padding: $gap;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: stretch;
-  border-radius: $radius $radius 0 0;
+.place {
+  height: 72px;
  position: relative;
-  margin-top: -$radius;
  z-index: 3;
-}
-
-.title {
-  text-transform: uppercase;
-  font: $font_24_semibold;
-  height: 24px;
-  padding-bottom: 6px;
-}
-
-.name {
-  font: $font_12_regular;
-  color: transparentize(white, 0.5);
-}
-
-.btn {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  fill: transparentize(white, 0.5);
-}
-
-.panel {
-  flex: 1;
-}
-
-.buttons {
-  flex: 0;
-  padding-right: $gap;
-  fill: transparentize(white, 0.7);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  & > * {
-    margin: 0 $gap;
-
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-  //height: 54px;
-  //border-radius: $radius $radius 0 0;
-  //background: linear-gradient(176deg, #f42a00, #5c1085);
-  //position: absolute;
-  //bottom: 0;
-  //right: 10px;
-  //width: 270px;
-  //display: flex;
-}
-
-.mark {
-  flex: 0 0 32px;
-  position: relative;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    top: -38px;
-    right: 4px;
-    width: 24px;
-    height: 52px;
-    background: $green_gradient;
-    box-shadow: transparentize(black, 0.8) 4px 2px;
-    border-radius: 2px;
-  }
-}
-
-.sep {
-  flex: 0 0 6px;
-  height: 6px;
-  width: 6px;
-  border-radius: 4px;
-  background: transparentize(black, 0.7);
+  margin-top: -$radius;
 }
--- a/src/components/node/NodePanelInner/index.tsx
+++ b/src/components/node/NodePanelInner/index.tsx
@ -0,0 +1,39 @@
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import * as styles from './styles.scss';
+import { Group } from '~/components/containers/Group';
+import { Filler } from '~/components/containers/Filler';
+import { Icon } from '~/components/input/Icon';
+import { INode } from '~/redux/types';
+import classNames from 'classnames';
+
+interface IProps {
+  node: INode;
+  stack?: boolean;
+}
+
+const NodePanelInner: FC<IProps> = ({ node: { title, user }, stack }) => {
+  return (
+    <div className={classNames(styles.wrap, { stack })}>
+      <div className={styles.content}>
+        <Group horizontal className={styles.panel}>
+          <Filler>
+            <div className={styles.title}>{title || '...'}</div>
+            {user && user.username && <div className={styles.name}>~ {user.username}</div>}
+          </Filler>
+        </Group>
+
+        <div className={styles.buttons}>
+          <Icon icon="edit" size={24} />
+
+          <div className={styles.sep} />
+
+          <Icon icon="heart" size={24} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { NodePanelInner };
+
+// <div className={styles.mark} />
--- a/src/components/node/NodePanelInner/styles.scss
+++ b/src/components/node/NodePanelInner/styles.scss
@ -0,0 +1,109 @@
+.wrap {
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  position: relative;
+  height: 72px;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  &:global(.stack) {
+    padding: 0 $gap;
+    bottom: 0;
+    position: fixed;
+  }
+}
+
+.content {
+  flex: 0 1 $content_width;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  border-radius: $radius $radius 0 0;
+  box-sizing: border-box;
+  padding: $gap;
+  background: $node_bg;
+  height: 72px;
+}
+
+.title {
+  text-transform: uppercase;
+  font: $font_24_semibold;
+  height: 24px;
+  padding-bottom: 6px;
+}
+
+.name {
+  font: $font_14_regular;
+  color: transparentize(white, 0.5);
+}
+
+.btn {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: transparentize(white, 0.5);
+}
+
+.panel {
+  flex: 1;
+}
+
+.buttons {
+  flex: 0;
+  padding-right: $gap;
+  fill: transparentize(white, 0.7);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    margin: 0 $gap;
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  //height: 54px;
+  //border-radius: $radius $radius 0 0;
+  //background: linear-gradient(176deg, #f42a00, #5c1085);
+  //position: absolute;
+  //bottom: 0;
+  //right: 10px;
+  //width: 270px;
+  //display: flex;
+}
+
+.mark {
+  flex: 0 0 32px;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -38px;
+    right: 4px;
+    width: 24px;
+    height: 52px;
+    background: $green_gradient;
+    box-shadow: transparentize(black, 0.8) 4px 2px;
+    border-radius: 2px;
+  }
+}
+
+.sep {
+  flex: 0 0 6px;
+  height: 6px;
+  width: 6px;
+  border-radius: 4px;
+  background: transparentize(black, 0.7);
+}
--- a/src/components/node/NodeTags/index.tsx
+++ b/src/components/node/NodeTags/index.tsx
@ -1,18 +1,15 @@
 import React, { FC } from 'react';
 import { Tags } from '../Tags';
+import { ITag } from '~/redux/types';

-interface IProps {}
+interface IProps {
+  is_editable?: boolean;
+  tags: ITag[];
+  onChange?: (tags: string[]) => void;
+}

-const NodeTags: FC<IProps> = ({}) => (
-  <Tags
-    tags={[
-      { title: 'Избранный', feature: 'red' },
-      { title: 'Плейлист', feature: 'green' },
-      { title: 'Просто' },
-      { title: '+ фото', feature: 'black' },
-      { title: '+ с музыкой', feature: 'black' },
-    ]}
-  />
+const NodeTags: FC<IProps> = ({ is_editable, tags, onChange }) => (
+  <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} />
 );

 export { NodeTags };
--- a/src/components/node/Tag/index.tsx
+++ b/src/components/node/Tag/index.tsx
@ -1,25 +1,41 @@
-import React, { FC } from 'react';
+import React, { FC, ChangeEventHandler, KeyboardEventHandler, FocusEventHandler } from 'react';
 import * as styles from './styles.scss';
 import { ITag } from '~/redux/types';

 import classNames = require('classnames');

+const getTagFeature = (tag: Partial<ITag>) => {
+  if (tag.title.substr(0, 1) === '/') return 'green';
+
+  return '';
+};
+
 interface IProps {
-  title: ITag['title'];
-  feature?: ITag['feature'];
+  tag: Partial<ITag>;

  is_hoverable?: boolean;
+  onInput?: ChangeEventHandler<HTMLInputElement>;
+  onKeyUp?: KeyboardEventHandler;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
 }

-const Tag: FC<IProps> = ({
-  title,
-  feature,
-
-  is_hoverable,
-}) => (
-  <div className={classNames(styles.tag, feature, { is_hoverable })}>
+const Tag: FC<IProps> = ({ tag, is_hoverable, onInput, onKeyUp, onBlur }) => (
+  <div className={classNames(styles.tag, getTagFeature(tag), { is_hoverable, input: !!onInput })}>
    <div className={styles.hole} />
-    <div className={styles.title}>{title}</div>
+    <div className={styles.title}>{tag.title}</div>
+
+    {onInput && (
+      <input
+        type="text"
+        value={tag.title}
+        size={1}
+        placeholder="Добавить"
+        maxLength={24}
+        onChange={onInput}
+        onKeyUp={onKeyUp}
+        onBlur={onBlur}
+      />
+    )}
  </div>
 );

--- a/src/components/node/Tag/styles.scss
+++ b/src/components/node/Tag/styles.scss
@ -6,11 +6,12 @@
  align-items: center;
  justify-content: stretch;
  border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2);
-  font: $font_12_semibold;
+  font: $font_14_semibold;
  align-self: flex-start;
  padding: 0 8px 0 0;
  box-shadow: $shadow_depth_2;
  margin: ($gap / 2) $gap ($gap / 2) 0;
+  position: relative;

  &:global(.is_hoverable) {
    cursor: pointer;
@ -37,9 +38,35 @@
    background: transparentize(black, 0.7);
    box-shadow: none;
    color: transparentize(white, 0.6);
-    font: $font_12_medium;
+    font: $font_14_medium;

-    .hole::after { background: transparentize(white, 0.98); }
+    .hole::after {
+      background: transparentize(white, 0.98);
+    }
+  }
+
+  &:global(.input) {
+    color: transparent !important;
+    min-width: 100px;
+  }
+
+  input {
+    background: none;
+    border: none;
+    color: white;
+    outline: none;
+    display: inline-flex;
+    position: absolute;
+    font: inherit;
+
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    padding-left: 23px;
+    padding-right: 5px;
+    box-sizing: border-box;
  }
 }

@ -50,6 +77,7 @@
  margin-right: 3px;
  align-items: center;
  justify-content: center;
+  flex: 0 0 22px;

  &::after {
    content: ' ';
@ -63,4 +91,7 @@

 .title {
  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
--- a/src/components/node/Tags/index.tsx
+++ b/src/components/node/Tags/index.tsx
@ -1,25 +1,91 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, {
+  FC,
+  HTMLAttributes,
+  useState,
+  useCallback,
+  useEffect,
+  KeyboardEvent,
+  ChangeEvent,
+  useRef,
+} from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
 import { Tag } from '~/components/node/Tag';
+import uniq from 'ramda/es/uniq';

 type IProps = HTMLAttributes<HTMLDivElement> & {
-  tags: ITag[];
-}
+  tags: Partial<ITag>[];
+  is_editable?: boolean;
+  onTagsChange?: (tags: string[]) => void;
+};

-export const Tags: FC<IProps> = ({
-  tags,
-  ...props
-}) => (
-  <TagField {...props}>
-    {
-      tags.map(tag => (
-        <Tag
-          key={tag.title}
-          title={tag.title}
-          feature={tag.feature}
-        />
-      ))
-    }
-  </TagField>
-);
+export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props }) => {
+  const [input, setInput] = useState('');
+  const [data, setData] = useState([]);
+  const timer = useRef(null);
+
+  const onInput = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(timer.current);
+      setInput(value);
+    },
+    [setInput, timer]
+  );
+
+  const onKeyUp = useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === 'Backspace' && input === '' && data.length) {
+        setData(data.slice(0, data.length - 1));
+        setInput(data[data.length - 1].title);
+      }
+
+      if (key === 'Enter' || key === ',' || key === 'Comma') {
+        setData(
+          uniq([
+            ...data,
+            ...input
+              .split(',')
+              .map((title: string) =>
+                title
+                  .trim()
+                  .substr(0, 32)
+                  .toLowerCase()
+              )
+              .filter(el => el.length > 0)
+              .filter(el => !tags.some(tag => tag.title.trim() === el.trim()))
+              .map(title => ({
+                title,
+              })),
+          ])
+        );
+        setInput('');
+      }
+    },
+    [input, setInput, data, setData]
+  );
+
+  const onSubmit = useCallback(() => {
+    if (!data.length) return;
+    onTagsChange(uniq([...tags, ...data]).map(tag => tag.title));
+  }, [tags, data, onTagsChange]);
+
+  useEffect(() => {
+    setData(data.filter(({ title }) => !tags.some(tag => tag.title.trim() === title.trim())));
+  }, [tags]);
+
+  return (
+    <TagField {...props}>
+      {tags.map(tag => (
+        <Tag key={tag.title} tag={tag} />
+      ))}
+
+      {data.map(tag => (
+        <Tag key={tag.title} tag={tag} />
+      ))}
+
+      {is_editable && (
+        <Tag tag={{ title: input }} onInput={onInput} onKeyUp={onKeyUp} onBlur={onSubmit} />
+      )}
+    </TagField>
+  );
+};
--- a/src/components/upload/ImageUpload/index.tsx
+++ b/src/components/upload/ImageUpload/index.tsx
@ -11,9 +11,7 @@ interface IProps {
  is_uploading?: boolean;
 }

-const ImageUpload: FC<IProps> = ({
- thumb, id, progress, is_uploading,
-}) => (
+const ImageUpload: FC<IProps> = ({ thumb, progress, is_uploading }) => (
  <div className={styles.wrap}>
    <div className={classNames(styles.thumb_wrap, { is_uploading })}>
      {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@ -4,7 +4,7 @@ export const API = {
  BASE: process.env.API_HOST,
  USER: {
    LOGIN: '/auth/login',
-    ME: '/auth/me', //
+    ME: '/auth/', //
    UPLOAD: (target, type) => `/upload/${target}/${type}`,
  },
  NODE: {
@ -13,5 +13,6 @@ export const API = {
    GET_NODE: (id: number | string) => `/node/${id}`,

    COMMENT: (id: INode['id']) => `/node/${id}/comment`,
+    UPDATE_TAGS: (id: INode['id']) => `/node/${id}/tags`,
  },
 };
--- a/src/containers/App.tsx
+++ b/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>
 );

--- a/src/containers/dialogs/ScrollDialog/styles.scss
+++ b/src/containers/dialogs/ScrollDialog/styles.scss
@ -111,7 +111,7 @@

 .children {
  background: $content_bg;
-  border-radius: $radius;
+  border-radius: $radius $radius 0 0;
 }

 .top_cap {
@ -124,7 +124,7 @@

  &::after {
    position: absolute;
-    content: " ";
+    content: ' ';
    width: 100%;
    height: $radius;
    background: linear-gradient($content_bg, transparentize($content_bg, 1));
@ -207,4 +207,4 @@
  &::before {
    animation: spin_2 0.5s forwards;
  }
-}
+}
--- a/src/containers/examples/EditorExample/index.tsx
+++ b/src/containers/examples/EditorExample/index.tsx
@ -19,9 +19,7 @@ const EditorExample: FC<IProps> = () => (
  <Card className={styles.wrap} seamless>
    <Group horizontal className={styles.group} seamless>
      <div className={styles.editor}>
-        <Panel
-          className={classNames(styles.editor_panel, styles.editor_image_panel)}
-        >
+        <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
          <Scroll>
            <CellGrid className={styles.editor_image_container} size={200}>
              <div className={styles.editor_image} />
@ -48,11 +46,11 @@ const EditorExample: FC<IProps> = () => (

            <Tags
              tags={[
-                { title: 'Избранный', feature: 'red' },
-                { title: 'Плейлист', feature: 'green' },
+                { title: 'Избранный' },
+                { title: 'Плейлист' },
                { title: 'Просто' },
-                { title: '+ фото', feature: 'black' },
-                { title: '+ с музыкой', feature: 'black' }
+                { title: '+ фото' },
+                { title: '+ с музыкой' },
              ]}
            />
          </Group>
--- a/src/containers/main/BottomContainer/index.tsx
+++ b/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 };
--- a/src/containers/main/BottomContainer/styles.scss
+++ b/src/containers/main/BottomContainer/styles.scss
@ -0,0 +1,30 @@
+.wrap {
+  position: fixed;
+  transform: translateZ(0);
+  bottom: $gap;
+  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;
+  }
+}
--- a/src/containers/main/MainLayout/index.tsx
+++ b/src/containers/main/MainLayout/index.tsx
@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SidePane } from '~/components/main/SidePane';
 import * as styles from './styles.scss';
 import { Header } from '~/components/main/Header';

--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@ -1,4 +1,4 @@
-import React, { FC, createElement, useEffect } from 'react';
+import React, { FC, createElement, useEffect, useCallback, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { connect } from 'react-redux';

@ -16,10 +16,16 @@ import { NodeTags } from '~/components/node/NodeTags';
 import { NODE_COMPONENTS } from '~/redux/node/constants';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { CommentForm } from '~/components/node/CommentForm';
+import { selectUser } from '~/redux/auth/selectors';
+
+const mapStateToProps = state => ({
+  node: selectNode(state),
+  user: selectUser(state),
+});

-const mapStateToProps = selectNode;
 const mapDispatchToProps = {
  nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
+  nodeUpdateTags: NODE_ACTIONS.nodeUpdateTags,
 };

 type IProps = ReturnType<typeof mapStateToProps> &
@ -30,30 +36,39 @@ const NodeLayoutUnconnected: FC<IProps> = ({
  match: {
    params: { id },
  },
-  is_loading,
-  is_loading_comments,
-  comments = [],
-  current: node,
+  node: { is_loading, is_loading_comments, comments = [], current: node },
+  user: { is_user },
  nodeLoadNode,
+  nodeUpdateTags,
 }) => {
+  const [layout, setLayout] = useState({});
+
+  const updateLayout = useCallback(() => setLayout({}), []);
+
  useEffect(() => {
    if (is_loading) return;
    nodeLoadNode(parseInt(id, 10), null);
  }, [nodeLoadNode, id]);

+  const onTagsChange = useCallback(
+    (tags: string[]) => {
+      nodeUpdateTags(node.id, tags);
+    },
+    [node, nodeUpdateTags]
+  );
  const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];

  return (
    <Card className={styles.node} seamless>
-      {block && createElement(block, { node, is_loading })}
+      {block && createElement(block, { node, is_loading, updateLayout, layout })}

-      <NodePanel />
+      <NodePanel node={node} layout={layout} />

      <Group>
        <Padder>
          <Group horizontal className={styles.content}>
            <Group className={styles.comments}>
-              <CommentForm id={0} />
+              {is_user && <CommentForm id={0} />}

              {is_loading_comments || !comments.length ? (
                <NodeNoComments is_loading={is_loading_comments} />
@ -63,8 +78,8 @@ const NodeLayoutUnconnected: FC<IProps> = ({
            </Group>

            <div className={styles.panel}>
-              <Group style={{ flex: 1 }}>
-                <NodeTags />
+              <Group style={{ flex: 1, minWidth: 0 }}>
+                <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />

                <NodeRelated title="First album" />

--- a/src/containers/node/NodeLayout/styles.scss
+++ b/src/containers/node/NodeLayout/styles.scss
@ -6,6 +6,7 @@

 .comments {
  flex: 3 1;
+  min-width: 0;
 }

 .panel {
@ -14,6 +15,7 @@
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: $gap / 2;
+  min-width: 0;

  @include tablet {
    padding-left: 0;
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,5 +1,45 @@
 /*
  sortable grid: http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/grid?_k=hjqdj1
+  
+  [BUGS]
+
+  FIXME: flow hangs on empty response
+  
+  [CONTENT]
+
+  TODO: adding photos to comments
+  TODO: adding media to comments
+  TODO: adding media to posts
+  TODO: adding text to posts
+  TODO: covers for posts
+  TODO: wallpapers for posts
+  TODO: changing flow appearance for posts
+
+  TODO: display for all node types
+  TODO: related by tags
+  TODO: sticky left column
+  TODO: adaptive relates count
+
+  TODO: boris page
+  TODO: user profile and settings
+
+  [IMPORT]
+
+  TODO: import users properly
+  TODO: auth using md5 fallback
+  TODO: import files properly
+  TODO: import nodes properly
+  TODO: import comments properly
+  TODO: convert comment content properly
+  TODO: convert post text properly
+
+  [NOT TODAY]
+
+  TODO: swipable image slideshow
+  TODO: notifications
+  TODO: PMs
+  TODO: 
+
 */
 import * as React from 'react';
 import { render } from 'react-dom';
--- a/src/redux/auth/api.ts
+++ b/src/redux/auth/api.ts
@ -1,13 +1,8 @@
-import {
-  api,
-  authMiddleware,
-  errorMiddleware,
-  resultMiddleware,
-  configWithToken,
-} from '~/utils/api';
+import { api, errorMiddleware, resultMiddleware, configWithToken } from '~/utils/api';
 import { API } from '~/constants/api';
 import { IResultWithStatus } from '~/redux/types';
 import { userLoginTransform } from '~/redux/auth/transforms';
+import { IUser } from './types';

 export const apiUserLogin = ({
  username,
@ -15,8 +10,15 @@ export const apiUserLogin = ({
 }: {
  username: string;
  password: string;
-}): Promise<IResultWithStatus<{ token: string; status?: number }>> => api
-  .post(API.USER.LOGIN, { username, password })
-  .then(resultMiddleware)
-  .catch(errorMiddleware)
-  .then(userLoginTransform);
+}): Promise<IResultWithStatus<{ token: string; status?: number }>> =>
+  api
+    .post(API.USER.LOGIN, { username, password })
+    .then(resultMiddleware)
+    .catch(errorMiddleware)
+    .then(userLoginTransform);
+
+export const apiAuthGetUser = ({ access }): Promise<IResultWithStatus<{ user: IUser }>> =>
+  api
+    .get(API.USER.ME, configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);
--- a/src/redux/auth/constants.ts
+++ b/src/redux/auth/constants.ts
@ -8,8 +8,9 @@ export const AUTH_USER_ACTIONS = {
 };

 export const USER_ERRORS = {
+  UNAUTHORIZED: 'Вы не авторизованы',
  INVALID_CREDENTIALS: 'Неверное имя пользователя или пароль. Очень жаль.',
-  EMPTY_CREDENTIALS: 'Давайте введем логин и пароль. Это обязательно.'
+  EMPTY_CREDENTIALS: 'Давайте введем логин и пароль. Это обязательно.',
 };

 export const USER_STATUSES = {
@ -34,6 +35,7 @@ export const EMPTY_USER: IUser = {
  name: null,
  username: null,
  photo: null,
+  cover: null,
  is_activated: false,
  is_user: false,
 };
--- a/src/redux/auth/sagas.ts
+++ b/src/redux/auth/sagas.ts
@ -1,18 +1,17 @@
+import { call, put, takeLatest, select } from 'redux-saga/effects';
+import { AUTH_USER_ACTIONS, EMPTY_USER, USER_ERRORS } from '~/redux/auth/constants';
 import {
- call, put, takeLatest, select,
-} from 'redux-saga/effects';
-import { SagaIterator } from 'redux-saga';
-import { push } from 'connected-react-router';
-import { AUTH_USER_ACTIONS } from '~/redux/auth/constants';
-import * as ActionCreators from '~/redux/auth/actions';
-import { authSetToken, userSetLoginError, authSetUser } from '~/redux/auth/actions';
-import { apiUserLogin } from '~/redux/auth/api';
-import { modalSetShown, modalShowDialog } from '~/redux/modal/actions';
+  authSetToken,
+  userSetLoginError,
+  authSetUser,
+  userSendLoginRequest,
+} from '~/redux/auth/actions';
+import { apiUserLogin, apiAuthGetUser } from '~/redux/auth/api';
+import { modalSetShown } from '~/redux/modal/actions';
 import { selectToken } from './selectors';
-import { URLS } from '~/constants/urls';
-import { DIALOGS } from '../modal/constants';
 import { IResultWithStatus } from '../types';
 import { IUser } from './types';
+import { REHYDRATE, RehydrateAction } from 'redux-persist';

 export function* reqWrapper(requestAction, props = {}): ReturnType<typeof requestAction> {
  const access = yield select(selectToken);
@ -20,19 +19,13 @@ export function* reqWrapper(requestAction, props = {}): ReturnType<typeof reques
  const result = yield call(requestAction, { access, ...props });

  if (result && result.status === 401) {
-    yield put(push(URLS.BASE));
-    yield put(modalShowDialog(DIALOGS.LOGIN));
-
-    return result;
+    return { error: USER_ERRORS.UNAUTHORIZED, data: {} };
  }
-  
+
  return result;
 }

-function* sendLoginRequestSaga({
-  username,
-  password,
-}: ReturnType<typeof ActionCreators.userSendLoginRequest>) {
+function* sendLoginRequestSaga({ username, password }: ReturnType<typeof userSendLoginRequest>) {
  if (!username || !password) return;

  const {
@ -53,8 +46,31 @@ function* sendLoginRequestSaga({
  yield put(modalSetShown(false));
 }

-function* mySaga() {
+function* checkUserSaga({ key }: RehydrateAction) {
+  if (key !== 'auth') return;
+
+  const {
+    error,
+    data: { user },
+  }: IResultWithStatus<{ user: IUser }> = yield call(reqWrapper, apiAuthGetUser);
+
+  if (error) {
+    yield put(
+      authSetUser({
+        ...EMPTY_USER,
+        is_user: false,
+      })
+    );
+
+    return;
+  }
+
+  yield put(authSetUser({ ...user, is_user: true }));
+}
+
+function* authSaga() {
+  yield takeLatest(REHYDRATE, checkUserSaga);
  yield takeLatest(AUTH_USER_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
 }

-export default mySaga;
+export default authSaga;
--- a/src/redux/auth/types.ts
+++ b/src/redux/auth/types.ts
@ -1,3 +1,5 @@
+import { IFile } from '../types';
+
 export interface IToken {
  access: string;
  refresh: string;
@ -8,7 +10,8 @@ export interface IUser {
  username: string;
  email: string;
  role: string;
-  photo: string;
+  photo: IFile;
+  cover: IFile;
  name: string;

  is_activated: boolean;
--- a/src/redux/node/actions.ts
+++ b/src/redux/node/actions.ts
@ -1,4 +1,4 @@
-import { INode, IValidationErrors, IComment } from '../types';
+import { INode, IValidationErrors, IComment, ITag } from '../types';
 import { NODE_ACTIONS } from './constants';
 import { INodeState } from './reducer';

@ -53,3 +53,14 @@ export const nodeSetCommentData = (id: number, comment: IComment) => ({
  comment,
  type: NODE_ACTIONS.SET_COMMENT_DATA,
 });
+
+export const nodeUpdateTags = (id: INode['id'], tags: string[]) => ({
+  type: NODE_ACTIONS.UPDATE_TAGS,
+  id,
+  tags,
+});
+
+export const nodeSetTags = (tags: ITag[]) => ({
+  type: NODE_ACTIONS.SET_TAGS,
+  tags,
+});
--- a/src/redux/node/api.ts
+++ b/src/redux/node/api.ts
@ -1,6 +1,7 @@
 import { api, configWithToken, resultMiddleware, errorMiddleware } from '~/utils/api';
 import { INode, IResultWithStatus, IComment } from '../types';
 import { API } from '~/constants/api';
+import { nodeUpdateTags } from './actions';

 export const postNode = ({
  access,
@ -50,10 +51,24 @@ export const postNodeComment = ({

 export const getNodeComments = ({
  id,
+  access,
 }: {
  id: number;
+  access: string;
 }): Promise<IResultWithStatus<{ comment: Comment }>> =>
  api
-    .get(API.NODE.COMMENT(id))
+    .get(API.NODE.COMMENT(id), configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);
+
+export const updateNodeTags = ({
+  id,
+  tags,
+  access,
+}: ReturnType<typeof nodeUpdateTags> & { access: string }): Promise<
+  IResultWithStatus<{ node: INode }>
+> =>
+  api
+    .post(API.NODE.UPDATE_TAGS(id), { tags }, configWithToken(access))
    .then(resultMiddleware)
    .catch(errorMiddleware);
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@ -16,6 +16,9 @@ export const NODE_ACTIONS = {

  POST_COMMENT: `${prefix}POST_COMMENT`,
  SET_COMMENTS: `${prefix}SET_COMMENTS`,
+
+  UPDATE_TAGS: `${prefix}UPDATE_TAGS`,
+  SET_TAGS: `${prefix}SET_TAGS`,
 };

 export const EMPTY_BLOCK: IBlock = {
@ -28,7 +31,7 @@ export const EMPTY_BLOCK: IBlock = {
 export const EMPTY_NODE: INode = {
  id: null,

-  user_id: null,
+  user: null,

  title: '',
  files: [],
@ -37,6 +40,7 @@ export const EMPTY_NODE: INode = {
  type: null,

  blocks: [],
+  tags: [],

  options: {
    flow: {
@ -53,7 +57,10 @@ export const NODE_TYPES = {
  TEXT: 'text',
 };

-type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<{ node: INode; is_loading: boolean }>>;
+type INodeComponents = Record<
+  ValueOf<typeof NODE_TYPES>,
+  FC<{ node: INode; is_loading: boolean; layout: {}; updateLayout: () => void }>
+>;

 export const NODE_COMPONENTS: INodeComponents = {
  [NODE_TYPES.IMAGE]: NodeImageBlock,
--- a/src/redux/node/handlers.ts
+++ b/src/redux/node/handlers.ts
@ -8,6 +8,7 @@ import {
  nodeSetSendingComment,
  nodeSetComments,
  nodeSetCommentData,
+  nodeSetTags,
 } from './actions';
 import { INodeState } from './reducer';

@ -38,6 +39,9 @@ const setCommentData = (
  { id, comment }: ReturnType<typeof nodeSetCommentData>
 ) => assocPath(['comment_data', id], comment, state);

+const setTags = (state: INodeState, { tags }: ReturnType<typeof nodeSetTags>) =>
+  assocPath(['current', 'tags'], tags, state);
+
 export const NODE_HANDLERS = {
  [NODE_ACTIONS.SAVE]: setSaveErrors,
  [NODE_ACTIONS.SET_LOADING]: setLoading,
@ -46,4 +50,5 @@ export const NODE_HANDLERS = {
  [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
  [NODE_ACTIONS.SET_COMMENTS]: setComments,
  [NODE_ACTIONS.SET_COMMENT_DATA]: setCommentData,
+  [NODE_ACTIONS.SET_TAGS]: setTags,
 };
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@ -13,8 +13,10 @@ import {
  nodeSetSendingComment,
  nodeSetComments,
  nodeSetCommentData,
+  nodeUpdateTags,
+  nodeSetTags,
 } from './actions';
-import { postNode, getNode, postNodeComment, getNodeComments } from './api';
+import { postNode, getNode, postNodeComment, getNodeComments, updateNodeTags } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes } from '../flow/actions';
 import { ERRORS } from '~/constants/errors';
@ -22,6 +24,7 @@ import { modalSetShown } from '../modal/actions';
 import { selectFlowNodes } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
 import { selectNode } from './selectors';
+import { IResultWithStatus, INode } from '../types';

 function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
  yield put(nodeSetSaveErrors({}));
@ -69,7 +72,7 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
  // todo: load comments
  const {
    data: { comments },
-  } = yield call(getNodeComments, { id });
+  } = yield call(reqWrapper, getNodeComments, { id });

  yield put(nodeSetComments(comments || []));

@ -83,7 +86,7 @@ function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {

  yield put(nodeSetSendingComment(true));
  const {
-    data: { comment, id: target_id },
+    data: { comment },
    error,
  } = yield call(reqWrapper, postNodeComment, { data: comment_data[id], id: current.id });
  yield put(nodeSetSendingComment(false));
@ -102,8 +105,22 @@ function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {
  }
 }

+function* onUpdateTags({ id, tags }: ReturnType<typeof nodeUpdateTags>) {
+  yield delay(1000);
+  const {
+    data: { node },
+  }: IResultWithStatus<{ node: INode }> = yield call(reqWrapper, updateNodeTags, { id, tags });
+
+  const { current } = yield select(selectNode);
+
+  if (!node || !node.id || node.id !== current.id) return;
+
+  yield put(nodeSetTags(node.tags));
+}
+
 export default function* nodeSaga() {
  yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
  yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
  yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
+  yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);
 }
--- a/src/redux/player/actions.ts
+++ b/src/redux/player/actions.ts
@ -0,0 +1,25 @@
+import { IPlayerState } from './reducer';
+import { PLAYER_ACTIONS } from './constants';
+
+export const playerSetFile = (file: IPlayerState['file']) => ({
+  type: PLAYER_ACTIONS.SET_FILE,
+  file,
+});
+
+export const playerSetStatus = (status: IPlayerState['status']) => ({
+  type: PLAYER_ACTIONS.SET_STATUS,
+  status,
+});
+
+export const playerPlay = () => ({
+  type: PLAYER_ACTIONS.PLAY,
+});
+
+export const playerPause = () => ({
+  type: PLAYER_ACTIONS.PAUSE,
+});
+
+export const playerSeek = (seek: number) => ({
+  type: PLAYER_ACTIONS.SEEK,
+  seek,
+});
--- a/src/redux/player/constants.ts
+++ b/src/redux/player/constants.ts
@ -0,0 +1,16 @@
+const prefix = 'PLAYER.';
+
+export const PLAYER_ACTIONS = {
+  SET_FILE: `${prefix}SET_FILE`,
+  SET_STATUS: `${prefix}SET_STATUS`,
+
+  PLAY: `${prefix}PLAY`,
+  PAUSE: `${prefix}PAUSE`,
+  SEEK: `${prefix}SEEK`,
+};
+
+export const PLAYER_STATES = {
+  PLAYING: 'PLAYING',
+  PAUSED: 'PAUSED',
+  UNSET: 'UNSET',
+};
--- a/src/redux/player/handlers.ts
+++ b/src/redux/player/handlers.ts
@ -0,0 +1,14 @@
+import { PLAYER_ACTIONS } from './constants';
+import assocPath from 'ramda/es/assocPath';
+import { playerSetFile, playerSetStatus } from './actions';
+
+const setFile = (state, { file }: ReturnType<typeof playerSetFile>) =>
+  assocPath(['file'], file, state);
+
+const setStatus = (state, { status }: ReturnType<typeof playerSetStatus>) =>
+  assocPath(['status'], status, state);
+
+export const PLAYER_HANDLERS = {
+  [PLAYER_ACTIONS.SET_FILE]: setFile,
+  [PLAYER_ACTIONS.SET_STATUS]: setStatus,
+};
--- a/src/redux/player/reducer.ts
+++ b/src/redux/player/reducer.ts
@ -0,0 +1,16 @@
+import { createReducer } from '~/utils/reducer';
+import { PLAYER_HANDLERS } from './handlers';
+import { PLAYER_STATES } from './constants';
+import { IFile } from '../types';
+
+export type IPlayerState = Readonly<{
+  status: typeof PLAYER_STATES[keyof typeof PLAYER_STATES];
+  file: IFile;
+}>;
+
+const INITIAL_STATE: IPlayerState = {
+  status: PLAYER_STATES.UNSET,
+  file: null,
+};
+
+export default createReducer(INITIAL_STATE, PLAYER_HANDLERS);
--- a/src/redux/player/sagas.ts
+++ b/src/redux/player/sagas.ts
@ -0,0 +1,29 @@
+import { takeLatest } from 'redux-saga/effects';
+import { PLAYER_ACTIONS } from './constants';
+import { playerSetFile, playerSeek } from './actions';
+import { Player } from '~/utils/player';
+import { getURL } from '~/utils/dom';
+
+function setFileSaga({ file }: ReturnType<typeof playerSetFile>) {
+  Player.set(getURL(file));
+  Player.play();
+}
+
+function playSaga() {
+  Player.play();
+}
+
+function pauseSaga() {
+  Player.pause();
+}
+
+function seekSaga({ seek }: ReturnType<typeof playerSeek>) {
+  Player.jumpToPercent(seek * 100);
+}
+
+export default function* playerSaga() {
+  yield takeLatest(PLAYER_ACTIONS.SET_FILE, setFileSaga);
+  yield takeLatest(PLAYER_ACTIONS.PAUSE, pauseSaga);
+  yield takeLatest(PLAYER_ACTIONS.PLAY, playSaga);
+  yield takeLatest(PLAYER_ACTIONS.SEEK, seekSaga);
+}
--- a/src/redux/player/selectors.ts
+++ b/src/redux/player/selectors.ts
@ -0,0 +1,3 @@
+import { IState } from '~/redux/store';
+
+export const selectPlayer = (state: IState) => state.player;
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@ -19,6 +19,9 @@ import flowSaga from '~/redux/flow/sagas';
 import uploadReducer, { IUploadState } from '~/redux/uploads/reducer';
 import uploadSaga from '~/redux/uploads/sagas';

+import playerReducer, { IPlayerState } from '~/redux/player/reducer';
+import playerSaga from '~/redux/player/sagas';
+
 import { IAuthState } from '~/redux/auth/types';

 import modalReducer, { IModalState } from '~/redux/modal/reducer';
@ -36,6 +39,7 @@ export interface IState {
  node: INodeState;
  uploads: IUploadState;
  flow: IFlowState;
+  player: IPlayerState;
 }

 export const sagaMiddleware = createSagaMiddleware();
@ -54,6 +58,7 @@ export const store = createStore(
    node: nodeReducer,
    uploads: uploadReducer,
    flow: flowReducer,
+    player: playerReducer,
  }),
  composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware))
 );
@ -63,6 +68,7 @@ export function configureStore(): { store: Store<IState>; persistor: Persistor }
  sagaMiddleware.run(nodeSaga);
  sagaMiddleware.run(uploadSaga);
  sagaMiddleware.run(flowSaga);
+  sagaMiddleware.run(playerSaga);

  const persistor = persistStore(store);

--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@ -4,8 +4,15 @@ import { ERRORS } from '~/constants/errors';
 import { IUser } from './auth/types';

 export interface ITag {
+  id: number;
  title: string;
-  feature?: 'red' | 'blue' | 'green' | 'olive' | 'black';
+
+  data: Record<string, string>;
+  user: IUser;
+  nodes: INode[];
+
+  readonly created_at: string;
+  readonly updated_at: string;
 }

 export type IInputTextProps = DetailedHTMLProps<
@ -64,6 +71,15 @@ export interface IFile {

  type: IUploadType;
  mime: string;
+  metadata?: {
+    id3title?: string;
+    id3artist?: string;
+    title?: string;
+
+    duration?: number;
+    width?: number;
+    height?: number;
+  };

  createdAt?: string;
  updatedAt?: string;
@ -86,7 +102,7 @@ export interface IBlock {

 export interface INode {
  id?: number;
-  user_id: UUID;
+  user: Partial<IUser>;

  title: string;
  files: IFile[];
@ -110,6 +126,8 @@ export interface INode {
    };
  };

+  tags: ITag[];
+
  createdAt?: string;
  updatedAt?: string;
 }
--- a/src/redux/uploads/constants.ts
+++ b/src/redux/uploads/constants.ts
@ -1,5 +1,5 @@
 import { IFile, IUploadType } from '~/redux/types';
-import { IUploadState, IUploadStatus } from './reducer';
+import { IUploadStatus } from './reducer';

 const prefix = 'UPLOAD.';

@ -60,3 +60,10 @@ export const UPLOAD_TYPES: Record<string, IUploadType> = {
  VIDEO: 'video',
  OTHER: 'other',
 };
+
+export const FILE_MIMES = {
+  [UPLOAD_TYPES.VIDEO]: [],
+  [UPLOAD_TYPES.IMAGE]: ['image/jpeg', 'image/jpg', 'image/png'],
+  [UPLOAD_TYPES.AUDIO]: ['audio/mpeg3', 'audio/mpeg', 'audio/mp3'],
+  [UPLOAD_TYPES.OTHER]: [],
+};
--- a/src/redux/uploads/sagas.ts
+++ b/src/redux/uploads/sagas.ts
@ -1,8 +1,6 @@
-import {
- takeEvery, all, spawn, call, put, take, fork, race,
-} from 'redux-saga/effects';
+import { takeEvery, all, spawn, call, put, take, fork, race } from 'redux-saga/effects';
 import { postUploadFile } from './api';
-import { UPLOAD_ACTIONS } from '~/redux/uploads/constants';
+import { UPLOAD_ACTIONS, FILE_MIMES } from '~/redux/uploads/constants';
 import {
  uploadUploadFiles,
  uploadSetStatus,
@ -13,7 +11,6 @@ import {
 import { reqWrapper } from '../auth/sagas';
 import { createUploader, uploadGetThumb } from '~/utils/uploader';
 import { HTTP_RESPONSES } from '~/utils/api';
-import { VALIDATORS } from '~/utils/validators';
 import { IFileWithUUID, IFile, IUploadProgressHandler } from '../types';

 function* uploadCall({
@ -49,9 +46,7 @@ function* uploadCancelWorker(id) {
  return true;
 }

-function* uploadWorker({
- file, temp_id, target, type,
-}: IFileWithUUID) {
+function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
  const [promise, chan] = createUploader<Partial<IFileWithUUID>, Partial<IFileWithUUID>>(
    uploadCall,
    { temp_id, target, type }
@ -69,10 +64,8 @@ function* uploadWorker({
  return result;
 }

-function* uploadFile({
- file, temp_id, type, target,
-}: IFileWithUUID) {
-  if (!file.type || !VALIDATORS.IS_IMAGE_MIME(file.type)) {
+function* uploadFile({ file, temp_id, type, target }: IFileWithUUID) {
+  if (!file.type || !file.type || !FILE_MIMES[type].includes(file.type)) {
    return { error: 'File_Not_Image', status: HTTP_RESPONSES.BAD_REQUEST, data: {} };
  }

@ -103,13 +96,13 @@ function* uploadFile({
    // add here CANCEL_UPLOADS worker, that will watch for subject
    // cancel_editing: take(UPLOAD_ACTIONS.CANCEL_EDITING),
    // save_inventory: take(INVENTORY_ACTIONS.SAVE_INVENTORY),
-  }) as any;
+  });

  if (cancel || cancel_editing) {
    return yield put(uploadDropStatus(temp_id));
  }

-  const { data, error }: { data: IFile & { detail: any }; error: string } = result;
+  const { data, error }: { data: IFile & { detail: string }; error: string } = result;

  if (error) {
    return yield put(
@ -137,6 +130,6 @@ function* uploadFiles({ files }: ReturnType<typeof uploadUploadFiles>) {
  yield all(files.map(file => spawn(uploadFile, file)));
 }

-export default function* () {
+export default function*() {
  yield takeEvery(UPLOAD_ACTIONS.UPLOAD_FILES, uploadFiles);
 }
--- a/src/sprites/Sprites.tsx
+++ b/src/sprites/Sprites.tsx
@ -25,6 +25,10 @@ const Sprites: FC<{}> = () => (
      <path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z" />
    </g>

+    <g id="pause">
+      <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" strokeWidth="0" />
+    </g>
+
    <g id="plus" stroke="none">
      <path fill="none" d="M0 0h24v24H0V0z" />
      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
@ -79,6 +83,21 @@ const Sprites: FC<{}> = () => (
      <path fill="none" d="M0 0h24v24H0V0z" />
      <path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6 6-6z" />
    </g>
+
+    <g id="photo" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" />
+    </g>
+
+    <g id="image" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" />
+    </g>
+
+    <g id="profile" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+    </g>
  </svg>
 );

--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@ -15,11 +15,11 @@ $green_gradient: linear-gradient(170deg, adjust_hue($wisegreen, 15deg) 0%, $wise
 $purple_gradient: linear-gradient(170deg, $red, $dark_blue);
 $cyan_gradient: linear-gradient(260deg, #3c75ff -50%, #7b2653 150%);

-$main_bg_color: #2b2c34;
+$main_bg_color: #2c2b2b;
 $main_text_color: white;

-$content_bg: darken($main_bg_color, 4%);
-$content_bg_secondary: darken($content_bg, 3%);
+$content_bg: darken($main_bg_color, 6%);
+$content_bg_secondary: darken($content_bg, 2%);

 $cell_bg: lighten($main_bg_color, 0%);
 $card_bg: lighten($main_bg_color, 0%);
@ -35,7 +35,7 @@ $button_bg_color: $red_gradient;
 $comment_bg: lighten($content_bg, 2%);
 $panel_bg: transparent;
 $node_bg: darken($content_bg, 4%);
-$node_image_bg: darken($main_bg_color, 2%);
+$node_image_bg: darken($main_bg_color, 7%);
 $node_title_background: darken($main_bg_color, 8%);

 $editor_bg: $content_bg;
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -1,4 +1,4 @@
-@import "~raleway-cyrillic/raleway.css";
+@import '~raleway-cyrillic/raleway.css';

 html {
  min-height: 100vh;
@ -7,24 +7,23 @@ html {
 body {
  background: darken($main_bg_color, 12%);
  min-height: 100vh;
-  background: url("http://vault48.org/pixmaps/texture.jpg");
+  background: url('http://vault48.org/pixmaps/texture.jpg');
  color: $main_text_color;
-  font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif;
+  font: $font_16_regular;
  -webkit-font-smoothing: antialiased;
-  font-size: 16px;
+  // font-size: 16px;
  fill: white;
  stroke: white;

  &::before {
-    content: "";
+    content: '';
    position: absolute;
    height: 400px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
-    background: url("http://vault48.org/pixmaps/texture_alt.jpg");
+    background: url('http://vault48.org/pixmaps/texture_alt.jpg');
    pointer-events: none;
  }
 }
@ -80,4 +79,3 @@ body {
 :global(h2) {
  font: $font_24_bold;
 }
-
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@ -1,18 +1,18 @@
-@import "colors";
+@import 'colors';

-$cell: 256px;
-$content_width: 1100px;
+$cell: 320px;
+$grid_line: 4px;
+$content_width: $cell * 4 + $grid_line * 3;
 $gap: 10px;
 $spc: $gap * 2;
+$comment_height: 72px;

-$radius: 6px;
-$cell_radius: 4px;
+$radius: 8px;
+$cell_radius: $radius;
 $panel_radius: $radius;
-
-$grid_line: 4px;
+$input_radius: $radius;

 $input_height: 36px;
-$input_radius: $radius;
 $info_height: 24px;

 $panel_size: 64px;
@ -25,9 +25,9 @@ $medium: 500;
 $light: 300;
 $extra_light: 200;

-$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-  "Noto Color Emoji";
+$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';

 $font_48_semibold: $semibold 48px $font;
 $font_24_bold: $bold 24px $font;
@ -48,6 +48,8 @@ $font_12_semibold: $semibold 12px $font;
 $font_12_regular: $regular 12px $font;
 $font_10_regular: $regular 10px $font;
 $font_10_semibold: $semibold 10px $font;
+$font_8_regular: $regular 8px $font;
+$font_8_semibold: $semibold 8px $font;

 $font_cell_title: $font_24_bold;
 $font_hero_title: $font_48_semibold;
@ -89,7 +91,7 @@ $input_shadow_filled: $input_shadow;
  position: $position;

  &::after {
-    content: " ";
+    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
@ -107,7 +109,9 @@ $input_shadow_filled: $input_shadow;
 }

@mixin tablet {
-  @media (max-width: 599px) { @content; }
+  @media (max-width: 599px) {
+    @content;
+  }
 }

@mixin vertical_at_tablet {
@ -117,8 +121,12 @@ $input_shadow_filled: $input_shadow;
    & > * {
      margin: $gap/2 0 !important;

-      &:first-child { margin-top: 0 !important; }
-      &:last-child { margin-bottom: 0 !important; }
+      &:first-child {
+        margin-top: 0 !important;
+      }
+      &:last-child {
+        margin-bottom: 0 !important;
+      }
    }
  }
 }
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@ -1,3 +1,7 @@
+import { IFile } from '~/redux/types';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { ru } from 'date-fns/locale';
+
 export const getStyle = (oElm: any, strCssRule: string) => {
  if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(oElm, '').getPropertyValue(strCssRule);
@ -52,10 +56,16 @@ export const describeArc = (
  ].join(' ');
 };

-export const getURL = url => `${process.env.API_HOST}${url}`;
+export const getURL = (file: Partial<IFile>) => {
+  if (!file || !file.url) return null;

-export const getImageSize = (image: string, size?: string): string =>
-  `${process.env.API_HOST}${image}`.replace('{size}', size);
+  return file.url
+    .replace('REMOTE_CURRENT://', process.env.REMOTE_CURRENT)
+    .replace('REMOTE_OLD://', process.env.REMOTE_OLD);
+};
+
+export const getImageSize = (file: IFile, size?: string): string => getURL(file);
+// `${process.env.API_HOST}${image}`.replace('{size}', size);

 export const formatCommentText = (author, text: string) =>
  text
@ -63,5 +73,10 @@ export const formatCommentText = (author, text: string) =>
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .split('\n')
-    .map((el, index) => (index === 0 ? `<p><b>${author}</b>: ${el}</p>` : `<p>${el}</p>`))
+    .map((el, index) =>
+      index === 0 ? `${author ? `<p><b>${author}</b>: ` : ''}${el}</p>` : `<p>${el}</p>`
+    )
    .join('');
+
+export const getPrettyDate = (date: string): string =>
+  formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true });
--- a/src/utils/player.ts
+++ b/src/utils/player.ts
@ -0,0 +1,87 @@
+import { store } from '~/redux/store';
+import { playerSetStatus } from '~/redux/player/actions';
+import { PLAYER_STATES } from '~/redux/player/constants';
+
+type PlayerEventType = keyof HTMLMediaElementEventMap;
+
+type PlayerEventListener = (
+  this: HTMLAudioElement,
+  event: HTMLMediaElementEventMap[keyof HTMLMediaElementEventMap]
+) => void;
+
+export interface IPlayerProgress {
+  current: number;
+  total: number;
+  progress: number;
+}
+
+export class PlayerClass {
+  public constructor() {
+    this.element.addEventListener('timeupdate', () => {
+      const { duration: total, currentTime: current } = this.element;
+      const progress = parseFloat(((current / total) * 100).toFixed(2));
+
+      this.current = current || 0;
+      this.total = total || 0;
+
+      this.element.dispatchEvent(
+        new CustomEvent('playprogress', {
+          detail: { current, total, progress },
+        })
+      );
+    });
+  }
+
+  public current: number = 0;
+
+  public total: number = 0;
+
+  public element: HTMLAudioElement = new Audio();
+
+  public duration: number = 0;
+
+  public set = (src: string): void => {
+    this.element.src = src;
+  };
+
+  public on = (type: string, callback) => {
+    this.element.addEventListener(type, callback);
+  };
+
+  public off = (type: string, callback) => {
+    this.element.removeEventListener(type, callback);
+  };
+
+  public load = () => {
+    this.element.load();
+  };
+
+  public play = () => {
+    this.element.play();
+  };
+
+  public pause = () => {
+    this.element.pause();
+  };
+
+  public getDuration = () => {
+    return this.element.currentTime;
+  };
+
+  public jumpToTime = (time: number) => {
+    this.element.currentTime = time;
+  };
+
+  public jumpToPercent = (percent: number) => {
+    this.element.currentTime = (this.total * percent) / 100;
+  };
+}
+
+const Player = new PlayerClass();
+
+// Player.element.addEventListener('playprogress', ({ detail }: CustomEvent) => console.log(detail));
+
+Player.on('play', () => store.dispatch(playerSetStatus(PLAYER_STATES.PLAYING)));
+Player.on('pause', () => store.dispatch(playerSetStatus(PLAYER_STATES.PAUSED)));
+
+export { Player };
--- a/src/utils/uploader.ts
+++ b/src/utils/uploader.ts
@ -3,7 +3,7 @@ import { eventChannel, END, EventChannel } from 'redux-saga';
 import { VALIDATORS } from '~/utils/validators';
 import { IResultWithStatus, IFile } from '~/redux/types';
 import { HTTP_RESPONSES } from './api';
-import { EMPTY_FILE } from '~/redux/uploads/constants';
+import { EMPTY_FILE, FILE_MIMES, UPLOAD_TYPES } from '~/redux/uploads/constants';

 export const IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];

@ -16,7 +16,7 @@ export function createUploader<T extends {}, R extends {}>(
 ] {
  let emit;

-  const chan = eventChannel((emitter) => {
+  const chan = eventChannel(emitter => {
    emit = emitter;
    return () => null;
  });
@ -30,14 +30,16 @@ export function createUploader<T extends {}, R extends {}>(
  return [wrappedCallback, chan];
 }

-export const uploadGetThumb = async (file) => {
+export const uploadGetThumb = async file => {
  if (!file.type || !VALIDATORS.IS_IMAGE_MIME(file.type)) return '';

-  return await new Promise((resolve, reject) => {
+  const thumb = await new Promise(resolve => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result || '');
    reader.readAsDataURL(file);
  });
+
+  return thumb;
 };

 export const fakeUploader = ({
@ -49,7 +51,7 @@ export const fakeUploader = ({
  onProgress: (current: number, total: number) => void;
  mustSucceed: boolean;
 }): Promise<IResultWithStatus<IFile>> => {
-  const { url, error } = file;
+  const { error } = file;

  return new Promise((resolve, reject) => {
    setTimeout(() => {
@ -70,3 +72,10 @@ export const fakeUploader = ({
    }, 3000);
  });
 };
+
+export const getFileType = (file: File): keyof typeof UPLOAD_TYPES => {
+  return (
+    (file.type && Object.keys(FILE_MIMES).find(mime => FILE_MIMES[mime].includes(file.type))) ||
+    null
+  );
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -18,6 +18,6 @@
      "~/*": ["src/*"]
    }
  },
-  "include": ["./src/**/*", "./custom.d.ts"],
+  "include": ["./src/index.tsx", "./custom.d.ts"],
  "exclude": ["./__tests__/**/*"]
 }
--- a/yarn.lock
+++ b/yarn.lock