fix(player): set intrinsic thumbnail aspect ratio correctly

ref #1399
vidstack · Sep 20, 2024 · 7923070 · 7923070
1 parent 5d51f23
commit 7923070
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/vidstack/src/components/ui/thumbnails/thumbnail.ts b/packages/vidstack/src/components/ui/thumbnails/thumbnail.ts
@@ -4,6 +4,7 @@ import { EventsController, isNull, listenEvent } from 'maverick.js/std';
 import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
 import type { MediaCrossOrigin } from '../../../core/api/types';
 import { $ariaBool } from '../../../utils/aria';
+import { round } from '../../../utils/number';
 import { ThumbnailsLoader, type ThumbnailImage, type ThumbnailSrc } from './thumbnail-loader';
 
 /**
@@ -184,15 +185,19 @@ export class Thumbnail extends Component<ThumbnailProps, ThumbnailState> {
 
     this.#style(rootEl, '--thumbnail-width', `${width * scale}px`);
     this.#style(rootEl, '--thumbnail-height', `${height * scale}px`);
+    this.#style(rootEl, '--thumbnail-aspect-ratio', String(round(width / height, 5)));
+
     this.#style(imgEl, 'width', `${imgEl.naturalWidth * scale}px`);
     this.#style(imgEl, 'height', `${imgEl.naturalHeight * scale}px`);
+
     this.#style(
       imgEl,
       'transform',
       thumbnail.coords
         ? `translate(-${thumbnail.coords.x * scale}px, -${thumbnail.coords.y * scale}px)`
         : '',
     );
+
     this.#style(imgEl, 'max-width', 'none');
   }
 

diff --git a/packages/vidstack/styles/player/default/thumbnail.css b/packages/vidstack/styles/player/default/thumbnail.css
@@ -7,9 +7,7 @@
 :where(.vds-thumbnail) {
   --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)))
-  );
+  --aspect-ratio: var(--media-thumbnail-aspect-ratio, var(--thumbnail-aspect-ratio));
   display: block;
   width: var(--thumbnail-width);
   height: var(--thumbnail-height);