fix(player): show thumbnail img once it has loaded

mihar-22 · mihar-22 · commit ab86b559bb59 · 2024-02-15T15:31:02.000+11:00
diff --git a/packages/vidstack/player/styles/default/thumbnail.css b/packages/vidstack/player/styles/default/thumbnail.css
@@ -31,6 +31,10 @@
   will-change: width, height, transform;
 }
 
+:where(.vds-thumbnail[data-loading] img) {
+  opacity: 0;
+}
+
 :where(.vds-thumbnail[aria-hidden='true']) {
   display: none !important;
 }
diff --git a/packages/vidstack/src/components/ui/thumbnails/thumbnail.ts b/packages/vidstack/src/components/ui/thumbnails/thumbnail.ts
@@ -92,6 +92,7 @@ export class Thumbnail extends Component<ThumbnailProps, ThumbnailState> {
 
   private _onLoaded() {
     const { loading, error } = this.$state;
+    this._resize();
     loading.set(false);
     error.set(null);
   }
@@ -124,9 +125,11 @@ export class Thumbnail extends Component<ThumbnailProps, ThumbnailState> {
   }
 
   private _onFindActiveThumbnail() {
+    let images = this._loader.$images();
+    if (!images.length) return;
+
     let time = this._getTime(),
       { src, activeThumbnail } = this.$state,
-      images = this._loader.$images(),
       activeIndex = -1,
       activeImage: ThumbnailImage | null = null;
 
@@ -147,14 +150,13 @@ export class Thumbnail extends Component<ThumbnailProps, ThumbnailState> {
   }
 
   private _resize() {
-    if (!this.scope) return;
+    if (!this.scope || this.$state.hidden()) return;
 
     const rootEl = this.el,
       imgEl = this.$state.img(),
-      loading = this.$state.loading(),
       thumbnail = this.$state.activeThumbnail();
 
-    if (!imgEl || !thumbnail || !rootEl || loading) return;
+    if (!imgEl || !thumbnail || !rootEl) return;
 
     let width = thumbnail.width ?? imgEl.naturalWidth,
       height = thumbnail?.height ?? imgEl.naturalHeight,

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,10 @@`
`31`	`31`	`will-change: width, height, transform;`
`32`	`32`	`}`
`33`	`33`
	`34`	`+:where(.vds-thumbnail[data-loading] img) {`
	`35`	`+ opacity: 0;`
	`36`	`+}`
	`37`	`+`
`34`	`38`	`:where(.vds-thumbnail[aria-hidden='true']) {`
`35`	`39`	`display: none !important;`
`36`	`40`	`}`