-
Notifications
You must be signed in to change notification settings - Fork 156
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New OpenTok React Native API #289
Comments
@ggoldens @evillemez @ArtemSerga Would love your thoughts on this. |
LGTM @msach22 ! |
In generate API is the same as was, but with some low-level control around
So, I have only one feedback - add in library some "helper" functions to hide implementation details in @msach22 , I'm so glad to see a first steps to multiple sessions support! Thanks! |
@ArtemSerga Thanks for the feedback.
What did you have in mind for the helper functions? |
Helper function to hide verbose code in
and in
And then, a developer can decide what to do with already calculated |
I'm super excited to hear that you want to expand the API to provide more control and flexibility over how streams are rendered! With that said, I believe that we're mixing concerns here, specifically, session state handling and stream rendering. A consequence of this is also that the API becomes unnecessarily verbose. Instead I would prefer to see this implemented as a render prop component (e.g., import React, { Component } from 'react';
import { View } from 'react-native';
import { OTSession, OTPublisher, OTSubscriber } from 'opentok-react-native';
export default class App extends Component {
state = {
streamIdsWeWantToHide: ['some-stream-id']
}
renderSubscriber(subscriber) {
const {
subscriberId,
subscriberProperties
} = subscriber;
const subscriberEventHandlers = {
onClick: (event) => this.setState(state => ({
streamIdsWeWantToHide: [...state.streamIdsWeWantToHide, event.streamId]
})),
connected: (event) => console.log('connected event')
}
const hideStream = this.state.streamIdsWeWantToHide.includes(subscriberId);
return (
<OTSubscriber
streamId={subscriberId}
properties={{
...subscriberProperties,
style: {
height: 100,
width: 100,
opacity: hideStream ? 0 : 1
}
}}
eventHandlers={subscriberEventHandlers}
/>
)
}
render() {
return (
<View style={styles.containerStyle}>
<OTSession apiKey="API_KEY" sessionId="SESSION_ID" token="TOKEN">
<OTPublisher style={styles.publisherStyle} />
<OTSubscribers>
{subscribers => subscribers.map(this.renderSubscriber)}
</OTSubscribers>
</OTSession>
</View>
)
}
} or something similar. Again, so happy to see your enthusiasm and willingness to listen to feedback and continously improving the library! Great work! |
I very much agree with @knavu2's proposal, thanks for considering that approach. Do you have any timelines when this API proposal will be available to use? |
@msach22 Thanks for sketching something out and requesting feedback! Generally I agree with the recommendation here from @knavu2 . Having one component that can track all of the subscribers in the session, and accept a render prop for configuring/rendering each one, would probably be a little easier to manage. |
@msach22, do you have any timelines when this API proposal will be available to use? |
I've created a PR #306 that will allow to render |
@og2t waiting for your PR to get merged so that I can use, That is the only blocker I'm facing right now. I really appreciate your efforts :) :) |
Version 0.11.2 published on NPM 🎉 |
Closing this issue since it's already released. |
can we add multiple publisher or create multiple host just like multiple subscriber added here with react native? |
This is a proposal for a new API that would allow more control over rendering
OTSubscriber
components. Currently, the library assumes that you want to subscribe to all streams, but this new API would allow you to subscribe and render views individually. The API proposal also includes a sample on how to style, listen to events, and control subscriber audio and video.The text was updated successfully, but these errors were encountered: