@100mslive/react-native-room-kit/lib/module/components/PeerMinimizedView.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { CameraIcon, MaximizeIcon, MicIcon } from '../Icons';
import { PressableIcon } from './PressableIcon';
import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
import { selectCanPublishTrackForRole } from '../hooks-sdk-selectors';
import { useHMSRoomStyleSheet } from '../hooks-util';
export const usePeerMinimizedViewDimensions = () => {
  const canPublishAudio = useCanPublishAudio();
  const canPublishVideo = useCanPublishVideo();
  const iconTakesSpace = 20 + 6; // Width + Right Margin
  const totalWidth = 128;
  const widthLessIconsWidth = totalWidth - 2 * iconTakesSpace;
  return {
    width: widthLessIconsWidth + (canPublishAudio ? iconTakesSpace : 0) + (canPublishVideo ? iconTakesSpace : 0),
    height: 36
  };
};
const _PeerMinimizedView = ({
  peerTrackNode,
  onMaximizePress
}) => {
  var _peerTrackNode$peer$a, _peerTrackNode$track;
  const peerCanPublishAudio = selectCanPublishTrackForRole(peerTrackNode.peer.role, 'audio');
  const peerCanPublishVideo = selectCanPublishTrackForRole(peerTrackNode.peer.role, 'video');
  const isAudioMuted = (_peerTrackNode$peer$a = peerTrackNode.peer.audioTrack) === null || _peerTrackNode$peer$a === void 0 ? void 0 : _peerTrackNode$peer$a.isMute();
  const isVideoMuted = (_peerTrackNode$track = peerTrackNode.track) === null || _peerTrackNode$track === void 0 ? void 0 : _peerTrackNode$track.isMute();
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      backgroundColor: theme.palette.surface_default
    },
    iconWrapper: {
      backgroundColor: theme.palette.surface_bright
    },
    name: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-Regular`
    }
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, hmsRoomStyles.container]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.wrapper
  }, peerCanPublishAudio ? /*#__PURE__*/React.createElement(View, {
    style: [styles.iconWrapper, hmsRoomStyles.iconWrapper]
  }, /*#__PURE__*/React.createElement(MicIcon, {
    muted: !!isAudioMuted,
    style: styles.icon
  })) : null, peerCanPublishVideo ? /*#__PURE__*/React.createElement(View, {
    style: [styles.iconWrapper, hmsRoomStyles.iconWrapper]
  }, /*#__PURE__*/React.createElement(CameraIcon, {
    muted: !!isVideoMuted,
    style: styles.icon
  })) : null, /*#__PURE__*/React.createElement(Text, {
    style: [styles.name, hmsRoomStyles.name],
    numberOfLines: 1
  }, peerTrackNode.peer.isLocal ? 'You' : peerTrackNode.peer.name)), /*#__PURE__*/React.createElement(PressableIcon, {
    border: false,
    style: styles.maximizeBtn,
    onPress: onMaximizePress
  }, /*#__PURE__*/React.createElement(MaximizeIcon, {
    style: styles.maximizeIcon
  })));
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    padding: 8,
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 8
  },
  wrapper: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  iconWrapper: {
    padding: 2,
    marginRight: 6,
    borderRadius: 4
  },
  icon: {
    width: 16,
    height: 16
  },
  name: {
    maxWidth: 48,
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.25,
    marginRight: 12
  },
  maximizeBtn: {
    padding: 0
  },
  maximizeIcon: {
    width: 20,
    height: 20
  }
});
export const PeerMinimizedView = /*#__PURE__*/React.memo(_PeerMinimizedView);
//# sourceMappingURL=PeerMinimizedView.js.map