LogalDeveloper/owncast
0
Fork 0
Code Activity

Remove in-line rendering of images by url

Browse Source
This commit is contained in:
Gabe Kangas
2021-03-14 12:08:32 -07:00
parent bf33d08384
commit 777de9fbf4
1 changed files with 5 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
webroot/js/components/chat/chat-message-view.js
View File

@@ -22,7 +22,7 @@ export default class ChatMessageView extends Component {
const { formattedMessage } = this.state; const { formattedMessage } = this.state;
const { formattedMessage: nextFormattedMessage } = nextState; const { formattedMessage: nextFormattedMessage } = nextState;
return (formattedMessage !== nextFormattedMessage); return formattedMessage !== nextFormattedMessage;
} }
async componentDidMount() { async componentDidMount() {
@@ -36,7 +36,6 @@ export default class ChatMessageView extends Component {
} }
} }
render() { render() {
const { message } = this.props; const { message } = this.props;
const { author, timestamp, visible } = message; const { author, timestamp, visible } = message;
@@ -66,10 +65,7 @@ export default class ChatMessageView extends Component {
title=${formattedTimestamp} title=${formattedTimestamp}
> >
<div class="message-content break-words w-full"> <div class="message-content break-words w-full">
<div <div style=${authorTextColor} class="message-author font-bold">
style=${authorTextColor}
class="message-author font-bold"
>
${author} ${author}
</div> </div>
<div <div
@@ -100,18 +96,18 @@ function highlightUsername(message, username) {
// https://github.com/julmot/mark.js/issues/115 // https://github.com/julmot/mark.js/issues/115
const node = document.createElement('span'); const node = document.createElement('span');
node.innerHTML = message; node.innerHTML = message;
return new Promise(res => { return new Promise((res) => {
new Mark(node).mark(username, { new Mark(node).mark(username, {
element: 'span', element: 'span',
className: 'highlighted px-1 rounded font-bold bg-orange-500', className: 'highlighted px-1 rounded font-bold bg-orange-500',
separateWordSearch: false, separateWordSearch: false,
accuracy: { accuracy: {
value: 'exactly', value: 'exactly',
limiters: [",", ".", "'", '?', '@'], limiters: [',', '.', "'", '?', '@'],
}, },
done() { done() {
res(node.innerHTML); res(node.innerHTML);
} },
}); });
}); });
} }
@@ -131,8 +127,6 @@ function getMessageWithEmbeds(message) {
embedText += getYoutubeEmbedFromID(youtubeID); embedText += getYoutubeEmbedFromID(youtubeID);
} else if (url.indexOf('instagram.com/p/') > -1) { } else if (url.indexOf('instagram.com/p/') > -1) {
embedText += getInstagramEmbedFromURL(url); embedText += getInstagramEmbedFromURL(url);
} else if (isImage(url)) {
embedText += getImageForURL(url);
} }
} }
@@ -174,15 +168,6 @@ function getInstagramEmbedFromURL(url) {
return `<iframe class="chat-embed instagram-embed" src="${urlObject.href}" frameborder="0" allowfullscreen></iframe>`; return `<iframe class="chat-embed instagram-embed" src="${urlObject.href}" frameborder="0" allowfullscreen></iframe>`;
} }
function isImage(url) {
const re = /\.(jpe?g|png|gif)$/i;
return re.test(url);
}
function getImageForURL(url) {
return `<a target="_blank" href="${url}"><img class="chat-embed embedded-image" src="${url}" /></a>`;
}
function isMessageJustAnchor(message, anchor) { function isMessageJustAnchor(message, anchor) {
return stripTags(message) === stripTags(anchor.innerHTML); return stripTags(message) === stripTags(anchor.innerHTML);
} }
@@ -217,5 +202,3 @@ function convertToMarkup(str = '') {
function stripTags(str) { function stripTags(str) {
return str.replace(/<\/?[^>]+(>|$)/g, ''); return str.replace(/<\/?[^>]+(>|$)/g, '');
} }