fix(player): aspect ratio breaks on safari

closes #936
vidstack · Oct 2, 2023 · 611a418 · 611a418
1 parent 9948109
commit 611a418
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 12 deletions.
diff --git a/packages/react/.templates/sandbox/styles.css b/packages/react/.templates/sandbox/styles.css
@@ -32,8 +32,6 @@ media-player {
   --video-border-radius: 2px;
 
   /* 👉 https://vidstack.io/docs/player/components/layouts/default#css-variables for more. */
-
-  width: 100%;
 }
 
 media-player[data-view-type='video'] {

diff --git a/packages/vidstack/.templates/sandbox/styles.css b/packages/vidstack/.templates/sandbox/styles.css
@@ -19,8 +19,6 @@ media-player {
   --video-border-radius: 2px;
 
   /* 👉 https://vidstack.io/docs/player/components/layouts/default#css-variables for more. */
-
-  width: 100%;
 }
 
 media-player[data-view-type='video'] {

diff --git a/packages/vidstack/player/styles/base.css b/packages/vidstack/player/styles/base.css
@@ -6,8 +6,8 @@
 
 :where([data-media-player]) {
   width: 100%;
-  min-width: 275px;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   position: relative;
   contain: style;
   box-sizing: border-box;
@@ -62,7 +62,7 @@
   display: inline-block;
   width: 100%;
   height: auto;
-  object-fit: cover;
+  object-fit: contain;
   touch-action: manipulation;
 }
 

diff --git a/packages/vidstack/player/styles/default/poster.css b/packages/vidstack/player/styles/default/poster.css
@@ -13,8 +13,9 @@
   opacity: 0;
   width: 100%;
   height: 100%;
+  z-index: 1;
+  border: 0;
   pointer-events: none;
-  object-fit: cover;
   box-sizing: border-box;
   transition: opacity 0.2s ease-out;
 }
@@ -29,9 +30,10 @@
 }
 
 .vds-poster :where(img) {
+  border: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 :where(.vds-poster[data-hidden]) {

diff --git a/packages/vidstack/rollup.config.js b/packages/vidstack/rollup.config.js
@@ -19,7 +19,9 @@ const MAIN_EXTERNAL = ['hls.js', 'media-captions', 'media-icons'],
 // Styles
 if (!MODE_TYPES || MODE_WATCH) {
   if (MODE_WATCH) {
-    chokidar.watch('player/styles/**').on('all', buildDefaultTheme);
+    chokidar.watch('player/styles/**').on('all', (_, path) => {
+      if (path !== 'player/styles/default/theme.css') buildDefaultTheme();
+    });
   } else {
     buildDefaultTheme();
   }

diff --git a/packages/vidstack/src/core/api/player-props.ts b/packages/vidstack/src/core/api/player-props.ts
@@ -105,8 +105,7 @@ export interface MediaPlayerProps
   controlsDelay: number;
   /**
    * This method will indicate the orientation to lock the screen to when in fullscreen mode and
-   * the Screen Orientation API is available. The default is `undefined` which indicates
-   * no screen orientation change.
+   * the Screen Orientation API is available.
    */
   fullscreenOrientation: ScreenOrientationLockType | undefined;
   /**