From cc945eb6c9398231a0a0ae26d39c1f991165c811 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 26 Mar 2024 14:49:27 +0800
Subject: [PATCH] Add a placeholder for the youtube iframe so when it is
 scrolled away the document height does not change

This fixes an issue with scrolling kind of jumping on devices when
the youtube video is moved to the sticky position.
---
 .../web/components/templates/article/Article.tsx | 16 ++++++++++++++--
 packages/web/styles/articleInnerStyling.css      |  8 +++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 91ef82161..d8b2de3d5 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -119,12 +119,24 @@ export function Article(props: ArticleProps): JSX.Element {
     const youtubePlayer = document.getElementById('_omnivore_youtube_video')
 
     const updateScroll = () => {
-      console.log('scroll y: ', window.scrollY, youtubePlayer)
+      const YOUTUBE_PLACEHOLDER_ID = 'omnivore-youtube-placeholder'
+      const youtubePlaceholder = document.getElementById(YOUTUBE_PLACEHOLDER_ID)
 
       if (youtubePlayer) {
-        if (window.scrollY > 200) {
+        if (window.scrollY > 400) {
+          if (!youtubePlaceholder) {
+            var rect = youtubePlayer.getBoundingClientRect()
+            var placeholder = document.createElement('div')
+            placeholder.setAttribute('id', YOUTUBE_PLACEHOLDER_ID)
+            placeholder.style.width = rect.width + 'px'
+            placeholder.style.height = rect.height + 'px'
+            youtubePlayer.parentNode?.insertBefore(placeholder, youtubePlayer)
+          }
           youtubePlayer.classList.add('is-sticky')
         } else {
+          if (youtubePlaceholder) {
+            youtubePlayer.parentNode?.removeChild(youtubePlaceholder)
+          }
           youtubePlayer.classList.remove('is-sticky')
         }
       }
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index 3550d0e82..dcd048cd3 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -664,4 +664,10 @@
       -webkit-transform: none;
       transform: none;
   }
-}
\ No newline at end of file
+}
+
+.youtubeplaceholder {
+  border: 2px dashed #aaa;
+  box-sizing: border-box;
+}
+