feat: slideshow embeds

Britmoji · Mar 15, 2024 · d20d7f7 · d20d7f7
1 parent 1368cd2
commit d20d7f7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -17,5 +17,5 @@
  */
 
 export const Constants = {
-  HOST_URL: "https://tiktxk.com",
+  HOST_URL: "https://wip.koding.dev",
 };
diff --git a/src/routes/meta.ts b/src/routes/meta.ts
@@ -31,13 +31,14 @@ export const addMetaRoutes = (app: Hono) => {
   });
 
   // Image metadata
-  app.get("/meta/:videoId/image", async (c) => {
+  app.get("/meta/:videoId/image/:index", async (c) => {
     const videoId = c.req.param("videoId");
+    const index = parseInt(c.req.param("index")) || 0;
     const details = await tiktok.details(videoId);
     if (!details) throw new StatusError(404, "UNKNOWN_AWEME");
 
     if (details.imagePost?.images?.length) {
-      return c.redirect(details.imagePost.images[0].url);
+      return c.redirect(details.imagePost.images[index].url);
     }
 
     return c.redirect(details.image.url);

diff --git a/src/routes/tiktok.tsx b/src/routes/tiktok.tsx
@@ -31,10 +31,15 @@ const DiscordEmbed = ({ data }: { data: AdaptedItemDetails }) => {
   const comments = formatNumber(data.statistics.comments, 1);
 
   // Determine the preview component for the media type
-  const previewComponent = data.imagePost ? (
-    <ImagePreview data={data} />
-  ) : (
-    <VideoPreview data={data} />
+  const previewComponent = (
+    <Fragment>
+      {!data.imagePost && <VideoPreview tiktok={data} />}
+      {data.imagePost
+        ? data.imagePost.images
+            .slice(0, 4) // Only show the first 4 images
+            .map((_, index) => <ImagePreview tiktok={data} index={index} />)
+        : null}
+    </Fragment>
   );
 
   // Format the headings
@@ -54,39 +59,49 @@ const DiscordEmbed = ({ data }: { data: AdaptedItemDetails }) => {
   );
 };
 
-const VideoPreview = ({ data }: { data: AdaptedItemDetails }) => (
+const VideoPreview = ({ tiktok }: { tiktok: AdaptedItemDetails }) => (
   <Fragment>
     <meta
       property="og:video"
-      content={`${Constants.HOST_URL}/meta/${data.id}/video`}
+      content={`${Constants.HOST_URL}/meta/${tiktok.id}/video`}
     />
     <meta property="og:video:type" content={`video/mp4`} />
-    <meta property="og:video:width" content={data.video.width} />
-    <meta property="og:video:height" content={data.video.height} />
+    <meta property="og:video:width" content={tiktok.video.width} />
+    <meta property="og:video:height" content={tiktok.video.height} />
     <meta property="og:type" content="video.other" />
   </Fragment>
 );
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const ImagePreview = ({ data }: { data: AdaptedItemDetails }) => (
+const ImagePreview = ({
+  tiktok,
+  index,
+}: {
+  tiktok: AdaptedItemDetails;
+  index: number;
+}) => (
   <Fragment>
     <meta
       property="og:image"
-      content={`${Constants.HOST_URL}/meta/${data.id}/image`}
+      content={`${Constants.HOST_URL}/meta/${tiktok.id}/image/${index}`}
     />
     <meta property="og:image:type" content={`image/jpeg`} />
-    <meta property="og:image:width" content={data.imagePost?.images[0].width} />
+    <meta
+      property="og:image:width"
+      content={tiktok.imagePost?.images[index].width}
+    />
     <meta
       property="og:image:height"
-      content={data.imagePost?.images[0].height}
+      content={tiktok.imagePost?.images[index].height}
     />
     <meta property="og:type" content="image.other" />
     <meta property="twitter:card" content="summary_large_image" />
   </Fragment>
 );
 
 export const addTikTokRoutes = (app: Hono) => {
-  const videoIdRegex = /https:\/\/www\.tiktok\.com\/@[^/]+\/video\/(\d+)/;
+  const videoIdRegex =
+    /https:\/\/www\.tiktok\.com\/@[^/]+\/(video|photo)\/(?<id>\d+)/;
 
   // Main renderer
   const render = (c: Context, data: AdaptedItemDetails) =>
@@ -122,12 +137,13 @@ export const addTikTokRoutes = (app: Hono) => {
 
       // Parse video ID from url
       const match = videoIdRegex.exec(res.url);
-      if (!match) {
+      console.log(match);
+      if (!match || !match.groups) {
         throw new StatusError(400, "FAILED_TO_PARSE_VIDEO_ID");
       }
 
       // Lookup details
-      const details = await tiktok.details(match[1]);
+      const details = await tiktok.details(match.groups?.id);
       if (!details) {
         throw new StatusError(404, "UNKNOWN_AWEME");
       }

diff --git a/src/util/discord.tsx b/src/util/discord.tsx
@@ -81,7 +81,8 @@ export const GenericDiscordEmbed = (embed: DiscordEmbedData) => {
  */
 export const isDiscord = (req: Request): boolean => {
   const raw = req.query("raw") === "true";
-  return req.header("User-Agent")?.includes("Discordbot") && !raw;
+  return true;
+  // return req.header("User-Agent")?.includes("Discordbot") && !raw;
 };
 
 /**