Fix google cloud

frontend/.env

@@ -17,4 +17,4 @@ NEXT_PUBLIC_XMPP_MUC_DOMAIN=muc.meet.jitsi
 NEXT_PUBLIC_XMPP_AUTH_DOMAIN=auth.meet.jitsi
 NEXT_PUBLIC_JITSI_ROOM_PREFIX=
 NEXT_PUBLIC_ENVIRONMENT=dev
-NEXT_PUBLIC_TRANSCRIPTIONS_ENABLED=false
+NEXT_PUBLIC_TRANSCRIPTIONS_ENABLED=true

frontend/src/components/App/ButtonMoreOptions/index.tsx

@@ -37,8 +37,8 @@ import { useStooa } from '@/contexts/StooaManager';
 import { useModals } from '@/contexts/ModalsContext';
 import { useNavigatorType } from '@/hooks/useNavigatorType';
 import { supportsCaptureHandle } from '@/lib/helpers';
-import Conference from '@/jitsi/Conference';
-import { getTranscriptionLanguage } from '@/user/auth';
+import { useConference } from '@/jitsi/useConference';
+import { useUserAuth } from '@/user/auth/useUserAuth';
 
 interface Props {
   unlabeled?: boolean;
@@ -86,6 +86,11 @@ const ButtonMoreOptions: React.ForwardRefRenderFunction<ButtonHandle, Props> = (
     isTranscriberJoined
   } = useStooa();
 
+  const { stopTranscriptionEvent, startTranscriptionEvent, setConferenceTranscriptionLanguage } =
+    useConference();
+
+  const { getTranscriptionLanguageCookie } = useUserAuth();
+
   const { t } = useTranslation('fishbowl');
 
   const getTranscriptionText = () => {
@@ -136,19 +141,19 @@ const ButtonMoreOptions: React.ForwardRefRenderFunction<ButtonHandle, Props> = (
   };
 
   const handleTranscriptionToggle = () => {
-    const transcriptionCookie = getTranscriptionLanguage();
+    const transcriptionCookie = getTranscriptionLanguageCookie();
 
     if (!transcriptionCookie) {
       setShowTranscriptionModal(true);
       return;
     }
 
     if (isTranscriptionEnabled) {
-      Conference.stopTranscriptionEvent();
+      stopTranscriptionEvent();
       setIsTranscriptionEnabled(false);
     } else {
-      Conference.startTranscriptionEvent();
-      Conference.setTranscriptionLanguage(transcriptionCookie);
+      startTranscriptionEvent();
+      setConferenceTranscriptionLanguage(transcriptionCookie);
       if (deviceType === 'Desktop') {
         setParticipantsActive(true);
       }

frontend/src/components/App/Fishbowl/index.tsx

@@ -43,11 +43,11 @@ import useTranslation from 'next-translate/useTranslation';
 import RedRec from '@/ui/svg/rec-red.svg';
 import FeedbackForm from '../FeedbackForm';
 import { useClickOutside } from '@/hooks/useClickOutside';
-import TranscriptionText from '../TranscriptionText';
 import ModalTranscription from '../ModalTranscription/ModalTranscription';
 import { LOCALES } from '@/lib/supportedTranslationLanguages';
 import { useConference } from '@/jitsi';
 import { useUserAuth } from '@/user/auth/useUserAuth';
+import TranscriptionWrapper from '../TranscriptionText/TranscriptionWrapper';
 
 const Header = dynamic(import('../Header'), { loading: () => <div /> });
 const Footer = dynamic(import('../Footer'), { loading: () => <div /> });
@@ -86,8 +86,8 @@ const Fishbowl: FC = () => {
     showTranscriptionModal,
     setShowTranscriptionModal
   } = useModals();
-  const { startRecordingEvent } = useConference();
-  const {getTranscriptionLanguage, setTranscriptionLanguage} = useUserAuth();
+  const { startRecordingEvent, startTranscriptionEvent } = useConference();
+  const { getTranscriptionLanguageCookie, setTranscriptionLanguageCookie } = useUserAuth();
 
   const { width } = useWindowSize();
   const feedbackFormRef = useRef<HTMLDivElement>(null);
@@ -167,13 +167,13 @@ const Fishbowl: FC = () => {
   };
 
   const handleStartTranscription = () => {
-    const transcriptionCookie = getTranscriptionLanguage();
+    const transcriptionCookie = getTranscriptionLanguageCookie();
 
     if (!transcriptionCookie) {
-      setTranscriptionLanguage(LOCALES[lang]);
+      setTranscriptionLanguageCookie(LOCALES[lang]);
     }
 
-    Conference.startTranscriptionEvent();
+    startTranscriptionEvent();
     setIsTranscriptionEnabled(true);
     setParticipantsActive(true);
     setShowTranscriptionModal(false);
@@ -255,7 +255,7 @@ const Fishbowl: FC = () => {
 
         {isPreFishbowl ? <PreFishbowl /> : <Seats />}
         <ReactionsReceiver className={participantsActive ? 'drawer-open' : ''} />
-        {isTranscriptionEnabled && <TranscriptionText />}
+        {isTranscriptionEnabled && <TranscriptionWrapper />}
       </Main>
       {!isPreFishbowl && <Footer />}
       <OnBoardingTour />

frontend/src/components/App/Participants/index.tsx

@@ -64,7 +64,7 @@ const PING_TIMEOUT = 3500;
 
 const Participants: React.FC<Props> = ({ initialized, fid }) => {
   const { getParticipantList } = useJitsi();
-  const { ping, setTranscriptionLanguage, getTranscriptionLanguage } = useUserAuth();
+  const { ping, setTranscriptionLanguageCookie, getTranscriptionLanguageCookie } = useUserAuth();
 
   const { t, lang } = useTranslation('fishbowl');
   const pingInterval = useRef<number>();
@@ -132,7 +132,10 @@ const Participants: React.FC<Props> = ({ initialized, fid }) => {
   };
 
   const handleOnChangeTranscription = (event: React.MouseEvent<HTMLInputElement>) => {
-    const cookieTranscription = getTranscriptionLanguage();
+    const cookieTranscription = getTranscriptionLanguageCookie();
+
+    console.log('PRIMO --->', cookieTranscription);
+
     if (!cookieTranscription) {
       event.preventDefault();
       setShowTranscriptionModal(true);
@@ -143,7 +146,7 @@ const Participants: React.FC<Props> = ({ initialized, fid }) => {
 
     if (checkbox && checkbox.checked) {
       startTranscriptionEvent();
-      setTranscriptionLanguage(cookieTranscription);
+      setTranscriptionLanguageCookie(cookieTranscription);
       setIsTranscriptionEnabled(true);
       return;
     }

frontend/src/components/App/TranscriptionSelector/TranscriptionSelector.tsx

@@ -7,14 +7,14 @@
  * file that was distributed with this source code.
  */
 
-import Conference from '@/jitsi/Conference';
 import React, { useRef, useState } from 'react';
 import LanguageTranscriptionSelector from '../LanguageTranscriptionSelector';
 import { StyledTranscriptionWrapper } from './styles';
 import InfoSVG from '@/ui/svg/info-brown.svg';
-import { getTranscriptionLanguage, setTranscriptionLanguage } from '@/user/auth';
 import ColoredFullTooltip from '@/components/Common/ColoredFullTooltip/ColoredFullTooltip';
 import useTranslation from 'next-translate/useTranslation';
+import { useUserAuth } from '@/user/auth/useUserAuth';
+import { useConference } from '@/jitsi/useConference';
 
 interface Props {
   tooltip?: boolean;
@@ -26,12 +26,14 @@ const TranscriptionSelector = ({ tooltip, location }: Props) => {
   const [arrowPosition, setArrowPosition] = useState<string>('');
   const tipToHover = useRef<HTMLDivElement>(null);
   const { t } = useTranslation('fishbowl');
+  const { getTranscriptionLanguageCookie, setTranscriptionLanguageCookie } = useUserAuth();
+  const { setConferenceTranscriptionLanguage } = useConference();
 
-  const cookieTranscriptionLanguage = getTranscriptionLanguage();
+  const cookieTranscriptionLanguage = getTranscriptionLanguageCookie();
 
   const handleChangeTranscriptionLanguage = (locale: string): void => {
-    Conference.setTranscriptionLanguage(locale);
-    setTranscriptionLanguage(locale);
+    setConferenceTranscriptionLanguage(locale);
+    setTranscriptionLanguageCookie(locale);
   };
 
   const handleOnMouseEnter: React.MouseEventHandler = () => {

frontend/src/components/App/TranslateSelector/TranslateSelector.tsx

@@ -8,10 +8,10 @@
  */
 
 import { useStooa } from '@/contexts/StooaManager';
-import Conference from '@/jitsi/Conference';
 import LanguageTranscriptionSelector from '../LanguageTranscriptionSelector';
 import { StyledSelectorWrapper } from './styles';
 import useTranslation from 'next-translate/useTranslation';
+import { useConference } from '@/jitsi/useConference';
 
 const TranslateSelector = () => {
   const {
@@ -22,18 +22,20 @@ const TranslateSelector = () => {
     setTranslationLanguage
   } = useStooa();
 
+  const { setConferenceTranslationLanguage } = useConference();
+
   const { t } = useTranslation('fishbowl');
 
   const handleChangedLanguage = (locale: string): void => {
-    Conference.setTranslationLanguage(locale);
+    setConferenceTranslationLanguage(locale);
     setTranslationLanguage(locale);
   };
 
   const handleActiveTranslate = (): void => {
     if (!isTranslationEnabled) {
-      Conference.setTranslationLanguage(translationLanguage);
+      setConferenceTranslationLanguage(translationLanguage);
     } else {
-      Conference.setTranslationLanguage(null);
+      setConferenceTranslationLanguage(null);
     }
     setIsTranslationEnabled(current => !current);
   };

frontend/src/contexts/StooaManager.tsx

@@ -72,8 +72,13 @@ const StooaProvider = ({
   const { exitFullScreen } = useSharedTrack();
   const { initialInteraction, initializeJitsi, initializeConnection, unload, unloadKickedUser } =
     useJitsi();
-  const { setTranscriptionLanguage, stopRecordingEvent, lockConference, joinPrivateConference, joinConference } =
-    useConference();
+  const {
+    setConferenceTranscriptionLanguage,
+    stopRecordingEvent,
+    lockConference,
+    joinPrivateConference,
+    joinConference
+  } = useConference();
   const { fid } = router.query;
   const { t, lang } = useTranslation('app');
 
@@ -233,7 +238,7 @@ const StooaProvider = ({
   useEventListener(CONFERENCE_START, ({ detail: { myUserId } }) => {
     setMyUserId(myUserId);
     setConferenceReady(true);
-    setTranscriptionLanguage(LOCALES[data.locale]);
+    setConferenceTranscriptionLanguage(LOCALES[data.locale]);
 
     if (!isModerator) return;
 

frontend/src/lib/jitsi-modules/useConference.js

@@ -277,7 +277,7 @@ export const useConference = () => {
     conference.on(TRACK_REMOVED, handleTrackRemoved);
     conference.on(TRACK_MUTE_CHANGED, handleTrackMuteChanged);
     conference.on(USER_JOINED, handleUserJoin);
-    conference.on(USER_LEFT, handleUserLeft);
+    conference.on(USER_LEFT, _handleUserLeft);
     conference.on(KICKED, handleUserKicked);
     conference.on(CONFERENCE_JOINED, _handleConferenceJoin);
     conference.on(CONFERENCE_FAILED, _handleConferenceFailed);
@@ -328,7 +328,7 @@ export const useConference = () => {
       dispatchEvent(TRANSCRIPTION_TRANSCRIBER_JOINED, { joined: false });
     }
 
-    userRepository.handleUserLeft(id, user);
+    handleUserLeft(id, user);
   };
 
   const initializeJitsi = () => {
@@ -458,11 +458,11 @@ export const useConference = () => {
     conference.setLocalParticipantProperty('requestingTranscription', false);
   };
 
-  const setTranscriptionLanguage = language => {
+  const setConferenceTranscriptionLanguage = language => {
     conference.setLocalParticipantProperty('transcription_language', language);
   };
 
-  const setTranslationLanguage = language => {
+  const setConferenceTranslationLanguage = language => {
     conference.setLocalParticipantProperty('translation_language', language);
   };
 
@@ -591,8 +591,8 @@ export const useConference = () => {
     stopRecordingEvent,
     startTranscriptionEvent,
     stopTranscriptionEvent,
-    setTranscriptionLanguage,
-    setTranslationLanguage,
+    setConferenceTranscriptionLanguage,
+    setConferenceTranslationLanguage,
     stopTranslation
   };
 };

frontend/src/lib/useJitsi.js

@@ -117,7 +117,10 @@ export const useJitsi = () => {
         isCurrentUser: false,
         joined: participant.getProperty('joined') === 'yes',
         isMuted: isParticipantMuted(participant, 'audio'),
-        isVideoMuted: isParticipantMuted(participant, 'video')
+        isVideoMuted: isParticipantMuted(participant, 'video'),
+        isJigasi: participant._properties
+        ? participant._properties.features_jigasi !== undefined
+        : false
       });
     });
 

frontend/src/user/auth/index.ts

@@ -68,7 +68,6 @@ export const setRefreshToken = (value: string) => {
   cookie.set(COOKIE_REFRESH, value, { ...COOKIE_OPTIONS, expires: COOKIE_REFRESH_DAYS });
 };
 
-
 export const setToken = (token: string) => {
   const auth = new AuthToken(token);
   if (auth) {

frontend/src/user/auth/useUserAuth.ts

@@ -18,6 +18,7 @@ const COOKIE_SHARE_LINK_COOKIE = 'share_link';
 const COOKIE_ON_BOARDING_MODERATOR = 'on_boarding_moderator';
 const COOKIE_ON_BOARDING = 'on_boarding';
 const COOKIE_ON_BOARDING_DAYS = 30;
+const COOKIE_TRANSCRIPTION_LANGUAGE = 'transcription_language';
 
 export const useUserAuth = () => {
   const { setUserParticipantId, setUserParticipantSlug, getUserGuestId } = useUser();
@@ -50,6 +51,17 @@ export const useUserAuth = () => {
     return cookie.get(cookieName);
   };
 
+  const getTranscriptionLanguageCookie = () => {
+    return cookie.get(COOKIE_TRANSCRIPTION_LANGUAGE);
+  };
+
+  const setTranscriptionLanguageCookie = (language: string) => {
+    cookie.set(COOKIE_TRANSCRIPTION_LANGUAGE, language, {
+      ...COOKIE_OPTIONS,
+      expires: 30
+    });
+  };
+
   const ping = async (lang: string, slug: string) => {
     const auth = await getAuthToken();
     const params = new FormData();
@@ -95,6 +107,8 @@ export const useUserAuth = () => {
     ping,
     setOnBoardingCookie,
     setShareLinkCookie,
-    isFishbowlShareLinkCookie
+    isFishbowlShareLinkCookie,
+    getTranscriptionLanguageCookie,
+    setTranscriptionLanguageCookie
   };
 };