VFX2/script.js

// Define a debug mode variable
let debugMode = true;

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

const videos = [createVideoElement(), createVideoElement()];
let videosLoaded = 0;
let aspectRatio = 1;

window.addEventListener("DOMContentLoaded", () => {
  let previousVideo
  videos.forEach((video) => {
    previousVideo = selectRandomVideo(previousVideo || video)
  });
})

videos.forEach((video) => {
  video.addEventListener("loadedmetadata", handleVideoLoaded);
  video.addEventListener("ended", handleVideoEnded);
});

function createVideoElement() {
  const video = document.createElement("video");
  video.autoplay = true;
  video.muted = true;
  return video;
}

function handleVideoLoaded() {
  videosLoaded++;
  if (videosLoaded === videos.length) {
    updateCanvasSize();
    drawVideos();
  }
}

function handleVideoEnded(event) {
  const video = event.target;
  selectRandomVideo(video);
}

function drawVideos() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Calculate scaling factors for each video to fit the canvas
  const scale1 = Math.max(canvas.width / videos[0].videoWidth, canvas.height / videos[0].videoHeight);
  const scale2 = Math.max(canvas.width / videos[1].videoWidth, canvas.height / videos[1].videoHeight);

  // Calculate scaled dimensions for each video
  const scaledWidth1 = videos[0].videoWidth * scale1;
  const scaledHeight1 = videos[0].videoHeight * scale1;
  const scaledWidth2 = videos[1].videoWidth * scale2;
  const scaledHeight2 = videos[1].videoHeight * scale2;

  // Calculate horizontal and vertical centering offsets for each video
  const offsetX1 = (canvas.width - scaledWidth1) / 2;
  const offsetY1 = (canvas.height - scaledHeight1) / 2;
  const offsetX2 = (canvas.width - scaledWidth2) / 2;
  const offsetY2 = (canvas.height - scaledHeight2) / 2;

  // Draw video 1
  ctx.drawImage(videos[0], offsetX1, offsetY1, scaledWidth1, scaledHeight1);

  // Set composite operation to overlay
  ctx.globalCompositeOperation = "overlay";

  // Draw video 2
  ctx.drawImage(videos[1], offsetX2, offsetY2, scaledWidth2, scaledHeight2);

  // Reset composite operation
  ctx.globalCompositeOperation = "source-over";

  // If debugMode is true, draw debug text
  if (debugMode) {
    drawDebugText();
  }

  // Request next frame
  requestAnimationFrame(drawVideos);
}

// Function to draw debug text on the canvas
function drawDebugText() {
  // Set font style and color
  ctx.font = "16px Arial";
  ctx.fillStyle = "white";

  let colors = ["blue","red","yellow","green","white","pink","purple"]
  let corners = [[0,0],[1,1],[0,1],[1,0]];
  let padding = 20;

  videos.forEach((video,i) => {
    //console.log("Drawing debug text for video",i,video);

    let corner = corners[i];
    let positionX = corner[0] === 0 ? padding : canvas.width - padding;
    let positionY = corner[1] === 0 ? padding : canvas.height - padding;

    // Adjust position for bottom right corner to stay within canvas bounds
    if (corner[0] === 1 && positionY + 40 > canvas.height) {
      positionY = canvas.height - 40;
    }

    // Set text alignment based on corner
    ctx.textAlign = corner[0] === 0 ? "left" : "right";
    ctx.textBaseline = corner[1] === 0 ? "top" : "bottom";

    // Draw debug text for the video
    ctx.fillText(getFilename(video.src), positionX, positionY);
    ctx.fillText("Dimensions: " + video.videoWidth + "x" + video.videoHeight, positionX, positionY + 20);
    ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40);
    // Add more debug information as needed

    // Draw wireframes
    ctx.strokeStyle = colors[i % colors.length];
    ctx.lineWidth = 2;
    console.log(ctx,video)
    //ctx.strokeRect(offsetX2-1, offsetY2-1, scaledWidth2+1, scaledHeight2+1);
  });
}

// Function to extract filename from full path
function getFilename(src) {
  const parts = src.split('/');
  return decodeURIComponent(parts[parts.length - 1].replace(/\%20/g, ' '));
}

// Helper function to format time in HH:MM:SS format
function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}

function updateCanvasSize() {
  aspectRatio = Math.max(
    videos[0].videoWidth / videos[0].videoHeight,
    videos[1].videoWidth / videos[1].videoHeight
  );

  canvas.width = window.innerWidth;
  canvas.height = window.innerWidth / aspectRatio;
}

window.addEventListener("resize", updateCanvasSize);

updateCanvasSize()

function selectRandomVideo(videoElement) {
  console.log("selectRandomVideo",videoElement)
  fetch("/api/videos")
    .then((response) => response.json())
    .then((videoFiles) => {
      const otherVideo = videos.find((video) => video !== videoElement);

      let randomVideo;
      do {
        const randomIndex = Math.floor(Math.random() * videoFiles.length);
        randomVideo = videoFiles[randomIndex];
      } while (randomVideo === otherVideo);

      videoElement.src = randomVideo.src;
      videoElement.play();
      return videoElement
    });
}

document.addEventListener('keydown', function(event) {
    // Check if the pressed key is the one you want to bind
    if (event.key === 'Enter') { // Change 'Enter' to the desired key
        debugMode = !debugMode
        console.log("debugMode:",debugMode)
    }
});