Merge branch 'develop' into 'master'

Develop

See merge request hive/condenser!407

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}}
+ * @type {{htmlReplacement: RegExp, main: RegExp, sanitize: RegExp, embedShorthand: RegExp, thumbnail: RegExp}}
  */
 const regex = {
     // eslint-disable-next-line no-useless-escape
@@ -11,7 +11,8 @@ 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 ~~~/,
+    embedShorthand: /~~~ embed:(.*?) threespeak ~~~/,
+    thumbnail: /https:\/\/ipfs-3speak.b-cdn.net\/ipfs\/.[\w\d/]+/,
 };
 export default regex;
 
@@ -109,7 +110,7 @@ export function normalizeEmbedUrl(url) {
 /**
  * Extract the content ID and other metadata from the URL
  * @param data
- * @returns {null|{id: *, canonical: string, url: *}}
+ * @returns {null|{id: *, canonical: string, url: *, thumbnail: string}}
  */
 export function extractMetadata(data) {
     if (!data) return null;
@@ -125,7 +126,7 @@ export function extractMetadata(data) {
         fullId,
         url,
         canonical: url,
-        thumbnail: `https://img.3speakcontent.co/${id}/post.png`,
+        thumbnail: data.match(regex.thumbnail)[0] || null,
     };
 }
 
@@ -141,7 +142,7 @@ export function embedNode(child, links, images) {
         const threespeak = extractMetadata(data);
 
         if (threespeak) {
-            child.data = data.replace(threespeak.url, `~~~ embed:${threespeak.fullId} threespeak ~~~`);
+            child.data = data.replace(threespeak.url, `~~~ embed:${threespeak.thumbnail} threespeak ~~~`);
 
             if (links) {
                 links.add(threespeak.canonical);
@@ -156,7 +157,7 @@ export function embedNode(child, links, images) {
             // So we are handling thumbnail URL extraction differently.
             const match = data.match(regex.embedShorthand);
             if (match && images) {
-                const imageUrl = `https://img.3speakcontent.co/${match[2]}/post.png`;
+                const imageUrl = `${match[1]}`;
                 images.add(imageUrl);
             }
         }
@@ -179,7 +180,8 @@ export function preprocessHtml(child) {
             // to replace the image/anchor tag created by 3Speak dApp
             const threespeak = extractMetadata(child);
             if (threespeak) {
-                child = child.replace(regex.htmlReplacement, `~~~ embed:${threespeak.fullId} 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 ~~~`);
             }
         }
     } catch (error) {