fix(player): default to intrinsic aspect ratio for thumbnails

closes #1399
vidstack · Sep 14, 2024 · 921734f · 921734f
1 parent 5af7cb9
commit 921734f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/vidstack/package.json b/packages/vidstack/package.json
@@ -28,7 +28,7 @@
     "types": "pnpm declarations && pnpm run build:types",
     "clean": "rimraf dist-npm",
     "format": "prettier src --write --loglevel warn",
-    "sandbox": "node ../../.scripts/sandbox.js",
+    "sandbox": "node ../../.scripts/sandbox.js & pnpm run build:css -w",
     "sandbox:build": "vite build sandbox",
     "test": "vitest --run",
     "test:watch": "vitest --watch",

diff --git a/packages/vidstack/styles/player/default/thumbnail.css b/packages/vidstack/styles/player/default/thumbnail.css
@@ -5,9 +5,11 @@
  */
 
 :where(.vds-thumbnail) {
-  --aspect-ratio: calc(var(--media-thumbnail-aspect-ratio, 16 / 9));
   --min-width: var(--media-thumbnail-min-width, 140px);
   --max-width: var(--media-thumbnail-max-width, 180px);
+  --aspect-ratio: calc(
+    var(--media-thumbnail-aspect-ratio, calc(var(--thumbnail-width) / var(--thumbnail-height)))
+  );
   display: block;
   width: var(--thumbnail-width);
   height: var(--thumbnail-height);