feat: add YouTube video embed support for TipTap editor (#294)
* feat: add YouTube video embed support for TipTap editor - Paste YouTube URLs to auto-embed videos with metadata - Edit video title and URL through dropdown menu - Convert embed back to plain URL link - Fetch video titles automatically via YouTube oEmbed API * fix: - reverted NewCardForm CSS properties back to max-h-48. - Added boolean prop to TipTap Edtior for YouTube embed. - Disabled YouTube embed feature for NewCardForm Editor * chore: lint * chore: translations * chore: update translations --------- Co-authored-by: Henry <henry_ball@hotmail.co.uk>
This commit is contained in:
Eliott Herbert-Byrnes
committed by
GitHub
GitHub
parent
a5432c60b7
commit
89c8961176
189
apps/web/src/components/YouTubeEmbed/EditYouTubeModal.tsx
Normal file
189
apps/web/src/components/YouTubeEmbed/EditYouTubeModal.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { HiXMark } from "react-icons/hi2";
|
||||
|
||||
import Button from "~/components/Button";
|
||||
import Input from "~/components/Input";
|
||||
import { useModal } from "~/providers/modal";
|
||||
import { fetchYouTubeMetadata, isYouTubeUrl } from "./utils";
|
||||
|
||||
interface EditYouTubeFormInput {
|
||||
url: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
interface EditYouTubeModalState {
|
||||
url: string;
|
||||
title: string;
|
||||
onSave: (url: string, title: string) => void;
|
||||
}
|
||||
|
||||
export function EditYouTubeModal() {
|
||||
const { closeModal, getModalState } = useModal();
|
||||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [urlError, setUrlError] = useState<string | null>(null);
|
||||
|
||||
// Get initial values and callback from modal state
|
||||
const modalState = getModalState("EDIT_YOUTUBE") as
|
||||
| EditYouTubeModalState
|
||||
| undefined;
|
||||
const initialUrl = modalState?.url ?? "";
|
||||
const initialTitle = modalState?.title ?? "";
|
||||
const onSave = modalState?.onSave;
|
||||
|
||||
const { register, handleSubmit, watch, reset } =
|
||||
useForm<EditYouTubeFormInput>({
|
||||
defaultValues: {
|
||||
url: initialUrl,
|
||||
title: initialTitle,
|
||||
},
|
||||
});
|
||||
|
||||
// Reset form when modal state changes (when modal opens with new values)
|
||||
useEffect(() => {
|
||||
if (modalState) {
|
||||
reset({
|
||||
url: modalState.url,
|
||||
title: modalState.title,
|
||||
});
|
||||
}
|
||||
}, [modalState, reset]);
|
||||
|
||||
const currentUrl = watch("url");
|
||||
|
||||
const onSubmit = async (values: EditYouTubeFormInput) => {
|
||||
// Validate URL
|
||||
if (!isYouTubeUrl(values.url)) {
|
||||
setUrlError(t`Please enter a valid YouTube URL`);
|
||||
return;
|
||||
}
|
||||
|
||||
setUrlError(null);
|
||||
setIsValidating(true);
|
||||
|
||||
try {
|
||||
// If title is empty and URL changed, fetch new title
|
||||
let finalTitle = values.title;
|
||||
if (!finalTitle.trim() && values.url !== initialUrl) {
|
||||
const metadata = await fetchYouTubeMetadata(values.url);
|
||||
finalTitle = metadata?.title ?? "YouTube Video";
|
||||
} else if (!finalTitle.trim()) {
|
||||
// Keep existing title if no new title provided and URL unchanged
|
||||
finalTitle = initialTitle || "YouTube Video";
|
||||
}
|
||||
|
||||
if (onSave) {
|
||||
onSave(values.url, finalTitle);
|
||||
}
|
||||
closeModal();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setUrlError(t`Failed to fetch video information`);
|
||||
} finally {
|
||||
setIsValidating(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-focus on title input (more useful for editing)
|
||||
useEffect(() => {
|
||||
const titleElement: HTMLElement | null =
|
||||
document.querySelector<HTMLElement>("#youtube-title");
|
||||
if (titleElement) titleElement.focus();
|
||||
}, []);
|
||||
|
||||
// Validate URL on change
|
||||
useEffect(() => {
|
||||
if (currentUrl && !isYouTubeUrl(currentUrl)) {
|
||||
setUrlError(t`Please enter a valid YouTube URL`);
|
||||
} else {
|
||||
setUrlError(null);
|
||||
}
|
||||
}, [currentUrl]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="px-5 pt-5">
|
||||
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
|
||||
<h2 className="text-sm font-medium">{t`Edit YouTube Video`}</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="youtube-title"
|
||||
className="mb-2 block text-xs font-medium text-light-900 dark:text-dark-900"
|
||||
>
|
||||
{t`Title`}
|
||||
</label>
|
||||
<Input
|
||||
id="youtube-title"
|
||||
placeholder={t`Enter a custom title`}
|
||||
{...register("title")}
|
||||
onKeyDown={async (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
await handleSubmit(onSubmit)();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="youtube-url"
|
||||
className="mb-2 block text-xs font-medium text-light-900 dark:text-dark-900"
|
||||
>
|
||||
{t`YouTube URL`}
|
||||
</label>
|
||||
<Input
|
||||
id="youtube-url"
|
||||
placeholder={t`https://www.youtube.com/watch?v=...`}
|
||||
{...register("url", { required: true })}
|
||||
onKeyDown={async (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
await handleSubmit(onSubmit)();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{urlError && (
|
||||
<p className="mt-1 text-xs text-red-600 dark:text-red-400">
|
||||
{urlError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
{t`Cancel`}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
isLoading={isValidating}
|
||||
disabled={!watch("url") || !!urlError}
|
||||
>
|
||||
{t`Save`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
53
apps/web/src/components/YouTubeEmbed/YouTubeCard.tsx
Normal file
53
apps/web/src/components/YouTubeEmbed/YouTubeCard.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import YouTubeDropdown from "./YouTubeDropdown";
|
||||
|
||||
interface YouTubeCardProps {
|
||||
videoId: string;
|
||||
url: string;
|
||||
title: string;
|
||||
showEmbed?: boolean;
|
||||
onConvertToLink: () => void;
|
||||
onDelete: () => void;
|
||||
onUpdate: (url: string, title: string) => void;
|
||||
}
|
||||
|
||||
const YouTubeCard = ({
|
||||
videoId,
|
||||
url,
|
||||
title,
|
||||
showEmbed = true,
|
||||
onConvertToLink,
|
||||
onDelete,
|
||||
onUpdate,
|
||||
}: YouTubeCardProps) => {
|
||||
return (
|
||||
<div className="w-full max-w-md rounded-lg border border-light-300 bg-light-50 dark:border-dark-300 dark:bg-dark-50">
|
||||
<div className="flex items-center justify-between gap-6 p-0 px-6">
|
||||
<h3 className="truncate text-sm font-medium">{title}</h3>
|
||||
<div className="mt-3">
|
||||
<YouTubeDropdown
|
||||
url={url}
|
||||
title={title}
|
||||
onConvertToLink={onConvertToLink}
|
||||
onDelete={onDelete}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showEmbed && videoId && (
|
||||
<div className="p-6 pt-1">
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}?rel=0`}
|
||||
title={title}
|
||||
className="aspect-video w-full rounded-lg"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerPolicy="strict-origin-when-cross-origin"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default YouTubeCard;
|
||||
63
apps/web/src/components/YouTubeEmbed/YouTubeDropdown.tsx
Normal file
63
apps/web/src/components/YouTubeEmbed/YouTubeDropdown.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
import {
|
||||
HiEllipsisHorizontal,
|
||||
HiLink,
|
||||
HiPencil,
|
||||
HiTrash,
|
||||
} from "react-icons/hi2";
|
||||
|
||||
import { useModal } from "~/providers/modal";
|
||||
import Dropdown from "../Dropdown";
|
||||
|
||||
interface YouTubeDropdownProps {
|
||||
url: string;
|
||||
title: string;
|
||||
onConvertToLink: () => void;
|
||||
onDelete: () => void;
|
||||
onUpdate: (url: string, title: string) => void;
|
||||
}
|
||||
|
||||
const YouTubeDropdown = ({
|
||||
url,
|
||||
title,
|
||||
onConvertToLink,
|
||||
onDelete,
|
||||
onUpdate,
|
||||
}: YouTubeDropdownProps) => {
|
||||
const { openModal, setModalState } = useModal();
|
||||
|
||||
const handleEdit = () => {
|
||||
setModalState("EDIT_YOUTUBE", {
|
||||
url,
|
||||
title,
|
||||
onSave: onUpdate,
|
||||
});
|
||||
openModal("EDIT_YOUTUBE");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
items={[
|
||||
{
|
||||
label: t`Edit`,
|
||||
action: handleEdit,
|
||||
icon: <HiPencil className="h-4 w-4 text-dark-900" />,
|
||||
},
|
||||
{
|
||||
label: t`Convert to link`,
|
||||
action: onConvertToLink,
|
||||
icon: <HiLink className="h-4 w-4 text-dark-900" />,
|
||||
},
|
||||
{
|
||||
label: t`Delete`,
|
||||
action: onDelete,
|
||||
icon: <HiTrash className="h-4 w-4 text-dark-900" />,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<HiEllipsisHorizontal className="h-5 w-5 text-dark-900" />
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
export default YouTubeDropdown;
|
||||
196
apps/web/src/components/YouTubeEmbed/YouTubeNode.tsx
Normal file
196
apps/web/src/components/YouTubeEmbed/YouTubeNode.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
import { mergeAttributes, Node } from "@tiptap/core";
|
||||
import { Plugin, PluginKey } from "@tiptap/pm/state";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
|
||||
import { extractVideoId, fetchYouTubeMetadata, isYouTubeUrl } from "./utils";
|
||||
import YouTubeNodeView from "./YouTubeNodeView";
|
||||
|
||||
export interface YouTubeOptions {
|
||||
inline: boolean;
|
||||
HTMLAttributes: Record<string, undefined>;
|
||||
}
|
||||
|
||||
declare module "@tiptap/core" {
|
||||
interface Commands<ReturnType> {
|
||||
youTube: {
|
||||
setYouTubeEmbed: (options: {
|
||||
videoId: string;
|
||||
url: string;
|
||||
title: string;
|
||||
thumbnailUrl?: string;
|
||||
showEmbed?: boolean;
|
||||
}) => ReturnType;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const YouTubeNode = Node.create<YouTubeOptions>({
|
||||
name: "youtube",
|
||||
group: "block",
|
||||
atom: true,
|
||||
addOptions() {
|
||||
return {
|
||||
inline: false,
|
||||
HTMLAttributes: {},
|
||||
};
|
||||
},
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
videoId: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-video-id"),
|
||||
renderHTML: (attributes) => {
|
||||
if (!attributes.videoId) return {};
|
||||
return { "data-video-id": attributes.videoId as string };
|
||||
},
|
||||
},
|
||||
url: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-url"),
|
||||
renderHTML: (attributes) => {
|
||||
if (!attributes.url) return {};
|
||||
return { "data-url": attributes.url as string };
|
||||
},
|
||||
},
|
||||
title: {
|
||||
default: "YouTube Video",
|
||||
parseHTML: (element) => element.getAttribute("data-title"),
|
||||
renderHTML: (attributes) => {
|
||||
return { "data-title": attributes.title as string };
|
||||
},
|
||||
},
|
||||
thumbnailUrl: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-thumbnail"),
|
||||
renderHTML: (attributes) => {
|
||||
if (!attributes.thumbnailUrl) return {};
|
||||
return { "data-thumbnail": attributes.thumbnailUrl as string };
|
||||
},
|
||||
},
|
||||
showEmbed: {
|
||||
default: true,
|
||||
parseHTML: (element) => element.getAttribute("data-show-embed"),
|
||||
renderHTML: (attributes) => {
|
||||
return { "data-show-embed": attributes.showEmbed as string };
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: "div[data-youtube]",
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return [
|
||||
"div",
|
||||
mergeAttributes(
|
||||
{ "data-youtube": "" },
|
||||
this.options.HTMLAttributes,
|
||||
HTMLAttributes,
|
||||
),
|
||||
];
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ReactNodeViewRenderer(YouTubeNodeView);
|
||||
},
|
||||
|
||||
addProseMirrorPlugins() {
|
||||
const nodeType = this.type;
|
||||
|
||||
return [
|
||||
new Plugin({
|
||||
key: new PluginKey("youtubePaste"),
|
||||
props: {
|
||||
handlePaste: (view, event) => {
|
||||
const text = event.clipboardData?.getData("text/plain");
|
||||
if (!text) return false;
|
||||
|
||||
// Check if the pasted text is a YouTube URL
|
||||
const youtubeRegex =
|
||||
/(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([\w-]+)/;
|
||||
const match = youtubeRegex.exec(text);
|
||||
|
||||
if (!match || !isYouTubeUrl(text)) return false;
|
||||
|
||||
const videoId = extractVideoId(text);
|
||||
if (!videoId) return false;
|
||||
|
||||
const { state, dispatch } = view;
|
||||
const { tr } = state;
|
||||
|
||||
const node = nodeType.create({
|
||||
videoId,
|
||||
url: text,
|
||||
title: "Loading...",
|
||||
showEmbed: true,
|
||||
});
|
||||
|
||||
tr.replaceSelectionWith(node);
|
||||
dispatch(tr);
|
||||
|
||||
// Fetch metadata asynchronously and update the node
|
||||
void fetchYouTubeMetadata(text).then((metadata) => {
|
||||
const { state: newState, dispatch: newDispatch } = view;
|
||||
const { tr: newTr } = newState;
|
||||
|
||||
newState.doc.descendants((n, pos) => {
|
||||
if (
|
||||
n.type.name === "youtube" &&
|
||||
n.attrs.videoId === videoId &&
|
||||
n.attrs.title === "Loading..."
|
||||
) {
|
||||
newTr.setNodeMarkup(pos, undefined, {
|
||||
...n.attrs,
|
||||
title: metadata?.title ?? "YouTube Video",
|
||||
thumbnailUrl: metadata?.thumbnail_url ?? null,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (newTr.docChanged) {
|
||||
newDispatch(newTr);
|
||||
}
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
}),
|
||||
];
|
||||
},
|
||||
|
||||
// commands for the YouTube embed node
|
||||
addCommands() {
|
||||
return {
|
||||
setYouTubeEmbed:
|
||||
(options: {
|
||||
videoId: string;
|
||||
url: string;
|
||||
title?: string;
|
||||
thumbnailUrl?: string;
|
||||
showEmbed?: boolean;
|
||||
}) =>
|
||||
({ editor }) => {
|
||||
return editor.commands.insertContent({
|
||||
type: this.name,
|
||||
attrs: {
|
||||
videoId: options.videoId,
|
||||
url: options.url,
|
||||
title: options.title ?? "YouTube Video",
|
||||
thumbnailUrl: options.thumbnailUrl,
|
||||
showEmbed: options.showEmbed ?? true,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
82
apps/web/src/components/YouTubeEmbed/YouTubeNodeView.tsx
Normal file
82
apps/web/src/components/YouTubeEmbed/YouTubeNodeView.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import type { NodeViewProps } from "@tiptap/react";
|
||||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
|
||||
import { extractVideoId } from "./utils";
|
||||
import YouTubeCard from "./YouTubeCard";
|
||||
|
||||
export default function YouTubeNodeView({
|
||||
node,
|
||||
editor,
|
||||
getPos,
|
||||
deleteNode,
|
||||
updateAttributes,
|
||||
}: NodeViewProps) {
|
||||
const { videoId, title, url, showEmbed } = node.attrs as {
|
||||
videoId: string;
|
||||
title: string;
|
||||
url: string;
|
||||
showEmbed: boolean;
|
||||
};
|
||||
|
||||
const handleConvertToLink = () => {
|
||||
const pos = getPos();
|
||||
if (typeof pos !== "number") return;
|
||||
|
||||
const linkContent = {
|
||||
type: "paragraph",
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: url,
|
||||
marks: [
|
||||
{
|
||||
type: "link",
|
||||
attrs: {
|
||||
href: url,
|
||||
target: "_blank",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange({ from: pos, to: pos + node.nodeSize })
|
||||
.insertContentAt(pos, linkContent)
|
||||
.run();
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
deleteNode();
|
||||
};
|
||||
|
||||
const handleUpdate = (newUrl: string, newTitle: string) => {
|
||||
if (newUrl !== url) {
|
||||
const newVideoId = extractVideoId(newUrl);
|
||||
updateAttributes({
|
||||
url: newUrl,
|
||||
title: newTitle,
|
||||
videoId: newVideoId,
|
||||
});
|
||||
} else {
|
||||
updateAttributes({ title: newTitle });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NodeViewWrapper>
|
||||
<YouTubeCard
|
||||
videoId={videoId}
|
||||
url={url}
|
||||
title={title}
|
||||
showEmbed={showEmbed}
|
||||
onConvertToLink={handleConvertToLink}
|
||||
onDelete={handleDelete}
|
||||
onUpdate={handleUpdate}
|
||||
/>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
61
apps/web/src/components/YouTubeEmbed/utils.ts
Normal file
61
apps/web/src/components/YouTubeEmbed/utils.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
export function extractVideoId(url: string): string | null {
|
||||
if (!url) return null;
|
||||
url = url.trim();
|
||||
|
||||
// youtube.com/watch?v=VIDEO_ID
|
||||
const watchMatch = /(?:youtube\.com\/watch\?v=)([a-zA-Z0-9_-]{11})/.exec(url);
|
||||
if (watchMatch) return watchMatch[1] ?? null;
|
||||
|
||||
// youtu.be/VIDEO_ID
|
||||
const shortMatch = /(?:youtu\.be\/)([a-zA-Z0-9_-]{11})/.exec(url);
|
||||
if (shortMatch) return shortMatch[1] ?? null;
|
||||
|
||||
// youtube.com/embed/VIDEO_ID
|
||||
const embedMatch = /(?:youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/.exec(url);
|
||||
if (embedMatch) return embedMatch[1] ?? null;
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a URL is a valid YouTube link
|
||||
*/
|
||||
export function isYouTubeUrl(url: string): boolean {
|
||||
if (!url) return false;
|
||||
const videoId = extractVideoId(url);
|
||||
return videoId !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch YouTube video metadata using oEmbed API
|
||||
* Returns title, author, thumbnail URL, etc.
|
||||
* No API key required
|
||||
*/
|
||||
export async function fetchYouTubeMetadata(url: string): Promise<{
|
||||
title: string;
|
||||
author_name: string;
|
||||
thumbnail_url: string;
|
||||
} | null> {
|
||||
try {
|
||||
const oembedUrl = `https://www.youtube.com/oembed?url=${encodeURIComponent(url)}&format=json`;
|
||||
const response = await fetch(oembedUrl);
|
||||
|
||||
if (!response.ok) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = (await response.json()) as {
|
||||
title: string;
|
||||
author_name: string;
|
||||
thumbnail_url: string;
|
||||
};
|
||||
return {
|
||||
title: data.title || "YouTube Video",
|
||||
author_name: data.author_name || "",
|
||||
thumbnail_url: data.thumbnail_url || "",
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch YouTube metadata:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user