feat: IPFS-based video support

.changeset/bright-timers-roll.md

@@ -0,0 +1,9 @@
+---
+"@mod-protocol/react-ui-shadcn": minor
+"@miniapps/livepeer-video": minor
+"web": minor
+"@miniapps/video-render": minor
+"api": minor
+---
+
+feat: support videos linked via IPFS

.changeset/great-nails-deny.md

@@ -0,0 +1,5 @@
+---
+"@mod-protocol/core": minor
+---
+
+feat: add mimeType to UrlMetadata type

examples/api/.env.example

@@ -1,6 +1,8 @@
 # Needs to be an IPFS api key
 INFURA_API_KEY="REQUIRED"
 INFURA_API_SECRET="REQUIRED"
+IPFS_DEFAULT_GATEWAY="REQUIRED"
+MICROLINK_API_KEY="REQUIRED"
 GIPHY_API_KEY="REQUIRED"
 MICROLINK_API_KEY="REQUIRED"
 OPENSEA_API_KEY="REQUIRED"

examples/api/src/app/api/livepeer-video/[assetId]/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  const form = await request.formData();
+
+  const controller = new AbortController();
+  const signal = controller.signal;
+
+  // Cancel upload if it takes longer than 15s
+  setTimeout(() => {
+    controller.abort();
+  }, 15_000);
+
+  const uploadRes: Response | null = await fetch(
+    "https://ipfs.infura.io:5001/api/v0/add",
+    {
+      method: "POST",
+      body: form,
+      headers: {
+        Authorization:
+          "Basic " +
+          Buffer.from(
+            process.env.INFURA_API_KEY + ":" + process.env.INFURA_API_SECRET
+          ).toString("base64"),
+      },
+      signal,
+    }
+  );
+
+  const { Hash: hash } = await uploadRes.json();
+
+  const responseData = { url: `ipfs://${hash}` };
+
+  return NextResponse.json({ data: responseData });
+}
+
+// needed for preflight requests to succeed
+export const OPTIONS = async (request: NextRequest) => {
+  return NextResponse.json({});
+};
+
+export const GET = async (
+  req: NextRequest,
+  { params }: { params: { assetId: string } }
+) => {
+  const assetRequest = await fetch(
+    `https://livepeer.studio/api/asset/${params.assetId}`,
+    {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${process.env.LIVEPEER_API_SECRET}`,
+      },
+    }
+  );
+
+  const assetResponseJson = await assetRequest.json();
+  const { playbackUrl } = assetResponseJson;
+
+  if (!playbackUrl) {
+    return NextResponse.json({}, { status: 404 });
+  }
+
+  return NextResponse.json({
+    url: playbackUrl,
+  });
+};
+
+export const runtime = "edge";

examples/api/src/app/api/livepeer-video/route.ts

@@ -2,92 +2,86 @@ import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
   const form = await request.formData();
-  // https://docs.livepeer.org/reference/api#upload-an-asset
-  const requestedUrlReq = await fetch(
-    "https://livepeer.studio/api/asset/request-upload",
+
+  const controller = new AbortController();
+  const signal = controller.signal;
+
+  // Cancel upload if it takes longer than 15s
+  setTimeout(() => {
+    controller.abort();
+  }, 15_000);
+
+  const uploadRes: Response | null = await fetch(
+    "https://ipfs.infura.io:5001/api/v0/add",
     {
       method: "POST",
+      body: form,
       headers: {
-        Authorization: `Bearer ${process.env.LIVEPEER_API_SECRET}`,
-        "Content-Type": "application/json",
+        Authorization:
+          "Basic " +
+          Buffer.from(
+            process.env.INFURA_API_KEY + ":" + process.env.INFURA_API_SECRET
+          ).toString("base64"),
       },
-      body: JSON.stringify({
-        name: "video.mp4",
-        staticMp4: true,
-        playbackPolicy: {
-          type: "public",
-        },
-        storage: {
-          ipfs: true,
-        },
-      }),
+      signal,
     }
   );
 
-  const requestedUrl = await requestedUrlReq.json();
+  const { Hash: hash } = await uploadRes.json();
 
-  const url = requestedUrl.url;
+  const responseData = { url: `ipfs://${hash}` };
 
-  const videoUpload = await fetch(url, {
-    method: "PUT",
-    headers: {
-      Authorization: `Bearer ${process.env.LIVEPEER_API_SECRET}`,
-      "Content-Type": "video/mp4",
-    },
-    body: form.get("file"),
-  });
+  return NextResponse.json({ data: responseData });
+}
 
-  if (videoUpload.status >= 400) {
-    return NextResponse.json(
-      { message: "Something went wrong" },
-      {
-        status: videoUpload.status,
-      }
-    );
-  }
+// needed for preflight requests to succeed
+export const OPTIONS = async (request: NextRequest) => {
+  return NextResponse.json({});
+};
 
-  // simpler than webhooks, but constrained by serverless function timeout time
-  let isUploadSuccess = false;
-  let maxTries = 10;
-  let tries = 0;
-  while (!isUploadSuccess && tries < maxTries) {
-    const details = await fetch(
-      `https://livepeer.studio/api/asset/${requestedUrl.asset.id}`,
-      {
-        method: "GET",
-        headers: {
-          Authorization: `Bearer ${process.env.LIVEPEER_API_SECRET}`,
-          "Content-Type": "application/json",
-        },
-      }
-    );
-    const detailsJson = await details.json();
+export const GET = async (request: NextRequest) => {
+  let url = request.nextUrl.searchParams.get("url");
 
-    if (detailsJson.status !== "waiting") {
-      break;
-    }
+  // Exchange for livepeer url
+  const cid = url.replace("ipfs://", "");
+  const gatewayUrl = `${process.env.IPFS_DEFAULT_GATEWAY}/${cid}`;
 
-    // wait 1s
-    await new Promise((resolve) => setTimeout(() => resolve(null), 1000));
-    tries = tries + 1;
-  }
+  // Get HEAD to get content type
+  const response = await fetch(gatewayUrl, { method: "HEAD" });
+  const contentType = response.headers.get("content-type");
 
-  if (tries === maxTries) {
-    return NextResponse.json(
-      {
-        message: "Took too long to upload. Try a smaller file",
+  // TODO: Cache this
+  const uploadRes = await fetch(
+    "https://livepeer.studio/api/asset/upload/url",
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${process.env.LIVEPEER_API_SECRET}`,
+        "Content-Type": "application/json",
       },
-      { status: 400 }
-    );
-  }
+      body: JSON.stringify({
+        name: "filename.mp4",
+        staticMp4: contentType === "video/mp4" ? true : false,
+        playbackPolicy: {
+          type: "public",
+        },
+        url: url,
+      }),
+    }
+  );
 
-  // hack, wait at least 3s to make sure url doesn't error
-  await new Promise((resolve) => setTimeout(() => resolve(null), 3000));
+  if (!uploadRes.ok) {
+    // console.error(uploadRes.status, await uploadRes.text());
+    return NextResponse.error();
+  }
 
-  return NextResponse.json({ data: requestedUrl });
-}
+  const { asset } = await uploadRes.json();
 
-// needed for preflight requests to succeed
-export const OPTIONS = async (request: NextRequest) => {
-  return NextResponse.json({});
+  return NextResponse.json({
+    id: asset.id,
+    fallbackUrl: gatewayUrl,
+    mimeType: contentType,
+  });
 };
+
+export const runtime = "edge";

examples/api/src/app/api/open-graph/lib/url-handlers/index.ts

@@ -4,6 +4,7 @@ import opensea from "./opensea";
 import zora from "./zora";
 import zoraPremint from "./zora-premint";
 import imageFileUrl from "./image-file";
+import ipfs from "./ipfs";
 import metascraper from "./metascraper";
 import localFetch from "./local-fetch";
 
@@ -13,6 +14,7 @@ const handlers: UrlHandler[] = [
   zora,
   caip19,
   imageFileUrl,
+  ipfs,
   localFetch,
   metascraper,
 ];

examples/api/src/app/api/open-graph/lib/url-handlers/ipfs.ts

@@ -0,0 +1,38 @@
+import { UrlMetadata } from "@mod-protocol/core";
+import { UrlHandler } from "../../types/url-handler";
+
+async function handleIpfsUrl(url: string): Promise<UrlMetadata | null> {
+  const cid = url.replace("ipfs://", "");
+
+  const gatewayUrl = `${process.env.IPFS_DEFAULT_GATEWAY}/${cid}`;
+
+  // Get HEAD only
+  const response = await fetch(gatewayUrl, { method: "HEAD" });
+
+  if (!response.ok) {
+    return null;
+  }
+
+  const contentType = response.headers.get("content-type");
+
+  if (!contentType) {
+    return null;
+  }
+
+  // TODO: Generate thumbnail if image/video
+
+  const urlMetadata: UrlMetadata = {
+    title: `IPFS ${cid}`,
+    mimeType: contentType,
+  };
+
+  return urlMetadata;
+}
+
+const handler: UrlHandler = {
+  name: "IPFS",
+  matchers: ["ipfs://.*"],
+  handler: handleIpfsUrl,
+};
+
+export default handler;

examples/nextjs-shadcn/src/app/dummy-casts.ts

@@ -113,9 +113,12 @@ export const dummyCastData: Array<{
     embeds: [
       // video embed
       {
-        url: "https://lp-playback.com/hls/3087gff2uxc09ze1/index.m3u8",
+        // url: "https://lp-playback.com/hls/3087gff2uxc09ze1/index.m3u8",
+        url: "ipfs://QmdeTAKogKpZVLpp2JLsjfM83QV46bnVrHTP1y89DvR57i",
         status: "loaded",
-        metadata: {},
+        metadata: {
+          mimeType: "video/mp4",
+        },
       },
     ],
   },

jest.config.ts

@@ -0,0 +1,21 @@
+import type { Config } from 'jest';
+
+const jestConfig: Config = {
+  testEnvironment: 'node',
+  moduleNameMapper: {
+    '^~/(.*)$': '<rootDir>/src/$1',
+    '^(.+)_generated.js$': '$1_generated', // Support flatc generated files
+  },
+  coveragePathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/'],
+  testPathIgnorePatterns: ['<rootDir>/build', '<rootDir>/node_modules'],
+  extensionsToTreatAsEsm: ['.ts'],
+  /**
+   * For high performance with minimal configuration transform with TS with swc.
+   * @see https://github.com/farcasterxyz/hubble/issues/314
+   */
+  transform: {
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
+};
+
+export default jestConfig;

mods/livepeer-video/src/upload.ts

@@ -17,7 +17,8 @@ const upload: ModElement[] = [
       },
       onsuccess: {
         type: "ADDEMBED",
-        url: "https://lp-playback.com/hls/{{refs.myFileUploadRequest.response.data.data.asset.playbackId}}/index.m3u8",
+        // url: "https://lp-playback.com/hls/{{refs.myFileUploadRequest.response.data.data.asset.playbackId}}/index.m3u8",
+        url: "{{refs.myFileUploadRequest.response.data.data.url}}",
         name: "{{refs.myOpenFileAction.files[0].name}}",
         mimeType: "{{refs.myOpenFileAction.files[0].mimeType}}",
         onsuccess: {

mods/video-render/src/manifest.ts

@@ -18,6 +18,15 @@ const manifest: ModManifest = {
       },
       element: view,
     },
+    {
+      if: {
+        value: "{{embed.metadata.mimeType}}",
+        match: {
+          startsWith: "video/",
+        },
+      },
+      element: view,
+    },
   ],
   elements: {
     "#view": view,