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

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

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>
  `);
};

Was this page helpful?

useStreamSessionsApplication Binary Interface