@pokedemo/player

PokeDemo player SDK

Install

npm i @pokedemo/player

pnpm add @pokedemo/player

bun add @pokedemo/player

Import the stylesheet once in the app where you render the player:

import '@pokedemo/player/style.css'

The player expects the stylesheet import by default.

Vanilla JS / TS

import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player'

const container = document.getElementById('player')!

const player = new PokePlayer(container, {
  source: {
    baseUrl: 'https://example.com/path-to-bundle-manifest-root',
    // baseUrl: '/path-to-bundle-manifest-root',
    // locale: 'fr' // optional: set this only to force a specific locale
  },
  network: {
    fetch: window.fetch.bind(window),
  },
})

player.on('ready', () => console.log('ready'))
player.on('error', (err) => console.error('error', err))

API

• start()
• pause()
• resume()
• goToStep(index)
• nextStep()
• restart()
• getState()
• getCurrentStep()
• getTotalSteps()
• getSpeed()
• setSpeed(speed)
• destroy()
• ready (promise)
• PokePlayer.create(container, config) (async factory)
• Event contract via on(...) / once(...) / off(...)

Advanced Config

import type { PokePlayerConfig } from '@pokedemo/player'

const config: PokePlayerConfig = {
  source: {
    baseUrl: 'https://example.com/path-to-bundle-manifest-root',
    locale: 'fr', // optional: omit this to use browser language preferences
  },
  ui: {
    progressBar: {
      enabled: true,
    },
    startOverlay: {
      enabled: true,
    },
    endOverlay: {
      enabled: true,
    },
  },
  advanced: {
    retry: {
      maxRetries: 2,
      baseDelayMs: 500,
    },
    prefetch: {
      window: 1,
      enabled: true,
    },
    runtimeHooks: false,
  },
}

Framework Adapters

React and Vue adapters are available at:

• @pokedemo/player/react
• @pokedemo/player/vue

React

import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player/react'

export function DemoPlayer() {
  return (
    <PokePlayer
      baseUrl="https://example.com/path-to-bundle-manifest-root"
    />
  )
}

Vue

<script setup lang="ts">
import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player/vue'
</script>

<template>
  <PokePlayer
    base-url="https://example.com/path-to-bundle-manifest-root"
  />
</template>

Hide the top progress bar with ui.progressBar.enabled = false, showProgressBar={false}, or :show-progress-bar="false". Set locale only when you want to force a particular language. If you omit it, the player uses browser language preferences and falls back to the bundle default locale.

SSR / Node environments

This SDK requires a browser environment. The player targets modern evergreen browsers (for example browser-native DecompressionStream support is required).

Nuxt

Use the Vue adapter inside ClientOnly (or a .client.vue component) so it only renders in the browser.

<script setup lang="ts">
import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player/vue'
</script>

<template>
  <ClientOnly>
    <PokePlayer
      base-url="https://example.com/path-to-bundle-manifest-root"
    />
  </ClientOnly>
</template>

NextJs

Import @pokedemo/player/style.css once from your app-level stylesheet entry (for example app/layout.tsx), then use the React adapter in a client component.

// app/layout.tsx
import '@pokedemo/player/style.css'

// app/demo-player.tsx
'use client'

import { PokePlayer } from '@pokedemo/player/react'

export function DemoPlayer() {
  return (
    <PokePlayer
      baseUrl="https://example.com/path-to-bundle-manifest-root"
    />
  )
}

If you import from a server component, wrap it with next/dynamic and { ssr: false }.