taleem-player-app

Runtime harness for Taleem Player.

taleem-player-app wires together:

• a player (taleem-player)
• a timer (audio or silent)
• a render loop (taleem-pam)
• basic UI controls

It is not a full app or framework. It is a small orchestration utility that helps run a Taleem slide deck.

Installation

npm install taleem-player-app taleem-player taleem-pam howler

howler is required only if you use audio timers.

What this library does

This library connects four pieces:

player.renderAt(time)
        ↑
     timer.now()
        ↑
     renderLoop
        ↑
       UI

It provides a minimal runtime that:

• runs the render loop
• syncs time with a timer
• connects play/pause/stop buttons
• connects a timeline scrub bar
• exposes a hook after each render

Basic Usage

import { createTaleemPlayer } from "taleem-player";
import { taleemPlayerApp, createSilentTimer } from "taleem-player-app";

const player = createTaleemPlayer(deck);

const timer = createSilentTimer();

taleemPlayerApp({
  player,
  timer,
  duration: deck.duration,
  ui: {
    playBtn: document.querySelector("#play"),
    pauseBtn: document.querySelector("#pause"),
    stopBtn: document.querySelector("#stop"),
    scrub: document.querySelector("#scrub"),
    timeEl: document.querySelector("#time")
  }
});

Audio Timer Example

If your slides are synchronized to audio:

import { createAudioTimer } from "taleem-player-app";

const timer = createAudioTimer("/lesson.mp3");

This uses howler.js for audio playback.

API

taleemPlayerApp

taleemPlayerApp({
  player,
  timer,
  duration,
  ui,
  afterRender
})

Parameters

| field | description | | ----------- | ------------------------------ | | player | Taleem player instance | | timer | timer adapter | | duration | deck duration in seconds | | ui | UI control elements | | afterRender | optional hook after each frame |

UI Contract

The ui object must contain:

{
  playBtn,
  pauseBtn,
  stopBtn,
  scrub,
  timeEl
}

Example HTML:

<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>

<input id="scrub" type="range">

<span id="time"></span>

afterRender Hook

The afterRender hook runs after every frame render.

Useful for:

• math rendering
• code highlighting
• custom animations

Example:

taleemPlayerApp({
  player,
  timer,
  duration,
  ui,

  afterRender({ time }) {
    renderMathInElement(document.body);
  }
});

Timer Adapters

The player expects a timer with this interface:

{
  play()
  pause()
  seek(time)
  now()
}

Two adapters are included.

createSilentTimer()

Timeline-based timer.

const timer = createSilentTimer();

Used when slides control timing.

createAudioTimer(url)

Audio-driven timer.

const timer = createAudioTimer("/lesson.mp3");

Requires howler.

Design Philosophy

taleem-player-app is intentionally small.

Responsibilities are separated across libraries:

taleem-slides       → slide HTML
taleem-player       → rendering engine
taleem-player-app   → runtime harness
taleem-pam          → render loop

Each library does one job.

License

MIT