Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-03-11 17:55:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

simplify scrolling and cleanup some bugs

Browse source
This commit is contained in:
Pas 2025-11-26 12:59:40 -07:00
parent 4151b2fdec
commit c6182e6ebb
3 changed files with 14 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/player/atoms/Settings.tsx
View file

@ -96,7 +96,12 @@ function SettingsOverlay({ id }: { id: string }) {
<PlaybackSettingsView id={id} />
</Menu.Card>
</OverlayPage>
<OverlayPage id={id} path="/transcript" width={343} height={452}>
<OverlayPage
id={id}
path="/captions/transcript"
width={343}
height={452}
>
<Menu.CardWithScrollable>
<TranscriptView id={id} />
</Menu.CardWithScrollable>

4
src/components/player/atoms/settings/CaptionsView.tsx
View file

@ -542,7 +542,9 @@ export function CaptionsView({
/>
{selectedCaptionId && (
<Menu.ChevronLink onClick={() => router.navigate("/transcript")}>
<Menu.ChevronLink
onClick={() => router.navigate("/captions/transcript")}
>
{t("player.menus.subtitles.transcriptChoice")}
</Menu.ChevronLink>
)}

22
src/components/player/atoms/settings/TranscriptView.tsx
View file

@ -153,27 +153,15 @@ export function TranscriptView({ id }: { id: string }) {
const [didFirstScroll, setDidFirstScroll] = useState(false);
useEffect(() => {
if (!scrollTargetKey) return;
// Find nearest scrollable parent
const getScrollableParent = (node: HTMLElement | null): HTMLElement => {
let el: HTMLElement | null = node;
while (el && el.parentElement) {
const style = window.getComputedStyle(el);
if (/(auto|scroll)/.test(style.overflowY)) return el;
el = el.parentElement as HTMLElement;
}
return (
(document.scrollingElement as HTMLElement) ||
(document.documentElement as HTMLElement)
);
};
const scrollToStablePoint = (target: HTMLElement) => {
const container = getScrollableParent(target);
const container = carouselRef.current;
if (!container) return;
const containerRect = container.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const containerHeight = container.clientHeight || 452;
const desiredOffsetFromTop = Math.floor(containerHeight * 0.85); // ~3/4 down
const containerHeight = container.clientHeight || 288; // 18rem = 288px
const desiredOffsetFromTop = Math.floor(containerHeight * 0.6); // half of the container height
// Current absolute position of target center within container's scroll space
const targetCenterAbs =