From 3a9024d1e0116cb48a84798bb9b97a1d01a4624a Mon Sep 17 00:00:00 2001
From: MotorTruck1221 <tuckerj0606@icloud.com>
Date: Tue, 26 Dec 2023 03:35:41 -0700
Subject: [PATCH] Add embed option and component

Other fixes: tiles in proxy page for settings, updated search function, fixed defaults
---
 src/components/iframe/Iframe.tsx       | 13 ++++++++++
 src/components/iframe/IframeHeader.tsx | 33 ++++++++++++++++++++++++++
 src/locales/en.json                    |  2 +-
 src/locales/es.json                    |  2 +-
 src/locales/ja.json                    |  2 +-
 src/pages/ProxyFrame.tsx               | 31 ++++++++++++------------
 src/pages/Settings/Proxy.tsx           |  4 ++--
 src/pages/Settings/index.tsx           |  2 +-
 src/util/searchUtil.ts                 | 10 ++++++++
 tailwind.config.js                     |  2 +-
 10 files changed, 78 insertions(+), 23 deletions(-)
 create mode 100644 src/components/iframe/Iframe.tsx
 create mode 100644 src/components/iframe/IframeHeader.tsx
 create mode 100644 src/util/searchUtil.ts

diff --git a/src/components/iframe/Iframe.tsx b/src/components/iframe/Iframe.tsx
new file mode 100644
index 0000000..4670203
--- /dev/null
+++ b/src/components/iframe/Iframe.tsx
@@ -0,0 +1,13 @@
+import { motion } from "framer-motion"
+import { IframeHeader } from "./IframeHeader"
+
+export function Iframe(props: { url: string }) {
+    return (
+        <>
+            <IframeHeader url={ props.url } />
+            <motion.div className="w-full h-[calc(100%_-_4rem)] bg-primary" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.5 }} >
+                <iframe id="iframe" src={ props.url } className="w-full h-full border-none bg-primary" />
+            </motion.div>
+        </>
+    )
+}
diff --git a/src/components/iframe/IframeHeader.tsx b/src/components/iframe/IframeHeader.tsx
new file mode 100644
index 0000000..c6da442
--- /dev/null
+++ b/src/components/iframe/IframeHeader.tsx
@@ -0,0 +1,33 @@
+import { useState } from "preact/hooks";
+import { useTranslation } from "react-i18next";
+import { Link } from "preact-router";
+import { RiPictureInPictureExitFill, RiFullscreenFill } from "react-icons/ri"
+
+export function IframeHeader(props: { url: string }) {
+    const { t } = useTranslation()
+    const [showPopout, setShowPopout] = useState(false);
+    const [showFullScreen, setFullScreen] = useState(false);
+    if (showPopout) {
+        window.location.replace(props.url);
+    }
+    if (showFullScreen) {
+        document.getElementById("iframe").requestFullscreen();
+        setFullScreen(false);
+    }
+    return (
+        <div id="iframeNav" className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4">
+            <Link href="/" class="w-1/2">
+                <div className="flex flex-row items-center">
+                    <img src="/logo.png" className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"></img>
+                    <h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl"> {t("header.title")} </h1>
+                </div>
+            </Link>
+            <div id="navItems" class="w-1/2"> 
+                <div className="flex flex-row items-center justify-end gap-3 mr-4">
+                    <RiPictureInPictureExitFill className="h-6 w-6 cursor-pointer transition-all duration-0500 text-navbar-text-color hover:scale-110 hover:brightness-125" onClick={() => setShowPopout(true)} />
+                    <RiFullscreenFill className="h-6 w-6 cursor-pointer transition-all duration-0500 text-navbar-text-color hover:scale-110 hover:brightness-125 active:rotate-90" onClick={() => setFullScreen(true)} />
+                </div>
+            </div>
+        </div>
+    )
+};
diff --git a/src/locales/en.json b/src/locales/en.json
index bf6d3a0..2bb5837 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -36,7 +36,7 @@
       "subtitle": "Choose your preferred language",
       "japanese": "Japanese",
       "english": "English",
-      "spanish": "Spanish"
+      "spanish": "Spanish",
       "german": "German",
       "greek": "Greek",
       "dutch": "Dutch"
diff --git a/src/locales/es.json b/src/locales/es.json
index 923d6ff..4f26d61 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -36,7 +36,7 @@
       "subtitle": "Elige tu idioma preferido",
       "japanese": "Japonés",
       "english": "Inglés",
-      "spanish": "Español"
+      "spanish": "Español",
       "german": "",
       "greek": "",
       "dutch": ""
diff --git a/src/locales/ja.json b/src/locales/ja.json
index c941612..3c87114 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -36,7 +36,7 @@
       "subtitle": "好きな言語を選んでください",
       "japanese": "日本語",
       "english": "英語",
-      "spanish": "スペイン語"
+      "spanish": "スペイン語",
       "german": "",
       "greek": "",
       "dutch": ""
diff --git a/src/pages/ProxyFrame.tsx b/src/pages/ProxyFrame.tsx
index a338e15..45906d6 100644
--- a/src/pages/ProxyFrame.tsx
+++ b/src/pages/ProxyFrame.tsx
@@ -1,5 +1,8 @@
 import { RammerheadEncode } from "../util/RammerheadEncode";
+import { searchUtil } from "../util/searchUtil";
 import { useEffect, useState } from "preact/hooks";
+//import our Iframe component
+import { Iframe } from "../components/iframe/Iframe";
 
 declare global {
   interface Window {
@@ -10,21 +13,16 @@ declare global {
 
 export function ProxyFrame(props: { url: string }) {
   // pass the URL encoded with encodeURIcomponent
-  var localProxy = localStorage.getItem("proxy") || "automatic";
-  var proxyMode = localStorage.getItem("proxyMode") || "direct";
+  const localProxy = localStorage.getItem("proxy") || "automatic";
+  const proxyMode = localStorage.getItem("proxyMode") || "direct";
 
-  var [ProxiedUrl, setProxiedUrl] = useState<string | undefined>(undefined);
+  const [ProxiedUrl, setProxiedUrl] = useState<string | undefined>(undefined);
 
-  var decodedUrl = decodeURIComponent(props.url);
+  let decodedUrl = decodeURIComponent(props.url);
+  //attempt to convert to a valid url
+  decodedUrl = searchUtil(decodedUrl, "https://google.com/search?q=%s");
 
-  var proxyRef;
-
-  if (!decodedUrl.includes(".")) {
-    decodedUrl = "https://www.google.com/search?q=" + decodedUrl; // If the users input has no . then we change it to a google query. TODO: Feature to change search engines
-  }
-  if (!decodedUrl.startsWith("http://") || !decodedUrl.startsWith("https://")) {
-    decodedUrl = "https://" + decodedUrl;
-  }
+  let proxyRef;
 
   useEffect(() => {
     // For now we can redirect to the results. In the future we will add an if statement looking for the users proxy display choice
@@ -50,7 +48,8 @@ export function ProxyFrame(props: { url: string }) {
 
   if (proxyMode == "direct") {
     window.location.href = ProxiedUrl;
-  } else if (proxyMode == "aboutblank") {
+  } 
+  else if (proxyMode == "aboutblank") {
     const newWindow = window.open("about:blank", "_blank");
     const newDocument = newWindow.document.open();
     newDocument.write(`
@@ -73,13 +72,13 @@ export function ProxyFrame(props: { url: string }) {
     `);
     newDocument.close()
     window.location.replace("/");
-  } else {
-    // iframe
   }
 
   return (
     <div class="h-screen w-screen bg-primary">
       {proxyMode === "direct" && <h1>Loading {localProxy}...</h1>}
+      {proxyMode === "aboutblank" && <h1>Loading {localProxy}...</h1>}
+      {proxyMode === "embed" && <Iframe url={ProxiedUrl} normalUrl={decodedUrl} />}
     </div>
-  ); // @TODO: Routing (iframe, ab, direct, etc.)
+  );
 }
diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx
index e380e78..bb9604b 100644
--- a/src/pages/Settings/Proxy.tsx
+++ b/src/pages/Settings/Proxy.tsx
@@ -14,8 +14,8 @@ const Proxy = ({ id, active }) => {
   ];
 
   const proxyModes = [
-    { id: "embed", label: t("settings.proxymodes.embed") },
     { id: "direct", label: t("settings.proxymodes.direct") },
+    { id: "embed", label: t("settings.proxymodes.embed") },
     { id: "aboutblank", label: t("settings.proxymodes.aboutblank") }
   ];
 
@@ -30,7 +30,7 @@ const Proxy = ({ id, active }) => {
     >
       <motion.div
         variants={settingsPageVariant}
-        className="content-card flex flex-row flex-wrap justify-around"
+        className="content-card flex flex-row flex-wrap justify-left w-full gap-4"
       >
         <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
           <div class="p-2 text-3xl">{t("settings.proxy.title")}</div>
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
index 3fb82fc..87b10a0 100644
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -7,7 +7,7 @@ export function Settings() {
   return (
     <HeaderRoute>
       <Helmet>
-        <title>Settingsz</title>
+        <title>Settings</title>
       </Helmet>
       <TabComponent tabs={tabs} />
     </HeaderRoute>
diff --git a/src/util/searchUtil.ts b/src/util/searchUtil.ts
new file mode 100644
index 0000000..177af52
--- /dev/null
+++ b/src/util/searchUtil.ts
@@ -0,0 +1,10 @@
+export function searchUtil(input: string, template: string) {
+    try {
+        return new URL(input).toString();
+    } catch (error) {}
+    try {
+        const url = new URL(`http://${input}`);
+        if (url.hostname.includes(".")) return url.toString();
+    } catch (error) {}
+    return template.replace("%s", encodeURIComponent(input));
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index a59b413..7e5ee2b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,7 @@ export default {
       input: "var(--input-background-color)",
       "input-text": "var(--input-text-color)",
       "input-border-color": "var(--input-border-color)",
-      "dropdown-option-hover-color": "var(--dropdown-option-hover-color)"
+      "dropdown-option-hover-color": "var(--dropdown-option-hover-color)",
     },
     extend: {}
   },