@pokedemo/player

PokeDemo player SDK

Install

npm i @pokedemo/player

pnpm add @pokedemo/player

bun add @pokedemo/player

Vanilla JS / TS

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',
  },
  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' },
  ui: {
    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 { 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 { PokePlayer } from '@pokedemo/player/vue'
</script>

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

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 { PokePlayer } from '@pokedemo/player/vue'
</script>

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

NextJs

Use the React adapter in a client component.

'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 }.