stormcloud-video-player 0.1.3 → 0.1.4

package/src/ui/StormcloudVideoPlayer.tsx

@@ -1,258 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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

@@ -1,49 +0,0 @@
-{
-  // 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,
-  }
-}