imnyang/akiyama.mizuki.guru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: apply media proxy to thumbnail URLs in detail and home pages

Browse source
This commit is contained in:
암냥 2026-05-23 22:33:39 +09:00
commit ef82d6d1a4
No known key found for this signature in database
3 changed files with 6 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/frontend/src/app/detail/[id]/page.tsx
View file

@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
import type { Metadata } from "next"; import type { Metadata } from "next";
import Header from "@/components/header"; import Header from "@/components/header";
import DetailRawPanel from "@/components/detail-raw-panel"; import DetailRawPanel from "@/components/detail-raw-panel";
import { proxyMediaUrl } from "@/lib/media";
type SourceType = "twitter" | "pixiv"; type SourceType = "twitter" | "pixiv";
@ -248,7 +249,7 @@ export default async function DetailPage({ params }: { params: Promise<{ id: str
{post.mediaType === "video" ? ( {post.mediaType === "video" ? (
<video <video
src={post.mediaUrl} src={post.mediaUrl}
poster={post.thumbnailUrl} poster={proxyMediaUrl(post.thumbnailUrl)}
controls controls
loop loop
muted muted

7
apps/frontend/src/app/page.tsx
View file

@ -3,6 +3,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { MasonryPhotoAlbum } from "react-photo-album"; import { MasonryPhotoAlbum } from "react-photo-album";
import Header from "../components/header"; import Header from "../components/header";
import { proxyMediaUrl } from "../lib/media";
type Upload = { type Upload = {
_id: string; _id: string;
@ -439,7 +440,7 @@ export default function App() {
(upload) => (upload) =>
new Promise<GalleryPhoto | null>((resolve) => { new Promise<GalleryPhoto | null>((resolve) => {
const image = new Image(); const image = new Image();
const srcToLoad = (upload.mediaType === "video" && upload.thumbnailUrl) ? upload.thumbnailUrl : upload.mediaUrl; const srcToLoad = (upload.mediaType === "video" && upload.thumbnailUrl) ? proxyMediaUrl(upload.thumbnailUrl) : upload.mediaUrl;
image.src = srcToLoad; image.src = srcToLoad;
image.onload = () => { image.onload = () => {
resolve({ resolve({
@ -451,7 +452,7 @@ export default function App() {
author: upload.author?.trim() || "unknown", author: upload.author?.trim() || "unknown",
source: upload.tweet?.url || "", source: upload.tweet?.url || "",
mediaType: upload.mediaType, mediaType: upload.mediaType,
thumbnailUrl: upload.thumbnailUrl, thumbnailUrl: proxyMediaUrl(upload.thumbnailUrl),
}); });
}; };
image.onerror = () => { image.onerror = () => {
@ -464,7 +465,7 @@ export default function App() {
author: upload.author?.trim() || "unknown", author: upload.author?.trim() || "unknown",
source: upload.tweet?.url || "", source: upload.tweet?.url || "",
mediaType: upload.mediaType, mediaType: upload.mediaType,
thumbnailUrl: upload.thumbnailUrl, thumbnailUrl: proxyMediaUrl(upload.thumbnailUrl),
}); });
}; };
}), }),

5
apps/frontend/src/lib/media.ts
View file

@ -1,7 +1,3 @@
/**
* pbs.twimg.com 등 트위터 미디어 URL을 백엔드 프록시 경로로 변환합니다.
* 트래킹 보호나 방화벽으로 인해 직접 접근이 막힐 수 있기 때문입니다.
*/
const PROXIED_HOSTS = [ const PROXIED_HOSTS = [
"pbs.twimg.com", "pbs.twimg.com",
"video.twimg.com", "video.twimg.com",
@ -18,7 +14,6 @@ export function proxyMediaUrl(url: string | undefined | null): string {
return `/api/proxy/image?url=${encodeURIComponent(url)}`; return `/api/proxy/image?url=${encodeURIComponent(url)}`;
} }
} catch { } catch {
// 유효하지 않은 URL이면 그대로 반환
} }
return url; return url;