Add click event to existing mouse events for Web. Also renamed the function to reflect real name for that events according to W3C

Author: OlegRyz

src/ui/components/uicontroller/UiContainer.tsx

@@ -8,7 +8,7 @@ import type { THEOplayerTheme } from '../../THEOplayerTheme';
 import type { MenuConstructor, UiControls } from './UiControls';
 import { ErrorDisplay } from '../message/ErrorDisplay';
 import { type Locale, defaultLocale } from '../util/Locale';
-import { usePointerMove } from '../../hooks/usePointerMove';
+import { useWebMouseEvents } from '../../hooks/useWebMouseEvents';
 import { useThrottledCallback } from '../../hooks/useThrottledCallback';
 
 export interface UiContainerProps {
@@ -398,7 +398,7 @@ export const UiContainer = forwardRef<UiContainerRef, UiContainerProps>((props,
    * If an ad is playing, the UI should pass through all pointer events ("box-none") in order for ad clickThrough to work.
    * Throttle the callback avoids hammering the fade-in animation.
    */
-  usePointerMove('#theoplayer-root-container', useThrottledCallback(onUserAction_, WEB_POINTER_MOVE_THROTTLE), doFadeOut_);
+  useWebMouseEvents('#theoplayer-root-container', useThrottledCallback(onUserAction_, WEB_POINTER_MOVE_THROTTLE), doFadeOut_);
 
   const combinedUiContainerStyle = [UI_CONTAINER_STYLE, props.style];
 
@@ -437,7 +437,6 @@ export const UiContainer = forwardRef<UiContainerRef, UiContainerProps>((props,
         style={[combinedUiContainerStyle, { opacity: fadeAnimation }]}
         onTouchMove={onUserAction_}
         onTouchEnd={onUserAction_}
-        onClick={onUserAction_}
         pointerEvents={adInProgress ? 'box-none' : uiVisible_ ? 'auto' : 'box-only'}>
         {uiVisible_ && (
           <>

src/ui/hooks/usePointerMove.ts src/ui/hooks/useWebMouseEvents.tssrc/ui/hooks/usePointerMove.ts renamed to src/ui/hooks/useWebMouseEvents.ts

@@ -2,29 +2,27 @@ import { useEffect } from 'react';
 import { Platform } from 'react-native';
 
 /**
- * Listens to pointer events on Web.
+ * Listens to mouse events on Web.
  */
-export const usePointerMove = (elementId: string, onMove: () => void, onLeave?: () => void) => {
+export const useWebMouseEvents = (elementId: string, onInteraction: () => void, onLeave?: () => void) => {
   useEffect(() => {
     if (Platform.OS !== 'web') {
       return;
     }
     const elementRef = document?.querySelector(elementId);
     if (elementRef) {
-      /**
-       * Listening to `mousemove` events instead of `pointermove`, which requires the page to be "activated" through
-       * a tap/click first.
-       */
-      elementRef?.addEventListener('mousemove', onMove);
+      elementRef?.addEventListener('mousemove', onInteraction);
+      elementRef?.addEventListener('click', onInteraction);
       if (onLeave) {
         elementRef?.addEventListener('mouseleave', onLeave);
       }
     }
     return () => {
-      elementRef?.removeEventListener('mousemove', onMove);
+      elementRef?.removeEventListener('mousemove', onInteraction);
+      elementRef?.removeEventListener('click', onInteraction);
       if (onLeave) {
         elementRef?.removeEventListener('mouseleave', onLeave);
       }
     };
-  }, [onMove, onLeave, elementId]);
+  }, [onInteraction, onLeave, elementId]);
 };