sfm-uikit-react-native/src/style/EnxVideoViewStyle.js

It is a react native component for SmartFloMeet users.

import { StyleSheet,Dimensions} from 'react-native';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
  },
  waitMsg: {
    fontSize: 16,
    fontWeight: "bold"
  },
  itemInvisible: {
    backgroundColor: 'transparent',
  },
  itemText: {
    color: '#fff',
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  local_stream_border: {
    marginTop: 50,
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderColor: "rgba(255,255,255,0.4)",
    height: 60,
    width: 400,
    borderWidth: 4,
    paddingLeft: 120,
    borderRadius: 4,
    justifyContent: "center",
    alignSelf: "center"
  },
  inlineImg_: {
    width: 42,
    alignSelf: "center",
    height: 42,
    top: 10
  },
  disconnectImg: {
    width: 60,
    height: 60,
  },
  flexList: {
    justifyContent: "space-between",
    backgroundColor: 'white',
    padding: 0,
    margin: 1,
  },
  containerView: {
    backgroundColor: "black",
    borderWidth: 1,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
    padding: 5,
    margin: 5,
  },
  playerView: {
    backgroundColor:"pink",  
    padding: 5,
    marginTop:5,
    width: 298, 
    height: 120
  },
  middle: {
    flex: 0.3,
    backgroundColor: "beige",
    borderWidth: 5,
  },
  bottom: {
    flex: 0.3,
    backgroundColor: "pink",
    borderWidth: 5,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
  selfView: {
    position: 'absolute',  
    width: 101,
    height:101,
    top:10,
    
    backgroundColor:'white',
    borderRadius:7,
    justifyContent: 'center', 
    alignItems: 'center',
},
  bottomBar: {
    position: 'absolute',  
    width: '100%',
    height:60,
    bottom:0,
    marginBottom:25,
},

  content: {
    padding: 20,
  },

  content__modal: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.45,
    shadowRadius: 16,
  }, 
  simpleText: {
    fontSize: 15,
    textAlign: "center",
    fontWeight: "bold",
    margin: 10
  },
  arrowStyle:{ width: 30,
    alignSelf: "center",
    height: 30,
  
tintColor:"grey",transform: [{ rotate: '180deg'}]},

  content2: {
    paddingHorizontal: 15,
    shadowColor: 'green',

  },

  content__row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',

    paddingVertical: 15,

    borderBottomColor: 'grey',
    borderBottomWidth: 1,
  },

 

  content__name: {
    fontSize: 16,
    textAlign: "center",
    fontWeight: "bold",
    color:"#242424",

  },
  hlscontainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black', // Ensure a background color for visibility
  },
  hlsvideo: {
    flex: 1,
    alignSelf: 'stretch', // Stretch to fill container
    width: '100%',
    height: '100%',
  },
  //inUsed
  inlineImg: {
    width: 20,
    alignSelf: "center",
    height: 20,
    top: 0
  },
  raiseHandImg: {
    width: 30,
    alignSelf: "center",
    height: 30,
    top: 0
  },
  expandButton: {
    padding: 5,
    alignItems: "center",
  },
  expandedScreen: {
    flex: 1,
    backgroundColor: "#fff", // Customize the background color
  },
  mainScreen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  videoContainer: {
    position: 'absolute',
    top: 10,
    
    right: 2,
    backgroundColor:'white',
    borderRadius:7,
    justifyContent: 'center', 
    alignItems: 'center',
    zIndex: 101,
  },
  videoContainer1: {
    position: 'absolute',
    top: 10,
    
    right: 2,
    backgroundColor:'white',
    borderRadius:7,
    justifyContent: 'center', 
    alignItems: 'center',
   
  },
  
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1, // Keep it on top of the video screen
    backgroundColor: 'rgba(255,255,255,0.0)', // Optional: add transparency if needed
  },
  bottomScreen: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: "#fff", // Customize as needed
    borderTopLeftRadius: 20, // Optional for rounded corners
    borderTopRightRadius: 20, // Optional for rounded corners
    overflow: "hidden", // Hide any overflow content
    width: Dimensions.get("window").width > 400?  400 : Dimensions.get("window").width,
    alignSelf: "center", 
  },
   // Touch area and item styling
   touchableArea: {
    position: 'absolute', // Position it absolutely to cover the mainContainer
    top: 0,
    bottom: 0,
    left: 0,
    right: 0, // Cover the entire area of the mainContainer
    backgroundColor: 'transparent', // Ensure it doesn't block any visual elements
  },
  deviceItem: {
    paddingVertical: 15, // Padding inside each device item for better touch area
    paddingHorizontal: 10,
    backgroundColor: '#ffffff',
    borderRadius: 5,
  },
  deviceText: {
    fontSize: 16,
    color: '#000000',
  },
  listContainer: {
    marginBottom: 20,  // Adds some space between the two lists
    width: '100%',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    textAlign: 'center',
    color: '#333', // You can change the color as needed
  },
  itemContainer: {
    padding: 10,
    backgroundColor: '#f9f9f9',
    marginBottom: 5,
    borderRadius: 5,
  },
  separator: {
    backgroundColor: 'grey',
    height: 1,
  },
});

export { styles }