github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 22:43:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Use dominant color while loading onebox images (#21091)

Browse Source 
When we "pull hotlinked images" on onebox images, they are added to the uploads table and their dominant color is calculated. This commit adds the data to the HTML so that it can be used by the client in the same way as non-onebox images. It also adds specific handling to the new `discourse-lazy-videos` plugin.
This commit is contained in:
David Taylor
2023-04-13 12:04:46 +01:00
committed by GitHub
parent 18c81958e5
commit e52f322cb5
6 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs
View File

@ -18,6 +18,7 @@
<div
class={{concat-class "video-thumbnail" @videoAttributes.providerName}}
tabindex="0"
style={{this.thumbnailStyle}}
{{on "click" this.loadEmbed}}
{{on "keypress" this.loadEmbed}}
>

8
plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js
View File

@ -1,6 +1,7 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
import { htmlSafe } from "@ember/template";
export default class LazyVideo extends Component {
@tracked isLoaded = false;
@ -20,4 +21,11 @@ export default class LazyVideo extends Component {
this.loadEmbed();
}
}
get thumbnailStyle() {
const color = this.args.videoAttributes.dominantColor;
if (color?.match(/^[0-9A-Fa-f]+$/)) {
return htmlSafe(`background-color: #${color};`);
}
}
}

6
plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js
View File

@ -4,10 +4,12 @@ export default function getVideoAttributes(cooked) {
}
const url = cooked.querySelector("a")?.getAttribute("href");
const thumbnail = cooked.querySelector("img")?.getAttribute("src");
const img = cooked.querySelector("img");
const thumbnail = img?.getAttribute("src");
const dominantColor = img?.dataset?.dominantColor;
const title = cooked.dataset.videoTitle;
const providerName = cooked.dataset.providerName;
const id = cooked.dataset.videoId;
return { url, thumbnail, title, providerName, id };
return { url, thumbnail, title, providerName, id, dominantColor };
}