[Bug]: Preview page moves to the right

[StanGirard]

EPIC: #1232

What happened?

A bug happened!

Relevant log output

No response

Twitter / LinkedIn details

No response

[dosubot]

🤖

Hello,

Thank you for reporting this issue. I'm sorry to hear that you're experiencing a problem with the preview page in Quivr.

Unfortunately, I'm unable to view the image you've attached as I can't process images. However, I can certainly help you troubleshoot this issue.

Based on the information you've provided, it seems like the preview page is moving to the right. This could be due to a variety of reasons, such as a CSS styling issue, a JavaScript error, or a problem with the browser's rendering engine.

The code responsible for the preview page's positioning and movement in Quivr v0.0.94 is located in the VideoPlayer.tsx file. This code controls the behavior of the video element based on the page's scroll position, but it doesn't directly control the positioning of the preview page.

useEffect(() => {
  const videoElement = videoRef.current;

  const handleScroll = () => {
    if (!videoElement) {
      return;
    }

    const videoRect = videoElement.getBoundingClientRect();
    const isVideoVisible =
      videoRect.top >= 0 && videoRect.bottom <= window.innerHeight;

    if (isVideoVisible && videoElement.paused) {
      void videoElement.play();
    } else if (!isVideoVisible && !videoElement.paused) {
      videoElement.pause();
    }
  };

  window.addEventListener("scroll", handleScroll);

  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

To better understand the issue, could you please provide more details? Specifically, it would be helpful to know:

• The browser and version you're using
• The steps to reproduce the issue
• Any error messages you're seeing in the browser's console

This information will help us diagnose and fix the problem more effectively. Thank you for your patience and cooperation.

Best regards,
Dosu

Sources

• frontend/app/(home)/components/Sections/DemoSection/components/VideoPlayer.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[matthieujacq]

Indeed, the image should be cropped on the right: hiding the overflow on the container should do the job. I'm on it, it'll be done in the morning ;)