fix: android app corners and new downloads page

app/layouts/default.vue

@@ -33,6 +33,7 @@ const navLinks = [
   { to: "/", label: "home" },
   { to: "/stream", label: "stream" },
   { to: "/about", label: "about" },
+  { to: "/downloads", label: "downloads" },
   { to: "/presets", label: "presets", requiresAuth: true },
 ];
 </script>

app/pages/downloads.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Monitor,
+  Smartphone,
+  Download,
+  Apple,
+  Laptop,
+  Info,
+  ExternalLink,
+} from "lucide-vue-next";
+
+definePageMeta({
+  layout: "default",
+});
+
+const { t } = useI18n();
+
+const platforms = [
+  { name: "Windows", icon: Laptop, formats: "NSIS, Portable" },
+  { name: "macOS", icon: Apple, formats: "DMG, ZIP" },
+  { name: "Linux", icon: Laptop, formats: "AppImage" },
+];
+</script>
+
+<template>
+  <div class="container max-w-5xl mx-auto px-4 py-12">
+    <div class="text-center space-y-4 mb-12">
+      <h1 class="text-4xl font-bold tracking-tight">
+        {{ t("downloadHelium") }}
+      </h1>
+      <p class="text-muted-foreground text-lg max-w-2xl mx-auto">
+        {{ t("downloadHeliumDescription") }}
+      </p>
+    </div>
+
+    <div class="grid md:grid-cols-2 gap-8">
+      <Card class="relative overflow-hidden">
+        <div
+          class="absolute top-0 right-0 p-3 opacity-10 pointer-events-none"
+        >
+          <Monitor class="w-32 h-32" />
+        </div>
+        <CardHeader>
+          <div class="flex items-center gap-3">
+            <div
+              class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary"
+            >
+              <Monitor class="w-5 h-5" />
+            </div>
+            <div>
+              <CardTitle>{{ t("desktopApp") }}</CardTitle>
+              <CardDescription>{{ t("desktopAppDescription") }}</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <div class="space-y-3">
+            <div
+              v-for="platform in platforms"
+              :key="platform.name"
+              class="flex items-center justify-between p-3 rounded-lg bg-muted/50"
+            >
+              <div class="flex items-center gap-3">
+                <component
+                  :is="platform.icon"
+                  class="w-4 h-4 text-muted-foreground"
+                />
+                <span class="text-sm font-medium">{{ platform.name }}</span>
+              </div>
+              <Badge variant="secondary" class="text-xs">
+                {{ platform.formats }}
+              </Badge>
+            </div>
+          </div>
+          <div
+            class="flex items-start gap-2 text-xs text-muted-foreground bg-muted/30 p-3 rounded-lg"
+          >
+            <Info class="w-4 h-4 mt-0.5 shrink-0" />
+            <span>{{ t("desktopAppNote") }}</span>
+          </div>
+        </CardContent>
+        <CardFooter class="flex-col gap-3 items-stretch">
+          <Button as-child class="w-full gap-2">
+            <a
+              href="https://github.com/SrIzan10/helium/releases"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Download class="w-4 h-4" />
+              {{ t("downloadFromGitHub") }}
+            </a>
+          </Button>
+          <Button as-child variant="outline" class="w-full gap-2">
+            <a
+              href="https://github.com/SrIzan10/helium"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <ExternalLink class="w-4 h-4" />
+              {{ t("viewSourceCode") }}
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+
+      <Card class="relative overflow-hidden">
+        <div
+          class="absolute top-0 right-0 p-3 opacity-10 pointer-events-none"
+        >
+          <Smartphone class="w-32 h-32" />
+        </div>
+        <CardHeader>
+          <div class="flex items-center gap-3">
+            <div
+              class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary"
+            >
+              <Smartphone class="w-5 h-5" />
+            </div>
+            <div>
+              <CardTitle>{{ t("androidApp") }}</CardTitle>
+              <CardDescription>{{ t("androidAppDescription") }}</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <div class="p-3 rounded-lg bg-muted/50 space-y-2">
+            <div class="flex items-center gap-3">
+              <Smartphone class="w-4 h-4 text-muted-foreground" />
+              <span class="text-sm font-medium">Android</span>
+              <Badge variant="secondary" class="text-xs">APK</Badge>
+            </div>
+          </div>
+          <div
+            class="flex items-start gap-2 text-xs text-muted-foreground bg-muted/30 p-3 rounded-lg"
+          >
+            <Info class="w-4 h-4 mt-0.5 shrink-0" />
+            <span>{{ t("androidAppNote") }}</span>
+          </div>
+        </CardContent>
+        <CardFooter class="flex-col gap-3 items-stretch">
+          <Button as-child class="w-full gap-2">
+            <a
+              href="https://github.com/SrIzan10/helium/releases"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Download class="w-4 h-4" />
+              {{ t("downloadFromGitHub") }}
+            </a>
+          </Button>
+          <Button as-child variant="outline" class="w-full gap-2">
+            <a
+              href="https://github.com/SrIzan10/helium/tree/main/native-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <ExternalLink class="w-4 h-4" />
+              {{ t("viewSourceCode") }}
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+
+  </div>
+</template>

i18n/locales/en.json

@@ -5,6 +5,7 @@
   "home": "Home",
   "about": "About",
   "contact": "Contact",
+  "downloads": "Downloads",
   "stream": "Stream",
   "presets": "Presets",
   "effortlessScreensharing": "effortless screensharing powered by webrtc",
@@ -62,5 +63,18 @@
   "audioSupported": "Audio Supported",
   "failedToStartScreenShare": "Failed to start screen share.",
   "screenRecordingPermissionRequired": "macOS blocked screen capture. Allow Helium in System Settings > Privacy & Security > Screen Recording, then restart Helium.",
-  "screenRecordingPermissionRequiredNoShortcut": "macOS blocked screen capture. Open System Settings > Privacy & Security > Screen Recording, allow Helium, then restart Helium."
+  "screenRecordingPermissionRequiredNoShortcut": "macOS blocked screen capture. Open System Settings > Privacy & Security > Screen Recording, allow Helium, then restart Helium.",
+  "downloadHelium": "Download Helium",
+  "downloadHeliumDescription": "Get the best screensharing experience with our native apps. Available for desktop and Android.",
+  "desktopApp": "Desktop App",
+  "desktopAppDescription": "The full-featured Electron app with system audio support.",
+  "androidApp": "Android App",
+  "androidAppDescription": "Stream directly from your Android device.",
+  "desktopAppNote": "Includes advanced features like system audio capture, venmic support on Linux, and native screen recording permissions.",
+  "androidAppNote": "Install the APK directly on your Android device. Make sure to allow installation from unknown sources if prompted.",
+  "downloadFromGitHub": "Download from GitHub",
+  "viewSourceCode": "View Source Code",
+  "preferTheBrowser": "Prefer the browser?",
+  "browserVersionDescription": "The web version works great too. No installation required — just open the page and start streaming or watching.",
+  "useWebVersion": "Use Web Version"
 }

i18n/locales/es.json

@@ -5,6 +5,7 @@
   "home": "Inicio",
   "about": "Acerca de",
   "contact": "Contacto",
+  "downloads": "Descargas",
   "stream": "Transmisión",
   "presets": "Ajustes predefinidos",
   "effortlessScreensharing": "comparte pantalla sin complicaciones",
@@ -62,5 +63,18 @@
   "audioSupported": "Audio soportado",
   "failedToStartScreenShare": "No se pudo iniciar el uso compartido de pantalla.",
   "screenRecordingPermissionRequired": "macOS bloqueó la captura de pantalla. Permite Helium en Configuración del Sistema > Privacidad y seguridad > Grabación de pantalla y luego reinicia Helium.",
-  "screenRecordingPermissionRequiredNoShortcut": "macOS bloqueó la captura de pantalla. Abre Configuración del Sistema > Privacidad y seguridad > Grabación de pantalla, permite Helium y luego reinicia Helium."
+  "screenRecordingPermissionRequiredNoShortcut": "macOS bloqueó la captura de pantalla. Abre Configuración del Sistema > Privacidad y seguridad > Grabación de pantalla, permite Helium y luego reinicia Helium.",
+  "downloadHelium": "Descargar Helium",
+  "downloadHeliumDescription": "Obtén la mejor experiencia de compartir pantalla con nuestras aplicaciones nativas. Disponible para escritorio y Android.",
+  "desktopApp": "Aplicación de Escritorio",
+  "desktopAppDescription": "La aplicación Electron completa con soporte de audio del sistema.",
+  "androidApp": "Aplicación Android",
+  "androidAppDescription": "Transmite directamente desde tu dispositivo Android.",
+  "desktopAppNote": "Incluye funciones avanzadas como captura de audio del sistema, soporte de venmic en Linux y permisos de grabación de pantalla nativos.",
+  "androidAppNote": "Instala el APK directamente en tu dispositivo Android. Asegúrate de permitir la instalación desde fuentes desconocidas si se te solicita.",
+  "downloadFromGitHub": "Descargar desde GitHub",
+  "viewSourceCode": "Ver Código Fuente",
+  "preferTheBrowser": "¿Prefieres el navegador?",
+  "browserVersionDescription": "La versión web también funciona muy bien. No requiere instalación: simplemente abre la página y empieza a transmitir o ver.",
+  "useWebVersion": "Usar Versión Web"
 }

native-app/package.json

@@ -17,6 +17,7 @@
     "expo-splash-screen": "~31.0.13",
     "react": "19.2.0",
     "react-native": "0.82.0",
+    "react-native-safe-area-context": "^5.7.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-webrtc": "^124.0.7"
   },

native-app/src/screens/StreamerScreen.tsx

@@ -2,7 +2,6 @@ import { useAuth } from "@clerk/clerk-expo";
 import { useEffect, useMemo, useState } from "react";
 import {
   Pressable,
-  SafeAreaView,
   ScrollView,
   StyleSheet,
   Text,
@@ -17,6 +16,7 @@ import { getPresets } from "../lib/presets";
 import type { NativeIceServer, PresetUser } from "../types/presets";
 import { Button } from "../components/ui/Button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../components/ui/Card";
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export function StreamerScreen() {
   const { getToken, signOut } = useAuth();

package.json

@@ -11,7 +11,7 @@
   "main": "./electron/dist/main/index.js",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",

pnpm-lock.yaml

@@ -163,6 +163,9 @@ importers:
       react-native:
         specifier: 0.82.0
         version: 0.82.0(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.0)(utf-8-validate@5.0.10)
+      react-native-safe-area-context:
+        specifier: ^5.7.0
+        version: 5.7.0(react-native@0.82.0(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)
       react-native-url-polyfill:
         specifier: ^2.0.0
         version: 2.0.0(react-native@0.82.0(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.0)(utf-8-validate@5.0.10))
@@ -7215,6 +7218,12 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-native-safe-area-context@5.7.0:
+    resolution: {integrity: sha512-/9/MtQz8ODphjsLdZ+GZAIcC/RtoqW9EeShf7Uvnfgm/pzYrJ75y3PV/J1wuAV1T5Dye5ygq4EAW20RoBq0ABQ==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
   react-native-url-polyfill@2.0.0:
     resolution: {integrity: sha512-My330Do7/DvKnEvwQc0WdcBnFPploYKp9CYlefDXzIdEaA+PAhDYllkvGeEroEzvc4Kzzj2O4yVdz8v6fjRvhA==}
     peerDependencies:
@@ -16987,6 +16996,11 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-native-safe-area-context@5.7.0(react-native@0.82.0(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-native: 0.82.0(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.0)(utf-8-validate@5.0.10)
+
   react-native-url-polyfill@2.0.0(react-native@0.82.0(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.0)(utf-8-validate@5.0.10)):
     dependencies:
       react-native: 0.82.0(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.1.0)(react@19.2.0)(utf-8-validate@5.0.10)