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

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

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