Various video services fix and added e2e testing

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: [

src/components/NavItems/Assistant/AssistantRuleBook.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import analysisIconOff from "../../NavBar/images/tools/video_logoOff.png";
 import keyframesIconOff from "../../NavBar/images/tools/keyframesOff.png";
 import thumbnailsIconOff from "../../NavBar/images/tools/youtubeOff.png";
@@ -6,6 +7,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 DownloadIcon from "@mui/icons-material/Download";
 
 export const NE_SUPPORTED_LANGS = ["en", "pt", "fr", "de", "el", "es", "it"];
 
@@ -113,11 +115,7 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "navbar_analysis_video",
     icon: analysisIconOff,
-    linksAccepted: [
-      KNOWN_LINKS.YOUTUBE,
-      KNOWN_LINKS.FACEBOOK,
-      KNOWN_LINKS.TWITTER,
-    ],
+    linksAccepted: [KNOWN_LINKS.YOUTUBE, KNOWN_LINKS.FACEBOOK],
     cTypes: [CONTENT_TYPE.VIDEO],
     exceptions: [],
     useInputUrl: true,
@@ -142,14 +140,10 @@ export const ASSISTANT_ACTIONS = [
     linksAccepted: [
       KNOWN_LINKS.YOUTUBE,
       KNOWN_LINKS.FACEBOOK,
-      KNOWN_LINKS.TWITTER,
-      KNOWN_LINKS.DAILYMOTION,
-      KNOWN_LINKS.VIMEO,
       KNOWN_LINKS.YOUTUBE,
       KNOWN_LINKS.YOUTUBESHORTS,
       KNOWN_LINKS.LIVELEAK,
       KNOWN_LINKS.OWN,
-      KNOWN_LINKS.INSTAGRAM,
     ],
     cTypes: [CONTENT_TYPE.VIDEO],
     exceptions: [],
@@ -172,7 +166,7 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "navbar_magnifier",
     icon: magnifierIconOff,
-    linksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
+    processLinksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
     cTypes: [CONTENT_TYPE.IMAGE],
     exceptions: [],
     useInputUrl: false,
@@ -183,7 +177,7 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "navbar_metadata",
     icon: metadataIconOff,
-    linksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
+    processLinksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
     cTypes: [CONTENT_TYPE.IMAGE, CONTENT_TYPE.VIDEO],
     exceptions: [
       /(pbs.twimg.com)|(youtu.be|youtube)|(instagram)|(fbcdn.net)|(vimeo)|(tiktok.com)/,
@@ -196,11 +190,7 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "navbar_rights",
     icon: videoRightsIconOff,
-    linksAccepted: [
-      KNOWN_LINKS.YOUTUBE,
-      KNOWN_LINKS.FACEBOOK,
-      KNOWN_LINKS.TWITTER,
-    ],
+    linksAccepted: [KNOWN_LINKS.YOUTUBE],
     cTypes: [CONTENT_TYPE.VIDEO],
     exceptions: [],
     useInputUrl: true,
@@ -211,7 +201,7 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "navbar_forensic",
     icon: forensicIconOff,
-    linksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
+    processLinksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
     cTypes: [CONTENT_TYPE.IMAGE],
     exceptions: [],
     useInputUrl: false,
@@ -222,7 +212,7 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "navbar_ocr",
     icon: forensicIconOff,
-    linksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
+    processLinksAccepted: [KNOWN_LINKS.MISC, KNOWN_LINKS.OWN],
     cTypes: [CONTENT_TYPE.IMAGE],
     exceptions: [],
     useInputUrl: false,
@@ -233,14 +223,48 @@ export const ASSISTANT_ACTIONS = [
   {
     title: "assistant_video_download_action",
     icon: videoIconOff,
-    linksAccepted: [KNOWN_LINKS.TELEGRAM, KNOWN_LINKS.MISC],
+    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: <DownloadIcon color="disabled" fontSize="large" />,
+    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: <DownloadIcon color="disabled" fontSize="large" />,
+    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 = (
@@ -251,12 +275,10 @@ export const selectCorrectActions = (
 ) => {
   let possibleActions = ASSISTANT_ACTIONS.filter(
     (action) =>
-      ((action.useInputUrl &&
-        action.linksAccepted.includes(inputUrlType) &&
-        action.cTypes.includes(contentType)) ||
-        (!action.useInputUrl &&
-          action.linksAccepted.includes(processUrlType) &&
-          action.cTypes.includes(contentType))) &&
+      (!action.linksAccepted || action.linksAccepted.includes(inputUrlType)) &&
+      (!action.processLinksAccepted ||
+        action.processLinksAccepted.includes(processUrlType)) &&
+      action.cTypes.includes(contentType) &&
       (action.exceptions.length === 0 || !processUrl.match(action.exceptions)),
   );
   return possibleActions;

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantImageResult.jsx

@@ -32,6 +32,7 @@ const AssistantImageResult = () => {
           height={"100%"}
           alt={processUrl}
           width={"100%"}
+          data-testid="assistant-media-image"
         />
       </CardMedia>
       <CardActions>

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 +
@@ -70,19 +72,31 @@ const AssistantProcessUrlActions = () => {
               <Card className={classes.assistantHover} variant={"outlined"}>
                 <ListItem onClick={() => handleClick(action)}>
                   <ListItemAvatar>
-                    <Avatar variant={"square"} src={action.icon} />
+                    {typeof action.icon === "string" && (
+                      <Avatar variant={"square"} src={action.icon} />
+                    )}
+                    {typeof action.icon !== "string" && action.icon}
                   </ListItemAvatar>
                   <ListItemText
                     primary={
                       <Typography component={"span"}>
-                        <Box fontWeight="fontWeightBold">
+                        <Box
+                          fontWeight="fontWeightBold"
+                          data-testid={action.title}
+                        >
                           {keyword(action.title)}
                         </Box>
                       </Typography>
                     }
                     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>
                     }
                   />

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantVideoResult.jsx

@@ -51,6 +51,11 @@ const AssistantVideoResult = () => {
     let stringToMatch = "";
     let positionOne = 0;
 
+    // Don't embed blob links, they are url for cached in-memory video
+    if (embedURL.startsWith("blob:")) {
+      return null;
+    }
+
     switch (input_url_type) {
       case KNOWN_LINKS.YOUTUBE:
         if (!embedURL.includes("/embed/")) {
@@ -83,6 +88,9 @@ const AssistantVideoResult = () => {
           "embed/" +
           embedURL.slice(positionOne);
         break;
+      case KNOWN_LINKS.TIKTOK:
+        embedURL = null;
+        break;
       default:
         return embedURL;
     }
@@ -95,16 +103,18 @@ const AssistantVideoResult = () => {
 
   return (
     <Card variant={"outlined"}>
-      <CardMedia>
+      <CardMedia data-testid="assistant-media-video-container">
         {useIframe() && preprocessLinkForEmbed(processUrl) && (
-          <Iframe
-            hidden={downloadVideoFound()}
-            frameBorder="0"
-            url={preprocessLinkForEmbed(processUrl)}
-            allow="fullscreen"
-            height="400"
-            width="100%"
-          />
+          <div data-testid="assistant-media-video-iframe">
+            <Iframe
+              hidden={downloadVideoFound()}
+              frameBorder="0"
+              url={preprocessLinkForEmbed(processUrl)}
+              allow="fullscreen"
+              height="400"
+              width="100%"
+            />
+          </div>
         )}
         {!useIframe() && preprocessLinkForEmbed(processUrl) && (
           <video
@@ -113,6 +123,7 @@ const AssistantVideoResult = () => {
             controls={true}
             height="400"
             width="100%"
+            data-testid="assistant-media-video-tag"
           />
         )}
         {!preprocessLinkForEmbed(processUrl) && (
@@ -125,7 +136,9 @@ const AssistantVideoResult = () => {
               justifyContent: "center",
             }}
           >
-            <div>{keyword("embedding_not_supported")}</div>
+            <div data-testid="assistant-media-video-noembed">
+              {keyword("embedding_not_supported")}
+            </div>
           </div>
         )}
       </CardMedia>
@@ -138,7 +151,6 @@ const AssistantVideoResult = () => {
           {keyword("download_video")}
         </Typography>
       </CardMedia>
-
       <CardActions>
         <ImageIcon color={"action"} />
         <Link

src/components/NavItems/Assistant/AssistantScrapeResults/assistantUtils.jsx

@@ -10,34 +10,34 @@ function treeMapToElementsRecursive(
   if ("span" in treeElem) {
     const span = treeElem.span;
     if (spanHighlightIndices === null) {
-      console.log("No span highlight: ", text.substring(span.start, span.end));
+      // 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));
+      // console.log("Span highlight: ", text.substring(span.start, span.end));
       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],
-        );
+        // 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,
-          );
+          // console.log(
+          //   "Found lapping span ",
+          //   span.start,
+          //   span.end,
+          //   hSpanStart,
+          //   hSpanEnd,
+          // );
 
           // If span doesn't start before the current index
           if (hSpanStart > currentIndex) {
@@ -48,15 +48,15 @@ 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));
+            // console.log("Wrapping: ", text.substring(boundedStart, boundedEnd));
             childElems.push(
               wrapFunc(text.substring(boundedStart, boundedEnd), hSpan),
             );
           } else {
-            console.log(
-              "Not wrapping: ",
-              text.substring(boundedStart, boundedEnd),
-            );
+            // console.log(
+            //   "Not wrapping: ",
+            //   text.substring(boundedStart, boundedEnd),
+            // );
             childElems.push(text.substring(boundedStart, boundedEnd));
           }
 

src/components/Shared/ImageGridList/ImageGridList.jsx

@@ -36,13 +36,15 @@ const ImageImageList = (props) => {
                   onClick={() => props.handleClick(props.list[index])}
                   onLoad={props.setLoading}
                   style={{ width: "100%", height: "auto" }}
+                  data-testid={"assistant-media-grid-image-" + index}
                 />
               ) : (
                 <img
                   src={tile}
                   alt={tile}
                   onClick={() => props.handleClick(props.list[index])}
                   style={{ width: "100%", height: "auto" }}
+                  data-testid={"assistant-media-grid-image-" + index}
                 />
               )}
             </Grid>

src/components/Shared/VideoGridList/VideoGridList.jsx

@@ -41,6 +41,7 @@ const VideoImageList = (props) => {
               onClick={() => {
                 props.handleClick(tile);
               }}
+              data-testid={"assistant-media-grid-video-" + index}
             >
               {tile}
             </Link>