feat: add embed for wistia (#11547)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

lib/custom_markdown_renderer.rb

@@ -6,6 +6,7 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
   VIMEO_REGEX = %r{https?://(?:www\.)?vimeo\.com/(\d+)}
   MP4_REGEX = %r{https?://(?:www\.)?.+\.(mp4)}
   ARCADE_REGEX = %r{https?://(?:www\.)?app\.arcade\.software/share/([^&/]+)}
+  WISTIA_REGEX = %r{https?://(?:www\.)?([^/]+)\.wistia\.com/medias/([^&/]+)}
 
   def text(node)
     content = node.string_content
@@ -50,7 +51,8 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
       VIMEO_REGEX => :make_vimeo_embed,
       MP4_REGEX => :make_video_embed,
       LOOM_REGEX => :make_loom_embed,
-      ARCADE_REGEX => :make_arcade_embed
+      ARCADE_REGEX => :make_arcade_embed,
+      WISTIA_REGEX => :make_wistia_embed
     }
 
     embedding_methods.each do |regex, method|
@@ -76,67 +78,30 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
 
   def make_youtube_embed(youtube_match)
     video_id = youtube_match[1]
-    %(
+    EmbedRenderer.youtube(video_id)
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-       <iframe
-        src="https://www.youtube-nocookie.com/embed/#{video_id}"
-        frameborder="0"
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen></iframe>
-      </div>
-    )
   end
 
   def make_loom_embed(loom_match)
     video_id = loom_match[1]
-    %(
+    EmbedRenderer.loom(video_id)
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-        <iframe
-         src="https://www.loom.com/embed/#{video_id}"
-         frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
-         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
-      </div>
-    )
   end
 
   def make_vimeo_embed(vimeo_match)
     video_id = vimeo_match[1]
-    %(
+    EmbedRenderer.vimeo(video_id)
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-       <iframe
-        src="https://player.vimeo.com/video/#{video_id}?dnt=true"
-        frameborder="0"
-        allow="autoplay; fullscreen; picture-in-picture"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
-       </div>
-    )
   end
 
   def make_video_embed(link_url)
-    %(
+    EmbedRenderer.video(link_url)
-      <video width="640" height="360" controls>
+  end
-        <source src="#{link_url}" type="video/mp4">
+
-        Your browser does not support the video tag.
+  def make_wistia_embed(wistia_match)
-      </video>
+    video_id = wistia_match[2]
-    )
+    EmbedRenderer.wistia(video_id)
   end
 
   def make_arcade_embed(arcade_match)
     video_id = arcade_match[1]
-    %(
+    EmbedRenderer.arcade(video_id)
-    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-      <iframe
-        src="https://app.arcade.software/embed/#{video_id}"
-        frameborder="0"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen
-        allow="fullscreen"
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-      </iframe>
-    </div>
-  )
   end
 end

lib/embed_renderer.rb

@@ -0,0 +1,87 @@
+module EmbedRenderer
+  def self.youtube(video_id)
+    %(
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+       <iframe
+        src="https://www.youtube-nocookie.com/embed/#{video_id}"
+        frameborder="0"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen></iframe>
+      </div>
+    )
+  end
+
+  def self.loom(video_id)
+    %(
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+        <iframe
+         src="https://www.loom.com/embed/#{video_id}"
+         frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
+         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+      </div>
+    )
+  end
+
+  def self.vimeo(video_id)
+    %(
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+       <iframe
+        src="https://player.vimeo.com/video/#{video_id}?dnt=true"
+        frameborder="0"
+        allow="autoplay; fullscreen; picture-in-picture"
+        allowfullscreen
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+       </div>
+    )
+  end
+
+  def self.video(link_url)
+    %(
+      <video width="640" height="360" controls>
+        <source src="#{link_url}" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
+    )
+  end
+
+  # Generates an HTML embed for a Wistia video.
+  # @param wistia_match [MatchData] A match object from the WISTIA_REGEX regex, where wistia_match[2] contains the video ID.
+  def self.wistia(video_id)
+    %(
+      <div style="position: relative; padding-bottom: 56.25%; height: 0;">
+        <script src="https://fast.wistia.com/player.js" async></script>
+        <script src="https://fast.wistia.com/embed/#{video_id}.js" async type="module"></script>
+        <style>
+          wistia-player[media-id='#{video_id}']:not(:defined) {
+            background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/#{video_id}/swatch');
+            display: block;
+            filter: blur(5px);
+            padding-top:56.25%;
+          }
+        </style>
+        <wistia-player
+          media-id="#{video_id}"
+          aspect="1.7777777777777777"
+          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+        </wistia-player>
+      </div>
+    )
+  end
+
+  def self.arcade(video_id)
+    %(
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+        src="https://app.arcade.software/embed/#{video_id}"
+        frameborder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen
+        allow="fullscreen"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </iframe>
+    </div>
+  )
+  end
+end

spec/lib/custom_markdown_renderer_spec.rb

@@ -143,6 +143,17 @@ describe CustomMarkdownRenderer do
       end
     end
 
+    context 'when link is a wistia URL' do
+      let(:wistia_url) { 'https://chatwoot.wistia.com/medias/kjwjeq6f9i' }
+
+      it 'renders a custom element with Wistia embed code' do
+        output = render_markdown_link(wistia_url)
+        expect(output).to include('<script src="https://fast.wistia.com/player.js" async></script>')
+        expect(output).to include('<wistia-player')
+        expect(output).to include('media-id="kjwjeq6f9i"')
+      end
+    end
+
     context 'when multiple links including Arcade are present' do
       it 'renders Arcade embed along with other content types' do
         markdown = "\n[arcade](https://app.arcade.software/share/ARCADE_ID)\n\n[youtube](https://www.youtube.com/watch?v=VIDEO_ID)\n"