Open-Source Transcript Player

View on GitHub
TRANSCRIPT_PLAYER_APP.TSX 
import { Box, Center, Flex, Text } from '@chakra-ui/react'
import React, { useCallback, useEffect, useState } from 'react'

import Player from 'video.js/dist/types/player'
import { Card } from './components/Card'
import Editor from './components/Editor'
import Transcript from './components/Transcript'
import { VideoPlayer } from './components/VideoPlayer'
import videoExample from './fakeData/customer_service_480x360.mp4'
import jsonData from './fakeData/fakedata.json'
import { VideoData } from './type'

const videoData: VideoData = jsonData as VideoData

const App: React.FC = () => {
    const [isHover, setIsHover] = useState(false)
    const [width, setWidth] = useState(30)
    const [isDragging, setIsDragging] = useState(false)
    const [currentTime, setCurrentTime] = useState(0)
    const [videoPlayer, setVideoPlayer] = useState<Player | null>(null)
    const [editorData, setEditorData] = useState({})

    const handleEditorChange = (data: any) => {
        setEditorData(data)
    }
    const handleMouseDown = useCallback(() => {
        setIsDragging(true)
    }, [])

    const handleMouseMove = useCallback(
        (e: MouseEvent) => {
            if (isDragging) {
                let newWidth = (e.clientX / window.innerWidth) * 100
                newWidth = Math.min(Math.max(newWidth, 35), 65)
                setWidth(newWidth)
            }
        },
        [isDragging]
    )

    const handleMouseUp = useCallback(() => {
        setIsDragging(false)
    }, [])

    useEffect(() => {
        window.addEventListener('mousemove', handleMouseMove)
        window.addEventListener('mouseup', handleMouseUp)
        return () => {
            window.removeEventListener('mousemove', handleMouseMove)
            window.removeEventListener('mouseup', handleMouseUp)
        }
    }, [handleMouseMove, handleMouseUp])

    const handleTimeUpdate = useCallback((time: number) => {
        setCurrentTime(time)
    }, [])

    const handleSeek = useCallback(
        (time: number) => {
            if (videoPlayer) {
                videoPlayer.currentTime(time)
            }
        },
        [videoPlayer]
    )

    const setPlayerRef = useCallback((player: Player) => {
        setVideoPlayer(player)
    }, [])

    return (
        <Flex
            h="100vh"
            w="100vw"
            bg="gray.100"
            gap="4"
            p="4"
            flexDir={{ base: 'column', lg: 'row' }}
        >
            <Flex
                flexDir={'column'}
                h="full"
                minW={{ base: 'full', lg: `${width}%` }}
                w={{ base: 'full', lg: `${width}%` }}
                gap="4"
            >
                <VideoPlayer
                    url={videoExample}
                    onTimeUpdate={handleTimeUpdate}
                    setPlayerRef={setPlayerRef}
                />

                <Card
                    header={
                        <Text size="md" fontWeight={'semibold'}>
                            Transcript
                        </Text>
                    }
                    title="Transcript"
                    isOpen={true}
                    toggleCard={() => {}}
                    bodyContent={
                        <Transcript
                            transcript={videoData.data.transcript}
                            currentTime={currentTime}
                            onWordClick={handleSeek}
                        />
                    }
                />
            </Flex>
            <Center
                display={{ base: 'none', lg: 'flex' }}
                onMouseEnter={() => setIsHover(true)}
                onMouseLeave={() => setIsHover(false)}
                px="2px"
                h="full"
                gap="2px"
                cursor="ew-resize"
                onMouseDown={handleMouseDown}
                opacity={isHover || isDragging ? '1' : '0'}
            >
                <Box
                    h="50px"
                    cursor="ew-resize"
                    w="4px"
                    bg="black"
                    rounded="full"
                />
                <Box
                    h="50px"
                    cursor="ew-resize"
                    w="4px"
                    bg="black"
                    rounded="full"
                />
            </Center>
            <Card
                header={
                    <Text size="md" fontWeight={'semibold'}>
                        Editor
                    </Text>
                }
                title="Editor"
                isOpen={true}
                toggleCard={() => {}}
                bodyContent={
                    <Editor data={editorData} onChange={handleEditorChange} />
                }
            />
        </Flex>
    )
}

export default App

View on GitHub
RUN_PLAYER.SH 
#!/bin/bash
# 🚀 Quick Start for Video Player with Synchronized Transcript 🚀
# Save this file as run.sh, chmod +x run.sh, and run it
# ⚠️ Make sure you have Git, Node.js, and Yarn installed before proceeding!

# Clone the repository
echo "📥 Cloning the repository..."
git clone https://github.com/Meeting-Baas/meeting-bot-as-a-service && cd meeting-bot-as-a-service || { echo "❌ Error: Failed to clone repository"; exit 1; }

# Navigate to the player interface directory
echo "📂 Navigating to player interface directory..."
cd apps/player-interface || { echo "❌ Error: Failed to navigate to player interface directory"; exit 2; }

# Install dependencies
echo "🔧 Installing dependencies..."
yarn install || { echo "❌ Error: Failed to install dependencies"; exit 3; }

# Run the application
echo "🚀 Starting the development server..."
yarn dev || { echo "❌ Error: Failed to start the development server"; exit 4; }

echo "✅ Setup complete! The application should now be running on your local development server at http://localhost:3000"

View on GitHub
TRANSCRIPT_PLAYER_TYPES.TSX 
// types.ts
export interface Word {
    start: number
    end: number
    word: string
}

export interface TranscriptEntry {
    speaker: string
    words: Word[]
}

export interface VideoData {
    event: string
    data: {
        bot_id: string
        transcript: TranscriptEntry[]
        speakers: string[]
        mp4: string
    }
}