diff --git a/src/app/components/elements/EmbeddedPlayers/threespeak.jsx b/src/app/components/elements/EmbeddedPlayers/threespeak.jsx index 69698c22..1e609c95 100644 --- a/src/app/components/elements/EmbeddedPlayers/threespeak.jsx +++ b/src/app/components/elements/EmbeddedPlayers/threespeak.jsx @@ -2,7 +2,7 @@ import React from 'react'; /** * Regular expressions for detecting and validating provider URLs - * @type {{htmlReplacement: RegExp, main: RegExp, sanitize: RegExp, embedShorthand: RegExp, thumbnail: RegExp}} + * @type {{htmlReplacement: RegExp, main: RegExp, sanitize: RegExp, embedShorthand: RegExp, thumbnail: RegExp, thumbnail2: RegExp}} */ const regex = { // eslint-disable-next-line no-useless-escape @@ -11,8 +11,9 @@ const regex = { main: /(?:https?:\/\/(?:(?:3speak\.(?:online|co|tv)\/watch\?v=)|(?:3speak\.(?:online|co|tv)\/embed\?v=)))([A-Za-z0-9_\-\/.]+)(&.*)?/i, // eslint-disable-next-line no-useless-escape htmlReplacement: /<\/a>/i, - embedShorthand: /~~~ embed:(.*?) threespeak ~~~/, - thumbnail: /https:\/\/ipfs-3speak.b-cdn.net\/ipfs\/.[\w\d/]+/, + embedShorthand: /~~~ embed:(.*?)\/(.*?) threespeak ~~~/, + thumbnail: /~~~ embedthumbnail:(.*?) ~~~/, + thumbnail2: /https:\/\/ipfs-3speak.b-cdn.net\/ipfs\/.[\w\d/]+/, }; export default regex; @@ -126,7 +127,7 @@ export function extractMetadata(data) { fullId, url, canonical: url, - thumbnail: data.match(regex.thumbnail)[0] || null, + thumbnail: data.match(regex.thumbnail2) ? data.match(regex.thumbnail2)[0] : null, }; } @@ -142,7 +143,7 @@ export function embedNode(child, links, images) { const threespeak = extractMetadata(data); if (threespeak) { - child.data = data.replace(threespeak.url, `~~~ embed:${threespeak.thumbnail} threespeak ~~~`); + child.data = data.replace(threespeak.url, `~~~ embed:${threespeak.fullId} threespeak ~~~`); if (links) { links.add(threespeak.canonical); @@ -155,10 +156,11 @@ export function embedNode(child, links, images) { // Because we are processing 3speak embed player with the preprocessHtml() method below // extractMetadata won't be able to extract the thumbnail from the shorthand. // So we are handling thumbnail URL extraction differently. - const match = data.match(regex.embedShorthand); + const match = data.match(regex.thumbnail); if (match && images) { const imageUrl = `${match[1]}`; images.add(imageUrl); + child.data = data.replace(regex.thumbnail, ''); } } } catch (error) { @@ -181,7 +183,7 @@ export function preprocessHtml(child) { const threespeak = extractMetadata(child); if (threespeak) { // We save image url in thumbnail to access it later because the replaced embed removes the image from the html - child = child.replace(regex.htmlReplacement, `~~~ embed:${threespeak.thumbnail} threespeak ~~~`); + child = child.replace(regex.htmlReplacement, `~~~ embed:${threespeak.fullId} threespeak ~~~ ~~~ embedthumbnail:${threespeak.thumbnail} ~~~`); } } } catch (error) {