Add custom overlay for YouTube iframes (#620)

* Add custom overlay for YouTube iframes * Refactor embed cleaner in JS
jocmp · Dec 22, 2024 · 491fbdd · 491fbdd
1 parent b343b17
commit 491fbdd
Show file tree

Hide file tree

Showing 15 changed files with 321 additions and 13 deletions.
diff --git a/app/src/main/java/com/capyreader/app/ui/components/WebView.kt b/app/src/main/java/com/capyreader/app/ui/components/WebView.kt
@@ -159,6 +159,8 @@ class WebViewState(
 
         scope.launch {
             withContext(Dispatchers.IO) {
+
+
                 val html = renderer.render(
                     article,
                     hideImages = !showImages,

diff --git a/article_forge/Gemfile.lock b/article_forge/Gemfile.lock
@@ -109,6 +109,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-23
+  arm64-darwin-24
   x86_64-linux
 
 DEPENDENCIES

diff --git a/article_forge/articles.rb b/article_forge/articles.rb
@@ -95,3 +95,4 @@ def self.extracted_content
 require "./articles/one_pezeshk"
 require "./articles/secretclub"
 require "./articles/andreyor"
+require "./articles/androidauthority"
diff --git a/article_forge/articles/androidauthority.rb b/article_forge/articles/androidauthority.rb
@@ -0,0 +1,17 @@
+require "json"
+
+module Articles
+  class << self
+    def androidauthority
+      extracted = File.read("articles/fixtures/androidauthority.html")
+
+      Article.new(
+        title: "Samsung Galaxy S25 series rumors and leaks: Everything we know so far",
+        feed_name: "Android Authority",
+        external_link: "https://www.androidauthority.com/samsung-galaxy-s25-3437280/",
+        byline: nil,
+        body: extracted
+      )
+    end
+  end
+end
diff --git a/article_forge/articles/fixtures/androidauthority.html b/article_forge/articles/fixtures/androidauthority.html
diff --git a/article_forge/public/assets/media.js b/article_forge/public/assets/media.js
diff --git a/article_forge/public/assets/play-arrow.svg b/article_forge/public/assets/play-arrow.svg
diff --git a/article_forge/style/stylesheet.scss b/article_forge/style/stylesheet.scss
@@ -96,6 +96,39 @@ pre {
   padding: 1em;
 }
 
+.iframe-embed {
+  display: block;
+  position: relative;
+  width: 100%;
+  border: 0;
+  border-radius: var(--corner-radius);
+
+  .iframe-embed__image {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: var(--corner-radius);
+  }
+
+  .iframe-embed__play-button {
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(0.5em);
+    border-radius: 50%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    margin: auto;
+    width: 4rem;
+    height: 4em !important;
+    background-image: url("/assets/play-arrow.svg");
+    background-repeat: no-repeat;
+    background-size: 3em;
+    background-position: center;
+  }
+}
+
 img,
 figure,
 video,
@@ -110,7 +143,10 @@ iframe {
   max-width: 100%;
   margin: 0 auto;
 
-  &[src*="youtube-nocookie.com"], &[src*="youtube.com"] {
+  &[src*="youtube-nocookie.com"],
+  &[src*="youtube.com"],
+  &[src*="youtu.be"] {
+    background-color: #000000;
     width: 100%;
     aspect-ratio: 16 / 9;
     border: 0;

diff --git a/capy/src/main/assets/media.js b/capy/src/main/assets/media.js
diff --git a/capy/src/main/assets/play-arrow.svg b/capy/src/main/assets/play-arrow.svg
diff --git a/capy/src/main/assets/stylesheet.css b/capy/src/main/assets/stylesheet.css
diff --git a/capy/src/main/java/com/jocmp/capy/articles/ParseHTML.kt b/capy/src/main/java/com/jocmp/capy/articles/ParseHTML.kt
@@ -18,16 +18,19 @@ fun parseHtml(article: Article, document: Document, hideImages: Boolean): String
             extracted.id = "article-body-content"
             extracted.innerHTML = article.content;
 
+            let hasEmbed = cleanEmbeds(extracted);
+
             let shouldAddImage = article.lead_image_url &&
                 !hideImages &&
-                ![...extracted.querySelectorAll("img")].some(img => img.src.includes(article.lead_image_url));
+                !hasEmbed &&
+                ![...extracted.querySelectorAll("img")].some(img => img.src.includes(article.lead_image_url));            
 
             if (shouldAddImage) {
               let leadImage = document.createElement("img");
               leadImage.src = article.lead_image_url;
               extracted.prepend(leadImage);
             }
-
+            
             let content = document.getElementById("article-body-content");
             content.replaceWith(extracted);
           });