Vidéos Instagram

app/javascript/apps/blocks-editor/components/Blocks.vue

@@ -48,6 +48,20 @@ export default {
         if (!confirm(this.$t('blocksEditor.confirm.duplication'))) return;
         this.$emit('duplicate', block);
       },
+      loadSnippetScripts(event) {
+        // Script elements are note executed when loaded in v-html.
+        // We replace them with same content here to force the load (protected by CSP)
+        var snippetElement = event.el,
+            scriptElements = snippetElement.querySelectorAll('script');
+
+        scriptElements.forEach(script => {
+          const executableScript = document.createElement('script');
+          Array.from(script.attributes).forEach(attribute => {
+            executableScript.setAttribute(attribute.name, attribute.value);
+          });
+          script.replaceWith(executableScript);
+        });
+      },
     }
 };
 </script>
@@ -102,7 +116,7 @@ export default {
                     @click="onDuplicate($event, block)">
                     {{ $t('blocksEditor.actions.duplicate') }}</a>
                 </span>
-                <a 
+                <a
                   href="#"
                   class="action ms-2"
                   @click="onEdit($event, block)">
@@ -111,7 +125,9 @@ export default {
               <div
                 class="vue__blocks-editor__elements__preview"
                 :class="`vue__blocks-editor__elements__preview--${block.template.kind}`">
-                <div v-html="block.snippet"></div>
+                <div
+                  v-html="block.snippet"
+                  @vue:mounted="loadSnippetScripts"></div>
               </div>
               <span v-html="block.a11y.status"></span>
             </div>
@@ -120,4 +136,4 @@ export default {
       </div>
     </draggable>
   </section>
-</template>
+</template>

app/models/communication/block/template/video.rb

@@ -41,6 +41,10 @@ def video_embed_with_defaults
     video_provider.embed_with_defaults
   end
 
+  def video_snippet_classes
+    video_provider.snippet_classes
+  end
+
   def before_validation
     super
     if url.present? && video_title.blank? && video_provider.present?

app/services/video/provider.rb

@@ -2,9 +2,10 @@ class Video::Provider
   PROVIDERS = [
     Arte,
     Canalu,
+    Dailymotion,
+    Instagram,
     Vimeo,
     Youtube,
-    Dailymotion,
     Peertube # Comes last because detection is less reliable
   ]
 

app/services/video/provider/default.rb

@@ -61,6 +61,10 @@ def iframe_preview_tag(**iframe_options)
     content_tag(:iframe, nil, options)
   end
 
+  def snippet_classes
+    "ratio ratio-16x9"
+  end
+
   def correct?
     url_in_domains?
   end

app/services/video/provider/instagram.rb

@@ -0,0 +1,46 @@
+class Video::Provider::Instagram < Video::Provider::Default
+  DOMAINS = [
+    'instagram.com',
+    'www.instagram.com'
+  ]
+
+  def csp_domains
+    DOMAINS
+  end
+
+  # https://www.instagram.com/reel/DZMwtovSJn4
+  def identifier
+    video_url.split('reel/').last.split('/').first
+  end
+
+  def iframe_tag(**iframe_options)
+    raw (blockquote + script)
+  end
+
+  def iframe_preview_tag(**iframe_options)
+    iframe_tag
+  end
+
+  def snippet_classes
+    ""
+  end
+
+  def script
+    "<script async src=\"https://www.instagram.com/embed.js\"></script>"
+  end
+
+  def title
+    html = URI.parse(video_url).open.read
+    # <meta name="twitter:title" content="User name (@nickname) • Instagram photos and videos">
+    meta_twitter_title = Nokogiri::HTML5(html).css("meta[name='twitter:title']").first
+    meta_twitter_title["content"] if meta_twitter_title
+  rescue
+    nil
+  end
+
+  protected
+
+  def blockquote
+    "<blockquote class=\"instagram-media\" data-instgrm-permalink=\"#{video_url}\" data-instgrm-version=\"14\"></blockquote>"
+  end
+end

app/views/admin/communication/blocks/templates/video/_snippet.html.erb

@@ -1,4 +1,4 @@
-<div class="ratio ratio-16x9 mb-2">
+<div class="<%= block.template.video_snippet_classes %> mb-2">
   <%= block.template.video_iframe_preview %>
 </div>
 <% unless block.template.video_title.blank? %>
@@ -18,4 +18,4 @@
       <%= block_component_show block, :transcription %>
     </details>
   </div>
-<% end %>
+<% end %>

config/initializers/content_security_policy.rb

@@ -14,6 +14,7 @@
     https://example.osuny.org/js/
     https://plausible.io
     https://tally.so
+    https://www.instagram.com
     https://d2wy8f7a9ursnm.cloudfront.net/v7/
   )
   script_urls << "https://cdn.jsdelivr.net/npm/summernote@#{SummernoteRails::Rails::VERSION.split('.').take(3).join('.')}/dist/lang/"