690 move the metadata tool to use the new exif reading library

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weverify-plugin",
-  "version": "0.84.1",
+  "version": "0.85",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -44,6 +44,7 @@
     "exif-js": "^2.3.0",
     "exifr": "^7.1.3",
     "file-saver": "^2.0.5",
+    "file-type": "^20.1.0",
     "history": "^5.3.0",
     "html2canvas": "^1.4.1",
     "i18next": "^23.15.1",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Fake news debunker by InVID & WeVerify",
-  "version": "0.84.1",
+  "version": "0.85",
   "description": "InVID WeVerify extension",
   "short_name": "Verification Plugin",
   "action": {

src/components/NavItems/tools/C2pa/Results/C2paResults.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { React, useEffect, useState } from "react";
 import { MapContainer, Marker, TileLayer } from "react-leaflet";
 import { useDispatch, useSelector } from "react-redux";
 

src/components/NavItems/tools/C2pa/components/AfpReverseSearchResults.jsx

@@ -1,19 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 
 import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Grid2 from "@mui/material/Grid2";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
 import Stack from "@mui/material/Stack";
-import Tab from "@mui/material/Tab";
 import Typography from "@mui/material/Typography";
 
-import { TabContext, TabList, TabPanel } from "@mui/lab";
-
-import { i18nLoadNamespace } from "../../../../Shared/Languages/i18nLoadNamespace";
-import { prettyCase } from "../../../../Shared/Utils/stringUtils";
+import { i18nLoadNamespace } from "@Shared/Languages/i18nLoadNamespace";
+import MetadataList from "@Shared/MetadataList";
 
 const AfpReverseSearchResults = ({
   thumbnailImage,
@@ -22,12 +16,6 @@ const AfpReverseSearchResults = ({
 }) => {
   const keyword = i18nLoadNamespace("components/NavItems/tools/C2pa");
 
-  const [tabValue, setTabValue] = useState("exif");
-
-  const handleTabChange = (event, newValue) => {
-    setTabValue(newValue);
-  };
-
   return (
     <Stack direction="row" spacing={4}>
       <Box width="100%">
@@ -75,52 +63,7 @@ const AfpReverseSearchResults = ({
               {keyword("afp_produced_image_info")}
             </Alert>
 
-            {imageMetadata && (
-              <>
-                <Box sx={{ width: "100%", typography: "body1" }}>
-                  <TabContext value={tabValue}>
-                    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-                      <TabList
-                        variant="scrollable"
-                        scrollButtons="auto"
-                        onChange={handleTabChange}
-                        aria-label="Image metadata tabs"
-                      >
-                        {Object.keys(imageMetadata)
-                          .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
-                          .map((item, index) => {
-                            return (
-                              <Tab label={item} value={item} key={index} />
-                            );
-                          })}
-                      </TabList>
-                    </Box>
-
-                    {Object.keys(imageMetadata).map((metadataGroup, index) => {
-                      return (
-                        <TabPanel value={metadataGroup} key={index}>
-                          <List>
-                            {Object.entries(imageMetadata[metadataGroup]).map(
-                              ([key, value]) => {
-                                // we may need to improve the value processing later on for a prettier print
-                                return (
-                                  <ListItem key={key} disablePadding>
-                                    <ListItemText
-                                      primary={prettyCase(key)}
-                                      secondary={<>{value.toString()}</>}
-                                    />
-                                  </ListItem>
-                                );
-                              },
-                            )}
-                          </List>
-                        </TabPanel>
-                      );
-                    })}
-                  </TabContext>
-                </Box>
-              </>
-            )}
+            {imageMetadata && <MetadataList metadata={imageMetadata} />}
           </Grid2>
         </Grid2>
       </Box>

src/components/NavItems/tools/Keyframes/Keyframes.jsx

@@ -151,16 +151,18 @@ const Keyframes = () => {
                           value={input}
                           variant="outlined"
                           onChange={(e) => setInput(e.target.value)}
-                          InputProps={{
-                            endAdornment: input ? (
-                              <IconButton
-                                size="small"
-                                onClick={() => setInput("")}
-                                disabled={isLoading || isLoadingSimilarity}
-                              >
-                                <ClearIcon />
-                              </IconButton>
-                            ) : undefined,
+                          slotProps={{
+                            input: {
+                              endAdornment: input ? (
+                                <IconButton
+                                  size="small"
+                                  onClick={() => setInput("")}
+                                  disabled={isLoading || isLoadingSimilarity}
+                                >
+                                  <ClearIcon />
+                                </IconButton>
+                              ) : undefined,
+                            },
                           }}
                         />
                       </Grid2>

src/components/NavItems/tools/Magnifier/Results/ImageResult.jsx

@@ -19,10 +19,7 @@ import "tui-image-editor/dist/tui-image-editor.css";
 
 import { setMagnifierResult } from "../../../../../redux/actions/tools/magnifierActions";
 import useMyStyles from "../../../../Shared/MaterialUiStyles/useMyStyles";
-import {
-  SEARCH_ENGINE_SETTINGS,
-  reverseImageSearch,
-} from "../../../../Shared/ReverseSearch/reverseSearchUtils";
+import { reverseImageSearch } from "../../../../Shared/ReverseSearch/reverseSearchUtils";
 import ImageEditor from "../Utils/ImageEditor";
 import Loop from "./Loop";
 
@@ -139,7 +136,6 @@ const ImageResult = ({ handleCloseResults }) => {
           </IconButton>
         }
       />
-
       <div className={classes.root2}>
         <Modal
           aria-labelledby="transition-modal-title"
@@ -148,9 +144,13 @@ const ImageResult = ({ handleCloseResults }) => {
           open={open}
           onClose={handleClose}
           closeAfterTransition
-          BackdropComponent={Backdrop}
-          BackdropProps={{
-            timeout: 500,
+          slots={{
+            backdrop: Backdrop,
+          }}
+          slotProps={{
+            backdrop: {
+              timeout: 500,
+            },
           }}
         >
           <Fade in={open}>