@100mslive/react-native-room-kit 0.0.1

package/lib/module/components/StreamingQualityModalContent.js

@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { View, TouchableOpacity, Text, StyleSheet, Platform } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { CustomButton } from './CustomButton';
+import { COLORS } from '../utils/theme';
+import { Menu, MenuItem } from './MenuModal';
+export const StreamingQualityModalContent = _ref => {
+  let {
+    track,
+    cancelModal
+  } = _ref;
+  const hmsInstance = useSelector(state => state.user.hmsInstance);
+  const [remoteVideoTrack, setRemoteVideoTrack] = useState(null);
+  const [showQualityOptions, setShowQualityOptions] = useState(false);
+  const [originalLayer, setOriginalLayer] = useState(null);
+  const [selectedLayer, setSelectedLayer] = useState(null);
+  const [layerDefinitions, setLayerDefinitions] = useState([]);
+  useEffect(() => {
+    if (remoteVideoTrack) {
+      const getSelectedLayer = async () => {
+        const layer = await remoteVideoTrack.getLayer();
+        setOriginalLayer(layer);
+        setSelectedLayer(layer);
+      };
+      const getLayerDefinitions = async () => {
+        const layerDefinitions = await remoteVideoTrack.getLayerDefinition();
+        setLayerDefinitions(layerDefinitions);
+      };
+      getSelectedLayer();
+      getLayerDefinitions();
+    }
+  }, [remoteVideoTrack]);
+  useEffect(() => {
+    if (hmsInstance) {
+      const getRemoteVideoTrack = async () => {
+        const remoteVideoTrack = await hmsInstance.getRemoteVideoTrackFromTrackId(track.trackId);
+        setRemoteVideoTrack(remoteVideoTrack);
+      };
+      getRemoteVideoTrack();
+    }
+  }, [track, hmsInstance]);
+  const changeStreamingQuality = async () => {
+    cancelModal();
+    if (!selectedLayer || !remoteVideoTrack || selectedLayer === originalLayer) {
+      return;
+    }
+    remoteVideoTrack.setLayer(selectedLayer).then(value => {
+      if (value) {
+        console.log('Set Layer Success: ', value);
+      }
+    }).catch(e => console.log('Set Layer Error: ', e));
+  };
+  const changeSubmitDisabled = !remoteVideoTrack || selectedLayer === originalLayer;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.roleChangeModalHeading
+  }, "Change Streaming Quality"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.participantRole
+  }, "Current Layer: ", originalLayer || '-'), /*#__PURE__*/React.createElement(View, {
+    style: styles.contentContainer
+  }, /*#__PURE__*/React.createElement(Menu, {
+    visible: showQualityOptions,
+    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.participantFilterContainer,
+      onPress: () => setShowQualityOptions(true)
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.participantFilterText,
+      numberOfLines: 1
+    }, selectedLayer), /*#__PURE__*/React.createElement(MaterialIcons, {
+      name: showQualityOptions ? 'arrow-drop-up' : 'arrow-drop-down',
+      style: styles.participantFilterIcon,
+      size: 24
+    })),
+    onRequestClose: () => setShowQualityOptions(false),
+    style: styles.participantsMenuContainer
+  }, layerDefinitions.map(layerDefinition => {
+    const isSelected = layerDefinition.layer === selectedLayer;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      onPress: () => {
+        setShowQualityOptions(false);
+        setSelectedLayer(layerDefinition.layer);
+      },
+      key: layerDefinition.layer,
+      style: isSelected ? styles.participantMenuActiveItem : undefined
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.participantMenuItem
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.participantFilterText
+    }, layerDefinition.layer, " ", layerDefinition.resolution.width, "x", layerDefinition.resolution.height)));
+  }))), /*#__PURE__*/React.createElement(View, {
+    style: styles.roleChangeModalPermissionContainer
+  }, /*#__PURE__*/React.createElement(CustomButton, {
+    title: "Cancel",
+    onPress: cancelModal,
+    viewStyle: styles.roleChangeModalCancelButton,
+    textStyle: styles.roleChangeModalButtonText
+  }), /*#__PURE__*/React.createElement(CustomButton, {
+    disabled: changeSubmitDisabled,
+    title: "Change",
+    onPress: changeStreamingQuality,
+    viewStyle: styles.roleChangeModalSuccessButton,
+    textStyle: styles.roleChangeModalButtonText
+  })));
+};
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    position: 'relative'
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    marginTop: 24
+  },
+  participantRole: {
+    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginTop: 8,
+    fontFamily: 'Inter-Regular',
+    textTransform: 'capitalize'
+  },
+  participantFilterContainer: {
+    padding: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: COLORS.BORDER.LIGHT,
+    borderRadius: 8
+  },
+  participantFilterText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontFamily: 'Inter-Regular',
+    fontSize: 16,
+    lineHeight: 16 * 1.4,
+    marginRight: 12,
+    textTransform: 'capitalize'
+  },
+  participantFilterIcon: {
+    color: COLORS.TEXT.HIGH_EMPHASIS
+  },
+  roleChangeModalHeading: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize'
+  },
+  participantsMenuContainer: {
+    paddingTop: 8,
+    backgroundColor: COLORS.SURFACE.LIGHT,
+    overflow: 'hidden'
+  },
+  participantMenuActiveItem: {
+    backgroundColor: COLORS.PRIMARY.DEFAULT
+  },
+  participantMenuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: Platform.OS === 'ios' ? 16 : 0
+  },
+  roleChangeModalPermissionContainer: {
+    flexDirection: 'row',
+    marginTop: 28,
+    alignItems: 'center'
+  },
+  roleChangeModalCancelButton: {
+    backgroundColor: COLORS.SECONDARY.DISABLED,
+    borderColor: COLORS.SECONDARY.DISABLED,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 8,
+    width: '48%',
+    alignSelf: 'center',
+    marginRight: '4%'
+  },
+  roleChangeModalSuccessButton: {
+    backgroundColor: COLORS.PRIMARY.DEFAULT,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: COLORS.PRIMARY.DEFAULT,
+    borderRadius: 8,
+    width: '48%',
+    alignSelf: 'center'
+  },
+  roleChangeModalButtonText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize'
+  }
+});
+//# sourceMappingURL=StreamingQualityModalContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","useSelector","View","TouchableOpacity","Text","StyleSheet","Platform","MaterialIcons","CustomButton","COLORS","Menu","MenuItem","StreamingQualityModalContent","_ref","track","cancelModal","hmsInstance","state","user","remoteVideoTrack","setRemoteVideoTrack","showQualityOptions","setShowQualityOptions","originalLayer","setOriginalLayer","selectedLayer","setSelectedLayer","layerDefinitions","setLayerDefinitions","getSelectedLayer","layer","getLayer","getLayerDefinitions","getLayerDefinition","getRemoteVideoTrack","getRemoteVideoTrackFromTrackId","trackId","changeStreamingQuality","setLayer","then","value","console","log","catch","e","changeSubmitDisabled","createElement","style","styles","container","roleChangeModalHeading","participantRole","contentContainer","visible","anchor","participantFilterContainer","onPress","participantFilterText","numberOfLines","name","participantFilterIcon","size","onRequestClose","participantsMenuContainer","map","layerDefinition","isSelected","key","participantMenuActiveItem","undefined","participantMenuItem","resolution","width","height","roleChangeModalPermissionContainer","title","viewStyle","roleChangeModalCancelButton","textStyle","roleChangeModalButtonText","disabled","roleChangeModalSuccessButton","create","padding","position","justifyContent","marginTop","color","TEXT","MEDIUM_EMPHASIS","fontSize","lineHeight","letterSpacing","fontFamily","textTransform","flexDirection","alignItems","borderWidth","borderColor","BORDER","LIGHT","borderRadius","HIGH_EMPHASIS","marginRight","paddingTop","backgroundColor","SURFACE","overflow","PRIMARY","DEFAULT","paddingLeft","OS","SECONDARY","DISABLED","paddingHorizontal","paddingVertical","alignSelf"],"sourceRoot":"../../../src","sources":["components/StreamingQualityModalContent.tsx"],"mappings":"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"}

package/lib/module/components/SwitchRow.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Switch, View, Text, StyleSheet } from 'react-native';
+import { COLORS } from '../utils/theme';
+export const SwitchRow = _ref => {
+  let {
+    text,
+    LeftIcon,
+    containerStyle,
+    value,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, containerStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, LeftIcon, /*#__PURE__*/React.createElement(Text, {
+    style: styles.text
+  }, text)), /*#__PURE__*/React.createElement(Switch, {
+    value: value,
+    thumbColor: COLORS.WHITE,
+    trackColor: {
+      true: COLORS.PRIMARY.DEFAULT,
+      false: COLORS.SECONDARY.DISABLED
+    },
+    onValueChange: onChange
+  }));
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  text: {
+    fontFamily: 'Inter-Medium',
+    fontSize: 16,
+    lineHeight: 24,
+    color: COLORS.TEXT.HIGH_EMPHASIS
+  }
+});
+//# sourceMappingURL=SwitchRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Switch","View","Text","StyleSheet","COLORS","SwitchRow","_ref","text","LeftIcon","containerStyle","value","onChange","createElement","style","styles","container","thumbColor","WHITE","trackColor","true","PRIMARY","DEFAULT","false","SECONDARY","DISABLED","onValueChange","create","flexDirection","alignItems","justifyContent","fontFamily","fontSize","lineHeight","color","TEXT","HIGH_EMPHASIS"],"sourceRoot":"../../../src","sources":["components/SwitchRow.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAG7D,SAASC,MAAM,QAAQ,gBAAgB;AAUvC,OAAO,MAAMC,SAA8B,GAAGC,IAAA,IAMxC;EAAA,IANyC;IAC7CC,IAAI;IACJC,QAAQ;IACRC,cAAc;IACdC,KAAK;IACLC;EACF,CAAC,GAAAL,IAAA;EACC,oBACEP,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACY,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEN,cAAc;EAAE,gBAC9CV,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACY,KAAK,EAAEC,MAAM,CAACC;EAAU,GAC3BP,QAAQ,eAETT,KAAA,CAAAa,aAAA,CAACV,IAAI;IAACW,KAAK,EAAEC,MAAM,CAACP;EAAK,GAAEA,IAAW,CAClC,CAAC,eAEPR,KAAA,CAAAa,aAAA,CAACZ,MAAM;IACLU,KAAK,EAAEA,KAAM;IACbM,UAAU,EAAEZ,MAAM,CAACa,KAAM;IACzBC,UAAU,EAAE;MACVC,IAAI,EAAEf,MAAM,CAACgB,OAAO,CAACC,OAAO;MAC5BC,KAAK,EAAElB,MAAM,CAACmB,SAAS,CAACC;IAC1B,CAAE;IACFC,aAAa,EAAEd;EAAS,CACzB,CACG,CAAC;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGX,UAAU,CAACuB,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDtB,IAAI,EAAE;IACJuB,UAAU,EAAE,cAAc;IAC1BC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE7B,MAAM,CAAC8B,IAAI,CAACC;EACrB;AACF,CAAC,CAAC"}

package/lib/module/components/Tile.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { HMSTrackSource } from '@100mslive/react-native-hms';
+import Feather from 'react-native-vector-icons/Feather';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { styles } from './styles';
+import { parseMetadata } from '../utils/functions';
+import { DisplayTrack } from './DisplayTrack';
+import { COLORS } from '../utils/theme';
+import { useIsPortraitOrientation } from '../utils/dimension';
+const TileUnmemoized = _ref => {
+  var _peerTrackNode$peer, _peerTrackNode$track, _peerTrackNode$track2, _peerTrackNode$peer2, _peerTrackNode$peer3;
+  let {
+    onPeerTileMorePress,
+    peerTrackNode,
+    totalTilesInContainer,
+    setHmsViewRefs
+  } = _ref;
+  const isPortraitOrientation = useIsPortraitOrientation();
+  const parsedMetadata = parseMetadata(peerTrackNode === null || peerTrackNode === void 0 || (_peerTrackNode$peer = peerTrackNode.peer) === null || _peerTrackNode$peer === void 0 ? void 0 : _peerTrackNode$peer.metadata);
+  const oneTileStyle = {
+    width: '100%',
+    height: '100%'
+  };
+  const twoTileStyle = {
+    width: '100%',
+    height: '50%'
+  };
+  const threeTileStyle = {
+    width: '100%',
+    height: '33.3333%'
+  };
+  const fourTileStyle = {
+    width: '50%',
+    height: '50%'
+  };
+  const oneTileStyleLandscape = {
+    width: '100%',
+    height: '100%'
+  };
+  const twoTileStyleLandscape = {
+    width: '50%',
+    height: '100%'
+  };
+  const threeTileStyleLandscape = {
+    width: '33.3333%',
+    height: '100%'
+  };
+  const fourTileStyleLandscape = {
+    width: '50%',
+    height: '50%'
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      borderWidth: 1
+    }, (peerTrackNode === null || peerTrackNode === void 0 || (_peerTrackNode$track = peerTrackNode.track) === null || _peerTrackNode$track === void 0 ? void 0 : _peerTrackNode$track.source) !== undefined && (peerTrackNode === null || peerTrackNode === void 0 || (_peerTrackNode$track2 = peerTrackNode.track) === null || _peerTrackNode$track2 === void 0 ? void 0 : _peerTrackNode$track2.source) !== HMSTrackSource.REGULAR ? styles.gridTile : isPortraitOrientation ? totalTilesInContainer === 1 ? oneTileStyle : totalTilesInContainer === 2 ? twoTileStyle : totalTilesInContainer === 3 ? threeTileStyle : fourTileStyle : totalTilesInContainer === 1 ? oneTileStyleLandscape : totalTilesInContainer === 2 ? twoTileStyleLandscape : totalTilesInContainer === 3 ? threeTileStyleLandscape : fourTileStyleLandscape]
+  }, /*#__PURE__*/React.createElement(DisplayTrack
+  // saving HmsView ref in collection with uniqueId as key
+  , {
+    ref: ref => setHmsViewRefs(peerTrackNode.id, ref),
+    isLocal: peerTrackNode === null || peerTrackNode === void 0 || (_peerTrackNode$peer2 = peerTrackNode.peer) === null || _peerTrackNode$peer2 === void 0 ? void 0 : _peerTrackNode$peer2.isLocal,
+    peer: peerTrackNode === null || peerTrackNode === void 0 ? void 0 : peerTrackNode.peer,
+    videoTrack: peerTrackNode === null || peerTrackNode === void 0 ? void 0 : peerTrackNode.track,
+    videoStyles: styles.generalTile,
+    isDegraded: peerTrackNode === null || peerTrackNode === void 0 ? void 0 : peerTrackNode.isDegraded
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.morePeerOptionsContainer
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => onPeerTileMorePress(peerTrackNode),
+    style: {
+      padding: 8,
+      backgroundColor: COLORS.SECONDARY.DISABLED,
+      borderRadius: 18
+    }
+  }, /*#__PURE__*/React.createElement(Feather, {
+    name: "more-horizontal",
+    style: styles.mic,
+    size: 20
+  }))), (peerTrackNode === null || peerTrackNode === void 0 || (_peerTrackNode$peer3 = peerTrackNode.peer) === null || _peerTrackNode$peer3 === void 0 || (_peerTrackNode$peer3 = _peerTrackNode$peer3.audioTrack) === null || _peerTrackNode$peer3 === void 0 ? void 0 : _peerTrackNode$peer3.isMute()) && /*#__PURE__*/React.createElement(View, {
+    style: styles.micContainer
+  }, /*#__PURE__*/React.createElement(Feather, {
+    name: "mic-off",
+    style: styles.mic,
+    size: 20
+  })), parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isBRBOn ? /*#__PURE__*/React.createElement(View, {
+    style: styles.status
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.brbOnContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.brbOn
+  }, "BRB"))) : null, parsedMetadata !== null && parsedMetadata !== void 0 && parsedMetadata.isHandRaised ? /*#__PURE__*/React.createElement(View, {
+    style: styles.status
+  }, /*#__PURE__*/React.createElement(Ionicons, {
+    name: "hand-left",
+    style: {
+      color: COLORS.TWIN.YELLOW
+    },
+    size: 20
+  })) : null);
+};
+const Tile = /*#__PURE__*/React.memo(TileUnmemoized);
+Tile.displayName = 'Tile';
+export { Tile };
+//# sourceMappingURL=Tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","TouchableOpacity","HMSTrackSource","Feather","Ionicons","styles","parseMetadata","DisplayTrack","COLORS","useIsPortraitOrientation","TileUnmemoized","_ref","_peerTrackNode$peer","_peerTrackNode$track","_peerTrackNode$track2","_peerTrackNode$peer2","_peerTrackNode$peer3","onPeerTileMorePress","peerTrackNode","totalTilesInContainer","setHmsViewRefs","isPortraitOrientation","parsedMetadata","peer","metadata","oneTileStyle","width","height","twoTileStyle","threeTileStyle","fourTileStyle","oneTileStyleLandscape","twoTileStyleLandscape","threeTileStyleLandscape","fourTileStyleLandscape","createElement","style","borderWidth","track","source","undefined","REGULAR","gridTile","ref","id","isLocal","videoTrack","videoStyles","generalTile","isDegraded","morePeerOptionsContainer","onPress","padding","backgroundColor","SECONDARY","DISABLED","borderRadius","name","mic","size","audioTrack","isMute","micContainer","isBRBOn","status","brbOnContainer","brbOn","isHandRaised","color","TWIN","YELLOW","Tile","memo","displayName"],"sourceRoot":"../../../src","sources":["components/Tile.tsx"],"mappings":"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"}

package/lib/module/components/TilesContainer.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Dimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { styles } from './styles';
+import { Tile } from './Tile';
+const TilesContainerUnmemoized = _ref => {
+  let {
+    peerTrackNodes,
+    setHmsViewRefs,
+    onPeerTileMorePress
+  } = _ref;
+  const {
+    left,
+    right
+  } = useSafeAreaInsets();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.page, {
+      width: Dimensions.get('window').width - left - right
+    }]
+  }, peerTrackNodes === null || peerTrackNodes === void 0 ? void 0 : peerTrackNodes.map((peerTrackNode, _idx, arr) => /*#__PURE__*/React.createElement(Tile, {
+    key: peerTrackNode.id,
+    setHmsViewRefs: setHmsViewRefs,
+    onPeerTileMorePress: onPeerTileMorePress,
+    peerTrackNode: peerTrackNode,
+    totalTilesInContainer: arr.length
+  })));
+};
+const TilesContainer = /*#__PURE__*/React.memo(TilesContainerUnmemoized);
+TilesContainer.displayName = 'TilesContainer';
+export { TilesContainer };
+//# sourceMappingURL=TilesContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Dimensions","useSafeAreaInsets","styles","Tile","TilesContainerUnmemoized","_ref","peerTrackNodes","setHmsViewRefs","onPeerTileMorePress","left","right","createElement","style","page","width","get","map","peerTrackNode","_idx","arr","key","id","totalTilesInContainer","length","TilesContainer","memo","displayName"],"sourceRoot":"../../../src","sources":["components/TilesContainer.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,iBAAiB,QAAQ,gCAAgC;AAGlE,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,IAAI,QAAQ,QAAQ;AAS7B,MAAMC,wBAAuD,GAAGC,IAAA,IAI1D;EAAA,IAJ2D;IAC/DC,cAAc;IACdC,cAAc;IACdC;EACF,CAAC,GAAAH,IAAA;EACC,MAAM;IAAEI,IAAI;IAAEC;EAAM,CAAC,GAAGT,iBAAiB,CAAC,CAAC;EAE3C,oBACEH,KAAA,CAAAa,aAAA,CAACZ,IAAI;IACHa,KAAK,EAAE,CACLV,MAAM,CAACW,IAAI,EACX;MAAEC,KAAK,EAAEd,UAAU,CAACe,GAAG,CAAC,QAAQ,CAAC,CAACD,KAAK,GAAGL,IAAI,GAAGC;IAAM,CAAC;EACxD,GAEDJ,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEU,GAAG,CAAC,CAACC,aAAa,EAAEC,IAAI,EAAEC,GAAG,kBAC5CrB,KAAA,CAAAa,aAAA,CAACR,IAAI;IACHiB,GAAG,EAAEH,aAAa,CAACI,EAAG;IACtBd,cAAc,EAAEA,cAAe;IAC/BC,mBAAmB,EAAEA,mBAAoB;IACzCS,aAAa,EAAEA,aAAc;IAC7BK,qBAAqB,EAAEH,GAAG,CAACI;EAAO,CACnC,CACF,CACG,CAAC;AAEX,CAAC;AAED,MAAMC,cAAc,gBAAG1B,KAAK,CAAC2B,IAAI,CAACrB,wBAAwB,CAAC;AAE3DoB,cAAc,CAACE,WAAW,GAAG,gBAAgB;AAE7C,SAASF,cAAc"}

package/lib/module/components/ZoomableView.js

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1 @@
+{"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/module/components/index.js

@@ -0,0 +1,9 @@
+export * from './ChatWindow';
+export * from './Preview';
+export * from './Picker';
+export * from './ZoomableView';
+export * from './CustomInput';
+export * from './CustomButton';
+export * from './DefaultModal';
+export * from './MenuModal';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,aAAa"}