stormcloud-video-player 0.1.0

package/src/ui/StormcloudVideoPlayer.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useRef } from "react";
+import { StormcloudVideoPlayer } from "../player/StormcloudVideoPlayer";
+import type { StormcloudVideoPlayerConfig } from "../types";
+
+export type StormcloudVideoPlayerProps = Omit<
+  StormcloudVideoPlayerConfig,
+  "videoElement"
+> &
+  React.VideoHTMLAttributes<HTMLVideoElement> & {
+    onReady?: (player: StormcloudVideoPlayer) => void;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
+  };
+
+export const StormcloudVideoPlayerComponent: React.FC<
+  StormcloudVideoPlayerProps
+> = (props) => {
+  const {
+    src,
+    autoplay,
+    muted,
+    lowLatencyMode,
+    allowNativeHls,
+    driftToleranceMs,
+    adSchedule,
+    immediateManifestAds,
+    debugAdTiming,
+    showCustomControls,
+    onVolumeToggle,
+    onFullscreenToggle,
+    onControlClick,
+    onReady,
+    wrapperClassName,
+    wrapperStyle,
+    className,
+    style,
+    controls,
+    playsInline,
+    preload,
+    poster,
+    children,
+    ...restVideoAttrs
+  } = props;
+
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const playerRef = useRef<StormcloudVideoPlayer | null>(null);
+  const [adStatus, setAdStatus] = React.useState<{
+    showAds: boolean;
+    currentIndex: number;
+    totalAds: number;
+  }>({ showAds: false, currentIndex: 0, totalAds: 0 });
+
+  const [shouldShowNativeControls, setShouldShowNativeControls] =
+    React.useState(true);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const el = videoRef.current;
+    if (!el || !src) return;
+
+    if (playerRef.current) {
+      try {
+        playerRef.current.destroy();
+      } catch {}
+      playerRef.current = null;
+    }
+
+    const cfg: StormcloudVideoPlayerConfig = {
+      src,
+      videoElement: el,
+    } as StormcloudVideoPlayerConfig;
+    if (autoplay !== undefined) cfg.autoplay = autoplay;
+    if (muted !== undefined) cfg.muted = muted;
+    if (lowLatencyMode !== undefined) cfg.lowLatencyMode = lowLatencyMode;
+    if (allowNativeHls !== undefined) cfg.allowNativeHls = allowNativeHls;
+    if (driftToleranceMs !== undefined) cfg.driftToleranceMs = driftToleranceMs;
+    if (adSchedule !== undefined) cfg.adSchedule = adSchedule;
+    if (immediateManifestAds !== undefined)
+      cfg.immediateManifestAds = immediateManifestAds;
+    if (debugAdTiming !== undefined) cfg.debugAdTiming = debugAdTiming;
+    if (showCustomControls !== undefined)
+      cfg.showCustomControls = showCustomControls;
+    if (onVolumeToggle !== undefined) cfg.onVolumeToggle = onVolumeToggle;
+    if (onFullscreenToggle !== undefined)
+      cfg.onFullscreenToggle = onFullscreenToggle;
+    if (onControlClick !== undefined) cfg.onControlClick = onControlClick;
+
+    const player = new StormcloudVideoPlayer(cfg);
+    playerRef.current = player;
+    player
+      .load()
+      .then(() => {
+        const showNative = player.shouldShowNativeControls();
+        setShouldShowNativeControls(showNative);
+        onReady?.(player);
+      })
+      .catch(() => {});
+
+    return () => {
+      try {
+        player.destroy();
+      } catch {}
+      playerRef.current = null;
+    };
+  }, [
+    src,
+    autoplay,
+    muted,
+    lowLatencyMode,
+    allowNativeHls,
+    driftToleranceMs,
+    immediateManifestAds,
+    debugAdTiming,
+    showCustomControls,
+    onVolumeToggle,
+    onFullscreenToggle,
+    onControlClick,
+    onReady,
+  ]);
+
+  useEffect(() => {
+    if (!playerRef.current) return;
+    if (adSchedule) {
+      try {
+        playerRef.current.setAdSchedule(adSchedule);
+      } catch {}
+    }
+  }, [adSchedule]);
+
+  useEffect(() => {
+    if (!playerRef.current) return;
+
+    const checkAdStatus = () => {
+      if (playerRef.current) {
+        const showAds = playerRef.current.isShowingAds();
+        const currentIndex = playerRef.current.getCurrentAdIndex();
+        const totalAds = playerRef.current.getTotalAdsInBreak();
+
+        setAdStatus((prev) => {
+          if (
+            prev.showAds !== showAds ||
+            prev.currentIndex !== currentIndex ||
+            prev.totalAds !== totalAds
+          ) {
+            return { showAds, currentIndex, totalAds };
+          }
+          return prev;
+        });
+      }
+    };
+
+    const interval = setInterval(checkAdStatus, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div
+      className={wrapperClassName}
+      style={{ position: "relative", overflow: "hidden", ...wrapperStyle }}
+    >
+      <video
+        ref={videoRef}
+        className={className}
+        style={{ display: "block", width: "100%", height: "100%", ...style }}
+        controls={shouldShowNativeControls && controls}
+        playsInline={playsInline}
+        preload={preload}
+        poster={poster}
+        {...restVideoAttrs}
+      >
+        {children}
+      </video>
+
+      {adStatus.showAds && adStatus.totalAds > 0 && (
+        <div
+          style={{
+            position: "absolute",
+            top: "10px",
+            right: "10px",
+            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            color: "white",
+            padding: "4px 8px",
+            borderRadius: "4px",
+            fontSize: "12px",
+            fontFamily: "Arial, sans-serif",
+            zIndex: 10,
+          }}
+        >
+          Ad {adStatus.currentIndex}/{adStatus.totalAds}
+        </div>
+      )}
+
+      {!shouldShowNativeControls && showCustomControls && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: "10px",
+            right: "10px",
+            display: "flex",
+            gap: "8px",
+            zIndex: 10,
+          }}
+        >
+          {onVolumeToggle && (
+            <button
+              onClick={onVolumeToggle}
+              style={{
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+                color: "white",
+                border: "1px solid rgba(255, 255, 255, 0.3)",
+                borderRadius: "4px",
+                padding: "8px",
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+              title="Toggle Volume"
+            >
+              🔊
+            </button>
+          )}
+
+          {onFullscreenToggle && (
+            <button
+              onClick={onFullscreenToggle}
+              style={{
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+                color: "white",
+                border: "1px solid rgba(255, 255, 255, 0.3)",
+                borderRadius: "4px",
+                padding: "8px",
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+              title="Toggle Fullscreen"
+            >
+              ⤢
+            </button>
+          )}
+        </div>
+      )}
+
+      {onControlClick && (
+        <div
+          onClick={onControlClick}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 1,
+            cursor: "pointer",
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/src/utils/tracking.ts

@@ -0,0 +1,251 @@
+import type { ClientInfo, TrackingData, HeartbeatData } from "../types";
+
+export function getClientInfo(): ClientInfo {
+  const ua = navigator.userAgent;
+  const platform = navigator.platform;
+  const vendor = navigator.vendor || "";
+  const maxTouchPoints = navigator.maxTouchPoints || 0;
+  const memory = (navigator as any).deviceMemory || null;
+  const hardwareConcurrency = navigator.hardwareConcurrency || 1;
+
+  const screenInfo = {
+    width: screen?.width,
+    height: screen?.height,
+    availWidth: screen?.availWidth,
+    availHeight: screen?.availHeight,
+    orientation: (screen?.orientation as any)?.type || "",
+    pixelDepth: screen?.pixelDepth,
+  };
+
+  let deviceType: "tv" | "mobile" | "tablet" | "desktop" = "desktop";
+  let brand = "Unknown";
+  let os = "Unknown";
+  let model = "";
+  let isSmartTV = false;
+  let isAndroid = false;
+  let isWebView = false;
+  let isWebApp = false;
+
+  if (ua.includes("Web0S")) {
+    brand = "LG";
+    os = "webOS";
+    isSmartTV = true;
+    deviceType = "tv";
+    const webosMatch = ua.match(/Web0S\/([^\s]+)/);
+    model = webosMatch ? `webOS ${webosMatch[1]}` : "webOS TV";
+  } else if (ua.includes("Tizen")) {
+    brand = "Samsung";
+    os = "Tizen";
+    isSmartTV = true;
+    deviceType = "tv";
+    const tizenMatch = ua.match(/Tizen\/([^\s]+)/);
+    const tvMatch = ua.match(/(?:Smart-TV|SMART-TV|TV)/i) ? "Smart TV" : "";
+    model = tizenMatch
+      ? `Tizen ${tizenMatch[1]} ${tvMatch}`.trim()
+      : "Tizen TV";
+  } else if (ua.includes("Philips")) {
+    brand = "Philips";
+    os = "Saphi";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes("Sharp") || ua.includes("AQUOS")) {
+    brand = "Sharp";
+    os = "Android TV";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (
+    ua.includes("Android") &&
+    (ua.includes("Sony") || vendor.includes("Sony"))
+  ) {
+    brand = "Sony";
+    os = "Android TV";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (
+    ua.includes("Android") &&
+    (ua.includes("NetCast") || ua.includes("LG"))
+  ) {
+    brand = "LG";
+    os = "Android TV";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes(" Roku") || ua.includes("Roku/")) {
+    brand = "Roku";
+    os = "Roku OS";
+    isSmartTV = true;
+    deviceType = "tv";
+  } else if (ua.includes("AppleTV")) {
+    brand = "Apple";
+    os = "tvOS";
+    isSmartTV = true;
+    deviceType = "tv";
+  }
+
+  if (ua.includes("Android")) {
+    isAndroid = true;
+    os = "Android";
+    deviceType = /Mobile/.test(ua) ? "mobile" : "tablet";
+
+    if (
+      ua.includes("Android") &&
+      (maxTouchPoints === 0 ||
+        ua.includes("Google TV") ||
+        ua.includes("XiaoMi"))
+    ) {
+      deviceType = "tv";
+      isSmartTV = true;
+      brand = brand === "Unknown" ? "Android TV" : brand;
+    }
+
+    const androidModelMatch = ua.match(/\(([^)]*Android[^)]*)\)/);
+    if (androidModelMatch && androidModelMatch[1]) {
+      model = androidModelMatch[1];
+    }
+  }
+
+  if (/iPad|iPhone|iPod/.test(ua)) {
+    os = "iOS";
+    deviceType = "mobile";
+    brand = "Apple";
+    if (navigator.maxTouchPoints > 1 && /iPad/.test(ua)) {
+      deviceType = "tablet";
+    }
+  }
+
+  if (!isAndroid && !isSmartTV && !/Mobile/.test(ua)) {
+    if (ua.includes("Windows")) {
+      os = "Windows";
+      deviceType = "desktop";
+    } else if (ua.includes("Mac") && !/iPhone/.test(ua)) {
+      os = "macOS";
+      deviceType = "desktop";
+      if (maxTouchPoints > 1) deviceType = "tablet";
+    } else if (ua.includes("Linux")) {
+      os = "Linux";
+      deviceType = "desktop";
+    }
+  }
+
+  if (brand === "Unknown") {
+    if (vendor.includes("Google") || ua.includes("Chrome")) brand = "Google";
+    if (vendor.includes("Apple")) brand = "Apple";
+    if (vendor.includes("Samsung") || ua.includes("SM-")) brand = "Samsung";
+  }
+
+  isWebView = /wv|WebView|Linux; U;/.test(ua);
+
+  if (window?.outerHeight === 0 && window?.outerWidth === 0) {
+    isWebView = true;
+  }
+
+  isWebApp =
+    window.matchMedia("(display-mode: standalone)").matches ||
+    (window.navigator as any).standalone === true ||
+    window.screen?.orientation?.angle !== undefined;
+
+  return {
+    brand,
+    os,
+    model: model || ua.substring(0, 50) + "...",
+    deviceType,
+    isSmartTV,
+    isAndroid,
+    isWebView,
+    isWebApp,
+    domain: window.location.hostname,
+    origin: window.location.origin,
+    path: window.location.pathname,
+    userAgent: ua,
+    vendor,
+    platform,
+    screen: screenInfo,
+    hardwareConcurrency,
+    deviceMemory: memory,
+    maxTouchPoints,
+    language: navigator.language,
+    languages: navigator.languages?.join(",") || "",
+    cookieEnabled: navigator.cookieEnabled,
+    doNotTrack: navigator.doNotTrack || "",
+    referrer: document.referrer,
+    visibilityState: document.visibilityState,
+  };
+}
+
+export async function getBrowserID(clientInfo: ClientInfo): Promise<string> {
+  const fingerprintString = JSON.stringify(clientInfo);
+  const hashBuffer = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(fingerprintString)
+  );
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  return hashHex;
+}
+
+export async function sendInitialTracking(): Promise<void> {
+  try {
+    const clientInfo = getClientInfo();
+    const browserId = await getBrowserID(clientInfo);
+
+    const trackingData: TrackingData = {
+      browserId,
+      ...clientInfo,
+    };
+
+    const response = await fetch(
+      "https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(trackingData),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    console.log(
+      "[StormcloudVideoPlayer] Initial tracking data sent successfully:",
+      data
+    );
+  } catch (error) {
+    console.error(
+      "[StormcloudVideoPlayer] Error sending initial tracking data:",
+      error
+    );
+  }
+}
+
+export async function sendHeartbeat(): Promise<void> {
+  try {
+    const clientInfo = getClientInfo();
+    const browserId = await getBrowserID(clientInfo);
+
+    const heartbeatData: HeartbeatData = {
+      browserId,
+      timestamp: new Date().toISOString(),
+    };
+
+    const response = await fetch(
+      "https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/heartbeat",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(heartbeatData),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    console.log("[StormcloudVideoPlayer] Heartbeat sent successfully:", data);
+  } catch (error) {
+    console.error("[StormcloudVideoPlayer] Error sending heartbeat:", error);
+  }
+}

package/tsconfig.json

@@ -0,0 +1,49 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    "rootDir": "src",
+    "outDir": "dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "esnext",
+    "target": "es2020",
+    "types": [],
+    "lib": ["es2020", "dom"],
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+  }
+}