use @mux/blurup instead of @mux/blurhash

muxinc · Apr 9, 2024 · 3df5ae9 · 3df5ae9
1 parent c834bae
commit 3df5ae9
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 252 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -1 +1 @@
-nodejs lts
+nodejs 20.12.1
diff --git a/components/mux-player-classic.tsx b/components/mux-player-classic.tsx
@@ -9,7 +9,7 @@ type Props = {
   color?: string;
   poster: string;
   currentTime?: number;
-  blurHashBase64?: string;
+  blurDataURL?: string;
   aspectRatio: number;
   onLoaded: () => void;
   onError: (error: ErrorEvent) => void;
@@ -22,7 +22,7 @@ const MuxPlayerInternal: React.FC<Props> = ({
   poster,
   currentTime,
   color,
-  blurHashBase64,
+  blurDataURL,
   onLoaded,
   aspectRatio,
 }) => {
@@ -54,7 +54,7 @@ const MuxPlayerInternal: React.FC<Props> = ({
         envKey={process.env.NEXT_PUBLIC_MUX_ENV_KEY}
         streamType="on-demand"
         primaryColor={color}
-        placeholder={blurHashBase64}
+        placeholder={blurDataURL}
         style={{
           aspectRatio: `${aspectRatio}`,
           maxWidth: '100%',

diff --git a/components/mux-player.tsx b/components/mux-player.tsx
@@ -8,7 +8,7 @@ type Props = {
   color?: string;
   poster: string;
   currentTime?: number;
-  blurHashBase64?: string;
+  blurDataURL?: string;
   aspectRatio: number;
   onLoaded: () => void;
   onError: (error: ErrorEvent) => void;
@@ -21,7 +21,7 @@ const MuxPlayerInternal: React.FC<Props> = ({
   poster,
   currentTime,
   color,
-  blurHashBase64,
+  blurDataURL,
   onLoaded,
   aspectRatio,
 }) => {
@@ -53,7 +53,7 @@ const MuxPlayerInternal: React.FC<Props> = ({
         envKey={process.env.NEXT_PUBLIC_MUX_ENV_KEY}
         streamType="on-demand"
         accentColor={color}
-        placeholder={blurHashBase64}
+        placeholder={blurDataURL}
         style={{
           aspectRatio: `${aspectRatio}`,
           maxWidth: '100%',

diff --git a/components/player-loader.tsx b/components/player-loader.tsx
@@ -19,7 +19,7 @@ const MuxVideo = dynamic(() => import('./mux-video'));
 const WinampPlayer = dynamic(() => import('./winamp-player'));
 
 type Props = {
-  blurHashBase64?: string;
+  blurDataURL?: string;
   playbackId: string;
   poster: string;
   color?: string;
@@ -32,15 +32,15 @@ type Props = {
 
 
 
-const PlayerLoader = forwardRef<PlayerElement, Props>(({ playbackId, poster, currentTime, aspectRatio, playerType, color, blurHashBase64, onLoaded, onError }, ref) => {
+const PlayerLoader = forwardRef<PlayerElement, Props>(({ playbackId, poster, currentTime, aspectRatio, playerType, color, blurDataURL, onLoaded, onError }, ref) => {
   const isAMuxPlayer = () => [MUX_PLAYER_CLASSIC_TYPE, MUX_PLAYER_TYPE].includes(playerType);
 
   return (
     <>
       <div className='video-container'>
         {playerType === PLYR_TYPE && <PlyrPlayer forwardedRef={ref as ForwardedRef<HTMLVideoElementWithPlyr>} aspectRatio={aspectRatio} playbackId={playbackId} poster={poster} currentTime={currentTime} onLoaded={onLoaded} onError={onError} />}
-        {playerType === MUX_PLAYER_TYPE && <MuxPlayer forwardedRef={ref as ForwardedRef<MuxPlayerElement>} playbackId={playbackId} aspectRatio={aspectRatio} poster={poster} currentTime={currentTime} onLoaded={onLoaded} onError={onError} blurHashBase64={blurHashBase64} color={color} />}
-        {playerType === MUX_PLAYER_CLASSIC_TYPE && <MuxPlayerClassic forwardedRef={ref as ForwardedRef<MuxPlayerElement>} playbackId={playbackId} aspectRatio={aspectRatio} poster={poster} currentTime={currentTime} onLoaded={onLoaded} onError={onError} blurHashBase64={blurHashBase64} color={color} />}
+        {playerType === MUX_PLAYER_TYPE && <MuxPlayer forwardedRef={ref as ForwardedRef<MuxPlayerElement>} playbackId={playbackId} aspectRatio={aspectRatio} poster={poster} currentTime={currentTime} onLoaded={onLoaded} onError={onError} blurDataURL={blurDataURL} color={color} />}
+        {playerType === MUX_PLAYER_CLASSIC_TYPE && <MuxPlayerClassic forwardedRef={ref as ForwardedRef<MuxPlayerElement>} playbackId={playbackId} aspectRatio={aspectRatio} poster={poster} currentTime={currentTime} onLoaded={onLoaded} onError={onError} blurDataURL={blurDataURL} color={color} />}
         {playerType === MUX_VIDEO_TYPE && <MuxVideo playbackId={playbackId} poster={poster} currentTime={currentTime} onLoaded={onLoaded} onError={onError} />}
         {playerType === WINAMP_PLAYER_TYPE && <WinampPlayer playbackId={playbackId} poster={poster} currentTime={currentTime} onLoaded={onLoaded} onError={onError} />}
       </div>

diff --git a/components/player-page.tsx b/components/player-page.tsx
@@ -18,7 +18,7 @@ type PageProps = Props & {
 
 const META_TITLE = 'View this video created on stream.new';
 
-const PlayerPage: React.FC<PageProps> = ({ playbackId, videoExists, shareUrl, poster, playerType, blurHashBase64, aspectRatio }) => {
+const PlayerPage: React.FC<PageProps> = ({ playbackId, videoExists, shareUrl, poster, playerType, blurDataURL, aspectRatio }) => {
   const [isLoaded, setIsLoaded] = useState(false);
   const [tryToLoadPlayer, setTryToLoadPlayer] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
@@ -145,7 +145,7 @@ const PlayerPage: React.FC<PageProps> = ({ playbackId, videoExists, shareUrl, po
         <div className="wrapper">
           {(tryToLoadPlayer && aspectRatio && !openReport) && (
             <PlayerLoader
-              blurHashBase64={blurHashBase64}
+              blurDataURL={blurDataURL}
               color={color}
               playbackId={playbackId}
               poster={poster}

diff --git a/lib/player-page-utils.ts b/lib/player-page-utils.ts
@@ -1,11 +1,12 @@
-import { getImageDimensions } from "./image-dimensions";
-import muxBlurHash from "@mux/blurhash";
-import { getImageBaseUrl, getStreamBaseUrl } from "./urlutils";
-import { HOST_URL } from "../constants";
-import type { PlayerTypes } from "../constants";
+import { getImageDimensions } from './image-dimensions';
+// @ts-expect-error no types yet
+import { createBlurUp } from '@mux/blurup';
+import { getImageBaseUrl, getStreamBaseUrl } from './urlutils';
+import { HOST_URL } from '../constants';
+import type { PlayerTypes } from '../constants';
 
 export type Props = {
-  blurHashBase64?: string;
+  blurDataURL?: string;
   playbackId: string;
   shareUrl: string;
   poster: string;
@@ -27,19 +28,19 @@ export async function getPropsFromPlaybackId(
   const poster = `${getImageBaseUrl()}/${playbackId}/thumbnail.jpg`;
   const shareUrl = `${HOST_URL}/v/${playbackId}`;
   const dimensions = await getImageDimensions(playbackId);
-  let blurHashBase64;
+  let blurDataURL;
   try {
-    blurHashBase64 = (await muxBlurHash(playbackId)).blurHashBase64;
+    blurDataURL = (await createBlurUp(playbackId, {})).blurDataURL;
   } catch (e) {
-    console.error('Error fetching blurhash', e);
+    console.error('Error fetching blurup', e);
   }
   const videoExists = await getVideoExistsAsync(playbackId);
   const props: Props = {
-    blurHashBase64,
+    blurDataURL,
     playbackId,
     shareUrl,
     poster,
-    videoExists
+    videoExists,
   };
   if (dimensions?.aspectRatio) {
     props.aspectRatio = dimensions.aspectRatio;

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@google-cloud/vision": "^2.3.2",
-    "@mux/blurhash": "^0.1.2",
+    "@mux/blurup": "^0.1.0",
     "@mux/mux-node": "^8.2.1",
     "@mux/mux-player-react": "^2.4.0",
     "@mux/mux-uploader-react": "^1.0.0-beta.15",

diff --git a/pages/v/[id]/[playerType].tsx b/pages/v/[id]/[playerType].tsx
@@ -25,15 +25,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
   };
 };
 
-const PlayerTypePage: React.FC<PlayerTypePageProps> = ({ playbackId, playerType, videoExists, shareUrl, poster, blurHashBase64, aspectRatio }) => {
+const PlayerTypePage: React.FC<PlayerTypePageProps> = ({ playbackId, playerType, videoExists, shareUrl, poster, blurDataURL, aspectRatio }) => {
   return (
     <PlayerPage
       playbackId={playbackId}
       videoExists={videoExists}
       shareUrl={shareUrl}
       poster={poster}
       aspectRatio={aspectRatio}
-      blurHashBase64={blurHashBase64}
+      blurDataURL={blurDataURL}
       playerType={playerType}
     />
   );

diff --git a/pages/v/[id]/index.tsx b/pages/v/[id]/index.tsx
@@ -23,15 +23,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
   };
 };
 
-const Playback: React.FC<Props> = ({ playbackId, videoExists, shareUrl, poster, blurHashBase64, aspectRatio }) => {
+const Playback: React.FC<Props> = ({ playbackId, videoExists, shareUrl, poster, blurDataURL, aspectRatio }) => {
   return (
     <PlayerPage
       playbackId={playbackId}
       videoExists={videoExists}
       shareUrl={shareUrl}
       poster={poster}
       aspectRatio={aspectRatio}
-      blurHashBase64={blurHashBase64}
+      blurDataURL={blurDataURL}
       playerType={MUX_PLAYER_TYPE}
     />
   );