mirror of
https://github.com/DustinBrett/daedalOS.git
synced 2025-12-06 12:20:20 +01:00
Add "proxy" to browser
This commit is contained in:
Dustin Brett
parent
1f696bcea2
commit
ae13d0da6b
|
|
@ -28,3 +28,9 @@ export const Stop = memo(() => (
|
|||
<path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
||||
</svg>
|
||||
));
|
||||
|
||||
export const Network = memo(() => (
|
||||
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M512 0q70.5 0 136 18.25t122.5 51.5 103.75 80 80 103.75 51.5 122.5T1024 512t-18.25 136-51.5 122.5-80 103.75-103.75 80-122.5 51.5T512 1024t-136-18.25-122.5-51.5-103.75-80-80-103.75-51.5-122.25T0 512q0-70.5 18.25-136t51.5-122.5 80-103.75 103.75-80 122.25-51.5T512 0zm404.5 320q-19-40.5-46-76.25t-60-65.25T739 126t-80.5-37.5q18 25 32.5 53t25.75 57.75T736 259.5t14 60.5h166.5zM960 512q0-66.5-18.5-128H760q4 32 6 63.75t2 64.25-2 64.25-6 63.75h181.5Q960 578.5 960 512zM512 960q24.5 0 45.75-13.5T597 911t32.25-49.75T654.5 805t18.5-55 11.5-46h-345q4 19.5 11.5 46t18.5 55 25.25 56.25T427 911t39.25 35.5T512 960zm183.5-320q4-32 6.25-63.75T704 512t-2.25-64.25T695.5 384h-367q-4 32-6.25 63.75T320 512t2.25 64.25T328.5 640h367zM64 512q0 66.5 18.5 128H264q-4-32-6-63.75T256 512t2-64.25 6-63.75H82.5Q64 445.5 64 512zM512 64q-24.5 0-45.75 13.5T427 113t-32.25 49.75T369.5 219 351 274t-11.5 46h345q-4-19.5-11.5-46t-18.5-55-25.25-56.25T597 113t-39.25-35.5T512 64zM365.5 88.5Q323.5 103 285 126t-71.5 52.5-60 65.25-46 76.25H274q6-30 14-60.5t19.25-60.25T333 141.5t32.5-53zM107.5 704q19 40.5 46 76.25t60 65.25T285 898t80.5 37.5q-18-25-32.5-53t-25.75-57.75T288 764.5 274 704H107.5zm551 231.5q42-14.5 80.5-37.5t71.5-52.5 60-65.25 46-76.25H750q-6 30-14 60.5t-19.25 60.25T691 882.5t-32.5 53z" />
|
||||
</svg>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -43,6 +43,16 @@ const StyledBrowser = styled.div<StyledBrowserProps>`
|
|||
width: 20px;
|
||||
}
|
||||
|
||||
&.proxy {
|
||||
margin: 0 10px 0 4px;
|
||||
width: 40px;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(103, 103, 103);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ type Bookmark = {
|
|||
url: string;
|
||||
};
|
||||
|
||||
export type WaybackUrlInfo = {
|
||||
archived_snapshots: { closest: { url: string } };
|
||||
};
|
||||
|
||||
export const DINO_GAME = {
|
||||
icon: "/System/Icons/Favicons/dino.webp",
|
||||
name: "T-Rex Chrome Dino Game",
|
||||
|
|
@ -59,3 +63,13 @@ export const LOCAL_HOST = new Set(["127.0.0.1", "localhost"]);
|
|||
|
||||
export const NOT_FOUND =
|
||||
'<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"><html><head><title>404 Not Found</title><style>h1{display:inline;}</style></head><body><h1>Not Found</h1><p>The requested URL was not found on this server.</p></body></html>';
|
||||
|
||||
export const OLD_NET_PROXY =
|
||||
"https://theoldnet.com/get?scripts=true&decode=true&year=<year>&url=";
|
||||
|
||||
export const OLD_NET_SUPPORTED_YEARS = [
|
||||
1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008,
|
||||
2009, 2010, 2011, 2012,
|
||||
];
|
||||
|
||||
export const WAYBACK_URL_INFO = "https://archive.org/wayback/available?url=";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { basename, join, resolve } from "path";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import useProxyMenu, {
|
||||
type ProxyState,
|
||||
} from "components/apps/Browser/useProxyMenu";
|
||||
import { ADDRESS_INPUT_PROPS } from "components/apps/FileExplorer/AddressBar";
|
||||
import useHistoryMenu from "components/apps/Browser/useHistoryMenu";
|
||||
import useBookmarkMenu from "components/apps/Browser/useBookmarkMenu";
|
||||
|
|
@ -7,13 +10,21 @@ import {
|
|||
createDirectoryIndex,
|
||||
type DirectoryEntries,
|
||||
} from "components/apps/Browser/directoryIndex";
|
||||
import { Arrow, Refresh, Stop } from "components/apps/Browser/NavigationIcons";
|
||||
import {
|
||||
Arrow,
|
||||
Network,
|
||||
Refresh,
|
||||
Stop,
|
||||
} from "components/apps/Browser/NavigationIcons";
|
||||
import StyledBrowser from "components/apps/Browser/StyledBrowser";
|
||||
import {
|
||||
DINO_GAME,
|
||||
HOME_PAGE,
|
||||
LOCAL_HOST,
|
||||
NOT_FOUND,
|
||||
OLD_NET_PROXY,
|
||||
WAYBACK_URL_INFO,
|
||||
type WaybackUrlInfo,
|
||||
bookmarks,
|
||||
} from "components/apps/Browser/config";
|
||||
import { type ComponentProcessProps } from "components/system/Apps/RenderComponent";
|
||||
|
|
@ -102,6 +113,8 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
|
|||
position,
|
||||
moveHistory
|
||||
);
|
||||
const [proxyState, setProxyState] = useState<ProxyState>("CORS");
|
||||
const proxyMenu = useProxyMenu(proxyState, setProxyState);
|
||||
const bookmarkMenu = useBookmarkMenu();
|
||||
const setUrl = useCallback(
|
||||
async (addressInput: string): Promise<void> => {
|
||||
|
|
@ -302,7 +315,28 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
|
|||
setSrcDoc(newSrcDoc);
|
||||
prependFileToTitle(newTitle);
|
||||
} else {
|
||||
const addressUrl = processedUrl.href;
|
||||
let addressUrl = processedUrl.href;
|
||||
|
||||
if (proxyState === "WAYBACK_MACHINE") {
|
||||
try {
|
||||
const urlInfoResponse = await fetch(
|
||||
`${WAYBACK_URL_INFO}${addressUrl}`
|
||||
);
|
||||
const { archived_snapshots } =
|
||||
(await urlInfoResponse.json()) as WaybackUrlInfo;
|
||||
|
||||
if (archived_snapshots.closest.url) {
|
||||
addressUrl = archived_snapshots.closest.url;
|
||||
}
|
||||
} catch {
|
||||
// Ignore failure to fetch url
|
||||
}
|
||||
} else if (proxyState.startsWith("OLD_NET_")) {
|
||||
const year = proxyState.replace("OLD_NET_", "");
|
||||
const proxyUrl = OLD_NET_PROXY.replace("<year>", year);
|
||||
|
||||
addressUrl = `${proxyUrl}${processedUrl.href}`;
|
||||
}
|
||||
|
||||
changeIframeWindowLocation(addressUrl, contentWindow);
|
||||
|
||||
|
|
@ -357,6 +391,7 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
|
|||
initialTitle,
|
||||
open,
|
||||
prependFileToTitle,
|
||||
proxyState,
|
||||
readFile,
|
||||
readdir,
|
||||
setIcon,
|
||||
|
|
@ -423,6 +458,14 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
|
|||
}}
|
||||
{...ADDRESS_INPUT_PROPS}
|
||||
/>
|
||||
<Button
|
||||
className="proxy"
|
||||
onClick={proxyMenu.onContextMenuCapture}
|
||||
onContextMenu={haltEvent}
|
||||
{...label("Proxy settings")}
|
||||
>
|
||||
<Network />
|
||||
</Button>
|
||||
</nav>
|
||||
<nav>
|
||||
{bookmarks.map(({ name, icon, url: bookmarkUrl }) => (
|
||||
|
|
|
|||
41
components/apps/Browser/useProxyMenu.ts
Normal file
41
components/apps/Browser/useProxyMenu.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { useMemo } from "react";
|
||||
import { OLD_NET_SUPPORTED_YEARS } from "components/apps/Browser/config";
|
||||
import { useMenu } from "contexts/menu";
|
||||
import { type ContextMenuCapture } from "contexts/menu/useMenuContextState";
|
||||
|
||||
export type ProxyState = `CORS` | `OLD_NET_${number}` | "WAYBACK_MACHINE";
|
||||
|
||||
const useProxyMenu = (
|
||||
proxyState: ProxyState,
|
||||
setProxyState: React.Dispatch<React.SetStateAction<ProxyState>>
|
||||
): ContextMenuCapture => {
|
||||
const { contextMenu } = useMenu();
|
||||
|
||||
return useMemo(
|
||||
() =>
|
||||
contextMenu?.(() => [
|
||||
{
|
||||
action: () => setProxyState("CORS"),
|
||||
checked: proxyState === "CORS",
|
||||
label: "Local w/CORS",
|
||||
},
|
||||
{
|
||||
action: () => setProxyState("WAYBACK_MACHINE"),
|
||||
checked: proxyState === "WAYBACK_MACHINE",
|
||||
label: "Wayback Machine",
|
||||
},
|
||||
{
|
||||
checked: proxyState.startsWith("OLD_NET_"),
|
||||
label: "The Old Net",
|
||||
menu: OLD_NET_SUPPORTED_YEARS.map((year) => ({
|
||||
action: () => setProxyState(`OLD_NET_${year}`),
|
||||
checked: proxyState === `OLD_NET_${year}`,
|
||||
label: year.toString(),
|
||||
})),
|
||||
},
|
||||
]),
|
||||
[contextMenu, proxyState, setProxyState]
|
||||
);
|
||||
};
|
||||
|
||||
export default useProxyMenu;
|
||||
|
|
@ -95,3 +95,5 @@ This project is greatly augmented by code from the open source community. Thank
|
|||
|
||||
- [ntp.js](http://www.ntpjs.org/)
|
||||
- [Astronomy Picture of the Day](https://apod.nasa.gov/apod/)
|
||||
- [The Old Net](https://theoldnet.com/)
|
||||
- [Wayback Machine](https://web.archive.org/)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user