OriginalSource 系のサムネイル画像周りを修正 (#1056)

* OriginalSource 系のサムネイル画像周り
Fixes #1054

* fx

codegen.yml

@@ -132,6 +132,7 @@ generates:
         VideoTitleSetPrimaryEvent: ../Video/dto.js#VideoTitleEventDTO
         VideoTitleUnsetPrimaryEvent: ../Video/dto.js#VideoTitleEventDTO
         YoutubeMadRequestedTimelineEvent: ../Timeline/TimelineEvent.dto.js#YoutubeMadRequestedTimelineEventDTO
+        YoutubeOriginalSource: ../FetchExternal/YoutubeOriginalSource.dto.js#YoutubeOriginalSourceDTO
         YoutubeRegistrationRequest: ../YoutubeRegistrationRequest/YoutubeRegistrationRequest.dto.js#YoutubeRegistrationRequestDTO
         YoutubeRegistrationRequestAcceptEvent: ../YoutubeRegistrationRequest/YoutubeRegistrationRequestEvent.dto.js#YoutubeRegistrationRequestAcceptEventDTO
         YoutubeRegistrationRequestAccepting: ../YoutubeRegistrationRequest/YoutubeRegistrationRequestAccepting.dto.js#YoutubeRegistrationRequestAcceptingDTO

src/FetchExternal/BilibiliOriginalSource.graphql

@@ -0,0 +1,22 @@
+type BilibiliOriginalSource {
+  sourceId: String!
+
+  title: String!
+  url: String!
+
+  "プロキシされた画像URL"
+  thumbnailUrl(scale: FetchExternalSourceThumbnailScale! = LARGE): String!
+    @deprecated(reason: "Use `proxiedThumbnailUrl`")
+
+  "プロキシされた画像URL"
+  proxiedThumbnailUrl(scale: FetchExternalSourceThumbnailScale! = LARGE): String!
+
+  """
+  bilibili側のオリジナルの画像URL
+
+  bilibili側の制約上、別のオリジンから直接埋め込んだりすることはほとんど出来ないことに注意．
+  """
+  originalThumbnailUrl: String!
+
+  tags: [BilibiliOriginalSourceTag!]!
+}

src/FetchExternal/BilibiliOriginalSource.resolver.ts

@@ -6,7 +6,10 @@ export const mkBilibiliOriginalSourceResolver: MkResolver<"BilibiliOriginalSourc
   title: ({ title }) => title,
   sourceId: ({ sourceId }) => sourceId,
   tags: ({ tags }) => tags,
-  thumbnailUrl: ({ sourceId }, { scale }) => ImagesService.originalBilibili(sourceId, scale),
+
+  thumbnailUrl: ({ sourceId }, { scale }) => ImagesService.proxyThis(sourceId, scale),
+  proxiedThumbnailUrl: ({ sourceId }, { scale }) => ImagesService.proxyThis(sourceId, scale),
+
   originalThumbnailUrl: ({ originalThumbnailUrl }) => originalThumbnailUrl,
   url: ({ sourceId }) => `https://www.bilibili.com/video/${sourceId}`,
 });

src/FetchExternal/BilibiliOriginalSourceTag.graphql

@@ -0,0 +1,13 @@
+type BilibiliOriginalSourceTag {
+  name: String!
+  searchTags(input: BilibiliOriginalSourceTagSearchTagsInput!): BilibiliOriginalSourceTagSearchTagsPayload!
+}
+
+input BilibiliOriginalSourceTagSearchTagsInput {
+  limit: Int! = 3
+  skip: Int! = 0
+}
+
+type BilibiliOriginalSourceTagSearchTagsPayload {
+  items: [TagSearchItemByName!]!
+}

src/FetchExternal/SoundcloudOriginalSource.graphql

@@ -6,6 +6,10 @@ type SoundcloudOriginalSource {
 
   "プロキシしたサムネイル画像"
   thumbnailUrl(scale: FetchExternalSourceThumbnailScale! = LARGE): String!
+    @deprecated(reason: "Use `proxiedThumbnailUrl`")
+
+  "プロキシしたサムネイル画像URL"
+  proxiedThumbnailUrl(scale: FetchExternalSourceThumbnailScale! = LARGE): String!
 
   """
   SoundCloud側のサムネイル画像．ない場合は投稿者のユーザー画像になる．

src/FetchExternal/SoundcloudOriginalSource.resolver.ts

@@ -7,6 +7,8 @@ export const mkSoundcloudOriginalSourceResolver: MkResolver<"SoundcloudOriginalS
   sourceId: ({ sourceId }) => sourceId,
   thumbnailUrl: ({ originalThumbnailUrl, userAvatarUrl }, { scale }) =>
     ImagesService.proxyThis(originalThumbnailUrl || userAvatarUrl, scale),
+  proxiedThumbnailUrl: ({ originalThumbnailUrl, userAvatarUrl }, { scale }) =>
+    ImagesService.proxyThis(originalThumbnailUrl || userAvatarUrl, scale),
   originalThumbnailUrl: ({ originalThumbnailUrl, userAvatarUrl }) => originalThumbnailUrl || userAvatarUrl,
   url: ({ url }) => url,
 });

src/FetchExternal/YoutubeOriginalSource.dto.ts

@@ -0,0 +1,33 @@
+export class YoutubeOriginalSourceDTO {
+  private constructor(
+    private readonly source: {
+      sourceId: string;
+      url: string;
+      originalThumbnailUrl: string;
+    },
+  ) {}
+
+  public static make({
+    sourceId,
+    url,
+    originalThumbnailUrl,
+  }: {
+    sourceId: string;
+    url: string;
+    originalThumbnailUrl: string;
+  }) {
+    return new YoutubeOriginalSourceDTO({ sourceId, url, originalThumbnailUrl });
+  }
+
+  get sourceId() {
+    return this.source.sourceId;
+  }
+
+  get url() {
+    return this.source.url;
+  }
+
+  get originalThumbnailUrl() {
+    return this.source.originalThumbnailUrl;
+  }
+}

src/FetchExternal/YoutubeOriginalSource.graphql

@@ -0,0 +1,9 @@
+type YoutubeOriginalSource {
+  sourceId: String!
+  url: String!
+
+  thumbnailUrl: String! @deprecated(reason: "Use `originalThumbnailUrl`")
+  originalThumbnailUrl: String!
+
+  proxiedThumbnailUrl(scale: FetchExternalSourceThumbnailScale! = LARGE): String!
+}

src/FetchExternal/YoutubeOriginalSource.resolver.ts

@@ -0,0 +1,13 @@
+import { MkResolver } from "../utils/MkResolver.js";
+
+export const mkYoutubeOriginalSourceResolver: MkResolver<"YoutubeOriginalSource", "ImagesService"> = ({
+  ImagesService,
+}) => {
+  return {
+    sourceId: ({ sourceId }) => sourceId,
+    url: ({ sourceId }) => `https://www.nicovideo.jp/watch/${sourceId}`,
+    thumbnailUrl: ({ originalThumbnailUrl }) => originalThumbnailUrl,
+    originalThumbnailUrl: ({ originalThumbnailUrl }) => originalThumbnailUrl,
+    proxiedThumbnailUrl: ({ originalThumbnailUrl }, { scale }) => ImagesService.proxyThis(originalThumbnailUrl, scale),
+  };
+};

src/FetchExternal/fetchBilibili.graphql

@@ -11,37 +11,3 @@ input FetchBilibiliInput {
 type FetchBilibiliPayload {
   source: BilibiliOriginalSource
 }
-
-type BilibiliOriginalSource {
-  sourceId: String!
-
-  title: String!
-  url: String!
-
-  thumbnailUrl(scale: FetchExternalSourceThumbnailScale! = LARGE): String!
-  originalThumbnailUrl: String!
-
-  tags: [BilibiliOriginalSourceTag!]!
-}
-
-type BilibiliOriginalSourceTag {
-  name: String!
-  searchTags(input: BilibiliOriginalSourceTagSearchTagsInput!): BilibiliOriginalSourceTagSearchTagsPayload!
-}
-
-input BilibiliOriginalSourceTagSearchTagsInput {
-  limit: Int! = 3
-  skip: Int! = 0
-}
-
-type BilibiliOriginalSourceTagSearchTagsPayload {
-  items: [TagSearchItemByName!]!
-}
-
-enum FetchExternalSourceThumbnailScale {
-  "960 x 700"
-  LARGE
-
-  "720 x 400"
-  OGP
-}

src/FetchExternal/fetchNicovideo.ts

@@ -57,6 +57,8 @@ export const fetchNicovideo = () =>
         source: null,
       }; // TODO: もう少し詳細な情報を出しても良い気がする
     return {
-      source: NicovideoOriginalSourceDTO.make({ sourceId }),
+      source: NicovideoOriginalSourceDTO.make({
+        sourceId,
+      }),
     };
   }) satisfies QueryResolvers["fetchNicovideo"];

src/FetchExternal/fetchYoutube.graphql

@@ -11,9 +11,3 @@ input FetchYoutubeInput {
 type FetchYoutubePayload {
   source: YoutubeOriginalSource
 }
-
-type YoutubeOriginalSource {
-  sourceId: String!
-  url: String!
-  thumbnailUrl: String!
-}

src/FetchExternal/fetchYoutube.ts

@@ -2,25 +2,27 @@ import { GraphQLError } from "graphql";
 
 import { QueryResolvers } from "../resolvers/graphql.js";
 import { isValidYoutubeSourceId } from "../utils/isValidYoutubeSourceId.js";
+import { MkQueryResolver } from "../utils/MkResolver.js";
+import { YoutubeOriginalSourceDTO } from "./YoutubeOriginalSource.dto.js";
 
-export const resolverFetchYoutube = () =>
+export const resolverFetchYoutube: MkQueryResolver<"fetchYoutube"> = () =>
   (async (_parent, { input: { sourceId } }) => {
     if (!isValidYoutubeSourceId(sourceId)) {
       throw new GraphQLError("Invalid sourceId");
     }
 
-    const thumbnailUrl = new URL(`vi/${sourceId}/hqdefault.jpg`, "https://i.ytimg.com/");
-    const ok = await fetch(thumbnailUrl.toString()).then((res) => res.ok);
+    const originalThumbnailUrl = new URL(`vi/${sourceId}/hqdefault.jpg`, "https://i.ytimg.com/");
+    const ok = await fetch(originalThumbnailUrl.toString()).then((res) => res.ok);
     if (!ok) return { source: null };
 
     const url = new URL("/watch", "https://www.youtube.com/");
     url.searchParams.set("v", sourceId);
 
     return {
-      source: {
+      source: YoutubeOriginalSourceDTO.make({
         url: url.toString(),
         sourceId,
-        thumbnailUrl: thumbnailUrl.toString(),
-      },
+        originalThumbnailUrl: originalThumbnailUrl.toString(),
+      }),
     };
   }) satisfies QueryResolvers["fetchYoutube"];

src/common.graphql

@@ -83,3 +83,11 @@ type MutationYoutubeRegistrationRequestNotFoundError {
 type MutationYoutubeRegistrationRequestAlreadyCheckedError {
   requestId: String!
 }
+
+enum FetchExternalSourceThumbnailScale {
+  "960 x 700"
+  LARGE
+
+  "720 x 400"
+  OGP
+}

src/query.ts

@@ -75,7 +75,9 @@ export const resolveQuery = (deps: ResolverDeps) =>
     fetchSoundcloud: mkFetchSoundcloudResolver(deps),
     fetchSoundcloudBySourceId: mkFetchSoundcloudBySourceIdResolver(deps),
     fetchSoundcloudByUrl: mkFetchSoundcloudByUrlResolver(deps),
-    fetchYoutube: resolverFetchYoutube(),
+    fetchYoutube: resolverFetchYoutube({
+      ...deps,
+    }),
     findBilibiliMADSource: mkFindBilibiliMADSourceResolver(deps),
     findBilibiliRegistrationRequestBySourceId: mkFindBilibiliRegistrationRequestByUrlResolver(deps),
     findMadBySerial: resolverFindMadBySerial(deps),

src/resolvers.ts

@@ -23,6 +23,7 @@ import { resolverBilibiliOriginalSourceTag } from "./FetchExternal/BilibiliOrigi
 import { mkNicovideoOriginalSourceResolver } from "./FetchExternal/NicovideoOriginalSource.resolver.js";
 import { resolveNicovideoOriginalSourceTag } from "./FetchExternal/NicovideoOriginalSourceTag.resolver.js";
 import { mkSoundcloudOriginalSourceResolver } from "./FetchExternal/SoundcloudOriginalSource.resolver.js";
+import { mkYoutubeOriginalSourceResolver } from "./FetchExternal/YoutubeOriginalSource.resolver.js";
 import { resolveMutation } from "./mutation.js";
 import { resolverNicovideoRegistrationRequest } from "./NicovideoRegistrationRequest/NicovideoRegistrationRequest.resolver.js";
 import { resolverNicovideoRegistrationRequestAccepting } from "./NicovideoRegistrationRequest/NicovideoRegistrationRequestAccepting.resolver.js";
@@ -263,6 +264,7 @@ export const makeResolvers = (deps: ResolverDeps) =>
     VideoTitleSetPrimaryEvent: resolveVideoTitleSetPrimaryEvent(deps),
     VideoTitleUnsetPrimaryEvent: resolveVideoTitleUnsetPrimaryEvent(deps),
     YoutubeMadRequestedTimelineEvent: mkYoutubeMadRequestedTimelineEventResolver(deps),
+    YoutubeOriginalSource: mkYoutubeOriginalSourceResolver(deps),
     YoutubeRegistrationRequest: resolverYoutubeRegistrationRequest(deps),
     YoutubeRegistrationRequestAcceptEvent: mkYoutubeRegistrationRequestAcceptEventResolver(deps),
     YoutubeRegistrationRequestAccepting: resolverYoutubeRegistrationRequestAccepting(deps),