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

@@ -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",

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',
   },

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>

template/integrations/livepeer/core/livepeer/components/player.tsx

@@ -45,6 +45,7 @@ export function PlayerComponent({
 
   return (
     <Player
+      lowLatency
       priority
       showPipButton
       objectFit="cover"

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 (

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}>

template/integrations/livepeer/pages/livepeer/vod/[assetId]/page.tsx → 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} />
     </>
   )