muxinc · cjpillsbury · Feb 9, 2024 · Dec 7, 2023 · Feb 9, 2024
@@ -20,6 +20,7 @@ <h2>Getting started</h2>
       <li><a href="animated-icons.html">Animated icons</a></li>
       <li><a href="slots-demo.html">Understanding <code>&lt;media-controller/&gt;</code> slots</a></li>
       <li><a href="state-change-events-demo.html">State change events demo</a></li>
+      <li><a href="pwa">Progressive Web Application (PWA)</a></li>
     </ul>
 
     <h2>Responsive controls</h2>

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>Media Chrome Basic PWA Example</title>
+    <link rel="manifest" href="./pwa-manifest.json" />
+    <script type="module" src="../../../dist/index.js"></script>
+    <style>
+      @media all and (display-mode: standalone) {
+        body {
+          /* Added to demonstrate these styles are applied for PWA */
+          background-color: darkslategray;
+          color: white;
+        }
+
+        .pwa-install {
+          display: none;
+        }
+      }
+
+      /** add styles to prevent CLS (Cumulative Layout Shift) */
+      media-controller:not([audio]) {
+        display: block; /* expands the container if preload=none */
+        max-width: 960px; /* allows the container to shrink if small */
+        aspect-ratio: 2.4; /* set container aspect ratio if preload=none */
+      }
+
+      video {
+        width: 100%; /* prevents video to expand beyond its container */
+      }
+
+      /* Breaking these up into two selectors to demonstrate how this could work with a new custom "contaienr" element (CJP) */
+      media-controller .centered-controls-overlay {
+        align-self: stretch;
+      }
+
+      .centered-controls-overlay {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: space-evenly;
+      }
+
+      *[slot='centered-chrome'] {
+        margin: 0 15%;
+        --media-control-hover-background: none;
+        --media-control-background: none;
+      }
+
+      *[slot='centered-chrome']
+        :is(media-play-button, media-seek-backward-button, media-seek-forward-button) {
+        padding: 0px;
+      }
+
+      *[slot='centered-chrome'] media-play-button {
+        width: 20%;
+      }
+
+      *[slot='centered-chrome']
+        :is(media-seek-backward-button, media-seek-forward-button) {
+        width: 15%;
+      }
+
+      media-control-bar {
+        width: 100%;
+      }
+
+      media-pip-button[mediapipunavailable] {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Media Chrome Basic PWA Example</h1>
+      <media-controller>
+        <video
+          playsinline
+          slot="media"
+          src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
+        ></video>
+        <div slot="centered-chrome" class="centered-controls-overlay">
+          <media-seek-backward-button></media-seek-backward-button>
+          <media-play-button></media-play-button>
+          <media-seek-forward-button></media-seek-forward-button>
+        </div>
+        <media-control-bar>
+          <media-mute-button></media-mute-button>
+          <media-time-display showduration></media-time-display>
+          <div
+            style="
+              flex-grow: 1;
+              background: var(
+                --media-control-background,
+                var(--media-secondary-color, rgb(20 20 30 / 0.7))
+              );
+            "
+          ></div>
+          <media-pip-button></media-pip-button>
+          <media-fullscreen-button></media-fullscreen-button>
+        </media-control-bar>
+      </media-controller>
+      <div class="pwa-install">
+        This is an example Progressive Web App. If you need help on how to
+        install, see
+        <a href="https://web.dev/learn/pwa/installation" target="_blank">here</a
+        >.
+      </div>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,25 @@
+{
+    "name": "Media Chrome",
+    "short_name": "MediaChrome",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#fff",
+    "description": "A readable Hacker News app.",
+    "icons": [
+      {
+        "src": "/examples/vanilla/favicon/favicon-32x32.png",
+        "sizes": "32x32",
+        "type": "image/png"
+      },
+      {
+        "src": "/examples/vanilla/favicon/favicon-48x48.png",
+        "sizes": "48x48",
+        "type": "image/png"
+      },
+      {
+        "src": "/examples/vanilla/favicon/favicon-256x256.png",
+        "sizes": "256x256",
+        "type": "image/png"
+      }
+    ]
+  }
@@ -14,7 +14,7 @@ export const getTestMediaEl = () => {
 
 /**
  * Test for volume support
- * 
+ *
  * @param {HTMLMediaElement} mediaEl
  * @returns {Promise<boolean>}
  */
@@ -32,18 +32,27 @@ export const hasVolumeSupportAsync = async (mediaEl = getTestMediaEl()) => {
 //   return volumeSupported;
 // });
 
+// NOTE: This also matches at least some non-Safari UAs on e.g. iOS, such as Chrome, perhaps since
+// these browsers are built on top of the OS-level WebKit browser, so use accordingly (CJP).
+// See, e.g.: https://www.whatismybrowser.com/guides/the-latest-user-agent/chrome
+const isSafari = /.*Version\/.*Safari\/.*/.test(globalThis.navigator.userAgent);
 /**
  * Test for PIP support
- * 
+ *
  * @param {HTMLVideoElement} mediaEl
  * @returns {boolean}
  */
-export const hasPipSupport = (mediaEl = getTestMediaEl()) =>
-  typeof mediaEl?.requestPictureInPicture === 'function';
+export const hasPipSupport = (mediaEl = getTestMediaEl()) => {
+  // NOTE: PWAs for Apple that rely on Safari don't support picture in picture but still have `requestPictureInPicture()`
+  // (which will result in a failed promise). Checking for those conditions here (CJP).
+  // This should still work for macOS PWAs installed using Chrome, where PiP is supported.
+  if (globalThis.matchMedia('(display-mode: standalone)').matches && isSafari) return false;
+  return typeof mediaEl?.requestPictureInPicture === 'function';
+}
 
 /**
  * Test for Fullscreen support
- * 
+ *
  * @param {HTMLVideoElement} mediaEl
  * @returns {boolean}
  */

@@ -36,7 +36,19 @@
   CustomEvent: function CustomEvent() {},
   getComputedStyle: function () {},
   navigator: {
-    languages: []
+    languages: [],
+    get userAgent() {
+      return '';
+    }
+  },
+  /**
+   * @param {string} media
+   */
+  matchMedia(media) {
+    return {
+      matches: false,
+      media,
+    };
   }
 };
 
@@ -70,6 +82,7 @@
   * ResizeObserver?,
   * CastableVideoElement?,
   * navigator?,
+  * matchMedia,
   * } }
   * */
 export const GlobalThis = isServer && !isShimmed ? globalThisShim : globalThis;