Add Livepeer support for audio and video

.env.testnet

@@ -6,4 +6,5 @@ NEXT_PUBLIC_ANNUALRATE = 0.1
 NEXT_PUBLIC_IPFS_GATEWAY = https://w3s.link
 NEXT_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY = https://w3s.link
 NEXT_PUBLIC_IPFS_DELEGATE = "/dns4/ceramic-clay.geoweb.network/tcp/443/https"
-NEXT_PUBLIC_WS_RPC_URL=wss://opt-goerli.g.alchemy.com/v2/Y4RuzHDAmcqDnO6iqLcfwDzmbTk4xHob
+NEXT_PUBLIC_WS_RPC_URL=wss://opt-goerli.g.alchemy.com/v2/Y4RuzHDAmcqDnO6iqLcfwDzmbTk4xHob
+NEXT_PUBLIC_LIVEPEER_API_KEY=8cdf71bd-3f27-46e8-991b-411a0f75b91f

app/page.tsx

@@ -12,11 +12,27 @@ import {
 import worldsJson from "../src/mud/worlds.json";
 import { optimismGoerli } from "viem/chains";
 import { MUDChain } from "@latticexyz/common/chains";
-import { WS_RPC_URL } from "../src/lib/constants";
+import { WS_RPC_URL, LIVEPEER_API_KEY } from "../src/lib/constants";
+import {
+  LivepeerConfig,
+  ThemeConfig,
+  createReactClient,
+  studioProvider,
+} from "@livepeer/react";
 
 import "../src/App.css";
 import "../src/App.scss";
 
+const livepeerTheme: ThemeConfig = {
+  colors: {
+    accent: "#2fc1c1",
+    containerBorderColor: "rgba(0, 145, 255, 0.9)",
+  },
+  fonts: {
+    display: "Abel",
+  },
+};
+
 const chainId = 420;
 const worlds = worldsJson as Partial<
   Record<string, { address: string; blockNumber?: number }>
@@ -34,6 +50,10 @@ const supportedChains: MUDChain[] = [
   },
 ];
 
+const client = createReactClient({
+  provider: studioProvider({ apiKey: LIVEPEER_API_KEY }),
+});
+
 export default function Index() {
   const [mudSetup, setMUDSetup] = useState<SetupResult | null>(null);
   const [hasAgreedModal, setHasAgreedModal] = useState<boolean | null>(null);
@@ -54,7 +74,9 @@ export default function Index() {
   } else if (hasAgreedModal && mudSetup) {
     return (
       <MUDProvider value={mudSetup}>
-        <GWS />
+        <LivepeerConfig client={client} theme={livepeerTheme}>
+          <GWS />
+        </LivepeerConfig>
       </MUDProvider>
     );
   } else {

package.json

@@ -19,6 +19,7 @@
     "@latticexyz/store-sync": "2.0.0-next.5",
     "@latticexyz/utils": "2.0.0-next.5",
     "@latticexyz/world": "2.0.0-next.5",
+    "@livepeer/react": "^2.8.3",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "augmented-worlds": "^0.1.7",

src/container/GeoWebInterface/components/GeoWebCanvas/GWCanvas.tsx

@@ -7,6 +7,7 @@ import { getComponentValueStrict } from "@latticexyz/recs";
 import { useMUD } from "@geo-web/mud-world-base-client";
 import contentHash from "@ensdomains/content-hash";
 import { CID } from "multiformats";
+import { Player } from "@livepeer/react";
 import "@google/model-viewer";
 
 const gwGateway = process.env.NEXT_PUBLIC_MODEL_VIEWER_IPFS_GATEWAY;
@@ -134,20 +135,33 @@ const GWCanvas = (props: GWCanvasProps) => {
           <button className={styles["clk-left"]} onClick={() => clickLeft()} />
         )}
         <div className={styles["gallery"]}>
-          {isGlbModel || isUsdzModel ? (
+          {mediaObject.mediaType === MediaObjectType.Model ? (
             <ModelViewer
               modelRef={modelRef}
               url={contentUrl}
               isUsdzModel={isUsdzModel}
             />
-          ) : (
+          ) : mediaObject.mediaType === MediaObjectType.Image ? (
             <span className={styles["image-wrapper"]}>
               <img
                 src={contentUrl ?? "/assets/spinner.svg"}
                 alt={contentUrl ? "image content" : "loading"}
                 className={styles[contentUrl ? "image-content" : "loading"]}
               />
             </span>
+          ) : mediaObject.mediaType === MediaObjectType.Video ||
+            mediaObject.mediaType === MediaObjectType.Audio ? (
+            <div className={styles["player-wrapper"]}>
+              <Player
+                playbackId={contentCid.toString()}
+                showTitle={false}
+                muted
+              />
+            </div>
+          ) : (
+            <div className={styles["player-wrapper"]}>
+              <h1>Unknown Media Type</h1>
+            </div>
           )}
         </div>
         {mediaObjects.length > 1 && (

src/container/GeoWebInterface/components/GeoWebCanvas/styles.module.css

@@ -14,6 +14,15 @@
   height: 100%;
 }
 
+.player-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  width: 80%;
+  height: 100%;
+}
+
 .image-content {
   max-width: 100%;
   max-height: 100%;

src/lib/constants.ts

@@ -11,3 +11,4 @@ export const STORAGE_WORKER_ENDPOINT =
   "https://storage-workers.geo-web.workers.dev";
 export const SECONDS_IN_YEAR = 60 * 60 * 24 * 365;
 export const WS_RPC_URL = process.env.NEXT_PUBLIC_WS_RPC_URL!;
+export const LIVEPEER_API_KEY = process.env.NEXT_PUBLIC_LIVEPEER_API_KEY!;