Add service with instruction on how to download videos outside of ass…

…istant
AFP-Medialab · Jul 26, 2024 · 062c065 · 062c065
1 parent 7708efb
commit 062c065
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 29 deletions.
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -29,6 +29,11 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
+  timeout: 60 * 1000,
+  globalTimeout: 60 * 1000,
+  expect: {
+    timeout: 60 * 1000,
+  },
 
   /* Configure projects for major browsers */
   projects: [

diff --git a/src/components/NavBar/images/tools/fileDownload.png b/src/components/NavBar/images/tools/fileDownload.png
diff --git a/src/components/NavItems/Assistant/AssistantRuleBook.jsx b/src/components/NavItems/Assistant/AssistantRuleBook.jsx
@@ -6,6 +6,7 @@ import metadataIconOff from "../../NavBar/images/tools/metadataOff.png";
 import videoRightsIconOff from "../../NavBar/images/tools/copyrightOff.png";
 import forensicIconOff from "../../NavBar/images/tools/forensic_logoOff.png";
 import videoIconOff from "../../NavBar/images/tools/video_logoOff.png";
+import downloadIconOff from "../../NavBar/images/tools/fileDownload.png";
 
 export const NE_SUPPORTED_LANGS = ["en", "pt", "fr", "de", "el", "es", "it"];
 
@@ -138,8 +139,6 @@ export const ASSISTANT_ACTIONS = [
     linksAccepted: [
       KNOWN_LINKS.YOUTUBE,
       KNOWN_LINKS.FACEBOOK,
-      KNOWN_LINKS.DAILYMOTION,
-      KNOWN_LINKS.VIMEO,
       KNOWN_LINKS.YOUTUBE,
       KNOWN_LINKS.YOUTUBESHORTS,
       KNOWN_LINKS.LIVELEAK,
@@ -223,14 +222,48 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "assistant_video_download_action",
     icon: videoIconOff,
-    linksAccepted: [KNOWN_LINKS.TELEGRAM, KNOWN_LINKS.FACEBOOK],
+    linksAccepted: [
+      KNOWN_LINKS.TELEGRAM,
+      KNOWN_LINKS.FACEBOOK,
+      KNOWN_LINKS.TWITTER,
+    ],
     cTypes: [CONTENT_TYPE.VIDEO],
     exceptions: [],
     useInputUrl: false,
     text: "assistant_video_download_action_description",
     tsvPrefix: "assistant_video",
     download: true,
   },
+  {
+    title: "assistant_video_download_generic",
+    icon: downloadIconOff,
+    linksAccepted: [
+      KNOWN_LINKS.YOUTUBESHORTS,
+      KNOWN_LINKS.INSTAGRAM,
+      KNOWN_LINKS.FACEBOOK,
+      KNOWN_LINKS.VK,
+      KNOWN_LINKS.VIMEO,
+      KNOWN_LINKS.LIVELEAK,
+      KNOWN_LINKS.DAILYMOTION,
+    ],
+    cTypes: [CONTENT_TYPE.VIDEO],
+    exceptions: [],
+    useInputUrl: false,
+    text: "assistant_video_download_generic_description",
+    tsvPrefix: "assistant_video",
+    path: null,
+  },
+  {
+    title: "assistant_video_download_tiktok",
+    icon: downloadIconOff,
+    linksAccepted: [KNOWN_LINKS.TIKTOK],
+    cTypes: [CONTENT_TYPE.VIDEO],
+    exceptions: [],
+    useInputUrl: false,
+    text: "assistant_video_download_tiktok_description",
+    tsvPrefix: "assistant_video",
+    path: null,
+  },
 ];
 
 export const selectCorrectActions = (

diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantProcessUrlActions.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantProcessUrlActions.jsx
@@ -36,7 +36,9 @@ const AssistantProcessUrlActions = () => {
       dl.setAttribute("href", resultUrl);
       dl.setAttribute("download", "");
       dl.click();
-    } else if (resultUrl != null) {
+    } else if (action.path === null) {
+      return; // Do nothing if path is null
+    } else if (resultUrl !== null) {
       navigate(
         "/app/" +
           action.path +
@@ -85,7 +87,13 @@ const AssistantProcessUrlActions = () => {
                     }
                     secondary={
                       <Typography color={"textSecondary"} component={"span"}>
-                        <Box fontStyle="italic">{keyword(action.text)}</Box>
+                        <Box fontStyle="italic">
+                          <div
+                            dangerouslySetInnerHTML={{
+                              __html: keyword(action.text),
+                            }}
+                          ></div>
+                        </Box>
                       </Typography>
                     }
                   />

diff --git a/tests/e2e/assistant.spec.js b/tests/e2e/assistant.spec.js
@@ -1,24 +1,6 @@
 import { test, expect } from './fixtures';
 
 
-// test('example test', async ({ page }) => {
-//   await page.goto('https://example.com');
-//   await expect(page.locator('body')).toHaveText('Changed by my-extension');
-// });
-
-test('Assstant page', async ({ page, extensionId }) => {
-  // Navigate to the assistant page
-  await page.goto(`chrome-extension://${extensionId}/popup.html#/app/assistant/`);
-  // Accept local storage usage
-  await page.getByText("Accept").click();
-  await expect(page.getByTestId("url-media-results")).not.toBeVisible();
-  await page.getByTestId("assistant-webpage-link").click();
-  await page.locator("[data-testid='assistant-url-selected-input'] input").fill("https://www.youtube.com/watch?v=WaaL75G0qu0");
-  await page.getByTestId("assistant-url-selected-analyse-btn").click();
-  await expect(page.getByTestId("url-media-results")).toBeVisible();
-
-});
-
 const MediaType = {
   video: "video",
   image: "image"
@@ -41,31 +23,60 @@ const MediaServices = {
   forensic: "navbar_forensic",
   ocr: "navbar_ocr",
   videoDownload: "assistant_video_download_action",
+  videoDownloadGeneric: "assistant_video_download_generic",
+  videoDownloadTiktok: "assistant_video_download_tiktok",
 };
 
 [
+  // Twitter image post
+  {
+    url: "https://twitter.com/vesinfiltro/status/1253122594976468993/photo/1",
+    mediaType: MediaType.image,
+    services: [MediaServices.analysisImage, MediaServices.magnifier, MediaServices.forensic, MediaServices.ocr]
+  },
+  // Twitter video post
+  {
+    url: "https://twitter.com/NatGeo/status/1334635273888514048/video/1",
+    mediaType: MediaType.video,
+    mediaStatus: MediaVideoStatus.noEmbed,
+    services: [MediaServices.metadata, MediaServices.videoDownload]
+  },
   // Youtube video
   {
     url: "https://www.youtube.com/watch?v=UXrkN0iQmZQ",
     mediaType: MediaType.video,
     mediaStatus: MediaVideoStatus.iframe,
     services: [MediaServices.analysisVideo, MediaServices.keyframes, MediaServices.thumbnails, MediaServices.videoRights]
   },
+  // Youtube shorts
+  {
+    url: "https://www.youtube.com/shorts/RMGOds6SxF0",
+    mediaType: MediaType.video,
+    mediaStatus: MediaVideoStatus.noEmbed,
+    services: [MediaServices.videoDownloadGeneric]
+  },
   // Facebook post with video
   {
     url: "https://www.facebook.com/natgeo/videos/10157990199633951",
     videoGridIndex: 0,
     mediaType: MediaType.video,
     mediaStatus: MediaVideoStatus.video,
-    services: [MediaServices.analysisVideo, MediaServices.keyframes, MediaServices.videoDownload]
+    services: [MediaServices.analysisVideo, MediaServices.keyframes, MediaServices.videoDownload, MediaServices.videoDownloadGeneric]
   },
   // Telegram post with video
   {
-    url: "https://t.me/disclosetv/13970",
+    url: "https://t.me/WeAreBREITBART/13745",
     mediaType: MediaType.video,
     mediaStatus: MediaVideoStatus.video,
     services: [MediaServices.metadata, MediaServices.videoDownload]
   },
+  // Telegram post with video - Fails, goes to the group page
+  // {
+  //   url: "https://t.me/disclosetv/13970",
+  //   mediaType: MediaType.video,
+  //   mediaStatus: MediaVideoStatus.video,
+  //   services: [MediaServices.metadata, MediaServices.videoDownload]
+  // },
   // Instagram post with an image
   {
     url: "https://www.instagram.com/p/CI2b-3usJoH/",
@@ -77,8 +88,58 @@ const MediaServices = {
     url: "https://www.instagram.com/p/C8JwcyOiFDD/",
     mediaType: MediaType.video,
     mediaStatus: MediaVideoStatus.noEmbed,
-    services: []
-  }
+    services: [MediaServices.videoDownloadGeneric]
+  },
+  // TikTok video post
+  {
+    url: "https://www.tiktok.com/@deeptomcruise/video/7223086851236646149",
+    mediaType: MediaType.video,
+    mediaStatus: MediaVideoStatus.noEmbed,
+    services: [MediaServices.videoDownloadTiktok]
+  },
+  // VK link with images
+  {
+    url: "https://vk.com/wall-57424472_432185",
+    mediaType: MediaType.image,
+    imageGridIndex: 0,
+    services: [MediaServices.magnifier, MediaServices.metadata, MediaServices.forensic, MediaServices.ocr]
+  },
+  // VK link with embedded video
+  {
+    url: "https://vk.com/video-221416054_456296074",
+    mediaType: MediaType.video,
+    mediaStatus: MediaVideoStatus.noEmbed,
+    services: [MediaServices.videoDownloadGeneric]
+  },
+  // Vimeo video post
+  {
+    url: "https://vimeo.com/389685467",
+    mediaType: MediaType.video,
+    mediaStatus: MediaVideoStatus.iframe,
+    services: [MediaServices.videoDownloadGeneric]
+  },
+  // Dailymotion video post
+  {
+    url: "https://www.dailymotion.com/video/x91gv4a",
+    mediaType: MediaType.video,
+    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}) => {
     test(`Test assistant media services for url: ${url}`, async ({ page, extensionId }) => {
 
@@ -96,7 +157,7 @@ const MediaServices = {
       await page.getByTestId("assistant-url-selected-analyse-btn").click();
 
       // Expecting a media post with images or video
-      await expect(page.getByTestId("url-media-results")).toBeVisible({timeout: 20000});
+      await expect(page.getByTestId("url-media-results")).toBeVisible();
 
       // If multiple images/videos exist, click on the media grid first
       if(Number.isInteger(videoGridIndex))
@@ -130,7 +191,7 @@ const MediaServices = {
 
       // Checks that expected services are shown
       for( const serviceId of services){
-        await expect(page.getByTestId(serviceId)).toBeVisible({timeout: 10000});
+        await expect(page.getByTestId(serviceId)).toBeVisible();
       }
 
       // Ensure disabled services are not showing