muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

optimized scrolls

Browse source
This commit is contained in:
Fedor Katurov 2019-10-23 10:42:25 +07:00
parent 948817e8fc
commit f169de370a
12 changed files with 110 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/containers/BlurWrapper/styles.scss
View file

@ -1,7 +1,7 @@
.blur {
filter: blur(0);
transition: filter 0.25s;
max-height: 100vh;
width: 100vw;
overflow: visible auto;
// max-height: 100vh;
// width: 100vw;
// overflow: visible auto;
}

1
src/components/containers/CommentWrapper/styles.scss
View file

@ -55,6 +55,7 @@
border-radius: $panel_radius 0 0 $panel_radius;
background-size: cover;
flex: 0 0 $comment_height;
will-change: transform;
@include tablet {
height: 32px;

7
src/components/containers/PageCover/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, memo } from 'react';
import * as styles from './styles.scss';
import { createPortal } from 'react-dom';
import { selectNode } from '~/redux/node/selectors';
@ -10,7 +10,7 @@ const mapStateToProps = state => pick(['current_cover_image'], selectNode(state)
type IProps = ReturnType<typeof mapStateToProps> & {};
const PageCoverUnconnected: FC<IProps> = ({ current_cover_image }) =>
const PageCoverUnconnected: FC<IProps> = memo(({ current_cover_image }) =>
current_cover_image
? createPortal(
<div
@ -19,7 +19,8 @@ const PageCoverUnconnected: FC<IProps> = ({ current_cover_image }) =>
/>,
document.body
)
: null;
: null
);
const PageCover = connect(mapStateToProps)(PageCoverUnconnected);
export { PageCover };

1
src/components/containers/PageCover/styles.scss
View file

@ -17,6 +17,7 @@
width: 100%;
height: 100%;
animation: fadeIn 2s;
will-change: transform, opacity;
&::after {
content: ' ';

1
src/components/editors/EditorUploadCoverButton/styles.scss
View file

@ -50,6 +50,7 @@
border-radius: ($upload_button_height / 2) !important;
background: 50% 50% no-repeat;
background-size: cover;
will-change: transform;
display: flex;
align-items: center;
flex-direction: row;

1
src/components/flow/Cell/styles.scss
View file

@ -110,6 +110,7 @@
border-radius: $cell_radius + 2px;
opacity: 0;
transition: opacity 0.5s;
will-change: transform;
& > img {
opacity: 0;

4
src/components/flow/HeroPlaceholder/style.scss
View file

@ -1,9 +1,11 @@
.container {
height: 280px;
width: 100%;
background: transparentize(white, 0.9) url("http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg") no-repeat 50% 30%;
background: transparentize(white, 0.9)
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%;
background-size: cover;
opacity: 0.7;
will-change: transform;
//box-shadow: white 0 0 0 1px;
//border-radius: $panel_radius $panel_radius 0 0;
}

6
src/components/main/Header/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useCallback } from 'react';
import React, { FC, useCallback, memo } from 'react';
import { connect } from 'react-redux';
import { push as historyPush } from 'connected-react-router';
import { Link } from 'react-router-dom';
@ -25,7 +25,7 @@ const mapDispatchToProps = {
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, showDialog }) => {
const HeaderUnconnected: FC<IProps> = memo(({ user: { username, is_user, photo }, showDialog }) => {
const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
return (
@ -54,7 +54,7 @@ const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, sho
)}
</div>
);
};
});
const Header = connect(
mapStateToProps,

127
src/components/media/AudioPlayer/index.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useState, useEffect } from 'react';
import React, { useCallback, useState, useEffect, memo } from 'react';
import { connect } from 'react-redux';
import { selectPlayer } from '~/redux/player/selectors';
import * as PLAYER_ACTIONS from '~/redux/player/actions';
@ -25,76 +25,85 @@ type Props = ReturnType<typeof mapStateToProps> &
file: IFile;
};
const AudioPlayerUnconnected = ({
file,
player: { file: current, status },
const AudioPlayerUnconnected = memo(
({
file,
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,
});
playerSetFileAndPlay,
playerPlay,
playerPause,
playerSeek,
}: Props) => {
const [playing, setPlaying] = useState(false);
const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
const onPlay = useCallback(() => {
if (current && current.id === file.id) {
if (status === PLAYER_STATES.PLAYING) return playerPause();
return playerPlay();
}
const onPlay = useCallback(() => {
if (current && current.id === file.id) {
if (status === PLAYER_STATES.PLAYING) return playerPause();
return playerPlay();
}
playerSetFileAndPlay(file);
}, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
playerSetFileAndPlay(file);
}, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
const onProgress = useCallback(
({ detail }: { detail: IPlayerProgress }) => {
if (!detail || !detail.total) return;
setProgress(detail);
},
[setProgress]
);
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]
);
const onSeek = useCallback(
event => {
event.stopPropagation();
const { clientX, target } = event;
const { left, width } = target.getBoundingClientRect();
playerSeek((clientX - left) / width);
},
[playerSeek]
);
useEffect(() => {
const active = current && current.id === file.id;
setPlaying(current && current.id === file.id);
useEffect(() => {
const active = current && current.id === file.id;
setPlaying(current && current.id === file.id);
if (active) Player.on('playprogress', onProgress);
if (active) Player.on('playprogress', onProgress);
return () => {
if (active) Player.off('playprogress', onProgress);
};
}, [file, current, setPlaying, onProgress]);
return () => {
if (active) Player.off('playprogress', onProgress);
};
}, [file, current, setPlaying, onProgress]);
const title =
file.metadata &&
(file.metadata.title ||
[file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
const title =
file.metadata &&
(file.metadata.title ||
[file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
return (
<div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
<div className={styles.playpause}>
{playing && status === PLAYER_STATES.PLAYING ? (
<Icon icon="pause" />
) : (
<Icon icon="play" />
)}
</div>
<div className={styles.content}>
<div className={styles.title}>{title || 'Unknown'}</div>
return (
<div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
<div className={styles.playpause}>
{playing && status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
</div>
<div className={styles.content}>
<div className={styles.title}>{title || 'Unknown'}</div>
<div className={styles.progress} onClick={onSeek}>
<div className={styles.bar} style={{ width: `${progress.progress}%` }} />
<div className={styles.progress} onClick={onSeek}>
<div className={styles.bar} style={{ width: `${progress.progress}%` }} />
</div>
</div>
</div>
</div>
);
};
);
}
);
export const AudioPlayer = connect(
mapStateToProps,

47
src/components/node/Comment/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, HTMLAttributes } from 'react';
import React, { FC, HTMLAttributes, memo } from 'react';
import { CommentWrapper } from '~/components/containers/CommentWrapper';
import { ICommentGroup } from '~/redux/types';
import { getURL } from '~/utils/dom';
@ -12,30 +12,25 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
is_same?: boolean;
};
const Comment: FC<IProps> = ({
comment_group,
is_empty,
is_same,
is_loading,
className,
...props
}) => {
return (
<CommentWrapper
className={className}
is_empty={is_empty}
is_loading={is_loading}
user={comment_group.user}
is_same={is_same}
{...props}
>
<div className={styles.wrap}>
{comment_group.comments.map(comment => (
<CommentContent comment={comment} key={comment.id} />
))}
</div>
</CommentWrapper>
);
};
const Comment: FC<IProps> = memo(
({ comment_group, is_empty, is_same, is_loading, className, ...props }) => {
return (
<CommentWrapper
className={className}
is_empty={is_empty}
is_loading={is_loading}
user={comment_group.user}
is_same={is_same}
{...props}
>
<div className={styles.wrap}>
{comment_group.comments.map(comment => (
<CommentContent comment={comment} key={comment.id} />
))}
</div>
</CommentWrapper>
);
}
);
export { Comment };

6
src/components/node/CommentContent/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useMemo } from 'react';
import React, { FC, useMemo, memo } from 'react';
import { IComment, IFile } from '~/redux/types';
import path from 'ramda/es/path';
import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
@ -15,7 +15,7 @@ interface IProps {
comment: IComment;
}
const CommentContent: FC<IProps> = ({ comment }) => {
const CommentContent: FC<IProps> = memo(({ comment }) => {
const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
() =>
reduce(
@ -68,7 +68,7 @@ const CommentContent: FC<IProps> = ({ comment }) => {
)}
</>
);
};
});
export { CommentContent };

1
src/components/node/NodeAudioImageBlock/styles.scss
View file

@ -29,4 +29,5 @@
background: no-repeat 50% 30%;
background-size: cover;
z-index: 1;
will-change: transform;
}