From 5390a687497debd2767fe454e3d22163ffd802ea Mon Sep 17 00:00:00 2001
From: Amir Ghezelbash <thisisamir98@gmail.com>
Date: Fri, 6 Dec 2024 15:23:08 +0300
Subject: [PATCH] fix: Resolve hand raise reactivity issues

---
 .../CallParticipantsListItem.tsx              |  8 +++---
 .../CallParticipantsListItemHandRaiseIcon.tsx | 23 +++++++++++-----
 .../CallingParticipantList.tsx                |  2 +-
 .../calling/FullscreenVideoCall.tsx           | 26 +++++++++----------
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItem.tsx b/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItem.tsx
index 59e39d083dc..5ca71ef756d 100644
--- a/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItem.tsx
+++ b/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItem.tsx
@@ -20,7 +20,6 @@
 import React from 'react';
 
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
-import {observable, Observable} from 'knockout';
 
 import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
 import {UserStatusBadges} from 'Components/Badge';
@@ -46,7 +45,7 @@ export interface CallParticipantsListItemProps {
   onContextMenu: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   isSelfVerified?: boolean;
   isLast?: boolean;
-  handRaisedAt?: Observable<number | null>;
+  handRaisedAt?: number | null;
 }
 
 export const CallParticipantsListItem = ({
@@ -55,11 +54,10 @@ export const CallParticipantsListItem = ({
   showContextMenu,
   onContextMenu,
   isLast = false,
-  handRaisedAt = observable(null),
+  handRaisedAt = null,
 }: CallParticipantsListItemProps) => {
   const {user} = callParticipant;
   const {isMe: isSelf, isFederated} = user;
-
   const {isAudioEstablished} = useKoSubscribableChildren(callParticipant, ['isAudioEstablished']);
 
   const {
@@ -110,7 +108,7 @@ export const CallParticipantsListItem = ({
           onDropdownClick={event => onContextMenu?.(event as unknown as React.MouseEvent<HTMLDivElement>)}
         />
 
-        <CallParticipantsListItemHandRaiseIcon handRaisedAt={{value: handRaisedAt}} />
+        {handRaisedAt && <CallParticipantsListItemHandRaiseIcon handRaisedAt={handRaisedAt} />}
 
         {isAudioEstablished ? (
           <>
diff --git a/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItemHandRaiseIcon.tsx b/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItemHandRaiseIcon.tsx
index 99ba1956f99..a5d7c2c8775 100644
--- a/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItemHandRaiseIcon.tsx
+++ b/src/script/components/calling/CallParticipantsListItem/CallParticipantsListItemHandRaiseIcon.tsx
@@ -17,24 +17,35 @@
  *
  */
 
-import {Observable} from 'knockout';
+import {useEffect, useState} from 'react';
+
+import {TimeInMillis} from '@wireapp/commons/lib/util/TimeUtil';
 
 import {InviteIcon, Tooltip} from '@wireapp/react-ui-kit';
 
-import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
 import {formatDuration} from 'Util/TimeUtil';
 
 import {toolTipStyles} from './CallParticipantsListItemHandRaiseIcon.styles';
 
 export interface CallParticipantsListItemHandRaiseIconProps {
-  handRaisedAt: {value: Observable<number | null>};
+  handRaisedAt: number;
 }
 
 export function CallParticipantsListItemHandRaiseIcon({handRaisedAt}: CallParticipantsListItemHandRaiseIconProps) {
-  const {value: handRaisedAtValue} = useKoSubscribableChildren(handRaisedAt, ['value']);
+  const [duration, setDuration] = useState<string>();
+
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      setDuration(formatDuration(Date.now() - handRaisedAt + TimeInMillis.SECOND).text);
+    }, TimeInMillis.SECOND);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  });
 
-  if (!handRaisedAtValue) {
+  if (!duration) {
     return null;
   }
 
@@ -46,7 +57,7 @@ export function CallParticipantsListItemHandRaiseIcon({handRaisedAt}: CallPartic
             <InviteIcon />
             <span>
               {t('videoCallParticipantRaisedHandRaiseDuration', {
-                duration: formatDuration(Date.now() - handRaisedAtValue).text,
+                duration,
               })}
             </span>
           </div>
diff --git a/src/script/components/calling/CallingCell/CallIngParticipantList/CallingParticipantList.tsx b/src/script/components/calling/CallingCell/CallIngParticipantList/CallingParticipantList.tsx
index 65f31864bfc..d2c299cdc86 100644
--- a/src/script/components/calling/CallingCell/CallIngParticipantList/CallingParticipantList.tsx
+++ b/src/script/components/calling/CallingCell/CallIngParticipantList/CallingParticipantList.tsx
@@ -107,7 +107,7 @@ export const CallingParticipantList = ({
               {handRaisedParticipants.map((participant, index, participantsArray) => (
                 <li key={participant.clientId} className="call-ui__participant-list__participant">
                   <CallParticipantsListItem
-                    handRaisedAt={participant.handRaisedAt}
+                    handRaisedAt={participant.handRaisedAt()}
                     key={participant.clientId}
                     callParticipant={participant}
                     isSelfVerified={isSelfVerified}
diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
index c9be651c963..9a74fb0c749 100644
--- a/src/script/components/calling/FullscreenVideoCall.tsx
+++ b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -148,11 +148,12 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   const [showEmojisBar, setShowEmojisBar] = useState<boolean>(false);
   const [disabledEmojis, setDisabledEmojis] = useState<string[]>([]);
   const selfParticipant = call.getSelfParticipant();
-  const {sharesScreen: selfSharesScreen, sharesCamera: selfSharesCamera} = useKoSubscribableChildren(selfParticipant, [
-    'sharesScreen',
-    'sharesCamera',
-  ]);
-
+  const {
+    sharesScreen: selfSharesScreen,
+    sharesCamera: selfSharesCamera,
+    handRaisedAt: selfHandRaisedAt,
+  } = useKoSubscribableChildren(selfParticipant, ['sharesScreen', 'sharesCamera', 'handRaisedAt']);
+  const isSelfHandRaised = Boolean(selfHandRaisedAt);
   const emojiBarRef = useRef(null);
   const emojiBarToggleButtonRef = useRef(null);
 
@@ -225,11 +226,10 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   const openPopup = () => callingRepository.setViewModeDetached();
 
   const [isCallViewOpen, toggleCallView] = useToggleState(false);
-  const [isHandRaised, setIsHandRaised] = useState(false);
   const [isParticipantsListOpen, toggleParticipantsList] = useToggleState(false);
 
   function toggleIsHandRaised(currentIsHandRaised: boolean) {
-    setIsHandRaised(!currentIsHandRaised);
+    selfParticipant.handRaisedAt(new Date().getTime());
     sendHandRaised(!currentIsHandRaised, call);
   }
 
@@ -818,16 +818,16 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
                   {Config.getConfig().FEATURE.ENABLE_IN_CALL_HAND_RAISE && !is1to1Conversation && (
                     <li className="video-controls__item">
                       <button
-                        data-uie-value={isHandRaised ? 'active' : 'inactive'}
-                        onClick={() => toggleIsHandRaised(isHandRaised)}
-                        onKeyDown={event => handleKeyDown(event, () => toggleIsHandRaised(isHandRaised))}
-                        className={cx('video-controls__button_primary', {active: isHandRaised})}
+                        data-uie-value={isSelfHandRaised ? 'active' : 'inactive'}
+                        onClick={() => toggleIsHandRaised(isSelfHandRaised)}
+                        onKeyDown={event => handleKeyDown(event, () => toggleIsHandRaised(isSelfHandRaised))}
+                        className={cx('video-controls__button_primary', {active: isSelfHandRaised})}
                         type="button"
                         data-uie-name="do-toggle-hand-raise"
                         role="switch"
-                        aria-checked={isHandRaised}
+                        aria-checked={isSelfHandRaised}
                         title={
-                          isHandRaised
+                          isSelfHandRaised
                             ? t('videoCallOverlayHideParticipantsList')
                             : t('videoCallOverlayShowParticipantsList')
                         }