@mottosports/motto-video-player 1.0.0 → 1.0.1-rc.1

package/README.md

@@ -20,6 +20,70 @@ React video player component for the Motto platform, powered by Shaka Player wit
 npm install @motto-ui-components/motto-video-player @tanstack/react-query
 ```
 
+## Next.js SSR Compatibility
+
+This component is now fully compatible with Next.js Server-Side Rendering (SSR). The component automatically detects when it's running in a server environment and gracefully handles browser-only APIs.
+
+### Basic Usage in Next.js
+
+```tsx
+import { Event } from '@mottosports/motto-video-player';
+
+export default function MyPage() {
+  return (
+    <Event
+      publicKey="your-public-key"
+      eventId="your-event-id"
+      locale="en"
+    />
+  );
+}
+```
+
+### Dynamic Imports (Optional)
+
+For optimal performance and to ensure the component only loads on the client side, you can use Next.js dynamic imports:
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const Event = dynamic(
+  () => import('@mottosports/motto-video-player').then(mod => ({ default: mod.Event })),
+  { 
+    ssr: false,
+    loading: () => <div>Loading video player...</div>
+  }
+);
+
+export default function MyPage() {
+  return (
+    <Event
+      publicKey="your-public-key"
+      eventId="your-event-id"
+      locale="en"
+    />
+  );
+}
+```
+
+### App Router Usage (Next.js 13+)
+
+```tsx
+'use client';
+
+import { Event } from '@mottosports/motto-video-player';
+
+export default function VideoPlayer() {
+  return (
+    <Event
+      publicKey="your-public-key"
+      eventId="your-event-id"
+      locale="en"
+    />
+  );
+}
+```
+
 ## Quick Start
 
 ### Setup QueryClient (Required for Video wrapper)

package/dist/index.js

@@ -309,6 +309,10 @@ var SkipBackButton = class {
     this.eventManager = { listen: (element, event, handler) => {
       element.addEventListener(event, handler);
     } };
+    if (typeof document === "undefined") {
+      console.warn("SkipBackButton: document is not available (SSR environment)");
+      return;
+    }
     this.button_ = document.createElement("button");
     this.button_.className = "shaka-button motto-native-skip-button";
     this.button_.innerHTML = `
@@ -339,6 +343,10 @@ var SkipForwardButton = class {
     this.eventManager = { listen: (element, event, handler) => {
       element.addEventListener(event, handler);
     } };
+    if (typeof document === "undefined") {
+      console.warn("SkipForwardButton: document is not available (SSR environment)");
+      return;
+    }
     this.button_ = document.createElement("button");
     this.button_.className = "shaka-button motto-native-skip-button";
     this.button_.innerHTML = `
@@ -382,6 +390,10 @@ var MobilePlayButton = class {
   constructor(parent, controls) {
     this.parent = parent;
     this.controls = controls;
+    if (typeof document === "undefined") {
+      console.warn("MobilePlayButton: document is not available (SSR environment)");
+      return;
+    }
     this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
     if (!this.video) {
       console.error("MobilePlayButton: No video element found");
@@ -426,6 +438,10 @@ var MobileSkipBackButton = class {
   constructor(parent, controls, onSkipBack) {
     this.parent = parent;
     this.controls = controls;
+    if (typeof document === "undefined") {
+      console.warn("MobileSkipBackButton: document is not available (SSR environment)");
+      return;
+    }
     this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
     if (!this.video) {
       console.error("MobileSkipBackButton: No video element found");
@@ -457,6 +473,10 @@ var MobileSkipForwardButton = class {
   constructor(parent, controls, onSkipForward) {
     this.parent = parent;
     this.controls = controls;
+    if (typeof document === "undefined") {
+      console.warn("MobileSkipForwardButton: document is not available (SSR environment)");
+      return;
+    }
     this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
     if (!this.video) {
       console.error("MobileSkipForwardButton: No video element found");
@@ -488,6 +508,10 @@ var MobileControlsContainer = class {
   constructor(parent, controls, onSkipBack, onSkipForward) {
     this.parent = parent;
     this.controls = controls;
+    if (typeof document === "undefined") {
+      console.warn("MobileControlsContainer: document is not available (SSR environment)");
+      return;
+    }
     if (!parent) {
       console.error("MobileControlsContainer: No parent element provided");
       return;
@@ -545,6 +569,9 @@ var MobileControlsContainer = class {
     }
   }
   isElementVisible(element) {
+    if (typeof window === "undefined") {
+      return false;
+    }
     const style = window.getComputedStyle(element);
     const hasHiddenClass = element.classList.contains("shaka-hidden") || element.classList.contains("hidden") || element.classList.contains("shaka-fade-out");
     return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && !element.hidden && !hasHiddenClass;
@@ -563,10 +590,14 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
   const uiRef = (0, import_react5.useRef)(null);
   const registeredElements = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
   const initializeUI = (0, import_react5.useCallback)(async () => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      console.warn("useShakaUI: Cannot initialize UI in SSR environment");
+      return null;
+    }
     if (!controls || !containerRef.current || !playerRef.current || !videoRef.current) {
       return null;
     }
-    const isMobile = window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const isMobile = typeof window !== "undefined" && typeof navigator !== "undefined" && (window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
     if (!registeredElements.current.has("skip_back_button")) {
       import_shaka_player3.ui.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack));
       registeredElements.current.add("skip_back_button");
@@ -760,6 +791,9 @@ var useLiveIndicator = (containerRef, options = {}) => {
     showPulseAnimation = true
   } = options;
   (0, import_react9.useEffect)(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
     if (!containerRef.current || !enabled) {
       return;
     }
@@ -1822,6 +1856,9 @@ var availableLanguages = {
   fa: fa_default
 };
 var getBrowserLanguage = () => {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return "en";
+  }
   const language = navigator.language.split("-")[0];
   return availableLanguages[language] ? language : "en";
 };