Merge pull request #3730 from omnivore-app/fix/web-youtube-placeholder

Add a placeholder for the youtube iframe so when it is scrolled away the document height does not change

apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContent.swift

@@ -61,8 +61,8 @@ struct WebReaderContent {
               -webkit-text-size-adjust: 100%;
             }
             .is-sticky {
-              right: 15px !important;
-              bottom: 40px !important;
+              right: 20px !important;
+              bottom: 60px !important;
             }
           </style>
       </head>

apple/OmnivoreKit/Sources/Services/DataService/Mutations/DeleteRule.swift

@@ -0,0 +1,46 @@
+import CoreData
+import Foundation
+import Models
+import SwiftGraphQL
+
+public extension DataService {
+  func deleteRule(ruleID: String) async throws -> Rule {
+    enum MutationResult {
+      case result(rule: Rule)
+      case error(errorMessage: String)
+    }
+
+    let selection = Selection<MutationResult, Unions.DeleteRuleResult> {
+      try $0.on(
+        deleteRuleError: .init { .error(errorMessage: try $0.errorCodes().first?.rawValue ?? "Unknown Error") },
+        deleteRuleSuccess: .init { .result(rule: try $0.rule(selection: ruleSelection)) }
+      )
+    }
+
+    let mutation = Selection.Mutation {
+      try $0.deleteRule(
+        id: ruleID,
+        selection: selection
+      )
+    }
+
+    let path = appEnvironment.graphqlPath
+    let headers = networker.defaultHeaders
+
+    return try await withCheckedThrowingContinuation { continuation in
+      send(mutation, to: path, headers: headers) { queryResult in
+        guard let payload = try? queryResult.get() else {
+          continuation.resume(throwing: BasicError.message(messageText: "network error"))
+          return
+        }
+
+        switch payload.data {
+        case let .result(rule: rule):
+          continuation.resume(returning: rule)
+        case let .error(errorMessage: errorMessage):
+          continuation.resume(throwing: BasicError.message(messageText: errorMessage))
+        }
+      }
+    }
+  }
+}

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) {
+            const rect = youtubePlayer.getBoundingClientRect()
+            const 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')
         }
       }

packages/web/styles/articleInnerStyling.css

@@ -664,4 +664,10 @@
       -webkit-transform: none;
       transform: none;
   }
-}
+}
+
+.youtubeplaceholder {
+  border: 2px dashed #aaa;
+  box-sizing: border-box;
+}
+