From 75c70471aed6011b33e9b9c08e6ec58ddf48c515 Mon Sep 17 00:00:00 2001 From: robfrks Date: Thu, 19 Sep 2024 09:38:10 +0200 Subject: [PATCH 01/16] added link to archiving tool from popup --- .../NavItems/tools/Archive/index.jsx | 7 ++++++ src/components/PopUp/PopUp.jsx | 24 +++++++++++++++++++ src/redux/reducers/index.jsx | 2 ++ .../reducers/tools/archivingTricksReducer.jsx | 21 ++++++++++++++++ 4 files changed, 54 insertions(+) create mode 100644 src/redux/reducers/tools/archivingTricksReducer.jsx diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index b86cf6b9..b5438b36 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -9,6 +9,7 @@ import { Grid2, Skeleton, Stack, + Typography, } from "@mui/material"; import LoadingButton from "@mui/lab/LoadingButton"; @@ -19,6 +20,7 @@ import ArchiveTable from "./components/archiveTable"; import HeaderTool from "../../../Shared/HeaderTool/HeaderTool"; import useAuthenticatedRequest from "../../../Shared/Authentication/useAuthenticatedRequest"; import { prettifyLargeString } from "./utils"; +import { useParams } from "react-router-dom"; // import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics"; // import { useSelector } from "react-redux"; // import { useTrackEvent } from "Hooks/useAnalytics"; @@ -26,6 +28,8 @@ import { prettifyLargeString } from "./utils"; //TODO:UI for long strings const Archive = () => { + const { paramUrl } = useParams(); + const [isLoading, setIsLoading] = useState(false); const [input, setInput] = useState(""); @@ -148,6 +152,9 @@ const Archive = () => { icon={} /> + + {paramUrl} +
diff --git a/src/components/PopUp/PopUp.jsx b/src/components/PopUp/PopUp.jsx index 4aed2d89..f275e48c 100644 --- a/src/components/PopUp/PopUp.jsx +++ b/src/components/PopUp/PopUp.jsx @@ -64,6 +64,14 @@ const PopUp = () => { }); }; + const loadDataArchiving = () => { + navigator.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => { + let url = tabs[0].url; + if (url) return url; + return ""; + }); + }; + useEffect(() => { let supportedBrowserLang = getSupportedBrowserLanguage(); @@ -159,6 +167,22 @@ const PopUp = () => { {keyword("open_classroom")} + + + + diff --git a/src/redux/reducers/index.jsx b/src/redux/reducers/index.jsx index 2b579e6a..e15dd991 100644 --- a/src/redux/reducers/index.jsx +++ b/src/redux/reducers/index.jsx @@ -28,6 +28,7 @@ import twitterSnaReducer from "./tools/twitterSnaReducer"; import languageSupportReducer from "./languageSupportReducer"; import loccusReducer from "./tools/loccusReducer"; import c2paReducer from "./tools/c2paReducer"; +import archivingTricksReducer from "./tools/archivingTricksReducer"; const allReducers = combineReducers({ language: languageReducer, @@ -59,6 +60,7 @@ const allReducers = combineReducers({ geolocation: geolocationReducer, languagesSupport: languageSupportReducer, c2pa: c2paReducer, + archivingTricks: archivingTricksReducer, }); export default allReducers; diff --git a/src/redux/reducers/tools/archivingTricksReducer.jsx b/src/redux/reducers/tools/archivingTricksReducer.jsx new file mode 100644 index 00000000..d2625ea5 --- /dev/null +++ b/src/redux/reducers/tools/archivingTricksReducer.jsx @@ -0,0 +1,21 @@ +const { createSlice } = require("@reduxjs/toolkit"); + +const initialState = { url: null }; + +const archivingTricksSlice = createSlice({ + name: "archivingTricks", + initialState, + reducers: { + archivingTricksUrlSet(state, action) { + state.url = action.payload; + }, + archivingTricksStateCleaned(state, action) { + state.url = null; + }, + }, +}); +export const { archivingTricksUrlSet, archivingTricksStateCleaned } = + archivingTricksSlice.actions; + +const archivingTricksReducer = archivingTricksSlice.reducer; +export default archivingTricksReducer; From 450d4bcaf39797af962c2ef4ee447969686ddaa7 Mon Sep 17 00:00:00 2001 From: robfrks Date: Thu, 19 Sep 2024 10:04:19 +0200 Subject: [PATCH 02/16] page url is now transmitted to archive tool --- src/components/NavItems/tools/Archive/index.jsx | 5 +++-- src/components/PopUp/PopUp.jsx | 14 ++++++-------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index b5438b36..0e3af5c4 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -28,7 +28,8 @@ import { useParams } from "react-router-dom"; //TODO:UI for long strings const Archive = () => { - const { paramUrl } = useParams(); + const { url } = useParams(); + console.log(url); const [isLoading, setIsLoading] = useState(false); @@ -153,7 +154,7 @@ const Archive = () => { /> - {paramUrl} + {url} diff --git a/src/components/PopUp/PopUp.jsx b/src/components/PopUp/PopUp.jsx index f275e48c..8abccebf 100644 --- a/src/components/PopUp/PopUp.jsx +++ b/src/components/PopUp/PopUp.jsx @@ -64,13 +64,12 @@ const PopUp = () => { }); }; - const loadDataArchiving = () => { - navigator.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => { - let url = tabs[0].url; - if (url) return url; - return ""; + useEffect(() => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + const currentTab = tabs[0]; + setPageUrl(currentTab.url); }); - }; + }, []); useEffect(() => { let supportedBrowserLang = getSupportedBrowserLanguage(); @@ -174,9 +173,8 @@ const PopUp = () => { color="primary" fullWidth={true} onClick={() => { - const url = loadDataArchiving(); window.open( - "/popup.html#/app/tools/archive/" + encodeURIComponent(url), + "/popup.html#/app/tools/archive/" + encodeURIComponent(pageUrl), ); }} > From 7c7af0ee07ee9b5dbc5ca0aa9ed6cd00a1c8b7cd Mon Sep 17 00:00:00 2001 From: robfrks Date: Thu, 19 Sep 2024 15:51:22 +0200 Subject: [PATCH 03/16] added facebook links that are easier to archive --- .../tools/Archive/components/urlArchive.jsx | 78 +++++ .../NavItems/tools/Archive/index.jsx | 267 ++++++++++++------ 2 files changed, 256 insertions(+), 89 deletions(-) create mode 100644 src/components/NavItems/tools/Archive/components/urlArchive.jsx diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx new file mode 100644 index 00000000..62fbf24f --- /dev/null +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -0,0 +1,78 @@ +import { Box, Button, Grid2, Link, Stack, Typography } from "@mui/material"; +import { useEffect, useState } from "react"; + +const UrlArchive = ({ url, openLinks }) => { + const [platform, setPlatform] = useState(null); + const [urls, setUrls] = useState([]); + console.log(url); + + useEffect(() => { + if (url && url.includes("facebook")) { + setPlatform("facebook"); + } + }, [url]); + + useEffect(() => { + if (platform === "facebook") { + const facebookUrls = [ + `https://www.facebook.com/plugins/post.php?href=${encodeURIComponent( + url, + )}&show_text=true&width=500`, + `https://www.facebook.com/v16.0/plugins/post.php?app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Dfe3fbda33dec3%26domain%3Ddevelopers.facebook.com%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff8686a44c9f19%26relation%3Dparent.parent&container_width=734&href=${encodeURIComponent( + url, + )}&set=a.462670379217792&locale=en_US&sdk=joey&show_text=true&width=500`, + `https://mbasic.facebook.com/${url.replace( + "https://www.facebook.com/", + "", + )}`, + ]; + setUrls(facebookUrls); + } + }, [platform]); + + return ( + <> + + {platform === "facebook" ? ( + <> + + + + + + {"Embed Link:"} + + {urls[0]} + + + {"Android Link:"} + + {urls[1]} + + + {"Mobile Link:"} + + {urls[2]} + + + ) : ( + <> + {"Platform not yet supported."} + + )} + + + ); +}; + +export default UrlArchive; diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index 0e3af5c4..6115d266 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -1,14 +1,20 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { + Accordion, + AccordionDetails, + AccordionSummary, Alert, Box, Button, Card, + Checkbox, Fade, + FormControlLabel, Grid2, Skeleton, Stack, + TextField, Typography, } from "@mui/material"; @@ -21,6 +27,7 @@ import HeaderTool from "../../../Shared/HeaderTool/HeaderTool"; import useAuthenticatedRequest from "../../../Shared/Authentication/useAuthenticatedRequest"; import { prettifyLargeString } from "./utils"; import { useParams } from "react-router-dom"; +import UrlArchive from "./components/urlArchive"; // import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics"; // import { useSelector } from "react-redux"; // import { useTrackEvent } from "Hooks/useAnalytics"; @@ -29,7 +36,9 @@ import { useParams } from "react-router-dom"; const Archive = () => { const { url } = useParams(); - console.log(url); + const [urlInput, setUrlInput] = useState(""); + const [urlResults, setUrlResults] = useState(false); + const [openLinks, setOpenLinks] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -45,6 +54,14 @@ const Archive = () => { const authenticatedRequest = useAuthenticatedRequest(); + useEffect(() => { + if (url) { + console.log(url); + setUrlInput(url); + setUrlResults(true); + } + }, []); + const isFileAWaczFile = (fileName) => { return fileName.split(".").pop() === "wacz"; }; @@ -154,13 +171,78 @@ const Archive = () => { /> - {url} + + { + setUrlInput(e.target.value); + }} + fullWidth + /> + {/* {setOpenLinks(!openLinks)}} + value="checkedBox" + color="primary" + /> + } + label={"open links"} + /> */} + + + + {console.log("hi" + urlInput)} + {urlResults && urlInput !== "" ? ( + <> + {console.log("urlResults: " + urlResults)} + {console.log("urlInput: " + urlInput)} + + + ) : null} - - - - - {/* + + + + + + + + + + + {/* { /> */} - - - - { - e.preventDefault(); - handleSubmit(); - }} - > - {"Archive File"} - - - - - - {errorMessage && ( - - - {errorMessage} - - - )} - - {hasArchiveBeenCreated && ( - - - - The archive was created successfully! - - - - )} - {isLoading || archiveLinks.length === 0 ? ( - <> - {isLoading && ( - - - - Loading... This can take up to a few minutes + + + + { + e.preventDefault(); + handleSubmit(); + }} + > + {"Archive File"} + + + + + + {errorMessage && ( + + + {errorMessage} + + + )} + + {hasArchiveBeenCreated && ( + + + + The archive was created successfully! - - - - + + + )} + {isLoading || archiveLinks.length === 0 ? ( + <> + {isLoading && ( + + + + Loading... This can take up to a few minutes + + + + + + + + )} + + ) : ( + + + )} - - ) : ( - - - - - - )} - - - - + +
+ + + + ); From ab631f85663d88ed701592b9e4f3af5fa4ae159e Mon Sep 17 00:00:00 2001 From: robfrks Date: Thu, 19 Sep 2024 16:21:23 +0200 Subject: [PATCH 04/16] added summary for wacz accordion --- src/components/NavItems/tools/Archive/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index 6115d266..1a09e073 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -28,6 +28,8 @@ import useAuthenticatedRequest from "../../../Shared/Authentication/useAuthentic import { prettifyLargeString } from "./utils"; import { useParams } from "react-router-dom"; import UrlArchive from "./components/urlArchive"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; + // import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics"; // import { useSelector } from "react-redux"; // import { useTrackEvent } from "Hooks/useAnalytics"; @@ -231,7 +233,9 @@ const Archive = () => { - + }> + {"Archive a .wacz file"} +
From cbb737384d792ad6166f08ec93018c0cdf1834ee Mon Sep 17 00:00:00 2001 From: robfrks Date: Thu, 19 Sep 2024 16:33:02 +0200 Subject: [PATCH 05/16] functional youtube embed link --- .../tools/Archive/components/urlArchive.jsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx index 62fbf24f..db54b0bd 100644 --- a/src/components/NavItems/tools/Archive/components/urlArchive.jsx +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -9,6 +9,8 @@ const UrlArchive = ({ url, openLinks }) => { useEffect(() => { if (url && url.includes("facebook")) { setPlatform("facebook"); + } else if (url && url.includes("youtube")) { + setPlatform("youtube"); } }, [url]); @@ -27,6 +29,9 @@ const UrlArchive = ({ url, openLinks }) => { )}`, ]; setUrls(facebookUrls); + } else if (platform === "youtube") { + const youtubeUrls = [url.replace("/watch?v=", "/embed/")]; + setUrls(youtubeUrls); } }, [platform]); @@ -67,7 +72,16 @@ const UrlArchive = ({ url, openLinks }) => { ) : ( <> - {"Platform not yet supported."} + {platform === "youtube" ? ( + <> + {"Embed Link:"} + + {urls[0]} + + + ) : ( + {"Platform not yet supported."} + )} )} From f6604d9a9ee8fe46f6e25df015c463bf74f8f545 Mon Sep 17 00:00:00 2001 From: robfrks Date: Thu, 19 Sep 2024 17:28:29 +0200 Subject: [PATCH 06/16] functional redux logic --- .../NavItems/tools/Archive/index.jsx | 38 +++++++++++++------ src/redux/reducers/index.jsx | 4 +- src/redux/reducers/tools/archiveReducer.jsx | 20 ++++++++++ .../reducers/tools/archivingTricksReducer.jsx | 21 ---------- 4 files changed, 49 insertions(+), 34 deletions(-) create mode 100644 src/redux/reducers/tools/archiveReducer.jsx delete mode 100644 src/redux/reducers/tools/archivingTricksReducer.jsx diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index 1a09e073..d98c96ee 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -29,6 +29,11 @@ import { prettifyLargeString } from "./utils"; import { useParams } from "react-router-dom"; import UrlArchive from "./components/urlArchive"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import { + archiveStateCleaned, + archiveUrlSet, +} from "redux/reducers/tools/archiveReducer"; +import { useDispatch, useSelector } from "react-redux"; // import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics"; // import { useSelector } from "react-redux"; @@ -38,6 +43,9 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; const Archive = () => { const { url } = useParams(); + + const dispatch = useDispatch(); + const mainUrl = useSelector((state) => state.archive.mainUrl); const [urlInput, setUrlInput] = useState(""); const [urlResults, setUrlResults] = useState(false); const [openLinks, setOpenLinks] = useState(false); @@ -57,13 +65,28 @@ const Archive = () => { const authenticatedRequest = useAuthenticatedRequest(); useEffect(() => { - if (url) { + if (mainUrl) { + setUrlResults(true); + setUrlInput(mainUrl); + } else if (url) { console.log(url); - setUrlInput(url); setUrlResults(true); + setUrlInput(mainUrl); + archiveUrlSet(url); } }, []); + const handleCloseUrl = () => { + setUrlResults(false); + dispatch(archiveStateCleaned()); + setUrlInput(""); + }; + + const handleSubmitUrl = () => { + setUrlResults(true); + dispatch(archiveUrlSet(urlInput)); + }; + const isFileAWaczFile = (fileName) => { return fileName.split(".").pop() === "wacz"; }; @@ -202,9 +225,7 @@ const Archive = () => { variant="contained" color="primary" disabled={urlResults || urlInput === ""} - onClick={() => { - setUrlResults(true); - }} + onClick={handleSubmitUrl} > {"submit"} @@ -212,19 +233,14 @@ const Archive = () => { variant="outlined" color="error" disabled={!urlResults} - onClick={() => { - setUrlInput(""); - setUrlResults(false); - }} + onClick={handleCloseUrl} > {"clear"} - {console.log("hi" + urlInput)} {urlResults && urlInput !== "" ? ( <> {console.log("urlResults: " + urlResults)} - {console.log("urlInput: " + urlInput)} ) : null} diff --git a/src/redux/reducers/index.jsx b/src/redux/reducers/index.jsx index e15dd991..c87ab0c2 100644 --- a/src/redux/reducers/index.jsx +++ b/src/redux/reducers/index.jsx @@ -28,7 +28,7 @@ import twitterSnaReducer from "./tools/twitterSnaReducer"; import languageSupportReducer from "./languageSupportReducer"; import loccusReducer from "./tools/loccusReducer"; import c2paReducer from "./tools/c2paReducer"; -import archivingTricksReducer from "./tools/archivingTricksReducer"; +import archiveReducer from "./tools/archiveReducer"; const allReducers = combineReducers({ language: languageReducer, @@ -60,7 +60,7 @@ const allReducers = combineReducers({ geolocation: geolocationReducer, languagesSupport: languageSupportReducer, c2pa: c2paReducer, - archivingTricks: archivingTricksReducer, + archive: archiveReducer, }); export default allReducers; diff --git a/src/redux/reducers/tools/archiveReducer.jsx b/src/redux/reducers/tools/archiveReducer.jsx new file mode 100644 index 00000000..e2c2bed6 --- /dev/null +++ b/src/redux/reducers/tools/archiveReducer.jsx @@ -0,0 +1,20 @@ +const { createSlice } = require("@reduxjs/toolkit"); + +const initialState = { mainUrl: "" }; + +const archiveSlice = createSlice({ + name: "archive", + initialState, + reducers: { + archiveUrlSet(state, action) { + state.mainUrl = action.payload; + }, + archiveStateCleaned(state, action) { + state.mainUrl = ""; + }, + }, +}); +export const { archiveUrlSet, archiveStateCleaned } = archiveSlice.actions; + +const archiveReducer = archiveSlice.reducer; +export default archiveReducer; diff --git a/src/redux/reducers/tools/archivingTricksReducer.jsx b/src/redux/reducers/tools/archivingTricksReducer.jsx deleted file mode 100644 index d2625ea5..00000000 --- a/src/redux/reducers/tools/archivingTricksReducer.jsx +++ /dev/null @@ -1,21 +0,0 @@ -const { createSlice } = require("@reduxjs/toolkit"); - -const initialState = { url: null }; - -const archivingTricksSlice = createSlice({ - name: "archivingTricks", - initialState, - reducers: { - archivingTricksUrlSet(state, action) { - state.url = action.payload; - }, - archivingTricksStateCleaned(state, action) { - state.url = null; - }, - }, -}); -export const { archivingTricksUrlSet, archivingTricksStateCleaned } = - archivingTricksSlice.actions; - -const archivingTricksReducer = archivingTricksSlice.reducer; -export default archivingTricksReducer; From b0eab99c0d22b324fee25c3f740590550aaf04ef Mon Sep 17 00:00:00 2001 From: robfrks Date: Fri, 20 Sep 2024 10:08:21 +0200 Subject: [PATCH 07/16] fixed bug --- src/components/NavItems/tools/Archive/index.jsx | 4 ++-- src/components/PopUp/PopUp.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index d98c96ee..ec77f448 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -68,10 +68,10 @@ const Archive = () => { if (mainUrl) { setUrlResults(true); setUrlInput(mainUrl); - } else if (url) { + } else if (url && url !== "") { console.log(url); setUrlResults(true); - setUrlInput(mainUrl); + setUrlInput(url); archiveUrlSet(url); } }, []); diff --git a/src/components/PopUp/PopUp.jsx b/src/components/PopUp/PopUp.jsx index 8abccebf..ba106029 100644 --- a/src/components/PopUp/PopUp.jsx +++ b/src/components/PopUp/PopUp.jsx @@ -178,7 +178,7 @@ const PopUp = () => { ); }} > - {keyword("archiving_tricks")} + {keyword("archive_this")} From a0c9df47aef7486bb8429f0c93121d78d227407b Mon Sep 17 00:00:00 2001 From: robfrks Date: Fri, 20 Sep 2024 10:16:39 +0200 Subject: [PATCH 08/16] added instagram embed link --- .../tools/Archive/components/urlArchive.jsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx index db54b0bd..b0b25bbb 100644 --- a/src/components/NavItems/tools/Archive/components/urlArchive.jsx +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -11,6 +11,8 @@ const UrlArchive = ({ url, openLinks }) => { setPlatform("facebook"); } else if (url && url.includes("youtube")) { setPlatform("youtube"); + } else if (url && url.includes("instagram")) { + setPlatform("instagram"); } }, [url]); @@ -32,6 +34,9 @@ const UrlArchive = ({ url, openLinks }) => { } else if (platform === "youtube") { const youtubeUrls = [url.replace("/watch?v=", "/embed/")]; setUrls(youtubeUrls); + } else if (platform === "instagram") { + const instagramUrls = [url + "embed/captioned"]; + setUrls(instagramUrls); } }, [platform]); @@ -80,7 +85,18 @@ const UrlArchive = ({ url, openLinks }) => { ) : ( - {"Platform not yet supported."} + <> + {platform === "instagram" ? ( + <> + {"Embed Link:"} + + {urls[0]} + + + ) : ( + {"Platform not yet supported."} + )} + )} )} From 11696c3bdf29f0c3552c8e4a47dde24b889b49f8 Mon Sep 17 00:00:00 2001 From: robfrks Date: Fri, 20 Sep 2024 10:49:53 +0200 Subject: [PATCH 09/16] added translations for archive --- .../tools/Archive/components/urlArchive.jsx | 13 ++++++++----- src/components/NavItems/tools/Archive/index.jsx | 13 ++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx index b0b25bbb..52c16c77 100644 --- a/src/components/NavItems/tools/Archive/components/urlArchive.jsx +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -1,4 +1,5 @@ import { Box, Button, Grid2, Link, Stack, Typography } from "@mui/material"; +import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace"; import { useEffect, useState } from "react"; const UrlArchive = ({ url, openLinks }) => { @@ -6,6 +7,8 @@ const UrlArchive = ({ url, openLinks }) => { const [urls, setUrls] = useState([]); console.log(url); + const keyword = i18nLoadNamespace("components/NavItems/tools/Archive"); + useEffect(() => { if (url && url.includes("facebook")) { setPlatform("facebook"); @@ -56,21 +59,21 @@ const UrlArchive = ({ url, openLinks }) => { }); }} > - {"Open all links"} + {keyword("open_links_button")} - {"Embed Link:"} + {keyword("embed_link")} {urls[0]} - {"Android Link:"} + {keyword("android_link")} {urls[1]} - {"Mobile Link:"} + {keyword("mobile_link")} {urls[2]} @@ -94,7 +97,7 @@ const UrlArchive = ({ url, openLinks }) => { ) : ( - {"Platform not yet supported."} + {keyword("unsupported_platform")} )} )} diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index ec77f448..774616ab 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -34,6 +34,7 @@ import { archiveUrlSet, } from "redux/reducers/tools/archiveReducer"; import { useDispatch, useSelector } from "react-redux"; +import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace"; // import { getclientId } from "components/Shared/GoogleAnalytics/MatomoAnalytics"; // import { useSelector } from "react-redux"; @@ -64,6 +65,8 @@ const Archive = () => { const authenticatedRequest = useAuthenticatedRequest(); + const keyword = i18nLoadNamespace("components/NavItems/tools/Archive"); + useEffect(() => { if (mainUrl) { setUrlResults(true); @@ -190,7 +193,7 @@ const Archive = () => { return (
} /> @@ -227,7 +230,7 @@ const Archive = () => { disabled={urlResults || urlInput === ""} onClick={handleSubmitUrl} > - {"submit"} + {keyword("submit_button")} {urlResults && urlInput !== "" ? ( @@ -250,7 +253,7 @@ const Archive = () => { }> - {"Archive a .wacz file"} + {keyword("archive_wacz_accordion")} @@ -312,7 +315,7 @@ const Archive = () => { handleSubmit(); }} > - {"Archive File"} + {keyword("archive_file")} From ca1a22285e205b7db4ba5d9d3c75a5a9e09cb634 Mon Sep 17 00:00:00 2001 From: robfrks Date: Fri, 20 Sep 2024 12:32:26 +0200 Subject: [PATCH 10/16] removed commented code and archive this button only shows up if user has archive role --- .../NavItems/tools/Archive/index.jsx | 11 ------ src/components/PopUp/PopUp.jsx | 38 ++++++++++++------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/components/NavItems/tools/Archive/index.jsx b/src/components/NavItems/tools/Archive/index.jsx index 774616ab..b195fdc2 100644 --- a/src/components/NavItems/tools/Archive/index.jsx +++ b/src/components/NavItems/tools/Archive/index.jsx @@ -213,17 +213,6 @@ const Archive = () => { }} fullWidth /> - {/* {setOpenLinks(!openLinks)}} - value="checkedBox" - color="primary" - /> - } - label={"open links"} - /> */} - - - + {userRoles.includes(ROLES.ARCHIVE) ? ( + + + + ) : null} From 50a0227c7297fd9ade6e5cc63ed9cbc6ccd2a012 Mon Sep 17 00:00:00 2001 From: robfrks Date: Fri, 20 Sep 2024 14:52:47 +0200 Subject: [PATCH 11/16] youtube links can be saved to internet archive --- .../NavBar/images/SVG/Others/archive-icon.svg | 1 + .../images/SVG/Others/perma-cc-icon.svg | 10 +++ .../tools/Archive/components/urlArchive.jsx | 62 +++++++++++++++++-- 3 files changed, 69 insertions(+), 4 deletions(-) create mode 100644 src/components/NavBar/images/SVG/Others/archive-icon.svg create mode 100644 src/components/NavBar/images/SVG/Others/perma-cc-icon.svg diff --git a/src/components/NavBar/images/SVG/Others/archive-icon.svg b/src/components/NavBar/images/SVG/Others/archive-icon.svg new file mode 100644 index 00000000..8edfee9c --- /dev/null +++ b/src/components/NavBar/images/SVG/Others/archive-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/NavBar/images/SVG/Others/perma-cc-icon.svg b/src/components/NavBar/images/SVG/Others/perma-cc-icon.svg new file mode 100644 index 00000000..1cb369e6 --- /dev/null +++ b/src/components/NavBar/images/SVG/Others/perma-cc-icon.svg @@ -0,0 +1,10 @@ + + + + Imported Layers + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx index 52c16c77..9fa0033f 100644 --- a/src/components/NavItems/tools/Archive/components/urlArchive.jsx +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -1,6 +1,17 @@ -import { Box, Button, Grid2, Link, Stack, Typography } from "@mui/material"; +import { + Box, + Button, + Grid2, + Icon, + Link, + Stack, + Tooltip, + Typography, +} from "@mui/material"; import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace"; import { useEffect, useState } from "react"; +import IconPermaCC from "../../../../NavBar/images/SVG/Others/perma-cc-icon.svg"; +import IconInternetArchive from "../../../../NavBar/images/SVG/Others/archive-icon.svg"; const UrlArchive = ({ url, openLinks }) => { const [platform, setPlatform] = useState(null); @@ -43,6 +54,35 @@ const UrlArchive = ({ url, openLinks }) => { } }, [platform]); + const saveToInternetArchive = (link) => { + console.log("opening window"); + window.open("https://web.archive.org/save/" + link, "_blank"); + }; + + const ArchiveLink = ({ link, link_type_keyword }) => { + return ( + <> + + {keyword(link_type_keyword)} + + + + + + + + + + {link} + + + ); + }; + return ( <> @@ -82,16 +122,30 @@ const UrlArchive = ({ url, openLinks }) => { <> {platform === "youtube" ? ( <> - {"Embed Link:"} + {/* + {keyword("embed_link")} + + + + + + + + {urls[0]} - + */} + ) : ( <> {platform === "instagram" ? ( <> - {"Embed Link:"} + {keyword("embed_link")} {urls[0]} From c52d1484550a1fc297510d64ce1c9a6442c74b02 Mon Sep 17 00:00:00 2001 From: robfrks Date: Fri, 20 Sep 2024 15:00:24 +0200 Subject: [PATCH 12/16] buttons added to instagram and facebook --- .../tools/Archive/components/urlArchive.jsx | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx index 9fa0033f..31dbf04d 100644 --- a/src/components/NavItems/tools/Archive/components/urlArchive.jsx +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -103,20 +103,23 @@ const UrlArchive = ({ url, openLinks }) => { - {keyword("embed_link")} + {/* {keyword("embed_link")} {urls[0]} - + */} + - {keyword("android_link")} + {/* {keyword("android_link")} {urls[1]} - + */} + - {keyword("mobile_link")} + {/* {keyword("mobile_link")} {urls[2]} - + */} + ) : ( <> @@ -145,10 +148,14 @@ const UrlArchive = ({ url, openLinks }) => { <> {platform === "instagram" ? ( <> - {keyword("embed_link")} + {/* {keyword("embed_link")} {urls[0]} - + */} + ) : ( {keyword("unsupported_platform")} From dbadf1f2b48a8f667fd351b9dabe9d75ef8ca42d Mon Sep 17 00:00:00 2001 From: robfrks Date: Fri, 20 Sep 2024 15:08:05 +0200 Subject: [PATCH 13/16] removed commented code and logs --- .../tools/Archive/components/urlArchive.jsx | 46 ++----------------- .../NavItems/tools/Archive/index.jsx | 2 - 2 files changed, 5 insertions(+), 43 deletions(-) diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx index 31dbf04d..96ff270a 100644 --- a/src/components/NavItems/tools/Archive/components/urlArchive.jsx +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -16,7 +16,6 @@ import IconInternetArchive from "../../../../NavBar/images/SVG/Others/archive-ic const UrlArchive = ({ url, openLinks }) => { const [platform, setPlatform] = useState(null); const [urls, setUrls] = useState([]); - console.log(url); const keyword = i18nLoadNamespace("components/NavItems/tools/Archive"); @@ -55,7 +54,6 @@ const UrlArchive = ({ url, openLinks }) => { }, [platform]); const saveToInternetArchive = (link) => { - console.log("opening window"); window.open("https://web.archive.org/save/" + link, "_blank"); }; @@ -102,56 +100,22 @@ const UrlArchive = ({ url, openLinks }) => { {keyword("open_links_button")} - - {/* {keyword("embed_link")} - - {urls[0]} - */} - - - {/* {keyword("android_link")} - - {urls[1]} - */} - - - {/* {keyword("mobile_link")} - - {urls[2]} - */} - + + + + + ) : ( <> {platform === "youtube" ? ( <> - {/* - {keyword("embed_link")} - - - - - - - - - - {urls[0]} - */} ) : ( <> {platform === "instagram" ? ( <> - {/* {keyword("embed_link")} - - {urls[0]} - */} { setUrlResults(true); setUrlInput(mainUrl); } else if (url && url !== "") { - console.log(url); setUrlResults(true); setUrlInput(url); archiveUrlSet(url); @@ -232,7 +231,6 @@ const Archive = () => { {urlResults && urlInput !== "" ? ( <> - {console.log("urlResults: " + urlResults)} ) : null} From 78ef4922c60cd64202cfbe9e863935ff818dda0b Mon Sep 17 00:00:00 2001 From: robfrks Date: Mon, 23 Sep 2024 10:13:19 +0200 Subject: [PATCH 14/16] added save buttons keywords --- .../NavItems/tools/Archive/components/urlArchive.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/NavItems/tools/Archive/components/urlArchive.jsx b/src/components/NavItems/tools/Archive/components/urlArchive.jsx index 96ff270a..3be1a56d 100644 --- a/src/components/NavItems/tools/Archive/components/urlArchive.jsx +++ b/src/components/NavItems/tools/Archive/components/urlArchive.jsx @@ -63,12 +63,12 @@ const UrlArchive = ({ url, openLinks }) => { {keyword(link_type_keyword)} - + - + From 93e17901d648c899eb4afb9b9ee3d5ec47a389b2 Mon Sep 17 00:00:00 2001 From: Valentin Porcellini Date: Wed, 30 Oct 2024 17:51:35 +0100 Subject: [PATCH 15/16] Updated README.md --- README.md | 86 ++++++++++++++++++++++++------------------------------- 1 file changed, 37 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 0871f86c..a467ace4 100644 --- a/README.md +++ b/README.md @@ -45,27 +45,44 @@ The Verification plugin is a browser based plugin built with React and Redux. 3. Add an `.env` file at the root containing ``` - REACT_APP_ELK_URL=/twinttweets/_search - REACT_APP_TWINT_WRAPPER_URL= - REACT_APP_FACEBOOK_APP_ID= - REACT_APP_TRANSLATION_GITHUB=https://raw.githubusercontent.com/AFP-Medialab/InVID-Translations/react/ - REACT_APP_KEYFRAME_TOKEN= - REACT_APP_MY_WEB_HOOK_URL= - REACT_APP_GOOGLE_ANALYTICS_KEY= - REACT_APP_MAP_TOKEN= - REACT_APP_BASEURL= + REACT_APP_KEYFRAME_API= + REACT_APP_MY_WEB_HOOK_URL= + REACT_APP_TRANSLATION_URL= + REACT_APP_TRANSLATION_TAG= + REACT_APP_TSNA_SERVER= + REACT_APP_ASSISTANT_URL= + REACT_APP_DBKF_SEARCH_API= + REACT_APP_DBKF_SIMILARITY_API= + REACT_APP_BASEURL= + REACT_APP_CAA_FORENSICS_URL= + REACT_APP_CAA_ANALYSIS_URL= + REACT_APP_CAA_ENVISU4_UTILS_URL= + REACT_APP_CAA_DEEPFAKE_URL= + REACT_APP_CAA_LOCATION_URL= + REACT_APP_MATOMO_URL= + REACT_APP_MATOMO_DOMAIN= + MATOMO_SITE= + REACT_APP_VIDEORIGHT_API= + REACT_APP_LOCCUS_URL= + REACT_APP_AFP_REVERSE_SEARCH_URL= + REACT_APP_SEMANTIC_SEARCH_URL= + ARCHIVE_BACKEND= ``` ## Build the project - Run the `dev` script to build the React app in development mode ``` - npm run dev + +npm run dev + ``` - Run the `build` to build the React app for production ``` - npm run build + +npm run build + ``` @@ -79,53 +96,18 @@ The Verification plugin is a browser based plugin built with React and Redux. - Enable **Developer Mode** by clicking the toggle switch next to Developer mode. - Click the **Load unpacked** button and select the extension directory (go inside the `build` folder). -#### Firefox ( ⚠️ deprecated) - -- In firefox menu click on `Add-ons` -- Then click on the gear button `⚙⌄` -- Then click on `Debug Add-ons` -- Then click on `Load TEmporary Add-on...` -- Select the `manifest.json` in the `dev` or `build` file you generated earlier. - -## Project folders structure - -`public` the configuration files for an extension `manifest.json` and the root html file `popup.html` - -`src/background` scripts executed in the web browser background by the extension. The contextual menu for example. - -`src/Hooks` Custom hooks used in this project. - -`src/LocalDictionary` The offline translation files fallback used when the server cannot provide the translation - -`src/redux` react-redux actions and -reducers. [Documentation](https://react-redux.js.org/) - -`src/components` The main custom React components used in this project. - -`src/components/Shared` Small React components reused in other components. - -`src/components/FeedBack`The FeedBack tool - -`src/components/PopUp` The extension's PopUp - -`src/components/MySnackBar` The arrow to get back to the top of the page. - -`src/components/Navbar` The NavBar and its Drawer (for tools) - -`src/components/NavItems` All the components displayed by the navBar. - -`src/components/NavItems/tools` All components that the `tools drawer` can display. - ## Testing The [playwright](https://playwright.dev/) framework is used for e2e, component and unit testing. All tests are located in the `tests` folder with the following structure: ``` + tests !- component_unit - Component and unit testing |- e2e - End to end testing --- examples - Examples to serve as a reference only +-- examples - Examples to serve as a reference only + ``` **Note: Before running all (or just e2e) tests, the extension must first be built. See End-to-end (e2e) testing section @@ -134,7 +116,9 @@ for more details** All tests (e2e, component & unit) can be run using the command: ``` + npm run test + ``` ### Component and Unit testing @@ -142,7 +126,9 @@ npm run test Component and unit testing are run together using the following command: ``` + npm run test-cu + ``` Playwright configurations of the component and unit tests can be found in `/playwright-ct.config.js` @@ -167,7 +153,9 @@ tests. E2E testing can be run using the following command: ``` + npm run test-e2e + ``` Playwright configurations of the e2e tests can be found in `/playwright.config.ts`. From b13c5750caf9a7c749635b5bee8a646d93ff4bcb Mon Sep 17 00:00:00 2001 From: Valentin Porcellini Date: Wed, 30 Oct 2024 18:07:40 +0100 Subject: [PATCH 16/16] Fixed layout issue --- README.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index a467ace4..e5a5490a 100644 --- a/README.md +++ b/README.md @@ -73,26 +73,21 @@ The Verification plugin is a browser based plugin built with React and Redux. - Run the `dev` script to build the React app in development mode ``` - -npm run dev - + npm run dev ``` - Run the `build` to build the React app for production ``` - -npm run build - + npm run build ``` - ## Load the extension on the browser #### Google Chrome / Chromium-based browsers [Chrome for Developers documentation](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) -- Go to the Extensions page by entering [chrome://extensions/](chrome://extensions/) in a new tab. +- Go to the Extensions page by entering [chrome://extensions/](chrome://extensions/) in a new tab. - Enable **Developer Mode** by clicking the toggle switch next to Developer mode. - Click the **Load unpacked** button and select the extension directory (go inside the `build` folder).