> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# VCS: useVideoPlaybackState()

> Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useVideoPlaybackState(): String (enum)`

Returns the video playback state of the composition. You can import `PlaybackStateType` from the same file to get the enum values:

```javascript theme={null}
const PlaybackStateType = {
  PLAYING: 'playing',
  POSTROLL: 'postroll',
};
```

## Return type

| Type     | Description                                                                                                                                                                                                                                                            |
| :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `String` | `'playing'` or `'postroll'` (`PlaybackStateType.PLAYING` or `PlaybackStateType.POSTROLL`). When the playback state evalutes to `'playing'`, the composition is currently playing. When it evaluates to `'postroll'`, the composition is transitioning to a stop state. |

You can end your composition with any visuals you want to display at the end of the output video file (e.g. end titles) when the playback state is `'postroll'`. The postroll will be at least 300ms long, allowing you to also render an optional fade.

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Text } from '#vcs-react/components';
import { useVideoPlaybackState } from '#vcs-react/hooks';

  const playbackState = useVideoPlaybackState();

  return <Text>Current playback state: {playbackState}</Text>;
}
```