@100mslive/react-native-room-kit 0.0.2 → 0.0.4

package/lib/module/components/ZoomableView.js

@@ -1,76 +0,0 @@
-import React, { useCallback, useRef } from 'react';
-import { Animated, StyleSheet } from 'react-native';
-import { PinchGestureHandler, GestureHandlerRootView, PanGestureHandler, State } from 'react-native-gesture-handler';
-import { COLORS } from '../utils/theme';
-const ZoomableView = _ref => {
-  let {
-    children
-  } = _ref;
-  const baseScale = useRef(new Animated.Value(1)).current;
-  const pinchScale = useRef(new Animated.Value(1)).current;
-  const scale = Animated.multiply(baseScale, pinchScale);
-  let lastScale = 1;
-  const translateX = useRef(new Animated.Value(1)).current;
-  const translateY = useRef(new Animated.Value(1)).current;
-  const handlePinch = Animated.event([{
-    nativeEvent: {
-      scale: pinchScale
-    }
-  }], {
-    useNativeDriver: true
-  });
-  const handlePan = Animated.event([{
-    nativeEvent: {
-      translationX: translateX,
-      translationY: translateY
-    }
-  }], {
-    useNativeDriver: true
-  });
-  const onHandlerStateChange = useCallback(() => {
-    translateY.extractOffset();
-    translateX.extractOffset();
-  }, [translateX, translateY]);
-  const onPinchHandlerStateChange = event => {
-    if (event.nativeEvent.oldState === State.ACTIVE) {
-      lastScale *= event.nativeEvent.scale;
-      baseScale.setValue(lastScale);
-      pinchScale.setValue(1);
-    }
-  };
-  return /*#__PURE__*/React.createElement(GestureHandlerRootView, {
-    style: styles.container
-  }, /*#__PURE__*/React.createElement(PanGestureHandler, {
-    onGestureEvent: handlePan,
-    onHandlerStateChange: onHandlerStateChange
-  }, /*#__PURE__*/React.createElement(Animated.View, null, /*#__PURE__*/React.createElement(PinchGestureHandler, {
-    onGestureEvent: handlePinch,
-    onHandlerStateChange: onPinchHandlerStateChange
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: [styles.zoomableView, {
-      transform: [{
-        scale: scale
-      }, {
-        translateX
-      }, {
-        translateY
-      }]
-    }]
-  }, children)))));
-};
-export { ZoomableView };
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: COLORS.BLACK
-  },
-  zoomableView: {
-    width: '100%',
-    marginVertical: 1,
-    padding: 0.5,
-    overflow: 'hidden',
-    borderRadius: 10,
-    justifyContent: 'center',
-    alignSelf: 'center'
-  }
-});
-//# sourceMappingURL=ZoomableView.js.map

package/lib/module/components/ZoomableView.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useCallback","useRef","Animated","StyleSheet","PinchGestureHandler","GestureHandlerRootView","PanGestureHandler","State","COLORS","ZoomableView","_ref","children","baseScale","Value","current","pinchScale","scale","multiply","lastScale","translateX","translateY","handlePinch","event","nativeEvent","useNativeDriver","handlePan","translationX","translationY","onHandlerStateChange","extractOffset","onPinchHandlerStateChange","oldState","ACTIVE","setValue","createElement","style","styles","container","onGestureEvent","View","zoomableView","transform","create","backgroundColor","BLACK","width","marginVertical","padding","overflow","borderRadius","justifyContent","alignSelf"],"sourceRoot":"../../../src","sources":["components/ZoomableView.tsx"],"mappings":"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"}

package/lib/typescript/components/HMSPreviewDeviceSettings.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare const HMSPreviewDeviceSettings: React.FC;
-//# sourceMappingURL=HMSPreviewDeviceSettings.d.ts.map

package/lib/typescript/components/HMSPreviewDeviceSettings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HMSPreviewDeviceSettings.d.ts","sourceRoot":"","sources":["../../../src/components/HMSPreviewDeviceSettings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EA4P5C,CAAC"}

package/lib/typescript/components/ZoomableView.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const ZoomableView: ({ children }: {
-    children?: React.ReactNode;
-}) => React.JSX.Element;
-export { ZoomableView };
-//# sourceMappingURL=ZoomableView.d.ts.map

package/lib/typescript/components/ZoomableView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ZoomableView.d.ts","sourceRoot":"","sources":["../../../src/components/ZoomableView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAenD,QAAA,MAAM,YAAY;eAA+B,MAAM,SAAS;uBA0D/D,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/src/components/HMSPreviewDeviceSettings.tsx

@@ -1,387 +0,0 @@
-import * as React from 'react';
-import Modal from 'react-native-modal';
-import {
-  LayoutAnimation,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import Toast from 'react-native-simple-toast';
-import { useDispatch, useSelector } from 'react-redux';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  HMSUpdateListenerActions,
-  HMSAudioDevice,
-} from '@100mslive/react-native-hms';
-
-import { ChevronIcon, SettingsIcon, SpeakerIcon } from '../Icons';
-import { PressableIcon } from './PressableIcon';
-import { COLORS } from '../utils/theme';
-import { CloseIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
-import type { RootState } from '../redux';
-import { setRoomLocallyMuted } from '../redux/actions';
-
-enum PreviewModalCloseActions {
-  SWITCH_AUDIO_OUTPUT_IOS,
-}
-
-export const HMSPreviewDeviceSettings: React.FC = () => {
-  const actionAfterModalHide = React.useRef<PreviewModalCloseActions | null>(
-    null
-  );
-  const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
-  const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
-
-  /// VVV
-  const [deviceListDropdownOpen, setDeviceListDropdownOpen] =
-    React.useState(false);
-  const [currentAudioOutputDevice, setCurrentAudioOutputDevice] =
-    React.useState<HMSAudioDevice | null>(null);
-  const [availableAudioOutputDevices, setAvailableAudioOutputDevices] =
-    React.useState<HMSAudioDevice[]>([]);
-  /// ^^^
-
-  const roomLocallyMuted = useSelector(
-    (state: RootState) => state.hmsStates.roomLocallyMuted
-  );
-
-  React.useEffect(() => {
-    if (Platform.OS === 'android') {
-      let ignore = false;
-
-      const getCurrentAudioOutputDevice = async () => {
-        const device = await hmsInstance.getAudioOutputRouteType();
-        if (!ignore) {
-          setCurrentAudioOutputDevice(device);
-        }
-      };
-
-      const getAvailableAudioOutputDevices = async () => {
-        const devices = await hmsInstance.getAudioDevicesList();
-        if (!ignore) {
-          setAvailableAudioOutputDevices(devices);
-        }
-      };
-
-      getCurrentAudioOutputDevice();
-      getAvailableAudioOutputDevices();
-
-      return () => {
-        ignore = true;
-      };
-    }
-  }, [hmsInstance]);
-
-  const cleanup = () => {
-    setDeviceListDropdownOpen(false);
-  };
-
-  const closeModal = () => {
-    setSettingsModalVisible(false);
-    cleanup();
-  };
-
-  // closes modal and no action will be taken after modal has been closed
-  const dismissModal = () => {
-    actionAfterModalHide.current = null;
-    closeModal();
-  };
-
-  const handleSpeakerChange = () => {
-    if (Platform.OS === 'ios') {
-      actionAfterModalHide.current =
-        PreviewModalCloseActions.SWITCH_AUDIO_OUTPUT_IOS;
-      closeModal();
-    } else {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setDeviceListDropdownOpen((prev) => !prev);
-    }
-  };
-
-  React.useEffect(() => {
-    if (Platform.OS === 'android') {
-      let ignore = false;
-      hmsInstance.setAudioDeviceChangeListener((data: any) => {
-        if (!ignore && data) {
-          setCurrentAudioOutputDevice(data.device);
-        }
-
-        Toast.showWithGravity(
-          `Audio Device Output changed to: ${getDescription(data?.device)}`,
-          Toast.LONG,
-          Toast.TOP
-        );
-      });
-
-      return () => {
-        ignore = true;
-
-        hmsInstance.removeEventListener(
-          HMSUpdateListenerActions.ON_AUDIO_DEVICE_CHANGED
-        );
-      };
-    }
-  }, [hmsInstance]);
-
-  const handleOnModalClose = () => {
-    if (actionAfterModalHide.current === null) {
-      return;
-    }
-
-    if (
-      actionAfterModalHide.current ===
-      PreviewModalCloseActions.SWITCH_AUDIO_OUTPUT_IOS
-    ) {
-      hmsInstance.switchAudioOutputUsingIOSUI();
-    }
-  };
-
-  const handleMuteRoom = () => {
-    hmsInstance.setPlaybackForAllAudio(!roomLocallyMuted);
-    dispatch(setRoomLocallyMuted(!roomLocallyMuted));
-  };
-
-  const handleSelectAudioDevice = (device: HMSAudioDevice) => {
-    hmsInstance.switchAudioOutput(device);
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setDeviceListDropdownOpen(false);
-  };
-
-  return (
-    <View>
-      <PressableIcon onPress={() => setSettingsModalVisible(true)}>
-        <SettingsIcon />
-      </PressableIcon>
-
-      <Modal
-        isVisible={settingsModalVisible}
-        animationIn={'slideInUp'}
-        animationOut={'slideOutDown'}
-        backdropColor={COLORS.BACKGROUND.DIM}
-        backdropOpacity={0.3}
-        onBackButtonPress={dismissModal}
-        onBackdropPress={dismissModal}
-        useNativeDriver={true}
-        onModalHide={handleOnModalClose}
-        useNativeDriverForBackdrop={true}
-        hideModalContentWhileAnimating={true}
-        // swipeDirection={['up', 'down']}
-        // swipe
-        style={styles.modal}
-      >
-        <SafeAreaView style={styles.container}>
-          <View style={styles.header}>
-            <Text style={styles.headerText}>Device Settings</Text>
-
-            <TouchableOpacity
-              onPress={dismissModal}
-              hitSlop={styles.closeIconHitSlop}
-            >
-              <CloseIcon />
-            </TouchableOpacity>
-          </View>
-
-          <View style={styles.divider} />
-
-          <Text style={styles.itemLabel}>Speakers</Text>
-
-          <View>
-            <TouchableHighlight
-              underlayColor={COLORS.SURFACE.DEFAULT}
-              style={styles.item}
-              onPress={handleSpeakerChange}
-            >
-              <>
-                <View style={styles.itemTextContainer}>
-                  <SpeakerIcon muted={false} />
-
-                  <Text style={styles.itemText} numberOfLines={1}>
-                    {currentAudioOutputDevice
-                      ? getDescription(currentAudioOutputDevice)
-                      : 'Switch Audio Output Device'}
-                  </Text>
-                </View>
-
-                <ChevronIcon
-                  direction="down"
-                  style={
-                    Platform.OS === 'ios'
-                      ? styles.downToRightChevronIcon
-                      : deviceListDropdownOpen
-                      ? styles.downToUpChevronIcon
-                      : null
-                  }
-                />
-              </>
-            </TouchableHighlight>
-
-            {Platform.OS === 'android' && deviceListDropdownOpen ? (
-              <View
-                style={{
-                  height: 160,
-                  marginTop: 8,
-                  overflow: 'hidden',
-                  borderRadius: 8,
-                  backgroundColor: COLORS.SURFACE.DEFAULT,
-                }}
-              >
-                <ScrollView showsVerticalScrollIndicator={true}>
-                  {availableAudioOutputDevices.sort().map((device) => (
-                    <TouchableOpacity
-                      disabled={device === currentAudioOutputDevice}
-                      style={{
-                        paddingHorizontal: 16,
-                        paddingVertical: 12,
-                        backgroundColor:
-                          device === currentAudioOutputDevice
-                            ? COLORS.PRIMARY.DARK
-                            : undefined,
-                      }}
-                      onPress={() => handleSelectAudioDevice(device)}
-                    >
-                      <Text style={styles.itemText}>
-                        {getDescription(device)}
-                      </Text>
-                    </TouchableOpacity>
-                  ))}
-                </ScrollView>
-              </View>
-            ) : null}
-          </View>
-
-          <TouchableOpacity
-            style={styles.item2}
-            onPress={handleMuteRoom}
-            activeOpacity={0.7}
-          >
-            <View style={styles.itemTextContainer}>
-              <SpeakerIcon muted={roomLocallyMuted} />
-
-              <Text style={styles.itemText} numberOfLines={1}>
-                Mute Room
-              </Text>
-            </View>
-
-            <Switch
-              value={roomLocallyMuted}
-              thumbColor={COLORS.BASE.WHITE}
-              trackColor={{
-                true: COLORS.PRIMARY.DEFAULT,
-                false: COLORS.SECONDARY.DISABLED,
-              }}
-              onValueChange={handleMuteRoom}
-            />
-          </TouchableOpacity>
-        </SafeAreaView>
-      </Modal>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end',
-  },
-  container: {
-    backgroundColor: COLORS.SURFACE.DIM,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    padding: 24,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  headerText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '500',
-    lineHeight: 24,
-    letterSpacing: 0.15,
-  },
-  closeIconHitSlop: {
-    bottom: 16,
-    left: 16,
-    right: 16,
-    top: 16,
-  },
-  divider: {
-    marginVertical: 24,
-    height: 1,
-    backgroundColor: COLORS.BORDER.DEFAULT,
-  },
-  itemLabel: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    lineHeight: 20,
-    letterSpacing: 0.25,
-    marginBottom: 8,
-  },
-  item: {
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 8,
-    backgroundColor: COLORS.SURFACE.BRIGHT,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  item2: {
-    marginTop: 24,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    // borderRadius: 8,
-    // backgroundColor: COLORS.SURFACE.BRIGHT,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  itemTextContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  itemText: {
-    flex: 1,
-    marginHorizontal: 16,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    lineHeight: 24,
-    letterSpacing: 0.5,
-  },
-  downToRightChevronIcon: {
-    transform: [{ rotateZ: '-90deg' }],
-  },
-  downToUpChevronIcon: {
-    transform: [{ rotateZ: '-180deg' }],
-  },
-});
-
-const getDescription = (ofDevice: HMSAudioDevice) => {
-  switch (ofDevice) {
-    case HMSAudioDevice.AUTOMATIC:
-      return 'Automatic';
-    case HMSAudioDevice.BLUETOOTH:
-      return 'Bluetooth';
-    case HMSAudioDevice.EARPIECE:
-      return 'Earpiece';
-    case HMSAudioDevice.SPEAKER_PHONE:
-      return 'Phone Speaker';
-    case HMSAudioDevice.WIRED_HEADSET:
-      return 'Wired Headset';
-  }
-};

package/src/components/ZoomableView.tsx

@@ -1,91 +0,0 @@
-import React, { useCallback, useRef } from 'react';
-import { Animated, StyleSheet } from 'react-native';
-import {
-  PinchGestureHandler,
-  GestureHandlerRootView,
-  PanGestureHandler,
-  State,
-} from 'react-native-gesture-handler';
-import type {
-  HandlerStateChangeEvent,
-  PinchGestureHandlerEventPayload,
-} from 'react-native-gesture-handler';
-
-import { COLORS } from '../utils/theme';
-
-const ZoomableView = ({ children }: { children?: React.ReactNode }) => {
-  const baseScale = useRef(new Animated.Value(1)).current;
-  const pinchScale = useRef(new Animated.Value(1)).current;
-  const scale = Animated.multiply(baseScale, pinchScale);
-  let lastScale = 1;
-  const translateX = useRef(new Animated.Value(1)).current;
-  const translateY = useRef(new Animated.Value(1)).current;
-
-  const handlePinch = Animated.event([{ nativeEvent: { scale: pinchScale } }], {
-    useNativeDriver: true,
-  });
-
-  const handlePan = Animated.event(
-    [{ nativeEvent: { translationX: translateX, translationY: translateY } }],
-    { useNativeDriver: true }
-  );
-
-  const onHandlerStateChange = useCallback(() => {
-    translateY.extractOffset();
-    translateX.extractOffset();
-  }, [translateX, translateY]);
-
-  const onPinchHandlerStateChange = (
-    event: HandlerStateChangeEvent<PinchGestureHandlerEventPayload>
-  ) => {
-    if (event.nativeEvent.oldState === State.ACTIVE) {
-      lastScale *= event.nativeEvent.scale;
-      baseScale.setValue(lastScale);
-      pinchScale.setValue(1);
-    }
-  };
-
-  return (
-    <GestureHandlerRootView style={styles.container}>
-      <PanGestureHandler
-        onGestureEvent={handlePan}
-        onHandlerStateChange={onHandlerStateChange}
-      >
-        <Animated.View>
-          <PinchGestureHandler
-            onGestureEvent={handlePinch}
-            onHandlerStateChange={onPinchHandlerStateChange}
-          >
-            <Animated.View
-              style={[
-                styles.zoomableView,
-                {
-                  transform: [{ scale: scale }, { translateX }, { translateY }],
-                },
-              ]}
-            >
-              {children}
-            </Animated.View>
-          </PinchGestureHandler>
-        </Animated.View>
-      </PanGestureHandler>
-    </GestureHandlerRootView>
-  );
-};
-
-export { ZoomableView };
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: COLORS.BLACK,
-  },
-  zoomableView: {
-    width: '100%',
-    marginVertical: 1,
-    padding: 0.5,
-    overflow: 'hidden',
-    borderRadius: 10,
-    justifyContent: 'center',
-    alignSelf: 'center',
-  },
-});