React Interactive Video Story 🎬

A simple yet powerful React component for creating interactive video stories. It displays subtitles in speech bubbles and highlights words in sync with the video's audio, karaoke-style.

This package is perfect for educational apps, children's stories, language learning platforms, or any video content that requires engaging text synchronization.

Note: You can capture a GIF of your component in action, upload it to a service like imgur.com, and paste the link here.

🌟 Features

• Video Sequencing: Plays a series of video clips in order.
• Synchronized Subtitles: Displays subtitles in speech bubbles, timed perfectly with the video.
• Karaoke-Style Highlighting: Highlights the current word being spoken.
• Full Styling Control: Customize the position and orientation of speech bubbles for each subtitle.
• Built-in Controls: Includes essential controls like Play/Pause, Next/Previous, Mute, Fullscreen, and Playback Speed.
• Highly Flexible: All data (videos, subtitles, positions) is passed via props, making it easy to use with any content source.

🛠️ Installation

Install the package using npm or yarn: Markdown Preview Enhanced

npm install @tareqalsadaqa/subtitleinbubble

OR

yarn add @tareqalsadaqa/subtitleinbubble

🚀 Getting Started

Using the component is straightforward. Import the component and its stylesheet, then provide it with the necessary data props.

import React from 'react';
import { StoryPage } from '@tareqalsadaqa/subtitleinbubble';
import '@tareqalsadaqa/subtitleinbubble/style.css';

1. Define your video and subtitle data

const myVideos = [
  {
    url: "https://www.w3schools.com/html/mov_bbb.mp4",
    title: "My First Scene",
    subtitles: [
      {
        start: 0,
        end: 4.5,
        words: [
          { text: "This", start: 0, end: 0.5 },
          { text: "is", start: 0.6, end: 0.9 },
          { text: "the", start: 0.9, end: 1.8 },
          { text: "first", start: 1.8, end: 2.6 },
          { text: "subtitle.", start: 2.7, end: 3.5 },
        ],
      },
      // ...more subtitles
    ],
  },
  // ...more videos
];

2. Define the positions for your speech bubbles

const myCloudPositions = {
  // Positions for the first video (index 0 )
  0: [
    // Position for the first subtitle (index 0)
    { top: '70%', left: '50%', transform: 'translateX(-50%)' },
    // Position for the second subtitle (index 1)
    { top: '10%', left: '20%', isFlipped: true },
  ],
};

3. Use the component in your app

function App() {
  const handleStoryEnd = () => {
    alert("The story has finished!");
  };

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <StoryPage
        videos={myVideos}
        cloudPositions={myCloudPositions}
        onStoryEnd={handleStoryEnd}
      />
    </div>
  );
}

export default App;

| Prop | Type | Required | Description | | ---------------- | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | videos | Array | Yes | An array of video objects. Each object must contain a url and a subtitles array. Each subtitle object contains start, end, and a words array, with each word having its own text, start, and end time. | | cloudPositions | Object | Yes | An object defining bubble positions. The key is the video index, and the value is an array of CSS style objects. Each style object in the array corresponds to a subtitle at the same index. | | onStoryEnd | Function | No | A callback function that is invoked when the final video in the sequence has finished playing```

You can use any valid CSS properties for positioning (top, left, bottom, right, transform, etc.).

isFlipped: true will flip the orientation of the bubble's "tail".

🤝 Contributing

Contributions are always welcome! If you have ideas for improvements or bug fixes, feel free to open an issue or submit a pull request on the GitHub repository.

GitHub Profile LinkedIn Profile