@mottosports/motto-video-player 1.0.1-rc.53 → 1.0.1-rc.55

package/dist/index.mjs

@@ -1170,7 +1170,7 @@ var supportsWidevinePersistentLicenses = () => {
 import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
 
 // package.json
-var version = "1.0.1-rc.53";
+var version = "1.0.1-rc.55";
 
 // src/utils/licenseCache.ts
 var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
@@ -1959,7 +1959,7 @@ var SkipForwardButtonFactory = class {
     return new SkipForwardButton(rootElement, controls, this.onSkipForward, this.iconSize);
   }
 };
-var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes) => {
+var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes, locale = "en") => {
   const uiRef = useRef4(null);
   const registeredElements = useRef4(/* @__PURE__ */ new Set());
   const initializeUI = useCallback5(async () => {
@@ -1976,6 +1976,14 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
     }
     const ui = new ShakaUI.Overlay(playerRef.current, containerRef.current, videoRef.current);
     uiRef.current = ui;
+    if (locale !== "en") {
+      try {
+        ui.getControls().getLocalization().changeLocale([locale]);
+        console.log(`Set locale to '${locale}'`);
+      } catch (error) {
+        console.warn(`Failed to set locale to '${locale}', falling back to 'en':`, error);
+      }
+    }
     const isMobile = window.innerWidth <= 767;
     const controlPanelElements = [
       ...isMobile ? [] : ["skip_back_button"],
@@ -2040,7 +2048,7 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
       }
     }
     return ui;
-  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes]);
+  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes, locale]);
   const destroyUI = useCallback5(() => {
     if (uiRef.current) {
       try {
@@ -3654,6 +3662,7 @@ var Player = forwardRef(
     seekbarConfig,
     iconSizes,
     events,
+    locale = "en",
     containerClassName,
     ...videoProps
   }, ref) => {
@@ -3710,7 +3719,8 @@ var Player = forwardRef(
       seekbarConfig,
       events?.onSkipBack,
       events?.onSkipForward,
-      iconSizes
+      iconSizes,
+      locale
     );
     const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
       enabled: true,
@@ -3892,7 +3902,7 @@ var Player = forwardRef(
       getMuxMonitor: () => null
     }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
     const isResponsive = !width && !height;
-    const containerClasses = twMerge2(containerClassName, "motto-video-container bg-black overflow-hidden md:rounded-2xl");
+    const containerClasses = twMerge2(containerClassName, "motto-video-container bg-black ");
     const containerStyle = isResponsive ? {
       aspectRatio: aspectRatio.toString()
     } : { width, height };
@@ -4481,6 +4491,7 @@ var Video = ({
       src: activePlaylist,
       className: twMerge3("video-player-container", className),
       events,
+      locale,
       containerClassName: "w-full h-full",
       children
     }
@@ -4637,18 +4648,19 @@ var Event = ({
     events.onEmptyPlaylists();
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ jsx10("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ jsx10(Loading, {}) }) });
+    return /* @__PURE__ */ jsx10("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ jsx10(Loading, {}) }) });
   }
   if (activePlaylist && activeVideoId && videosData) {
     const activeVideo = videosData.find((video) => video.id === activeVideoId);
-    return /* @__PURE__ */ jsxs8("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: [
+    return /* @__PURE__ */ jsxs8("div", { className: twMerge4("", className), children: [
       /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
         Player,
         {
           ...props,
           src: activePlaylist,
-          className: twMerge4(className, "peer"),
+          className: twMerge4(className, "peer aspect-video"),
           events,
+          locale,
           containerClassName: "w-full h-full"
         }
       ) }),
@@ -4664,7 +4676,7 @@ var Event = ({
     ] });
   }
   if (eventData) {
-    return /* @__PURE__ */ jsx10("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx10("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
       PreEvent,
       {
         event: eventData,
@@ -4948,7 +4960,7 @@ var CreativeWork = ({
   if (error) {
     const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
     const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx11(
       ErrorScreen,
       {
         title,
@@ -4978,10 +4990,10 @@ var CreativeWork = ({
     events
   ]);
   if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx11(Loading, {}) }) });
+    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx11(Loading, {}) }) });
   }
   if (showCountDown && creativeWorkData) {
-    return /* @__PURE__ */ jsx11("div", { className: twMerge5("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx11("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx11("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ jsx11(
       PreCreativeWork,
       {
         creativeWork: creativeWorkData,
@@ -5004,6 +5016,7 @@ var CreativeWork = ({
             ...events
           },
           src: activePlaylist,
+          locale,
           containerClassName: "w-full h-full"
         }
       ),