Add embed option and component

Other fixes: tiles in proxy page for settings, updated search function, fixed defaults

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>
+        </>
+    )
+}

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>
+    )
+};

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"

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": ""

src/locales/ja.json

@@ -36,7 +36,7 @@
       "subtitle": "好きな言語を選んでください",
       "japanese": "日本語",
       "english": "英語",
-      "spanish": "スペイン語"
+      "spanish": "スペイン語",
       "german": "",
       "greek": "",
       "dutch": ""

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";
+  const localProxy = localStorage.getItem("proxy") || "automatic";
-  var proxyMode = localStorage.getItem("proxyMode") || "direct";
+  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;
+  let 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;
-  }
 
   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.)
+  );
 }

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>

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>

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));
+}

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: {}
   },