Embed youtube videos in bookmarks

Gemfile.lock

@@ -24,7 +24,7 @@ GIT
 
 GIT
   remote: https://github.com/hanami/assets.git
-  revision: 87ed48be7327c627bc2bcd73f8cf53afd3d680cf
+  revision: 1683c758e74c4d2c1ea9bc074d5acda07af0a9a3
   branch: main
   specs:
     hanami-assets (2.1.0.beta2)
@@ -32,7 +32,7 @@ GIT
 
 GIT
   remote: https://github.com/hanami/controller.git
-  revision: 1f31d7f9c92573c06526a69816c9c9dcd55f393f
+  revision: c406d35695a5ab2c6393d7ae47015002eb7cf2c2
   branch: main
   specs:
     hanami-controller (2.1.0.beta2)
@@ -44,10 +44,10 @@ GIT
 
 GIT
   remote: https://github.com/hanami/hanami.git
-  revision: 965aa5aeb25b0a16b9c519866f14b4fa916d290a
+  revision: 79e81b5ca3b126d87b2dc29df03fd3739f2f8e48
   branch: main
   specs:
-    hanami (2.1.0.beta2)
+    hanami (2.1.0.beta2.1)
       bundler (>= 1.16, < 3)
       dry-configurable (~> 1.0, < 2)
       dry-core (~> 1.0, < 2)
@@ -80,7 +80,7 @@ GIT
 
 GIT
   remote: https://github.com/hanami/view.git
-  revision: 15da1b1e68b6121a70b0e8da85156997221ae4f2
+  revision: cc8220ff65711b83a9ca89074fe7b3d209b4f15a
   branch: main
   specs:
     hanami-view (2.1.0.beta2)
@@ -89,7 +89,7 @@ GIT
       dry-core (~> 1.0)
       dry-inflector (~> 1.0, < 2)
       temple (~> 0.10.0, >= 0.10.2)
-      tilt (~> 2.0, >= 2.0.6)
+      tilt (~> 2.3)
       zeitwerk (~> 2.6)
 
 GIT
@@ -104,10 +104,15 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (7.0.8)
+    activesupport (7.1.1)
+      base64
+      bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
+      connection_pool (>= 2.2.5)
+      drb
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
+      mutex_m
       tzinfo (~> 2.0)
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
@@ -118,7 +123,7 @@ GEM
     base64 (0.1.1)
     bigdecimal (3.1.4)
     builder (3.2.4)
-    capistrano (3.17.3)
+    capistrano (3.18.0)
       airbrussh (>= 1.0.0)
       i18n
       rake (>= 10.0.0)
@@ -145,6 +150,8 @@ GEM
     dotenv (2.8.1)
     down (5.4.1)
       addressable (~> 2.8)
+    drb (2.1.1)
+      ruby2_keywords
     dry-auto_inject (1.0.1)
       dry-core (~> 1.0)
       zeitwerk (~> 2.6)
@@ -158,7 +165,7 @@ GEM
     dry-events (1.0.1)
       concurrent-ruby (~> 1.0)
       dry-core (~> 1.0, < 2)
-    dry-files (1.0.2)
+    dry-files (1.1.0)
     dry-inflector (1.0.0)
     dry-initializer (3.1.1)
     dry-logger (1.0.3)
@@ -311,8 +318,9 @@ GEM
     mustermann-contrib (3.0.0)
       hansi (~> 0.2.0)
       mustermann (= 3.0.0)
+    mutex_m (0.1.2)
     nenv (0.3.0)
-    net-imap (0.3.7)
+    net-imap (0.4.2)
       date
       net-protocol
     net-pop (0.1.2)
@@ -340,7 +348,7 @@ GEM
       activesupport
       httparty
     parallel (1.23.0)
-    parser (3.2.2.3)
+    parser (3.2.2.4)
       ast (~> 2.4.1)
       racc
     pg (1.5.4)
@@ -350,18 +358,18 @@ GEM
     public_suffix (5.0.3)
     puma (6.4.0)
       nio4r (~> 2.0)
-    que (2.2.1)
+    que (2.3.0)
     racc (1.7.1)
     rack (2.2.8)
     rack-test (2.1.0)
       rack (>= 1.3)
     rainbow (3.1.1)
-    rake (13.0.6)
+    rake (13.1.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     redcarpet (3.6.0)
-    regexp_parser (2.8.1)
+    regexp_parser (2.8.2)
     rest-client (2.1.0)
       http-accept (>= 1.7.0, < 2.0)
       http-cookie (>= 1.0.2, < 2.0)
@@ -427,7 +435,7 @@ GEM
       rubocop-ast (>= 1.28.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.29.0)
+    rubocop-ast (1.30.0)
       parser (>= 3.2.1.0)
     rubocop-performance (1.19.1)
       rubocop (>= 1.7.0, < 2.0)
@@ -436,13 +444,13 @@ GEM
     ruby-readability (0.7.0)
       guess_html_encoding (>= 0.0.4)
       nokogiri (>= 1.6.0)
-    ruby-vips (2.1.4)
+    ruby-vips (2.2.0)
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     sanitize (6.1.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    sentry-ruby (5.11.0)
+    sentry-ruby (5.12.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
     sequel (5.73.0)
       bigdecimal
@@ -454,22 +462,22 @@ GEM
     sshkit (1.21.5)
       net-scp (>= 1.1.2)
       net-ssh (>= 2.8.0)
-    standard (1.31.1)
+    standard (1.31.2)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.0)
-      rubocop (~> 1.56.2)
+      rubocop (~> 1.56.4)
       standard-custom (~> 1.0.0)
       standard-performance (~> 1.2)
     standard-custom (1.0.2)
       lint_roller (~> 1.0)
       rubocop (~> 1.50)
-    standard-performance (1.2.0)
+    standard-performance (1.2.1)
       lint_roller (~> 1.1)
-      rubocop-performance (~> 1.19.0)
+      rubocop-performance (~> 1.19.1)
     standardrb (1.0.1)
       standard
     temple (0.10.3)
-    thor (1.2.2)
+    thor (1.3.0)
     tilt (2.3.0)
     time_math2 (0.1.1)
     timecop (0.9.8)

app/assets/index.css

@@ -80,3 +80,17 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     content: "";
     padding: 0 0.25rem 0 0;
 }
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+}
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+}

app/decorators/bookmarks/decorator.rb

@@ -30,6 +30,16 @@ module Adamantium
             }
           end
         end
+
+        def youtube_embed
+          pattern = /watch[?]v=(\w*)/i
+          code = url.scan(pattern).flatten.first
+          if code
+            "<div class='video-container'><iframe width='100%' src='https://www.youtube.com/embed/#{code}' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe></div>"
+          else
+            nil
+          end
+        end
       end
     end
   end

app/templates/bookmarks/show.html.slim

@@ -8,6 +8,9 @@ div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:
     p class="text-xl text-ellipsis overflow-hidden"
       = bookmark.url
 
+  div class="mb-6"
+    == bookmark.youtube_embed
+
   == bookmark.content
 
   - unless bookmark.cached_content.nil?

app/templates/shared/_bookmark.html.slim

@@ -10,6 +10,9 @@ div class="mb-4"
         == render("link_arrow")
   p class="e-content leading-relaxed md:text-lg text-gray-800 dark:text-gray-200"
     = bookmark.content
+
+  == bookmark.youtube_embed
+
   == render "shared/tags", tags: bookmark.tags
 
   p class="text-sm text-blue-400 mb-4"

public/assets/asset-manifest.json

@@ -1 +1 @@
-{"gallery.js":{"url":"/assets/dist/gallery-Dx6rqU02XQJl.js"},"index.js":{"url":"/assets/dist/index-Dx6rqU02XQJl.js"},"index.css":{"url":"/assets/dist/index-Dx6rqU02XQJl.css"}}
+{"gallery.js":{"url":"/assets/dist/gallery-5WqBAKWmcCAg.js"},"index.js":{"url":"/assets/dist/index-5WqBAKWmcCAg.js"},"index.css":{"url":"/assets/dist/index-5WqBAKWmcCAg.css"}}