visual changes, max res filter, new font

nxrmqlly · Oct 19, 2024 · cacbd7f · cacbd7f
1 parent ed87af4
commit cacbd7f
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 107 deletions.
diff --git a/backend/controllers/get.go b/backend/controllers/get.go
@@ -17,7 +17,7 @@ func (a *App) GetVideoInfo(videoURL string) (models.VideoInfo, error) {
 	// Capture the output
 	output, err := cmd.CombinedOutput()
 	if err != nil {
-		return models.VideoInfo{}, fmt.Errorf("yt-dlp error: %w", err)
+		return models.VideoInfo{}, fmt.Errorf("%s; output: %s", err, output)
 	}
 
 	// Parse the JSON output

diff --git a/backend/models/video.go b/backend/models/video.go
@@ -1,13 +1,15 @@
 package models
 
 type VideoInfo struct {
-	URL         string `json:"webpage_url"`
-	ID          string `json:"id"`
-	Title       string `json:"title"`
-	FPS         int    `json:"fps"`
-	Uploader    string `json:"uploader"`
-	UploaderURL string `json:"uploader_url"`
-	Duration    int    `json:"duration"` // Duration in seconds
-	ViewCount   int    `json:"view_count"`
-	Thumbnail   string `json:"thumbnail"`
+	URL         string  `json:"webpage_url"`
+	ID          string  `json:"id"`
+	Title       string  `json:"title"`
+	FPS         float32 `json:"fps"`
+	Uploader    string  `json:"uploader"`
+	UploaderURL string  `json:"uploader_url"`
+	Duration    int     `json:"duration"` // Duration in seconds
+	ViewCount   int     `json:"view_count"`
+	Thumbnail   string  `json:"thumbnail"`
+	Height      int     `json:"height"`
+	Width       int     `json:"width"`
 }
diff --git a/biome.json b/biome.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "linter": {
+    "rules": {
+      "style": {
+        "useConst": "off"
+      }
+    }
+  }
+}
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -1,17 +1,24 @@
 <script>
 import { GetVideoInfo } from "../wailsjs/go/controllers/App.js";
 import Toast from "./components/Toast.svelte";
+import "@fortawesome/fontawesome-free/css/all.min.css";
 import VideoModal from "./components/VideoModal.svelte";
 import ThemeSwitcher from "./components/ThemeSwitcher.svelte";
 import Link from "./components/Link.svelte";
 
-let url;
+let url = "";
 let errorMessage = "";
 let videoResult;
+let loading = false;
 
 let showToast = false;
 let showModal = false;
 
+function isValidURL(string) {
+	const regex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/;
+	return regex.test(string);
+}
+
 function openModal() {
 	showModal = true;
 }
@@ -25,8 +32,20 @@ function closeToast() {
 	showToast = false;
 }
 
+function handleSubmit(e) {
+	e.preventDefault();
+	handleButtonClick();
+}
+
 function handleButtonClick() {
 	if (!url) return;
+	if (!isValidURL(url)) {
+		errorMessage = "Error: Invalid URL";
+		openToast();
+		return;
+	}
+
+	loading = true;
 
 	GetVideoInfo(url)
 		.then((v) => {
@@ -35,44 +54,18 @@ function handleButtonClick() {
 		})
 		.catch((e) => {
 			openToast();
-			errorMessage = `${e}; Check your URL`;
+			errorMessage = e.toString();
+		})
+		.finally(() => {
+			loading = false;
 		});
 }
 </script>
 
-
-<main>
-<ThemeSwitcher />
-
-    <h1 class="title"><span>Youtube Downloader</span></h1>
-
-    <div class="input-box" id="input">
-        <input autocomplete="off" bind:value={url} class="input" id="name" type="text" placeholder="Enter your URL here..."/>
-        <button class="btn" on:click={handleButtonClick}>►</button>
-    </div>
-    <footer>
-        <p>Works with <Link ref="accent-anchor" href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md">almost anything</Link>. Blazingly fast, I guess.</p>
-        <p>Made by <Link ref="accent-anchor" href="https://github.com/nxrmqlly">@nxrmqlly</Link> with <Link ref="accent-anchor" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&pp=ygUIcmlja3JvbGw%3D">❤</Link> using Go and Svelte</p>
-    </footer>
-
-    {#if showModal}
-        <VideoModal
-        videoInfo={videoResult}
-            onClose={closeModal} 
-        />
-    {/if}
-
-    {#if showToast}
-        <Toast message={errorMessage} onClose={closeToast} />   
-    {/if}
-
-</main>
-
 <style>
 
 
     main {
-        font-family: Arial, sans-serif;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -103,27 +96,38 @@ function handleButtonClick() {
         border: 0.1em solid var(--accent);
         border-radius: 0.1em;
         overflow: hidden;
+        align-items: center;
+        /* padding: 0.5rem; */
     }
     .input {
         border: none;
         background-color: var(--bg-color);
         color: var(--fg-color);
-        padding: 10px;
         width: 30rem;
         outline: none;
         flex: 1;
     }
     .btn {
+        margin: 0;
+        top: 0;
+        right: 0;
         background-color: var(--accent);
         color: white;
         border: none;
-        padding: 10px 15px;
+        padding: 0.5rem 1.25rem;
+        /* width: 4rem; */
+        /* height: 0.5rem; */
+
         transition: background-color 0.3s;
     }
     .btn:hover {
         cursor: pointer;
         background-color: var(--duo-accent);
     }
+    .btn:disabled{
+        cursor: not-allowed;
+        background-color: var(--duo-accent);
+    }
     footer {
         user-select: none;
         position: absolute;
@@ -141,5 +145,45 @@ function handleButtonClick() {
         cursor: pointer;
         text-decoration: underline;
     }
+    .mag {
+        color: var(--accent);
+        padding: 0 0.75rem;
+    }
+    .btn-icon {
+        width: 1em;
+        height: 1em;
+    }
 
 </style>
+
+<main>
+<ThemeSwitcher />
+
+    <h1 class="title"><span>Youtube Downloader</span></h1>
+
+    <form class="input-box" id="input" on:submit={handleSubmit}>
+        <i class="mag fa-solid fa-magnifying-glass"></i>
+        <input autocomplete="off" bind:value={url} class="input" id="name" type="text" placeholder="Enter your URL here..."/>
+        <button class="btn" type="submit" on:click={handleButtonClick} disabled={loading || !url}>
+
+                <i class="btn-icon fa-solid fa-chevron-right"></i>
+
+        </button>
+    </form>
+    <footer>
+        <p>Works with <Link ref="accent-anchor" href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md">almost anything</Link>. Blazingly fast, I guess.</p>
+        <p>Made by <Link ref="accent-anchor" href="https://github.com/nxrmqlly">@nxrmqlly</Link> with <Link ref="accent-anchor" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&pp=ygUIcmlja3JvbGw%3D">❤</Link> using Go and Svelte</p>
+    </footer>
+
+    {#if showModal}
+        <VideoModal
+        videoInfo={videoResult}
+            onClose={closeModal} 
+        />
+    {/if}
+
+    {#if showToast}
+        <Toast message={errorMessage} onClose={closeToast} />   
+    {/if}
+
+</main>
diff --git a/frontend/src/assets/fonts/Satoshi-Regular.woff b/frontend/src/assets/fonts/Satoshi-Regular.woff
diff --git a/frontend/src/components/ThemeSwitcher.svelte b/frontend/src/components/ThemeSwitcher.svelte
@@ -16,9 +16,11 @@ function toggleTheme() {
 	isDarkMode = !isDarkMode;
 	if (!isDarkMode) {
 		document.documentElement.style.setProperty("--bg-color", "#100a0d");
+		document.documentElement.style.setProperty("--duo-bg-color", "#212021");
 		document.documentElement.style.setProperty("--fg-color", "#f6f3f4");
 	} else {
 		document.documentElement.style.setProperty("--bg-color", "#f6f3f4");
+		document.documentElement.style.setProperty("--duo-bg-color", "#f6f3f4");
 		document.documentElement.style.setProperty("--fg-color", "#100a0d");
 	}
 }
@@ -36,15 +38,14 @@ onMount(() => {
         top: 1rem;
         right: 1rem;
         color: var(--fg-color);
-        border: 1px solid var(--bg-color);
-        border-radius: 50%; /* Make it circular */
-        width: 50px; /* Set width */
-        height: 50px; /* Set height */
+        border-radius: 50%;        
+        width: 4rem; 
+        height: 4rem; 
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        font-size: 1.5rem; /* Increase font size for emoji */
+        font-size: 1.5rem;
     }
 
     .switcher:hover {
@@ -54,8 +55,8 @@ onMount(() => {
 
 <div class="switcher" on:click={toggleTheme} on:keydown={onAccesibilityKeydown}>
     {#if isDarkMode}
-        <i class="fas fa-moon"></i> <!-- Font Awesome moon icon -->
+        <i class="fas fa-regular fa-moon"></i>
     {:else}
-        <i class="fas fa-sun"></i> <!-- Font Awesome sun icon -->
+        <i class="fas fa-regular fa-sun"></i>
     {/if}
 </div>