removed player reducer, migrated to CRA 5

craco.config.js

@@ -1,5 +1,4 @@
 const CracoAlias = require('craco-alias');
-const fastRefreshCracoPlugin = require('craco-fast-refresh');
 
 module.exports = {
   webpack: {
@@ -9,6 +8,19 @@ module.exports = {
     output: {
       publicPath: '/',
     },
+    rules: [
+      {
+        test: /\.(svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'images/[hash]-[name].[ext]',
+            },
+          },
+        ],
+      },
+    ],
   },
   eslint: {
     enable: false,
@@ -48,7 +60,6 @@ module.exports = {
     },
   },
   plugins: [
-    { plugin: fastRefreshCracoPlugin },
     {
       plugin: CracoAlias,
       options: {

package.json

@@ -16,6 +16,7 @@
     "color2k": "^1.2.4",
     "connected-react-router": "^6.5.2",
     "date-fns": "^2.4.1",
+    "file-loader": "^6.2.0",
     "flexbin": "^0.2.0",
     "formik": "^2.2.6",
     "insane": "^2.6.2",
@@ -36,10 +37,10 @@
     "react-redux": "^7.2.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.4",
+    "react-scripts": "^5.0.0",
     "react-sortable-hoc": "^2.0.0",
     "react-sticky-box": "^0.9.3",
-    "redux": "^4.0.1",
+    "redux": "^4.1.2",
     "redux-persist": "^5.10.0",
     "redux-saga": "^1.1.1",
     "sticky-sidebar": "^3.3.1",
@@ -47,7 +48,6 @@
     "swr": "^1.0.1",
     "throttle-debounce": "^2.1.0",
     "typescript": "^4.0.5",
-    "typograf": "^6.11.3",
     "uuid4": "^1.1.4",
     "web-vitals": "^0.2.4",
     "yup": "^0.32.9"
@@ -55,8 +55,8 @@
   "scripts": {
     "start": "craco start",
     "build": "craco build",
-    "test": "craco test",
-    "ts-check": "tsc -p tsconfig.json --noEmit"
+    "ts-check": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "eslintConfig": {
     "extends": [
@@ -76,7 +76,7 @@
     ]
   },
   "devDependencies": {
-    "@craco/craco": "5.8.0",
+    "@craco/craco": "^6.4.3",
     "@types/classnames": "^2.2.7",
     "@types/marked": "^1.2.2",
     "@types/node": "^11.13.22",
@@ -84,8 +84,7 @@
     "@types/react-redux": "^7.1.11",
     "@types/throttle-debounce": "^2.1.0",
     "@types/yup": "^0.29.11",
-    "craco-alias": "^2.1.1",
-    "craco-fast-refresh": "^1.0.2",
+    "craco-alias": "^2.3.1",
     "prettier": "^1.18.2"
   }
 }

src/api/metadata/index.ts

@@ -1,6 +1,6 @@
 import { api, cleanResult } from '~/utils/api';
 import { API } from '~/constants/api';
-import { ApiGetEmbedYoutubeResult } from '~/redux/player/types';
+import { ApiGetEmbedYoutubeResult } from '~/api/metadata/types';
 
 export const apiGetEmbedYoutube = (ids: string[]) =>
   api

src/api/metadata/types.ts

@@ -0,0 +1,3 @@
+import { EmbedMetadata } from '~/types/metadata';
+
+export type ApiGetEmbedYoutubeResult = { items: Record<string, EmbedMetadata> };

src/components/bars/PlayerBar/index.tsx

@@ -1,12 +1,13 @@
-import React, { useCallback, useEffect, useState, VFC } from 'react';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
-import { PlayerState } from '~/redux/player/constants';
-import { path } from 'ramda';
-import { IPlayerProgress, Player } from '~/utils/player';
-import { IFile } from '~/redux/types';
+import React, { useCallback, VFC } from "react";
+import styles from "./styles.module.scss";
+import { Icon } from "~/components/input/Icon";
+import { PlayerState } from "~/constants/player";
+import { path } from "ramda";
+import { IFile } from "~/redux/types";
+import { PlayerProgress } from "~/types/player";
 
 interface Props {
+  progress: PlayerProgress;
   status: PlayerState;
   file?: IFile;
   playerPlay: () => void;
@@ -21,41 +22,24 @@ const PlayerBar: VFC<Props> = ({
   playerPause,
   playerSeek,
   playerStop,
+  progress,
   file,
 }) => {
-  const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
-
   const onClick = useCallback(() => {
     if (status === PlayerState.PLAYING) return playerPause();
     return playerPlay();
   }, [playerPlay, playerPause, status]);
 
-  const onProgress = useCallback(
-    ({ detail }: { detail: IPlayerProgress }) => {
-      if (!detail || !detail.total) return;
-      setProgress(detail);
-    },
-    [setProgress]
-  );
-
   const onSeek = useCallback(
     event => {
       event.stopPropagation();
       const { clientX, target } = event;
       const { left, width } = target.getBoundingClientRect();
-      playerSeek((clientX - left) / width);
+      playerSeek(((clientX - left) / width) * 100);
     },
     [playerSeek]
   );
 
-  useEffect(() => {
-    Player.on('playprogress', onProgress);
-
-    return () => {
-      Player.off('playprogress', onProgress);
-    };
-  }, [onProgress]);
-
   if (status === PlayerState.UNSET) return null;
 
   const metadata: IFile['metadata'] = path(['metadata'], file);

src/components/bars/SubmitBar/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useCallback, useState } from 'react';
-import { Icon } from '~/components/input/Icon';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import { useRouteMatch } from 'react-router';
-import styles from './styles.module.scss';
+import React, { FC, useCallback, useState } from "react";
+import { Icon } from "~/components/input/Icon";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import { useRouteMatch } from "react-router";
+import styles from "./styles.module.scss";
 
 interface Props {
   isLab?: boolean;

src/components/boris/BorisContactItem/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Icon } from "~/components/input/Icon";
 
 interface Props {
   icon: string;

src/components/boris/BorisContacts/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import { BorisContactItem } from '~/components/boris/BorisContactItem';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import { BorisContactItem } from "~/components/boris/BorisContactItem";
+import styles from "./styles.module.scss";
 
 interface Props {}
 

src/components/boris/BorisSidebar/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
-import styles from '~/layouts/BorisLayout/styles.module.scss';
-import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
-import { BorisContacts } from '~/components/boris/BorisContacts';
-import { BorisStats } from '~/components/boris/BorisStats';
-import { Group } from '~/components/containers/Group';
-import { IUser } from '~/redux/auth/types';
-import { BorisUsageStats } from '~/types/boris';
+import React, { FC } from "react";
+import styles from "~/layouts/BorisLayout/styles.module.scss";
+import { BorisSuperpowers } from "~/components/boris/BorisSuperpowers";
+import { BorisContacts } from "~/components/boris/BorisContacts";
+import { BorisStats } from "~/components/boris/BorisStats";
+import { Group } from "~/components/containers/Group";
+import { IUser } from "~/redux/auth/types";
+import { BorisUsageStats } from "~/types/boris";
 
 interface Props {
   user: IUser;

src/components/boris/BorisStats/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import { BorisUsageStats } from '~/types/boris';
-import { BorisStatsGit } from '../BorisStatsGit';
-import { BorisStatsBackend } from '../BorisStatsBackend';
+import React, { FC } from "react";
+import { BorisUsageStats } from "~/types/boris";
+import { BorisStatsGit } from "../BorisStatsGit";
+import { BorisStatsBackend } from "../BorisStatsBackend";
 
 interface IProps {
   stats: BorisUsageStats;

src/components/boris/BorisStatsBackend/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
-import { StatBackend } from '~/types/boris';
-import styles from './styles.module.scss';
-import { sizeOf } from '~/utils/dom';
-import { StatsRow } from '~/components/common/StatsRow';
-import { SubTitle } from '~/components/common/SubTitle';
+import React, { FC } from "react";
+import { StatBackend } from "~/types/boris";
+import styles from "./styles.module.scss";
+import { sizeOf } from "~/utils/dom";
+import { StatsRow } from "~/components/common/StatsRow";
+import { SubTitle } from "~/components/common/SubTitle";
 
 interface IProps {
   stats: StatBackend;

src/components/boris/BorisStatsGit/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useMemo } from 'react';
-import { GithubIssue } from '~/types/boris';
-import styles from './styles.module.scss';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import { BorisStatsGitCard } from '../BorisStatsGitCard';
+import React, { FC, useMemo } from "react";
+import { GithubIssue } from "~/types/boris";
+import styles from "./styles.module.scss";
+import { Placeholder } from "~/components/placeholders/Placeholder";
+import { BorisStatsGitCard } from "../BorisStatsGitCard";
 
 interface IProps {
   issues: GithubIssue[];

src/components/boris/BorisStatsGitCard/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useMemo } from 'react';
-import styles from './styles.module.scss';
-import { getPrettyDate } from '~/utils/dom';
-import { GithubIssue } from '~/types/boris';
-import classNames from 'classnames';
+import React, { FC, useMemo } from "react";
+import styles from "./styles.module.scss";
+import { getPrettyDate } from "~/utils/dom";
+import { GithubIssue } from "~/types/boris";
+import classNames from "classnames";
 
 interface IProps {
   data: GithubIssue;

src/components/boris/BorisSuperpowers/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useCallback } from 'react';
-import styles from './styles.module.scss';
-import { Toggle } from '~/components/input/Toggle';
+import React, { FC, useCallback } from "react";
+import styles from "./styles.module.scss";
+import { Toggle } from "~/components/input/Toggle";
 
 interface IProps {
   active?: boolean;

src/components/boris/BorisUIDemo/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useState } from 'react';
-import { Card } from '~/components/containers/Card';
-import styles from './styles.module.scss';
-import markdown from '~/styles/common/markdown.module.scss';
-import { Group } from '~/components/containers/Group';
-import { Button } from '~/components/input/Button';
-import { InputText } from '~/components/input/InputText';
+import React, { FC, useState } from "react";
+import { Card } from "~/components/containers/Card";
+import styles from "./styles.module.scss";
+import markdown from "~/styles/common/markdown.module.scss";
+import { Group } from "~/components/containers/Group";
+import { Button } from "~/components/input/Button";
+import { InputText } from "~/components/input/InputText";
 
 interface IProps {}
 

src/components/boris/Superpower/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectAuthIsTester, selectUser } from '~/redux/auth/selectors';
+import React, { FC } from "react";
+import { useShallowSelect } from "~/hooks/data/useShallowSelect";
+import { selectAuthIsTester, selectUser } from "~/redux/auth/selectors";
 
 interface IProps {}
 

src/components/comment/Comment/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, HTMLAttributes, memo } from 'react';
-import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { IComment, ICommentGroup, IFile } from '~/redux/types';
-import { CommentContent } from '~/components/comment/CommentContent';
-import styles from './styles.module.scss';
-import { CommendDeleted } from '../../node/CommendDeleted';
-import classNames from 'classnames';
-import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
+import React, { FC, HTMLAttributes, memo } from "react";
+import { CommentWrapper } from "~/components/containers/CommentWrapper";
+import { IComment, ICommentGroup, IFile } from "~/redux/types";
+import { CommentContent } from "~/components/comment/CommentContent";
+import styles from "./styles.module.scss";
+import { CommendDeleted } from "../../node/CommendDeleted";
+import classNames from "classnames";
+import { NEW_COMMENT_CLASSNAME } from "~/constants/comment";
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   nodeId: number;

src/components/comment/CommentAvatar/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback, useState } from 'react';
-import { IUser } from '~/redux/auth/types';
-import { Avatar } from '~/components/common/Avatar';
-import { path } from 'ramda';
-import { Manager, Popper, Reference } from 'react-popper';
-import styles from './styles.module.scss';
-import { useRandomPhrase } from '~/constants/phrases';
+import React, { FC, useCallback, useState } from "react";
+import { IUser } from "~/redux/auth/types";
+import { Avatar } from "~/components/common/Avatar";
+import { path } from "ramda";
+import { Manager, Popper, Reference } from "react-popper";
+import styles from "./styles.module.scss";
+import { useRandomPhrase } from "~/constants/phrases";
 
 interface Props {
   user: IUser;

src/components/comment/CommentContent/index.tsx

@@ -1,18 +1,18 @@
-import React, { createElement, FC, Fragment, memo, useCallback, useMemo, useState } from 'react';
-import { IComment, IFile } from '~/redux/types';
-import { append, assocPath, path } from 'ramda';
-import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
-import { Group } from '~/components/containers/Group';
-import styles from './styles.module.scss';
-import { UploadType } from '~/constants/uploads';
-import reduce from 'ramda/es/reduce';
-import { AudioPlayer } from '~/components/media/AudioPlayer';
-import classnames from 'classnames';
-import classNames from 'classnames';
-import { PRESETS } from '~/constants/urls';
-import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
-import { CommentMenu } from '../CommentMenu';
-import { CommentForm } from '~/components/comment/CommentForm';
+import React, { createElement, FC, Fragment, memo, useCallback, useMemo, useState } from "react";
+import { IComment, IFile } from "~/redux/types";
+import { append, assocPath, path } from "ramda";
+import { formatCommentText, getPrettyDate, getURL } from "~/utils/dom";
+import { Group } from "~/components/containers/Group";
+import styles from "./styles.module.scss";
+import { UploadType } from "~/constants/uploads";
+import reduce from "ramda/es/reduce";
+import { AudioPlayer } from "~/components/media/AudioPlayer";
+import classnames from "classnames";
+import classNames from "classnames";
+import { PRESETS } from "~/constants/urls";
+import { COMMENT_BLOCK_RENDERERS } from "~/constants/comment";
+import { CommentMenu } from "../CommentMenu";
+import { CommentForm } from "~/components/comment/CommentForm";
 
 interface IProps {
   nodeId: number;

src/components/comment/CommentEmbedBlock/index.tsx

@@ -1,27 +1,13 @@
-import React, { FC, memo, useEffect, useMemo } from 'react';
-import { ICommentBlockProps } from '~/constants/comment';
-import styles from './styles.module.scss';
-import { getYoutubeThumb } from '~/utils/dom';
-import { selectPlayer } from '~/redux/player/selectors';
-import { connect } from 'react-redux';
-import * as PLAYER_ACTIONS from '~/redux/player/actions';
-import { Icon } from '~/components/input/Icon';
-import { path } from 'ramda';
+import React, { FC, memo, useMemo } from "react";
+import { ICommentBlockProps } from "~/constants/comment";
+import styles from "./styles.module.scss";
+import { getYoutubeThumb } from "~/utils/dom";
+import { Icon } from "~/components/input/Icon";
+import { useYoutubeMetadata } from "~/hooks/metadata/useYoutubeMetadata";
 
-const mapStateToProps = state => ({
-  youtubes: selectPlayer(state).youtubes,
-});
+type Props = ICommentBlockProps & {};
 
-const mapDispatchToProps = {
-  playerGetYoutubeInfo: PLAYER_ACTIONS.playerGetYoutubeInfo,
-};
-
-type Props = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps &
-  ICommentBlockProps & {};
-
-const CommentEmbedBlockUnconnected: FC<Props> = memo(
-  ({ block, youtubes, playerGetYoutubeInfo }) => {
+const CommentEmbedBlock: FC<Props> = memo(({ block }) => {
   const id = useMemo(() => {
     const match = block.content.match(
       /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-\=]+)/
@@ -34,22 +20,12 @@ const CommentEmbedBlockUnconnected: FC<Props> = memo(
 
   const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
 
-    useEffect(() => {
-      if (!id) return;
-      playerGetYoutubeInfo(id);
-    }, [id, playerGetYoutubeInfo]);
-
-    const title = useMemo<string>(() => {
-      if (!id) {
-        return block.content;
-      }
-
-      return path([id, 'metadata', 'title'], youtubes) || block.content;
-    }, [id, youtubes, block.content]);
+  const metadata = useYoutubeMetadata(id);
+  const title = metadata?.metadata?.title || '';
 
   return (
     <div className={styles.embed}>
-        <a href={url} target="_blank" />
+      <a href={url} target="_blank" rel="noreferrer" />
 
       <div className={styles.preview}>
         <div style={{ backgroundImage: `url("${preview}")` }}>
@@ -64,12 +40,6 @@ const CommentEmbedBlockUnconnected: FC<Props> = memo(
       </div>
     </div>
   );
-  }
-);
-
-const CommentEmbedBlock = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CommentEmbedBlockUnconnected);
+});
 
 export { CommentEmbedBlock };

src/components/comment/CommentForm/index.tsx

@@ -1,23 +1,23 @@
-import React, { FC, useCallback, useState } from 'react';
-import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
-import { FormikProvider } from 'formik';
-import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
-import { Button } from '~/components/input/Button';
-import { UploadSubject, UploadTarget } from '~/constants/uploads';
-import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
-import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
-import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { IComment, INode } from '~/redux/types';
-import { EMPTY_COMMENT } from '~/constants/node';
-import { UploadDropzone } from '~/components/upload/UploadDropzone';
-import styles from './styles.module.scss';
-import { ERROR_LITERAL } from '~/constants/errors';
-import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
-import { Filler } from '~/components/containers/Filler';
-import { useUploader } from '~/hooks/data/useUploader';
-import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
-import { observer } from 'mobx-react-lite';
+import React, { FC, useCallback, useState } from "react";
+import { useCommentFormFormik } from "~/hooks/comments/useCommentFormFormik";
+import { FormikProvider } from "formik";
+import { LocalCommentFormTextarea } from "~/components/comment/LocalCommentFormTextarea";
+import { Button } from "~/components/input/Button";
+import { UploadSubject, UploadTarget } from "~/constants/uploads";
+import { CommentFormAttachButtons } from "~/components/comment/CommentFormAttachButtons";
+import { CommentFormFormatButtons } from "~/components/comment/CommentFormFormatButtons";
+import { CommentFormAttaches } from "~/components/comment/CommentFormAttaches";
+import { LoaderCircle } from "~/components/input/LoaderCircle";
+import { IComment, INode } from "~/redux/types";
+import { EMPTY_COMMENT } from "~/constants/node";
+import { UploadDropzone } from "~/components/upload/UploadDropzone";
+import styles from "./styles.module.scss";
+import { ERROR_LITERAL } from "~/constants/errors";
+import { useInputPasteUpload } from "~/hooks/dom/useInputPasteUpload";
+import { Filler } from "~/components/containers/Filler";
+import { useUploader } from "~/hooks/data/useUploader";
+import { UploaderContextProvider } from "~/utils/context/UploaderContextProvider";
+import { observer } from "mobx-react-lite";
 
 interface IProps {
   comment?: IComment;

src/components/comment/CommentFormAttachButtons/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback } from 'react';
-import { ButtonGroup } from '~/components/input/ButtonGroup';
-import { Button } from '~/components/input/Button';
-import { COMMENT_FILE_TYPES } from '~/constants/uploads';
+import React, { FC, useCallback } from "react";
+import { ButtonGroup } from "~/components/input/ButtonGroup";
+import { Button } from "~/components/input/Button";
+import { COMMENT_FILE_TYPES } from "~/constants/uploads";
 
 interface IProps {
   onUpload: (files: File[]) => void;

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useCallback, useEffect } from 'react';
-import { ButtonGroup } from '~/components/input/ButtonGroup';
-import { Button } from '~/components/input/Button';
-import { useFormatWrapper, wrapTextInsideInput } from '~/hooks/dom/useFormatWrapper';
-import styles from './styles.module.scss';
+import React, { FC, useCallback, useEffect } from "react";
+import { ButtonGroup } from "~/components/input/ButtonGroup";
+import { Button } from "~/components/input/Button";
+import { useFormatWrapper, wrapTextInsideInput } from "~/hooks/dom/useFormatWrapper";
+import styles from "./styles.module.scss";
 
 interface IProps {
   element: HTMLTextAreaElement;

src/components/comment/CommentMenu/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useCallback, useState } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, useCallback, useState } from "react";
+import styles from "./styles.module.scss";
 
 interface IProps {
   onEdit: () => void;

src/components/comment/CommentTextBlock/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useMemo } from 'react';
-import { ICommentBlockProps } from '~/constants/comment';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import markdown from '~/styles/common/markdown.module.scss';
-import { formatText } from '~/utils/dom';
+import React, { FC, useMemo } from "react";
+import { ICommentBlockProps } from "~/constants/comment";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
+import markdown from "~/styles/common/markdown.module.scss";
+import { formatText } from "~/utils/dom";
 
 interface IProps extends ICommentBlockProps {}
 

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -1,12 +1,7 @@
-import React, {
-  forwardRef,
-  KeyboardEventHandler,
-  TextareaHTMLAttributes,
-  useCallback,
-} from 'react';
-import { Textarea } from '~/components/input/Textarea';
-import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
-import { useRandomPhrase } from '~/constants/phrases';
+import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from "react";
+import { Textarea } from "~/components/input/Textarea";
+import { useCommentFormContext } from "~/hooks/comments/useCommentFormFormik";
+import { useRandomPhrase } from "~/constants/phrases";
 
 interface IProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   isLoading?: boolean;

src/components/common/Avatar/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback } from 'react';
-import { getURLFromString } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { openUserProfile } from '~/utils/user';
-import { DivProps } from '~/utils/types';
+import React, { FC, useCallback } from "react";
+import { getURLFromString } from "~/utils/dom";
+import { PRESETS } from "~/constants/urls";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
+import { openUserProfile } from "~/utils/user";
+import { DivProps } from "~/utils/types";
 
 interface Props extends DivProps {
   url?: string;

src/components/common/MenuDots/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import styles from '~/components/flow/FlowCell/styles.module.scss';
-import { Icon } from '~/components/input/Icon';
-import { ButtonProps } from '~/utils/types';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import styles from "~/components/flow/FlowCell/styles.module.scss";
+import { Icon } from "~/components/input/Icon";
+import { ButtonProps } from "~/utils/types";
+import classNames from "classnames";
 
 interface Props extends ButtonProps {}
 

src/components/common/SubTitle/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import { DivProps } from '~/utils/types';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import { Placeholder } from "~/components/placeholders/Placeholder";
+import { DivProps } from "~/utils/types";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
 
 interface Props extends DivProps {
   isLoading?: boolean;

src/components/containers/Authorized/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectUser } from '~/redux/auth/selectors';
+import React, { FC } from "react";
+import { useShallowSelect } from "~/hooks/data/useShallowSelect";
+import { selectUser } from "~/redux/auth/selectors";
 
 interface IProps {}
 

src/components/containers/BlurWrapper/index.tsx

@@ -1,6 +1,6 @@
-import React, { AllHTMLAttributes, FC } from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { AllHTMLAttributes, FC } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 

src/components/containers/Card/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/CellGrid/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, HTMLAttributes } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, HTMLAttributes } from "react";
+import styles from "./styles.module.scss";
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;

src/components/containers/CommentWrapper/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import classNames from "classnames";
 
-import styles from './styles.module.scss';
-import { IUser } from '~/redux/auth/types';
-import { path } from 'ramda';
-import { CommentAvatar } from '~/components/comment/CommentAvatar';
-import { DivProps } from '~/utils/types';
+import styles from "./styles.module.scss";
+import { IUser } from "~/redux/auth/types";
+import { path } from "ramda";
+import { CommentAvatar } from "~/components/comment/CommentAvatar";
+import { DivProps } from "~/utils/types";
 
 type IProps = DivProps & {
   user: IUser;

src/components/containers/CoverBackdrop/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { IUser } from '~/redux/auth/types';
-import styles from './styles.module.scss';
-import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import classNames from 'classnames';
+import React, { FC, useCallback, useEffect, useRef, useState } from "react";
+import { IUser } from "~/redux/auth/types";
+import styles from "./styles.module.scss";
+import { getURL } from "~/utils/dom";
+import { PRESETS } from "~/constants/urls";
+import classNames from "classnames";
 
 interface IProps {
   cover: IUser['cover'];

src/components/containers/Filler/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
 
 type IProps = React.HTMLAttributes<HTMLDivElement>;
 

src/components/containers/Grid/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;

src/components/containers/Group/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;

src/components/containers/InfiniteScroll/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from "react";
+import styles from "./styles.module.scss";
 
 interface IProps extends HTMLAttributes<HTMLDivElement> {
   hasMore: boolean;

src/components/containers/Markdown/index.tsx

@@ -1,6 +1,6 @@
-import React, { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
-import styles from '~/styles/common/markdown.module.scss';
-import classNames from 'classnames';
+import React, { DetailedHTMLProps, FC, HTMLAttributes } from "react";
+import styles from "~/styles/common/markdown.module.scss";
+import classNames from "classnames";
 
 interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 

src/components/containers/Padder/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;

src/components/containers/PageCoverProvider/index.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, FC, useContext, useState } from 'react';
-import styles from './styles.module.scss';
-import { createPortal } from 'react-dom';
-import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import { IFile } from '~/redux/types';
+import React, { createContext, FC, useContext, useState } from "react";
+import styles from "./styles.module.scss";
+import { createPortal } from "react-dom";
+import { getURL } from "~/utils/dom";
+import { PRESETS } from "~/constants/urls";
+import { IFile } from "~/redux/types";
 
 interface CoverContextValue {
   cover: IFile | null;

src/components/containers/Panel/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, HTMLAttributes } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, HTMLAttributes } from "react";
+import styles from "./styles.module.scss";
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/Square/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { DivProps } from '~/utils/types';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { DivProps } from "~/utils/types";
+import classNames from "classnames";
 
 interface IProps extends DivProps {}
 

src/components/containers/Sticky/index.tsx

@@ -1,5 +1,5 @@
-import React, { DetailsHTMLAttributes, FC } from 'react';
-import StickyBox from 'react-sticky-box/dist/esnext';
+import React, { DetailsHTMLAttributes, FC } from "react";
+import StickyBox from "react-sticky-box/dist/esnext";
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
   offsetTop?: number;

src/components/containers/TagField/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, HTMLAttributes } from "react";
+import styles from "./styles.module.scss";
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};
 

src/components/dialogs/DialogTitle/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, ReactNode } from "react";
+import styles from "./styles.module.scss";
 
 interface IProps {
   children: ReactNode;

src/components/dialogs/ModalWrapper/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC, MouseEventHandler } from 'react';
-import ReactDOM from 'react-dom';
-import styles from './styles.module.scss';
+import React, { FC, MouseEventHandler } from "react";
+import ReactDOM from "react-dom";
+import styles from "./styles.module.scss";
 
 type IProps = {
   onOverlayClick: MouseEventHandler;

src/components/dialogs/Tabs/index.tsx

@@ -1,6 +1,6 @@
-import React, { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { createContext, FC, useContext, useMemo, useState, VFC } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 interface TabProps {
   items: string[];

src/components/editors/AudioEditor/index.tsx

@@ -1,15 +1,15 @@
-import React, { FC, useCallback, useMemo } from 'react';
-import { UploadType } from '~/constants/uploads';
-import { ImageGrid } from '../ImageGrid';
-import { AudioGrid } from '../AudioGrid';
-import styles from './styles.module.scss';
-import { NodeEditorProps } from '~/types/node';
-import { useNodeImages } from '~/hooks/node/useNodeImages';
-import { useNodeAudios } from '~/hooks/node/useNodeAudios';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { UploadDropzone } from '~/components/upload/UploadDropzone';
-import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
-import { values } from 'ramda';
+import React, { FC, useCallback, useMemo } from "react";
+import { UploadType } from "~/constants/uploads";
+import { ImageGrid } from "../ImageGrid";
+import { AudioGrid } from "../AudioGrid";
+import styles from "./styles.module.scss";
+import { NodeEditorProps } from "~/types/node";
+import { useNodeImages } from "~/hooks/node/useNodeImages";
+import { useNodeAudios } from "~/hooks/node/useNodeAudios";
+import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
+import { UploadDropzone } from "~/components/upload/UploadDropzone";
+import { useUploaderContext } from "~/utils/context/UploaderContextProvider";
+import { values } from "ramda";
 
 type IProps = NodeEditorProps;
 

src/components/editors/AudioGrid/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useCallback } from 'react';
-import { SortEnd } from 'react-sortable-hoc';
-import { IFile } from '~/redux/types';
-import { moveArrItem } from '~/utils/fn';
-import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
+import React, { FC, useCallback } from "react";
+import { SortEnd } from "react-sortable-hoc";
+import { IFile } from "~/redux/types";
+import { moveArrItem } from "~/utils/fn";
+import { SortableAudioGrid } from "~/components/editors/SortableAudioGrid";
 
-import styles from './styles.module.scss';
-import { UploadStatus } from '~/store/uploader/UploaderStore';
+import styles from "./styles.module.scss";
+import { UploadStatus } from "~/store/uploader/UploaderStore";
 
 interface IProps {
   files: IFile[];

src/components/editors/EditorAudioUploadButton/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
-import { UploadType } from '~/constants/uploads';
-import { IEditorComponentProps } from '~/types/node';
+import React, { FC } from "react";
+import { EditorUploadButton } from "~/components/editors/EditorUploadButton";
+import { UploadType } from "~/constants/uploads";
+import { IEditorComponentProps } from "~/types/node";
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/EditorConfirmClose/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { Group } from '~/components/containers/Group';
-import { Button } from '~/components/input/Button';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Group } from "~/components/containers/Group";
+import { Button } from "~/components/input/Button";
 
 interface IProps {
   onApprove: () => void;

src/components/editors/EditorFiller/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import { Filler } from '~/components/containers/Filler';
-import { IEditorComponentProps } from '~/types/node';
-import styles from './styles.module.scss';
+import React, { FC } from "react";
+import { Filler } from "~/components/containers/Filler";
+import { IEditorComponentProps } from "~/types/node";
+import styles from "./styles.module.scss";
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/EditorImageUploadButton/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
-import { UploadType } from '~/constants/uploads';
-import { IEditorComponentProps } from '~/types/node';
+import React, { FC } from "react";
+import { EditorUploadButton } from "~/components/editors/EditorUploadButton";
+import { UploadType } from "~/constants/uploads";
+import { IEditorComponentProps } from "~/types/node";
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/EditorPublicSwitch/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useCallback } from 'react';
-import { IEditorComponentProps } from '~/types/node';
-import { Button } from '~/components/input/Button';
-import { Icon } from '~/components/input/Icon';
-import styles from './styles.module.scss';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import React, { FC, useCallback } from "react";
+import { IEditorComponentProps } from "~/types/node";
+import { Button } from "~/components/input/Button";
+import { Icon } from "~/components/input/Icon";
+import styles from "./styles.module.scss";
+import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
 
 interface IProps extends IEditorComponentProps {}
 

src/components/editors/EditorUploadButton/index.tsx

@@ -1,12 +1,12 @@
-import React, { ChangeEvent, FC, useCallback } from 'react';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
-import { UploadType } from '~/constants/uploads';
-import { IEditorComponentProps } from '~/types/node';
-import { getFileType } from '~/utils/uploader';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { Button } from '~/components/input/Button';
-import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+import React, { ChangeEvent, FC, useCallback } from "react";
+import styles from "./styles.module.scss";
+import { Icon } from "~/components/input/Icon";
+import { UploadType } from "~/constants/uploads";
+import { IEditorComponentProps } from "~/types/node";
+import { getFileType } from "~/utils/uploader";
+import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
+import { Button } from "~/components/input/Button";
+import { useUploaderContext } from "~/utils/context/UploaderContextProvider";
 
 type IProps = IEditorComponentProps & {
   accept?: string;

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -1,13 +1,13 @@
-import React, { ChangeEvent, FC, useCallback, useEffect } from 'react';
-import styles from './styles.module.scss';
-import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads';
-import { getURL } from '~/utils/dom';
-import { Icon } from '~/components/input/Icon';
-import { PRESETS } from '~/constants/urls';
-import { IEditorComponentProps } from '~/types/node';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { getFileType } from '~/utils/uploader';
-import { useUploader } from '~/hooks/data/useUploader';
+import React, { ChangeEvent, FC, useCallback, useEffect } from "react";
+import styles from "./styles.module.scss";
+import { UploadSubject, UploadTarget, UploadType } from "~/constants/uploads";
+import { getURL } from "~/utils/dom";
+import { Icon } from "~/components/input/Icon";
+import { PRESETS } from "~/constants/urls";
+import { IEditorComponentProps } from "~/types/node";
+import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
+import { getFileType } from "~/utils/uploader";
+import { useUploader } from "~/hooks/data/useUploader";
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/ImageEditor/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
-import { ImageGrid } from '~/components/editors/ImageGrid';
-import styles from './styles.module.scss';
-import { NodeEditorProps } from '~/types/node';
-import { UploadDropzone } from '~/components/upload/UploadDropzone';
-import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
-import { values } from 'ramda';
+import React, { FC } from "react";
+import { ImageGrid } from "~/components/editors/ImageGrid";
+import styles from "./styles.module.scss";
+import { NodeEditorProps } from "~/types/node";
+import { UploadDropzone } from "~/components/upload/UploadDropzone";
+import { useUploaderContext } from "~/utils/context/UploaderContextProvider";
+import { values } from "ramda";
 
 type IProps = NodeEditorProps;
 

src/components/editors/ImageGrid/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback } from 'react';
-import { SortEnd } from 'react-sortable-hoc';
-import styles from './styles.module.scss';
-import { IFile } from '~/redux/types';
-import { moveArrItem } from '~/utils/fn';
-import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
-import { UploadStatus } from '~/store/uploader/UploaderStore';
+import React, { FC, useCallback } from "react";
+import { SortEnd } from "react-sortable-hoc";
+import styles from "./styles.module.scss";
+import { IFile } from "~/redux/types";
+import { moveArrItem } from "~/utils/fn";
+import { SortableImageGrid } from "~/components/editors/SortableImageGrid";
+import { UploadStatus } from "~/store/uploader/UploaderStore";
 
 interface IProps {
   files: IFile[];

src/components/editors/TextEditor/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useCallback } from 'react';
-import styles from './styles.module.scss';
-import { Textarea } from '~/components/input/Textarea';
-import { path } from 'ramda';
-import { NodeEditorProps } from '~/types/node';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { useRandomPhrase } from '~/constants/phrases';
+import React, { FC, useCallback } from "react";
+import styles from "./styles.module.scss";
+import { Textarea } from "~/components/input/Textarea";
+import { path } from "ramda";
+import { NodeEditorProps } from "~/types/node";
+import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
+import { useRandomPhrase } from "~/constants/phrases";
 
 type IProps = NodeEditorProps & {};
 

src/components/editors/VideoEditor/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useCallback, useMemo } from 'react';
-import styles from './styles.module.scss';
-import { path } from 'ramda';
-import { InputText } from '~/components/input/InputText';
-import classnames from 'classnames';
-import { getYoutubeThumb } from '~/utils/dom';
-import { NodeEditorProps } from '~/types/node';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import React, { FC, useCallback, useMemo } from "react";
+import styles from "./styles.module.scss";
+import { path } from "ramda";
+import { InputText } from "~/components/input/InputText";
+import classnames from "classnames";
+import { getYoutubeThumb } from "~/utils/dom";
+import { NodeEditorProps } from "~/types/node";
+import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik";
 
 type IProps = NodeEditorProps & {};
 

src/components/flow/CellShade/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useMemo } from 'react';
-import styles from './styles.module.scss';
-import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
-import { DivProps } from '~/utils/types';
-import classNames from 'classnames';
-import { transparentize } from 'color2k';
-import { normalizeBrightColor } from '~/utils/color';
+import React, { FC, useMemo } from "react";
+import styles from "./styles.module.scss";
+import { DEFAULT_DOMINANT_COLOR } from "~/constants/node";
+import { DivProps } from "~/utils/types";
+import classNames from "classnames";
+import { transparentize } from "color2k";
+import { normalizeBrightColor } from "~/utils/color";
 
 interface Props extends DivProps {
   color?: string;

src/components/flow/FlowCell/index.tsx

@@ -1,15 +1,15 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { NavLink } from 'react-router-dom';
-import { CellShade } from '~/components/flow/CellShade';
-import { FlowDisplay, INode } from '~/redux/types';
-import { FlowCellText } from '~/components/flow/FlowCellText';
-import classNames from 'classnames';
-import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
-import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
-import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
-import { MenuDots } from '~/components/common/MenuDots';
-import { FlowCellImage } from '~/components/flow/FlowCellImage';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { NavLink } from "react-router-dom";
+import { CellShade } from "~/components/flow/CellShade";
+import { FlowDisplay, INode } from "~/redux/types";
+import { FlowCellText } from "~/components/flow/FlowCellText";
+import classNames from "classnames";
+import { FlowCellMenu } from "~/components/flow/FlowCellMenu";
+import { useFlowCellControls } from "~/hooks/flow/useFlowCellControls";
+import { useClickOutsideFocus } from "~/hooks/dom/useClickOutsideFocus";
+import { MenuDots } from "~/components/common/MenuDots";
+import { FlowCellImage } from "~/components/flow/FlowCellImage";
 
 interface Props {
   id: INode['id'];

src/components/flow/FlowCellImage/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import { IMGProps } from '~/utils/types';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import { IMGProps } from "~/utils/types";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 interface Props extends IMGProps {
   height?: number;

src/components/flow/FlowCellImageLazyLoad/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import LazyLoad from 'react-lazyload';
-import { IMGProps } from '~/utils/types';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import LazyLoad from "react-lazyload";
+import { IMGProps } from "~/utils/types";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 interface Props extends IMGProps {
   height?: number;

src/components/flow/FlowCellMenu/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
-import classNames from 'classnames';
-import { Toggle } from '~/components/input/Toggle';
-import { Group } from '~/components/containers/Group';
-import { FlowDisplayVariant } from '~/redux/types';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Icon } from "~/components/input/Icon";
+import classNames from "classnames";
+import { Toggle } from "~/components/input/Toggle";
+import { Group } from "~/components/containers/Group";
+import { FlowDisplayVariant } from "~/redux/types";
 
 interface Props {
   onClose: () => void;

src/components/flow/FlowCellText/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC, ReactElement } from 'react';
-import { Markdown } from '~/components/containers/Markdown';
-import { DivProps } from '~/utils/types';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-import { formatText } from '~/utils/dom';
+import React, { FC, ReactElement } from "react";
+import { Markdown } from "~/components/containers/Markdown";
+import { DivProps } from "~/utils/types";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
+import { formatText } from "~/utils/dom";
 
 interface Props extends DivProps {
   children: string;

src/components/flow/FlowGrid/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC, Fragment } from 'react';
-import { FlowDisplay, IFlowNode, INode } from '~/redux/types';
-import { IUser } from '~/redux/auth/types';
-import { PRESETS, URLS } from '~/constants/urls';
-import { FlowCell } from '~/components/flow/FlowCell';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-import { getURLFromString } from '~/utils/dom';
-import { canEditNode } from '~/utils/node';
+import React, { FC, Fragment } from "react";
+import { FlowDisplay, IFlowNode, INode } from "~/redux/types";
+import { IUser } from "~/redux/auth/types";
+import { PRESETS, URLS } from "~/constants/urls";
+import { FlowCell } from "~/components/flow/FlowCell";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
+import { getURLFromString } from "~/utils/dom";
+import { canEditNode } from "~/utils/node";
 
 interface Props {
   nodes: IFlowNode[];

src/components/flow/FlowRecent/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import { FlowRecentItem } from '../FlowRecentItem';
-import styles from './styles.module.scss';
-import { IFlowNode } from '~/redux/types';
+import React, { FC } from "react";
+import { FlowRecentItem } from "../FlowRecentItem";
+import styles from "./styles.module.scss";
+import { IFlowNode } from "~/redux/types";
 
 interface IProps {
   recent: IFlowNode[];

src/components/flow/FlowRecentItem/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from 'react';
-import { INode } from '~/redux/types';
-import styles from './styles.module.scss';
-import { URLS } from '~/constants/urls';
-import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
-import { getPrettyDate } from '~/utils/dom';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import { Icon } from '~/components/input/Icon';
+import React, { FC } from "react";
+import { INode } from "~/redux/types";
+import styles from "./styles.module.scss";
+import { URLS } from "~/constants/urls";
+import { NodeRelatedItem } from "~/components/node/NodeRelatedItem";
+import { getPrettyDate } from "~/utils/dom";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import { Icon } from "~/components/input/Icon";
 
 interface IProps {
   node: Partial<INode>;

src/components/flow/FlowSearchResults/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { FlowRecentItem } from '../FlowRecentItem';
-import { Icon } from '~/components/input/Icon';
-import { INode } from '~/redux/types';
-import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { FlowRecentItem } from "../FlowRecentItem";
+import { Icon } from "~/components/input/Icon";
+import { INode } from "~/redux/types";
+import { InfiniteScroll } from "~/components/containers/InfiniteScroll";
 
 interface IProps {
   isLoading: boolean;

src/components/input/ArcProgress/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { describeArc } from '~/utils/dom';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { describeArc } from "~/utils/dom";
 
 interface IProps {
   size: number;

src/components/input/Button/index.tsx

@@ -1,10 +1,10 @@
-import classnames from 'classnames';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
-import { IIcon } from '~/redux/types';
-import Tippy from '@tippy.js/react';
-import 'tippy.js/dist/tippy.css';
+import classnames from "classnames";
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from "react";
+import styles from "./styles.module.scss";
+import { Icon } from "~/components/input/Icon";
+import { IIcon } from "~/redux/types";
+import Tippy from "@tippy.js/react";
+import "tippy.js/dist/tippy.css";
 
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,

src/components/input/ButtonGroup/index.tsx

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { HTMLAttributes } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};
 

src/components/input/DropHereIcon/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { SVGProps } from '~/utils/types';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { SVGProps } from "~/utils/types";
 
 interface Props extends SVGProps {}
 

src/components/input/Icon/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { IIcon } from '~/redux/types';
+import React, { FC } from "react";
+import { IIcon } from "~/redux/types";
 
 type IProps = React.SVGAttributes<SVGElement> & {
   size?: number;

src/components/input/InputWrapper/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 interface InputWrapperProps {
   title?: string;

src/components/input/LoaderCircle/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
-import { SVGProps } from '~/utils/types';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
+import { LoaderCircleInner } from "~/components/input/LoaderCircleInner";
+import { SVGProps } from "~/utils/types";
 
 interface IProps extends SVGProps {
   size?: number;

src/components/input/LoaderCircleInner/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, SVGAttributes } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, SVGAttributes } from "react";
+import styles from "./styles.module.scss";
 
 interface IProps extends SVGAttributes<SVGElement> {
   size: number;

src/components/input/Textarea/index.tsx

@@ -5,14 +5,14 @@ import React, {
   TextareaHTMLAttributes,
   useCallback,
   useEffect,
-  useState,
-} from 'react';
-import classNames from 'classnames';
-import autosize from 'autosize';
-import styles from './styles.module.scss';
+  useState
+} from "react";
+import classNames from "classnames";
+import autosize from "autosize";
+import styles from "./styles.module.scss";
 
-import { InputWrapper } from '~/components/input/InputWrapper';
-import { useForwardRef } from '~/hooks/dom/useForwardRef';
+import { InputWrapper } from "~/components/input/InputWrapper";
+import { useForwardRef } from "~/hooks/dom/useForwardRef";
 
 type IProps = DetailedHTMLProps<
   TextareaHTMLAttributes<HTMLTextAreaElement>,

src/components/input/Toggle/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback } from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { ButtonProps } from '~/utils/types';
+import React, { FC, useCallback } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
+import { ButtonProps } from "~/utils/types";
 
 type ToggleColor = 'primary' | 'secondary' | 'lab' | 'danger' | 'white';
 

src/components/lab/LabBanner/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { Group } from '~/components/containers/Group';
-import { Square } from '~/components/containers/Square';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Group } from "~/components/containers/Group";
+import { Square } from "~/components/containers/Square";
 
 interface IProps {}
 

src/components/lab/LabBottomPanel/index.tsx

@@ -1,15 +1,15 @@
-import React, { FC, useCallback } from 'react';
-import { Group } from '~/components/containers/Group';
-import { Filler } from '~/components/containers/Filler';
-import styles from './styles.module.scss';
-import { getPrettyDate } from '~/utils/dom';
-import { INode } from '~/redux/types';
-import { Icon } from '~/components/input/Icon';
-import classNames from 'classnames';
-import { Grid } from '~/components/containers/Grid';
-import { useHistory } from 'react-router';
-import { URLS } from '~/constants/urls';
-import { Placeholder } from '~/components/placeholders/Placeholder';
+import React, { FC, useCallback } from "react";
+import { Group } from "~/components/containers/Group";
+import { Filler } from "~/components/containers/Filler";
+import styles from "./styles.module.scss";
+import { getPrettyDate } from "~/utils/dom";
+import { INode } from "~/redux/types";
+import { Icon } from "~/components/input/Icon";
+import classNames from "classnames";
+import { Grid } from "~/components/containers/Grid";
+import { useHistory } from "react-router";
+import { URLS } from "~/constants/urls";
+import { Placeholder } from "~/components/placeholders/Placeholder";
 
 type Props = {
   node: INode;

src/components/lab/LabHead/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { LabHeadItem } from '~/components/lab/LabHeadItem';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { LabHeadItem } from "~/components/lab/LabHeadItem";
 
 interface IProps {
   isLoading?: boolean;

src/components/lab/LabHeadItem/index.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
-import { Group } from '~/components/containers/Group';
-import { Icon } from '~/components/input/Icon';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
+import React, { FC } from "react";
+import { Group } from "~/components/containers/Group";
+import { Icon } from "~/components/input/Icon";
+import { Placeholder } from "~/components/placeholders/Placeholder";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
 
 interface IProps {
   icon: string;

src/components/lab/LabHero/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC, useCallback } from 'react';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import { Group } from '~/components/containers/Group';
-import { Icon } from '~/components/input/Icon';
-import styles from './styles.module.scss';
-import { INode } from '~/redux/types';
-import { getPrettyDate } from '~/utils/dom';
-import { URLS } from '~/constants/urls';
-import { useHistory } from 'react-router-dom';
+import React, { FC, useCallback } from "react";
+import { Placeholder } from "~/components/placeholders/Placeholder";
+import { Group } from "~/components/containers/Group";
+import { Icon } from "~/components/input/Icon";
+import styles from "./styles.module.scss";
+import { INode } from "~/redux/types";
+import { getPrettyDate } from "~/utils/dom";
+import { URLS } from "~/constants/urls";
+import { useHistory } from "react-router-dom";
 
 interface IProps {
   node?: Partial<INode>;

src/components/lab/LabHeroes/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import { INode } from '~/redux/types';
-import styles from '~/containers/lab/LabStats/styles.module.scss';
-import { LabHero } from '~/components/lab/LabHero';
-import { Group } from '~/components/containers/Group';
+import React, { FC } from "react";
+import { INode } from "~/redux/types";
+import styles from "~/containers/lab/LabStats/styles.module.scss";
+import { LabHero } from "~/components/lab/LabHero";
+import { Group } from "~/components/containers/Group";
 
 interface IProps {
   nodes: Partial<INode>[];

src/components/lab/LabLine/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { INodeComponentProps } from '~/constants/node';
-import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { INodeComponentProps } from "~/constants/node";
+import { useColorGradientFromString } from "~/hooks/color/useColorGradientFromString";
 
 interface Props extends INodeComponentProps {}
 

src/components/lab/LabNode/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useMemo } from 'react';
-import { INode } from '~/redux/types';
-import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
-import styles from './styles.module.scss';
-import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
-import { isAfter, parseISO } from 'date-fns';
-import classNames from 'classnames';
-import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
+import React, { FC, useMemo } from "react";
+import { INode } from "~/redux/types";
+import { useNodeBlocks } from "~/hooks/node/useNodeBlocks";
+import styles from "./styles.module.scss";
+import { LabBottomPanel } from "~/components/lab/LabBottomPanel";
+import { isAfter, parseISO } from "date-fns";
+import classNames from "classnames";
+import { useColorGradientFromString } from "~/hooks/color/useColorGradientFromString";
 
 interface IProps {
   node: INode;

src/components/lab/LabTags/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import styles from './/styles.module.scss';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import { ITag } from '~/redux/types';
-import { Tag } from '~/components/tags/Tag';
+import React, { FC } from "react";
+import styles from ".//styles.module.scss";
+import { Placeholder } from "~/components/placeholders/Placeholder";
+import { ITag } from "~/redux/types";
+import { Tag } from "~/components/tags/Tag";
 
 interface IProps {
   tags: ITag[];

src/components/main/Footer/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, memo } from 'react';
-import styles from './styles.module.scss';
+import React, { FC, memo } from "react";
+import styles from "./styles.module.scss";
 
 interface IProps {}
 

src/components/main/GodRays/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 interface IGodRaysProps {
   raised?: boolean;

src/components/main/SidePane/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-import { Group } from '~/components/containers/Group';
+import React, { FC, useCallback, useEffect, useState } from "react";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
+import { Group } from "~/components/containers/Group";
 
 interface IProps {
 }

src/components/main/UserButton/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useCallback } from 'react';
-import { Group } from '~/components/containers/Group';
-import styles from './styles.module.scss';
-import { getURL } from '~/utils/dom';
-import { Icon } from '~/components/input/Icon';
-import { IUser } from '~/redux/auth/types';
-import { PRESETS } from '~/constants/urls';
-import { authOpenProfile } from '~/redux/auth/actions';
+import React, { FC, useCallback } from "react";
+import { Group } from "~/components/containers/Group";
+import styles from "./styles.module.scss";
+import { getURL } from "~/utils/dom";
+import { Icon } from "~/components/input/Icon";
+import { IUser } from "~/redux/auth/types";
+import { PRESETS } from "~/constants/urls";
+import { authOpenProfile } from "~/redux/auth/actions";
 
 interface IProps {
   user: Partial<IUser>;

src/components/media/AudioPlayer/index.tsx

@@ -1,80 +1,40 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } 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 { IPlayerProgress, Player } from '~/utils/player';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
-import { InputText } from '~/components/input/InputText';
-import { PlayerState } from '~/redux/player/constants';
+import React, { memo, useCallback, useMemo } from "react";
+import { IFile } from "~/redux/types";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
+import { Icon } from "~/components/input/Icon";
+import { InputText } from "~/components/input/InputText";
+import { PlayerState } from "~/constants/player";
+import { useAudioPlayer } from "~/utils/providers/AudioPlayerProvider";
 
-const mapStateToProps = state => ({
-  player: selectPlayer(state),
-});
-
-const mapDispatchToProps = {
-  playerSetFileAndPlay: PLAYER_ACTIONS.playerSetFileAndPlay,
-  playerPlay: PLAYER_ACTIONS.playerPlay,
-  playerPause: PLAYER_ACTIONS.playerPause,
-  playerSeek: PLAYER_ACTIONS.playerSeek,
-};
-
-type Props = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {
+type Props = {
   file: IFile;
   isEditing?: boolean;
   onDelete?: (id: IFile['id']) => void;
   onTitleChange?: (file_id: IFile['id'], title: string) => void;
-  };
+};
 
-const AudioPlayerUnconnected = memo(
-  ({
-    file,
-    onDelete,
-    isEditing,
-    onTitleChange,
-    player: { file: current, status },
-    playerSetFileAndPlay,
-    playerPlay,
-    playerPause,
-    playerSeek,
-  }: Props) => {
-    const [playing, setPlaying] = useState(false);
-    const [progress, setProgress] = useState<IPlayerProgress>({
-      progress: 0,
-      current: 0,
-      total: 0,
-    });
+const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) => {
+  const { toPercent, file: currentFile, setFile, play, status, progress, pause } = useAudioPlayer();
 
-    const onPlay = useCallback(() => {
-      if (isEditing) return;
-
-      if (current && current.id === file.id) {
-        if (status === PlayerState.PLAYING) return playerPause();
-        return playerPlay();
+  const onPlay = useCallback(async () => {
+    if (file.id !== currentFile?.id) {
+      setFile(file);
+      setTimeout(() => void play(), 0);
+      return;
     }
 
-      playerSetFileAndPlay(file);
-    }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay, isEditing]);
-
-    const onProgress = useCallback(
-      ({ detail }: { detail: IPlayerProgress }) => {
-        if (!detail || !detail.total) return;
-        setProgress(detail);
-      },
-      [setProgress]
-    );
+    status === PlayerState.PLAYING ? pause() : await play();
+  }, [play, pause, setFile, file, currentFile, status]);
 
   const onSeek = useCallback(
     event => {
       event.stopPropagation();
       const { clientX, target } = event;
       const { left, width } = target.getBoundingClientRect();
-        playerSeek((clientX - left) / width);
+      toPercent(((clientX - left) / width) * 100);
     },
-      [playerSeek]
+    [toPercent]
   );
 
   const onDropClick = useCallback(() => {
@@ -102,19 +62,10 @@ const AudioPlayerUnconnected = memo(
     [onTitleChange, file.id]
   );
 
-    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 playing = currentFile?.id === file.id;
 
   return (
-      <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
+    <div onClick={onPlay} className={classNames(styles.wrap, { [styles.playing]: playing })}>
       {onDelete && (
         <div className={styles.drop} onMouseDown={onDropClick}>
           <Icon icon="close" />
@@ -135,9 +86,7 @@ const AudioPlayerUnconnected = memo(
         </div>
       ) : (
         <div className={styles.content}>
-            <div className={styles.title}>
-              <div className={styles.title}>{title || 'Unknown'}</div>
-            </div>
+          <div className={styles.title}>{title || ''}</div>
 
           <div className={styles.progress} onClick={onSeek}>
             <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
@@ -146,7 +95,6 @@ const AudioPlayerUnconnected = memo(
       )}
     </div>
   );
-  }
-);
+});
 
-export const AudioPlayer = connect(mapStateToProps, mapDispatchToProps)(AudioPlayerUnconnected);
+export { AudioPlayer };

src/components/media/AudioPlayer/styles.module.scss

@@ -9,21 +9,6 @@
   justify-content: stretch;
   flex: 1;
   user-select: none;
-
-  &:global(.playing) {
-    .progress {
-      opacity: 1;
-      pointer-events: all;
-      touch-action: auto;
-    }
-
-    .title {
-      top: 20px;
-      opacity: 1;
-      font-size: 12px;
-      padding-right: 140px;
-    }
-  }
 }
 
 .playpause {
@@ -76,6 +61,14 @@
   text-align: left;
   transition: all 0.5s;
   font: $font_18_semibold;
+
+  .playing & {
+    top: 20px;
+    opacity: 1;
+    font-size: 12px;
+    padding-right: 140px;
+    color: transparentize(white, 0.7);
+  }
 }
 
 .progress {
@@ -88,6 +81,12 @@
   left: 0;
   cursor: pointer;
 
+  .playing & {
+    opacity: 1;
+    pointer-events: all;
+    touch-action: auto;
+  }
+
   &::after {
     content: ' ';
     position: absolute;

src/components/media/ImagePreloader/index.tsx

@@ -1,13 +1,13 @@
-import React, { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import classNames from 'classnames';
-import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import styles from './styles.module.scss';
-import { IFile } from '~/redux/types';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { Icon } from '~/components/input/Icon';
-import { useResizeHandler } from '~/hooks/dom/useResizeHandler';
-import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
+import React, { FC, MouseEventHandler, useCallback, useMemo, useState } from "react";
+import classNames from "classnames";
+import { getURL } from "~/utils/dom";
+import { PRESETS } from "~/constants/urls";
+import styles from "./styles.module.scss";
+import { IFile } from "~/redux/types";
+import { LoaderCircle } from "~/components/input/LoaderCircle";
+import { Icon } from "~/components/input/Icon";
+import { useResizeHandler } from "~/hooks/dom/useResizeHandler";
+import { DEFAULT_DOMINANT_COLOR } from "~/constants/node";
 
 interface IProps {
   file: IFile;

src/components/node/CommendDeleted/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback } from 'react';
-import styles from './styles.module.scss';
-import { Button } from '~/components/input/Button';
-import { IComment } from '~/redux/types';
+import React, { FC, useCallback } from "react";
+import styles from "./styles.module.scss";
+import { Button } from "~/components/input/Button";
+import { IComment } from "~/redux/types";
 
 interface IProps {
   id: IComment['id'];

src/components/node/MenuButton/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { Group } from '~/components/containers/Group';
-import { Filler } from '~/components/containers/Filler';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { Group } from "~/components/containers/Group";
+import { Filler } from "~/components/containers/Filler";
 
 interface IProps {
   title: string;