From 9b7d297027efea0ab7f36b4593d03e637e031f6e Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 30 Jan 2025 16:47:42 -0600
Subject: [PATCH] Add rudimentary support for embedding videos

---
 app/assets/stylesheets/base.css     |  4 ++++
 config/initializers/sanitization.rb |  4 ++--
 lib/markdown_renderer.rb            | 14 ++++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 8aead104f..2f2005d39 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -75,6 +75,10 @@ a:not([class]) {
   list-style: none;
 }
 
+video {
+  max-inline-size: 100%;
+}
+
 /* Printing */
 @page {
   margin: 1in;
diff --git a/config/initializers/sanitization.rb b/config/initializers/sanitization.rb
index a4e712142..5362f0100 100644
--- a/config/initializers/sanitization.rb
+++ b/config/initializers/sanitization.rb
@@ -1,4 +1,4 @@
 Rails.application.config.after_initialize do
-  Rails::HTML5::SafeListSanitizer.allowed_tags.merge(%w[ s table tr td th thead tbody details summary ])
-  Rails::HTML5::SafeListSanitizer.allowed_attributes.merge(%w[ data-turbo-frame ])
+  Rails::HTML5::SafeListSanitizer.allowed_tags.merge(%w[ s table tr td th thead tbody details summary video source])
+  Rails::HTML5::SafeListSanitizer.allowed_attributes.merge(%w[ data-turbo-frame controls type width ])
 end
diff --git a/lib/markdown_renderer.rb b/lib/markdown_renderer.rb
index df9070bd5..e3265ffd4 100644
--- a/lib/markdown_renderer.rb
+++ b/lib/markdown_renderer.rb
@@ -37,6 +37,8 @@ class MarkdownRenderer < Redcarpet::Render::HTML
   end
 
   def link(url, title, content)
+    return video_tag(url, title) if video_url?(url)
+
     attributes = { href: url }
     attributes[:title] = title if title
     attributes["data-turbo-frame"] = "_top"
@@ -64,4 +66,16 @@ class MarkdownRenderer < Redcarpet::Render::HTML
         id_counts[base_id] > 1 ? "#{base_id}-#{id_counts[base_id]}" : base_id
       end
     end
+
+    def video_url?(url)
+      File.extname(url).downcase.match?(/\.(mp4|webm|ogg)/)
+    end
+
+    def video_tag(url, title)
+      <<~HTML.chomp
+        <video controls title="#{title}" width="1024">
+          <source src="#{url}" type="video/#{File.extname(url).delete('.')}">
+        </video>
+      HTML
+    end
 end