fix(player): set src on poster image to prevent white border

vidstack · Jan 9, 2024 · 437764f · 437764f
1 parent 778ff6c
commit 437764f
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/react/src/components/ui/poster.tsx b/packages/react/src/components/ui/poster.tsx
@@ -73,7 +73,7 @@ const PosterImg = React.forwardRef<HTMLImageElement, PosterImgProps>(
     return (
       <Primitive.img
         {...props}
-        src={$src || undefined}
+        src={$src || ''}
         alt={$alt || undefined}
         crossOrigin={$crossOrigin || undefined}
         ref={composeRefs(img.set as any, forwardRef)}

diff --git a/packages/vidstack/src/components/ui/poster.ts b/packages/vidstack/src/components/ui/poster.ts
@@ -82,7 +82,7 @@ export class Poster extends Component<PosterProps, PosterState> {
 
     const { started } = this._media.$state;
     this.setAttributes({
-      'data-visible': () => !started(),
+      'data-visible': () => !started() && !this.$state.hidden(),
       'data-loading': this._isLoading.bind(this),
       'data-error': this._hasError.bind(this),
       'data-hidden': this.$state.hidden,

diff --git a/packages/vidstack/src/elements/define/poster-element.ts b/packages/vidstack/src/elements/define/poster-element.ts
@@ -36,7 +36,7 @@ export class MediaPosterElement extends Host(HTMLElement, Poster) {
     effect(() => {
       setAttribute(this._img, 'alt', alt());
       setAttribute(this._img, 'crossorigin', crossOrigin());
-      setAttribute(this._img, 'src', src());
+      setAttribute(this._img, 'src', src() || '');
     });
   }
 }