moved views to containers

src/containers/boris/BorisComments/index.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { NodeComments } from '~/containers/node/NodeComments';
+import { Footer } from '~/components/main/Footer';
+import { CommentContextProvider, useCommentContext } from '~/utils/context/CommentContextProvider';
+import { useUserContext } from '~/utils/context/UserContextProvider';
+import { useNodeContext } from '~/utils/context/NodeContextProvider';
+
+interface IProps {}
+
+const BorisComments: FC<IProps> = () => {
+  const user = useUserContext();
+  const {
+    isLoading,
+    comments,
+    onLoadMoreComments,
+    onDeleteComment,
+    onShowImageModal,
+    count,
+  } = useCommentContext();
+  const { node } = useNodeContext();
+
+  return (
+    <>
+      <Group className={styles.grid}>
+        {user.is_user && <NodeCommentForm isBefore nodeId={node.id} />}
+
+        {isLoading ? (
+          <NodeNoComments is_loading count={7} />
+        ) : (
+          <CommentContextProvider
+            comments={comments}
+            count={count}
+            onDeleteComment={onDeleteComment}
+            onLoadMoreComments={onLoadMoreComments}
+            onShowImageModal={onShowImageModal}
+            isLoading={isLoading}
+          >
+            <NodeComments order="ASC" />
+          </CommentContextProvider>
+        )}
+      </Group>
+
+      <Footer />
+    </>
+  );
+};
+
+export { BorisComments };

src/containers/boris/BorisComments/styles.module.scss

@@ -0,0 +1,18 @@
+@import "~/styles/variables.scss";
+
+.content {
+  flex: 4;
+  z-index: 2;
+  border-radius: $radius;
+  padding: $gap;
+  background: $node_bg;
+  box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
+
+  @include desktop {
+    flex: 2.5;
+  }
+
+  @media(max-width: 1024px) {
+    flex: 2;
+  }
+}

src/containers/main/BottomContainer/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
-import { PlayerView } from '~/views/player/PlayerView';
+import { PlayerView } from '~/containers/player/PlayerView';
 
 type IProps = {};
 

src/containers/node/NodeBottomBlock/index.tsx

@@ -0,0 +1,72 @@
+import React, { FC } from 'react';
+import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
+import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
+import StickyBox from 'react-sticky-box/dist/esnext';
+import styles from './styles.module.scss';
+import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
+import { useNodeContext } from '~/utils/context/NodeContextProvider';
+import { useCommentContext } from '~/utils/context/CommentContextProvider';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { NodeComments } from '~/containers/node/NodeComments';
+import { useUserContext } from '~/utils/context/UserContextProvider';
+import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider';
+
+interface IProps {
+  commentsOrder: 'ASC' | 'DESC';
+}
+
+const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
+  const { is_user: isUser } = useUserContext();
+  const { node, isLoading } = useNodeContext();
+  const { comments, isLoading: isLoadingComments } = useCommentContext();
+  const { related, isLoading: isLoadingRelated } = useNodeRelatedContext();
+  const { inline } = useNodeBlocks(node, isLoading);
+
+  if (node.deleted_at) {
+    return <NodeDeletedBadge />;
+  }
+
+  return (
+    <Group>
+      <Padder>
+        <Group horizontal className={styles.content}>
+          <Group className={styles.comments}>
+            {inline && <div className={styles.inline}>{inline}</div>}
+
+            {isLoading || isLoadingComments || (!comments.length && !inline) ? (
+              <NodeNoComments is_loading={isLoadingComments || isLoading} />
+            ) : (
+              <NodeComments order={commentsOrder} />
+            )}
+
+            {isUser && !isLoading && <NodeCommentForm nodeId={node.id} />}
+          </Group>
+
+          <div className={styles.panel}>
+            <StickyBox className={styles.sticky} offsetTop={72}>
+              <div className={styles.left}>
+                <div className={styles.left_item}>
+                  <NodeAuthorBlock user={node?.user} />
+                </div>
+
+                <div className={styles.left_item}>
+                  <NodeTagsBlock />
+                </div>
+                <div className={styles.left_item}>
+                  <NodeRelatedBlock isLoading={isLoadingRelated} node={node} related={related} />
+                </div>
+              </div>
+            </StickyBox>
+          </div>
+        </Group>
+      </Padder>
+    </Group>
+  );
+};
+
+export { NodeBottomBlock };

src/containers/node/NodeBottomBlock/styles.module.scss

@@ -0,0 +1,56 @@
+@import "~/styles/variables.scss";
+
+.sticky {
+  width: 100%;
+}
+
+.content {
+  align-items: stretch !important;
+  @include vertical_at_tablet;
+}
+
+.comments {
+  flex: 3 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-direction: column;
+
+  @media (max-width: 1024px) {
+    flex: 2 1;
+  }
+}
+
+
+.panel {
+  flex: 1 3;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-top: $comment_height / 2;
+    flex: 1 2;
+  }
+}
+
+.buttons {
+  background: $node_buttons_bg;
+  flex: 1;
+  border-radius: $panel_radius;
+  box-shadow: $comment_shadow;
+}
+
+.left {
+  flex: 1;
+  min-width: 0;
+}
+
+.left_item {
+  padding-bottom: $gap * 2;
+}

src/containers/node/NodeComments/index.tsx

@@ -0,0 +1,64 @@
+import React, { FC, memo, useMemo } from 'react';
+
+import styles from './styles.module.scss';
+import { ICommentGroup } from '~/redux/types';
+import { canEditComment } from '~/utils/node';
+import { COMMENTS_DISPLAY } from '~/redux/node/constants';
+import { plural } from '~/utils/dom';
+import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
+import { useCommentContext } from '~/utils/context/CommentContextProvider';
+import { Comment } from '~/components/comment/Comment';
+import { useUserContext } from '~/utils/context/UserContextProvider';
+
+interface IProps {
+  order: 'ASC' | 'DESC';
+}
+
+const NodeComments: FC<IProps> = memo(({ order }) => {
+  const user = useUserContext();
+  const {
+    comments,
+    count,
+    lastSeenCurrent,
+    onLoadMoreComments,
+    onDeleteComment,
+    onShowImageModal,
+  } = useCommentContext();
+
+  const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
+
+  const groupped: ICommentGroup[] = useGrouppedComments(comments, order, lastSeenCurrent);
+
+  const more = useMemo(
+    () =>
+      left > 0 && (
+        <div className={styles.more} onClick={onLoadMoreComments}>
+          Показать ещё{' '}
+          {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
+          {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
+        </div>
+      ),
+    [left, onLoadMoreComments]
+  );
+
+  return (
+    <div className={styles.wrap}>
+      {order === 'DESC' && more}
+
+      {groupped.map(group => (
+        <Comment
+          key={group.ids.join()}
+          group={group}
+          canEdit={canEditComment(group, user)}
+          onDelete={onDeleteComment}
+          onShowImageModal={onShowImageModal}
+          isSame={group.user.id === user.id}
+        />
+      ))}
+
+      {order === 'ASC' && more}
+    </div>
+  );
+});
+
+export { NodeComments };

src/containers/node/NodeComments/styles.module.scss

@@ -0,0 +1,50 @@
+@import "../../../styles/variables";
+
+.wrap {
+  & > div {
+    margin: 0 0 $gap 0;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+}
+
+.more {
+  padding: $gap;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius;
+  text-transform: uppercase;
+  color: darken(white, 60%);
+  font: $font_14_medium;
+  cursor: pointer;
+  transition: all 0.25s;
+  user-select: none;
+  background: url('../../../sprites/stripes.svg');
+  position: relative;
+
+  &:hover {
+    color: $wisegreen;
+    background-color: darken($wisegreen, 12%);
+
+    .bar {
+      background: $wisegreen;
+    }
+  }
+}
+
+.bar {
+  position: absolute;
+  height: 2px;
+  border-radius: 2px;
+  background: darken(white, 60%);
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 50%;
+  transition: width 0.25s;
+}

src/containers/player/PlayerView/index.tsx

@@ -0,0 +1,22 @@
+import React, { VFC } from 'react';
+import { PlayerBar } from '~/components/bars/PlayerBar';
+import { usePlayer } from '~/utils/hooks/player/usePlayer';
+
+interface PlayerViewProps {}
+
+const PlayerView: VFC<PlayerViewProps> = () => {
+  const { status, file, onPlayerSeek, onPlayerStop, onPlayerPause, onPlayerPlay } = usePlayer();
+
+  return (
+    <PlayerBar
+      status={status}
+      playerPlay={onPlayerPlay}
+      playerPause={onPlayerPause}
+      playerSeek={onPlayerSeek}
+      playerStop={onPlayerStop}
+      file={file}
+    />
+  );
+};
+
+export { PlayerView };