agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/components/useVideoCall.tsx

@@ -0,0 +1,65 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React, {SetStateAction, useState} from 'react';
+import {createHook} from 'customization-implementation';
+import InvitePopup from './popups/InvitePopup';
+import StopRecordingPopup from './popups/StopRecordingPopup';
+
+export interface VideoCallContextInterface {
+  showInvitePopup: boolean;
+  setShowInvitePopup: React.Dispatch<SetStateAction<boolean>>;
+  showStopRecordingPopup: boolean;
+  setShowStopRecordingPopup: React.Dispatch<SetStateAction<boolean>>;
+  showLayoutOption: boolean;
+  setShowLayoutOption: React.Dispatch<SetStateAction<boolean>>;
+}
+
+const VideoCallContext = React.createContext<VideoCallContextInterface>({
+  showInvitePopup: false,
+  setShowInvitePopup: () => {},
+  showStopRecordingPopup: false,
+  setShowStopRecordingPopup: () => {},
+  showLayoutOption: false,
+  setShowLayoutOption: () => {},
+});
+
+interface VideoCallProviderProps {
+  children: React.ReactNode;
+}
+const VideoCallProvider = (props: VideoCallProviderProps) => {
+  const [showLayoutOption, setShowLayoutOption] = useState(false);
+  const [showInvitePopup, setShowInvitePopup] = useState(false);
+  const [showStopRecordingPopup, setShowStopRecordingPopup] = useState(false);
+  return (
+    <VideoCallContext.Provider
+      value={{
+        showInvitePopup,
+        setShowInvitePopup,
+        showStopRecordingPopup,
+        setShowStopRecordingPopup,
+        showLayoutOption,
+        setShowLayoutOption,
+      }}>
+      <StopRecordingPopup />
+      <InvitePopup />
+      {props.children}
+    </VideoCallContext.Provider>
+  );
+};
+
+/**
+ *
+ */
+const useVideoCall = createHook(VideoCallContext);
+
+export {VideoCallProvider, useVideoCall};

package/template/src/language/default-labels/precallScreenLabels.ts

@@ -25,9 +25,9 @@ export const PrecallScreenLabels: I18nPrecallScreenLabelsInterface = {
   joinRoomButton: ({ready, role}) =>
     ready
       ? !role
-        ? 'Join Room'
-        : `Join Room as ${
-            role === ClientRole.Broadcaster ? 'Host' : 'Audience'
+        ? 'JOIN MEETING'
+        : `JOIN MEETING AS ${
+            role === ClientRole.Broadcaster ? 'HOST' : 'AUDIENCE'
           }`
       : `Loading...`,
 };

package/template/src/pages/Authenticate.tsx

@@ -20,21 +20,12 @@ import {
 import Logo from '../subComponents/Logo';
 import OAuth from '../components/OAuth';
 import Illustration from '../subComponents/Illustration';
-import {useHasBrandLogo} from '../utils/common';
-import DimensionContext from '../components/dimension/DimensionContext';
+import {useHasBrandLogo, useIsDesktop} from '../utils/common';
 import {useString} from '../utils/useString';
 
 const Authenticate = () => {
   const hasBrandLogo = useHasBrandLogo();
-  const {getDimensionData} = useContext(DimensionContext);
-  const [isDesktop, setIsDesktop] = useState(false);
-  let onLayout = (e: LayoutChangeEvent) => {
-    const {isDesktop} = getDimensionData(
-      e.nativeEvent.layout.width,
-      e.nativeEvent.layout.height,
-    );
-    setIsDesktop(isDesktop);
-  };
+  const isDesktop = useIsDesktop();
   //commented for v1 release
   // const oauthLoginLabel = useString('oauthLoginLabel')();
   // const oauthProviderLabel = useString('oauthProviderLabel')();
@@ -42,7 +33,6 @@ const Authenticate = () => {
   const oauthProviderLabel = 'Please select an OAuth provider to login.';
   return (
     <ImageBackground
-      onLayout={onLayout}
       source={{uri: $config.BG}}
       style={style.full}
       resizeMode={'cover'}>
@@ -54,7 +44,7 @@ const Authenticate = () => {
             <Text style={style.headline}>{oauthProviderLabel}</Text>
             <OAuth />
           </View>
-          {isDesktop ? (
+          {isDesktop() ? (
             <View style={style.full}>
               <Illustration />
             </View>
@@ -93,14 +83,14 @@ const style = StyleSheet.create({
   heading: {
     fontSize: 40,
     fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
+    color: $config.FONT_COLOR,
     marginBottom: 20,
   },
   headline: {
     fontSize: 20,
     letterSpacing: 2,
     fontWeight: '400',
-    color: $config.PRIMARY_FONT_COLOR,
+    color: $config.FONT_COLOR,
     marginTop: -50,
     marginBottom: 20,
   },