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

package/dist/index.d.mts

@@ -308,6 +308,11 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Event callbacks
      */
     events?: PlayerEvents;
+    /**
+     * Locale for Shaka Player UI localization (e.g., 'en', 'ar', 'es')
+     * Defaults to 'en' if not provided
+     */
+    locale?: string;
     containerClassName?: string;
 }
 /**

package/dist/index.d.ts

@@ -308,6 +308,11 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Event callbacks
      */
     events?: PlayerEvents;
+    /**
+     * Locale for Shaka Player UI localization (e.g., 'en', 'ar', 'es')
+     * Defaults to 'en' if not provided
+     */
+    locale?: string;
     containerClassName?: string;
 }
 /**

package/dist/index.js

@@ -1211,7 +1211,7 @@ var supportsWidevinePersistentLicenses = () => {
 var import_mux_data_shakaplayer = __toESM(require("@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_";
@@ -2000,7 +2000,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 = (0, import_react6.useRef)(null);
   const registeredElements = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
   const initializeUI = (0, import_react6.useCallback)(async () => {
@@ -2017,6 +2017,14 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
     }
     const ui = new import_shaka_player3.ui.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"],
@@ -2081,7 +2089,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 = (0, import_react6.useCallback)(() => {
     if (uiRef.current) {
       try {
@@ -3695,6 +3703,7 @@ var Player = (0, import_react12.forwardRef)(
     seekbarConfig,
     iconSizes,
     events,
+    locale = "en",
     containerClassName,
     ...videoProps
   }, ref) => {
@@ -3751,7 +3760,8 @@ var Player = (0, import_react12.forwardRef)(
       seekbarConfig,
       events?.onSkipBack,
       events?.onSkipForward,
-      iconSizes
+      iconSizes,
+      locale
     );
     const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
       enabled: true,
@@ -3933,7 +3943,7 @@ var Player = (0, import_react12.forwardRef)(
       getMuxMonitor: () => null
     }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
     const isResponsive = !width && !height;
-    const containerClasses = (0, import_tailwind_merge2.twMerge)(containerClassName, "motto-video-container bg-black overflow-hidden md:rounded-2xl");
+    const containerClasses = (0, import_tailwind_merge2.twMerge)(containerClassName, "motto-video-container bg-black ");
     const containerStyle = isResponsive ? {
       aspectRatio: aspectRatio.toString()
     } : { width, height };
@@ -4522,6 +4532,7 @@ var Video = ({
       src: activePlaylist,
       className: (0, import_tailwind_merge3.twMerge)("video-player-container", className),
       events,
+      locale,
       containerClassName: "w-full h-full",
       children
     }
@@ -4678,18 +4689,19 @@ var Event = ({
     events.onEmptyPlaylists();
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, {}) }) });
   }
   if (activePlaylist && activeVideoId && videosData) {
     const activeVideo = videosData.find((video) => video.id === activeVideoId);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Player,
         {
           ...props,
           src: activePlaylist,
-          className: (0, import_tailwind_merge4.twMerge)(className, "peer"),
+          className: (0, import_tailwind_merge4.twMerge)(className, "peer aspect-video"),
           events,
+          locale,
           containerClassName: "w-full h-full"
         }
       ) }),
@@ -4705,7 +4717,7 @@ var Event = ({
     ] });
   }
   if (eventData) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       PreEvent,
       {
         event: eventData,
@@ -4989,7 +5001,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__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ErrorScreen,
       {
         title,
@@ -5019,10 +5031,10 @@ var CreativeWork = ({
     events
   ]);
   if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {}) }) });
   }
   if (showCountDown && creativeWorkData) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       PreCreativeWork,
       {
         creativeWork: creativeWorkData,
@@ -5045,6 +5057,7 @@ var CreativeWork = ({
             ...events
           },
           src: activePlaylist,
+          locale,
           containerClassName: "w-full h-full"
         }
       ),