Fix display of mastodon posts

AFP-Medialab · Jul 26, 2024 · 5f2ff10 · 5f2ff10
1 parent eedfc10
commit 5f2ff10
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
-    "@playwright/experimental-ct-react": "^1.43.1",
+    "@playwright/experimental-ct-react": "^1.45.3",
     "@playwright/test": "^1.43.1",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^18.18.4",

diff --git 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/AssistantTextResult.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantTextResult.jsx
@@ -69,7 +69,7 @@ const AssistantTextResult = () => {
 
   return (
     <Grid item xs={12}>
-      <Card>
+      <Card data-testid="assistant-text-scraped-text">
         <CardHeader
           className={classes.assistantCardHeader}
           title={keyword("text_title")}

diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/assistantUtils.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/assistantUtils.jsx
@@ -8,55 +8,38 @@ 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));
           }
 
           const boundedStart =
             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
@@ -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
@@ -3,7 +3,8 @@ import { test, expect } from './fixtures';
 
 const MediaType = {
   video: "video",
-  image: "image"
+  image: "image",
+  none: "none",
 };
 
 const MediaVideoStatus = {
@@ -27,6 +28,8 @@ const MediaServices = {
   videoDownloadTiktok: "assistant_video_download_tiktok",
 };
 
+
+
 [
   // Twitter image post
   {
@@ -125,22 +128,21 @@ 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: []
-  // },
-].forEach(({url, videoGridIndex, imageGridIndex, mediaType, mediaStatus, 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: [MediaServices.videoDownload, MediaServices.metadata]
+  },
+].forEach(({url, videoGridIndex, imageGridIndex, mediaType, mediaStatus, services, hasScrapedText = true}) => {
     test(`Test assistant media services for url: ${url}`, async ({ page, extensionId }) => {
 
       // Navigate to the assistant page
@@ -166,43 +168,58 @@ const MediaServices = {
       if(Number.isInteger(imageGridIndex))
         await page.getByTestId("assistant-media-grid-image-"+imageGridIndex).click();
 
-      // If expecting an image, check that the image is shown
-      if(mediaType === MediaType.image){
-        await expect(page.getByTestId("assistant-media-image")).toBeVisible();
-      }
-
-      if(mediaType === MediaType.video){
-        await expect(page.getByTestId("assistant-media-video-container")).toBeVisible();
-        if(mediaStatus !== null && mediaStatus !== undefined){
-          switch (mediaStatus) {
-            case MediaVideoStatus.iframe:
-              await expect(page.getByTestId("assistant-media-video-iframe")).toBeVisible();
-              break;
-            case MediaVideoStatus.video:
-              await expect(page.getByTestId("assistant-media-video-tag")).toBeVisible();
-              break;
-            case MediaVideoStatus.noEmbed:
-              await expect(page.getByTestId("assistant-media-video-noembed")).toBeVisible();
-              break;
 
+      // Check that media exists for image and video posts and that all expected services are shown
+      switch(mediaType){
+        case MediaType.image:
+          await expect(page.getByTestId("assistant-media-image")).toBeVisible();
+          await checkMediaServices(page, services)
+          break;
+        case MediaType.video:
+          await expect(page.getByTestId("assistant-media-video-container")).toBeVisible();
+          if(mediaStatus !== null && mediaStatus !== undefined){
+            switch (mediaStatus) {
+              case MediaVideoStatus.iframe:
+                await expect(page.getByTestId("assistant-media-video-iframe")).toBeVisible();
+                break;
+              case MediaVideoStatus.video:
+                await expect(page.getByTestId("assistant-media-video-tag")).toBeVisible();
+                break;
+              case MediaVideoStatus.noEmbed:
+                await expect(page.getByTestId("assistant-media-video-noembed")).toBeVisible();
+                break;
+
+            }
           }
-        }
+          await checkMediaServices(page, services)
+          break;
+        case MediaType.none:
+          await expect(page.getByTestId("assistant-media-video-container")).not.toBeVisible();
+          break;
       }
 
-      // Checks that expected services are shown
-      for( const serviceId of services){
-        await expect(page.getByTestId(serviceId)).toBeVisible();
+      if(hasScrapedText){
+        await expect(page.getByTestId("assistant-text-scraped-text")).toBeVisible();
       }
 
-      // Ensure disabled services are not showing
-      for( const serviceKey in MediaServices){
-        const serviceId = MediaServices[serviceKey];
-        if(!services.includes(serviceId))
-          await expect(page.getByTestId(serviceId)).not.toBeVisible();
-      }
 
     });
   }
 );
 
+async function checkMediaServices(page, availableServices){
+  // Checks that expected services are shown
+  for( const serviceId of availableServices){
+    await expect(page.getByTestId(serviceId)).toBeVisible();
+  }
+
+  // Ensure disabled services are not showing
+  for( const serviceKey in MediaServices){
+    const serviceId = MediaServices[serviceKey];
+    if(!availableServices.includes(serviceId))
+      await expect(page.getByTestId(serviceId)).not.toBeVisible();
+  }
+
+}
+