feat: add @mux/mux-player-react/news package

Author: luwes

examples/nextjs-with-typescript/pages/playlist-page.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import { MuxNewsPlayer } from "@mux/mux-player-react"
+import MuxNewsPlayer from "@mux/mux-player-react/news"
 import { useEffect, useState } from 'react';
 
 function MuxVideoPage() {

packages/mux-player-react/package.json

@@ -22,6 +22,9 @@
       ],
       "lazy": [
         "./dist/types-ts3.4/lazy.d.ts"
+      ],
+      "news": [
+        "./dist/types-ts3.4/news.d.ts"
       ]
     },
     "*": {
@@ -33,6 +36,9 @@
       ],
       "lazy": [
         "./dist/types/lazy.d.ts"
+      ],
+      "news": [
+        "./dist/types/news.d.ts"
       ]
     }
   },
@@ -50,6 +56,13 @@
       "import": "./dist/lazy.mjs",
       "default": "./dist/lazy.mjs"
     },
+    "./news": {
+      "types@<4.3.5": "./dist/types-ts3.4/news/index.d.ts",
+      "types": "./dist/types/news/index.d.ts",
+      "import": "./dist/news/index.mjs",
+      "require": "./dist/news/index.cjs.js",
+      "default": "./dist/news/index.cjs.js"
+    },
     "./themes/*": {
       "types@<4.3.5": "./dist/types-ts3.4/themes/*.d.ts",
       "types": "./dist/types/themes/*.d.ts",
@@ -76,11 +89,13 @@
     "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm dev:esm:lazy",
     "build:cjs": "esbuild src/index.tsx src/themes/*.ts src/themes/*.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:esm": "esbuild src/index.tsx src/themes/*.ts src/themes/*.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:news:esm": "esbuild src/news/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/news/esm.json --format=esm --loader:.css=text --outdir=dist/news --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:news:cjs": "esbuild src/news/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/news/cjs.json --format=cjs --loader:.css=text --outdir=dist/news --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:cjs:lazy": "echo 'esbuild cjs does not support code-splitting. See https://esbuild.github.io/api/#splitting for details'",
     "build:esm:lazy": "esbuild src/lazy.tsx --splitting --target=es2019 --bundle --sourcemap --metafile=./dist/esm.lazy.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:types": "tsc",
     "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel 'build:cjs -- --minify' 'build:esm -- --minify' 'build:esm:lazy -- --minify'"
+    "build": "npm-run-all --parallel 'build:cjs -- --minify' 'build:esm -- --minify' 'build:esm:lazy -- --minify' 'build:news:cjs -- --minify' 'build:news:esm -- --minify'"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",

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

@@ -20,9 +20,6 @@ import useObjectPropEffect, { defaultHasChanged } from './useObjectPropEffect';
 import { getPlayerVersion } from './env';
 
 export { MediaError, MaxResolution, MinResolution, RenditionOrder, generatePlayerInitTime };
-export { MuxNewsPlayer } from './mux-news-player';
-import PlaylistEndScreen from './playlist-end-screen';
-export { PlaylistEndScreen };
 
 type ValueOf<T> = T[keyof T];
 interface GenericEventListener<T extends Event = CustomEvent> {
@@ -91,7 +88,6 @@ export type MuxPlayerProps = {
   programStartTime?: number;
   programEndTime?: number;
   proudlyDisplayMuxBadge?: boolean;
-  muxVideoElement?: string;
   adTagUrl?: string;
   assetStartTime?: number;
   assetEndTime?: number;
@@ -281,7 +277,6 @@ const MuxPlayer = React.forwardRef<
     <MuxPlayerInternal
       /** @TODO Fix types relationships (CJP) */
       ref={playerRef as typeof innerPlayerRef}
-      muxVideoElement={props.muxVideoElement}
       defaultHiddenCaptions={props.defaultHiddenCaptions}
       playerSoftwareName={playerSoftwareName}
       playerSoftwareVersion={playerSoftwareVersion}

…ckages/mux-player-react/MuxNewsPlayer.md …ages/mux-player-react/src/news/README.mdpackages/mux-player-react/MuxNewsPlayer.md renamed to packages/mux-player-react/src/news/README.md packages/mux-player-react/MuxNewsPlayer.md renamed to packages/mux-player-react/src/news/README.md

@@ -21,14 +21,15 @@ You must use the specific custom build through gitpkg as shown in the example be
 
 You can execute
 
-```
-  npm install 'https://gitpkg.vercel.app/muxinc/elements/packages/mux-player-react?release-news-player'
+```bash
+  npm install @mux/mux-player-react
 ```
 
 or manually add it as a dependency in your package.json
+
 ```json
 "dependencies": {
-  "@mux/mux-player-react": "https://gitpkg.vercel.app/muxinc/elements/packages/mux-player-react?release-news-player",
+  "@mux/mux-player-react": "^3.5.0",
 }
 ```
 
@@ -40,7 +41,7 @@ In your React component:
 
 ```jsx
 'use client';
-import { MuxNewsPlayer } from "@mux/mux-player-react";
+import MuxNewsPlayer from "@mux/mux-player-react/news";
 ```
 
 ### 2. Load the Google IMA SDK

…mux-player-react/src/mux-news-player.tsx …ages/mux-player-react/src/news/index.tsxpackages/mux-player-react/src/mux-news-player.tsx renamed to packages/mux-player-react/src/news/index.tsx packages/mux-player-react/src/mux-news-player.tsx renamed to packages/mux-player-react/src/news/index.tsx

@@ -1,13 +1,10 @@
 /* eslint @typescript-eslint/triple-slash-reference: "off" */
 /// <reference types="google_interactive_media_ads_types" preserve="true"/>
 import React, { useRef, useState } from 'react';
-import PlaylistEndScreen from './playlist-end-screen';
 import '@mux/mux-video/ads';
 import MuxPlayer from '@mux/mux-player-react';
-import NewsTheme from './themes/news-theme';
-
-const INITIAL_AUTOPLAY = false;
-const INITIAL_MUTED = false;
+import NewsTheme from '../themes/news-theme';
+import PlaylistEndScreen from './playlist-end-screen';
 
 export interface VideoItem {
   imageUrl: string;
@@ -22,12 +19,8 @@ export interface PlaylistProps {
   videoList: PlaylistVideos;
 }
 
-export const MuxNewsPlayer = ({ videoList }: PlaylistProps) => {
+const MuxNewsPlayer = ({ videoList, ...props }: PlaylistProps) => {
   const mediaElRef = useRef<any>(null);
-  const [autoplay, setAutoplay] = useState<'muted' | boolean>(INITIAL_AUTOPLAY);
-  const [muted, setMuted] = useState(INITIAL_MUTED);
-  const [paused, setPaused] = useState<boolean | undefined>(true);
-  const [sdkLoaded, setSdkLoaded] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isEndScreenVisible, setIsEndScreenVisible] = useState(false);
   const [playerKey, setPlayerKey] = useState(0);
@@ -54,32 +47,23 @@ export const MuxNewsPlayer = ({ videoList }: PlaylistProps) => {
       <MuxPlayer
         ref={mediaElRef}
         theme="news-theme"
-        themeProps={{ controlBarVertical: true, controlBarPlace: 'start start' }}
         key={`player-${playerKey}`}
         playbackId={videoList[currentIndex].playbackId}
         style={{ aspectRatio: '16/9' }}
-        autoPlay={autoplay}
-        muted={muted}
         maxResolution="2160p"
         minResolution="540p"
         renditionOrder="desc"
         preferPlayback="mse"
         adTagUrl={videoList[currentIndex].adTagUrl}
-        onPlay={() => {
-          setPaused(false);
-        }}
-        onPause={() => {
-          setPaused(true);
-        }}
         onEnded={(_event) => {
-          console.log('ONENDED');
           if (currentIndex < videoList.length - 1) {
             setIsEndScreenVisible(true);
           } else {
             setCurrentIndex(0);
             setPlayerKey((prev) => prev + 1);
           }
         }}
+        {...props}
       >
         <PlaylistEndScreen
           video={currentIndex < videoList.length - 1 ? videoList[currentIndex + 1] : videoList[0]}
@@ -92,3 +76,5 @@ export const MuxNewsPlayer = ({ videoList }: PlaylistProps) => {
     </div>
   );
 };
+
+export default MuxNewsPlayer;

…ages/mux-player-react/src/end-screen.css …r-react/src/news/playlist-end-screen.csspackages/mux-player-react/src/end-screen.css renamed to packages/mux-player-react/src/news/playlist-end-screen.css packages/mux-player-react/src/end-screen.css renamed to packages/mux-player-react/src/news/playlist-end-screen.css

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { VideoItem, PlaylistVideos } from './mux-news-player';
-import style from './end-screen.css';
+import { VideoItem, PlaylistVideos } from '.';
+import style from './playlist-end-screen.css';
 
 interface PlaylistEndScreenProps {
   video: VideoItem;

…player-react/src/playlist-end-screen.tsx …r-react/src/news/playlist-end-screen.tsxpackages/mux-player-react/src/playlist-end-screen.tsx renamed to packages/mux-player-react/src/news/playlist-end-screen.tsx packages/mux-player-react/src/playlist-end-screen.tsx renamed to packages/mux-player-react/src/news/playlist-end-screen.tsx

@@ -106,12 +106,12 @@
     "dev:ads:react:cjs": "npm run build:ads:react:cjs -- --watch=forever",
     "dev:types": "npm run build:types -- -w",
     "dev": "npm-run-all --parallel dev:types dev:esm dev:cjs dev:iife dev:base:* dev:react:* dev:ads:*",
-    "build:esm": "esbuild src/index.ts --target=es2019 --external:@mux/* --bundle --sourcemap --metafile=./dist/esm.json --format=esm --outdir=dist --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm": "esbuild src/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/esm.json --format=esm --outdir=dist --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:esm-module": "esbuild src/index.ts --target=es2019 --bundle --sourcemap --metafile=./dist/module.json --format=esm --outfile=./dist/mux-video.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:cjs": "esbuild src/index.ts --target=es2019 --external:@mux/* --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --outdir=dist --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs": "esbuild src/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --outdir=dist --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:iife": "esbuild src/index.ts --target=es2019 --bundle --sourcemap --metafile=./dist/iife.json --format=iife --outfile=./dist/mux-video.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:base:esm": "esbuild src/base.ts --target=es2019 --bundle --sourcemap --metafile=./dist/base/esm.json --format=esm --outdir=dist --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:base:cjs": "esbuild src/base.ts --target=es2019 --bundle --sourcemap --metafile=./dist/base/cjs.json --format=cjs --outdir=dist --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:base:esm": "esbuild src/base.ts --target=es2019 --external:@mux/* --external:custom-media-element --bundle --sourcemap --metafile=./dist/base/esm.json --format=esm --outdir=dist --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:base:cjs": "esbuild src/base.ts --target=es2019 --external:@mux/* --external:custom-media-element --bundle --sourcemap --metafile=./dist/base/cjs.json --format=cjs --outdir=dist --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:react:cjs": "esbuild src/react.ts --target=es2019 --bundle --format=cjs --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/mux-video",
     "build:react:esm": "esbuild src/react.ts --target=es2019 --bundle --format=esm --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/mux-video",
     "build:ads:esm": "esbuild src/ads/index.ts --target=es2019 --external:@mux/* --bundle --sourcemap --metafile=./dist/ads/esm.json --format=esm --outdir=dist/ads --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",