@dabalabs/strapi

Official DabaLabs multi-language dubbed video player plugin for Strapi CMS (v4 & v5).

This plugin adds a DabaLabs Video custom field type to your Strapi Content Manager, enabling editors to easily attach multi-language dubbed videos to blog posts, articles, and media content with full live admin previews.

📦 Installation

In your Strapi project root:

npm install @dabalabs/strapi @dabalabs/player
# or
pnpm add @dabalabs/strapi @dabalabs/player
# or
yarn add @dabalabs/strapi @dabalabs/player

⚙️ Configuration

Register the plugin in your Strapi project's config/plugins.js (or config/plugins.ts):

module.exports = ({ env }) => ({
  'dabalabs-strapi': {
    enabled: true,
    // The plugin id and the npm package name differ, so Strapi needs to
    // be told where to load it from. The id itself is unchanged — it
    // keys this config, the plugin's routes and its translation ids.
    resolve: '@dabalabs/strapi',
    config: {
      apiKey: env('DABALABS_API_KEY'), // Global API Key for dynamic videos
      displayMode: 'text-row',
      // Omit `env` for production. Set it to 'staging' to point the
      // plugin at the staging gateway instead:
      //   env: 'staging',
      // `gatewayUrl` still overrides both, for a self-hosted gateway.
    },
  },
});

Rebuild your Strapi Admin Panel:

npm run build
npm run develop

🎨 How to Use in Strapi Admin

1. Open Content-Type Builder in your Strapi Admin Panel.
2. Select or create any Content-Type (e.g. Article, Blog Post).
3. Click Add another field $\rightarrow$ select Custom tab $\rightarrow$ choose DabaLabs Video.
4. Save and restart your content type.
5. In Content Manager, fill in:
   • Project ID: Your DabaLabs Project ID (e.g. proj_abc123).
   • Publishable API Key: Your DabaLabs Public Key (e.g. daba_pub_live_xxx).
   • Source URL (Optional): Original video file URL while dubbing processes.
   • Language Control Style: Choose between Text Pills, Flag Pills, or Dropdown Menu.
6. Watch the live interactive video player preview directly inside your Strapi Content Manager!

💻 Frontend Rendering Examples

When queried via Strapi REST API (/api/articles?populate=*) or GraphQL, the field returns JSON:

{
  "projectId": "proj_abc123",
  "apiKey": "daba_pub_live_xxx",
  "sourceUrl": "https://cdn.example.com/video.mp4",
  "displayMode": "text-row",
  "defaultLanguage": "original"
}

Next.js / React Frontend

import { useEffect, useRef } from 'react';
import { DabaPlayer } from 'dabalabs';

export default function ArticleVideo({ videoConfig }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current || !videoConfig?.projectId) return;

    const player = new DabaPlayer({
      container: containerRef.current,
      projectId: videoConfig.projectId,
      apiKey: videoConfig.apiKey,
      sourceUrl: videoConfig.sourceUrl,
      displayMode: videoConfig.displayMode || 'text-row',
    });

    return () => player.destroy();
  }, [videoConfig]);

  return <div ref={containerRef} className="my-6 aspect-video rounded-xl overflow-hidden" />;
}

HTML / Script Tag Embed

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

📄 License

MIT © DabaLabs

Environments

| Config | Gateway | |---|---| | nothing set | https://api.dabalabs.com | | env: 'production' | https://api.dabalabs.com | | env: 'staging' | https://api-staging.dabalabs.com | | gatewayUrl: '…' | that URL, overriding env |

Production is the default in every direction — a CMS is a live site, so staging has to be asked for by name. An unrecognised env warns and falls back to production rather than throwing, so a typo in config/plugins.js cannot stop Strapi booting.