mirror of
https://github.com/discourse/discourse.git
synced 2025-05-22 07:53:49 +08:00
DEV: Convert various components to gjs (#26782)
Those were all low hanging fruits - all were already glimmer components, so this was mostly merging js and hbs files and adding imports. (occasionally also adds/fixes class names)
This commit is contained in:
Jarek Radosz
@ -0,0 +1,48 @@
|
||||
import Component from "@glimmer/component";
|
||||
|
||||
function convertToSeconds(time) {
|
||||
const match = time.toString().match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
|
||||
const [hours, minutes, seconds] = match.slice(1);
|
||||
|
||||
if (hours || minutes || seconds) {
|
||||
const h = parseInt(hours, 10) || 0;
|
||||
const m = parseInt(minutes, 10) || 0;
|
||||
const s = parseInt(seconds, 10) || 0;
|
||||
|
||||
return h * 3600 + m * 60 + s;
|
||||
}
|
||||
return time;
|
||||
}
|
||||
|
||||
export default class LazyIframe extends Component {
|
||||
get iframeSrc() {
|
||||
switch (this.args.providerName) {
|
||||
case "youtube":
|
||||
let url = `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1&rel=0`;
|
||||
if (this.args.startTime) {
|
||||
url += `&start=${convertToSeconds(this.args.startTime)}`;
|
||||
}
|
||||
return url;
|
||||
case "vimeo":
|
||||
return `https://player.vimeo.com/video/${this.args.videoId}${
|
||||
this.args.videoId.includes("?") ? "&" : "?"
|
||||
}autoplay=1`;
|
||||
case "tiktok":
|
||||
return `https://www.tiktok.com/embed/v2/${this.args.videoId}`;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if @providerName}}
|
||||
<iframe
|
||||
src={{this.iframeSrc}}
|
||||
title={{@title}}
|
||||
allowFullScreen
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
seamless="seamless"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
></iframe>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
{{#if @providerName}}
|
||||
<iframe
|
||||
src={{this.iframeSrc}}
|
||||
title={{@title}}
|
||||
allowFullScreen
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
seamless="seamless"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
></iframe>
|
||||
{{/if}}
|
||||
@ -1,34 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
|
||||
export default class LazyVideo extends Component {
|
||||
get iframeSrc() {
|
||||
switch (this.args.providerName) {
|
||||
case "youtube":
|
||||
let url = `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1&rel=0`;
|
||||
if (this.args.startTime) {
|
||||
url += `&start=${this.convertToSeconds(this.args.startTime)}`;
|
||||
}
|
||||
return url;
|
||||
case "vimeo":
|
||||
return `https://player.vimeo.com/video/${this.args.videoId}${
|
||||
this.args.videoId.includes("?") ? "&" : "?"
|
||||
}autoplay=1`;
|
||||
case "tiktok":
|
||||
return `https://www.tiktok.com/embed/v2/${this.args.videoId}`;
|
||||
}
|
||||
}
|
||||
|
||||
convertToSeconds(time) {
|
||||
const match = time.toString().match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
|
||||
const [hours, minutes, seconds] = match.slice(1);
|
||||
|
||||
if (hours || minutes || seconds) {
|
||||
const h = parseInt(hours, 10) || 0;
|
||||
const m = parseInt(minutes, 10) || 0;
|
||||
const s = parseInt(seconds, 10) || 0;
|
||||
|
||||
return h * 3600 + m * 60 + s;
|
||||
}
|
||||
return time;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { concat } from "@ember/helper";
|
||||
import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import LazyIframe from "./lazy-iframe";
|
||||
|
||||
export default class LazyVideo extends Component {
|
||||
@tracked isLoaded = false;
|
||||
|
||||
get thumbnailStyle() {
|
||||
const color = this.args.videoAttributes.dominantColor;
|
||||
if (color?.match(/^[0-9A-Fa-f]+$/)) {
|
||||
return htmlSafe(`background-color: #${color};`);
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
loadEmbed() {
|
||||
if (!this.isLoaded) {
|
||||
this.isLoaded = true;
|
||||
this.args.onLoadedVideo?.();
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
onKeyPress(event) {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
this.loadEmbed();
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<div
|
||||
data-video-id={{@videoAttributes.id}}
|
||||
data-video-title={{@videoAttributes.title}}
|
||||
data-video-start-time={{@videoAttributes.startTime}}
|
||||
data-provider-name={{@videoAttributes.providerName}}
|
||||
class={{concatClass
|
||||
"lazy-video-container"
|
||||
(concat @videoAttributes.providerName "-onebox")
|
||||
(if this.isLoaded "video-loaded")
|
||||
}}
|
||||
>
|
||||
{{#if this.isLoaded}}
|
||||
<LazyIframe
|
||||
@providerName={{@videoAttributes.providerName}}
|
||||
@title={{@videoAttributes.title}}
|
||||
@videoId={{@videoAttributes.id}}
|
||||
@startTime={{@videoAttributes.startTime}}
|
||||
/>
|
||||
{{else}}
|
||||
<div
|
||||
{{on "click" this.loadEmbed}}
|
||||
{{on "keypress" this.loadEmbed}}
|
||||
tabindex="0"
|
||||
style={{this.thumbnailStyle}}
|
||||
class={{concatClass "video-thumbnail" @videoAttributes.providerName}}
|
||||
>
|
||||
<img
|
||||
src={{@videoAttributes.thumbnail}}
|
||||
title={{@videoAttributes.title}}
|
||||
loading="lazy"
|
||||
class={{concat @videoAttributes.providerName "-thumbnail"}}
|
||||
/>
|
||||
<div
|
||||
class={{concatClass
|
||||
"icon"
|
||||
(concat @videoAttributes.providerName "-icon")
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div class="title-container">
|
||||
<div class="title-wrapper">
|
||||
<a
|
||||
href={{@videoAttributes.url}}
|
||||
title={{@videoAttributes.title}}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="title-link"
|
||||
>
|
||||
{{@videoAttributes.title}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
<div
|
||||
class={{concat-class
|
||||
"lazy-video-container"
|
||||
(concat @videoAttributes.providerName "-onebox")
|
||||
(if this.isLoaded "video-loaded")
|
||||
}}
|
||||
data-video-id={{@videoAttributes.id}}
|
||||
data-video-title={{@videoAttributes.title}}
|
||||
data-video-start-time={{@videoAttributes.startTime}}
|
||||
data-provider-name={{@videoAttributes.providerName}}
|
||||
>
|
||||
{{#if this.isLoaded}}
|
||||
<LazyIframe
|
||||
@providerName={{@videoAttributes.providerName}}
|
||||
@title={{@videoAttributes.title}}
|
||||
@videoId={{@videoAttributes.id}}
|
||||
@startTime={{@videoAttributes.startTime}}
|
||||
/>
|
||||
{{else}}
|
||||
<div
|
||||
class={{concat-class "video-thumbnail" @videoAttributes.providerName}}
|
||||
tabindex="0"
|
||||
style={{this.thumbnailStyle}}
|
||||
{{on "click" this.loadEmbed}}
|
||||
{{on "keypress" this.loadEmbed}}
|
||||
>
|
||||
<img
|
||||
class={{concat @videoAttributes.providerName "-thumbnail"}}
|
||||
src={{@videoAttributes.thumbnail}}
|
||||
title={{@videoAttributes.title}}
|
||||
loading="lazy"
|
||||
/>
|
||||
<div
|
||||
class={{concat-class
|
||||
"icon"
|
||||
(concat @videoAttributes.providerName "-icon")
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div class="title-container">
|
||||
<div class="title-wrapper">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="title-link"
|
||||
href={{@videoAttributes.url}}
|
||||
title={{@videoAttributes.title}}
|
||||
>
|
||||
{{@videoAttributes.title}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -1,31 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
|
||||
export default class LazyVideo extends Component {
|
||||
@tracked isLoaded = false;
|
||||
|
||||
@action
|
||||
loadEmbed() {
|
||||
if (!this.isLoaded) {
|
||||
this.isLoaded = true;
|
||||
this.args.onLoadedVideo?.();
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
onKeyPress(event) {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
this.loadEmbed();
|
||||
}
|
||||
}
|
||||
|
||||
get thumbnailStyle() {
|
||||
const color = this.args.videoAttributes.dominantColor;
|
||||
if (color?.match(/^[0-9A-Fa-f]+$/)) {
|
||||
return htmlSafe(`background-color: #${color};`);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user