fix: use optimized droposal videos for playback (#281)

Author: sktbrd

src/app/[locale]/droposals/[id]/page.tsx

@@ -13,6 +13,7 @@ import { DroposalSupporters } from "@/components/droposals/detail/DroposalSuppor
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { BASE_URL, DAO_ADDRESSES } from "@/lib/config";
+import { resolveDroposalPlaybackUrl } from "@/lib/droposal-media";
 import { decodeDroposalParams, formatDroposalForTable, isDroposal } from "@/lib/droposal-utils";
 import { ipfsToHttp } from "@/lib/ipfs";
 import { DROPOSALS_MINIAPP_EMBED_CONFIG } from "@/lib/miniapp-config";
@@ -236,7 +237,9 @@ export default async function DroposalDetailPage({
   }
 
   const mediaImage = decoded?.imageURI ? ipfsToHttp(decoded.imageURI) : undefined;
-  const mediaAnimation = decoded?.animationURI ? ipfsToHttp(decoded.animationURI) : undefined;
+  const mediaAnimation = decoded?.animationURI
+    ? resolveDroposalPlaybackUrl(decoded.animationURI)
+    : undefined;
   const priceEth = decoded?.saleConfig?.publicSalePrice
     ? formatEther(decoded.saleConfig.publicSalePrice)
     : "0";

src/app/api/droposal-embed/[id]/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { formatEther } from "viem";
 import { DAO_ADDRESSES } from "@/lib/config";
+import { resolveDroposalPlaybackUrl } from "@/lib/droposal-media";
 import { decodeDroposalParams, isDroposal } from "@/lib/droposal-utils";
 import { ipfsToHttp } from "@/lib/ipfs";
 import { subgraphQuery } from "@/lib/subgraph";
@@ -59,7 +60,9 @@ export async function GET(_req: Request, { params }: { params: Promise<{ id: str
     }
 
     const mediaImage = decoded?.imageURI ? ipfsToHttp(decoded.imageURI) : undefined;
-    const mediaAnimation = decoded?.animationURI ? ipfsToHttp(decoded.animationURI) : undefined;
+    const mediaAnimation = decoded?.animationURI
+      ? resolveDroposalPlaybackUrl(decoded.animationURI)
+      : undefined;
     const priceEth = decoded?.saleConfig?.publicSalePrice
       ? formatEther(decoded.saleConfig.publicSalePrice)
       : "0";

src/lib/droposal-media.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import {
+  OPTIMIZED_DROPOSAL_VIDEO_CID_BY_ORIGINAL_CID,
+  resolveDroposalPlaybackUrl,
+} from "@/lib/droposal-media";
+
+const ORIGINAL_CID = "QmbHbVzFTNSFpFUXHyKBrtGfJ3era6SpkQBjEEpzapeNex";
+const OPTIMIZED_CID = OPTIMIZED_DROPOSAL_VIDEO_CID_BY_ORIGINAL_CID[ORIGINAL_CID];
+const OPTIMIZED_URL = `https://ipfs.skatehive.app/ipfs/${OPTIMIZED_CID}`;
+
+describe("resolveDroposalPlaybackUrl", () => {
+  it.each([
+    [
+      "Qmak7m8x3ckbkM8YrghZRWm7zBqSUiYoCySdJ6bEwKuDRX",
+      "bafybeid4f7v6yez2ibuay4kbmiuky44tph3gn32rnczkcmvno6nbjd7ykm",
+    ],
+    [
+      "QmVF2BjJvA2MnjWuuNbUEAbMuzQD8JFks83TR6MdSgNY2e",
+      "bafybeiazfjbov4ag7t6h7d77s2mokjsvz2dxyixogm7l5ptbrrg6qjxn7e",
+    ],
+  ])("uses the optimized Gnars Droposal video for %s", (originalCid, optimizedCid) => {
+    expect(resolveDroposalPlaybackUrl(`ipfs://${originalCid}`)).toBe(
+      `https://ipfs.skatehive.app/ipfs/${optimizedCid}`,
+    );
+  });
+
+  it("replaces a mapped ipfs URI with its optimized CID", () => {
+    expect(resolveDroposalPlaybackUrl(`ipfs://${ORIGINAL_CID}`)).toBe(OPTIMIZED_URL);
+  });
+
+  it("replaces a mapped gateway URL with its optimized CID", () => {
+    expect(resolveDroposalPlaybackUrl(`https://example.com/ipfs/${ORIGINAL_CID}`)).toBe(
+      OPTIMIZED_URL,
+    );
+  });
+
+  it("keeps unmapped ipfs CIDs on the normal gateway path", () => {
+    const cid = "QmUnmappedCidForDroposalPlayback";
+    expect(resolveDroposalPlaybackUrl(`ipfs://${cid}`)).toBe(
+      `https://magic.decentralized-content.com/ipfs/${cid}`,
+    );
+  });
+
+  it("leaves non-IPFS HTTPS URLs unchanged", () => {
+    const url = "https://example.com/video.mp4";
+    expect(resolveDroposalPlaybackUrl(url)).toBe(url);
+  });
+
+  it("extracts an exact CID before a subpath, query, or fragment", () => {
+    expect(
+      resolveDroposalPlaybackUrl(
+        `https://example.com/ipfs/${ORIGINAL_CID}/video.mp4?download=1#preview`,
+      ),
+    ).toBe(OPTIMIZED_URL);
+  });
+
+  it("does not mutate the original URI", () => {
+    const originalUri = `ipfs://${ORIGINAL_CID}`;
+    resolveDroposalPlaybackUrl(originalUri);
+    expect(originalUri).toBe(`ipfs://${ORIGINAL_CID}`);
+  });
+});

src/lib/droposal-media.ts

@@ -0,0 +1,45 @@
+import { ipfsToHttp } from "@/lib/ipfs";
+
+const SKATEHIVE_IPFS_GATEWAY = "https://ipfs.skatehive.app/ipfs";
+
+export const OPTIMIZED_DROPOSAL_VIDEO_CID_BY_ORIGINAL_CID = {
+  Qmak7m8x3ckbkM8YrghZRWm7zBqSUiYoCySdJ6bEwKuDRX:
+    "bafybeid4f7v6yez2ibuay4kbmiuky44tph3gn32rnczkcmvno6nbjd7ykm",
+  QmVF2BjJvA2MnjWuuNbUEAbMuzQD8JFks83TR6MdSgNY2e:
+    "bafybeiazfjbov4ag7t6h7d77s2mokjsvz2dxyixogm7l5ptbrrg6qjxn7e",
+  QmbHbVzFTNSFpFUXHyKBrtGfJ3era6SpkQBjEEpzapeNex:
+    "bafybeibohdmwemv2gdgegiqi3jhajo3z2ejz5o7q7rynkvi7wiihvl245u",
+  Qmcj9mcaXkiNU8s3KCY9JMVAhacFJZvUXngYbPVx44R8uG:
+    "bafybeidkmzaygivag7xekzmvtohkkbqwt7zud6lxqwtkt35hdvbaptpn3u",
+  QmfQydzfV5i3JgQ4SDQ3XXkBy4mDBufAJjD596NxPvwMfs:
+    "bafybeifdwbkhaugqjjlhkiiqza2h7i2k5srhkfakyvbsio3ppf2s7mqleu",
+  QmTu1QGDSQzrJAULeiKNGVxpEbiTw5Z6FDonNyrQ3H7bZ7:
+    "bafybeicfqryhrlawk4uhgopnstld77sm2ddqykrqs3tz4fwfwaju3llt2e",
+} as const satisfies Readonly<Record<string, string>>;
+
+type OptimizedDroposalSourceCid = keyof typeof OPTIMIZED_DROPOSAL_VIDEO_CID_BY_ORIGINAL_CID;
+
+function extractIpfsCid(uri: string): string | undefined {
+  const trimmedUri = uri.trim();
+  const ipfsPath = trimmedUri.startsWith("ipfs://")
+    ? trimmedUri.slice("ipfs://".length)
+    : trimmedUri.includes("/ipfs/")
+      ? trimmedUri.split("/ipfs/")[1]
+      : undefined;
+
+  return ipfsPath?.split(/[/?#]/, 1)[0] || undefined;
+}
+
+function hasOptimizedDroposalVideo(cid: string): cid is OptimizedDroposalSourceCid {
+  return cid in OPTIMIZED_DROPOSAL_VIDEO_CID_BY_ORIGINAL_CID;
+}
+
+export function resolveDroposalPlaybackUrl(animationUri: string): string {
+  const originalCid = extractIpfsCid(animationUri);
+  if (!originalCid || !hasOptimizedDroposalVideo(originalCid)) {
+    return ipfsToHttp(animationUri);
+  }
+
+  const optimizedCid = OPTIMIZED_DROPOSAL_VIDEO_CID_BY_ORIGINAL_CID[originalCid];
+  return `${SKATEHIVE_IPFS_GATEWAY}/${optimizedCid}`;
+}

src/services/droposals.ts

@@ -2,6 +2,7 @@ import { cache } from "react";
 import { createPublicClient, formatEther, http } from "viem";
 import { base } from "viem/chains";
 import { DAO_ADDRESSES, DROPOSAL_TARGET } from "@/lib/config";
+import { resolveDroposalPlaybackUrl } from "@/lib/droposal-media";
 import { decodeDroposalParams, isDroposal } from "@/lib/droposal-utils";
 import { ipfsToHttp } from "@/lib/ipfs";
 import { subgraphQuery } from "@/lib/subgraph";
@@ -95,7 +96,9 @@ function mapDroposalItems(proposals: ProposalData[]): DroposalListItem[] {
 
       const decoded = calldatas[i] ? decodeDroposalParams(calldatas[i]!) : null;
       const bannerImage = decoded?.imageURI ? ipfsToHttp(decoded.imageURI) : undefined;
-      const animationUrl = decoded?.animationURI ? ipfsToHttp(decoded.animationURI) : undefined;
+      const animationUrl = decoded?.animationURI
+        ? resolveDroposalPlaybackUrl(decoded.animationURI)
+        : undefined;
       const priceEth =
         decoded?.saleConfig?.publicSalePrice !== undefined
           ? formatEther(decoded.saleConfig.publicSalePrice)