From ed7546aede8ef26c19ea6feb40f84fd6ca8bac4d Mon Sep 17 00:00:00 2001
From: Seif Ghezala <seif@tinloof.com>
Date: Wed, 16 Oct 2024 14:17:38 +0400
Subject: [PATCH] Update video input

---
 storefront/components/sections/hero/index.tsx |  23 +-
 storefront/components/shared/mux-video.tsx    | 113 ---------
 storefront/components/shared/sanity-image.tsx | 122 +++++++++-
 storefront/components/shared/video.tsx        |  69 ++++++
 storefront/data/sanity/queries/section.ts     |  11 -
 storefront/next.config.mjs                    |   1 -
 storefront/package.json                       |   2 +-
 storefront/pnpm-lock.yaml                     | 225 +-----------------
 storefront/sanity.config.ts                   |   2 -
 storefront/sanity/schemas/index.ts            |   2 +
 storefront/sanity/schemas/objects/video.ts    |  21 ++
 storefront/sanity/schemas/sections/hero.ts    |   2 +-
 12 files changed, 229 insertions(+), 364 deletions(-)
 delete mode 100644 storefront/components/shared/mux-video.tsx
 create mode 100644 storefront/components/shared/video.tsx
 create mode 100644 storefront/sanity/schemas/objects/video.ts

diff --git a/storefront/components/sections/hero/index.tsx b/storefront/components/sections/hero/index.tsx
index d3bf01a..050561e 100644
--- a/storefront/components/sections/hero/index.tsx
+++ b/storefront/components/sections/hero/index.tsx
@@ -1,21 +1,15 @@
-import MuxVideo from "@/components/shared/mux-video";
 import {SanityImage} from "@/components/shared/sanity-image";
+import Video from "@/components/shared/video";
 import {stegaClean} from "@sanity/client/stega";
-import React from "react";
 
 import type {ModularPageSection} from "../types";
 
 import LargeHero from "./large-hero";
 import SimpleHero from "./simple-hero";
 
-interface VideoData {
-  playbackId?: string;
-  resolution?: string;
-}
-
 export default function Hero(props: ModularPageSection<"section.hero">) {
   const mediaType = stegaClean(props.mediaType);
-  const video = stegaClean(props.video?.asset) as unknown as VideoData;
+  const video = props.video;
   const largeImage = stegaClean(props.largeImage);
   return (
     <section
@@ -25,11 +19,14 @@ export default function Hero(props: ModularPageSection<"section.hero">) {
       {mediaType === "image" && <SimpleHero {...props} />}
       {mediaType === "video" && video && (
         <LargeHero props={props}>
-          <MuxVideo
-            className="aspect-[16/9] min-h-[590px] w-full rounded-lg object-cover object-center"
-            loading="eager"
-            video={video}
-          />
+          <div className="aspect-[16/9] min-h-[590px] w-full overflow-hidden rounded-lg object-cover object-center">
+            <Video
+              aspectRatio="16/9"
+              fetchPriority="high"
+              poster={video.poster}
+              videoUrl={video.url}
+            />
+          </div>
         </LargeHero>
       )}
       {mediaType === "largeImage" && largeImage && (
diff --git a/storefront/components/shared/mux-video.tsx b/storefront/components/shared/mux-video.tsx
deleted file mode 100644
index 5ecfb91..0000000
--- a/storefront/components/shared/mux-video.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import useInView from "@/hooks/use-in-view";
-import Image, {getImageProps} from "next/image";
-import React, {useEffect} from "react";
-import {preload} from "react-dom";
-
-export type MuxVideoProps = {
-  loading?: "eager" | "lazy";
-  video?: {
-    playbackId?: string;
-    resolution?: string;
-  };
-} & Omit<VideoProps, "mp4Url" | "webmUrl">;
-
-export default function MuxVideo({
-  loading,
-  video,
-  ...videoProps
-}: MuxVideoProps) {
-  const {playbackId, resolution} = video ?? {};
-
-  if (!playbackId || !resolution) {
-    return null;
-  }
-
-  const mp4Url = `https://stream.mux.com/${playbackId}/${
-    resolution === "SD" ? "medium" : "high"
-  }.mp4`;
-
-  const webmUrl = `https://stream.mux.com/${playbackId}/${
-    resolution === "SD" ? "medium" : "high"
-  }.webm`;
-
-  const {
-    props: {src: poster},
-  } = getImageProps({
-    alt: "",
-    fill: true,
-    src: `https://image.mux.com/${playbackId}/thumbnail.webp?fit_mode=smartcrop&time=0`,
-  });
-
-  if (loading === "eager") {
-    preload(poster, {
-      as: "image",
-      fetchPriority: "high",
-    });
-
-    return (
-      <Video
-        mp4Url={mp4Url}
-        poster={poster}
-        src={mp4Url}
-        webmUrl={webmUrl}
-        {...videoProps}
-      />
-    );
-  }
-}
-
-type VideoProps = {
-  loading?: "eager" | "lazy";
-  mp4Url: string;
-  webmUrl: string;
-} & React.DetailedHTMLProps<
-  React.VideoHTMLAttributes<HTMLVideoElement>,
-  HTMLVideoElement
->;
-
-function Video({loading, mp4Url, webmUrl, ...props}: VideoProps) {
-  const [appeared, setAppeared] = React.useState(false);
-  const {inView, ref} = useInView();
-  const hidden = loading === "lazy" && !appeared;
-
-  useEffect(() => {
-    if (inView) {
-      setAppeared(true);
-    }
-  }, [inView]);
-
-  return (
-    <>
-      {hidden ? (
-        <Image
-          alt={"Video poster"}
-          className={props.className}
-          loading="lazy"
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          ref={ref}
-          src={props.poster ?? ""}
-          style={props.style}
-        />
-      ) : (
-        <video
-          autoPlay
-          className="rounded-2xl"
-          controls={false}
-          loop
-          muted
-          playsInline
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          ref={ref}
-          {...props}
-        >
-          <source src={mp4Url} type="video/mp4" />
-          <source src={webmUrl} type="video/webm" />
-        </video>
-      )}
-    </>
-  );
-}
diff --git a/storefront/components/shared/sanity-image.tsx b/storefront/components/shared/sanity-image.tsx
index e9641fd..41b922d 100644
--- a/storefront/components/shared/sanity-image.tsx
+++ b/storefront/components/shared/sanity-image.tsx
@@ -5,14 +5,118 @@ import {SanityImage as SanityImageBase} from "@tinloof/sanity-web";
 
 export type SanityImageProps = Omit<SanityImageBaseProps, "config">;
 
+const imageConfig = {
+  dataset: config.sanity.dataset,
+  projectId: config.sanity.projectId,
+};
+
 export function SanityImage(props: SanityImageProps) {
-  return (
-    <SanityImageBase
-      config={{
-        dataset: config.sanity.dataset,
-        projectId: config.sanity.projectId,
-      }}
-      {...props}
-    />
-  );
+  return <SanityImageBase config={imageConfig} {...props} />;
+}
+
+import type {ImageUrlBuilder} from "sanity";
+
+import {getImageDimensions} from "@sanity/asset-utils";
+import imageUrlBuilder from "@sanity/image-url";
+
+const isDev = process.env.NODE_ENV === "development";
+
+export function resolveImageData({aspectRatio, data}: SanityImageProps) {
+  if (!data || !data.asset) {
+    return null;
+  }
+
+  const _ref = data.asset._ref;
+  const {height, width} = getImageDimensions(_ref);
+  const aspectRatioValues = aspectRatio?.split("/");
+
+  if (aspectRatio && aspectRatioValues?.length !== 2 && isDev) {
+    console.warn(
+      `Invalid aspect ratio: ${aspectRatio}. Using the original aspect ratio. The aspect ratio should be in the format "width/height".`,
+    );
+  }
+
+  const aspectRatioWidth = aspectRatioValues
+    ? parseFloat(aspectRatioValues[0])
+    : undefined;
+  const aspectRatioHeight = aspectRatioValues
+    ? parseFloat(aspectRatioValues[1])
+    : undefined;
+
+  const urlBuilder = imageUrlBuilder(imageConfig)
+    .image({
+      _ref,
+      crop: data.crop,
+      hotspot: data.hotspot,
+    })
+    .auto("format");
+
+  // Values used for srcset attribute of image tag (in pixels)
+  const srcSetValues = [
+    50, 100, 200, 450, 600, 750, 900, 1000, 1250, 1500, 1750, 2000, 2500, 3000,
+    3500, 4000, 5000,
+  ];
+
+  const src = generateImageUrl({
+    aspectRatioHeight,
+    aspectRatioWidth,
+    urlBuilder,
+    width,
+  });
+
+  // Create srcset attribute
+  const srcSet = srcSetValues
+    .filter((value) => value < width)
+    .map((value) => {
+      const imageUrl = generateImageUrl({
+        aspectRatioHeight,
+        aspectRatioWidth,
+        urlBuilder,
+        width: value,
+      });
+      if (width >= value) {
+        return `${imageUrl} ${value}w`;
+      }
+      return "";
+    })
+    .join(", ")
+    .concat(`, ${src} ${width}w`);
+
+  return {
+    height,
+    src,
+    srcSet,
+    width,
+  };
+}
+
+function generateImageUrl(args: {
+  aspectRatioHeight?: number;
+  aspectRatioWidth?: number;
+  blur?: number;
+  urlBuilder: ImageUrlBuilder;
+  width: number;
+}) {
+  const {
+    aspectRatioHeight,
+    aspectRatioWidth,
+    blur = 0,
+    urlBuilder,
+    width,
+  } = args;
+  let imageUrl = urlBuilder.width(width);
+  const imageHeight =
+    aspectRatioHeight && aspectRatioWidth
+      ? Math.round((width / aspectRatioWidth) * aspectRatioHeight)
+      : undefined;
+
+  if (imageHeight) {
+    imageUrl = imageUrl.height(imageHeight);
+  }
+
+  if (blur && blur > 0) {
+    imageUrl = imageUrl.blur(blur);
+  }
+
+  return imageUrl.url();
 }
diff --git a/storefront/components/shared/video.tsx b/storefront/components/shared/video.tsx
new file mode 100644
index 0000000..af6365c
--- /dev/null
+++ b/storefront/components/shared/video.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import type {Video as VideoType} from "@/types/sanity.generated";
+
+import {SanityImage, resolveImageData} from "@/components/shared/sanity-image";
+import React, {useEffect, useState} from "react";
+import {preload} from "react-dom";
+
+export type VideoProps = {
+  aspectRatio?: string;
+  controls?: boolean;
+  fetchPriority?: "default" | "high";
+  poster?: VideoType["poster"];
+  videoUrl?: null | string;
+} & Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "poster" | "src">;
+
+export default function Video({
+  aspectRatio,
+  controls,
+  fetchPriority = "default",
+  poster,
+  videoUrl,
+  ...props
+}: VideoProps) {
+  const [appeared, setAppeared] = useState(fetchPriority === "high");
+
+  const posterData = !poster ? null : resolveImageData({data: poster});
+
+  useEffect(() => {
+    setAppeared(true);
+  }, []);
+
+  if (!poster || !posterData || !videoUrl) {
+    return null;
+  }
+
+  const videoElement = (
+    <video
+      autoPlay
+      controls={controls}
+      height={posterData.height}
+      loop
+      muted
+      playsInline
+      poster={posterData?.src}
+      src={videoUrl}
+      width={posterData.width}
+      {...props}
+    />
+  );
+
+  if (fetchPriority === "high" && posterData?.src) {
+    preload(posterData.src, {
+      as: "image",
+      fetchPriority: "high",
+    });
+    return videoElement;
+  }
+
+  return (
+    <>
+      {!appeared ? (
+        <SanityImage aspectRatio={aspectRatio} data={poster} />
+      ) : (
+        videoElement
+      )}
+    </>
+  );
+}
diff --git a/storefront/data/sanity/queries/section.ts b/storefront/data/sanity/queries/section.ts
index 05b037c..f2b4885 100644
--- a/storefront/data/sanity/queries/section.ts
+++ b/storefront/data/sanity/queries/section.ts
@@ -1,15 +1,5 @@
 import {groq} from "next-sanity";
 
-export const HERO_SECTION_QUERY = /* groq */ `{
-    ...,
-    video {
-        asset->{
-           "resolution": data.max_stored_resolution,
-           playbackId,
-        }
-    }
-}`;
-
 export const TESTIMONIALS_SECTION_QUERY = groq`{
     ...,
     testimonials[] -> 
@@ -17,6 +7,5 @@ export const TESTIMONIALS_SECTION_QUERY = groq`{
 
 export const SECTIONS_BODY_FRAGMENT = groq`{
     ...,
-    _type == "section.hero" => ${HERO_SECTION_QUERY},
     _type == "section.testimonials" => ${TESTIMONIALS_SECTION_QUERY},
 }`;
diff --git a/storefront/next.config.mjs b/storefront/next.config.mjs
index 8f69d09..b6f1789 100644
--- a/storefront/next.config.mjs
+++ b/storefront/next.config.mjs
@@ -5,7 +5,6 @@ const config = {
       {hostname: "cdn.sanity.io"},
       {hostname: "munchies.medusajs.app"},
       {hostname: "tinloof-munchies.s3.eu-north-1.amazonaws.com"},
-      {hostname: "image.mux.com"},
     ],
   },
   eslint: {
diff --git a/storefront/package.json b/storefront/package.json
index a7e83af..c4f31d7 100644
--- a/storefront/package.json
+++ b/storefront/package.json
@@ -44,10 +44,10 @@
     "nuqs": "^1.20.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-remove-scroll": "^2.6.0",
     "sanity": "^3.48.1",
     "sanity-plugin-hotspot-array": "^2.0.0",
-    "sanity-plugin-mux-input": "^2.3.6",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/storefront/pnpm-lock.yaml b/storefront/pnpm-lock.yaml
index 6996b0d..fe1d8f8 100644
--- a/storefront/pnpm-lock.yaml
+++ b/storefront/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.3.0
+        version: 5.3.0(react@18.3.1)
       react-remove-scroll:
         specifier: ^2.6.0
         version: 2.6.0(@types/react@18.3.11)(react@18.3.1)
@@ -101,9 +104,6 @@ importers:
       sanity-plugin-hotspot-array:
         specifier: ^2.0.0
         version: 2.0.0(@sanity/ui@2.8.9(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sanity@3.59.0(@types/node@20.16.10)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
-      sanity-plugin-mux-input:
-        specifier: ^2.3.6
-        version: 2.3.6(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(sanity@3.59.0(@types/node@20.16.10)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -1281,31 +1281,6 @@ packages:
       vite:
         optional: true
 
-  '@mux/mux-player-react@2.9.1':
-    resolution: {integrity: sha512-1BpMs1J7P+d+/QCf9/mkTk/NPYR6sOskR4Ih0uFZjDAqNUN7/C9Q0FEJ6hF3sFXwAXo50RhnfCzsC5uYx3QHbA==}
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18 || ^19
-      '@types/react-dom': '*'
-      react: ^17.0.2 || ^18 || ^19
-      react-dom: ^17.0.2 || ^18 || ^19
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@mux/mux-player@2.9.1':
-    resolution: {integrity: sha512-TAyoUSPTV0IXWGMOknL6O+IeGSEJ8aS154DzyzqZgdd3zDJHM8JpkyNHgtowatMHT2lB6h+qMtWfp4u3ijpo2A==}
-
-  '@mux/mux-video@0.20.2':
-    resolution: {integrity: sha512-CqkK9EZZWdQE4U62JKlmWDskirT+D9C4suh2tSqKb2CA/0S4ybbbrVWcCKF7xfadUacfKO1yPsOKbe46F6phVQ==}
-
-  '@mux/playback-core@0.25.2':
-    resolution: {integrity: sha512-vrBbCgLHwmPpVxF0QGj+sXHUVXSxgDJJhVm8pxPXEkbw0vjPNHTXgAd/Ty6JA0vZ0ZjoQuAa17AxJ+c02JYeWQ==}
-
-  '@mux/upchunk@3.4.0':
-    resolution: {integrity: sha512-ZaX4u6xRhmgB4UAmw0lvO0LB1LddbRgSILkjRDnk1F4QDtkCOuY9nOh550TNI7uKYcf6HZQax7QXst6EkpjiyQ==}
-
   '@next/env@14.2.14':
     resolution: {integrity: sha512-/0hWQfiaD5//LvGNgc8PjvyqV50vGK0cADYzaoOOGN8fxzBn3iAiaq3S0tCRnFBldq0LVveLcxCTi41ZoYgAgg==}
 
@@ -2548,9 +2523,6 @@ packages:
   caniuse-lite@1.0.30001667:
     resolution: {integrity: sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==}
 
-  castable-video@1.0.10:
-    resolution: {integrity: sha512-tJgUv+8/zE191y8EKojvB0eKIyKA9obIttd6Wpdm6x2qBmuwZ7wDgzVCSmf5cN2v9jBiuu0s7O5poz8a8cFX/w==}
-
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -2745,9 +2717,6 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  custom-media-element@1.3.2:
-    resolution: {integrity: sha512-nDyMobZgoAVqz7mA8rsn7i1/6bjH6N9ab2Ge7LyyNxrvxAq7zQJPg8i3u2VH7wEB+Y1T1+C3/h1G774/D+ZLag==}
-
   cyclist@1.0.2:
     resolution: {integrity: sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==}
 
@@ -3163,10 +3132,6 @@ packages:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
 
-  event-target-shim@6.0.2:
-    resolution: {integrity: sha512-8q3LsZjRezbFZ2PN+uP+Q7pnHUMmAOziU2vA2OwoFaKIXxlxl38IylhSSgUorWu/rf4er67w0ikBqjBFk/pomA==}
-    engines: {node: '>=10.13.0'}
-
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -3489,9 +3454,6 @@ packages:
   history@5.3.0:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
 
-  hls.js@1.5.15:
-    resolution: {integrity: sha512-6cD7xN6bycBHaXz2WyPIaHn/iXFizE5au2yvY5q9aC4wfihxAr16C9fUy4nxh2a3wOw0fEgLRa9dN6wsYjlpNg==}
-
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
 
@@ -3639,9 +3601,6 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  is-function@1.0.2:
-    resolution: {integrity: sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==}
-
   is-generator-function@1.0.10:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
     engines: {node: '>= 0.4'}
@@ -3783,10 +3742,6 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  iso-639-1@3.1.3:
-    resolution: {integrity: sha512-1jz0Wh9hyLMRwqEPchb/KZCiTqfFWtc9R3nm7GHPygBAKS8wdKJ3FH4lvLsri6UtAE5Kz5SnowtXZa//6bqMyw==}
-    engines: {node: '>=6.0'}
-
   isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
@@ -3865,10 +3820,6 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonwebtoken-esm@1.0.5:
-    resolution: {integrity: sha512-CW3CJGtN3nAtkoyV58jl0aOo8VzFv3V2t24ef5OEdULwMGp9pUpnWkCmwxuwo16Tfhoq9cUBFLb3i9P2YlVc4Q==}
-    engines: {node: '>=14.18'}
-
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -4001,12 +3952,6 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
-  media-chrome@3.2.5:
-    resolution: {integrity: sha512-tTsgS7x77Bn4p/wca/Si/7A+Q3z9DzKq0SOkroQvrNMXBVyQasMayDcsKg5Ur5NGsymZfttnJi7tXvVr/tPj8g==}
-
-  media-tracks@0.3.3:
-    resolution: {integrity: sha512-9P2FuUHnZZ3iji+2RQk7Zkh5AmZTnOG5fODACnjhCVveX1McY3jmCRHofIEI+yTBqplz7LXy48c7fQ3Uigp88w==}
-
   memoize-one@6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
 
@@ -4119,9 +4064,6 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  mux-embed@5.2.1:
-    resolution: {integrity: sha512-NukHw91xeEVDBeXVDBpi2BvXNix7gSuvdtyvOph5yR/ROn1hHbTlcYWoKQyCyJX9frsF00UROEul+S8wPzU3aQ==}
-
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -4348,9 +4290,6 @@ packages:
   parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
 
-  parse-headers@2.0.5:
-    resolution: {integrity: sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==}
-
   parse-json@4.0.0:
     resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
     engines: {node: '>=4'}
@@ -4692,6 +4631,11 @@ packages:
       react-native:
         optional: true
 
+  react-icons@5.3.0:
+    resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
+    peerDependencies:
+      react: '*'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -4757,12 +4701,6 @@ packages:
       react: ^16.8 || ^17 || ^18
       rxjs: ^6.5 || ^7
 
-  react-rx@3.1.3:
-    resolution: {integrity: sha512-ITYuqiathSqLJjMvIO5kDDMSTDuvzpxebiDWNKIVMlGpvJxRXnnlwcQhlMcjV2Yr8+fNQHOHdf6fO/zS9+SMGw==}
-    peerDependencies:
-      react: ^18.3 || >=19.0.0-rc
-      rxjs: ^7
-
   react-rx@4.0.0:
     resolution: {integrity: sha512-nJbL5VvUUKaNlEzPcAcGdTe9HqJLKfFi7SM3FFAqnPYdJ1mJbZHfmGH82DCkAEzGmOtW9ItdtDbjXSLMswE+dg==}
     peerDependencies:
@@ -4977,15 +4915,6 @@ packages:
       sanity: ^3.36.4
       styled-components: ^6.1
 
-  sanity-plugin-mux-input@2.3.6:
-    resolution: {integrity: sha512-qBiQE6VuVgJ42mfWbw+9T6UVsr5VyRZvs41Qew32XSb0vPlP19yb3eI2Vxxv5ENNTyhaXD5CxMQZOsv+OFADDA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: ^18
-      react-is: ^18
-      sanity: ^3.42.0
-      styled-components: ^5 || ^6
-
   sanity-plugin-utils@1.6.5:
     resolution: {integrity: sha512-QJOBaNSIR7nG8xaSRD/CsqPMz8ZMZIkJ2pCIzB14uD9J4iiCaRh6V4R6We6L4gNJ/Pr57AuzQS/SGqlyTue5Qw==}
     engines: {node: '>=18'}
@@ -5273,11 +5202,6 @@ packages:
     peerDependencies:
       react: '>=17.0'
 
-  swr@2.2.5:
-    resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==}
-    peerDependencies:
-      react: ^16.11.0 || ^17.0.0 || ^18.0.0
-
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -5410,10 +5334,6 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
-  type-fest@4.26.1:
-    resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
-    engines: {node: '>=16'}
-
   typed-array-buffer@1.0.2:
     resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
     engines: {node: '>= 0.4'}
@@ -5534,15 +5454,6 @@ packages:
     peerDependencies:
       react: ^18.3 || ^19.0.0-0
 
-  use-error-boundary@2.0.6:
-    resolution: {integrity: sha512-AWCVKSAanLe6R/on/ZkHYtGKfXs8BQX6z/TUGYqtvkajLqQyrGKJJscbahtq8OyN8L3LqTRjJWx4gCOLmfIObw==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-
   use-hot-module-reload@2.0.0:
     resolution: {integrity: sha512-RbL/OY1HjHNf5BYSFV3yDtQhIGKjCx9ntEjnUBYsOGc9fTo94nyFTcjtD42/twJkPgMljWpszUIpTGD3LuwHSg==}
     peerDependencies:
@@ -5709,9 +5620,6 @@ packages:
     resolution: {integrity: sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==}
     engines: {node: '>=8'}
 
-  xhr@2.6.0:
-    resolution: {integrity: sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==}
-
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -7018,40 +6926,6 @@ snapshots:
     optionalDependencies:
       vite: 4.5.5(@types/node@20.16.10)
 
-  '@mux/mux-player-react@2.9.1(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@mux/mux-player': 2.9.1
-      '@mux/playback-core': 0.25.2
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.11
-      '@types/react-dom': 18.3.0
-
-  '@mux/mux-player@2.9.1':
-    dependencies:
-      '@mux/mux-video': 0.20.2
-      '@mux/playback-core': 0.25.2
-      media-chrome: 3.2.5
-
-  '@mux/mux-video@0.20.2':
-    dependencies:
-      '@mux/playback-core': 0.25.2
-      castable-video: 1.0.10
-      custom-media-element: 1.3.2
-      media-tracks: 0.3.3
-
-  '@mux/playback-core@0.25.2':
-    dependencies:
-      hls.js: 1.5.15
-      mux-embed: 5.2.1
-
-  '@mux/upchunk@3.4.0':
-    dependencies:
-      event-target-shim: 6.0.2
-      xhr: 2.6.0
-
   '@next/env@14.2.14': {}
 
   '@next/env@14.2.4': {}
@@ -8598,10 +8472,6 @@ snapshots:
 
   caniuse-lite@1.0.30001667: {}
 
-  castable-video@1.0.10:
-    dependencies:
-      custom-media-element: 1.3.2
-
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -8814,8 +8684,6 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  custom-media-element@1.3.2: {}
-
   cyclist@1.0.2: {}
 
   damerau-levenshtein@1.0.8: {}
@@ -9501,8 +9369,6 @@ snapshots:
 
   event-target-shim@5.0.1: {}
 
-  event-target-shim@6.0.2: {}
-
   events@3.3.0: {}
 
   eventsource@2.0.2: {}
@@ -9864,8 +9730,6 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.25.7
 
-  hls.js@1.5.15: {}
-
   hoist-non-react-statics@3.3.2:
     dependencies:
       react-is: 16.13.1
@@ -10010,8 +9874,6 @@ snapshots:
 
   is-fullwidth-code-point@3.0.0: {}
 
-  is-function@1.0.2: {}
-
   is-generator-function@1.0.10:
     dependencies:
       has-tostringtag: 1.0.2
@@ -10114,8 +9976,6 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  iso-639-1@3.1.3: {}
-
   isobject@3.0.1: {}
 
   iterator.prototype@1.1.2:
@@ -10205,8 +10065,6 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsonwebtoken-esm@1.0.5: {}
-
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.8
@@ -10327,10 +10185,6 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
-  media-chrome@3.2.5: {}
-
-  media-tracks@0.3.3: {}
-
   memoize-one@6.0.0: {}
 
   memorystream@0.3.1: {}
@@ -10441,8 +10295,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  mux-embed@5.2.1: {}
-
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -10703,8 +10555,6 @@ snapshots:
       is-decimal: 1.0.4
       is-hexadecimal: 1.0.4
 
-  parse-headers@2.0.5: {}
-
   parse-json@4.0.0:
     dependencies:
       error-ex: 1.3.2
@@ -10961,6 +10811,10 @@ snapshots:
     optionalDependencies:
       react-dom: 18.3.1(react@18.3.1)
 
+  react-icons@5.3.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}
@@ -11017,13 +10871,6 @@ snapshots:
       rxjs: 7.8.1
       use-sync-external-store: 1.2.2(react@18.3.1)
 
-  react-rx@3.1.3(react@18.3.1)(rxjs@7.8.1):
-    dependencies:
-      observable-callback: 1.0.3(rxjs@7.8.1)
-      react: 18.3.1
-      rxjs: 7.8.1
-      use-effect-event: 1.0.2(react@18.3.1)
-
   react-rx@4.0.0(react@18.3.1)(rxjs@7.8.1):
     dependencies:
       observable-callback: 1.0.3(rxjs@7.8.1)
@@ -11286,33 +11133,6 @@ snapshots:
     transitivePeerDependencies:
       - '@sanity/util'
 
-  sanity-plugin-mux-input@2.3.6(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(sanity@3.59.0(@types/node@20.16.10)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
-    dependencies:
-      '@mux/mux-player-react': 2.9.1(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mux/upchunk': 3.4.0
-      '@sanity/icons': 3.4.0(react@18.3.1)
-      '@sanity/incompatible-plugin': 1.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@sanity/ui': 2.8.9(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
-      '@sanity/uuid': 3.0.2
-      iso-639-1: 3.1.3
-      jsonwebtoken-esm: 1.0.5
-      lodash: 4.17.21
-      react: 18.3.1
-      react-is: 18.3.1
-      react-rx: 3.1.3(react@18.3.1)(rxjs@7.8.1)
-      rxjs: 7.8.1
-      sanity: 3.59.0(@types/node@20.16.10)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
-      scroll-into-view-if-needed: 3.1.0
-      styled-components: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      suspend-react: 0.1.3(react@18.3.1)
-      swr: 2.2.5(react@18.3.1)
-      type-fest: 4.26.1
-      use-error-boundary: 2.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - react-dom
-
   sanity-plugin-utils@1.6.5(@sanity/ui@2.8.9(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(react-dom@18.3.1(react@18.3.1))(react-fast-compare@3.2.2)(react@18.3.1)(rxjs@7.8.1)(sanity@3.59.0(@types/node@20.16.10)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)))(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       '@sanity/icons': 2.11.8(react@18.3.1)
@@ -11753,12 +11573,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  swr@2.2.5(react@18.3.1):
-    dependencies:
-      client-only: 0.0.1
-      react: 18.3.1
-      use-sync-external-store: 1.2.2(react@18.3.1)
-
   symbol-tree@3.2.4: {}
 
   tailwindcss@3.4.13:
@@ -11924,8 +11738,6 @@ snapshots:
 
   type-fest@0.8.1: {}
 
-  type-fest@4.26.1: {}
-
   typed-array-buffer@1.0.2:
     dependencies:
       call-bind: 1.0.7
@@ -12057,12 +11869,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  use-error-boundary@2.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-    optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
-
   use-hot-module-reload@2.0.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -12212,13 +12018,6 @@ snapshots:
 
   xdg-basedir@4.0.0: {}
 
-  xhr@2.6.0:
-    dependencies:
-      global: 4.4.0
-      is-function: 1.0.2
-      parse-headers: 2.0.5
-      xtend: 4.0.2
-
   xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}
diff --git a/storefront/sanity.config.ts b/storefront/sanity.config.ts
index 60495df..8fd61a7 100644
--- a/storefront/sanity.config.ts
+++ b/storefront/sanity.config.ts
@@ -4,7 +4,6 @@ import {pages} from "@tinloof/sanity-studio";
 import {defineConfig, isDev} from "sanity";
 import {structureTool} from "sanity/structure";
 import {imageHotspotArrayPlugin} from "sanity-plugin-hotspot-array";
-import {muxInput} from "sanity-plugin-mux-input";
 
 import {StudioLogo} from "./components/studio/logo";
 import schemas from "./sanity/schemas";
@@ -47,7 +46,6 @@ export default defineConfig({
       title: "General",
     }),
     visionTool({defaultApiVersion: config.sanity.apiVersion}),
-    muxInput({mp4_support: "standard"}),
     imageHotspotArrayPlugin(),
   ],
   projectId: config.sanity.projectId,
diff --git a/storefront/sanity/schemas/index.ts b/storefront/sanity/schemas/index.ts
index 76f9367..e095fd8 100644
--- a/storefront/sanity/schemas/index.ts
+++ b/storefront/sanity/schemas/index.ts
@@ -13,6 +13,7 @@ import {lightPtBody, ptBody} from "./objects/pt-body";
 import {sectionsBody} from "./objects/sections-body";
 import {seo} from "./objects/seo";
 import spot from "./objects/spot";
+import video from "./objects/video";
 import sections from "./sections";
 import {cookieBanner} from "./singletons/cookie-banner";
 import {faqIndex} from "./singletons/faq";
@@ -29,6 +30,7 @@ const schemas = [
   cta,
   link,
   spot,
+  video,
   settings,
   home,
   ptBody,
diff --git a/storefront/sanity/schemas/objects/video.ts b/storefront/sanity/schemas/objects/video.ts
new file mode 100644
index 0000000..5866484
--- /dev/null
+++ b/storefront/sanity/schemas/objects/video.ts
@@ -0,0 +1,21 @@
+import {CiVideoOn} from "react-icons/ci";
+import {defineField} from "sanity";
+
+export default defineField({
+  fields: [
+    {
+      name: "url",
+      title: "URL",
+      type: "string",
+    },
+    {
+      name: "poster",
+      title: "Thumbnail",
+      type: "image",
+    },
+  ],
+  icon: CiVideoOn,
+  name: "video",
+  title: "Video",
+  type: "object",
+});
diff --git a/storefront/sanity/schemas/sections/hero.ts b/storefront/sanity/schemas/sections/hero.ts
index 582dafd..20f1c59 100644
--- a/storefront/sanity/schemas/sections/hero.ts
+++ b/storefront/sanity/schemas/sections/hero.ts
@@ -65,7 +65,7 @@ export default defineField({
       hidden: ({parent}) => parent?.mediaType !== "video",
       name: "video",
       title: "Video",
-      type: "mux.video",
+      type: "video",
       validation: (Rule) =>
         Rule.custom((value, {parent}) => {
           const parentType = parent as {mediaType?: string};