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
# or
pnpm add dabalabs-strapi dabalabs
# or
yarn add dabalabs-strapi dabalabs

⚙️ Configuration

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

module.exports = ({ env }) => ({
  'dabalabs-strapi': {
    enabled: true,
    config: {
      apiKey: env('DABALABS_API_KEY'), // Global API Key for dynamic videos
      gatewayUrl: 'https://api.dabalabs.com',
      displayMode: 'text-row',
    },
  },
});

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/dist/daba.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