react-native-eno-audio-stream/src/audio_stream/styles.js

A player for play sound

import { Dimensions, Platform, StyleSheet } from "react-native";

const { width, height } = Dimensions.get("window");

export default StyleSheet.create({
  flex: {
    flex: 1
  },
  row: {
    flexDirection: "row"
  },
  center: {
    justifyContent: "center",
    alignItems: "center"
  },

  defaultPlayer: {
    flex: 1,
    width: "100%",
    height: 72,
    position: "absolute",
    bottom: 0
  },

  transparent: {
    backgroundColor: "transparent"
  },
  header: {
    backgroundColor: "transparent",
    borderBottomWidth: 0
  },
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "space-around",
    alignItems: "center",
    paddingTop: Platform.OS == "ios" && height == 812 ? 60 : 12
  },
  buttonLeft: {
    position: "absolute",
    top: 20,
    left: 15,
    zIndex: 1
  },
  buttonLeftExtra: {
    top: Platform.OS == "ios" && height == 812 ? 74 : null
  },
  playerResize: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    height: 72,
    backgroundColor: "rgba(0,0,0,0.8)",
    paddingLeft: 10,
    paddingRight: 10
  },
  detailContainer: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
    // marginTop: 30
  },
  detailLeft: {
    flexDirection: "column",
    justifyContent: "space-around",
    alignItems: "center"
  },
  detailCenter: {
    flexDirection: "column",
    justifyContent: "center",
    paddingTop: 30,
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 20
  },
  detailCenterSub: {
    flexDirection: "row",
    alignItems: "center"
  },
  navigation: {
    paddingTop: Platform.OS == "ios" && height >= 812 ? 0 : 20
  },
  backgroundImage: {
    flex: 1,
    backgroundColor: "transparent",
    position: "absolute",
    bottom: 0,
    width: "100%",
    height: "100%"
  },
  titleStyleResize: {
    fontFamily:
      Platform.os == "ios" ? "SukhumvitSet-Medium" : "sukhumvitset-medium",
    fontSize: 14
  },

  playbackContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 20,
    paddingRight: 20,
    marginBottom: 50
  },
  playbackContainerPod: {
    paddingLeft: 0,
    paddingRight: 0
  },
  buttonsContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    width: "100%"
  },
  playbackBar: {
    flex: 1
  },
  thumbStyle: {
    width: 15,
    height: 15,
    borderRadius: 15
  },

  playButton: {
    width: 80,
    height: 80
  },
  playButtonResize: {
    width: 54,
    height: 54,
    marginTop: 10
  },
  controlButton: {
    width: 20,
    height: 20,
    margin: 5
  },
  controlExtraButton: {
    margin: 20
  },
  buttonLive: {
    marginTop: 5
    // marginBottom: 30
  },
  buttonLiveResize: {
    marginTop: 5,
    marginLeft: 5
  },
  buttonGroup: {
    flexDirection: "row",
    flex: 1,
    justifyContent: "space-between",
    width: "100%",
    paddingLeft: 40,
    paddingRight: 40,
    marginTop: 10
  },
  contentStyle: {
    fontFamily:
      Platform.os == "ios" ? "SukhumvitSet-Medium" : "sukhumvitset-medium",
    // color: "#fff",
    fontSize: 14,
    lineHeight: 20,
    paddingTop: 5,
    textAlign: "center"
  },
  timeText: {
    fontFamily:
      Platform.os == "ios" ? "SukhumvitSet-Medium" : "sukhumvitset-medium",
    fontSize: 14,
    color: "#ABABB6",
    marginTop: 4
  },
  thumbnailResize: {
    width: 48,
    height: 48,
    borderRadius: 48 / 2
    // position: "absolute"
  },
  thumbnailResizeCircle: {
    width: 51,
    height: 51,
    borderRadius: 51 / 2,
    position: "relative"
  },
  radioStyle: {
    flex: 1,
    width: "100%",
    position: "absolute",
    bottom: 0
  },
  radioContainer: {
    flex: 1,
    width: Platform.OS == "ios" && height == 812 ? width : width + 5,
    height: height,
    position: "absolute",
    bottom: 0,
    paddingTop: Platform.OS == "ios" ? 0 : 25
  },
  videoContainer: {
    flex: 1,
    backgroundColor: "transparent",
    width: "100%",
    height: "100%",
    position: "absolute",
    bottom: 64
  },
  videoContent: {
    width: "100%",
    height: 200,
    justifyContent: "center",
    alignItems: "center"
  },
  videoStyle: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 64
  },

  thumnnailInside: {
    position: "absolute"
  },
  buttonsStyle: {
    // marginTop: 10,
    // marginBottom: 10
  }
});