71e1472650
Introduce SegmentsSidebar component and supporting reader UI for segment-level navigation and inspection. Add TTS segments manifest and clear API endpoints to enable efficient retrieval and management of segment variants. Update TTS segment schema to include settings_hash for improved lookup and indexing, and adjust indexes to use settings_hash instead of settings_json. Update contexts and types to support segment variant display and interaction. This enhances document navigation and TTS segment management for end users.
30 lines
954 B
TypeScript
30 lines
954 B
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface ReaderSidebarBounds {
|
|
top: number;
|
|
bottom: number;
|
|
}
|
|
|
|
export function useReaderSidebarBounds(isOpen: boolean): ReaderSidebarBounds {
|
|
const [bounds, setBounds] = useState<ReaderSidebarBounds>({ top: 0, bottom: 0 });
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
|
|
const computeBounds = () => {
|
|
const header = document.querySelector('[data-app-header]') as HTMLElement | null;
|
|
const ttsbar = document.querySelector('[data-app-ttsbar]') as HTMLElement | null;
|
|
const headerH = header ? Math.ceil(header.getBoundingClientRect().height) : 0;
|
|
const ttsH = ttsbar ? Math.ceil(ttsbar.getBoundingClientRect().height) : 0;
|
|
setBounds({ top: headerH, bottom: ttsH });
|
|
};
|
|
|
|
computeBounds();
|
|
window.addEventListener('resize', computeBounds);
|
|
return () => window.removeEventListener('resize', computeBounds);
|
|
}, [isOpen]);
|
|
|
|
return bounds;
|
|
}
|