mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
better youtube embeds
This commit is contained in:
Fedor Katurov
parent
b87487ed1f
commit
ff249e0107
5 changed files with 96 additions and 10 deletions
|
|
@ -1,6 +1,8 @@
|
|||
import React, { FC, memo } from 'react';
|
||||
import React, { FC, memo, useMemo } from 'react';
|
||||
import { ICommentBlock } from '~/constants/comment';
|
||||
import styles from './styles.scss';
|
||||
import { getYoutubeTitle } from '~/utils/dom';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
|
||||
interface IProps {
|
||||
block: ICommentBlock;
|
||||
|
|
@ -8,14 +10,28 @@ interface IProps {
|
|||
|
||||
const CommentEmbedBlock: FC<IProps> = memo(({ block }) => {
|
||||
const link = block.content.match(
|
||||
/(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gi
|
||||
/(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gi
|
||||
);
|
||||
|
||||
const preview = useMemo(() => {
|
||||
const match =
|
||||
block.content &&
|
||||
block.content.match(
|
||||
/http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/
|
||||
);
|
||||
|
||||
return match && match[1] ? `http://img.youtube.com/vi/${match[1]}/maxresdefault.jpg` : null;
|
||||
}, [block.content]);
|
||||
|
||||
return (
|
||||
<div className={styles.text}>
|
||||
<a href={link[0]} target="_blank">
|
||||
{link[0]}
|
||||
</a>
|
||||
<div className={styles.embed}>
|
||||
<a href={link[0]} target="_blank" />
|
||||
|
||||
<div className={styles.preview}>
|
||||
<div style={{ backgroundImage: `url("${preview}")` }}>
|
||||
<div className={styles.backdrop}>{link[0]}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,66 @@
|
|||
.text {
|
||||
.embed {
|
||||
padding: 0 $gap;
|
||||
height: $comment_height;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: 50% 50% no-repeat/cover;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 0 0 $gap 0;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
}
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparentize(black, 0.5);
|
||||
z-index: 15;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include can_backdrop {
|
||||
background: transparentize(black, 0.3);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
padding: 0 $gap $gap / 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export const COMMENT_BLOCK_TYPES = {
|
|||
export const COMMENT_BLOCK_DETECTORS = [
|
||||
{
|
||||
type: COMMENT_BLOCK_TYPES.EMBED,
|
||||
test: /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gim,
|
||||
test: /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gim,
|
||||
},
|
||||
{
|
||||
type: COMMENT_BLOCK_TYPES.MARK,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { FC } from "react";
|
||||
import React, { FC } from 'react';
|
||||
|
||||
const Sprites: FC<{}> = () => (
|
||||
<svg width={0} height={0} viewBox="0 0 24 24">
|
||||
|
|
@ -191,6 +191,13 @@ const Sprites: FC<{}> = () => (
|
|||
<path fill="none" d="M0 0h24v24H0V0z" />
|
||||
<path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z" />
|
||||
</g>
|
||||
|
||||
<g id="youtube" stroke="none">
|
||||
<path fill="none" d="M0 0h24v24H0V0z" />
|
||||
<g transform="scale(0.1) translate(-30 -30)">
|
||||
<path d="m 149.9375,79.222656 c 0,0 -63.218849,5.9e-5 -79.085938,4.123047 -8.495787,2.373802 -15.491408,9.3695 -17.865234,17.990237 -4.122953,15.8671 -4.123047,48.72656 -4.123047,48.72656 0,0 9.4e-5,32.9842 4.123047,48.60156 2.373826,8.62062 9.244506,15.49138 17.865234,17.86524 15.99203,4.24788 79.085938,4.24804 79.085938,4.24804 0,0 63.34418,-5e-5 79.21094,-4.12304 8.62079,-2.37381 15.49133,-9.11966 17.74023,-17.86524 4.24793,-15.74232 4.24805,-48.60156 4.24805,-48.60156 0,0 0.12484,-32.98446 -4.24805,-48.85156 -2.2489,-8.620737 -9.11944,-15.491334 -17.74023,-17.740237 -15.86676,-4.372847 -79.21094,-4.373047 -79.21094,-4.373047 z m -20.11523,40.480464 52.59961,30.35938 -52.59961,30.23438 0,-60.59376 z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export const formatText = (text: string): string =>
|
|||
? ''
|
||||
: text
|
||||
.replace(
|
||||
/(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gim,
|
||||
/(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gim,
|
||||
'\n$1\n'
|
||||
)
|
||||
.replace(/\n{1,}/gim, '\n')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue