Remove volume button in call interface in Firefox

Add click event for `CallingVolumeButton` and `CallingScreenShareButton`
in call interface to open their respective menu.

Remove localVideoRef and remoteVideoRef from CallProvider

Change-Id: I87601153cb3e24b38a5f764b11935e32402caa31
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index 02f06e4..4bdbef4 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -17,7 +17,7 @@
  */
 
 import { Box, CircularProgress, Grid, IconButtonProps, Stack, Typography } from '@mui/material';
-import { ComponentType, ReactNode, useContext, useEffect, useMemo } from 'react';
+import { ComponentType, ReactNode, useContext, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
@@ -31,11 +31,13 @@
 import { CallContext, CallStatus } from '../contexts/CallProvider';
 import { ConversationContext } from '../contexts/ConversationProvider';
 import { WebRtcContext } from '../contexts/WebRtcProvider';
+import { VideoElementWithSinkId } from '../utils/utils';
 
 export const CallPending = () => {
   const { localStream } = useContext(WebRtcContext);
   const { conversation } = useContext(ConversationContext);
-  const { callRole, localVideoRef } = useContext(CallContext);
+  const { callRole } = useContext(CallContext);
+  const localVideoRef = useRef<VideoElementWithSinkId | null>(null);
 
   useEffect(() => {
     if (localStream && localVideoRef.current) {