Merge branch 'main' into fix/mux-video-react-cookies-warn

examples/nextjs-with-typescript/pages/MuxPlayer.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link";
 import Head from "next/head";
 import Script from 'next/script';
-import MuxPlayer, { MuxPlayerProps } from "@mux/mux-player-react";
+import MuxPlayer, { MuxPlayerProps, MaxResolution, MinResolution, RenditionOrder } from "@mux/mux-player-react";
+import "@mux/mux-player/themes/classic";
 import "@mux/mux-player/themes/minimal";
 import "@mux/mux-player/themes/microvideo";
 import "@mux/mux-player/themes/gerwig";
@@ -86,6 +87,8 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
   secondaryColor: undefined,
   accentColor: undefined,
   maxResolution: undefined,
+  minResolution: undefined,
+  renditionOrder: undefined,
   thumbnailTime: undefined,
   title: undefined,
   envKey: undefined,
@@ -104,6 +107,34 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
   theme: undefined,
 });
 
+const SMALL_BREAKPOINT = 700;
+const XSMALL_BREAKPOINT = 300;
+const MediaChromeSizes = {
+  LG: 'large',
+  SM: 'small',
+  XS: 'extra-small',
+};
+
+const PlayerSizeWidths = {
+  [MediaChromeSizes.LG]: 800,
+  [MediaChromeSizes.SM]: 600,
+  [MediaChromeSizes.XS]: 250,
+};
+const PlayerSizeHeights = {
+  [MediaChromeSizes.LG]: 450,
+  [MediaChromeSizes.SM]: 338,
+  [MediaChromeSizes.XS]: 141,
+};
+
+const DEFAULT_INITIAL_STYLES_STATE = {
+  // width: PlayerSizeWidths[MediaChromeSizes.XS] + 'px',
+};
+
+const DEFAULT_INITIAL_OPTION_STYLES_STATE = {
+  '--player-height': PlayerSizeHeights[MediaChromeSizes.LG] + 'px'
+  // '--player-height': PlayerSizeHeights[MediaChromeSizes.XS] + 'px'
+};
+
 const reducer = (state: Partial<{ [k: string]: any }>, action): Partial<{ [k: string]: any }> => {
   const { type, value } = action;
   switch (type) {
@@ -186,25 +217,6 @@ const UrlPathRenderer = ({
   );
 };
 
-const SMALL_BREAKPOINT = 700;
-const XSMALL_BREAKPOINT = 300;
-const MediaChromeSizes = {
-  LG: 'large',
-  SM: 'small',
-  XS: 'extra-small',
-};
-
-const PlayerSizeWidths = {
-  [MediaChromeSizes.LG]: 800,
-  [MediaChromeSizes.SM]: 600,
-  [MediaChromeSizes.XS]: 250,
-};
-const PlayerSizeHeights = {
-  [MediaChromeSizes.LG]: 450,
-  [MediaChromeSizes.SM]: 338,
-  [MediaChromeSizes.XS]: 141,
-};
-
 function getPlayerSize(width) {
   if (width == undefined) return undefined;
   return width < XSMALL_BREAKPOINT
@@ -301,6 +313,10 @@ export const getServerSideProps: GetServerSideProps<Props> = async context => {
   return ({ props: { location } })
 };
 
+const MaxResolutionValues = Object.values(MaxResolution);
+const MinResolutionValues = Object.values(MinResolution);
+const RenditionOrderValues = Object.values(RenditionOrder);
+
 function MuxPlayerPage({ location }: Props) {
   const router = useRouter();
   const mediaElRef = useRef(null);
@@ -311,13 +327,11 @@ function MuxPlayerPage({ location }: Props) {
     if (!router.isReady) return;
     dispatch(updateProps(toInitialState(selectedAsset, mediaAssets, router.query)))
   }, [router.query, router.isReady]);
-  const [stylesState, dispatchStyles] = useReducer(reducer, {});
+  const [stylesState, dispatchStyles] = useReducer(reducer, DEFAULT_INITIAL_STYLES_STATE);
   const genericOnChange = (obj) => dispatch(updateProps<MuxPlayerProps>(obj));
   const genericOnStyleChange = (obj) => dispatchStyles(updateProps(obj));
 
-  const [optionStyles, optionsDispatchStyles] = useReducer(reducer, {
-    '--player-height': '450px'
-  });
+  const [optionStyles, optionsDispatchStyles] = useReducer(reducer, DEFAULT_INITIAL_OPTION_STYLES_STATE);
   const optionsGenericOnStyleChange = (obj) => optionsDispatchStyles(updateProps(obj));
   useEffect(() => {
     const height = mediaElRef.current.offsetHeight;
@@ -337,6 +351,11 @@ function MuxPlayerPage({ location }: Props) {
         theme={state.theme}
         envKey={state.envKey}
         metadata={state.metadata}
+        // Test _hlsConfig for MuxPlayer (react) (Note: This also indirectly tests <mux-player> & <mux-video>)
+        // _hlsConfig={{
+        //   startLevel: 2,
+        //   debug: true,
+        // }}
         title={state.title}
         startTime={state.startTime}
         currentTime={state.currentTime}
@@ -363,6 +382,14 @@ function MuxPlayerPage({ location }: Props) {
         paused={state.paused}
         autoPlay={state.autoPlay}
         maxResolution={state.maxResolution}
+        minResolution={state.minResolution}
+        renditionOrder={state.renditionOrder}
+        // To test/apply extra playlist params to resultant src URL (CJP)
+        // extraSourceParams={{
+        //   foo: 'str',
+        //   bar: true,
+        //   baz: 1,
+        // }}
         preload={state.preload}
         streamType={state.streamType}
         targetLiveWindow={state.targetLiveWindow}
@@ -686,7 +713,19 @@ function MuxPlayerPage({ location }: Props) {
           value={state.maxResolution}
           name="maxResolution"
           onChange={genericOnChange}
-          values={['720p']}
+          values={MaxResolutionValues}
+        />
+        <EnumRenderer
+          value={state.minResolution}
+          name="minResolution"
+          onChange={genericOnChange}
+          values={MinResolutionValues}
+        />
+        <EnumRenderer
+          value={state.renditionOrder}
+          name="renditionOrder"
+          onChange={genericOnChange}
+          values={RenditionOrderValues}
         />
       </div>
 

examples/nextjs-with-typescript/pages/MuxVideo.tsx

@@ -21,6 +21,11 @@ function MuxVideoPage() {
       <MuxVideo
         ref={mediaElRef}
         playbackId="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
+        // Test _hlsConfig for MuxVideo (react)
+        // _hlsConfig={{
+        //   startLevel: 1,
+        //   debug: true,
+        // }}
         // metadata={{
         //   video_id: "video-id-12345",
         //   video_title: "Mad Max: Fury Road Trailer",

examples/vanilla-ts-esm/package.json

@@ -9,19 +9,16 @@
   "scripts": {
     "dev": "yarn esbuild --servedir=public --serve=0.0.0.0:8004",
     "esbuild": "esbuild src/** --bundle --target=es2019 --format=esm --outdir=public/dist",
-    "build": "yarn esbuild --minify",
-    "predeploy": "yarn run build",
-    "deploy": "gh-pages --dist public --dest ./examples/mux-elements/"
+    "build": "yarn esbuild --minify"
   },
   "devDependencies": {
-    "esbuild": "^0.15.7",
-    "gh-pages": "^3.2.3",
+    "esbuild": "^0.19.4",
     "typescript": "^4.9.4"
   },
   "dependencies": {
+    "@mux/mux-active-viewer-count": ">=0.2.0-alpha.0",
     "@mux/mux-audio": ">=0.3.0",
     "@mux/mux-player": ">=1.0.0-beta.0",
-    "@mux/mux-active-viewer-count": ">=0.2.0-alpha.0",
     "@mux/mux-uploader": ">=1.0.0-beta.0",
     "@mux/mux-video": ">=0.3.0"
   }

examples/vanilla-ts-esm/public/index.html

@@ -35,7 +35,7 @@ <h1><a href="/">Elements</a></h1>
         <li><a href="./mux-player-poster-slot.html" class="player">&lt;mux-player&gt; (poster slot)</a></li>
         <li><a href="./mux-player-audio-tracks.html" class="player">&lt;mux-player&gt; (audio tracks)</a></li>
         <li><a href="./mux-player-theme.html" class="player">&lt;mux-player&gt; (microvideo theme)</a></li>
-        <li><a href="./mux-player-theme-gerwig.html" class="player">&lt;mux-player&gt; (Gerwig theme)</a></li>
+        <li><a href="./mux-player-theme-classic.html" class="player">&lt;mux-player&gt; (classic theme)</a></li>
         <li><a href="./mux-uploader-simple.html" class="uploader">&lt;mux-uploader&gt;</a></li>
         <li><a href="./mux-uploader-full.html" class="uploader">&lt;mux-uploader&gt; (full-page)</a></li>
       </ul>

examples/vanilla-ts-esm/public/mux-player-theme-gerwig.html → examples/vanilla-ts-esm/public/mux-player-theme-classic.html

@@ -2,14 +2,14 @@
 <html>
   <head>
     <meta name="viewport" content="width=device-width" />
-    <title>&lt;mux-player&gt; theme Gerwig</title>
+    <title>&lt;mux-player&gt; theme Classic</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
     <link rel="stylesheet" href="./styles.css">
     <script
       defer
       src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"
     ></script>
-    <script type="module" src="./dist/mux-player-gerwig-theme.js"></script>
+    <script type="module" src="./dist/mux-player-classic-theme.js"></script>
     <script type="module" src="./dist/mux-player.js"></script>
     <style>
       mux-player {
@@ -44,13 +44,13 @@ <h1><a href="/">Elements</a></h1>
     </header>
 
     <mux-player
-      theme="gerwig"
+      theme="classic"
       stream-type="on-demand"
       playback-id="VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA"
     ></mux-player>
 
     <mux-player
-      theme="gerwig"
+      theme="classic"
       stream-type="live:dvr"
       playback-id="v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM"
       title="My amazing video"

examples/vanilla-ts-esm/public/mux-player.html

@@ -47,11 +47,11 @@ <h1><a href="/">Elements</a></h1>
       playback-id="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
     ></mux-player>
 
-    <!-- <mux-player
+    <mux-player
       stream-type="live:dvr"
       playback-id="v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM"
       title="My amazing video"
-    ></mux-player> -->
+    ></mux-player>
 
     <a href="../">Browse Elements</a>
   </body>

examples/vanilla-ts-esm/src/mux-player-classic-theme.ts

@@ -0,0 +1 @@
+export * as ThemeClassic from "@mux/mux-player/themes/classic";

packages/mux-audio-react/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/muxinc/elements/compare/@mux/mux-audio-react@0.6.21...@mux/mux-audio-react@0.7.0) (2023-10-24)
+
+
+### Features
+
+* Manifest manipulation and other media stream query param props. ([954b2c8](https://github.com/muxinc/elements/commit/954b2c80d7df88bb4585c46a15dd1185d56dcf9a))
+
+
+
+
+
 ## [0.6.21](https://github.com/muxinc/elements/compare/@mux/mux-audio-react@0.6.20...@mux/mux-audio-react@0.6.21) (2023-10-03)
 
 **Note:** Version bump only for package @mux/mux-audio-react

packages/mux-audio-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mux/mux-audio-react",
-  "version": "0.6.21",
+  "version": "0.7.0",
   "description": "A custom mux audio element for React that Just Works™",
   "keywords": [
     "audio",
@@ -68,7 +68,7 @@
     }
   },
   "dependencies": {
-    "@mux/playback-core": "0.20.2",
+    "@mux/playback-core": "0.21.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {

packages/mux-audio-react/src/index.tsx

@@ -24,16 +24,16 @@ const playerSoftwareVersion = getPlayerVersion();
 const playerSoftwareName = 'mux-audio-react';
 
 const MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>((props, ref) => {
-  const { playbackId, src: outerSrc, children, autoPlay, preload, ...restProps } = props;
+  const { playbackId, src: outerSrc, children, autoPlay, preload, _hlsConfig, ...restProps } = props;
 
   const [playerInitTime] = useState(generatePlayerInitTime());
-  const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(playbackId) ?? outerSrc);
+  const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(props) ?? outerSrc);
   const playbackCoreRef = useRef<PlaybackCore | undefined>(undefined);
   const innerMediaElRef = useRef<HTMLAudioElement>(null);
   const mediaElRef = useCombinedRefs(innerMediaElRef, ref);
 
   useEffect(() => {
-    setSrc(toMuxVideoURL(playbackId) ?? outerSrc);
+    setSrc(toMuxVideoURL(props) ?? outerSrc);
   }, [outerSrc, playbackId]);
 
   useEffect(() => {
@@ -82,6 +82,7 @@ MuxAudio.propTypes = {
   // Improve this by adding a full shape() definition for all metadata props
   // metadata: PropTypes.shape({}),
   metadata: PropTypes.any,
+  _hlsConfig: PropTypes.any,
   beaconCollectionDomain: PropTypes.string,
   playbackId: PropTypes.string,
   playerInitTime: PropTypes.number,

packages/mux-audio/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.11.0](https://github.com/muxinc/elements/compare/@mux/mux-audio@0.10.11...@mux/mux-audio@0.11.0) (2023-10-24)
+
+
+### Features
+
+* Manifest manipulation and other media stream query param props. ([954b2c8](https://github.com/muxinc/elements/commit/954b2c80d7df88bb4585c46a15dd1185d56dcf9a))
+
+
+
+
+
 ## [0.10.11](https://github.com/muxinc/elements/compare/@mux/mux-audio@0.10.10...@mux/mux-audio@0.10.11) (2023-10-03)
 
 **Note:** Version bump only for package @mux/mux-audio

packages/mux-audio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mux/mux-audio",
-  "version": "0.10.11",
+  "version": "0.11.0",
   "description": "A custom mux audio element for the browser that Just Works™",
   "keywords": [
     "audio",
@@ -65,7 +65,7 @@
     "publish-release": "../../scripts/publish.sh"
   },
   "dependencies": {
-    "@mux/playback-core": "0.20.2",
+    "@mux/playback-core": "0.21.0",
     "custom-media-element": "0.2.0"
   },
   "devDependencies": {

packages/mux-audio/src/index.ts

@@ -18,6 +18,7 @@ import type { PlaybackCore, PlaybackEngine, ExtensionMimeTypeMap } from '@mux/pl
 import { getPlayerVersion } from './env';
 // this must be imported after playback-core for the polyfill to be included
 import { CustomAudioElement, Events as AudioEvents } from 'custom-media-element';
+import { HlsConfig } from 'hls.js';
 
 /** @TODO make the relationship between name+value smarter and more deriveable (CJP) */
 type AttributeNames = {
@@ -60,6 +61,7 @@ class MuxAudioElement extends CustomAudioElement implements Partial<MuxMediaProp
   #loadRequested?: Promise<void> | null;
   #playerInitTime: number;
   #metadata: Readonly<Metadata> = {};
+  #_hlsConfig?: Partial<HlsConfig>;
 
   constructor() {
     super();
@@ -294,6 +296,14 @@ class MuxAudioElement extends CustomAudioElement implements Partial<MuxMediaProp
     }
   }
 
+  get _hlsConfig() {
+    return this.#_hlsConfig;
+  }
+
+  set _hlsConfig(val: Readonly<Partial<HlsConfig>> | undefined) {
+    this.#_hlsConfig = val;
+  }
+
   async #requestLoad() {
     if (this.#loadRequested) return;
     await (this.#loadRequested = Promise.resolve());
@@ -346,8 +356,7 @@ class MuxAudioElement extends CustomAudioElement implements Partial<MuxMediaProp
         this.#core?.setPreload(newValue as HTMLMediaElement['preload']);
         break;
       case Attributes.PLAYBACK_ID:
-        /** @TODO Improv+Discuss - how should playback-id update wrt src attr changes (and vice versa) (CJP) */
-        this.src = toMuxVideoURL(newValue ?? undefined) as string;
+        this.src = toMuxVideoURL(this) as string;
         break;
       case Attributes.DEBUG: {
         const debug = this.debug;