fifu-tui 1.4.5 → 1.6.0

package/.SRCINFO

@@ -1,6 +1,6 @@
 pkgbase = fifu
 	pkgdesc = A cross-platform TUI for downloading YouTube videos from channels
-	pkgver = 1.4.5
+	pkgver = 1.4.6
 	pkgrel = 1
 	url = https://github.com/Dawaman43/fifu
 	arch = any
@@ -12,7 +12,7 @@ pkgbase = fifu
 	depends = python-textual
 	depends = yt-dlp
 	depends = python-click
-	source = https://github.com/Dawaman43/fifu/archive/refs/tags/v1.4.5.tar.gz
+	source = https://github.com/Dawaman43/fifu/archive/refs/tags/v1.4.6.tar.gz
 	sha256sums = SKIP
 
 pkgname = fifu

package/PKGBUILD

@@ -1,6 +1,6 @@
 # Maintainer: Dawaman43 <github.com/Dawaman43>
 pkgname=fifu
-pkgver=1.4.5
+pkgver=1.4.6
 pkgrel=1
 pkgdesc="A cross-platform TUI for downloading YouTube videos from channels"
 arch=('any')

package/README.md

@@ -2,11 +2,7 @@
 
 **The Ultra-Fast, Cross-Platform TUI for Downloading YouTube Channel Content.**
 
-[![Build Status](https://github.com/Dawaman43/fifu/actions/workflows/publish.yml/badge.svg)](https://github.com/Dawaman43/fifu/actions)
-[![PyPI version](https://badge.fury.io/py/fifu.svg)](https://badge.fury.io/py/fifu)
-[![AUR version](https://img.shields.io/aur/version/fifu)](https://aur.archlinux.org/packages/fifu)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Python 3.10+](https://img.shields.io/badge/python-3.10+-blue.svg)](https://www.python.org/downloads/)
+[![Build Status](https://github.com/Dawaman43/fifu/actions/workflows/publish.yml/badge.svg)](https://github.com/Dawaman43/fifu/actions) [![PyPI version](https://img.shields.io/pypi/v/fifu.svg)](https://pypi.org/project/fifu/) [![npm version](https://img.shields.io/npm/v/fifu-tui.svg)](https://www.npmjs.com/package/fifu-tui) [![AUR version](https://img.shields.io/aur/version/fifu)](https://aur.archlinux.org/packages/fifu) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Python 3.10+](https://img.shields.io/badge/python-3.10+-blue.svg)](https://www.python.org/downloads/)
 
 Fifu (Fetch It For Us) is a high-performance Terminal User Interface (TUI) designed for power users who want to download entire YouTube channels or playlists with zero friction. Built with **Textual** and powered by **yt-dlp**.
 
@@ -26,16 +22,30 @@ Fifu (Fetch It For Us) is a high-performance Terminal User Interface (TUI) desig
 
 ## 🚀 Quick Start
 
-The fastest way to install Fifu on any system is using **pipx**:
+The fastest way to run Fifu instantly is using **npx**:
 
 ```bash
-pipx install git+https://github.com/Dawaman43/fifu.git
+npx fifu-tui
+```
+
+Alternatively, you can install it via **pipx**:
+
+```bash
+pipx install git+https://github.com/Dawaman43/fifu.git --force
 ```
 
 ---
 
 ## 📦 Installation Options
 
+### 📦 npm (JavaScript Wrapper)
+
+If you prefer using npm, you can install Fifu globally:
+
+```bash
+npm install -g fifu-tui
+```
+
 ### 🐧 Linux
 
 #### Arch Linux (AUR)

package/apps/api/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "fifu-api",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "node --watch src/index.js",
+    "start": "node src/index.js"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.14.4",
+    "hono": "^4.7.4"
+  }
+}

package/apps/api/src/index.js

@@ -0,0 +1,134 @@
+import { Hono } from "hono";
+import { exec } from "child_process";
+import { promisify } from "util";
+
+const execAsync = promisify(exec);
+const app = new Hono();
+
+// Helper to format large numbers (mimics the Python implementation)
+const formatCount = (count) => {
+  if (!count) return "N/A";
+  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+  return count.toString();
+};
+
+app.get("/health", (c) => c.json({ ok: true }));
+
+app.post("/api/search", async (c) => {
+  const body = await c.req.json().catch(() => ({}));
+  const query = body.query || "";
+  const type = body.type || "channel"; // "channel" or "video"
+
+  if (!query) return c.json({ query: "", channels: [], videos: [] });
+
+  try {
+    const searchPrefix = type === "video" ? "ytsearch50" : "ytsearch50"; 
+    const { stdout } = await execAsync(
+      `yt-dlp "${searchPrefix}:${query}" --flat-playlist --dump-single-json --quiet --no-warnings`
+    );
+    const data = JSON.parse(stdout);
+    
+    const results = { query, type };
+
+    if (type === "video") {
+      results.videos = (data.entries || []).map(entry => ({
+        id: entry.id,
+        title: entry.title || "Unknown",
+        url: `https://www.youtube.com/watch?v=${entry.id}`,
+        duration: entry.duration,
+        uploader: entry.uploader || entry.channel || "Unknown",
+        thumbnail: entry.thumbnail
+      }));
+    } else {
+      const channels = [];
+      const seenIds = new Set();
+      if (data.entries) {
+        for (const entry of data.entries) {
+          if (entry.channel_id && !seenIds.has(entry.channel_id)) {
+            seenIds.add(entry.channel_id);
+            const subCount = entry.channel_follower_count || entry.follower_count || 0;
+            channels.push({
+              id: entry.channel_id,
+              name: entry.channel || entry.uploader || "Unknown",
+              url: `https://www.youtube.com/channel/${entry.channel_id}`,
+              subs: formatCount(subCount),
+              subCount: subCount,
+              description: entry.description ? entry.description.slice(0, 100) : ""
+            });
+          }
+        }
+      }
+      channels.sort((a, b) => b.subCount - a.subCount);
+      results.channels = channels;
+    }
+
+    return c.json(results);
+  } catch (error) {
+    console.error("Search error:", error);
+    return c.json({ query, channels: [], error: "Failed to fetch channels" }, 500);
+  }
+});
+
+app.post("/api/options", async (c) => {
+  const body = await c.req.json().catch(() => ({}));
+  const channelId = body.channelId;
+
+  if (!channelId) return c.json({ error: "Missing channelId" }, 400);
+
+  try {
+    // Fetch playlists for the channel
+    const { stdout } = await execAsync(
+      `yt-dlp "https://www.youtube.com/channel/${channelId}/playlists" --flat-playlist --dump-single-json --quiet --no-warnings`
+    );
+    const data = JSON.parse(stdout);
+    
+    const playlists = (data.entries || []).map(p => ({
+      id: p.id,
+      title: p.title || "Unknown Playlist",
+      url: p.url || `https://www.youtube.com/playlist?list=${p.id}`,
+      count: p.playlist_count || 0
+    }));
+
+    return c.json({
+      channelId,
+      name: data.uploader || data.channel || "Unknown Channel",
+      playlists,
+      totalVideos: data.playlist_count || 0
+    });
+  } catch (error) {
+    console.error("Options error:", error);
+    return c.json({ error: "Failed to fetch channel options" }, 500);
+  }
+});
+
+// Mock job tracking for the mobile UI
+app.get("/api/jobs/:id", (c) => {
+  const jobIds = ["job_demo", "a1", "a2"];
+  const id = c.req.param("id");
+  
+  if (!jobIds.includes(id) && !id.startsWith("job_")) {
+    return c.json({ error: "Job not found" }, 404);
+  }
+
+  return c.json({
+    id,
+    status: id === "a1" ? "downloading" : "completed",
+    total: 10,
+    completed: id === "a1" ? 6 : 10,
+    progress: id === "a1" ? 60 : 100,
+    speed: id === "a1" ? "4.2 MB/s" : "0 B/s",
+    eta: id === "a1" ? "1m 20s" : "Done",
+    active: id === "a1" ? ["Video metadata...", "Part 2 of 10"] : []
+  });
+});
+
+export default app;
+
+// Node server bootstrap
+if (process.env.NODE_ENV !== "test") {
+  const port = Number(process.env.PORT ?? 8787);
+  const { serve } = await import("@hono/node-server");
+  serve({ fetch: app.fetch, port });
+  console.log(`API running on http://localhost:${port}`);
+}

package/apps/mobile/.expo/README.md

@@ -0,0 +1,13 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/apps/mobile/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/apps/mobile/App.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
+import { AppNavigation } from "./src/navigation";
+import { COLORS } from "./src/theme";
+
+export default function App() {
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
+      <AppNavigation />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: COLORS.background
+  }
+});

package/apps/mobile/README.md

@@ -0,0 +1,21 @@
+# Fifu Mobile (Expo)
+
+## Setup
+
+```bash
+pnpm install -r
+```
+
+## Run
+
+```bash
+pnpm --filter fifu-mobile start
+```
+
+## API URL
+
+Set the backend URL in your shell before running:
+
+```bash
+export EXPO_PUBLIC_API_URL=http://localhost:8787
+```

package/apps/mobile/app.json

@@ -0,0 +1,16 @@
+{
+  "expo": {
+    "name": "Fifu",
+    "slug": "fifu-mobile",
+    "version": "0.1.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "resizeMode": "contain",
+      "backgroundColor": "#FDF2F3"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ]
+  }
+}

package/apps/mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"]
+  };
+};

package/apps/mobile/index.js

@@ -0,0 +1,5 @@
+import "react-native-gesture-handler";
+import { registerRootComponent } from "expo";
+import App from "./App";
+
+registerRootComponent(App);

package/apps/mobile/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "fifu-mobile",
+  "version": "0.1.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-navigation/bottom-tabs": "^6.5.20",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.9.26",
+    "expo": "latest",
+    "react": "latest",
+    "react-native": "latest",
+    "react-native-gesture-handler": "^2.20.2",
+    "react-native-safe-area-context": "^4.10.8",
+    "react-native-screens": "^3.34.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.17",
+    "typescript": "~5.9.3"
+  }
+}

package/apps/mobile/src/api/client.ts

@@ -0,0 +1,21 @@
+const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:8787";
+
+export async function apiPost<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(`${API_BASE_URL}${path}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) {
+    throw new Error(`API error: ${res.status}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+export async function apiGet<T>(path: string): Promise<T> {
+  const res = await fetch(`${API_BASE_URL}${path}`);
+  if (!res.ok) {
+    throw new Error(`API error: ${res.status}`);
+  }
+  return res.json() as Promise<T>;
+}

package/apps/mobile/src/components/Card.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { COLORS, RADIUS, SPACING } from "../theme";
+
+export function Card({ children }: { children: React.ReactNode }) {
+  return <View style={styles.card}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: COLORS.surface,
+    borderRadius: RADIUS.lg,
+    padding: SPACING.md,
+    borderWidth: 1,
+    borderColor: COLORS.border
+  }
+});

package/apps/mobile/src/components/Chip.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Pressable, Text, StyleSheet } from "react-native";
+import { COLORS, RADIUS, SPACING, TYPO } from "../theme";
+
+export function Chip({
+  label,
+  active,
+  onPress
+}: {
+  label: string;
+  active?: boolean;
+  onPress?: () => void;
+}) {
+  return (
+    <Pressable style={[styles.chip, active && styles.active]} onPress={onPress}>
+      <Text style={[styles.text, active && styles.textActive]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    paddingVertical: SPACING.sm,
+    paddingHorizontal: SPACING.md,
+    borderRadius: RADIUS.pill,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    backgroundColor: COLORS.surface
+  },
+  active: {
+    borderColor: COLORS.primary,
+    backgroundColor: COLORS.primary + "20" // 12% opacity
+  },
+  text: {
+    color: COLORS.muted,
+    fontSize: TYPO.small,
+    fontWeight: "600"
+  },
+  textActive: {
+    color: COLORS.primary
+  }
+});

package/apps/mobile/src/components/ListRow.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { COLORS, SPACING, TYPO } from "../theme";
+
+export function ListRow({
+  title,
+  meta,
+  hint
+}: {
+  title: string;
+  meta?: string;
+  hint?: string;
+}) {
+  return (
+    <View style={styles.row}>
+      <Text style={styles.title}>{title}</Text>
+      {meta ? <Text style={styles.meta}>{meta}</Text> : null}
+      {hint ? <Text style={styles.hint}>{hint}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    gap: SPACING.xs
+  },
+  title: {
+    color: COLORS.text,
+    fontSize: TYPO.body,
+    fontWeight: "600"
+  },
+  meta: {
+    color: COLORS.muted,
+    fontSize: TYPO.small
+  },
+  hint: {
+    color: COLORS.cta,
+    fontSize: TYPO.small,
+    fontWeight: "600"
+  }
+});

package/apps/mobile/src/components/PrimaryButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Pressable, Text, StyleSheet, ActivityIndicator } from "react-native";
+import { COLORS, RADIUS, SPACING, TYPO } from "../theme";
+
+export function PrimaryButton({
+  label,
+  onPress,
+  loading
+}: {
+  label: string;
+  onPress?: () => void;
+  loading?: boolean;
+}) {
+  return (
+    <Pressable 
+      style={[styles.button, loading && styles.disabled]} 
+      onPress={loading ? undefined : onPress}
+    >
+      {loading ? (
+        <ActivityIndicator color={COLORS.white} />
+      ) : (
+        <Text style={styles.text}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 52,
+    borderRadius: RADIUS.md,
+    backgroundColor: COLORS.primary,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: SPACING.lg,
+    shadowColor: COLORS.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  text: {
+    color: COLORS.white,
+    fontWeight: "700",
+    fontSize: TYPO.body,
+    letterSpacing: 0.5
+  },
+  disabled: {
+    opacity: 0.7,
+    backgroundColor: COLORS.surfaceLight
+  }
+});

package/apps/mobile/src/components/ProgressBar.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { COLORS } from "../theme";
+
+export function ProgressBar({ value }: { value: number }) {
+  const width = `${Math.max(0, Math.min(100, value))}%`;
+  return (
+    <View style={styles.track}>
+      <View style={[styles.fill, { width }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    height: 10,
+    borderRadius: 6,
+    backgroundColor: "#F3DDE1",
+    overflow: "hidden"
+  },
+  fill: {
+    height: 10,
+    borderRadius: 6,
+    backgroundColor: COLORS.cta
+  }
+});

package/apps/mobile/src/components/SecondaryButton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Pressable, Text, StyleSheet } from "react-native";
+import { COLORS, RADIUS, SPACING, TYPO } from "../theme";
+
+export function SecondaryButton({
+  label,
+  onPress
+}: {
+  label: string;
+  onPress?: () => void;
+}) {
+  return (
+    <Pressable style={styles.button} onPress={onPress}>
+      <Text style={styles.text}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 48,
+    borderRadius: RADIUS.md,
+    borderWidth: 1.5,
+    borderColor: COLORS.surfaceLight,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: SPACING.lg
+  },
+  text: {
+    color: COLORS.text,
+    fontSize: TYPO.body,
+    fontWeight: "600",
+    letterSpacing: 0.3
+  }
+});

package/apps/mobile/src/components/Section.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { COLORS, SPACING, TYPO } from "../theme";
+
+export function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.title}>{title}</Text>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  section: {
+    gap: SPACING.sm
+  },
+  title: {
+    fontSize: TYPO.h3,
+    fontWeight: "600",
+    color: COLORS.text
+  }
+});

package/apps/mobile/src/components/Toggle.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Pressable, View, StyleSheet } from "react-native";
+import { COLORS } from "../theme";
+
+export function Toggle({ value, onChange }: { value: boolean; onChange?: (v: boolean) => void }) {
+  return (
+    <Pressable
+      onPress={() => onChange?.(!value)}
+      style={[styles.track, value && styles.trackOn]}
+    >
+      <View style={[styles.handle, value && styles.handleOn]} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    width: 52,
+    height: 28,
+    borderRadius: 16,
+    backgroundColor: "#E5E7EB",
+    padding: 3
+  },
+  trackOn: {
+    backgroundColor: "#DBEAFE"
+  },
+  handle: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: COLORS.white
+  },
+  handleOn: {
+    alignSelf: "flex-end",
+    backgroundColor: COLORS.cta
+  }
+});

package/apps/mobile/src/mock.ts

@@ -0,0 +1,19 @@
+export const MOCK_RESULTS = [
+  { id: "1", name: "Channel Alpha", subs: "1.2M", desc: "Tutorials and deep dives" },
+  { id: "2", name: "Channel Beta", subs: "780K", desc: "Weekly breakdowns" },
+  { id: "3", name: "Channel Gamma", subs: "215K", desc: "Builds and experiments" }
+];
+
+export const MOCK_ACTIVE = [
+  { id: "a1", title: "Video One", progress: 62, speed: "3.4 MB/s", eta: "2m" },
+  { id: "a2", title: "Video Two", progress: 31, speed: "2.1 MB/s", eta: "6m" }
+];
+
+export const MOCK_HISTORY = [
+  { id: "h1", name: "Channel Alpha", subs: "1.2M" },
+  { id: "h2", name: "Channel Gamma", subs: "215K" }
+];
+
+export const MOCK_FAVORITES = [
+  { id: "f1", name: "Channel Beta", subs: "780K" }
+];