DEV: Remove lazy-yt and replace with lazy-videos (#20722)

- Refactors the old plugin to remove jquery usage
- Adds support for Vimeo videos (default on) and Tiktok (experimental and default off)
This commit is contained in:
Jan Cernik
2023-03-29 12:54:25 -03:00
committed by GitHub
parent 86f5abfa18
commit afe3e36363
41 changed files with 672 additions and 510 deletions

View File

@ -10,9 +10,9 @@ import { module, test } from "qunit";
const youtubeCooked =
"<p>written text</p>" +
'<div class="onebox lazyYT-container" data-youtube-id="ytId1" data-youtube-title="Cats are great">Vid 1</div>' +
'<div class="youtube-onebox lazy-video-container" data-video-id="ytId1" data-video-title="Cats are great" data-provider-name="youtube"> <a href="https://www.youtube.com/watch?v=ytId1"></a>Vid 1</div>' +
"<p>more written text</p>" +
'<div class="onebox lazyYT-container" data-youtube-id="ytId2" data-youtube-title="Kittens are great">Vid 2</div>' +
'<div class="youtube-onebox lazy-video-container" data-video-id="ytId2" data-video-title="Kittens are great" data-provider-name="youtube"> <a href="https://www.youtube.com/watch?v=ytId2"></a>Vid 2</div>' +
"<p>and even more</p>";
const animatedImageCooked =
@ -71,7 +71,13 @@ module(
setupRenderingTest(hooks);
test("escapes youtube header", async function (assert) {
this.set("cooked", youtubeCooked.replace("ytId1", evilString));
this.set(
"cooked",
youtubeCooked.replace(
"https://www.youtube.com/watch?v=ytId1",
`https://www.youtube.com/watch?v=${evilString}`
)
);
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
assert.true(
@ -124,7 +130,7 @@ module(
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
const youtubeDivs = queryAll(".onebox");
const youtubeDivs = queryAll(".youtube-onebox");
assert.strictEqual(
youtubeDivs.length,
@ -138,11 +144,11 @@ module(
);
assert.false(
visible(".onebox[data-youtube-id='ytId1']"),
visible(".youtube-onebox[data-video-id='ytId1']"),
"first youtube preview hidden"
);
assert.true(
visible(".onebox[data-youtube-id='ytId2']"),
visible(".youtube-onebox[data-video-id='ytId2']"),
"second youtube preview still visible"
);
@ -160,11 +166,11 @@ module(
);
assert.true(
visible(".onebox[data-youtube-id='ytId1']"),
visible(".youtube-onebox[data-video-id='ytId1']"),
"first youtube preview still visible"
);
assert.false(
visible(".onebox[data-youtube-id='ytId2']"),
visible(".youtube-onebox[data-video-id='ytId2']"),
"second youtube preview hidden"
);

View File

@ -22,7 +22,7 @@ module("Discourse Chat | Component | chat-message-text", function (hooks) {
test("shows collapsed", async function (assert) {
this.set(
"cooked",
'<div class="onebox lazyYT lazyYT-container" data-youtube-id="WaT_rLGuUr8" data-youtube-title="Japanese Katsu Curry (Pork Cutlet)"/>'
'<div class="youtube-onebox lazy-video-container" data-video-id="WaT_rLGuUr8" data-video-title="Japanese Katsu Curry (Pork Cutlet)" data-provider-name="youtube"/>'
);
await render(
@ -51,7 +51,10 @@ module("Discourse Chat | Component | chat-message-text", function (hooks) {
});
test("shows edits - collapsible message", async function (assert) {
this.set("cooked", '<div class="onebox lazyYT-container"></div>');
this.set(
"cooked",
'<div class="youtube-onebox lazy-video-container"></div>'
);
await render(
hbs`<ChatMessageText @cooked={{this.cooked}} @edited={{true}} />`