removed player reducer, migrated to CRA 5

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,75 +1,45 @@
-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,
-};
+const CommentEmbedBlock: FC<Props> = memo(({ block }) => {
+  const id = useMemo(() => {
+    const match = block.content.match(
+      /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-\=]+)/
+    );
 
-type Props = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps &
-  ICommentBlockProps & {};
+    return (match && match[1]) || '';
+  }, [block.content]);
 
-const CommentEmbedBlockUnconnected: FC<Props> = memo(
-  ({ block, youtubes, playerGetYoutubeInfo }) => {
-    const id = useMemo(() => {
-      const match = block.content.match(
-        /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-\=]+)/
-      );
+  const url = useMemo(() => `https://youtube.com/watch?v=${id}`, [id]);
 
-      return (match && match[1]) || '';
-    }, [block.content]);
+  const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
 
-    const url = useMemo(() => `https://youtube.com/watch?v=${id}`, [id]);
+  const metadata = useYoutubeMetadata(id);
+  const title = metadata?.metadata?.title || '';
 
-    const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
+  return (
+    <div className={styles.embed}>
+      <a href={url} target="_blank" rel="noreferrer" />
 
-    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]);
-
-    return (
-      <div className={styles.embed}>
-        <a href={url} target="_blank" />
-
-        <div className={styles.preview}>
-          <div style={{ backgroundImage: `url("${preview}")` }}>
-            <div className={styles.backdrop}>
-              <div className={styles.play}>
-                <Icon icon="play" size={32} />
-              </div>
-
-              <div className={styles.title}>{title}</div>
+      <div className={styles.preview}>
+        <div style={{ backgroundImage: `url("${preview}")` }}>
+          <div className={styles.backdrop}>
+            <div className={styles.play}>
+              <Icon icon="play" size={32} />
             </div>
+
+            <div className={styles.title}>{title}</div>
           </div>
         </div>
       </div>
-    );
-  }
-);
-
-const CommentEmbedBlock = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CommentEmbedBlockUnconnected);
+    </div>
+  );
+});
 
 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,152 +1,100 @@
-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 = {
+  file: IFile;
+  isEditing?: boolean;
+  onDelete?: (id: IFile['id']) => void;
+  onTitleChange?: (file_id: IFile['id'], title: string) => void;
 };
 
-type Props = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {
-    file: IFile;
-    isEditing?: boolean;
-    onDelete?: (id: IFile['id']) => void;
-    onTitleChange?: (file_id: IFile['id'], title: string) => void;
-  };
+const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) => {
+  const { toPercent, file: currentFile, setFile, play, status, progress, pause } = useAudioPlayer();
 
-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 onPlay = useCallback(async () => {
+    if (file.id !== currentFile?.id) {
+      setFile(file);
+      setTimeout(() => void play(), 0);
+      return;
+    }
 
-    const onPlay = useCallback(() => {
-      if (isEditing) return;
+    status === PlayerState.PLAYING ? pause() : await play();
+  }, [play, pause, setFile, file, currentFile, status]);
 
-      if (current && current.id === file.id) {
-        if (status === PlayerState.PLAYING) return playerPause();
-        return playerPlay();
-      }
+  const onSeek = useCallback(
+    event => {
+      event.stopPropagation();
+      const { clientX, target } = event;
+      const { left, width } = target.getBoundingClientRect();
+      toPercent(((clientX - left) / width) * 100);
+    },
+    [toPercent]
+  );
 
-      playerSetFileAndPlay(file);
-    }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay, isEditing]);
+  const onDropClick = useCallback(() => {
+    if (!onDelete) return;
 
-    const onProgress = useCallback(
-      ({ detail }: { detail: IPlayerProgress }) => {
-        if (!detail || !detail.total) return;
-        setProgress(detail);
-      },
-      [setProgress]
-    );
+    onDelete(file.id);
+  }, [file, onDelete]);
 
-    const onSeek = useCallback(
-      event => {
-        event.stopPropagation();
-        const { clientX, target } = event;
-        const { left, width } = target.getBoundingClientRect();
-        playerSeek((clientX - left) / width);
-      },
-      [playerSeek]
-    );
+  const title = useMemo(
+    () =>
+      (file.metadata &&
+        (file.metadata.title ||
+          [file.metadata.id3artist, file.metadata.id3title].filter(el => el).join(' - '))) ||
+      file.orig_name ||
+      '',
+    [file.metadata, file.orig_name]
+  );
 
-    const onDropClick = useCallback(() => {
-      if (!onDelete) return;
+  const onRename = useCallback(
+    (val: string) => {
+      if (!onTitleChange) return;
 
-      onDelete(file.id);
-    }, [file, onDelete]);
+      onTitleChange(file.id, val);
+    },
+    [onTitleChange, file.id]
+  );
 
-    const title = useMemo(
-      () =>
-        (file.metadata &&
-          (file.metadata.title ||
-            [file.metadata.id3artist, file.metadata.id3title].filter(el => el).join(' - '))) ||
-        file.orig_name ||
-        '',
-      [file.metadata, file.orig_name]
-    );
+  const playing = currentFile?.id === file.id;
 
-    const onRename = useCallback(
-      (val: string) => {
-        if (!onTitleChange) return;
-
-        onTitleChange(file.id, val);
-      },
-      [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]);
-
-    return (
-      <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
-        {onDelete && (
-          <div className={styles.drop} onMouseDown={onDropClick}>
-            <Icon icon="close" />
-          </div>
-        )}
-
-        <div className={styles.playpause}>
-          {playing && status === PlayerState.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
+  return (
+    <div onClick={onPlay} className={classNames(styles.wrap, { [styles.playing]: playing })}>
+      {onDelete && (
+        <div className={styles.drop} onMouseDown={onDropClick}>
+          <Icon icon="close" />
         </div>
+      )}
 
-        {isEditing ? (
-          <div className={styles.input}>
-            <InputText
-              placeholder={title}
-              handler={onRename}
-              value={file.metadata && file.metadata.title}
-            />
-          </div>
-        ) : (
-          <div className={styles.content}>
-            <div className={styles.title}>
-              <div className={styles.title}>{title || 'Unknown'}</div>
-            </div>
-
-            <div className={styles.progress} onClick={onSeek}>
-              <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
-            </div>
-          </div>
-        )}
+      <div className={styles.playpause}>
+        {playing && status === PlayerState.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
       </div>
-    );
-  }
-);
 
-export const AudioPlayer = connect(mapStateToProps, mapDispatchToProps)(AudioPlayerUnconnected);
+      {isEditing ? (
+        <div className={styles.input}>
+          <InputText
+            placeholder={title}
+            handler={onRename}
+            value={file.metadata && file.metadata.title}
+          />
+        </div>
+      ) : (
+        <div className={styles.content}>
+          <div className={styles.title}>{title || ''}</div>
+
+          <div className={styles.progress} onClick={onSeek}>
+            <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+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;

src/components/node/NodeAudioBlock/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import { AudioPlayer } from '~/components/media/AudioPlayer';
-import styles from './styles.module.scss';
-import { INodeComponentProps } from '~/constants/node';
-import { useNodeAudios } from '~/hooks/node/useNodeAudios';
+import React, { FC } from "react";
+import { AudioPlayer } from "~/components/media/AudioPlayer";
+import styles from "./styles.module.scss";
+import { INodeComponentProps } from "~/constants/node";
+import { useNodeAudios } from "~/hooks/node/useNodeAudios";
 
 interface IProps extends INodeComponentProps {}
 

src/components/node/NodeAudioImageBlock/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { path } from 'ramda';
-import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import { INodeComponentProps } from '~/constants/node';
-import { useNodeImages } from '~/hooks/node/useNodeImages';
+import React, { FC } from "react";
+import styles from "./styles.module.scss";
+import { path } from "ramda";
+import { getURL } from "~/utils/dom";
+import { PRESETS } from "~/constants/urls";
+import { INodeComponentProps } from "~/constants/node";
+import { useNodeImages } from "~/hooks/node/useNodeImages";
 
 interface IProps extends INodeComponentProps {}