@frixaco/anitrack 0.0.1

package/README.md

@@ -0,0 +1,46 @@
+# Anitrack - Simple TUI to stream anime
+
+The project has been ported multiple times as I kept exploring different technologies for fun:
+
+- Next.js app (auth, search, tracker, stream, etc.)
+- Go TUI using Bubbletea
+- Python TUI using Textual
+- `letui` TUI - my own TUI library written from scratch using TypeScript (Bun) and Rust
+
+### Bun+Rust TUI
+
+1. Install Bun (recommended) or Node
+2. bunx @frixaco/anitrack
+
+### Python TUI
+
+1. Install `uv` (https://docs.astral.sh/uv/getting-started/installation/)
+2. Install [mpv](github.com/mpv-player/mpv) player.
+3. (Optional) On desktop, set up **Anime4K** anime upscaler for **mpv**: https://github.com/bloc97/anime4k
+4. Run `uv tool install frixa-anitrack`
+5. Run `anitrack`
+
+NOTE: to try without installing, run `uv tool run --from frixa-anitrack anitrack` or `uvx --from frixa-anitrack anitrack`
+
+Status: finished.
+
+### Go TUI
+
+1. Install Go. I used +1.23.
+2. Install [mpv](github.com/mpv-player/mpv) player.
+3. (Optional) On desktop, set up **Anime4K** anime upscaler for **mpv**: https://github.com/bloc97/anime4k
+4. Run `go install github.com/frixaco/anitrack@latest` or download the binary from releases
+
+Status: finished.
+
+### Next.js
+
+Fully functional, but requires setting up environment variables and services.
+
+Status: abandoned.
+
+### Rust TUI
+
+Explored scraping HTML pages a bit. Don't plan to continue for the time being.
+
+Status: dormant.

package/colors.ts

@@ -0,0 +1,35 @@
+export const COLORS = {
+	default: {
+		bg: 0x16181a,
+		bg_alt: 0x1e2124,
+		bg_highlight: 0x3c4048,
+		fg: 0xffffff,
+		grey: 0x7b8496,
+		blue: 0x5ea1ff,
+		green: 0x5eff6c,
+		cyan: 0x5ef1ff,
+		red: 0xff6e5e,
+		yellow: 0xf1ff5e,
+		magenta: 0xff5ef1,
+		pink: 0xff5ea0,
+		orange: 0xffbd5e,
+		purple: 0xbd5eff,
+	},
+	light: {
+		bg: 0xffffff,
+		bg_alt: 0xeaeaea,
+		bg_highlight: 0xacacac,
+		fg: 0x16181a,
+		grey: 0x7b8496,
+		blue: 0x0057d1,
+		green: 0x008b0c,
+		cyan: 0x008c99,
+		red: 0xd11500,
+		yellow: 0x997b00,
+		magenta: 0xd100bf,
+		pink: 0xf40064,
+		orange: 0xd17c00,
+		purple: 0xa018ff,
+	},
+} as const;
+

package/index.ts

@@ -0,0 +1,245 @@
+#!/usr/bin/env bun
+import { COLORS } from "./colors";
+import {
+  Button,
+  Column,
+  InputBox,
+  Row,
+  run,
+  type InputBoxProps,
+  $,
+} from "@frixaco/letui";
+
+let searchText = $("");
+let focusId = $("search-input");
+// let buttonText = $("Search");
+let results = $<ScrapeResultItem[]>([]);
+let maxItems = $(1);
+let page = $(0);
+
+let inputStyles: Partial<InputBoxProps> = {
+  border: {
+    color: COLORS.default.fg,
+    style: "square",
+  },
+  padding: "1 0",
+};
+
+type ScrapeResultItem = {
+  title: string;
+  size: string;
+  date: string;
+  magnet: string;
+};
+
+type ScrapeResult = {
+  results: ScrapeResultItem[];
+};
+
+type TorrentFile = {};
+
+type TorrentDetails = {
+  id: number;
+  info_hash: string;
+  name: string;
+  files: TorrentFile[];
+};
+
+type TorrentResponse = {
+  id: number;
+  details: TorrentDetails;
+};
+
+let logFile = Bun.file("logs.txt");
+
+export function log(txt: string, ...args: string[]) {
+  logFile.write(txt + " " + args.join(" "));
+}
+
+async function fetchResults(query: string) {
+  const response = await fetch(
+    `https://scrape.anitrack.frixaco.com/scrape?q=${query}`,
+  );
+  const data = (await response.json()) as ScrapeResult;
+
+  log(JSON.stringify(data.results, null, 2));
+  results(data.results);
+  page(0);
+  if (data.results.length > 0) {
+    focusId("result-button-0");
+  }
+}
+
+async function streamResult(magnet: string) {
+  const response = await fetch("https://rqbit.anitrack.frixaco.com/torrents", {
+    method: "post",
+    body: magnet,
+  });
+  const data = (await response.json()) as TorrentResponse;
+  let streamUrl = `https://rqbit.anitrack.frixaco.com/torrents/${data.details.info_hash}/stream/${
+    data.details.files.length - 1
+  }`;
+  Bun.spawn({
+    cmd: ["mpv", streamUrl],
+    stdout: "ignore",
+    stderr: "ignore",
+  });
+}
+
+run(
+  (terminalWidth: number, termianlHeight: number) =>
+    Column(
+      {
+        border: {
+          color: COLORS.default.fg,
+          style: "square",
+        },
+        gap: 1,
+        padding: "1 0",
+      },
+      [
+        Row(
+          {
+            border: "none",
+            gap: 1,
+            padding: "1 0",
+          },
+          [
+            InputBox({
+              ...inputStyles,
+              id: "search-input",
+              focus: true,
+              text: searchText,
+              border: {
+                color:
+                  focusId() === "search-input"
+                    ? COLORS.default.green
+                    : COLORS.default.fg,
+                style: "square",
+              },
+              onType: (v) => {
+                searchText(v);
+              },
+              onBlur: () => {},
+              onFocus: () => {},
+              onSubmit: (v) => {
+                log("onSubmit +" + v);
+                fetchResults(v);
+              },
+            }),
+
+            // Button({
+            //   ...inputStyles,
+            //   id: "search-button",
+            //   text: buttonText,
+            //   onClick: () => {
+            //     log("onSubmit +" + searchText());
+            //     fetchResults(searchText());
+            //   },
+            // }),
+          ],
+        ),
+
+        Column(
+          {
+            border: "none",
+            gap: 1,
+            padding: "1 0",
+            onLayout: (node) => {
+              const h = node.frame.height;
+              const child = node.children[0];
+              if (!child) return;
+
+              const childH = child.frame.height;
+              if (h && childH) {
+                // Calculate available height by subtracting vertical padding and border
+                let paddingY = 0;
+                const { padding } = node.props;
+                if (typeof padding === "number") {
+                  paddingY = padding;
+                } else if (typeof padding === "string") {
+                  const parts = padding.split(" ").map(Number);
+                  paddingY = parts.length === 2 ? parts[0]! : parts[0]!;
+                }
+
+                let borderY = 0;
+                const { border } = node.props;
+                if (border && border !== "none") {
+                  borderY = 1;
+                }
+
+                const availableH = h - paddingY * 2 - borderY * 2;
+
+                const gap = (node.props as any).gap || 0;
+                log(
+                  JSON.stringify({
+                    childH,
+                    availableH,
+                    gap,
+                  }),
+                );
+                const capacity = Math.ceil(availableH / childH);
+
+                if (maxItems() !== capacity && capacity > 0) {
+                  maxItems(capacity);
+                }
+              }
+            },
+          },
+          results()
+            .slice(page() * maxItems(), (page() + 1) * maxItems())
+            .map((s, i) => {
+              let text = $(s.title);
+              let id = `result-button-${i}`;
+
+              return Button({
+                ...inputStyles,
+                id,
+                text: text,
+                border: {
+                  color:
+                    focusId() === id ? COLORS.default.green : COLORS.default.fg,
+                  style: "square",
+                },
+                onClick: () => {
+                  streamResult(s.magnet);
+                  log(`Clicked: ${s.title}`);
+                },
+                onKeyDown: (key) => {
+                  const totalPages = Math.ceil(results().length / maxItems());
+                  const currentPageSize = results().slice(
+                    page() * maxItems(),
+                    (page() + 1) * maxItems(),
+                  ).length;
+                  const currentIndex = i;
+
+                  if (key === "l" || key === "\u001b[C") {
+                    if (page() < totalPages - 1) {
+                      page(page() + 1);
+                      focusId("result-button-0");
+                    }
+                  } else if (key === "h" || key === "\u001b[D") {
+                    if (page() > 0) {
+                      page(page() - 1);
+                      focusId("result-button-0");
+                    }
+                  } else if (key === "j" || key === "\u001b[B") {
+                    if (currentIndex < currentPageSize - 1) {
+                      focusId(`result-button-${currentIndex + 1}`);
+                    }
+                  } else if (key === "k" || key === "\u001b[A") {
+                    if (currentIndex > 0) {
+                      focusId(`result-button-${currentIndex - 1}`);
+                    } else {
+                      focusId("search-input");
+                    }
+                  }
+                },
+              });
+            }),
+        ),
+      ],
+    ),
+  [results, focusId, maxItems, page],
+  focusId,
+);

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@frixaco/anitrack",
+  "version": "0.0.1",
+  "module": "index.ts",
+  "type": "module",
+  "bin": {
+    "anitrack": "./index.ts"
+  },
+  "files": [
+    "index.ts",
+    "colors.ts"
+  ],
+  "scripts": {
+    "dev": "bun run index.ts"
+  },
+  "dependencies": {
+    "@frixaco/letui": "^0.0.4"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  }
+}