opentok / opentok-react-native

OpenTok React Native - a library for OpenTok iOS and Android SDKs
https://tokbox.com/
MIT License
210 stars 155 forks source link

Publisher object not working in absolute style as expected #763

Open boldness1 opened 2 months ago

boldness1 commented 2 months ago
<OTSession
        apiKey={Config.OT_API_KEY}
        sessionId={userSessionModel.session_id}
        token={userSessionModel.reader_ot_token}
        style={{flex:1, position:"relative"}}  >

      <OTSubscriber
        eventHandlers={{
          connected: () => {
            console.log("The subscriber started streaming.")
          },
          disconnected: (event) => {
            console.log("The subscriber disconnected. ", event)
          },
          error: () => {
            console.log("The subscriber failed.")
          },
          videoEnabled: () => {

            setSubVideo(true)
            console.log(subVideo, " videoEnabled")
          },
          videoDisabled: () => {

            setSubVideo(false)
            setTimeout(()=>console.log(subVideo, " videoDisabled", ' 1000'),1000)
          },
        }}

        properties={{
          subscribeToAudio: subAudio,
          subscribeToVideo: subVideo,
          subscribeToCaptions: true,
          preferredResolution: 30,
          preferredFrameRate: "352x288",
          audioVolume: 70,
        }}
        style={[{
          // display: subVideo ? "flex" : "none"
        }, {
          height: subVideo ? Dimensions.get("window").height : 0, width: subVideo ? Dimensions.get("screen").width : 0
        }
        ]}

        // eventHandlers={this.subscriberEventHandlers}
        // streamProperties={this.state.streamPropertie
     />

    <View style={{position:"absolute",  alignSelf:"flex-end",
      top:320,
      right:10,
      zIndex:5,
      borderRadius: 50
    }}>

        <OTPublisher style={[$publisherStyle,{display: otVideo ? "flex" : 'none' }]}
                     eventHandlers={{
                       streamCreated: (event) => {
                         setStreamId(event.streamId)
                         console.log("publisher event Stream created -- stream ID:", event.streamId)
                       },
                       streamDestroyed: (event) => {
                         setStreamId("")
                         console.log("publisher event Stream destroyed -- stream ID:", event.streamId)
                       },
                       videoEnabled: () => {
                         setOtVideo(true)
                         console.log(setOtAudio, " videoEnabled publisher event")
                       },
                       videoDisabled: () => {
                         setOtVideo(false)
                         console.log(otVideo, " videoDisabled publisher event")
                       },
                     }}
                     properties={{
                       publishAudio: otAudio,
                       publishVideo: otVideo,
                     }}
        />
      <Text style={{color:"white"}}>asdasdasdadasd</Text>
    </View>
        {
          !subVideo ?
            <UserImage style={[{
              marginTop:200

            }, $imageNameStyle]} userId={userSessionModel.customer.id} userName={userSessionModel.customer.mad}
                       imageStyle={[$imageNameStyle, {
                         height: Dimensions.get("window").height,
                         width: Dimensions.get("screen").width,
                       }]}
            />
            :
            ''
        }

      </OTSession>

const $publisherStyle: ViewStyle = {
  width: 116,
  height: 155,
  borderRadius: 50,
  borderStyle:"solid",
  borderColor:"red",
  borderWidth:10,
  zIndex:3
}

above code is just a full background subscriber and a 116 x 155 sized publisher view on right bottom of screen that is absoulet styled and given zIndex:3. The text "asdasdasdadasd" is just to text if the related view children renders above the subscriber object. However on Android device I can only see the "asdasdasdadasd" but I don't see the publisher view above subscriber, also when the subscriber view is display:none and there is an image background instead of the subscriber, this time the publisher absolute action works as expected, however in ios it works as expected in both case. I coludn't make it work correctly on android do you have any idea ? I don't think there is any mistake on my usage.

jeffswartz commented 4 weeks ago

Please try using the androidOnTop and androidZOrder options for the OTSession component:

<OTSession
  options={{
    androidOnTop: 'publisher',
  }}
  { ... }
/>