From 7e27cddb1824cc5586f9e6956e6a55a6371c7e18 Mon Sep 17 00:00:00 2001
From: Twin Karmakharm <t.karmakharm@sheffield.ac.uk>
Date: Fri, 19 Jul 2024 17:41:39 +0100
Subject: [PATCH] Fix display of mastodon posts

---
 .../NavItems/Assistant/AssistantRuleBook.jsx  |  1 +
 .../AssistantScrapeResults/assistantUtils.jsx | 40 +++++++------------
 src/redux/sagas/assistantSaga.jsx             |  1 +
 tests/e2e/assistant.spec.js                   | 29 +++++++-------
 4 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/components/NavItems/Assistant/AssistantRuleBook.jsx b/src/components/NavItems/Assistant/AssistantRuleBook.jsx
index 5a628ffc2..8683d7028 100644
--- a/src/components/NavItems/Assistant/AssistantRuleBook.jsx
+++ b/src/components/NavItems/Assistant/AssistantRuleBook.jsx
@@ -227,6 +227,7 @@ export const ASSISTANT_ACTIONS = [
       KNOWN_LINKS.TELEGRAM,
       KNOWN_LINKS.FACEBOOK,
       KNOWN_LINKS.TWITTER,
+      KNOWN_LINKS.MASTODON,
     ],
     cTypes: [CONTENT_TYPE.VIDEO],
     exceptions: [],
diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/assistantUtils.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/assistantUtils.jsx
index deb09bfd5..ef6133303 100644
--- a/src/components/NavItems/Assistant/AssistantScrapeResults/assistantUtils.jsx
+++ b/src/components/NavItems/Assistant/AssistantScrapeResults/assistantUtils.jsx
@@ -8,39 +8,25 @@ function treeMapToElementsRecursive(
 ) {
   let childElems = [];
   if ("span" in treeElem) {
+    // If there's text in the node
+
     const span = treeElem.span;
     if (spanHighlightIndices === null) {
-      // console.log("No span highlight: ", text.substring(span.start, span.end));
       childElems.push(text.substring(span.start, span.end));
     } else {
-      // console.log("Span highlight: ", text.substring(span.start, span.end));
+      // If text span matches with indices for highlighting
+      // then try to wrap them in wrapFunc()
       let currentIndex = span.start;
       for (let i = 0; i < spanHighlightIndices.length; i++) {
         const hSpan = spanHighlightIndices[i];
-        // console.log(
-        //   "Matching span",
-        //   span.start,
-        //   span.end,
-        //   hSpan.indices[0],
-        //   hSpan.indices[1],
-        // );
         const hSpanStart = hSpan.indices[0];
         const hSpanEnd = hSpan.indices[1];
         if (
           (span.start <= hSpanStart && hSpanStart <= span.end) ||
           (span.start <= hSpanEnd && hSpanEnd <= span.end)
         ) {
-          //If there's an overlap
-          // console.log(
-          //   "Found lapping span ",
-          //   span.start,
-          //   span.end,
-          //   hSpanStart,
-          //   hSpanEnd,
-          // );
-
-          // If span doesn't start before the current index
           if (hSpanStart > currentIndex) {
+            // If span doesn't start before the current index, add unlighlighted text
             childElems.push(text.substring(currentIndex, hSpanStart));
           }
 
@@ -48,15 +34,12 @@ function treeMapToElementsRecursive(
             hSpanStart < span.start ? span.start : hSpanStart;
           const boundedEnd = hSpanEnd > span.end ? span.end : hSpanEnd;
           if (wrapFunc) {
-            // console.log("Wrapping: ", text.substring(boundedStart, boundedEnd));
+            // Add parts of text that needs to be wrapped in wrapFunc()
             childElems.push(
               wrapFunc(text.substring(boundedStart, boundedEnd), hSpan),
             );
           } else {
-            // console.log(
-            //   "Not wrapping: ",
-            //   text.substring(boundedStart, boundedEnd),
-            // );
+            // No wrapFunc(), inserting plaintext
             childElems.push(text.substring(boundedStart, boundedEnd));
           }
 
@@ -81,7 +64,14 @@ function treeMapToElementsRecursive(
       ),
     );
   }
-  return React.createElement(treeElem.tag, null, childElems);
+
+  //Collect attributes
+  let attributes = {};
+  if (treeElem.attributes) {
+    attributes = treeElem.attributes;
+  }
+
+  return React.createElement(treeElem.tag, attributes, childElems);
 }
 
 /**
diff --git a/src/redux/sagas/assistantSaga.jsx b/src/redux/sagas/assistantSaga.jsx
index 4d25451b4..d90c72db0 100644
--- a/src/redux/sagas/assistantSaga.jsx
+++ b/src/redux/sagas/assistantSaga.jsx
@@ -637,6 +637,7 @@ const filterAssistantResults = (
         videoList = scrapeResult.videos;
       }
       break;
+    case KNOWN_LINKS.MASTODON:
     case KNOWN_LINKS.TELEGRAM:
     case KNOWN_LINKS.VK:
       if (scrapeResult.images.length > 0) {
diff --git a/tests/e2e/assistant.spec.js b/tests/e2e/assistant.spec.js
index 60fb733f6..a775efaff 100644
--- a/tests/e2e/assistant.spec.js
+++ b/tests/e2e/assistant.spec.js
@@ -125,21 +125,20 @@ const MediaServices = {
     mediaStatus: MediaVideoStatus.iframe,
     services: [MediaServices.videoDownloadGeneric]
   },
-  // Mastodon issues will be addressed very soon!
-  // // Mastodon link with youtube video link
-  // {
-  //   url: "https://mstdn.social/@BBC/105203076554056414",
-  //   mediaType: MediaType.video,
-  //   mediaStatus: MediaVideoStatus.video,
-  //   services: []
-  // },
-  // // Mastodon link with embedded video
-  // {
-  //   url: "https://mstdn.social/@dtnsshow/112728823075224415",
-  //   mediaType: MediaType.video,
-  //   mediaStatus: MediaVideoStatus.video,
-  //   services: []
-  // },
+  // Mastodon link with youtube video link
+  {
+    url: "https://mstdn.social/@BBC/105203076554056414",
+    mediaType: MediaType.video,
+    mediaStatus: MediaVideoStatus.video,
+    services: []
+  },
+  // Mastodon link with embedded video
+  {
+    url: "https://mstdn.social/@dtnsshow/112728823075224415",
+    mediaType: MediaType.video,
+    mediaStatus: MediaVideoStatus.video,
+    services: []
+  },
 ].forEach(({url, videoGridIndex, imageGridIndex, mediaType, mediaStatus, services}) => {
     test(`Test assistant media services for url: ${url}`, async ({ page, extensionId }) => {