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

audio image block

Browse source
This commit is contained in:
Fedor Katurov 2019-10-22 11:16:17 +07:00
parent 353cadb09f
commit 4fd5142e8b
4 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -146,4 +146,5 @@
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
transition: opacity 0.5s; transition: opacity 0.5s;
display: none;
} }

28
src/components/node/NodeAudioImageBlock/index.tsx Normal file
View file

@ -0,0 +1,28 @@
import React, { FC, useMemo } from 'react';
import { INode } from '~/redux/types';
import * as styles from './styles.scss';
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
import path from 'ramda/es/path';
import { getURL } from '~/utils/dom';
interface IProps {
node: INode;
}
const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
const images = useMemo(
() => node.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE),
[node.files]
);
return (
<div className={styles.wrap}>
<div
className={styles.slide}
style={{ backgroundImage: `url("${getURL(path([0], images))}")` }}
/>
</div>
);
};
export { NodeAudioImageBlock };

32
src/components/node/NodeAudioImageBlock/styles.scss Normal file
View file

@ -0,0 +1,32 @@
.wrap {
@include outer_shadow();
padding-bottom: 33vh;
position: relative;
border-radius: $radius $radius 0 0;
&::after {
border-radius: $radius $radius 0 0;
content: ' ADD PATTERN HERE ';
z-index: 3;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
}
.slide {
@include outer_shadow();
border-radius: $radius $radius 0 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: no-repeat 50% 30%;
background-size: cover;
z-index: 1;
}

2
src/redux/node/constants.ts
View file

@ -4,6 +4,7 @@ import { NodeImageSlideBlock } from '~/components/node/NodeImageSlideBlock';
import { NodeTextBlock } from '~/components/node/NodeTextBlock'; import { NodeTextBlock } from '~/components/node/NodeTextBlock';
import { NodeAudioBlock } from '~/components/node/NodeAudioBlock'; import { NodeAudioBlock } from '~/components/node/NodeAudioBlock';
import { NodeVideoBlock } from '~/components/node/NodeVideoBlock'; import { NodeVideoBlock } from '~/components/node/NodeVideoBlock';
import { NodeAudioImageBlock } from '~/components/node/NodeAudioImageBlock';
import { ImageEditor } from '~/components/editors/ImageEditor'; import { ImageEditor } from '~/components/editors/ImageEditor';
import { TextEditor } from '~/components/editors/TextEditor'; import { TextEditor } from '~/components/editors/TextEditor';
import { VideoEditor } from '~/components/editors/VideoEditor'; import { VideoEditor } from '~/components/editors/VideoEditor';
@ -71,6 +72,7 @@ type INodeComponents = Record<
export const NODE_COMPONENTS: INodeComponents = { export const NODE_COMPONENTS: INodeComponents = {
[NODE_TYPES.IMAGE]: NodeImageSlideBlock, [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
[NODE_TYPES.VIDEO]: NodeVideoBlock, [NODE_TYPES.VIDEO]: NodeVideoBlock,
[NODE_TYPES.AUDIO]: NodeAudioImageBlock,
}; };
export const NODE_INLINES: INodeComponents = { export const NODE_INLINES: INodeComponents = {