usePlaybackInfo

Hook for retrieving playback information related to a playback ID. Used internally in the Player to fetch the playback URL for a playback ID.

Usage

React
React Native

import { usePlaybackInfo } from '@livepeer/react';

import { usePlaybackInfo } from '@livepeer/react-native';

The following examples assume a playback ID has been created for an asset or stream.

function SomeComponent() {
  const { data: playbackInfo } = usePlaybackInfo(playbackId);
}

If a falsy playback ID is provided, the query will be skipped.

Return Value

The return value is partially based on Tanstack Query, with some return types aggregated for simplicity.

{
  data?: PlaybackInfo,
  error?: Error,
  status: 'idle' | 'loading' | 'success' | 'error',
  isError: boolean,
  isFetched: boolean,
  isFetching: boolean,
  isIdle: boolean,
  isLoading: boolean,
  isRefetching: boolean,
  isSuccess: boolean,
  refetch: (options: RefetchOptions) => Promise<UseQueryResult>,
}

Configuration

playbackId

Playback identifier. Can also be a string passed as the only parameter.

function SomeComponent() {
  const { data: playbackInfo } = usePlaybackInfo({
    playbackId,
  });
}

UseQueryOptions

The usePlaybackInfo hook also supports any Tanstack Query useQuery options, such as refetchInterval or enabled. These override any configs passed by default by the internal hook.

function SomeComponent() {
  const { data: playbackInfo } = usePlaybackInfo({
    playbackId,
    refetchInterval: 30000,
  });
}

SSR

The following section only applies to web-based use-cases - React Native has no concept of SSR.

Next.js

The usePlaybackInfo hook also comes with a Tanstack Query prefetch query, prefetchPlaybackInfo, which makes it easy to prefetch data for server-side rendering. First, you add a getStaticProps function to the page which you want to prefetch data on. The props should match the usePlaybackInfo hook to ensure that the correct data is prefetched.

// pages/demo.tsx
import { prefetchPlaybackInfo, studioProvider } from "@livepeer/react";

export const getStaticProps = async () => {
  const dehydratedState = await prefetchPlaybackInfo(
    { playbackId },
    { provider: studioProvider({ apiKey: "yourStudioApiKey" }) }
  );

  return {
    props: {
      dehydratedState,
    },
    revalidate: 600,
  };
};

We need to update the _app.tsx to pass the dehydratedState in pageProps to the LivepeerConfig. We also move the livepeerClient into a useMemo hook so that a new client is created on each request.

// pages/_app.tsx
import {
  LivepeerConfig,
  createReactClient,
  studioProvider,
} from "@livepeer/react";
import type { AppProps } from "next/app";

import { useMemo } from "react";

function App({ Component, pageProps }: AppProps<{ dehydratedState: string }>) {
  // we create a new livepeer client on each request so data is
  // not shared between users
  const livepeerClient = useMemo(
    () =>
      createReactClient({
        provider: studioProvider({
          apiKey: process.env.NEXT_PUBLIC_STUDIO_API_KEY,
        }),
      }),
    []
  );

  return (
    <LivepeerConfig
      dehydratedState={pageProps?.dehydratedState}
      client={livepeerClient}
    >
      <Component {...pageProps} />
    </LivepeerConfig>
  );
}

That’s it! You now have data prefetching on the server, which is passed to the browser and used to hydrate the initial query client.

Other Frameworks

The process is very similar for other frameworks, with the exception that there is a clearClient boolean which should be used to ensure that the client cache is not reused across users.

import { prefetchPlaybackInfo, studioProvider } from "@livepeer/react";

export const handleRequest = async (req, res) => {
  const dehydratedState = await prefetchPlaybackInfo(
    {
      playbackId,
      clearClient: true,
    },
    { provider: studioProvider({ apiKey: "yourStudioApiKey" }) }
  );

  // sanitize the custom SSR generated data
  // https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0

  res.send(`
    <html>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__REACT_QUERY_STATE__ = ${yourSanitizedDehydratedState};
        </script>
      </body>
    </html>
  `);
};

Overview

Server-side SDKs

React Components

Usage

Return Value

Configuration

playbackId

UseQueryOptions

SSR

Next.js

Other Frameworks

Overview

Server-side SDKs

React Components

​Usage

​Return Value

​Configuration

​playbackId

​UseQueryOptions

​SSR

​Next.js

​Other Frameworks

Usage

Return Value

Configuration

playbackId

UseQueryOptions

SSR

Next.js

Other Frameworks