Done with the application. would be working on docs and possible fixes for unforseen bugs.

Programming-Sai · Programming-Sai · commit 74af04cc72a7 · 2025-09-16T15:02:27.000Z
diff --git a/app/_layout.js b/app/_layout.js
@@ -27,7 +27,7 @@ import { DownloadProvider } from "../contexts/DownloaderContext";
 import { useBackendUrl } from "../hooks/useBackendUrl";
 
 const API_BASE =
-  process.env.NEXT_PUBLIC_API_BASE || "https://0bea512690fc.ngrok-free.app";
+  process.env.NEXT_PUBLIC_API_BASE || "https://seekbeat.onrender.com";
 
 export default function Layout() {
   const [showSplashState, setShowSplashState] = useState(
diff --git a/app/settings.js b/app/settings.js
@@ -19,6 +19,8 @@ import { useShortcuts } from "../contexts/ShortCutContext";
 import { useResponsive } from "../contexts/ResponsiveContext";
 import { useBackendUrl } from "../hooks/useBackendUrl";
 import { HEXA } from "../lib/colors";
+import { ShortCutIcon } from "../components/ShortCutIcon";
+import InfoModal from "../components/InfoModal";
 
 export default function Settings() {
   const { setRightSidebarKey } = useRightSidebar();
@@ -28,6 +30,7 @@ export default function Settings() {
     base: shades.base,
   }));
   const [inputUrl, setInputUrl] = useState("");
+  const [openInfoModal, setsetOpenInfoModal] = useState(false);
   const { setShowShortcuts } = useShortcuts();
   const {
     saveSearchHistory,
@@ -41,12 +44,9 @@ export default function Settings() {
     forceProxy,
     setForceProxy,
   } = useAppStorage();
-  const { isAtOrBelow, isBetween, isAtOrAbove } = useResponsive();
-  const betweenTabletAndLaptop = isBetween("md", "lg");
+  const { isAtOrBelow } = useResponsive();
   const mobileAndBelow = isAtOrBelow("sm");
-  const tabletAndAbove = isAtOrAbove("md", true);
   const laptopAndBelow = isAtOrBelow("xl");
-  const laptopAndAbove = isAtOrAbove("xl", true);
   const tabletAndBelow = isAtOrBelow("md", true);
 
   const {
@@ -113,7 +113,7 @@ export default function Settings() {
   };
 
   const handleResetURL = () => {
-    if (confirm("Restore the default URL (http://127.0.0.1:8000)?")) {
+    if (confirm("Restore the default URL (https://seekbeat.onrender.com)?")) {
       try {
         resetBackendUrl();
         // optionally show toast/snackbar
@@ -578,6 +578,14 @@ export default function Settings() {
                   gap: 10, // RN 0.71+ supports gap; otherwise use margin
                 }}
               >
+                <TouchableOpacity onPress={() => setsetOpenInfoModal(true)}>
+                  <InfoIcon size={30} color={theme.accent} />
+                </TouchableOpacity>
+                <InfoModal
+                  visible={openInfoModal}
+                  onClose={() => setsetOpenInfoModal(false)}
+                  theme={theme}
+                />
                 <TextInput
                   value={inputUrl}
                   onChangeText={setInputUrl}
@@ -595,7 +603,7 @@ export default function Settings() {
                     color: theme.text,
                   }}
                   placeholderTextColor={theme.textSecondary}
-                  placeholder={backendUrl || "http://localhost:8000"}
+                  placeholder={backendUrl || "https://seekbeat.onrender.com"}
                 />
 
                 <TouchableOpacity
@@ -751,8 +759,16 @@ export default function Settings() {
               </Text>
             </View>
             <View style={styles.settingDescSet}>
-              <TouchableOpacity onPress={() => setShowShortcuts(true)}>
-                <InfoIcon size={50} color={theme.accent} />
+              <TouchableOpacity
+                onPress={() => setShowShortcuts(true)}
+                style={{
+                  padding: 10,
+                  borderWidth: 1,
+                  borderColor: theme.accent,
+                  borderRadius: 100,
+                }}
+              >
+                <ShortCutIcon size={50} color={theme.accent} />
               </TouchableOpacity>
             </View>
           </View>
diff --git a/components/AccordionGroup.jsx b/components/AccordionGroup.jsx
@@ -10,7 +10,7 @@ export default function AccordionGroup({
   viewMode = "list",
   initiallyExpanded = false,
 }) {
-  console.log("Accordion: ", block);
+  // console.log("Accordion: ", block);
   const [expanded, setExpanded] = useState(initiallyExpanded);
   const { theme } = useTheme();
   const termText = block?.search_term?.query ?? "Search";
diff --git a/components/InfoModal.jsx b/components/InfoModal.jsx
@@ -0,0 +1,96 @@
+import React from "react";
+import {
+  Modal,
+  View,
+  ScrollView,
+  Text,
+  Pressable,
+  Linking,
+} from "react-native";
+import { HEXA } from "../lib/colors";
+
+export default function InfoModal({ visible, onClose, theme }) {
+  const openReleases = () =>
+    Linking.openURL("https://github.com/Programming-Sai/SeekBeat/releases");
+
+  return (
+    <Modal visible={visible} animationType="fade" transparent>
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: HEXA(theme.text, 0.7),
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <View
+          style={{
+            backgroundColor: theme.background,
+            borderRadius: 12,
+            width: "90%",
+            maxHeight: "85%",
+            padding: 20,
+          }}
+        >
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <Text style={{ fontSize: 22, color: theme.text, marginBottom: 16 }}>
+              Seekbeat Companion Backend
+            </Text>
+
+            <Text style={{ color: theme.textSecondary, marginBottom: 12 }}>
+              Seekbeat relies on a companion backend for search, streaming, and
+              downloads. The default hosted URL supports search only. To unlock
+              full functionality, run the backend yourself.
+            </Text>
+
+            <Text style={{ color: theme.text, fontWeight: "600" }}>
+              Quick Setup
+            </Text>
+            <Text style={{ color: theme.textSecondary, marginBottom: 12 }}>
+              1. Download the latest Windows .exe from{" "}
+              <Text
+                style={{ color: theme.accent, fontWeight: "bold" }}
+                onPress={openReleases}
+              >
+                Github Releases
+              </Text>
+              .{"\n"}2. Double-click the .exe to start the server.
+              {"\n"}3. Copy the URL shown in the console (e.g.
+              http://192.168.x.x:8000).
+              {"\n"}4. Paste it into Settings → Backend URL → Test.
+            </Text>
+
+            <Text style={{ color: theme.text, fontWeight: "600" }}>
+              Mobile Access
+            </Text>
+            <Text style={{ color: theme.textSecondary, marginBottom: 12 }}>
+              • Run the backend on a laptop/desktop.
+              {"\n"}• On the same Wi-Fi, use the http://192.168.x.x:8000 IP.
+              {"\n"}• For remote access, install ngrok, run `ngrok http 8000`,
+              and use the generated URL.
+            </Text>
+
+            <Text style={{ color: theme.textSecondary }}>
+              Keep the console open while using Seekbeat. Allow firewall access
+              if prompted.
+            </Text>
+          </ScrollView>
+
+          <Pressable
+            style={{
+              marginTop: 20,
+              alignSelf: "center",
+              paddingHorizontal: 20,
+              paddingVertical: 10,
+              backgroundColor: theme.accent,
+              borderRadius: 8,
+            }}
+            onPress={onClose}
+          >
+            <Text style={{ color: "#fff", fontWeight: "600" }}>Got it</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
diff --git a/components/ShortCutIcon.jsx b/components/ShortCutIcon.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export function ShortCutIcon({ size = 24, color = "currentColor" }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 11L15 5V10H8C5.24 10 3 12.24 3 15V19H5V15C5 13.35 6.35 12 8 12H15V17L21 11Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/contexts/DownloaderContext.js b/contexts/DownloaderContext.js
@@ -1,6 +1,7 @@
 // hooks/useDownloader.js
 import { createContext, useCallback, useContext } from "react";
 import { useAppStorage } from "../contexts/AppStorageContext";
+import { isNgrokUrl } from "../lib/utils";
 
 /**
  * useDownloader - returns a `download` function to trigger backend POST download.
@@ -9,10 +10,7 @@ import { useAppStorage } from "../contexts/AppStorageContext";
  */
 const DownloadContext = createContext(null);
 
-export function DownloadProvider({
-  children,
-  downloadBase = "https://0bea512690fc.ngrok-free.app",
-}) {
+export function DownloadProvider({ children, downloadBase = null }) {
   const { addDownload, updateDownload, setDownloadStatus, getLastSearch } =
     useAppStorage();
 
@@ -50,12 +48,18 @@ export function DownloadProvider({
       // set transient/persistent status (pending)
       setDownloadStatus(id, "pending");
 
+      const headers = {};
+      if (isNgrokUrl(downloadBase)) {
+        headers["ngrok-skip-browser-warning"] = "true";
+      }
+      headers["Content-Type"] = "application/json";
+
       try {
         const res = await fetch(
           `${downloadBase}/api/stream/${encodeURIComponent(id)}/`,
           {
             method: "POST",
-            headers: { "Content-Type": "application/json" },
+            headers,
             body: JSON.stringify({ edits: edits || {} }),
           }
         );
diff --git a/contexts/PlayerContext.js b/contexts/PlayerContext.js
@@ -9,6 +9,7 @@ import React, {
   useState,
 } from "react";
 import { useAppStorage } from "./AppStorageContext";
+import { isNgrokUrl } from "../lib/utils";
 
 /**
  * PlayerContext - adjusted:
@@ -18,10 +19,7 @@ import { useAppStorage } from "./AppStorageContext";
 
 const PlayerContext = createContext(null);
 
-export function PlayerProvider({
-  children,
-  streamBase = "https://0bea512690fc.ngrok-free.app",
-}) {
+export function PlayerProvider({ children, streamBase = null }) {
   const [queue, setQueue] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(-1);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -287,13 +285,14 @@ export function PlayerProvider({
 
     const controller = new AbortController();
     const promise = (async () => {
+      const headers = {};
+      if (isNgrokUrl(streamBase)) {
+        headers["ngrok-skip-browser-warning"] = "true";
+      }
       try {
         const res = await fetch(endpoint, {
           signal: controller.signal,
-          headers: {
-            // other headers you need...
-            "ngrok-skip-browser-warning": "true",
-          },
+          headers,
         });
         // if (!res.ok) throw new Error("fetch failed: " + res.status);
         const data = await res.json();
@@ -327,12 +326,6 @@ export function PlayerProvider({
     (song) => {
       if (!song) return null;
       if (streamBase) {
-        console.log(
-          "Should be streaming from here: ",
-          `${streamBase}/api/stream/${encodeURIComponent(
-            song.id || song.webpage_url || ""
-          )}/`
-        );
         return `${streamBase}/api/stream/${encodeURIComponent(
           song.id || song.webpage_url || ""
         )}/`;
diff --git a/contexts/SearchContext.js b/contexts/SearchContext.js
@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { normalizeSearchResponse } from "../lib/utils";
+import { isNgrokUrl, normalizeSearchResponse } from "../lib/utils";
 import { useAppStorage } from "./AppStorageContext";
 
 const SearchContext = createContext(null);
@@ -56,7 +56,7 @@ function augmentWithId(normalized) {
 export function SearchProvider({
   children,
   defaultPageSize = 12,
-  searchBase = "https://0bea512690fc.ngrok-free.app",
+  searchBase = null,
 }) {
   const [query, setQuery] = useState("");
   const [response, setResponse] = useState(null);
@@ -110,13 +110,14 @@ export function SearchProvider({
       setError(null);
 
       const url = `${searchBase}/api/search/?query=${encodeURIComponent(q)}`;
+      const headers = {};
+      if (isNgrokUrl(searchBase)) {
+        headers["ngrok-skip-browser-warning"] = "true";
+      }
       try {
         const res = await fetch(url, {
           signal: controller.signal,
-          headers: {
-            // other headers you need...
-            "ngrok-skip-browser-warning": "true",
-          },
+          headers,
         });
         console.log("[SEARCH] Request URL:", url);
         console.log("[SEARCH] Response URL (final):", res.url);
@@ -166,6 +167,7 @@ export function SearchProvider({
           console.error("Search error:", err);
           setError(err.message || String(err));
         }
+        console.log("Sorry Something went wrong: ", String(err), url);
       } finally {
         setIsLoading(false);
         abortRef.current = null;
diff --git a/hooks/useBackendUrl.js b/hooks/useBackendUrl.js
@@ -2,7 +2,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 const STORAGE_KEY = "seekbeat:backend_base";
-const DEFAULT_BACKEND = "http://127.0.0.1:8000";
+const DEFAULT_BACKEND = "https://seekbeat.onrender.com";
 
 // simple in-window pubsub so multiple hook instances in same document sync immediately
 const backendEventTarget =
diff --git a/lib/utils.js b/lib/utils.js
@@ -231,3 +231,11 @@ export function timeAgo(isoDateString) {
 
   return "just now";
 }
+
+export function isNgrokUrl(url = "") {
+  return (
+    url.includes("ngrok-free.app") || // free ngrok subdomains
+    url.includes("ngrok.app") || // paid/ngrok.io custom ones
+    /https:\/\/.*\.ngrok(-free)?\.app/i.test(url)
+  );
+}
