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
This commit is contained in:
jbrw 2022-06-26 18:32:24 -04:00 committed by GitHub
parent 526115f11a
commit 9874fe3fb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 1 deletions

View File

@ -822,6 +822,47 @@ aside.onebox.xkcd .onebox-body img {
@extend .imgur-album; @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) { @supports (aspect-ratio: 1) {
// Not supported on iOS < 15. For those devices, we just // Not supported on iOS < 15. For those devices, we just
// use the fixed width/height attributes on the iframe // use the fixed width/height attributes on the iframe

View File

@ -8,10 +8,23 @@ module Onebox
matches_regexp(/^https?:\/\/www\.mixcloud\.com\//) matches_regexp(/^https?:\/\/www\.mixcloud\.com\//)
always_https always_https
requires_iframe_origins "https://www.mixcloud.com"
def placeholder_html def placeholder_html
oembed = get_oembed 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 end
def to_html def to_html