Part of #33603, Tech Debt - Combine Code For Embedded Video and Audio, Ruby Part

lib/banzai/filter/audio_link_filter.rb

@@ -3,63 +3,15 @@
 # Generated HTML is transformed back to GFM by app/assets/javascripts/behaviors/markdown/nodes/audio.js
 module Banzai
   module Filter
-    # Find every image that isn't already wrapped in an `a` tag, and that has
-    # a `src` attribute ending with an audio extension, add a new audio node and
-    # a "Download" link in the case the audio cannot be played.
-    class AudioLinkFilter < HTML::Pipeline::Filter
-      def call
-        doc.xpath('descendant-or-self::img[not(ancestor::a)]').each do |el|
-          el.replace(audio_node(doc, el)) if has_audio_extension?(el)
-        end
-
-        doc
-      end
-
+    class AudioLinkFilter < PlayableLinkFilter
       private
 
-      def has_audio_extension?(element)
-        src = element.attr('data-canonical-src').presence || element.attr('src')
-
-        return unless src.present?
-
-        src_ext = File.extname(src).sub('.', '').downcase
-        Gitlab::FileTypeDetection::SAFE_AUDIO_EXT.include?(src_ext)
+      def media_type
+        "audio"
       end
 
-      def audio_node(doc, element)
-        container = doc.document.create_element(
-          'div',
-          class: 'audio-container'
-        )
-
-        audio = doc.document.create_element(
-          'audio',
-          src: element['src'],
-          controls: true,
-          'data-setup' => '{}',
-          'data-title' => element['title'] || element['alt'])
-
-        link = doc.document.create_element(
-          'a',
-          element['title'] || element['alt'],
-          href: element['src'],
-          target: '_blank',
-          rel: 'noopener noreferrer',
-          title: "Download '#{element['title'] || element['alt']}'")
-
-        # make sure the original non-proxied src carries over
-        if element['data-canonical-src']
-          audio['data-canonical-src'] = element['data-canonical-src']
-          link['data-canonical-src']  = element['data-canonical-src']
-        end
-
-        download_paragraph = doc.document.create_element('p')
-        download_paragraph.children = link
-
-        container.add_child(audio)
-        container.add_child(download_paragraph)
-
-        container
+      def safe_media_ext
+        Gitlab::FileTypeDetection::SAFE_AUDIO_EXT
       end
     end
   end

lib/banzai/filter/playable_link_filter.rb

+# frozen_string_literal: true
+
+module Banzai
+  module Filter
+    # Find every image that isn't already wrapped in an `a` tag, and that has
+    # a `src` attribute ending with an audio or video extension, add a new audio or video node and
+    # a "Download" link in the case the media cannot be played.
+    class PlayableLinkFilter < HTML::Pipeline::Filter
+      def call
+        doc.xpath('descendant-or-self::img[not(ancestor::a)]').each do |el|
+          el.replace(media_node(doc, el)) if has_media_extension?(el)
+        end
+
+        doc
+      end
+
+      private
+
+      def media_type
+        raise NotImplementedError
+      end
+
+      def safe_media_ext
+        raise NotImplementedError
+      end
+
+      def extra_element_attrs
+        {}
+      end
+
+      def has_media_extension?(element)
+        src = element.attr('data-canonical-src').presence || element.attr('src')
+
+        return unless src.present?
+
+        src_ext = File.extname(src).sub('.', '').downcase
+        safe_media_ext.include?(src_ext)
+      end
+
+      def media_element(doc, element)
+        media_element_attrs = {
+            src: element['src'],
+            controls: true,
+            'data-setup': '{}',
+            'data-title': element['title'] || element['alt']
+        }.merge!(extra_element_attrs)
+
+        if element['data-canonical-src']
+          media_element_attrs['data-canonical-src'] = element['data-canonical-src']
+        end
+
+        doc.document.create_element(media_type, media_element_attrs)
+      end
+
+      def download_paragraph(doc, element)
+        link_content = element['title'] || element['alt']
+
+        link_element_attrs = {
+          href: element['src'],
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          title: "Download '#{link_content}'"
+        }
+
+        # make sure the original non-proxied src carries over
+        if element['data-canonical-src']
+          link_element_attrs['data-canonical-src'] = element['data-canonical-src']
+        end
+
+        link = doc.document.create_element('a', link_content, link_element_attrs)
+
+        doc.document.create_element('p').tap do |paragraph|
+          paragraph.children = link
+        end
+      end
+
+      def media_node(doc, element)
+        container_element_attrs = { class: "#{media_type}-container" }
+
+        doc.document.create_element( "div", container_element_attrs).tap do |container|
+          container.add_child(media_element(doc, element))
+          container.add_child(download_paragraph(doc, element))
+        end
+      end
+    end
+  end
+end

lib/banzai/filter/video_link_filter.rb

@@ -3,64 +3,19 @@
 # Generated HTML is transformed back to GFM by app/assets/javascripts/behaviors/markdown/nodes/video.js
 module Banzai
   module Filter
-    # Find every image that isn't already wrapped in an `a` tag, and that has
-    # a `src` attribute ending with a video extension, add a new video node and
-    # a "Download" link in the case the video cannot be played.
-    class VideoLinkFilter < HTML::Pipeline::Filter
-      def call
-        doc.xpath('descendant-or-self::img[not(ancestor::a)]').each do |el|
-          el.replace(video_node(doc, el)) if has_video_extension?(el)
-        end
-
-        doc
-      end
-
+    class VideoLinkFilter < PlayableLinkFilter
       private
 
-      def has_video_extension?(element)
-        src = element.attr('data-canonical-src').presence || element.attr('src')
-
-        return unless src.present?
-
-        src_ext = File.extname(src).sub('.', '').downcase
-        Gitlab::FileTypeDetection::SAFE_VIDEO_EXT.include?(src_ext)
+      def media_type
+        "video"
       end
 
-      def video_node(doc, element)
-        container = doc.document.create_element(
-          'div',
-          class: 'video-container'
-        )
-
-        video = doc.document.create_element(
-          'video',
-          src: element['src'],
-          width: '100%',
-          controls: true,
-          'data-setup' => '{}',
-          'data-title' => element['title'] || element['alt'])
-
-        link = doc.document.create_element(
-          'a',
-          element['title'] || element['alt'],
-          href: element['src'],
-          target: '_blank',
-          rel: 'noopener noreferrer',
-          title: "Download '#{element['title'] || element['alt']}'")
-
-        # make sure the original non-proxied src carries over
-        if element['data-canonical-src']
-          video['data-canonical-src'] = element['data-canonical-src']
-          link['data-canonical-src']  = element['data-canonical-src']
+      def safe_media_ext
+        Gitlab::FileTypeDetection::SAFE_VIDEO_EXT
       end
 
-        download_paragraph = doc.document.create_element('p')
-        download_paragraph.children = link
-
-        container.add_child(video)
-        container.add_child(download_paragraph)
-
-        container
+      def extra_element_attrs
+        { width: "100%" }
       end
     end
   end

spec/lib/banzai/filter/video_link_filter_spec.rb

@@ -32,6 +32,7 @@ describe Banzai::Filter::VideoLinkFilter do
 
       expect(video.name).to eq 'video'
       expect(video['src']).to eq src
+      expect(video['width']).to eq "100%"
 
       expect(paragraph.name).to eq 'p'