From 9874fe3fb3876d601755c10f0479971607f7c674 Mon Sep 17 00:00:00 2001
From: jbrw <jamie.wilson@discourse.org>
Date: Sun, 26 Jun 2022 18:32:24 -0400
Subject: [PATCH] FIX: Improve mixcloud oneboxing (#17237)

- Sets `https://www.mixcloud.com` as a `requires_iframe_origins` to allow the iframe content to be displayed
- Attempts to render something approximating the Mixcloud content in the preview pane of the Composer, rather than just displaying a large version of the artwork associated with the link
---
 .../stylesheets/common/base/onebox.scss       | 41 +++++++++++++++++++
 lib/onebox/engine/mixcloud_onebox.rb          | 15 ++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index a3c499448e3..b40454cd470 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -822,6 +822,47 @@ aside.onebox.xkcd .onebox-body img {
   @extend .imgur-album;
 }
 
+aside.onebox.mixcloud-preview {
+  padding: 0;
+  border: 0;
+  height: 120px;
+  background-color: #1c1f21;
+  article.onebox-body img {
+    padding: 0;
+    max-height: 120px;
+  }
+  .onebox-body {
+    a[href],
+    a[href]:visited,
+    a[href]:hover {
+      color: #d1d1d1;
+    }
+    .video-icon {
+      position: relative;
+      top: 17px;
+      height: 100%;
+      float: left;
+      padding-left: 6px;
+    }
+    .mixcloud-text {
+      padding-left: 170px;
+      font-family: sans-serif;
+      h3 {
+        font-size: 13px;
+        font-weight: 300;
+        margin: 0;
+        padding-top: 15px;
+        height: 20px;
+      }
+      h4 {
+        font-size: 12px;
+        font-weight: 200;
+      }
+      color: gray;
+    }
+  }
+}
+
 @supports (aspect-ratio: 1) {
   // Not supported on iOS < 15. For those devices, we just
   // use the fixed width/height attributes on the iframe
diff --git a/lib/onebox/engine/mixcloud_onebox.rb b/lib/onebox/engine/mixcloud_onebox.rb
index a225ccf4bb7..3d4e92295fa 100644
--- a/lib/onebox/engine/mixcloud_onebox.rb
+++ b/lib/onebox/engine/mixcloud_onebox.rb
@@ -8,10 +8,23 @@ module Onebox
 
       matches_regexp(/^https?:\/\/www\.mixcloud\.com\//)
       always_https
+      requires_iframe_origins "https://www.mixcloud.com"
 
       def placeholder_html
         oembed = get_oembed
-        "<img src='#{oembed.image}' height='#{oembed.height}' #{oembed.title_attr}>"
+
+        <<-HTML
+          <aside class="onebox mixcloud-preview">
+            <article class="onebox-body">
+              <img src="#{oembed.image}">
+              <div class="video-icon"></div>
+              <div class="mixcloud-text">
+                <h3><a href="#{oembed.url}" target="_blank" rel="nofollow ugc noopener">#{oembed.title}</a></h3>
+                <h4>#{oembed.author_name}</h4>
+              </div>
+            </article>
+          </aside>
+        HTML
       end
 
       def to_html