From 5e26f053cb837b1180ca24d21fc74fd85f75549e Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Mon, 6 Jul 2026 14:25:44 -0500 Subject: [PATCH] Update youtube embed styles --- package.json | 2 +- src/css/style.css | 36 ++--- src/js/components/youtube-embed.js | 39 +++--- src/js/templates/externalLink.template.js | 32 ++++- src/js/templates/postEmbed.template.js | 7 +- tests/e2e/specs/concerns/postEmbeds.test.js | 9 +- .../specs/components/youtube-embed.test.js | 119 ++++++++++++---- .../templates/externalLink.template.test.js | 129 +++++++++++++++++- .../templates/postEmbed.template.test.js | 11 +- 9 files changed, 299 insertions(+), 85 deletions(-) diff --git a/package.json b/package.json index 4fc408de..1046e235 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.17.105", + "version": "0.17.106", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index 9a82a639..fc7a08db 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -2363,28 +2363,17 @@ animated-button { .youtube-embed { display: block; - background: var(--black); } -.youtube-embed-play-button { - display: block; +.youtube-embed.is-playing { position: relative; - width: 100%; - height: 100%; - padding: 0; - border: none; - background: none; - cursor: pointer; -} - -.youtube-embed-thumb { - display: block; - width: 100%; - height: 100%; - object-fit: cover; + border: var(--hair) solid var(--post-border-color); + border-radius: var(--video-border-radius); + overflow: hidden; + background: var(--black); + transform: translateZ(0); /* Prevents video jiggle on iPadOS scroll */ } -.youtube-embed-play-button .play-icon, .external-link-image-wrapper .play-icon { position: absolute; top: 50%; @@ -2398,11 +2387,10 @@ animated-button { transition: background 0.15s ease; } -.youtube-embed-play-button:hover .play-icon { +.youtube-embed .external-link a:hover .play-icon { background: color-mix(in srgb, var(--white) 85%, transparent); } -.youtube-embed-play-button .play-icon svg, .external-link-image-wrapper .play-icon svg { width: 100%; height: 100%; @@ -2467,6 +2455,12 @@ animated-button { pointer-events: none; } +.external-link-video-placeholder { + height: 96px; + background: var(--background-color); + border-bottom: var(--hair) solid var(--post-border-color); +} + .external-link-uri { color: var(--text-color-muted); font-size: 12px; @@ -4389,10 +4383,10 @@ chat-input .rich-text-input { outline: none; /* Cap auto-grow so a long multi-line message scrolls internally instead of pushing the whole input bar up off the top of the (short, mobile) viewport. */ - max-height: min(120px, 30vh); + max-height: min(250px, 50vh); overflow-y: auto; line-height: 1.4; - scrollbar-width: none; + scrollbar-width: thin; } chat-input .rich-text-input[contenteditable="false"] { diff --git a/src/js/components/youtube-embed.js b/src/js/components/youtube-embed.js index 4a2a14b4..98e1ec13 100644 --- a/src/js/components/youtube-embed.js +++ b/src/js/components/youtube-embed.js @@ -1,8 +1,9 @@ import { html, render } from "/js/lib/lit-html.js"; import { Component } from "/js/components/component.js"; -import { playIconTemplate } from "/js/templates/icons/playIcon.template.js"; +import { externalLinkTemplate } from "/js/templates/externalLink.template.js"; const YOUTUBE_EMBED_BASE_URL = "https://www.youtube-nocookie.com/embed"; +const DEFAULT_ASPECT_RATIO = String(16 / 9); class YoutubeEmbed extends Component { connectedCallback() { @@ -13,6 +14,9 @@ class YoutubeEmbed extends Component { this.start = this.getAttribute("start"); this.thumb = this.getAttribute("thumb"); this.videoTitle = this.getAttribute("video-title") ?? ""; + this.url = this.getAttribute("url"); + this.description = this.getAttribute("description") ?? ""; + this.aspectRatio = this.getAttribute("aspect-ratio"); this.playing = false; this.dataset.teststate = "preview"; this.render(); @@ -29,6 +33,8 @@ class YoutubeEmbed extends Component { play() { this.playing = true; this.dataset.teststate = "playing"; + this.classList.add("is-playing"); + this.style.aspectRatio = this.aspectRatio || DEFAULT_ASPECT_RATIO; this.render(); this.querySelector("iframe")?.focus(); } @@ -44,28 +50,17 @@ class YoutubeEmbed extends Component { allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen >` - : html``, + : "Play YouTube video", + }), this, ); } diff --git a/src/js/templates/externalLink.template.js b/src/js/templates/externalLink.template.js index a322c30a..b8e0da8d 100644 --- a/src/js/templates/externalLink.template.js +++ b/src/js/templates/externalLink.template.js @@ -4,7 +4,11 @@ import { isVideoLink } from "/js/dataHelpers.js"; import { playIconTemplate } from "/js/templates/icons/playIcon.template.js"; function getDomainFromUri(uri) { - return new URL(uri).hostname; + try { + return new URL(uri).hostname; + } catch (error) { + return null; + } } export function externalLinkTemplate({ @@ -14,12 +18,28 @@ export function externalLinkTemplate({ image, lazyLoadImages, disableNavigation, + onClick, + ariaLabel = null, }) { + let clickHandler = null; + if (onClick) { + clickHandler = (event) => { + if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { + return; + } + event.preventDefault(); + event.stopPropagation(); + onClick(event); + }; + } else if (disableNavigation) { + clickHandler = (event) => event.preventDefault(); + } return html`
e.preventDefault() : null} + aria-label=${ariaLabel ?? (title || url)} + @click=${clickHandler} >
${image @@ -32,7 +52,13 @@ export function externalLinkTemplate({ /> ${isVideoLink(url) ? playIconTemplate() : ""}
` - : ""} + : isVideoLink(url) + ? html`
+ ${playIconTemplate()} +
` + : ""}
${title || url} diff --git a/src/js/templates/postEmbed.template.js b/src/js/templates/postEmbed.template.js index b591fd8e..8df1ad7a 100644 --- a/src/js/templates/postEmbed.template.js +++ b/src/js/templates/postEmbed.template.js @@ -414,16 +414,17 @@ function youtubeEmbedTemplate({ youtubeVideo, external }) { ? YOUTUBE_SHORT_ASPECT_RATIO : YOUTUBE_VIDEO_ASPECT_RATIO; return html` { e.stopPropagation(); - e.preventDefault(); }} >`; } diff --git a/tests/e2e/specs/concerns/postEmbeds.test.js b/tests/e2e/specs/concerns/postEmbeds.test.js index 41dd9c59..a637cef6 100644 --- a/tests/e2e/specs/concerns/postEmbeds.test.js +++ b/tests/e2e/specs/concerns/postEmbeds.test.js @@ -373,11 +373,18 @@ test.describe("Post embeds view — YouTube", () => { const embed = view.locator('[data-testid="youtube-embed"]'); await expect(embed).toBeVisible({ timeout: 10000 }); await expect(embed).toHaveAttribute("data-teststate", "preview"); + const card = embed.locator('[data-testid="external-link"]'); + await expect( + card.locator('[data-testid="external-link-title"]'), + ).toHaveText("A video"); + await expect( + card.locator('[data-testid="external-link-domain"]'), + ).toHaveText("www.youtube.com"); await expect( view.locator('[data-testid="youtube-embed-iframe"]'), ).toHaveCount(0); - await view.locator('[data-testid="youtube-embed-play"]').click(); + await card.locator("a").click(); const iframe = view.locator('[data-testid="youtube-embed-iframe"]'); await expect(iframe).toBeVisible(); diff --git a/tests/unit/specs/components/youtube-embed.test.js b/tests/unit/specs/components/youtube-embed.test.js index 7c318f6d..777a6cdd 100644 --- a/tests/unit/specs/components/youtube-embed.test.js +++ b/tests/unit/specs/components/youtube-embed.test.js @@ -8,55 +8,97 @@ t.beforeEach(() => { document.body.innerHTML = ""; }); -function createEmbed({ start = "0", thumb = "" } = {}) { +function createEmbed({ + start = "0", + thumb = "", + aspectRatio = String(9 / 16), +} = {}) { const element = document.createElement("youtube-embed"); element.setAttribute("video-id", "dQw4w9WgXcQ"); element.setAttribute("start", start); element.setAttribute("thumb", thumb); element.setAttribute("video-title", "Test video"); + element.setAttribute("url", "https://www.youtube.com/watch?v=dQw4w9WgXcQ"); + element.setAttribute("description", "Test description"); + if (aspectRatio !== null) { + element.setAttribute("aspect-ratio", aspectRatio); + } document.body.appendChild(element); return element; } +function getCardLink(element) { + return element.querySelector("[data-testid='external-link'] a"); +} + t.describe("YoutubeEmbed - preview state", (it) => { - it("renders a play button and no iframe", () => { + it("renders an external link card and no iframe", () => { const element = createEmbed(); - assert( - element.querySelector("[data-testid='youtube-embed-play']") !== null, - ); + assert(element.querySelector("[data-testid='external-link']") !== null); assertEquals(element.querySelector("iframe"), null); assertEquals(element.dataset.teststate, "preview"); }); - it("renders the thumbnail when provided", () => { - const element = createEmbed({ thumb: "https://example.com/thumb.jpg" }); - const thumb = element.querySelector(".youtube-embed-thumb"); - assert(thumb !== null); - assertEquals(thumb.getAttribute("src"), "https://example.com/thumb.jpg"); + it("links the card to the original video URL", () => { + const element = createEmbed(); + assertEquals( + getCardLink(element).getAttribute("href"), + "https://www.youtube.com/watch?v=dQw4w9WgXcQ", + ); }); - it("renders no thumbnail image when thumb is empty", () => { + it("labels the card link with the video title", () => { const element = createEmbed(); - assertEquals(element.querySelector(".youtube-embed-thumb"), null); - assert( - element.querySelector("[data-testid='youtube-embed-play']") !== null, + assertEquals( + getCardLink(element).getAttribute("aria-label"), + "Play YouTube video: Test video", ); }); - it("labels the play button with the video title", () => { + it("renders the title, description, and domain", () => { const element = createEmbed(); - const button = element.querySelector("[data-testid='youtube-embed-play']"); assertEquals( - button.getAttribute("aria-label"), - "Play YouTube video: Test video", + element + .querySelector("[data-testid='external-link-title']") + .textContent.trim(), + "Test video", + ); + assertEquals( + element + .querySelector("[data-testid='external-link-description']") + .textContent.trim(), + "Test description", + ); + assertEquals( + element + .querySelector("[data-testid='external-link-domain']") + .textContent.trim(), + "www.youtube.com", + ); + }); + + it("renders the thumbnail with a play icon when provided", () => { + const element = createEmbed({ thumb: "https://example.com/thumb.jpg" }); + const thumb = element.querySelector(".external-link-image"); + assert(thumb !== null); + assertEquals(thumb.getAttribute("src"), "https://example.com/thumb.jpg"); + assert(element.querySelector(".play-icon") !== null); + }); + + it("renders a play icon placeholder instead of an image when thumb is empty", () => { + const element = createEmbed(); + assertEquals(element.querySelector(".external-link-image"), null); + assert( + element.querySelector(".external-link-video-placeholder .play-icon") !== + null, ); }); }); t.describe("YoutubeEmbed - playing state", (it) => { - it("swaps in the player iframe when the play button is clicked", () => { + it("swaps in the player iframe when the card is clicked", () => { const element = createEmbed({ start: "32" }); - element.querySelector("[data-testid='youtube-embed-play']").click(); + getCardLink(element).click(); const iframe = element.querySelector( "[data-testid='youtube-embed-iframe']", ); @@ -66,15 +108,38 @@ t.describe("YoutubeEmbed - playing state", (it) => { "https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?autoplay=1&start=32&rel=0&playsinline=1", ); assertEquals(element.dataset.teststate, "playing"); - assertEquals( - element.querySelector("[data-testid='youtube-embed-play']"), - null, - ); + assert(element.classList.contains("is-playing")); + assertEquals(element.style.aspectRatio, String(9 / 16)); + assertEquals(element.querySelector("[data-testid='external-link']"), null); + }); + + it("applies no aspect ratio in the preview state", () => { + const element = createEmbed(); + assertEquals(element.style.aspectRatio, ""); + }); + + it("falls back to a 16:9 aspect ratio when the attribute is missing", () => { + const element = createEmbed({ aspectRatio: null }); + getCardLink(element).click(); + assertEquals(element.style.aspectRatio, String(16 / 9)); + }); + + it("does not play on a modified click so the link can open normally", () => { + const element = createEmbed(); + const event = new window.MouseEvent("click", { + bubbles: true, + cancelable: true, + metaKey: true, + }); + getCardLink(element).dispatchEvent(event); + assertEquals(event.defaultPrevented, false); + assertEquals(element.dataset.teststate, "preview"); + assertEquals(element.querySelector("iframe"), null); }); - it("moves focus to the iframe when the play button is clicked", () => { + it("moves focus to the iframe when the card is clicked", () => { const element = createEmbed(); - element.querySelector("[data-testid='youtube-embed-play']").click(); + getCardLink(element).click(); assertEquals( document.activeElement, element.querySelector("[data-testid='youtube-embed-iframe']"), @@ -83,7 +148,7 @@ t.describe("YoutubeEmbed - playing state", (it) => { it("falls back to start=0 for a non-numeric start attribute", () => { const element = createEmbed({ start: "1m30s" }); - element.querySelector("[data-testid='youtube-embed-play']").click(); + getCardLink(element).click(); const iframe = element.querySelector( "[data-testid='youtube-embed-iframe']", ); diff --git a/tests/unit/specs/templates/externalLink.template.test.js b/tests/unit/specs/templates/externalLink.template.test.js index cc65fe1e..11b0b155 100644 --- a/tests/unit/specs/templates/externalLink.template.test.js +++ b/tests/unit/specs/templates/externalLink.template.test.js @@ -198,7 +198,7 @@ t.describe("externalLinkTemplate", (it) => { assertEquals(container.querySelector(".play-icon"), null); }); - it("should not render a play icon for a video link without an image", () => { + it("should render a play icon placeholder for a video link without an image", () => { const result = externalLinkTemplate({ url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ", title: "Example Video", @@ -206,7 +206,132 @@ t.describe("externalLinkTemplate", (it) => { }); const container = document.createElement("div"); render(result, container); - assertEquals(container.querySelector(".play-icon"), null); + const placeholder = container.querySelector( + ".external-link-video-placeholder", + ); + assert(placeholder !== null); + assert(placeholder.querySelector(".play-icon") !== null); + assertEquals(container.querySelector(".external-link-image"), null); + }); + + it("should not render the video placeholder for a non-video link without an image", () => { + const result = externalLinkTemplate({ + url: "https://example.com/article", + title: "Example", + description: "Test", + }); + const container = document.createElement("div"); + render(result, container); + assertEquals( + container.querySelector(".external-link-video-placeholder"), + null, + ); + }); + + it("should call onClick and prevent navigation on a plain click", () => { + let clicked = false; + const result = externalLinkTemplate({ + url: "https://example.com", + title: "Example", + description: "Test", + onClick: () => { + clicked = true; + }, + }); + const container = document.createElement("div"); + render(result, container); + const link = container.querySelector("a"); + const event = new window.MouseEvent("click", { + cancelable: true, + bubbles: true, + }); + link.dispatchEvent(event); + assertEquals(clicked, true); + assertEquals(event.defaultPrevented, true); + }); + + it("should not call onClick on a modified click so the link opens normally", () => { + for (const modifier of ["metaKey", "ctrlKey", "shiftKey", "altKey"]) { + let clicked = false; + const result = externalLinkTemplate({ + url: "https://example.com", + title: "Example", + description: "Test", + onClick: () => { + clicked = true; + }, + }); + const container = document.createElement("div"); + render(result, container); + const link = container.querySelector("a"); + const event = new window.MouseEvent("click", { + cancelable: true, + bubbles: true, + [modifier]: true, + }); + link.dispatchEvent(event); + assert(clicked === false, `onClick fired on a ${modifier} click`); + assertEquals(event.defaultPrevented, false); + } + }); + + it("should label the link with ariaLabel when provided", () => { + const result = externalLinkTemplate({ + url: "https://example.com", + title: "Example", + description: "Test", + ariaLabel: "Play Example", + }); + const container = document.createElement("div"); + render(result, container); + assertEquals( + container.querySelector("a").getAttribute("aria-label"), + "Play Example", + ); + }); + + it("should default the aria-label to the title", () => { + const result = externalLinkTemplate({ + url: "https://example.com", + title: "Example", + description: "Test", + }); + const container = document.createElement("div"); + render(result, container); + assertEquals( + container.querySelector("a").getAttribute("aria-label"), + "Example", + ); + }); + + it("should default the aria-label to the url when there is no title", () => { + const result = externalLinkTemplate({ + url: "https://example.com", + title: "", + description: "Test", + }); + const container = document.createElement("div"); + render(result, container); + assertEquals( + container.querySelector("a").getAttribute("aria-label"), + "https://example.com", + ); + }); + + it("should render an empty domain instead of throwing for an unparseable url", () => { + const result = externalLinkTemplate({ + url: "not a url", + title: "Example", + description: "Test", + }); + const container = document.createElement("div"); + render(result, container); + assertEquals( + container + .querySelector("[data-testid='external-link-domain']") + .textContent.trim(), + "", + ); }); it("should prevent navigation when disableNavigation is true", () => { diff --git a/tests/unit/specs/templates/postEmbed.template.test.js b/tests/unit/specs/templates/postEmbed.template.test.js index f19ec739..15ee5ead 100644 --- a/tests/unit/specs/templates/postEmbed.template.test.js +++ b/tests/unit/specs/templates/postEmbed.template.test.js @@ -405,9 +405,10 @@ t.describe("postEmbedTemplate - external YouTube", (it) => { "https://example.com/thumb.jpg", ); assertEquals( - container.querySelector("[data-testid='external-link']"), - null, + embedElement.getAttribute("url"), + "https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=32s", ); + assertEquals(embedElement.getAttribute("description"), "A description"); }); it("uses a 16:9 aspect ratio for regular videos", () => { @@ -417,7 +418,7 @@ t.describe("postEmbedTemplate - external YouTube", (it) => { const embedElement = container.querySelector( "[data-testid='youtube-embed']", ); - assertEquals(embedElement.style.aspectRatio, String(16 / 9)); + assertEquals(embedElement.getAttribute("aspect-ratio"), String(16 / 9)); }); it("uses a portrait aspect ratio for shorts", () => { @@ -427,7 +428,7 @@ t.describe("postEmbedTemplate - external YouTube", (it) => { const embedElement = container.querySelector( "[data-testid='youtube-embed']", ); - assertEquals(embedElement.style.aspectRatio, String(9 / 16)); + assertEquals(embedElement.getAttribute("aspect-ratio"), String(9 / 16)); }); it("renders watch URLs on all YouTube hostnames", () => { @@ -470,7 +471,7 @@ t.describe("postEmbedTemplate - external YouTube", (it) => { ); assert(embedElement !== null); assertEquals(embedElement.getAttribute("video-id"), "dQw4w9WgXcQ"); - assertEquals(embedElement.style.aspectRatio, String(16 / 9)); + assertEquals(embedElement.getAttribute("aspect-ratio"), String(16 / 9)); }); it("converts hour/minute/second start times to seconds", () => { -- 2.51.2