danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleanup imports and ssr cabable components

Browse source
This commit is contained in:
Richard Roberson 2025-02-13 00:09:49 -07:00
parent 1d418e1444
commit bc790df89e
8 changed files with 40 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/layout.tsx
View file

@ -1,5 +1,6 @@
import "./globals.css";
import { Providers } from "./providers";
import { ReactNode } from "react";
import { Providers } from "@/app/providers";
import { Metadata } from "next";
import Script from "next/script";
import { Footer } from "@/components/Footer";
@ -48,12 +49,7 @@ export const metadata: Metadata = {
const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
//const isDev = false;
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<head>

17
src/app/page.tsx
View file

@ -1,32 +1,17 @@
'use client';
import { useState } from 'react';
import { DocumentUploader } from '@/components/DocumentUploader';
import { DocumentList } from '@/components/DocumentList';
import { SettingsModal } from '@/components/SettingsModal';
import { SettingsIcon } from '@/components/icons/Icons';
import { Button } from '@headlessui/react';
export default function Home() {
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
return (
<div className='p-3.5 sm:p-5'>
<Button
onClick={() => setIsSettingsOpen(true)}
className="rounded-full p-2 text-foreground hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.1] hover:text-accent absolute top-1 left-1 sm:top-3 sm:left-3"
aria-label="Settings"
tabIndex={0}
>
<SettingsIcon className="w-4 h-4 sm:w-5 sm:h-5 hover:animate-spin-slow" />
</Button>
<SettingsModal />
<h1 className="text-xl font-bold text-center flex-grow">OpenReader WebUI</h1>
<p className="text-sm mt-1 text-center text-muted mb-5">A bring your own text-to-speech api web interface for reading documents with high quality voices</p>
<div className="flex flex-col items-center gap-5">
<DocumentUploader className='max-w-xl' />
<DocumentList />
</div>
<SettingsModal isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
</div>
);
}

30
src/components/ConfirmDialog.tsx
View file

@ -1,6 +1,4 @@
'use client';
import { Fragment, useEffect } from 'react';
import { Fragment, KeyboardEvent } from 'react';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
interface ConfirmDialogProps {
@ -24,23 +22,21 @@ export function ConfirmDialog({
cancelText = 'Cancel',
isDangerous = false,
}: ConfirmDialogProps) {
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault();
onConfirm();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [isOpen, onConfirm]);
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault();
onConfirm();
}
};
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-50" onClose={onClose}>
<Dialog
as="div"
className="relative z-50"
onClose={onClose}
onKeyDown={handleKeyDown}
>
<TransitionChild
as={Fragment}
enter="ease-out duration-300"

22
src/components/SettingsModal.tsx
View file

@ -4,7 +4,7 @@ import { Fragment, useState, useEffect, useCallback } from 'react';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, Listbox, ListboxButton, ListboxOptions, ListboxOption, Button } from '@headlessui/react';
import { useTheme } from '@/contexts/ThemeContext';
import { useConfig } from '@/contexts/ConfigContext';
import { ChevronUpDownIcon, CheckIcon } from './icons/Icons';
import { ChevronUpDownIcon, CheckIcon, SettingsIcon } from '@/components/icons/Icons';
import { indexedDBService } from '@/utils/indexedDB';
import { useDocuments } from '@/contexts/DocumentContext';
import { setItem, getItem } from '@/utils/indexedDB';
@ -13,17 +13,14 @@ import { THEMES } from '@/contexts/ThemeContext';
const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
interface SettingsModalProps {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
}
const themes = THEMES.map(id => ({
id,
name: id.charAt(0).toUpperCase() + id.slice(1)
}));
export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
export function SettingsModal() {
const [isOpen, setIsOpen] = useState(false);
const { theme, setTheme } = useTheme();
const { apiKey, baseUrl, updateConfig } = useConfig();
const { refreshPDFs, refreshEPUBs, clearPDFs, clearEPUBs } = useDocuments();
@ -95,7 +92,14 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
};
return (
<>
<Button
onClick={() => setIsOpen(true)}
className="rounded-full p-2 text-foreground hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.1] hover:text-accent absolute top-1 left-1 sm:top-3 sm:left-3"
aria-label="Settings"
tabIndex={0}
>
<SettingsIcon className="w-4 h-4 sm:w-5 sm:h-5 hover:animate-spin-slow" />
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
<TransitionChild
@ -306,6 +310,6 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
confirmText="Delete"
isDangerous={true}
/>
</>
</Button>
);
}

4
src/contexts/ConfigContext.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
import { getItem, indexedDBService, setItem } from '@/utils/indexedDB';
export type ViewType = 'single' | 'dual' | 'scroll';
@ -29,7 +29,7 @@ type ConfigValues = {
const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
export function ConfigProvider({ children }: { children: React.ReactNode }) {
export function ConfigProvider({ children }: { children: ReactNode }) {
// Config state
const [apiKey, setApiKey] = useState<string>('');
const [baseUrl, setBaseUrl] = useState<string>('');

5
src/contexts/PDFContext.tsx
View file

@ -21,6 +21,7 @@ import {
useEffect,
useCallback,
useMemo,
RefObject,
} from 'react';
import { indexedDBService } from '@/utils/indexedDB';
@ -51,12 +52,12 @@ interface PDFContextType {
// PDF functionality
onDocumentLoadSuccess: (pdf: PDFDocumentProxy) => void;
highlightPattern: (text: string, pattern: string, containerRef: React.RefObject<HTMLDivElement>) => void;
highlightPattern: (text: string, pattern: string, containerRef: RefObject<HTMLDivElement>) => void;
clearHighlights: () => void;
handleTextClick: (
event: MouseEvent,
pdfText: string,
containerRef: React.RefObject<HTMLDivElement>,
containerRef: RefObject<HTMLDivElement>,
stopAndPlayFromIndex: (index: number) => void,
isProcessing: boolean
) => void;

5
src/contexts/TTSContext.tsx
View file

@ -14,7 +14,7 @@
'use client';
import React, {
import {
createContext,
useContext,
useState,
@ -22,6 +22,7 @@ import React, {
useEffect,
useRef,
useMemo,
ReactNode,
} from 'react';
import OpenAI from 'openai';
import { Howl } from 'howler';
@ -84,7 +85,7 @@ const TTSContext = createContext<TTSContextType | undefined>(undefined);
* Main provider component that manages the TTS state and functionality.
* Handles initialization of OpenAI client, audio context, and media session.
*/
export function TTSProvider({ children }: { children: React.ReactNode }) {
export function TTSProvider({ children }: { children: ReactNode }) {
// Configuration context consumption
const {
apiKey: openApiKey,

4
src/contexts/ThemeContext.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
const THEMES = ['system', 'light', 'dark', 'aqua', 'forest', 'vibrant'] as const;
type Theme = (typeof THEMES)[number];
@ -24,7 +24,7 @@ const getEffectiveTheme = (theme: Theme): Theme => {
return theme;
};
export function ThemeProvider({ children }: { children: React.ReactNode }) {
export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState<Theme>(() => {
if (typeof window === 'undefined') return 'system';
return (localStorage.getItem('theme') as Theme) || 'system';