Update threespeak.jsx

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 href="(https?:\/\/3speak\.(?:online|co|tv)\/watch\?v=([A-Za-z0-9_\-\/.]+))".*<img.*?><\/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) {