aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/components/Message.css51
-rw-r--r--vnext/src/components/Message.js21
-rw-r--r--vnext/src/utils/embed.js4
3 files changed, 70 insertions, 6 deletions
diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css
index 55bed2f2..1522c166 100644
--- a/vnext/src/components/Message.css
+++ b/vnext/src/components/Message.css
@@ -158,3 +158,54 @@ blockquote {
font-size: x-large;
margin: 0;
}
+
+.embedContainer {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ padding: 12px;
+ margin: 30px -3px 15px -3px;
+}
+.embedContainer > * {
+ box-sizing: border-box;
+ flex-grow: 1;
+ margin: 3px;
+ min-width: 49%;
+}
+.embedContainer > .compact {
+ flex-grow: 0;
+}
+.embedContainer .picture img {
+ display: block;
+}
+.embedContainer img,
+.embedContainer video {
+ max-width: 100%;
+ max-height: 80vh;
+}
+.embedContainer > .audio,
+.embedContainer > .youtube {
+ min-width: 90%;
+}
+.embedContainer audio {
+ width: 100%;
+}
+.embedContainer iframe {
+ overflow: hidden;
+ resize: vertical;
+ display: block;
+}
+.msg-cont .nsfw .embedContainer img,
+.msg-cont .nsfw .embedContainer video,
+.msg-cont .nsfw .embedContainer iframe,
+.msg-cont .nsfw .ir img {
+ opacity: 0.1;
+}
+.msg-cont .nsfw .embedContainer img:hover,
+.msg-cont .nsfw .embedContainer video:hover,
+.msg-cont .nsfw .embedContainer iframe:hover,
+.msg-cont .nsfw .ir img:hover {
+ opacity: 1;
+}
+
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index e27e057b..6c78b4bc 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import moment from 'moment';
@@ -8,14 +8,24 @@ import Icon from './Icon';
import Avatar from './Avatar';
import { UserLink } from './UserInfo';
-import { format } from '../utils/embed';
+import { format, embedUrls } from '../utils/embed';
import './Message.css';
-function Message({ data, visitor, children, ...rest }) {
+export default function Message({ data, visitor, children, ...rest }) {
const isCode = (data.tags || []).indexOf('code') >= 0;
const likesSummary = data.likes ? `${data.likes}` : 'Recommend';
const commentsSummary = data.replies ? `${data.replies}` : 'Comment';
+ const embedRef = useRef();
+ const msgRef = useRef();
+ useEffect(() => {
+ if (msgRef.current) {
+ embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
+ if (!embedRef.current.hasChildNodes()) {
+ embedRef.current.style.display = 'none';
+ }
+ }
+ }, []);
return (
<div className="msg-cont">
<Recommendations forMessage={data} />
@@ -34,7 +44,7 @@ function Message({ data, visitor, children, ...rest }) {
</header>
{
data.body &&
- <div className="msg-txt">
+ <div className="msg-txt" ref={msgRef}>
<MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid, isCode) }} />
</div>
}
@@ -44,6 +54,7 @@ function Message({ data, visitor, children, ...rest }) {
<img src={`//i.juick.com/photos-512/${data.mid}.${data.attach}`} alt="" /></a>
</p>
}
+ <div className="embedContainer" ref={embedRef} />
<nav className="l">
{visitor.uid === data.user.uid ? (
<Link to={{ pathname: `/${data.user.uname}/${data.mid}` }} className="a-like msg-button">
@@ -75,8 +86,6 @@ function Message({ data, visitor, children, ...rest }) {
);
}
-export default React.memo(Message);
-
function MessageContainer({ isCode, data }) {
return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<p dangerouslySetInnerHTML={data} />);
}
diff --git a/vnext/src/utils/embed.js b/vnext/src/utils/embed.js
index d4cbab8e..9767b121 100644
--- a/vnext/src/utils/embed.js
+++ b/vnext/src/utils/embed.js
@@ -320,6 +320,10 @@ function embedLinksToPost() {
});
}
+export function embedUrls(urls, embedContainer) {
+ embedLinks(urls, embedContainer);
+}
+
/**
* Embed all the links in all messages/replies on the page.
*/