DEV Community: Joyce Prodipta Banerjee

Frontend Challenge v24.07.24

Joyce Prodipta Banerjee — Tue, 30 Jul 2024 03:20:31 +0000

I created an interactive website for the New York Recreational Cricket League that features:

Horizontal Scrolling Sections:
Utilized GSAP and ScrollTrigger to create a smooth horizontal scrolling effect.

3D Scene:
Integrated a 3D cricket ball model using React Three Fiber to add dynamic visual appeal.

Interactive Design:
Implemented a responsive layout to ensure a seamless experience across different devices.
The goal was to combine interactive animations and modern 3D graphics to create a visually engaging experience for users interested in the cricket league.

Demo

Check out the live demo of the project here: Demo
Alternatively, view the code on GitHub: GitHub Repository

Design & Planning:
Defined the project requirements and sketched out the layout and interactions.
Chose GSAP for horizontal scrolling animations and React Three Fiber for the 3D scene.

Implementation:
Set up the project with Next.js and Tailwind CSS.
Created horizontal scrolling sections using GSAP and ScrollTrigger.
Added a 3D cricket ball model that rotates and scales based on scroll progress.
Ensured responsive design and smooth performance across different devices.

Challenge:
Synchronizing the 3D scene with the scroll progress.

Solution:
Calculated the ball's position and scale based on scroll position, using a curved path for smooth motion.
Challenge: Ensuring smooth horizontal scrolling with different screen sizes.
Used flexible sizing and scroll triggers to adapt to various viewport dimensions.

Learnings:
Improved my skills in integrating GSAP with React for animations. Gained hands-on experience with 3D rendering using React Three Fiber. Learned how to handle complex animations and interactions in a responsive design.

This project was developed by: banerjeeprodipta

Creating Lyrics Video using FFmpeg

Joyce Prodipta Banerjee — Sun, 08 Oct 2023 11:56:56 +0000

The Video Generation API we are building in this tutorial will allow users to convert audio files (e.g., MP3 songs) and lyric files (e.g., LRC files) into video content with subtitles. This can be particularly useful for creating lyric videos or promotional material for your music.

We will cover the following key components in our API:

File Upload: Users can upload their MP3 and LRC files to the API.

LRC to SRT Conversion: We will convert LRC (Lyric) files into SRT (SubRip) format, which is commonly used for subtitles in videos.

Video Generation: We will use FFmpeg to combine the background image, audio file, and subtitles to create the final video.

API Endpoint: We will expose an API endpoint that users can call to trigger the video generation process.

Prerequisites
Before we dive into the code, make sure you have the following prerequisites installed:

Node.js: You can download it here.

FFmpeg: Install FFmpeg on your system or use the @ffmpeg-installer/ffmpeg package in Node.js.

Basic knowledge of JavaScript and Node.js.

Setting Up the Project
Let's start by setting up our Node.js project and installing the necessary packages. We'll use multer for file uploads and child_process for running FFmpeg commands. The project structure should look something like this:

project-root/
  ├─ public/
  │   ├─ uploads/
  │   │   ├─ audio/
  │   │   ├─ subtitle/
  │   │   ├─ thumbnail/
  │   │   └─ video/
  │   └─ bg.jpg
  ├─ api/
  │   └─ videoGeneration.js
  ├─ package.json
  └─ ...

Setting Up multer for File Uploads

import multer from "multer";

// Define storage configuration for multer
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // Specify the destination directory for uploaded files
    cb(null, path.join(baseDir, uploadDir, "subtitle"));
  },
  filename: (req, file, cb) => {
    // Define the filename for uploaded files
    cb(null, file.originalname);
  },
});

// Create a multer instance with the storage configuration
const upload = multer({ storage });

// Handle file uploads using upload.fields() in your route handler

LRC to SRT Conversion

function lrcToSrt(lrcContent) {
  const lrcLines = lrcContent.split("\n");
  let srt = "";
  let counter = 1;

  const formatTime = (timeStr) => {
    // Split the input time string into minutes and seconds
    const [minutes, seconds] = timeStr.split(":");

    // Extract seconds and milliseconds
    const [secondsPart, millisecondsPart] = seconds.split(".");

    // Format each part with leading zeros
    const formattedMinutes = minutes.padStart(2, "0");
    const formattedSeconds = secondsPart.padStart(2, "0");
    const formattedMilliseconds = millisecondsPart.padEnd(3, "0");

    // Combine the formatted parts into the desired format
    const formattedTime = `00:${formattedMinutes}:${formattedSeconds},${formattedMilliseconds}`;

    return formattedTime;
  };

  for (let i = 0; i < lrcLines.length; i++) {
    const line = lrcLines[i].trim();
    if (line === "") continue;

    // Extract timestamps and lyrics
    const match = line.match(/\[(\d+:\d+\.\d+)\](.*)/);
    if (match) {
      const startTime = formatTime(match[1]); // Convert to SRT format

      let endTime;

      if (i < lrcLines.length - 1) {
        const nextLineMatch = lrcLines[i + 1].match(/\[(\d+:\d+\.\d+)\]/);
        endTime = nextLineMatch ? formatTime(nextLineMatch[1]) : "99:59:59,999";
      } else {
        // Use start time + 5 seconds if it's the last line
        const timeSplits = startTime.split(":");
        const addSecondsInSecondSplit = parseInt(timeSplits[1]) + 5;

        endTime = [
          timeSplits[0],
          ":",
          addSecondsInSecondSplit,
          ":",
          timeSplits[2],
        ].join("");
      }

      const lyrics = match[2].trim();

      srt += `${counter}\n${startTime} --> ${endTime}\n${lyrics}\n\n`;
      counter++;
    }
  }

  return srt;
}

Video Generation with FFmpeg

import { exec } from "child_process";
import ffmpegPath from "@ffmpeg-installer/ffmpeg";

async function generateVideo(mp3Path, lrcPath, songTitle) {
  return new Promise((resolve, reject) => {
    const mp3FilePath = `"${mp3Path}"`;
    const srtPath = path.join(
      publicDir,
      uploadDir,
      "subtitle",
      `${songTitle}.srt`
    );
    const videoPath = path.join(
      publicDir,
      uploadDir,
      "video",
      `${songTitle}.mp4`
    );

    let isVideoFileExist = fs.existsSync(videoPath);

    const lrcContent = fs.readFileSync(lrcPath, "utf8");
    const cleanedLrcContent = lrcContent.replace(/[\r\n]+/gm, "\n");
    const srtContent = lrcToSrt(cleanedLrcContent);
    console.log("🚀 Generating LRC");

    fs.writeFileSync(srtPath, srtContent, "utf8");
    console.log("🎉 Done making LRC");

    function convertVideoToSubtitle(mp3FilePath) {
      let subtitlePath = mp3FilePath
        .replace(/\\/g, "\\\\")
        .replace(/audio/g, "subtitle")
        .replace(/:/g, "\\:")
        .replace(/-/g, "\\-")
        .replace(".mp3", ".srt");

      return subtitlePath;
    }

    const subtitlePath = convertVideoToSubtitle(mp3FilePath);

    if (isVideoFileExist) {
      return resolve({ videoUrl: videoPath });
    }

    const ffmpegCommand = [
      ffmpegPath.path,
      "-loop",
      "1",
      "-i",
      backgroundImage,
      "-i",
      mp3FilePath,
      "-c:v",
      "libx264",
      "-c:a",
      "aac",
      "-strict",
      "experimental",
      "-b:a",
      "192k",
      "-shortest",
      "-y",
      "-vf",
      `subtitles='${subtitlePath}:force_style=Alignment=10,Fontsize=48,Outline=2'`,
      `"${videoPath}"`,
    ].join(" ");

    console.log({ ffmpegCommand });
    exec(ffmpegCommand, (ffmpegError, stdout) => {
      if (ffmpegError) {
        console.error("❌", ffmpegError);
        if (fs.existsSync(videoPath)) {
          fs.unlink(videoPath, (unlinkError) => {
            if (unlinkError) {
              console.error("❌ Error deleting video file:", unlinkError);
            }
          });
        }
        console.error("❌ Video generation failed");
        return reject(new Error("Video generation failed"));
      } else {
        console.log("FFmpeg output:", stdout);
        console.log("🎉 Video generation completed!");
        return resolve({ videoUrl: videoPath });
      }
    });
  });
}

These code snippets cover the file upload setup with multer, LRC to SRT conversion, and video generation using FFmpeg. You can integrate these snippets into your Node.js project as discussed in the blog post to create your Video Generation API.

API Endpoint
Now, let's create the API endpoint that users can call to trigger the video generation process. In your Node.js route handler:

import express from "express";

// Create an Express application
const app = express();

// Define a POST endpoint for video generation
app.post("/generate-video", async (req, res) => {
  const { lrcFile } = await uploadFiles(req, res);

  const mp3FileName = req.body.mp3File;
  const lrcFileName = lrcFile[0].originalname;

  const mp3Path = path.join(baseDir, uploadDir, "audio", `${mp3FileName}.mp3`);
  const lrcPath = path.join(baseDir, uploadDir, "subtitle", lrcFileName);

  try {
    const response = await generateVideo(mp3Path, lrcPath, mp3FileName);
    const videoUrl = response.videoUrl;
    return res.status(200).json({ videoUrl });
  } catch (error) {
    console.error("Error generating video:", error);

    return res.status(500).json({ error: "Video generation failed" });
  }
});

// Start the Express server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Here is my whole code, PS. I used next.js API

import multer from "multer";
import fs from "fs";
import path from "path";
import { exec } from "child_process";
import ffmpegPath from "@ffmpeg-installer/ffmpeg";

export const config = {
  api: {
    bodyParser: false, // Disables the default body parser as we will handle the form data ourselves
  },
};

const publicDir = path.join(process.cwd(), "public");
const uploadDir = "/uploads"; // Directory to store uploaded files
const backgroundImage = path.join(publicDir, "/bg.jpg"); // Replace with the correct path to your image file

const baseDir = publicDir; // Set the base directory to public/uploads

// Create multer storage configuration
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, path.join(baseDir, uploadDir, "subtitle"));
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage });

function uploadFiles(req, res) {
  return new Promise((resolve, reject) => {
    upload.fields([{ name: "lrcFile" }])(req, res, (err) => {
      if (err) {
        console.error("Error uploading files:", err);
        return reject(new Error("Error uploading files"));
      }

      const { lrcFile } = req.files;
      resolve({ lrcFile });
    });
  });
}

function lrcToSrt(lrcContent) {
  const lrcLines = lrcContent.split("\n");
  let srt = "";
  let counter = 1;

  const formatTime = (timeStr) => {
    // Split the input time string into minutes and seconds
    const [minutes, seconds] = timeStr.split(":");

    // Extract seconds and milliseconds
    const [secondsPart, millisecondsPart] = seconds.split(".");

    // Format each part with leading zeros
    const formattedMinutes = minutes.padStart(2, "0");
    const formattedSeconds = secondsPart.padStart(2, "0");
    const formattedMilliseconds = millisecondsPart.padEnd(3, "0");

    // Combine the formatted parts into the desired format
    const formattedTime = `00:${formattedMinutes}:${formattedSeconds},${formattedMilliseconds}`;

    return formattedTime;
  };

  for (let i = 0; i < lrcLines.length; i++) {
    const line = lrcLines[i].trim();
    if (line === "") continue;

    // Extract timestamps and lyrics
    const match = line.match(/\[(\d+:\d+\.\d+)\](.*)/);
    if (match) {
      const startTime = formatTime(match[1]); // Convert to SRT format

      let endTime;

      if (i < lrcLines.length - 1) {
        const nextLineMatch = lrcLines[i + 1].match(/\[(\d+:\d+\.\d+)\]/);
        endTime = nextLineMatch ? formatTime(nextLineMatch[1]) : "99:59:59,999";
      } else {
        // Use start time + 5 seconds if it's the last line
        const timeSplits = startTime.split(":");
        const addSecondsInSecondSplit = parseInt(timeSplits[1]) + 5;

        endTime = [
          timeSplits[0],
          ":",
          addSecondsInSecondSplit,
          ":",
          timeSplits[2],
        ].join("");
      }

      const lyrics = match[2].trim();

      srt += `${counter}\n${startTime} --> ${endTime}\n${lyrics}\n\n`;
      counter++;
    }
  }

  return srt;
}

async function generateVideo(mp3Path, lrcPath, songTitle) {
  return new Promise((resolve, reject) => {
    const mp3FilePath = `"${mp3Path}"`;
    const srtPath = path.join(
      publicDir,
      uploadDir,
      "subtitle",
      `${songTitle}.srt`
    );
    const videoPath = path.join(
      publicDir,
      uploadDir,
      "video",
      `${songTitle}.mp4`
    );

    let isVideoFileExist = fs.existsSync(videoPath);

    const lrcContent = fs.readFileSync(lrcPath, "utf8");
    const cleanedLrcContent = lrcContent.replace(/[\r\n]+/gm, "\n");
    const srtContent = lrcToSrt(cleanedLrcContent);
    console.log("🚀 Generating LRC");

    fs.writeFileSync(srtPath, srtContent, "utf8");
    console.log("🎉 Done making LRC");

    function convertVideoToSubtitle(mp3FilePath) {
      let subtitlePath = mp3FilePath
        .replace(/\\/g, "\\\\")
        .replace(/audio/g, "subtitle")
        .replace(/:/g, "\\:")
        .replace(/-/g, "\\-")
        .replace(".mp3", ".srt");

      return subtitlePath;
    }

    const subtitlePath = convertVideoToSubtitle(mp3FilePath);

    if (isVideoFileExist) {
      return resolve({ videoUrl: videoPath });
    }

    const ffmpegCommand = [
      ffmpegPath.path,
      "-loop",
      "1",
      "-i",
      backgroundImage,
      "-i",
      mp3FilePath,
      "-c:v",
      "libx264",
      "-c:a",
      "aac",
      "-strict",
      "experimental",
      "-b:a",
      "192k",
      "-shortest",
      "-y",
      "-vf",
      `subtitles='${subtitlePath}:force_style=Alignment=10,Fontsize=48,Outline=2'`,
      `"${videoPath}"`,
    ].join(" ");

    console.log({ ffmpegCommand });
    exec(ffmpegCommand, (ffmpegError, stdout) => {
      if (ffmpegError) {
        console.error("❌", ffmpegError);
        if (fs.existsSync(videoPath)) {
          fs.unlink(videoPath, (unlinkError) => {
            if (unlinkError) {
              console.error("❌ Error deleting video file:", unlinkError);
            }
          });
        }
        console.error("❌ Video generation failed");
        return reject(new Error("Video generation failed"));
      } else {
        console.log("FFmpeg output:", stdout);
        console.log("🎉 Video generation completed!");
        return resolve({ videoUrl: videoPath });
      }
    });
  });
}

async function handleVideoGeneration(req, res) {
  const { lrcFile } = await uploadFiles(req, res);

  const mp3FileName = req.body.mp3File;
  const lrcFileName = lrcFile[0].originalname;

  const mp3Path = path.join(baseDir, uploadDir, "audio", `${mp3FileName}.mp3`);
  const lrcPath = path.join(baseDir, uploadDir, "subtitle", lrcFileName);

  try {
    const response = await generateVideo(mp3Path, lrcPath, mp3FileName);
    const videoUrl = response.videoUrl;
    return res.status(200).json({ videoUrl });
  } catch (error) {
    console.error("Error generating video:", error);

    return res.status(500).json({ error: "Video generation failed" });
  }
}

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method Not Allowed" });
  }
  try {
    await handleVideoGeneration(req, res);
  } catch (error) {
    console.error("Error handling video generation:", error);
    return res.status(500).json({ error: "Video generation failed" });
  }
}

Conclusion
In this blog post, we've explored how to create a Video Generation API using Node.js and FFmpeg. This API can be a valuable addition to your multimedia content creation toolkit, allowing you to automate the process of turning audio and lyric files into engaging videos.

Feel free to customize and extend this API to suit your specific needs. You can enhance it by adding more features, such as custom styling for subtitles or support for different video formats.

Now that you have a basic understanding of how to create a Video Generation API, you can explore more advanced options and integrate it into your projects for creative video content generation.

Happy coding!

Building an autocomplete-input component in Next.js

Joyce Prodipta Banerjee — Fri, 06 Oct 2023 12:48:14 +0000

Sandbox Demo

Introduction:
AutoComplete input fields are a common user interface element used to help users efficiently find and select options from a predefined list. In this blog, we'll explore how to create a customizable AutoComplete input component in React with throttling to improve performance. We'll walk through the code for the component and explain its key features.

Creating the AutoCompleteInput Component:
The AutoCompleteInput component is designed to provide a user-friendly AutoComplete experience. Let's break down its important components and functionality:

Props:
The component takes two props: options and handleSelection. The options prop is an array of strings representing the available options, while handleSelection is a callback function to handle the selected option.
State and Refs:
- inputRef: This useRef hook is used to reference the input element for handling clicks outside the component.
- value: Represents the current value of the input field.
- suggestions: Stores the list of suggestions based on the user's input.
getSuggestions Function:
This function filters the available options based on the user's input. It converts both the input and options to lowercase for case-insensitive matching.
onChange Function:
Whenever the input field's value changes, this function updates the value state and recalculates the suggestions based on the new value.
onSuggestionClick Function:
When a suggestion is clicked, this function sets the selected suggestion as the input value and calls the handleSelection callback with the selected value.
isSuggestionEmpty Function:
This function checks if the suggestions list is empty or contains only an empty string. It is used to conditionally render the suggestions dropdown.
Event Listener for Clicks Outside:
An useEffect hook is used to add a click event listener to the document body. This listener detects clicks outside of the component, allowing it to blur and hide the suggestions dropdown.
Throttling with Lodash:
To improve performance and responsiveness, we've added throttling to the onChange event using the lodash/debounce function. This reduces the frequency of function calls while the user is typing rapidly.

Installing Lodash:
Before implementing throttling, make sure to install the lodash library using npm. Run the following command in your project directory:

npm install lodash

Rendering the Component:
The AutoCompleteInput component is rendered within the Home component. When the user selects a suggestion, the selected value is logged to the console.

Conclusion:
Creating an AutoComplete input component in React can enhance user experience when searching or selecting items from a list. The provided code demonstrates a basic implementation, and with the added throttling, it ensures smooth performance even with rapid typing.

Feel free to use this code as a starting point and adapt it to your specific needs. By following the installation instructions for lodash, you can easily add throttling to your React components. Happy coding!

"use client";
import AutoCompleteInput from "./components/AutoComplete";

const data = ["One", "Two", "Three"];

export default function Home() {
  const handleSelection = (selectedOption: string) => {
    console.log({ Selected: { selectedOption } });
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <AutoCompleteInput
        options={data.map((v: string) => v)}
        handleSelection={handleSelection}
      />
    </main>
  );
}

import React, { useEffect, useRef, useState } from "react";
import debounce from "lodash/debounce"; // npm install lodash

interface IPropType {
  options: string[];
  handleSelection: (val: string) => void;
}

const AutoCompleteInput = (props: IPropType) => {
  const { options, handleSelection } = props;
  const inputRef = useRef<HTMLInputElement>(null);
  const [value, setValue] = useState("");
  const [suggestions, setSuggestions] = useState([""]);

  const getSuggestions = (inputValue: string) => {
    if (typeof inputValue !== "string") {
      return [];
    }
    const inputValueLowerCase = inputValue.toLowerCase();
    return options.filter((option) =>
      option.toLowerCase().includes(inputValueLowerCase),
    );
  };

  // Debounce the onChange function
  const debouncedOnChange = debounce((newValue: string) => {
    setValue(newValue);
    setSuggestions(getSuggestions(newValue));
  }, 100); // Adjust the debounce delay as needed (e.g., 300 milliseconds)

  const onSuggestionClick = (suggestion: string) => {
    setValue(suggestion);
    handleSelection(suggestion);
    setSuggestions([]);
  };

  const isSuggestionEmpty = () => {
    if (suggestions.length === 1 && suggestions[0] === "") {
      return true;
    } else return false;
  };

  // Add a click event listener to the document body to handle clicks outside of the component
  useEffect(() => {
    const handleDocumentClick = (e: any) => {
      if (inputRef.current && !inputRef.current.contains(e.target)) {
        inputRef.current.blur();
        setSuggestions([]);
      }
    };

    document.addEventListener("click", handleDocumentClick);

    return () => {
      document.removeEventListener("click", handleDocumentClick);
    };
  }, []);

  return (
    <div className="relative">
      <input
        ref={inputRef}
        className="w-full border border-dark text-black transition-all duration-300 rounded-md px-4 py-3 focus:outline-none"
        type="text"
        placeholder="Search"
        value={value}
        onChange={(e) => debouncedOnChange(e.target.value)}
        onFocus={() => {
          setSuggestions(options);
          setValue("");
        }}
      />
      {!isSuggestionEmpty() && suggestions.length > 0 && (
        <ul
          className="bg-white border-blue-500 border-2 rounded hover:cursor-pointer absolute top-14 w-full z-20 max-h-64 overflow-y-auto"
          onPointerLeave={() => {
            inputRef?.current?.blur();
            setSuggestions([""]);
          }}
        >
          {suggestions.map((suggestion) => (
            <li
              key={suggestion}
              className="hover:bg-blue-500 hover:text-white transition duration-200 text-sm text-gray-700 p-1"
              onClick={() => onSuggestionClick(suggestion)}
            >
              {suggestion}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default AutoCompleteInput;

Reusable pagination component using hook

Joyce Prodipta Banerjee — Fri, 10 Mar 2023 18:48:33 +0000

Create a hook for pagination like this

import { useState } from "react";

export default function usePagination() {
    const [offset, setOffset] = useState(0);
    const [limit, setLimit] = useState(10);

    function changeOffset(offsetParam: number) {
        setOffset(offsetParam);
    }
    function changeLimit(limitParam: number) {
        setLimit(limitParam);
    }

This is the reusable pagination component UI,

type TypeProps = {
count: number;
changeOffset: (offset: number) => void;
offset: number;
limit: number;
};

const Pagination = (props: TypeProps) => {
const { count, changeOffset, offset, limit } = props;

let startingItemNumber = offset + 1;
let endingItemNumber = offset + limit > count ? count : offset + limit;

return (
<div>
  <p>Showing {startingItemNumber} to {endingItemNumber} of {count} entries
   </p>
   <button onClick={() => changeOffset(offset - limit)} disabled= 
     {offset === 0} >
    Prev
   </button>
   <button onClick={() => changeOffset(offset + limit)} 
      disabled={endingItemNumber === count}>
    Next
   </button>
</div>
  );
};

export default Pagination;

Use the pagination hook and the pagination component like this in your page


const List = () => {
const { limit, offset, changeOffset } = usePagination();
//_e.g. usage of the pagination hook _
const { data, isLoading } = useGetList(limit, offset);


return (
<>
//_Populate list_

 <Pagination
  //make sure count, offset and limit is Number type
  count={data.count}
  offset={data.offset}
  limit={data.limit}
  changeOffset={changeOffset}
 />
<>
)

export default List;

Validate file with ZOD

Joyce Prodipta Banerjee — Fri, 03 Mar 2023 09:33:12 +0000

Zod is a TypeScript-first schema validation library with static type inference. You can create validation schemas for either field-level validation or form-level validation1. Here’s an example of how you can use Zod for schema validation for a file:

// Max size is 5MB.
const MAX_FILE_SIZE = 5000000; 

function checkFileType(file: File) {
    if (file?.name) {
        const fileType = file.name.split(".").pop();
        if (fileType === "docx" || fileType === "pdf") return true;
    }
    return false;
}

export const fileSchema = z.object({
z.any()
.refine((file: File) => file?.length !== 0, "File is required")
.refine((file) => file.size < MAX_FILE_SIZE, "Max size is 5MB.")
.refine((file) => checkFileType(file), "Only .pdf, .docx formats are supported."),`
});