From 8358238a5b42a1363f6ba784608ecab8121c3593 Mon Sep 17 00:00:00 2001
From: Vitor Marthendal Nunes <marthendalnunes@gmail.com>
Date: Tue, 25 Jul 2023 19:09:46 -0300
Subject: [PATCH] Fix: add minor Livepeer integration fixes (#8)

* feat: add livepeer integration

* feat: add CLI CTA to homepage

* refactor: remove nested button from link and non existing css style

* chore: turn site_url env public

* fix: add minor fixes to the Livepeer integration

* chore: merge changes
---
 package.json                                  |  2 +-
 template/base/data/turbo-integrations.ts      |  4 ++--
 .../components/form-livepeer-asset.tsx        | 19 ++++++++++---------
 .../core/livepeer/components/player.tsx       |  1 +
 .../core/livepeer/components/upload-file.tsx  |  4 ++--
 .../pages/livepeer/livestream/page.tsx        |  4 ++--
 .../vod/{[assetId] => [playbackId]}/page.tsx  | 15 +++++++--------
 7 files changed, 25 insertions(+), 24 deletions(-)
 rename template/integrations/livepeer/pages/livepeer/vod/{[assetId] => [playbackId]}/page.tsx (81%)

diff --git a/package.json b/package.json
index 5eae2fb..73ee06a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-turbo-eth",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Create web3 apps in turbo mode.",
   "author": "Vitor @marthendalnunes",
   "license": "MIT",
diff --git a/template/base/data/turbo-integrations.ts b/template/base/data/turbo-integrations.ts
index 4600bda..3f83c84 100644
--- a/template/base/data/turbo-integrations.ts
+++ b/template/base/data/turbo-integrations.ts
@@ -75,8 +75,8 @@ export const turboIntegrations = {
   livepeer: {
     name: 'Livepeer',
     href: '/integration/livepeer',
-    url: 'https://livepeer.org/',
-    description: 'Livepeer is a decentralized video streaming network.',
+    url: 'https://docs.livepeer.org/',
+    description: "Livepeer is the world's open video infrastructure.",
     imgLight: '/integrations/livepeer.svg',
     imgDark: '/integrations/livepeer.svg',
   },
diff --git a/template/integrations/livepeer/core/livepeer/components/form-livepeer-asset.tsx b/template/integrations/livepeer/core/livepeer/components/form-livepeer-asset.tsx
index 0771178..61b752f 100644
--- a/template/integrations/livepeer/core/livepeer/components/form-livepeer-asset.tsx
+++ b/template/integrations/livepeer/core/livepeer/components/form-livepeer-asset.tsx
@@ -6,27 +6,28 @@ import { useRouter } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 
 interface livepeerForm {
-  assetId: string
+  playbackId: string
 }
 
 export function FormLivepeerAsset() {
-  const route = useRouter()
-  const { register, handleSubmit } = useForm<livepeerForm>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [assetId, setAssetId] = useState<string>('')
+  const route = useRouter()
+  const { register, handleSubmit, watch } = useForm<livepeerForm>()
+  const playbackId = watch('playbackId')
 
   function onSubmit(FieldValues: livepeerForm) {
     setIsLoading(true)
-    if (FieldValues.assetId !== '') {
-      route.push(`/integration/livepeer/vod/${FieldValues.assetId}`)
+    if (FieldValues.playbackId !== '') {
+      route.push(`/integration/livepeer/vod/${FieldValues.playbackId}`)
     }
   }
+
   return (
     <div className="card w-full">
       <form onSubmit={handleSubmit(onSubmit)}>
-        <label>Asset ID</label>
-        <input required className="input mt-4" {...register('assetId')} value={assetId} onChange={(e) => setAssetId(e.target.value)} />
-        <button className="btn btn-emerald mt-4 w-full" disabled={!assetId || isLoading} type="submit">
+        <label>Playback ID</label>
+        <input required className="input mt-4" {...register('playbackId')} />
+        <button className="btn btn-emerald mt-4 w-full" disabled={!playbackId || isLoading} type="submit">
           {isLoading ? 'Loading...' : 'Submit'}
         </button>
       </form>
diff --git a/template/integrations/livepeer/core/livepeer/components/player.tsx b/template/integrations/livepeer/core/livepeer/components/player.tsx
index 2882753..cb89267 100644
--- a/template/integrations/livepeer/core/livepeer/components/player.tsx
+++ b/template/integrations/livepeer/core/livepeer/components/player.tsx
@@ -45,6 +45,7 @@ export function PlayerComponent({
 
   return (
     <Player
+      lowLatency
       priority
       showPipButton
       objectFit="cover"
diff --git a/template/integrations/livepeer/core/livepeer/components/upload-file.tsx b/template/integrations/livepeer/core/livepeer/components/upload-file.tsx
index 1d90c4c..5b39479 100644
--- a/template/integrations/livepeer/core/livepeer/components/upload-file.tsx
+++ b/template/integrations/livepeer/core/livepeer/components/upload-file.tsx
@@ -70,8 +70,8 @@ export function UploadFile() {
     [progress]
   )
 
-  if (asset?.[0]) {
-    route.push(`/integration/livepeer/vod/${asset[0].id}`)
+  if (asset?.[0] && asset[0].playbackId) {
+    route.push(`/integration/livepeer/vod/${asset[0].playbackId}`)
   }
 
   return (
diff --git a/template/integrations/livepeer/pages/livepeer/livestream/page.tsx b/template/integrations/livepeer/pages/livepeer/livestream/page.tsx
index 7da2614..4fe06fd 100644
--- a/template/integrations/livepeer/pages/livepeer/livestream/page.tsx
+++ b/template/integrations/livepeer/pages/livepeer/livestream/page.tsx
@@ -16,12 +16,12 @@ export default function PageIntegration() {
       {!isLivepeerApiKeySet && <FormLivepeerApiKey />}
       <LinkComponent href={newStreamObsPath}>
         <button className="btn btn-emerald mt-4 w-full" disabled={!isLivepeerApiKeySet}>
-          Create a new OBS livestream
+          Go live from OBS
         </button>
       </LinkComponent>
       <LinkComponent href={newStreamBrowserPath}>
         <button className="btn btn-emerald mt-4 w-full" disabled={!isLivepeerApiKeySet}>
-          Create a new Browser livestream
+          Go live from your browser
         </button>
       </LinkComponent>
       <LinkComponent href={watchStreamPath}>
diff --git a/template/integrations/livepeer/pages/livepeer/vod/[assetId]/page.tsx b/template/integrations/livepeer/pages/livepeer/vod/[playbackId]/page.tsx
similarity index 81%
rename from template/integrations/livepeer/pages/livepeer/vod/[assetId]/page.tsx
rename to template/integrations/livepeer/pages/livepeer/vod/[playbackId]/page.tsx
index a69fee1..523596a 100644
--- a/template/integrations/livepeer/pages/livepeer/vod/[assetId]/page.tsx
+++ b/template/integrations/livepeer/pages/livepeer/vod/[playbackId]/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useAsset } from '@livepeer/react'
+import { usePlaybackInfo } from '@livepeer/react'
 
 import { LinkComponent } from '@/components/shared/link-component'
 import { ButtonShare } from '@/integrations/livepeer/components/button-share'
@@ -12,14 +12,13 @@ import { useIsLivepeerApiKeySet } from '@/integrations/livepeer/hooks/use-livepe
 const watchVideoPath = '/integration/livepeer/vod/watch/'
 const videoPath = '/integration/livepeer/vod/'
 
-export default function Page({ params }: { params: { assetId: string } }) {
+export default function Page({ params }: { params: { playbackId: string } }) {
+  const { playbackId } = params
   const isLivepeerApiKeySet = useIsLivepeerApiKeySet()
 
-  const SHARE_HREF = videoPath + params.assetId
+  const SHARE_HREF = videoPath + playbackId
 
-  const { data: asset, error } = useAsset({
-    assetId: params.assetId,
-  })
+  const { data: playbackInfo, error } = usePlaybackInfo(playbackId)
 
   if (error) {
     return (
@@ -44,7 +43,7 @@ export default function Page({ params }: { params: { assetId: string } }) {
     )
   }
 
-  if (!asset || !asset.playbackId)
+  if (!playbackInfo)
     return (
       <div className="flex w-full items-center justify-center py-20">
         <Spinner />
@@ -53,7 +52,7 @@ export default function Page({ params }: { params: { assetId: string } }) {
 
   return (
     <>
-      <PlayerComponent containerBorderRadius="16px" playbackId={asset.playbackId} title={asset.name} type={PlayerType.FILE} />
+      <PlayerComponent containerBorderRadius="16px" playbackId={playbackId} title="Video On Demand" type={PlayerType.FILE} />
       <ButtonShare href={SHARE_HREF} PlayerType={PlayerType.FILE} />
     </>
   )