feat: add backClick event support for player

* feat: add backClick event support for player

* chore: useRef for backclick performed

* chore: restore backClickRef value & reintroduce detachEvents

---------

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

packages/ui-react/src/components/Player/Player.tsx

@@ -31,6 +31,7 @@ type Props = {
   onFirstFrame?: () => void;
   onRemove?: () => void;
   onNext?: () => void;
+  onBackClick?: () => void;
   onPlaylistItem?: () => void;
   onPlaylistItemCallback?: (item: PlaylistItem) => Promise<undefined | PlaylistItem>;
 };
@@ -50,13 +51,15 @@ const Player: React.FC<Props> = ({
   onPlaylistItem,
   onPlaylistItemCallback,
   onNext,
+  onBackClick,
   feedId,
   startTime = 0,
   autostart,
 }: Props) => {
   const playerElementRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<JWPlayer>();
   const loadingRef = useRef(false);
+  const backClickRef = useRef(false);
   const [libLoaded, setLibLoaded] = useState(!!window.jwplayer);
   const startTimeRef = useRef(startTime);
 
@@ -87,6 +90,10 @@ const Player: React.FC<Props> = ({
   const handlePlaylistItem = useEventCallback(onPlaylistItem);
   const handlePlaylistItemCallback = useEventCallback(onPlaylistItemCallback);
   const handleNextClick = useEventCallback(onNext);
+  const handleBackClick = useEventCallback(() => {
+    backClickRef.current = true;
+    onBackClick?.();
+  });
   const handleReady = useEventCallback(() => onReady && onReady(playerRef.current));
 
   const attachEvents = useCallback(() => {
@@ -101,6 +108,7 @@ const Player: React.FC<Props> = ({
     playerRef.current?.on('remove', handleRemove);
     playerRef.current?.on('playlistItem', handlePlaylistItem);
     playerRef.current?.on('nextClick', handleNextClick);
+    playerRef.current?.on('backClick', handleBackClick);
     playerRef.current?.setPlaylistItemCallback(handlePlaylistItemCallback);
   }, [
     handleReady,
@@ -115,6 +123,7 @@ const Player: React.FC<Props> = ({
     handlePlaylistItem,
     handleNextClick,
     handlePlaylistItemCallback,
+    handleBackClick,
   ]);
 
   const detachEvents = useCallback(() => {
@@ -237,10 +246,14 @@ const Player: React.FC<Props> = ({
       if (playerRef.current) {
         // Detaching events before component unmount
         detachEvents();
+        if (backClickRef.current) {
+          backClickRef.current = false;
+          return;
+        }
         playerRef.current.remove();
       }
     };
-  }, [detachEvents]);
+  }, [detachEvents, backClickRef]);
 
   return (
     <div className={styles.container} data-testid={testId('player-container')}>

packages/ui-react/src/containers/Cinema/Cinema.tsx

@@ -109,6 +109,7 @@ const Cinema: React.FC<Props> = ({
           onUserActive={handleUserActive}
           onUserInActive={handleUserInactive}
           onNext={handleNext}
+          onBackClick={onClose}
           liveEndDateTime={liveEndDateTime}
           liveFromBeginning={liveFromBeginning}
           liveStartDateTime={liveStartDateTime}

packages/ui-react/src/containers/PlayerContainer/PlayerContainer.tsx

@@ -20,6 +20,7 @@ type Props = {
   onUserActive?: () => void;
   onUserInActive?: () => void;
   onNext?: () => void;
+  onBackClick?: () => void;
   feedId?: string;
   liveStartDateTime?: string | null;
   liveEndDateTime?: string | null;
@@ -37,6 +38,7 @@ const PlayerContainer: React.FC<Props> = ({
   onUserActive,
   onUserInActive,
   onNext,
+  onBackClick,
   liveEndDateTime,
   liveFromBeginning,
   liveStartDateTime,
@@ -88,6 +90,7 @@ const PlayerContainer: React.FC<Props> = ({
       onUserActive={onUserActive}
       onUserInActive={onUserInActive}
       onNext={onNext}
+      onBackClick={onBackClick}
       onPlaylistItemCallback={handlePlaylistItemCallback}
       startTime={startTime}
       autostart={autostart}

packages/ui-react/types/jwplayer.d.ts

@@ -7,6 +7,7 @@ interface EventParams extends jwplayer.EventParams {
   nextClick: () => void;
   pipEnter: () => void;
   pipLeave: () => void;
+  backClick: () => void;
 }
 
 type ConfigOptions = {