Compare commits

...
3 Commits
Author SHA1 Message Date
peter e51e348610 release: 0.120.1 (bug/files-thumb-webkit) 2026-11-14 21:55:05 +01:00
peter 3a09f0d78d release: 0.120.1 2026-11-14 21:34:49 +01:00
peter 06c0ab5fb6 fix(files): a row's picture fits its box on iPad
In a table cell WebKit resolved the picture's h-full against the aspect-video box as the poster's own height, so the box showed a native-size sliver of it. The box now has a fixed 16:9 height, as the other pictures in tables do; an e2e check runs in the WebKit and iPad projects.
2026-11-14 21:34:33 +01:00
6 changed files with 73 additions and 2 deletions
+6
View File
@@ -7,6 +7,12 @@ edit the release notes and re-run the generator.
Upgrading, pinning a version and rolling back: [docs/self-hosting.md](docs/self-hosting.md#upgrading).
## 0.120.1 — 2026-11-14
### Fixed
- On an iPad, the pictures in the Files list show the whole poster again, not a blurred close-up of a small part of it.
## 0.120.0 — 2026-11-14
### New
+1 -1
View File
@@ -1 +1 @@
0.120.0
0.120.1
+46
View File
@@ -24,6 +24,52 @@ test.describe("Files", () => {
await expect(dialog(page)).toBeHidden();
});
// WebKit (every iPad browser) cannot resolve a percentage height against a box whose height comes
// from aspect-ratio inside a table cell: the picture took its own full height and the 16:9 box
// showed a native-size sliver of it, a blur of colour. The library is stubbed with one file whose
// poster is a tall picture, the case that shows it most.
test("a row's picture fits its box", async ({ page }) => {
const file = {
id: 990001,
status: "done",
progress: 100,
created_at: "2026-11-14T10:00:00+00:00",
source_kind: "youtube",
source_ref: "e2e-thumb",
source_url: null,
poster_url: "/api/downloads/990001/poster.jpg",
display_name: "A tall poster",
display_uploader: null,
extra_links: [],
can_download: true,
job_kind: "download",
folder_id: null,
kept: false,
expires_at: null,
shared: false,
source_key: "youtube",
asset: { media_kind: "video", duration_s: 60, size_bytes: 2048 },
};
await page.route(/\/api\/files(\?|$)/, (route) => route.fulfill({ json: [file] }));
await page.route(/\/api\/downloads\/990001\/poster\.jpg/, (route) =>
route.fulfill({
contentType: "image/svg+xml",
body: '<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1920"><rect width="1080" height="1920" fill="#3a6"/></svg>',
}),
);
// Wide enough that the picture column shows beside a pinned rail (an iPad Pro in landscape).
await page.setViewportSize({ width: 1366, height: 1024 });
await openApp(page);
await gotoPage(page, "files");
const picture = page.getByRole("row", { name: /A tall poster/ }).locator("img");
await expect(picture).toBeVisible();
const fit = await picture.evaluate((img) => {
const box = img.parentElement!.getBoundingClientRect();
return { img: img.getBoundingClientRect().height, box: box.height };
});
expect(fit.img).toBeLessThanOrEqual(fit.box);
});
test("a link pasted onto a page (not into a field) opens the download dialog", async ({
page,
}) => {
@@ -1,4 +1,12 @@
[
{
"version": "0.120.1",
"date": "2026-11-14",
"new": [],
"fixed": [
"On an iPad, the pictures in the Files list show the whole poster again, not a blurred close-up of a small part of it."
]
},
{
"version": "0.120.0",
"date": "2026-11-14",
@@ -1,4 +1,12 @@
[
{
"version": "0.120.1",
"date": "2026-11-14",
"new": [],
"fixed": [
"iPaden a Fájlok listájában a képek újra a teljes posztert mutatják, nem egy elmosódott, felnagyított részletet."
]
},
{
"version": "0.120.0",
"date": "2026-11-14",
+4 -1
View File
@@ -465,10 +465,13 @@ export default function Files() {
// A narrow table (a pinned rail beside it) gives its fixed columns' room to the name: with the
// picture and the date in, the name had none left.
narrowHidden: true,
// A fixed height, not aspect-video: in a table cell WebKit (every iPad browser) resolves the
// picture's h-full against an aspect-ratio height as its own natural height, and the box then
// shows a native-size sliver of the poster. 20 × 11.25 is the same 16:9.
render: (f) => (
<JobThumb
job={f}
box="w-20 aspect-video shrink-0 rounded-md overflow-hidden bg-surface border border-border"
box="w-20 h-11.25 shrink-0 rounded-md overflow-hidden bg-surface border border-border"
/>
),
},