Video Platform Audio Track And Language Localization Text Translator

function processImage(
  originalImg,
  localizationText = "Translated downloaded localization text.",
  languageDub = "English Dub",
  showDVDRipPlayer = 1,
  subtitleFontSize = 32,
  subtitleColor = "#ffffff"
) {
  // Create a canvas with the original image's dimensions
  const canvas = document.createElement("canvas");
  const width = originalImg.width;
  const height = originalImg.height;
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext("2d");

  // Draw the original video frame/image
  ctx.drawImage(originalImg, 0, 0);

  // Configuration for Video Player UI (Simulating a DVDRip / Web Player)
  let bottomOffset = 30; // Default margin from bottom when no UI is drawn

  if (Number(showDVDRipPlayer) === 1) {
    const uiHeight = Math.max(60, height * 0.08); // Scale UI based on height
    const uiY = height - uiHeight;
    bottomOffset = uiHeight + 20;

    // Draw the dark semi-transparent player control bar at the bottom
    ctx.fillStyle = "rgba(15, 15, 15, 0.85)";
    ctx.fillRect(0, uiY, width, uiHeight);

    // Draw video progress bar
    const progressY = uiY;
    const progressHeight = 5;
    ctx.fillStyle = "#FF0000"; // Red progress buffer (YouTube style)
    ctx.fillRect(0, progressY, width * 0.45, progressHeight);
    ctx.fillStyle = "rgba(255, 255, 255, 0.2)"; // Remaining track
    ctx.fillRect(width * 0.45, progressY, width * 0.55, progressHeight);
    
    // Draw playhead circle
    ctx.beginPath();
    ctx.arc(width * 0.45, progressY + progressHeight / 2, 6, 0, 2 * Math.PI);
    ctx.fillStyle = "#FF0000";
    ctx.fill();

    // Draw Play button icon
    ctx.fillStyle = "#FFFFFF";
    const playSize = uiHeight * 0.25;
    ctx.beginPath();
    ctx.moveTo(30, uiY + uiHeight / 2 - playSize);
    ctx.lineTo(30, uiY + uiHeight / 2 + playSize);
    ctx.lineTo(30 + playSize * 1.5, uiY + uiHeight / 2);
    ctx.fill();

    // Draw fake time elapsed text
    ctx.font = "14px Arial, sans-serif";
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.fillText("45:12 / 1:30:00", 30 + playSize * 2 + 10, uiY + uiHeight / 2);

    // Draw Audio Track / Language Dub label on the right
    ctx.textAlign = "right";
    ctx.fillText(`Audio Track: ${languageDub}`, width - 30, uiY + uiHeight / 2);
  }

  // Draw the Localization / Subtitle overlay text
  const fontSize = Number(subtitleFontSize);
  ctx.textAlign = "center";
  ctx.textBaseline = "bottom";
  ctx.font = `bold ${fontSize}px Arial, Helvetica, sans-serif`;

  const renderText = `[${languageDub}] ${localizationText}`;
  const textMetrics = ctx.measureText(renderText);
  
  // Create a subtle black background box for the subtitle for better readability
  const paddingX = fontSize * 0.6;
  const paddingY = fontSize * 0.4;
  const bgWidth = textMetrics.width + paddingX * 2;
  const bgHeight = fontSize + paddingY;
  const bgX = width / 2 - bgWidth / 2;
  
  // y position: Start from the bottom minus the offset (Player UI or margin) minus the height of the background box
  const subBottom = height - bottomOffset;
  const bgY = subBottom - bgHeight;

  ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
  ctx.fillRect(bgX, bgY + paddingY * 0.5, bgWidth, bgHeight);

  // Add text drop shadow for the "DVDRip" subtitle feel
  ctx.shadowColor = "#000000";
  ctx.shadowBlur = 4;
  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  
  // Render the translated text
  ctx.fillStyle = subtitleColor;
  ctx.fillText(renderText, width / 2, subBottom);
  
  // Clear shadow before returning safely
  ctx.shadowColor = "transparent";

  // Return generated canvas
  return canvas;
}