diff --git a/jsconfig.json b/jsconfig.json index dd88096ec..b154aa300 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "baseUrl": "./src", - "checkJs": true, + "checkJs": false, "jsx": "react" }, "exclude": ["node_modules", "**/node_modules", "dist", "build"] diff --git a/package-lock.json b/package-lock.json index b6437b2d9..f4da796a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "weverify-plugin", - "version": "0.81", + "version": "0.82", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "weverify-plugin", - "version": "0.81", + "version": "0.82", "license": "ISC", "dependencies": { "@date-io/moment": "^2.17.0", diff --git a/package.json b/package.json index 7a9d3b5bc..b58cafab7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "weverify-plugin", - "version": "0.81", + "version": "0.82", "description": "", "main": "index.js", "scripts": { diff --git a/public/locales/en/components/NavItems/tools/Assistant.json b/public/locales/en/components/NavItems/tools/Assistant.json index 2ca138944..8971587d8 100644 --- a/public/locales/en/components/NavItems/tools/Assistant.json +++ b/public/locales/en/components/NavItems/tools/Assistant.json @@ -1 +1,116 @@ -{"assistant_title": "Assistant", "assistant_intro": "The assistant will help you to analyse a webpage, an image or a video file and suggest which WeVerify tools are useful for each case", "assistant_choose": "Choose what you want to analyse", "assistant_webpage_header": "Webpage link", "assistant_webpage_text": "Insert the link of a webpage, and the assistant will suggest the most useful tools for the contents of the given page.", "assistant_file_header": "Local file", "assistant_file_text": "The assistant will suggest the most useful tools depending on if the file is a video or image", "assistant_choose_tool": "Choose the tool you want to use", "upload_video": "Video", "upload_image": "Image", "assistant_urlbox": "URL", "assistant_give_url": "Give the URL of the page to analyse", "assistant_paste_url": "Paste the URL here", "please_give_a_correct_link": "The link provided is incorrect or not supported.", "button_analyse": "Analyse", "button_clean": "Remove", "save": "Save", "source_credibility_title": "Source Credibility", "source_credibility_byline": "The source has been found as part of a credibility check", "link_explorer_title": "Link Explorer", "link_explorer_byline": "The following URLs have been extracted from the page, and their domains have been checked for credibility", "text_title": "Text", "text_intro": "The following text has been found on the page", "dbkf_title": "DBKF Check", "expand_text": "Expand Text", "dbkf_error": "An issue has occurred when trying to connect to the database of known fakes. Some results may be omitted from this page. If the problem persists, please contact support.", "sc_failed": "The source credibility check has failed. Some results may not be displayed. If the problem persists, please contact support.", "link_tooltip": "What is this?
The scores displayed in this section give an indication of how reliable the web source listed can be considered. Scores range from 0-100.

In most cases, the source checked for credibility will be the URL domain. In some cases where this is not useful a more relevant part of the URL has been checked against. In all cases, the full URL and the domain against which the source credibility check was carried on are listed in the form URL : domain-for-check.

How are these calculated?
Various institutions analyse sources (particularly domains) across the web to evaluate how reliable they are likely to be based on various metrics.
Here, datasets assessing web domain reliability have been pulled mainly from Open Sources and the WeVerify DBKF database.
Since the metrics or scores from each of these sources do not necessarily overlap and cannot easily be compared, all scores from any given institution are mapped to a single number between 0-100.
For any URL, a list of all institutions which gave the relevant domain a score has been listed, along with the (mapped) results they gave.
The final result displayed for any domain is the lowest score from the various sources.
", "media_title": "Media", "images_label": "Images", "videos_label": "Videos", "media_found": "The following media has been found on the page", "media_below": "Select the media you would like to verify", "media_to_process": "Media to Process", "assistant_error": "An unexpected assistant error has occurred. If the problem persists, contact support.", "things_you_can_do_header": "Potential Tools", "things_you_can_do": "Below are the tools you can use on this media type", "navbar_analysis_image": "Image Analysis", "navbar_analysis_video": "Video Analysis", "navbar_keyframes": "Keyframes", "navbar_thumbnails": "Thumbnails", "navbar_twitter": "Tw. search", "navbar_magnifier": "Magnifier", "navbar_metadata": "Metadata", "navbar_rights": "Video rights", "navbar_forensic": "Forensic", "navbar_ocr": "OCR", "navbar_twitter_sna": "Fact Check", "navbar_assistant": "Assistant", "assistant_help_title": "Assistant Help", "assistant_help_1": "The WeVerify toolkit (this plugin) has multiple tools which can help in the verification of content on social networks, designed to help journalists save time and be more efficient in their fact checking tasks.
A full list of these tools can be found in the tutorial section of this plugin.
Given the multiple tools and services available, the weverify assistant has been designed to guide users to the services available to them given the nature of the content they would like to check.

", "assistant_help_2": "How does the assistant work?
Users can choose to upload their own media to be checked (an image or a video), in which case verification tools on the plugin which support media upload will be listed.
An alternative option is to enter a URL which needs verification or fact checking.
Once a URL in entered, the assistant attempts to extract any text, images or videos it can find on the page.
Any extracted text or media are then used to suggest the potential actions which can be carried out. Currently, there are three major components to this:More information on each of these can be found in the links below.

", "assistant_help_3": "Which URLS are supported?
Currently, there is dedicated support for links for the following types of URLs: Other generic links can also be entered and the assistant will attempt to retrieve what it can. However, any results (particularly on the extraction of images and text) on generic links may be much more generalised.

", "assistant_help_4": "More information
For a detailed breakdown of the type of URLs supported by the assistant, see this page
For a detailed breakdown of the tools and checks run by the assistant, see: this page", "enter_url": "Enter URL", "mode_label": "URL mode", "url_text": "URL Text", "url_media": "URL Media", "media_text": "Extracted Media Text", "download_video": "The video has been extracted but cannot be processed using the direct URL. Please open it in a new tab using the link below, download it, and use the assistant to see which tools can be used on the downloaded video.", "text_warning": "Warnings found against text. See warning box.", "image_warning": "Warnings found against image. See warning box.", "warning_title": "Warning", "warning_subtitle": "Some elements of this content have been flagged", "status_title": "Status", "status_subtitle": "Note: one or more of the automated checks have resulted in an error. Some results may be omitted from this page.", "named_entity_title": "Text entities", "dbkf_image_warning": "The image from this URL has matched against the following from the database of known fakes with a similarity score of", "dbkf_video_warning": "The video from this URL has matched against the following from the database of known fakes with a similarity score of", "dbkf_text_warning": "The text from this URL has matched against the following from the database of known fakes", "labelled_as": "It has been labelled as:", "commented_as": "with the following comment :", "hp_warning": "The text from this URL has returned an unusually high hyperpartisan score of", "image_analysis_text": "Retrieve contextual information about the image", "video_analysis_text": "Retrieve contextual information about the video", "keyframes_text": "Fragment the video", "thumbnails_text": "Reverse search on thumbnails from the video", "magnifier_text": "Examine the image thoroughly", "metadata_text": "Retrieve image/video metadata", "rights_text": "Retrieve information solely about video rights", "forensic_text": "Detect any image manipulation", "ocr_text": "Extract any text from the image", "hyperpartisan_title": "Hyperpartisan service", "dbkf_text_title": "Database of known fakes text search", "dbkf_media_title": "Database of known fakes media search", "ne_title": "Named entity search", "ocr_title": "OCR search", "source_cred_title": "Source credibility service", "mt_title": "Machine translation service", "translate": "Translate (beta)", "copy_link": "Copy link", "archive_link": "Archive", "source_credibility_warning": "The domain or account has been mentioned in a lookup against:", "text_tooltip": "What is this?
Any text which can be extracted from the given URL is displayed here

How is this used?
Various text processing tools are run against this text: For more information, see: this page", "media_tooltip": "What is this?
Any images or videos which can be extracted from the URL have been displayed here.

What can I do with these?
For any selected image/video, a list of relevant tools from the plugin which can process this media are given. Selecting any of these will redirect the media to the selected tool.
Alongside this, the assistant will reverse search the media against the database of known fakes. If any results are found, these will be displayed in the Warnings section.

For more information, see: this page", "sc_tooltip": "What is this?
For every URL entered, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page", "source_cred_popup_header": "The domain/account has been found in the following reports listed by:", "url_domain_analysis": "URL Domain Analysis", "fact_checker": "Fact checker", "warning": "Warning", "mentions": "Mentions", "assistant_error_instagram": "The assistant has failed to retrieve this instagram post. Please open this URL in a new tab (you may need to log in to instagram), then use the ASSISTANT FOR CURRENT PAGE button to retry.", "assistant_error_server_error": "The assistant could not process the link provided due to a problem with the server, please try again later. If the problem persists please contact support.", "assistant_error_connection_error": "The assistant is having issues connecting to the server, please try again later.", "extracted_urls": "Extracted URLs", "extracted_urls_url_domain_analysis": "Extracted URLs with URL Domain Analysis", "extracted_urls_url_domain_analysis_failed": "Extracted URLs with URL Domain Analysis has failed.", "extracted_urls_tooltip": "What is this?
For every URL extracted from the original URL, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page", "assistant_video_download_action": "Download video", "assistant_video_download_action_description": "Click here to download the video. The downloaded video can then be used in the assistant to access a wider range of video analysis services.", "embedding_not_supported": "The Assistant could not display this video content."} \ No newline at end of file +{ + "assistant_title": "Assistant", + "assistant_intro": "The assistant will help you to analyse a webpage, an image or a video file and suggest which WeVerify tools are useful for each case", + "assistant_choose": "Choose what you want to analyse", + "assistant_webpage_header": "Webpage link", + "assistant_webpage_text": "Insert the link of a webpage, and the assistant will suggest the most useful tools for the contents of the given page.", + "assistant_file_header": "Local file", + "assistant_file_text": "The assistant will suggest the most useful tools depending on if the file is a video or image", + "assistant_choose_tool": "Choose the tool you want to use", + "upload_video": "Video", + "upload_image": "Image", + "assistant_urlbox": "URL", + "assistant_give_url": "Give the URL of the page to analyse", + "assistant_paste_url": "Paste the URL here", + "please_give_a_correct_link": "The link provided is incorrect or not supported.", + "button_analyse": "Analyse", + "button_clean": "Remove", + "save": "Save", + "source_credibility_title": "Source Credibility", + "source_credibility_byline": "The source has been found as part of a credibility check", + "link_explorer_title": "Link Explorer", + "link_explorer_byline": "The following URLs have been extracted from the page, and their domains have been checked for credibility", + "text_title": "Text", + "text_intro": "The following text has been found on the page", + "dbkf_title": "DBKF Check", + "expand_text": "Expand Text", + "dbkf_error": "An issue has occurred when trying to connect to the database of known fakes. Some results may be omitted from this page. If the problem persists, please contact support.", + "sc_failed": "The source credibility check has failed. Some results may not be displayed. If the problem persists, please contact support.", + "link_tooltip": "What is this?
The scores displayed in this section give an indication of how reliable the web source listed can be considered. Scores range from 0-100.

In most cases, the source checked for credibility will be the URL domain. In some cases where this is not useful a more relevant part of the URL has been checked against. In all cases, the full URL and the domain against which the source credibility check was carried on are listed in the form URL : domain-for-check.

How are these calculated?
Various institutions analyse sources (particularly domains) across the web to evaluate how reliable they are likely to be based on various metrics.
Here, datasets assessing web domain reliability have been pulled mainly from Open Sources and the WeVerify DBKF database.
Since the metrics or scores from each of these sources do not necessarily overlap and cannot easily be compared, all scores from any given institution are mapped to a single number between 0-100.
For any URL, a list of all institutions which gave the relevant domain a score has been listed, along with the (mapped) results they gave.
The final result displayed for any domain is the lowest score from the various sources.
", + "media_title": "Media", + "images_label": "Images", + "videos_label": "Videos", + "media_found": "The following media has been found on the page", + "media_below": "Select the media you would like to verify", + "media_to_process": "Media to Process", + "assistant_error": "An unexpected assistant error has occurred. If the problem persists, contact support.", + "things_you_can_do_header": "Potential Tools", + "things_you_can_do": "Below are the tools you can use on this media type", + "navbar_analysis_image": "Image Analysis", + "navbar_analysis_video": "Video Analysis", + "navbar_keyframes": "Keyframes", + "navbar_thumbnails": "Thumbnails", + "navbar_twitter": "Tw. search", + "navbar_magnifier": "Magnifier", + "navbar_metadata": "Metadata", + "navbar_rights": "Video rights", + "navbar_forensic": "Forensic", + "navbar_ocr": "OCR", + "navbar_twitter_sna": "Fact Check", + "navbar_assistant": "Assistant", + "assistant_help_title": "Assistant Help", + "assistant_help_1": "
The WeVerify toolkit (this plugin) has multiple tools which can help in the verification of content on social networks, designed to help journalists save time and be more efficient in their fact checking tasks.
A full list of these tools can be found in the tutorial section of this plugin.
Given the multiple tools and services available, the weverify assistant has been designed to guide users to the services available to them given the nature of the content they would like to check.

", + "assistant_help_2": "How does the assistant work?
Users can choose to upload their own media to be checked (an image or a video), in which case verification tools on the plugin which support media upload will be listed.
An alternative option is to enter a URL which needs verification or fact checking.
Once a URL in entered, the assistant attempts to extract any text, images or videos it can find on the page.
Any extracted text or media are then used to suggest the potential actions which can be carried out. Currently, there are three major components to this:More information on each of these can be found in the links below.

", + "assistant_help_3": "Which URLS are supported?
Currently, there is dedicated support for links for the following types of URLs: Other generic links can also be entered and the assistant will attempt to retrieve what it can. However, any results (particularly on the extraction of images and text) on generic links may be much more generalised.

", + "assistant_help_4": "More information
For a detailed breakdown of the type of URLs supported by the assistant, see this page
For a detailed breakdown of the tools and checks run by the assistant, see: this page", + "enter_url": "Enter URL", + "mode_label": "URL mode", + "url_text": "URL Text", + "url_media": "URL Media", + "media_text": "Extracted Media Text", + "download_video": "The video has been extracted but cannot be processed using the direct URL. Please open it in a new tab using the link below, download it, and use the assistant to see which tools can be used on the downloaded video.", + "text_warning": "Warnings found against text. See warning box.", + "image_warning": "Warnings found against image. See warning box.", + "warning_title": "Warning", + "warning_subtitle": "Some elements of this content have been flagged", + "status_title": "Status", + "status_subtitle": "Note: one or more of the automated checks have resulted in an error. Some results may be omitted from this page.", + "named_entity_title": "Text entities", + "dbkf_image_warning": "The image from this URL has matched against the following from the database of known fakes with a similarity score of", + "dbkf_video_warning": "The video from this URL has matched against the following from the database of known fakes with a similarity score of", + "dbkf_text_warning": "The text from this URL has matched against the following from the database of known fakes", + "domain_scope": "Domain:", + "account_scope": "Account:", + "labelled_as": "has been labelled as:", + "commented_as": "with the following comment:", + "hp_warning": "The text from this URL has returned an unusually high hyperpartisan score of", + "image_analysis_text": "Retrieve contextual information about the image", + "video_analysis_text": "Retrieve contextual information about the video", + "keyframes_text": "Fragment the video", + "thumbnails_text": "Reverse search on thumbnails from the video", + "magnifier_text": "Examine the image thoroughly", + "metadata_text": "Retrieve image/video metadata", + "rights_text": "Retrieve information solely about video rights", + "forensic_text": "Detect any image manipulation", + "ocr_text": "Extract any text from the image", + "hyperpartisan_title": "Hyperpartisan service", + "dbkf_text_title": "Database of known fakes text search", + "dbkf_media_title": "Database of known fakes media search", + "ne_title": "Named entity search", + "ocr_title": "OCR search", + "source_cred_title": "Source credibility service", + "mt_title": "Machine translation service", + "translate": "Translate (beta)", + "copy_link": "Copy link", + "archive_link": "Archive", + "this": "This ", + "source_credibility_warning_domain": "The domain has been mentioned in a lookup against:", + "source_credibility_warning_account": "account has been mentioned in a lookup against:", + "text_tooltip": "What is this?
Any text which can be extracted from the given URL is displayed here

How is this used?
Various text processing tools are run against this text: For more information, see: this page", + "media_tooltip": "What is this?
Any images or videos which can be extracted from the URL have been displayed here.

What can I do with these?
For any selected image/video, a list of relevant tools from the plugin which can process this media are given. Selecting any of these will redirect the media to the selected tool.
Alongside this, the assistant will reverse search the media against the database of known fakes. If any results are found, these will be displayed in the Warnings section.

For more information, see: this page", + "sc_tooltip": "What is this?
For every URL entered, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page", + "source_cred_popup_header_domain": "The domain has been found in the following reports listed by:", + "source_cred_popup_header_account": "The account has been found in the following reports listed by:", + "url_domain_analysis": "URL Domain Analysis", + "fact_checker": "Fact checker", + "warning": "Warning", + "mentions": "Mentions", + "assistant_error_instagram": "The assistant has failed to retrieve this instagram post. Please open this URL in a new tab (you may need to log in to instagram), then use the ASSISTANT FOR CURRENT PAGE button to retry.", + "assistant_error_server_error": "The assistant could not process the link provided due to a problem with the server, please try again later. If the problem persists please contact support.", + "assistant_error_connection_error": "The assistant is having issues connecting to the server, please try again later.", + "extracted_urls": "Extracted URLs", + "extracted_urls_url_domain_analysis": "Extracted URLs with URL Domain Analysis", + "extracted_urls_url_domain_analysis_failed": "Extracted URLs with URL Domain Analysis has failed.", + "extracted_urls_tooltip": "What is this?
For every URL extracted from the original URL, we run either the domain (if this is a non social media URL) or the account (if this is a social media URL) against our URL domain analysis service. The results of this check are shown here.

What can I do with these?
The domain analysis service intends to collect information about a domain/account from multiple sources. From here, we intend to inform the user whether any of the sources we collect from hold information on the domain/account of the URL entered. The result is split into three types: Since this is information collected from multiple sources, we have given the source we have taken the details from and if provided, any evidence the source itself has given so users can check the validity of claims made about a domain. For more information on sources and data collection, see this page", + "embedding_not_supported":"The Assistant could not display this video content." + } \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json index b2e68fb63..c69caba88 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Fake news debunker by InVID & WeVerify", - "version": "0.81", + "version": "0.82", "description": "InVID WeVerify extension", "short_name": "Verification Plugin", "action": { diff --git a/src/App.jsx b/src/App.jsx index aad73ee0a..165835ba7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { HashRouter, Route, Routes } from "react-router-dom"; import PopUp from "./components/PopUp/PopUp"; -import NavBar from "./components/NavBar/NavBar"; import useAuthenticationAPI from "./components/Shared/Authentication/useAuthenticationAPI"; import { useDispatch } from "react-redux"; import { @@ -10,6 +9,7 @@ import { setErrorNetwork, } from "redux/reducers/errorReducer"; import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace"; +import ApplicationLayout from "./components/ApplicationLayout"; const theme = createTheme({ palette: { @@ -103,7 +103,7 @@ const App = () => { } /> - } /> + } /> diff --git a/src/Hooks/useAnalytics.jsx b/src/Hooks/useAnalytics.jsx index 932c2b50a..d040e3fdf 100644 --- a/src/Hooks/useAnalytics.jsx +++ b/src/Hooks/useAnalytics.jsx @@ -1,14 +1,14 @@ import { useSelector } from "react-redux"; import { useEffect } from "react"; import { - trackPageView, - trackPageViewAnonymous, trackEvent, trackEventAnonymous, + trackPageView, + trackPageViewAnonymous, } from "../components/Shared/GoogleAnalytics/MatomoAnalytics"; import { history } from "../components/Shared/History/History"; -export const useTrackPageView = (path, client_id, uid, index) => { +export const useTrackPageView = (path, client_id, uid, toolName) => { const analytics = useSelector((state) => state.cookies.analytics); useEffect(() => { //console.log("general page view"); @@ -18,7 +18,7 @@ export const useTrackPageView = (path, client_id, uid, index) => { } else { trackPageViewAnonymous(path, history); } - }, [index]); + }, [toolName]); }; export const useTrackEvent = ( diff --git a/src/components/ApplicationLayout/index.jsx b/src/components/ApplicationLayout/index.jsx new file mode 100644 index 000000000..a83ed64f2 --- /dev/null +++ b/src/components/ApplicationLayout/index.jsx @@ -0,0 +1,93 @@ +import React, { useState } from "react"; +import NotificationSnackbar from "../NotificationSnackbar"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import TopMenu from "../TopMenu"; +import { TOP_MENU_ITEMS } from "../../constants/topMenuItems"; +import SideMenu from "../SideMenu"; +import { tools } from "../../constants/tools"; +import MainContent from "../MainContent"; +import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles"; + +const ApplicationLayout = () => { + const theme = createTheme({ + palette: { + primary: { + light: "#00926c", + main: "#00926c", + dark: "#00926c", + contrastText: "#fff", + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + colorPrimary: { + backgroundColor: "#ffffff", + }, + root: { + zIndex: 1300, + height: "87px", + boxShadow: "none", + paddingTop: "12px", + }, + }, + }, + MuiListItem: { + styleOverrides: { + gutters: { + paddingLeft: "26px", + }, + }, + }, + MuiAutocomplete: { + styleOverrides: { + popupIndicatorOpen: { + transform: "none!important", + }, + popper: { + zIndex: 99999, + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: "10px!important", + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + minWidth: "160px", + }, + }, + }, + }, + }); + + // Used to display warning messages + const [openAlert, setOpenAlert] = useState(false); + + const classes = useMyStyles(); + + return ( +
+ + + + + + +
+ ); +}; + +export default ApplicationLayout; diff --git a/src/components/MainContent/index.jsx b/src/components/MainContent/index.jsx new file mode 100644 index 000000000..3ee3665bb --- /dev/null +++ b/src/components/MainContent/index.jsx @@ -0,0 +1,194 @@ +import React from "react"; +import MainContentMenuTopMenuItems from "../NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems"; +import ScrollTop from "../Shared/ScrollTop/ScrollTop"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import { Button, Fab, Snackbar } from "@mui/material"; +import { KeyboardArrowUp } from "@mui/icons-material"; +import MySnackbar from "../MySnackbar/MySnackbar"; +import { + cleanError, + cleanErrorNetwork, +} from "../../redux/reducers/errorReducer"; +import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers"; +import Feedback from "../Feedback/Feedback"; +import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles"; +import { TOOL_STATUS_ICON } from "../../constants/tools"; +import { useDispatch, useSelector } from "react-redux"; +import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace"; +import { TOP_MENU_ITEMS } from "../../constants/topMenuItems"; + +/** + * + * @param tools {Tool[]} + * @returns {Element} + * @constructor + */ +const MainContent = ({ tools }) => { + const classes = useMyStyles(); + + const keyword = i18nLoadNamespace("components/NavBar"); + + const dispatch = useDispatch(); + + const currentLang = useSelector((state) => state.language); + const isCurrentLanguageLeftToRight = currentLang !== "ar"; + + const error = useSelector((state) => state.error.tools); + const errorNetwork = useSelector((state) => state.error.network); + + const cookiesUsage = useSelector((state) => state.cookies); + + const role = useSelector((state) => state.userSession.user.roles); + + const toolsAllowedForRole = tools.filter((tool) => { + if ( + !tool.rolesNeeded || + tool.rolesNeeded.length === 0 || + tool.rolesNeeded.includes(TOOL_STATUS_ICON.LOCK) + ) + return true; + else if (tool.rolesNeeded.some((restriction) => role.includes(restriction))) + return true; + else return false; + }); + + const themeFab = createTheme({ + palette: { + primary: { + light: "#00926c", + main: "#00926c", + dark: "#00926c", + contrastText: "#fff", + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + colorPrimary: { + backgroundColor: "#ffffff", + }, + root: { + zIndex: 1300, + height: "87px", + boxShadow: "none", + paddingTop: "12px", + }, + }, + }, + MuiListItem: { + styleOverrides: { + gutters: { + paddingLeft: "26px", + }, + }, + }, + MuiAutocomplete: { + styleOverrides: { + popupIndicatorOpen: { + transform: "none!important", + }, + popper: { + zIndex: 99999, + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: "10px!important", + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + minWidth: "160px", + }, + }, + }, + }, + }); + + return ( +
+
+ + + + + + + + + {error !== null && ( + dispatch(cleanError())} + onClose={() => {}} + sx={{ mr: 8 }} + /> + )} + {errorNetwork !== null && ( + dispatch(cleanErrorNetwork())} + onClose={() => {}} + sx={{ mr: 8 }} + /> + )} + {cookiesUsage.active === null && ( + dispatch(setFalse())} + > + {" "} + {keyword("cookies_decline")}{" "} + , + , + ]} + /> + )} + +
+ ); +}; + +export default MainContent; diff --git a/src/components/NavBar/DrawerItem/DrawerItem.jsx b/src/components/NavBar/DrawerItem/DrawerItem.jsx index 9bd7eece7..c0b9bea9d 100644 --- a/src/components/NavBar/DrawerItem/DrawerItem.jsx +++ b/src/components/NavBar/DrawerItem/DrawerItem.jsx @@ -1,164 +1,45 @@ import React, { useEffect } from "react"; -import PropTypes from "prop-types"; import { Container } from "@mui/material"; import Fade from "@mui/material/Fade"; import { useDispatch, useSelector } from "react-redux"; -import { selectTool } from "../../../redux/reducers/tools/toolReducer"; -import MainContentMenu from "../../NavItems/tools/Alltools/MainContentMenu"; -import Analysis from "../../NavItems/tools/Analysis/Analysis"; -import Keyframes from "../../NavItems/tools/Keyframes/Keyframes"; -import Thumbnails from "../../NavItems/tools/Thumbnails/Thumbnails"; -import TwitterAdvancedSearch from "../../NavItems/tools/TwitterAdvancedSearch/TwitterAdvancedSearch"; -import Magnifier from "../../NavItems/tools/Magnifier/Magnifier"; -import Metadata from "../../NavItems/tools/Metadata/Metadata"; -import VideoRights from "../../NavItems/tools/VideoRights/VideoRights"; -import Forensic from "../../NavItems/tools/Forensic/Forensic"; import { Route, Routes, useLocation } from "react-router-dom"; -import { Footer, FOOTER_TYPES } from "../../Shared/Footer/Footer"; -import TwitterSna from "../../NavItems/tools/TwitterSna/TwitterSna"; -import OCR from "../../NavItems/tools/OCR/OCR"; -import CheckGif from "../../NavItems/tools/Gif/CheckGif"; -import DeepfakeImage from "../../NavItems/tools/Deepfake/DeepfakeImage"; -import DeepfakeVideo from "../../NavItems/tools/Deepfake/DeepfakeVideo"; -import SyntheticImageDetection from "../../NavItems/tools/SyntheticImageDetection"; -import Geolocation from "../../NavItems/tools/Geolocation/Geolocation"; import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles"; import { createTheme, ThemeProvider } from "@mui/material/styles"; -import AnalysisImg from "../../NavItems/tools/Analysis_images/Analysis"; import { getclientId } from "../../Shared/GoogleAnalytics/MatomoAnalytics"; import { useTrackPageView } from "../../../Hooks/useAnalytics"; -import Archive from "../../NavItems/tools/Archive"; -import SemanticSearch from "../../NavItems/tools/SemanticSearch"; -import Loccus from "../../NavItems/tools/Loccus"; - -const DrawerItem = ({ toolsList }) => { - const drawerItemsContent = [ - { - content: , - footer:
, - }, - { - content: , - footer: