Feature/add translation

template/package.json

@@ -81,7 +81,7 @@
     "nosleep.js": "0.12.0",
     "npm": "^9.7.2",
     "p-queue": "^7.3.4",
-    "protobufjs": "^7.2.3",
+    "protobufjs": "^7.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "18.0.0",

template/src/atoms/ActionMenu.tsx

@@ -12,6 +12,7 @@ import {
   StyleProp,
   TextStyle,
   Pressable,
+  ScrollView,
 } from 'react-native';
 import React, {SetStateAction, useState} from 'react';
 
@@ -50,6 +51,7 @@ export interface ActionMenuItem {
   iconSize?: number;
   hide?: ToolbarItemHide;
   type?: string;
+  iconPosition?: 'start' | 'end';
 }
 export interface ActionMenuProps {
   from: string;
@@ -83,6 +85,7 @@ export interface UserActionMenuItemProps {
   isBase64Icon?: boolean;
   externalIconString?: string;
   titleStyle?: StyleProp<TextStyle>;
+  iconPosition?: 'start' | 'end';
 }
 
 export const UserActionMenuItem = ({
@@ -101,12 +104,18 @@ export const UserActionMenuItem = ({
   isExternalIcon = false,
   isBase64Icon = false,
   externalIconString = '',
+  iconPosition = 'start',
 }: UserActionMenuItemProps) => {
   const iconToShow = isHovered && onHoverIcon && !disabled ? onHoverIcon : icon;
 
-  const content = (
-    <>
-      <View style={styles.iconContainer}>
+  const renderIcon = () => {
+    if (!iconToShow) return null;
+
+    return (
+      <View style={[
+        styles.iconContainer,
+        iconPosition === 'end' && styles.iconContainerEnd
+      ]}>
         {isExternalIcon ? (
           <ImageIcon
             base64={isBase64Icon}
@@ -127,7 +136,23 @@ export const UserActionMenuItem = ({
           />
         )}
       </View>
-      <Text style={[styles.text, titleStyle, {color: textColor}]}>{label}</Text>
+    );
+  };
+
+  const content = (
+    <>
+      {iconPosition === 'start' && renderIcon()}
+
+      <Text style={[
+        styles.text, 
+        titleStyle, 
+        {color: textColor},
+        iconPosition === 'end' && styles.textWithEndIcon
+      ]}>
+        {label}
+      </Text>
+
+      {iconPosition === 'end' && renderIcon()}
 
       {typeof toggleStatus === 'boolean' && (
         <View style={styles.toggleContainer}>
@@ -202,6 +227,7 @@ const ActionMenu = (props: ActionMenuProps) => {
         iconSize = 20,
         titleStyle = {},
         type = '',
+        iconPosition = 'start',
       } = item;
       return (
         <PlatformWrapper key={props.from + '_' + title + index}>
@@ -272,6 +298,7 @@ const ActionMenu = (props: ActionMenuProps) => {
                     isHovered={isHovered}
                     isExternalIcon={isExternalIcon}
                     externalIconString={externalIconString}
+                    iconPosition={iconPosition}
                     isBase64Icon={isBase64Icon}
                     onHoverIcon={onHoverIcon}
                   />
@@ -284,6 +311,22 @@ const ActionMenu = (props: ActionMenuProps) => {
     });
   };
 
+  const shouldUseScrollView = props?.containerStyle?.maxHeight !== undefined;
+
+  const renderScrollableContent = () => {
+    return shouldUseScrollView ? (
+      <ScrollView 
+        style={{ maxHeight: props.containerStyle.maxHeight }}
+        showsVerticalScrollIndicator={true}
+        nestedScrollEnabled={true}
+      >
+        {renderItems()}
+      </ScrollView>
+    ) : (
+      renderItems()
+    );
+  };
+
   return (
     <View>
       {hoverMode ? (
@@ -293,7 +336,7 @@ const ActionMenu = (props: ActionMenuProps) => {
             <div
               onMouseEnter={() => props?.onHover && props.onHover(true)}
               onMouseLeave={() => props?.onHover && props.onHover(false)}>
-              {renderItems()}
+              {renderScrollableContent()}
             </div>
           </View>
         )
@@ -311,7 +354,7 @@ const ActionMenu = (props: ActionMenuProps) => {
           </TouchableWithoutFeedback>
           <View
             style={[styles.modalView, props?.containerStyle, modalPosition]}>
-            {renderItems()}
+            {renderScrollableContent()}
           </View>
         </Modal>
       )}
@@ -388,6 +431,16 @@ const styles = StyleSheet.create({
     marginVertical: 12,
     marginLeft: 12,
   },
+  iconContainerEnd: {
+    marginLeft: 10,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textWithEndIcon: {
+    marginRight: 0,
+    paddingLeft:12
+  },
   toggleContainer: {
     justifyContent: 'center',
     alignItems: 'center',

template/src/atoms/DropDownMulti.tsx

@@ -14,6 +14,7 @@ import {
   Modal,
   View,
   Image,
+  ScrollView,
 } from 'react-native';
 import {isWebInternal} from '../utils/common';
 import ThemeConfig from '../theme';
@@ -34,6 +35,8 @@ interface Props {
   defaultSelectedValues?: LanguageType[];
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  maxAllowedSelection?: number;
+  protectedLanguages?: LanguageType[];
 }
 
 const DropdownMulti: FC<Props> = ({
@@ -45,6 +48,8 @@ const DropdownMulti: FC<Props> = ({
   icon,
   isOpen,
   setIsOpen,
+  maxAllowedSelection = 2,
+  protectedLanguages = [],
 }) => {
   const DropdownButton = useRef();
   const maxHeight = 170;
@@ -78,20 +83,20 @@ const DropdownMulti: FC<Props> = ({
     //setIsOpen(false);
 
     const isSelected = selectedValues.includes(item.value);
+    const isProtected = protectedLanguages.includes(item.value);
     let updatedValues = [...selectedValues];
 
     if (isSelected) {
-      // Item is already selected, remove it if there are more than one selected languages
-      if (selectedValues.length > 0) {
-        updatedValues = selectedValues.filter((value) => value !== item.value);
+      // Item is already selected, remove it if it's not protected and there are more than one selected languages
+      if (selectedValues.length > 0 && !isProtected) {
+        updatedValues = selectedValues.filter(value => value !== item.value);
       }
     } else {
       // Item is not selected, add it
-      if (selectedValues.length < 2) {
+      if (selectedValues.length < maxAllowedSelection) {
         updatedValues = [...selectedValues, item.value];
       } else {
-        // Max selection limit reached, replace the second selected value
-        //  updatedValues = [selectedValues[1], item.value];
+        // Max selection limit reached, do nothing or implement replacement logic
       }
     }
 
@@ -102,13 +107,15 @@ const DropdownMulti: FC<Props> = ({
   // renders each lang checkbox row
   const renderItem = ({item}): ReactElement<any, any> => {
     const isSelected = selectedValues.includes(item.value);
+    const isProtected = protectedLanguages.includes(item.value);
     const isUSEngLangSelected = selectedValues.includes('en-US');
     const isINEngLangSelected = selectedValues.includes('en-IN');
 
     const isDisabled =
-      (!isSelected && selectedValues.length === 2) ||
+      (!isSelected && selectedValues.length === maxAllowedSelection) ||
       (item.value === 'en-US' && isINEngLangSelected) ||
-      (item.value === 'en-IN' && isUSEngLangSelected);
+      (item.value === 'en-IN' && isUSEngLangSelected) ||
+      (isSelected && isProtected);
 
     setError(isDisabled || selectedValues.length === 0);
 
@@ -119,8 +126,14 @@ const DropdownMulti: FC<Props> = ({
             <Checkbox
               disabled={isDisabled}
               checked={isSelected}
-              label={item.label}
-              labelStye={styles.itemText}
+              label={
+                item.label + (isProtected ? ' (Selected by another user)' : '')
+              }
+              labelStye={
+                isProtected
+                  ? {...styles.itemText, ...styles.protectedItemText}
+                  : styles.itemText
+              }
               onChange={() => onItemPress(item)}
             />
           </View>
@@ -144,26 +157,38 @@ const DropdownMulti: FC<Props> = ({
     );
   };
 
-  const selectedLabels = selectedValues.map((value) => {
-    const selectedLanguage = data.find((item) => item.value === value);
+  const selectedLabels = selectedValues.map(value => {
+    const selectedLanguage = data.find(item => item.value === value);
+    const isProtected = protectedLanguages.includes(value);
     return selectedLanguage ? (
       <View style={styles.selectedLang}>
         <TouchableOpacity
+          disabled={isProtected}
           onPress={() => {
-            const updatedValues = selectedValues.filter(
-              (value) => value !== selectedLanguage.value,
-            );
-            setSelectedValues(updatedValues);
+            if (!isProtected) {
+              const updatedValues = selectedValues.filter(
+                value => value !== selectedLanguage.value,
+              );
+              setSelectedValues(updatedValues);
+            }
           }}>
           <ImageIcon
             iconType="plain"
             name={'close'}
             iconSize={20}
-            tintColor={$config.CARD_LAYER_5_COLOR}
+            tintColor={
+              isProtected
+                ? $config.FONT_COLOR + hexadecimalTransparency['40%']
+                : $config.CARD_LAYER_5_COLOR
+            }
           />
         </TouchableOpacity>
 
-        <Text numberOfLines={1} style={styles.dropdownOptionText}>
+        <Text
+          style={[
+            styles.dropdownOptionText,
+            isProtected && {fontStyle: 'italic', opacity: 0.7},
+          ]}>
           {selectedLanguage.label}
         </Text>
       </View>
@@ -210,13 +235,16 @@ const DropdownMulti: FC<Props> = ({
             <></>
           )}
           {/* Dropdown Text */}
-          <View
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={true}
+            contentContainerStyle={styles.scrollContainer}
             style={[
               styles.dropdownOptionTextContainer,
-              selectedValues.length === 2 && {flex: 0.9},
+              selectedValues.length === maxAllowedSelection && {flex: 1},
             ]}>
             {formattedSelectedLanguages}
-          </View>
+          </ScrollView>
         </View>
         {/* Dropdown end Icon */}
         <View style={styles.dropdownIconContainer}>
@@ -274,14 +302,17 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     flexDirection: 'row',
   },
+  scrollContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
   dropdownOptionText: {
     textAlign: 'left',
     fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.normal,
     color: $config.FONT_COLOR,
     marginLeft: 4,
-    flex: 1,
   },
   dropdownIconContainer: {
     alignSelf: 'center',
@@ -311,7 +342,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     backgroundColor: $config.CARD_LAYER_4_COLOR,
     borderRadius: 6,
-    flex: 1,
+    maxWidth: 140,
     justifyContent: 'flex-start',
     alignItems: 'center',
     flexDirection: 'row',
@@ -344,6 +375,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  protectedItemText: {
+    paddingVertical: 12,
+    opacity: 0.6,
+    fontStyle: 'italic',
+  },
 });
 
 export default DropdownMulti;

template/src/components/Controls.tsx

@@ -871,10 +871,10 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     }
 
     try {
-      const res = await start(language);
+      const res = await start(language, language);
       if (res?.message.includes('STARTED')) {
         // channel is already started now restart
-        await restart(language);
+        await restart(language, language);
       }
     } catch (error) {
       logger.error(LogSource.Internals, 'STT', 'error in starting stt', error);
@@ -1234,15 +1234,15 @@ const Controls = (props: ControlsProps) => {
       };
     }
 
-    Toast.show({
-      leadingIconName: 'lang-select',
-      type: 'info',
-      text1: heading(prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'),
-      visibilityTime: 3000,
-      primaryBtn: null,
-      secondaryBtn: null,
-      text2: subheading(subheadingObj),
-    });
+    // Toast.show({
+    //   leadingIconName: 'lang-select',
+    //   type: 'info',
+    //   text1: heading(prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'),
+    //   visibilityTime: 3000,
+    //   primaryBtn: null,
+    //   secondaryBtn: null,
+    //   text2: subheading(subheadingObj),
+    // });
     setRoomInfo(prev => {
       return {
         ...prev,