dabalabs

Embeddable multi-language dubbed video player widget for dabalabs projects. Dub a video into several languages once, then embed it anywhere — visitors get a language switcher right in the player.

Works seamlessly in Plain HTML, React, Next.js, Vue, Nuxt, Astro, and any modern JavaScript stack.

Install

npm install @dabalabs/player

Quick Start by Framework

1. Plain HTML / Vanilla JS

<div
  data-daba-player
  data-project-id="YOUR_PROJECT_ID"
  data-api-key="YOUR_API_KEY"
  data-display-mode="text-row"
></div>
<script src="https://unpkg.com/@dabalabs/player/dist/dabaplayer.min.js"></script>

2. React / Next.js

"use client";

import { useEffect, useRef } from "react";
import { DabaPlayer, type DabaDisplayMode } from "@dabalabs/player";

export function VideoPlayer({
  projectId,
  apiKey,
  displayMode = "text-row",
}: {
  projectId: string;
  apiKey: string;
  displayMode?: DabaDisplayMode;
}) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    const player = new DabaPlayer({
      container: containerRef.current,
      projectId,
      apiKey,
      displayMode,
    });

    return () => player.destroy();
  }, [projectId, apiKey, displayMode]);

  return <div ref={containerRef} className="w-full aspect-video" />;
}

3. Vue 3 / Nuxt 3

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { DabaPlayer } from 'dabalabs';

const props = defineProps({
  projectId: String,
  apiKey: String,
  displayMode: { type: String, default: 'text-row' },
});

const playerContainer = ref(null);
let player = null;

onMounted(() => {
  if (playerContainer.value) {
    player = new DabaPlayer({
      container: playerContainer.value,
      projectId: props.projectId,
      apiKey: props.apiKey,
      displayMode: props.displayMode,
    });
  }
});

onUnmounted(() => {
  player?.destroy();
});
</script>

<template>
  <div ref="playerContainer" class="w-full aspect-video"></div>
</template>

4. Astro

---
// VideoPlayer.astro
export interface Props {
  projectId: string;
  apiKey: string;
  displayMode?: 'text-row' | 'flags-row' | 'dropdown-text' | 'dropdown-flags';
}

const { projectId, apiKey, displayMode = 'text-row' } = Astro.props;
---

<div
  data-daba-player
  data-project-id={projectId}
  data-api-key={apiKey}
  data-display-mode={displayMode}
></div>

<script src="https://unpkg.com/@dabalabs/player"></script>

Get a project ID and API key from the Developer section of your dabalabs dashboard.

API Keys are Publishable

The API key is meant to sit in your site's frontend source, the same trust model as a Stripe.js or Google Maps JS key. It's restricted server-side to:

• the exact origins you list when you create it
• read-only access to your own, already-dubbed video languages

It can't create or modify anything, and can be revoked instantly from your dashboard.

Options

| Option | Type | Description | Script Tag Attribute | | --- | --- | --- | --- | | container | string \| HTMLElement | CSS selector or DOM element where player will render | data-daba-player element itself | | projectId | string | Your video project ID from the dashboard | data-project-id | | apiKey | string | Your publishable API key | data-api-key | | displayMode | "text-row" \| "flags-row" \| "dropdown-text" \| "dropdown-flags" | UI layout mode for language switcher (default: "text-row") | data-display-mode | | sourceUrl | string | URL of original video (for client-provided source videos) | data-src | | defaultLanguage | string | Initial language code (defaults to first available) | data-default-language | | gatewayUrl | string (Optional) | Base URL of gateway (defaults to "https://api.dabalabs.com") | data-gateway-url | | autoplay | boolean | Autoplay video on load | data-autoplay="true" | | muted | boolean | Start video muted | data-muted="true" | | accentColor | string | Accent color hex for player styling | data-accent-color | | onLanguageChange | (code: string) => void | Callback fired when user switches active language | N/A | | onError | (error: DabaError) => void | Callback fired on initialization or network error | N/A |

Display Modes (displayMode / data-display-mode)

• text-row (Default): Active language in a white pill (English), followed by a chevron (>) and horizontal text options (Spanish, French, German).
• flags-row: Active language in a white pill with flag icon (🇺🇸 English), followed by a chevron (>) and horizontal flag options (🇪🇸 Spanish, 🇫🇷 French, 🇩🇪 German).
• dropdown-text: Active language in a white pill button (English ▾) opening a floating dark dropdown menu with language names.
• dropdown-flags: Active language in a white pill button (🇺🇸 English ▾) opening a floating dark dropdown menu with flags & language names.

Methods

• player.setLanguage(code) — switch language, preserving playback position and play state
• player.destroy() — remove the player and stop playback
• player.currentLanguage — the active language code
• player.videoElement — the underlying <video> element

Environments

By default the widget talks to Dabalabs production. Point it at staging with env:

<div data-daba-player
  data-project-id="YOUR_PROJECT_ID"
  data-api-key="YOUR_API_KEY"
  data-env="staging"
></div>

new DabaPlayer({
  // ...
  env: "staging",
});

| env | Gateway | |---|---| | omitted | https://api.dabalabs.com | | "production" | https://api.dabalabs.com | | "staging" | https://api-staging.dabalabs.com |

Production is the default in every direction — an embed that says nothing about its environment is a live site, so staging has to be asked for by name. An unrecognised value warns in the console and falls back to production rather than throwing, so a typo cannot take a customer's page down.

gatewayUrl still overrides env when both are given: it is the only option that can name a host neither tier covers (a self-hosted deployment, a local gateway).