From b56584cbed7858cbf87dabf6f701253b5e85abf7 Mon Sep 17 00:00:00 2001 From: Richard Roberson Date: Mon, 30 Jun 2025 12:10:56 -0600 Subject: [PATCH] Change go to page + add Vercel Analytics integration --- next.config.ts | 8 ++-- package-lock.json | 39 +++++++++++++++++++ package.json | 1 + src/app/layout.tsx | 2 + src/components/Footer.tsx | 5 ++- src/components/player/Navigator.tsx | 58 +++++++++++++++++++---------- 6 files changed, 87 insertions(+), 26 deletions(-) diff --git a/next.config.ts b/next.config.ts index 3773359..e7f0bee 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,11 +1,9 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - experimental: { - turbo: { - resolveAlias: { - canvas: './empty-module.ts', - }, + turbopack: { + resolveAlias: { + canvas: './empty-module.ts', }, }, }; diff --git a/package-lock.json b/package-lock.json index eb0375e..6f3b6e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@types/howler": "^2.2.12", "@types/string-similarity": "^4.0.2", "@types/uuid": "^10.0.0", + "@vercel/analytics": "^1.5.0", "compromise": "^14.14.4", "core-js": "^3.41.0", "howler": "^2.2.4", @@ -1987,6 +1988,44 @@ "win32" ] }, + "node_modules/@vercel/analytics": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.5.0.tgz", + "integrity": "sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==", + "license": "MPL-2.0", + "peerDependencies": { + "@remix-run/react": "^2", + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@remix-run/react": { + "optional": true + }, + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/@xmldom/xmldom": { "version": "0.7.13", "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.13.tgz", diff --git a/package.json b/package.json index b580d29..e089f0c 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@types/howler": "^2.2.12", "@types/string-similarity": "^4.0.2", "@types/uuid": "^10.0.0", + "@vercel/analytics": "^1.5.0", "compromise": "^14.14.4", "core-js": "^3.41.0", "howler": "^2.2.4", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 062c636..708d1f9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import { Providers } from "@/app/providers"; import { Metadata } from "next"; import { Footer } from "@/components/Footer"; import { Toaster } from 'react-hot-toast'; +import { Analytics } from "@vercel/analytics/next" export const metadata: Metadata = { title: "OpenReader WebUI", @@ -59,6 +60,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
{children} +
{!isDev &&
}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index d2d0914..1ff7285 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -21,7 +21,10 @@ export function Footer() {

Documents are uploaded to your local browser cache.

-

Each sentence of the document you are viewing is sent to my Kokoro-FastAPI server for audio generation, no requests or data is collected.

+

Each sentence of the document you are viewing is sent to my Kokoro-FastAPI server for audio generation.

+

The audio is streamed back to your browser and played in real-time.

+ {/* Vercel analytics disclaimer */} +

This site uses Vercel Analytics to collect anonymous usage data to help improve the service.

 • diff --git a/src/components/player/Navigator.tsx b/src/components/player/Navigator.tsx index 87b9b59..6e83a05 100644 --- a/src/components/player/Navigator.tsx +++ b/src/components/player/Navigator.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Button } from '@headlessui/react'; +import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'; import { useState, useEffect, useRef } from 'react'; export const Navigator = ({ currentPage, numPages, skipToLocation }: { @@ -8,7 +8,7 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: { numPages: number | undefined; skipToLocation: (location: string | number, shouldPause?: boolean) => void; }) => { - const [inputValue, setInputValue] = useState(currentPage.toString()); + const [inputValue, setInputValue] = useState(''); const inputRef = useRef(null); useEffect(() => { @@ -22,6 +22,7 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: { }; const handleInputConfirm = () => { + if (inputValue === '') return; // Don't do anything if input is empty let page = parseInt(inputValue, 10); if (isNaN(page)) return; const maxPage = numPages || 1; @@ -29,9 +30,8 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: { if (page > maxPage) page = maxPage; if (page !== currentPage) { skipToLocation(page, true); - } else { - setInputValue(page.toString()); // reset input if unchanged } + setInputValue(''); // Clear input after confirming }; const handleInputKeyDown = (e: React.KeyboardEvent) => { @@ -41,6 +41,10 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: { } }; + const handlePopoverOpen = () => { + setInputValue(''); // Clear input when popup opens + }; + return (
{/* Page back */} @@ -55,22 +59,36 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: { - {/* Page number input */} -
- - / {numPages || 1} -
+ {/* Page number popup */} + + +

+ {currentPage} / {numPages || 1} +

+ + +
+
Go to page
+ +
of {numPages || 1}
+
+ + {/* Page forward */}