From 025919edc61bce2c3ec4252df5a88d6151b49aaa Mon Sep 17 00:00:00 2001
From: Tomas Valenta <valenta.and.thomas@gmail.com>
Date: Thu, 28 Jul 2022 17:11:26 +0000
Subject: [PATCH] Fix modal position when resizing browser window

---
 .../VideoPlayer/VideoModal/index.tsx          | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/theme/CodeBlock/VideoPlayer/VideoModal/index.tsx b/src/theme/CodeBlock/VideoPlayer/VideoModal/index.tsx
index 2afe436..d19dd53 100644
--- a/src/theme/CodeBlock/VideoPlayer/VideoModal/index.tsx
+++ b/src/theme/CodeBlock/VideoPlayer/VideoModal/index.tsx
@@ -2,6 +2,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
+  useLayoutEffect,
   useState,
 } from 'react'
 import Draggable, {
@@ -56,6 +57,26 @@ function VideoModal({
     onTimeChange,
   ])
 
+  useLayoutEffect(() => {
+    if (!draggableContainerRef.current) return
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry) return
+      if (!entry.isIntersecting) {
+        changePosition({ x: 0, y: 0 })
+      }
+    })
+
+    observer.observe(draggableContainerRef.current)
+    return () => {
+      observer.disconnect()
+    }
+  }, [
+    position,
+    changePosition,
+    draggableContainerRef,
+  ])
+
   const stopDragging = useCallback<DraggableEventHandler>((_, data) => {
     setIsDragged(false)