@rxdrag/website-lib-core 0.0.50 → 0.0.52

package/src/react/components/Analytics/tracking.ts

@@ -0,0 +1,221 @@
+// Analytics 跟踪相关函数
+import type { AnalyticsState, PageData, TrackingData } from './types';
+import { 
+  getDeviceInfo, 
+  getPlatform, 
+  getBrowserLanguage, 
+  detectPageType,
+  getCookie 
+} from './utils';
+
+// 更新活跃时间
+export function updateActiveTime(state: AnalyticsState): void {
+  if (state.isPageVisible) {
+    const now = Date.now();
+    state.activeTime += now - state.lastActiveTime;
+    state.lastActiveTime = now;
+  }
+}
+
+// 重置页面跟踪（用于页面切换）
+export function resetPageTracking(state: AnalyticsState, pageData: PageData): void {
+  const newUrl = window.location.href;
+  // 只有当 URL 真正改变时才重置
+  if (newUrl !== state.currentPageUrl) {
+    state.currentPageUrl = newUrl;
+    pageData.start_time = Date.now();
+    state.pageLoadTime = Date.now();
+    state.isPageTracked = false;
+    // 重置活跃时间追踪
+    state.activeTime = 0;
+    state.lastActiveTime = Date.now();
+    state.isPageVisible = !document.hidden;
+  }
+}
+
+// 检查是否为真正的页面访问（简化版）
+export function isRealPageVisit(state: AnalyticsState): boolean {
+  const now = Date.now();
+
+  // 如果页面已经被跟踪过，则不是新访问
+  if (state.isPageTracked) {
+    return false;
+  }
+
+  // 检查是否在短时间内重复跟踪（全局防重复）
+  if (state.lastTrackTime > 0 && now - state.lastTrackTime < 1000) {
+    return false;
+  }
+
+  // 检查页面是否可见（避免在后台标签页中统计）
+  if (document.hidden || document.visibilityState === "hidden") {
+    return false;
+  }
+
+  return true;
+}
+
+// 处理队列中的下一个请求
+export function processQueue(state: AnalyticsState, apiEndpoint: string): void {
+  state.isRequestPending = false;
+
+  if (state.requestQueue.length > 0) {
+    const { data, eventType } = state.requestQueue.shift()!;
+    // 小延迟避免请求过于频繁
+    setTimeout(() => {
+      sendImmediately(data, eventType, state, apiEndpoint);
+    }, 100);
+  }
+}
+
+// 立即发送数据
+export function sendImmediately(
+  data: TrackingData, 
+  eventType: string, 
+  state: AnalyticsState, 
+  apiEndpoint: string
+): void {
+  state.isRequestPending = true;
+
+  fetch(apiEndpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+    },
+    body: JSON.stringify(data),
+    keepalive: true,
+  })
+    .then(() => {
+      if (eventType === "pageView") {
+        state.isPageTracked = true;
+        state.lastTrackTime = Date.now();
+        
+        // 更新全局状态（用于跨组件实例共享）
+        if (typeof window !== 'undefined') {
+          (window as any).__analyticsGlobalState = {
+            lastPageUrl: window.location.href,
+            lastTrackTime: Date.now(),
+          };
+        }
+      }
+
+      // 处理队列中的下一个请求
+      processQueue(state, apiEndpoint);
+    })
+    .catch(() => {
+      processQueue(state, apiEndpoint);
+    });
+}
+
+// 优化的网络请求函数
+export function sendTrackingData(
+  data: TrackingData, 
+  eventType: string, 
+  state: AnalyticsState, 
+  apiEndpoint: string
+): void {
+  // 对于 pageLeave 事件，立即发送（用户可能马上离开）
+  if (eventType === "pageLeave") {
+    sendImmediately(data, eventType, state, apiEndpoint);
+    return;
+  }
+
+  // 对于 pageView 事件，可以稍微延迟或批量处理
+  if (state.isRequestPending) {
+    // 如果有请求正在进行，加入队列
+    state.requestQueue.push({ data, eventType });
+    return;
+  }
+
+  sendImmediately(data, eventType, state, apiEndpoint);
+}
+
+// 创建跟踪数据
+export function createTrackingData(
+  pageData: PageData,
+  state: AnalyticsState,
+  eventType: string,
+  effectiveDuration: number
+): TrackingData {
+  return {
+    visitor_id: pageData.visitor_id,
+    session_id: pageData.session_id,
+    url: window.location.href,
+    path: window.location.pathname,
+    referrer: state.currentReferrer,
+    user_agent: pageData.user_agent,
+    duration_ms: effectiveDuration, // 使用活跃时间
+    timestamp: Date.now(),
+    type: eventType, // 添加事件类型
+    // 设备和平台信息
+    device: getDeviceInfo(),
+    platform: getPlatform(),
+    browser_language: getBrowserLanguage(),
+    // 页面信息
+    page_title: document.title || null,
+    // 屏幕信息
+    screen_width: screen.width,
+    screen_height: screen.height,
+    viewport_width: window.innerWidth,
+    viewport_height: window.innerHeight,
+    // 时区信息
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    // 是否新用户（简单判断：第一次访问该域名）
+    is_new_user:
+      !getCookie("visitor_id") ||
+      getCookie("visitor_id") === pageData.visitor_id,
+  };
+}
+
+// 发送访客数据（支持不同类型）
+export function trackPageEvent(
+  eventType: string,
+  pageData: PageData,
+  state: AnalyticsState,
+  apiEndpoint: string,
+  debugLog: (...args: any[]) => void
+): void {
+  // 对于 pageView 事件，检测页面类型
+  if (eventType === "pageView") {
+    eventType = detectPageType(eventType);
+    debugLog("Detected page type:", eventType);
+
+    // 检查是否为真正的页面访问
+    if (!isRealPageVisit(state)) {
+      return;
+    }
+  }
+
+  // 计算活跃时间
+  let effectiveDuration = 0;
+  if (eventType === "pageLeave") {
+    updateActiveTime(state); // 更新到当前时间
+    effectiveDuration = state.activeTime;
+  }
+
+  debugLog("Using referrer:", state.currentReferrer, "for event:", eventType);
+
+  const data = createTrackingData(pageData, state, eventType, effectiveDuration);
+
+  // 优化的网络请求处理
+  sendTrackingData(data, eventType, state, apiEndpoint);
+}
+
+// 兼容性函数，保持向后兼容
+export function trackPageVisit(
+  pageData: PageData,
+  state: AnalyticsState,
+  apiEndpoint: string,
+  debugLog: (...args: any[]) => void
+): void {
+  // 检查是否在短时间内（200ms）重复调用同一个 URL 的 pageView
+  const currentUrl = window.location.href;
+  const now = Date.now();
+  
+  if (state.isPageTracked && state.currentPageUrl === currentUrl && now - state.lastTrackTime < 200) {
+    return;
+  }
+  
+  trackPageEvent("pageView", pageData, state, apiEndpoint, debugLog);
+}

package/src/react/components/Analytics/types.ts

@@ -0,0 +1,60 @@
+// Analytics 相关的类型定义
+
+export interface AnalyticsProps {
+  apiEndpoint?: string;
+}
+
+export interface PageData {
+  visitor_id: string;
+  session_id: string;
+  url: string;
+  path: string;
+  referrer: string | null;
+  user_agent: string;
+  start_time: number;
+}
+
+export interface TrackingData {
+  visitor_id: string;
+  session_id: string;
+  url: string;
+  path: string;
+  referrer: string | null;
+  user_agent: string;
+  duration_ms: number;
+  timestamp: number;
+  type: string;
+  device: string;
+  platform: string;
+  browser_language: string;
+  page_title: string | null;
+  screen_width: number;
+  screen_height: number;
+  viewport_width: number;
+  viewport_height: number;
+  timezone: string;
+  is_new_user: boolean;
+}
+
+export interface RequestQueueItem {
+  data: TrackingData;
+  eventType: string;
+}
+
+export interface AnalyticsState {
+  isPageTracked: boolean;
+  currentPageUrl: string;
+  pageLoadTime: number;
+  lastTrackTime: number;
+  currentReferrer: string | null;
+  activeTime: number;
+  lastActiveTime: number;
+  isPageVisible: boolean;
+  requestQueue: RequestQueueItem[];
+  isRequestPending: boolean;
+  isAstroEnvironment: boolean;
+  pageLeaveTracked: boolean;
+  initialLoadHandled: boolean;
+  interactionThrottled: boolean;
+  lastInteractionTime: number;
+}

package/src/react/components/Analytics/utils.ts

@@ -0,0 +1,95 @@
+// Analytics 工具函数
+
+// 检查是否为开发环境
+export function isDevelopmentEnvironment(): boolean {
+  return (
+    window.location.hostname === "localhost" ||
+    window.location.hostname.startsWith("192.168.") ||
+    window.location.hostname === "127.0.0.1"
+  );
+}
+
+// 调试日志函数
+export function createDebugLogger() {
+  const isDev = isDevelopmentEnvironment();
+  return function debugLog(...args: unknown[]) {
+    if (isDev) {
+      console.log("[Analytics]", ...args);
+    }
+  };
+}
+
+// 生成唯一 ID（简单版）
+export function generateId(prefix = "v"): string {
+  return (
+    prefix +
+    Date.now().toString(36) +
+    Math.random().toString(36).substring(2, 8)
+  );
+}
+
+// 设置 cookie
+export function setCookie(name: string, value: string, days: number): void {
+  const expires = new Date();
+  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
+}
+
+// 获取 cookie
+export function getCookie(name: string): string | null {
+  const match = document.cookie.match(
+    new RegExp("(^| )" + name + "=([^;]+)")
+  );
+  return match ? match[2] : null;
+}
+
+// 获取或生成 visitor_id（长期存储）
+export function getVisitorId(): string {
+  let visitorId = getCookie("visitor_id");
+  if (!visitorId) {
+    visitorId = generateId("v");
+    setCookie("visitor_id", visitorId, 365); // 365天有效
+  }
+  return visitorId;
+}
+
+// 获取设备信息
+export function getDeviceInfo(): string {
+  const ua = navigator.userAgent;
+  if (/Mobile|Android|iPhone|iPad/.test(ua)) {
+    return /iPad/.test(ua) ? "tablet" : "mobile";
+  }
+  return "desktop";
+}
+
+// 获取平台信息
+export function getPlatform(): string {
+  const ua = navigator.userAgent;
+  if (/Windows/.test(ua)) return "Windows";
+  if (/Mac/.test(ua)) return "macOS";
+  if (/Linux/.test(ua)) return "Linux";
+  if (/Android/.test(ua)) return "Android";
+  if (/iPhone|iPad/.test(ua)) return "iOS";
+  return "Unknown";
+}
+
+// 获取浏览器语言
+export function getBrowserLanguage(): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return navigator.language || (navigator as any).userLanguage || "en";
+}
+
+// 检测页面类型
+export function detectPageType(defaultType = "pageView"): string {
+  const currentPath = window.location.pathname.toLowerCase();
+
+  // 检测是否为 thanks 页面
+  if (
+    currentPath.includes("/thanks") ||
+    currentPath.includes("/thank-you")
+  ) {
+    return "enquiry";
+  }
+
+  return defaultType;
+}

package/src/react/components/BackgroundHlsVideoPlayer.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef, type VideoHTMLAttributes } from "react";
+import Hls from "hls.js";
+
+export function BackgroundHlsVideoPlayer(
+  props: VideoHTMLAttributes<HTMLVideoElement>
+) {
+  const { poster, src, className, ...restProps } = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!videoRef.current || !src) return;
+
+    const video = videoRef.current;
+
+    if (!Hls.isSupported()) {
+      if (video.canPlayType("application/vnd.apple.mpegurl")) {
+        video.src = src;
+        video.play().catch(() => {});
+      }
+      return;
+    }
+
+    const hls = new Hls({
+      enableWorker: true,
+    });
+
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      video.play().catch(() => {});
+    });
+
+    hls.on(Hls.Events.ERROR, (event, data) => {
+      if (data.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            hls.startLoad();
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            hls.recoverMediaError();
+            break;
+          default:
+            hls.destroy();
+            break;
+        }
+      }
+    });
+
+    hls.loadSource(src);
+    hls.attachMedia(video);
+
+    return () => {
+      hls.destroy();
+    };
+  }, [src]);
+
+  return (
+    <video
+      ref={videoRef}
+      autoPlay
+      loop
+      muted
+      playsInline
+      poster={poster}
+      className={className}
+      preload="metadata"
+      {...restProps}
+    ></video>
+  );
+}

package/src/react/components/BackgroundVideoPlayer.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef, type VideoHTMLAttributes } from "react";
+
+export function VideoPlayer(props: VideoHTMLAttributes<HTMLVideoElement>) {
+  const { poster, src, className, ...restProps } = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      const video = videoRef.current;
+
+      // 确保视频可以自动播放
+      video.play().catch((error) => {
+        console.log("自动播放失败:", error);
+      });
+    }
+  }, []);
+
+  return (
+    <video
+      ref={videoRef}
+      autoPlay
+      loop
+      muted
+      playsInline
+      poster={poster}
+      className={className}
+      preload="metadata"
+      src={src}
+      {...restProps}
+    ></video>
+  );
+}