Merge pull request #115 from THEOplayer/bugfix/android-chromecast-button-non-responsive

Use onTouchEnd to fix Chromecast button non responsive on Android

Author: OlegRyz

.changeset/pink-trees-open.md

@@ -0,0 +1,5 @@
+---
+'@theoplayer/react-native-ui': patch
+---
+
+Fixed an issue on mobile platforms where the Chromecast button would not be tappable.

example/android/app/build.gradle

@@ -97,6 +97,9 @@ android {
             keyPassword 'android'
         }
     }
+    compileOptions {
+        coreLibraryDesugaringEnabled true
+    }
     buildTypes {
         debug {
             signingConfig signingConfigs.debug
@@ -117,6 +120,7 @@ dependencies {
 
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
+    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.5")
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

example/web/webpack.config.js

@@ -54,7 +54,7 @@ const CopyWebpackPluginConfig = new CopyWebpackPlugin({
 // /.*@theoplayer\/.*\.js$/ : process all js files from @theoplayer packages to apply the root import alias. This is only needed for this example.
 const babelLoaderConfiguration = {
   test: [/\.tsx?$/, /.*@theoplayer\/.*\.js$/],
-  exclude: ['/**/*.d.ts', '/**/node_modules/'],
+  exclude: [/\.d\.ts$/, /cmcd-connector\.esm\.js$/],
   use: {
     loader: 'babel-loader',
     options: {

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];
 
@@ -436,8 +436,7 @@ export const UiContainer = forwardRef<UiContainerRef, UiContainerProps>((props,
       <Animated.View
         style={[combinedUiContainerStyle, { opacity: fadeAnimation }]}
         onTouchMove={onUserAction_}
-        onStartShouldSetResponder={() => true}
-        onResponderRelease={onUserAction_}
+        onTouchEnd={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]);
 };