refactor(player): extract description link-rendering into lib/descriptionLinks
Moves the ~140 lines of pure URL/timestamp/hashtag parsing + renderDescription out of the 659-line PlayerModal into a standalone, testable module. No behavior change.
This commit is contained in:
npeter83
parent
9eaec27c7c
commit
83540b01eb
2 changed files with 149 additions and 146 deletions
|
|
@ -1,6 +1,5 @@
|
||||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import type { TFunction } from "i18next";
|
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
import { AlertTriangle, ArrowLeft, Check, CheckCheck, ExternalLink, SkipBack, SkipForward, X } from "lucide-react";
|
import { AlertTriangle, ArrowLeft, Check, CheckCheck, ExternalLink, SkipBack, SkipForward, X } from "lucide-react";
|
||||||
|
|
@ -8,152 +7,9 @@ import Avatar from "./Avatar";
|
||||||
import AddToPlaylist from "./AddToPlaylist";
|
import AddToPlaylist from "./AddToPlaylist";
|
||||||
import { api, type Video } from "../lib/api";
|
import { api, type Video } from "../lib/api";
|
||||||
import { channelYouTubeUrl, formatDuration, formatViews, relativeTime } from "../lib/format";
|
import { channelYouTubeUrl, formatDuration, formatViews, relativeTime } from "../lib/format";
|
||||||
|
import { renderDescription } from "../lib/descriptionLinks";
|
||||||
import { useBackToClose } from "../lib/history";
|
import { useBackToClose } from "../lib/history";
|
||||||
|
|
||||||
// Turn a description into clickable nodes:
|
|
||||||
// - bare timestamps (mm:ss / hh:mm:ss) → seek the inline player
|
|
||||||
// - a YouTube link to the *current* video → seek (to its t= if any)
|
|
||||||
// - a YouTube link to *another* video → load it in the inline player
|
|
||||||
// - emails → mailto:, hashtags → YouTube's hashtag page, other URLs → new tab
|
|
||||||
const URL_RE = /(https?:\/\/[^\s<>]+)/g;
|
|
||||||
// One pass over plain text for the three inline token kinds (email | hashtag | timestamp).
|
|
||||||
const INLINE_RE =
|
|
||||||
/([A-Za-z0-9._%+-]+@[A-Za-z0-9-]+\.[A-Za-z0-9.-]+)|(#[\p{L}\p{N}_]+)|(\b(?:\d{1,2}:)?\d{1,2}:\d{2}\b)/gu;
|
|
||||||
|
|
||||||
function tsToSeconds(ts: string): number {
|
|
||||||
const parts = ts.split(":").map((n) => parseInt(n, 10));
|
|
||||||
return parts.length === 3
|
|
||||||
? parts[0] * 3600 + parts[1] * 60 + parts[2]
|
|
||||||
: parts[0] * 60 + parts[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Parse a YouTube `t`/`start` param: "90", "90s", or "1h2m3s".
|
|
||||||
function parseStart(t: string | null): number | null {
|
|
||||||
if (!t) return null;
|
|
||||||
if (/^\d+$/.test(t)) return parseInt(t, 10) || null;
|
|
||||||
const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
|
|
||||||
if (!m) return null;
|
|
||||||
const total =
|
|
||||||
parseInt(m[1] || "0", 10) * 3600 +
|
|
||||||
parseInt(m[2] || "0", 10) * 60 +
|
|
||||||
parseInt(m[3] || "0", 10);
|
|
||||||
return total || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extract a video id (+ optional start) from a YouTube URL, else null.
|
|
||||||
function parseYouTube(url: string): { id: string; start: number | null } | null {
|
|
||||||
let u: URL;
|
|
||||||
try {
|
|
||||||
u = new URL(url);
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const host = u.hostname.replace(/^www\./, "");
|
|
||||||
let id: string | null = null;
|
|
||||||
if (host === "youtu.be") {
|
|
||||||
id = u.pathname.slice(1) || null;
|
|
||||||
} else if (host === "youtube.com" || host === "m.youtube.com" || host === "music.youtube.com") {
|
|
||||||
if (u.pathname === "/watch") id = u.searchParams.get("v");
|
|
||||||
else {
|
|
||||||
const m = u.pathname.match(/^\/(?:shorts|embed|live)\/([^/?#]+)/);
|
|
||||||
if (m) id = m[1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!id) return null;
|
|
||||||
return { id, start: parseStart(u.searchParams.get("t") || u.searchParams.get("start")) };
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderDescription(
|
|
||||||
text: string,
|
|
||||||
opts: {
|
|
||||||
currentId: string;
|
|
||||||
onSeek: (seconds: number) => void;
|
|
||||||
onLoadVideo: (id: string, start: number | null) => void;
|
|
||||||
t: TFunction;
|
|
||||||
}
|
|
||||||
): ReactNode[] {
|
|
||||||
const { t } = opts;
|
|
||||||
const out: ReactNode[] = [];
|
|
||||||
let key = 0;
|
|
||||||
const linkCls = "text-accent hover:underline break-all";
|
|
||||||
// Tidy YouTube descriptions: drop trailing spaces and remove blank lines entirely
|
|
||||||
// (they're just noise in the popover), keeping single line breaks.
|
|
||||||
const clean = text.replace(/[ \t]+\n/g, "\n").replace(/\n{2,}/g, "\n").trim();
|
|
||||||
for (const chunk of clean.split(URL_RE)) {
|
|
||||||
if (/^https?:\/\//.test(chunk)) {
|
|
||||||
const href = chunk.replace(/[.,;:!?)\]]+$/, "");
|
|
||||||
const yt = parseYouTube(href);
|
|
||||||
if (yt) {
|
|
||||||
const sameVideo = yt.id === opts.currentId;
|
|
||||||
out.push(
|
|
||||||
<button
|
|
||||||
key={key++}
|
|
||||||
onClick={() =>
|
|
||||||
sameVideo ? opts.onSeek(yt.start ?? 0) : opts.onLoadVideo(yt.id, yt.start)
|
|
||||||
}
|
|
||||||
className={linkCls}
|
|
||||||
title={sameVideo ? t("player.jumpToTime") : t("player.playInApp")}
|
|
||||||
>
|
|
||||||
{href}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
out.push(
|
|
||||||
<a key={key++} href={href} target="_blank" rel="noreferrer" className={linkCls}>
|
|
||||||
{href}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
// Plain text: pull out emails, hashtags and bare timestamps.
|
|
||||||
INLINE_RE.lastIndex = 0;
|
|
||||||
let last = 0;
|
|
||||||
let m: RegExpExecArray | null;
|
|
||||||
while ((m = INLINE_RE.exec(chunk))) {
|
|
||||||
if (m.index > last) out.push(<span key={key++}>{chunk.slice(last, m.index)}</span>);
|
|
||||||
if (m[1]) {
|
|
||||||
// Email — trim trailing punctuation the domain rule may have swallowed.
|
|
||||||
const email = m[1].replace(/[.,;:]+$/, "");
|
|
||||||
out.push(
|
|
||||||
<a key={key++} href={`mailto:${email}`} className={linkCls}>
|
|
||||||
{email}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
if (m[1].length > email.length) out.push(<span key={key++}>{m[1].slice(email.length)}</span>);
|
|
||||||
} else if (m[2]) {
|
|
||||||
// Hashtag → YouTube's hashtag feed (mirrors native YouTube behavior).
|
|
||||||
const tag = m[2].slice(1);
|
|
||||||
out.push(
|
|
||||||
<a
|
|
||||||
key={key++}
|
|
||||||
href={`https://www.youtube.com/hashtag/${encodeURIComponent(tag)}`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className={linkCls}
|
|
||||||
>
|
|
||||||
{m[2]}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const ts = m[3];
|
|
||||||
out.push(
|
|
||||||
<button
|
|
||||||
key={key++}
|
|
||||||
onClick={() => opts.onSeek(tsToSeconds(ts))}
|
|
||||||
className="text-accent hover:underline"
|
|
||||||
>
|
|
||||||
{ts}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
last = m.index + m[0].length;
|
|
||||||
}
|
|
||||||
if (last < chunk.length) out.push(<span key={key++}>{chunk.slice(last)}</span>);
|
|
||||||
}
|
|
||||||
return out;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Experiment (branch experiment/inline-player): play the video in-app via the
|
// Experiment (branch experiment/inline-player): play the video in-app via the
|
||||||
// YouTube IFrame Player API (not a bare embed) so we can read playback position
|
// YouTube IFrame Player API (not a bare embed) so we can read playback position
|
||||||
// and resume where the user left off. The modal closes via the in-card Close
|
// and resume where the user left off. The modal closes via the in-card Close
|
||||||
|
|
|
||||||
147
frontend/src/lib/descriptionLinks.tsx
Normal file
147
frontend/src/lib/descriptionLinks.tsx
Normal file
|
|
@ -0,0 +1,147 @@
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import type { TFunction } from "i18next";
|
||||||
|
|
||||||
|
// Turn a video description into clickable nodes:
|
||||||
|
// - bare timestamps (mm:ss / hh:mm:ss) → seek the inline player
|
||||||
|
// - a YouTube link to the *current* video → seek (to its t= if any)
|
||||||
|
// - a YouTube link to *another* video → load it in the inline player
|
||||||
|
// - emails → mailto:, hashtags → YouTube's hashtag page, other URLs → new tab
|
||||||
|
// Pure logic (no React state), factored out of PlayerModal so it's testable on its own.
|
||||||
|
const URL_RE = /(https?:\/\/[^\s<>]+)/g;
|
||||||
|
// One pass over plain text for the three inline token kinds (email | hashtag | timestamp).
|
||||||
|
const INLINE_RE =
|
||||||
|
/([A-Za-z0-9._%+-]+@[A-Za-z0-9-]+\.[A-Za-z0-9.-]+)|(#[\p{L}\p{N}_]+)|(\b(?:\d{1,2}:)?\d{1,2}:\d{2}\b)/gu;
|
||||||
|
|
||||||
|
function tsToSeconds(ts: string): number {
|
||||||
|
const parts = ts.split(":").map((n) => parseInt(n, 10));
|
||||||
|
return parts.length === 3
|
||||||
|
? parts[0] * 3600 + parts[1] * 60 + parts[2]
|
||||||
|
: parts[0] * 60 + parts[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse a YouTube `t`/`start` param: "90", "90s", or "1h2m3s".
|
||||||
|
function parseStart(t: string | null): number | null {
|
||||||
|
if (!t) return null;
|
||||||
|
if (/^\d+$/.test(t)) return parseInt(t, 10) || null;
|
||||||
|
const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
|
||||||
|
if (!m) return null;
|
||||||
|
const total =
|
||||||
|
parseInt(m[1] || "0", 10) * 3600 +
|
||||||
|
parseInt(m[2] || "0", 10) * 60 +
|
||||||
|
parseInt(m[3] || "0", 10);
|
||||||
|
return total || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extract a video id (+ optional start) from a YouTube URL, else null.
|
||||||
|
function parseYouTube(url: string): { id: string; start: number | null } | null {
|
||||||
|
let u: URL;
|
||||||
|
try {
|
||||||
|
u = new URL(url);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const host = u.hostname.replace(/^www\./, "");
|
||||||
|
let id: string | null = null;
|
||||||
|
if (host === "youtu.be") {
|
||||||
|
id = u.pathname.slice(1) || null;
|
||||||
|
} else if (host === "youtube.com" || host === "m.youtube.com" || host === "music.youtube.com") {
|
||||||
|
if (u.pathname === "/watch") id = u.searchParams.get("v");
|
||||||
|
else {
|
||||||
|
const m = u.pathname.match(/^\/(?:shorts|embed|live)\/([^/?#]+)/);
|
||||||
|
if (m) id = m[1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!id) return null;
|
||||||
|
return { id, start: parseStart(u.searchParams.get("t") || u.searchParams.get("start")) };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function renderDescription(
|
||||||
|
text: string,
|
||||||
|
opts: {
|
||||||
|
currentId: string;
|
||||||
|
onSeek: (seconds: number) => void;
|
||||||
|
onLoadVideo: (id: string, start: number | null) => void;
|
||||||
|
t: TFunction;
|
||||||
|
}
|
||||||
|
): ReactNode[] {
|
||||||
|
const { t } = opts;
|
||||||
|
const out: ReactNode[] = [];
|
||||||
|
let key = 0;
|
||||||
|
const linkCls = "text-accent hover:underline break-all";
|
||||||
|
// Tidy YouTube descriptions: drop trailing spaces and remove blank lines entirely
|
||||||
|
// (they're just noise in the popover), keeping single line breaks.
|
||||||
|
const clean = text.replace(/[ \t]+\n/g, "\n").replace(/\n{2,}/g, "\n").trim();
|
||||||
|
for (const chunk of clean.split(URL_RE)) {
|
||||||
|
if (/^https?:\/\//.test(chunk)) {
|
||||||
|
const href = chunk.replace(/[.,;:!?)\]]+$/, "");
|
||||||
|
const yt = parseYouTube(href);
|
||||||
|
if (yt) {
|
||||||
|
const sameVideo = yt.id === opts.currentId;
|
||||||
|
out.push(
|
||||||
|
<button
|
||||||
|
key={key++}
|
||||||
|
onClick={() =>
|
||||||
|
sameVideo ? opts.onSeek(yt.start ?? 0) : opts.onLoadVideo(yt.id, yt.start)
|
||||||
|
}
|
||||||
|
className={linkCls}
|
||||||
|
title={sameVideo ? t("player.jumpToTime") : t("player.playInApp")}
|
||||||
|
>
|
||||||
|
{href}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
out.push(
|
||||||
|
<a key={key++} href={href} target="_blank" rel="noreferrer" className={linkCls}>
|
||||||
|
{href}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
// Plain text: pull out emails, hashtags and bare timestamps.
|
||||||
|
INLINE_RE.lastIndex = 0;
|
||||||
|
let last = 0;
|
||||||
|
let m: RegExpExecArray | null;
|
||||||
|
while ((m = INLINE_RE.exec(chunk))) {
|
||||||
|
if (m.index > last) out.push(<span key={key++}>{chunk.slice(last, m.index)}</span>);
|
||||||
|
if (m[1]) {
|
||||||
|
// Email — trim trailing punctuation the domain rule may have swallowed.
|
||||||
|
const email = m[1].replace(/[.,;:]+$/, "");
|
||||||
|
out.push(
|
||||||
|
<a key={key++} href={`mailto:${email}`} className={linkCls}>
|
||||||
|
{email}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
if (m[1].length > email.length) out.push(<span key={key++}>{m[1].slice(email.length)}</span>);
|
||||||
|
} else if (m[2]) {
|
||||||
|
// Hashtag → YouTube's hashtag feed (mirrors native YouTube behavior).
|
||||||
|
const tag = m[2].slice(1);
|
||||||
|
out.push(
|
||||||
|
<a
|
||||||
|
key={key++}
|
||||||
|
href={`https://www.youtube.com/hashtag/${encodeURIComponent(tag)}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className={linkCls}
|
||||||
|
>
|
||||||
|
{m[2]}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const ts = m[3];
|
||||||
|
out.push(
|
||||||
|
<button
|
||||||
|
key={key++}
|
||||||
|
onClick={() => opts.onSeek(tsToSeconds(ts))}
|
||||||
|
className="text-accent hover:underline"
|
||||||
|
>
|
||||||
|
{ts}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
last = m.index + m[0].length;
|
||||||
|
}
|
||||||
|
if (last < chunk.length) out.push(<span key={key++}>{chunk.slice(last)}</span>);
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue