Docs
Player ReactRecipesRemember playback position

Remember playback position

Persist the viewer session across reloads with LocalStorageViewerTokenStore.

The player keeps the resume position and a continuous telemetry session through a viewer-token store. By default the store is in-memory, so the session resets on reload (and stays SSR-safe). For cross-session continuity, a returning viewer keeping their session across reloads, pass a LocalStorageViewerTokenStore to the provider.

"use client"
import {
  MoviieProvider,
  LocalStorageViewerTokenStore,
} from "@moviie/player-react"

const viewerTokenStore = new LocalStorageViewerTokenStore()

export function Watch({ embedId }: { embedId: string }) {
  return (
    <MoviieProvider
      publishableKey={process.env.NEXT_PUBLIC_MOVIIE_PUBLISHABLE_KEY!}
      viewerTokenStore={viewerTokenStore}
    >
      <Player embedId={embedId} />
    </MoviieProvider>
  )
}

The store persists the token in localStorage under MOVIIE_VIEWER_TOKEN_STORAGE_KEY ("moviie:viewer-token"). It is SSR-safe: with no window it is a silent no-op, so it is safe to construct on the server.

Custom key or backend

Pass a different key, or your own Storage implementation (for tests or an alternative backend):

const viewerTokenStore = new LocalStorageViewerTokenStore({
  key: "myapp:moviie-token",
})

Resume-position behaviour

Whether the player resumes from the last position follows the embed's dashboard configuration. As with every dashboard setting, you can override it per player through useMoviiePlayer:

const moviie = useMoviiePlayer({
  embedId,
  // rememberPosition: true, // only to force the dashboard value on or off
})

Omit rememberPosition to use the dashboard value.

In-memory by default

Without a viewerTokenStore, the session lives in memory and resets on reload. Add LocalStorageViewerTokenStore only when you want continuity across sessions.

On this page