fix: android app corners and new downloads page

This commit is contained in:
2026-04-22 20:31:46 +02:00
parent da3d3b607e
commit 9dd24d77fc
8 changed files with 224 additions and 4 deletions

View File

@@ -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>

176
app/pages/downloads.vue Normal file
View File

@@ -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>

View File

@@ -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"
}

View File

@@ -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"
}

View File

@@ -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"
},

View File

@@ -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();

View File

@@ -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",

14
pnpm-lock.yaml generated
View File

@@ -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)