Mobile App - react-native-webview

[jackhajb]

React Native WebView - mobile application
@peterklingelhofer has created a repo to test a react-native-webview implementation of the streaming player. You can run and test locally via git cloneing the repo and running expo on your machine.

This ticket is created to track the progress on testing of the potential mobile app implementation.
1. iOS public testflight url
2. Android test url

When testing

1. Test status bar in dark mode
2. Background playback and display of metadata/album art
3. Portrait vs Landscape

Other issues to consider

1. How would we manage the repo on github?
2. How does this temporary solution gel with the long-term goal of building a mobile app
3. Should we also be testing (at-least locally) with development branch of stream repo considering the Wordpress transition should be launching within the next 2-3 weeks -- change the WebView source prop to source={{ uri: 'https://stream.resonate.ninja/discover' }}. As far as I know, the only difference for the streaming player should be signup/login flow and account settings
4. How do we establish a process of QA testing the the mobile app when the streaming player is updated?

[peterklingelhofer]

Thanks for setting this up @jackhajb!

3. Should we also be testing (at-least locally) with development branch of stream repo considering the Wordpress transition should be launching within the next 2-3 weeks -- change the `WebView` source prop to `source={{ uri: 'https://stream.resonate.ninja/discover' }}`.  As far as I know, the only difference for the streaming player should be signup/login flow and account settings

With respect to this third point, I just did some testing changing the uri to this new URL. I wasn't able to get past this Finish Login screen after making a new account.

When I click Finish Login, nothing happens. I can however click Library at the bottom and get to it that way. Maybe the reason Finish Login doesn't work is the same reason the Learn dropdown fails on iOS (#168), Offen-related?

Until yesterday I was not aware that cookies are currently required for users to log in. Ignore the above!

[peterklingelhofer]

Android Open Testing is available here if you'd like to update the link in the original issue: https://play.google.com/store/apps/details?id=com.resonate.streamapp

[jackhajb]

Thanks for setting this up @jackhajb!

3. Should we also be testing (at-least locally) with development branch of stream repo considering the Wordpress transition should be launching within the next 2-3 weeks -- change the `WebView` source prop to `source={{ uri: 'https://stream.resonate.ninja/discover' }}`.  As far as I know, the only difference for the streaming player should be signup/login flow and account settings

With respect to this third point, I just did some testing changing the uri to this new URL. I wasn't able to get past this screen after making a new account:

When I click Finish Login, nothing happens. I can however click Library at the bottom and get to it that way. Maybe the reason Finish Login doesn't work is the same reason the Learn dropdown fails on iOS (#168), Offen-related?

@peterklingelhofer I was able to get it working locally, let me test again.

[peterklingelhofer]

@jackhajb, I didn't realize until yesterday's chat that cookies were required for logging in. You can ignore that post earlier. Also, per this post, that will be the Android public testing link once Google approves us, so I think it's fine to leave it up there, but I wanted to note here as well that that is not live yet and if you'd like to QA test Android I have to add your email manually to the Internal Testing Group.

After I've done more digging into this, I'm going to address each of your Issues to Consider that you've made below. I'd also like to encourage others to share their ideas on this.

1. How would we manage the repo on github?

I believe someone suggested in the Telegram chat that this code could be added to the stream repository itself and managed here. It might help users find the project and have this repository be more of a central source of truth.

2. How does this temporary solution gel with the long-term goal of building a mobile app

I want to emphasize that I'd like this effort to not distract for native app development, which has the potential to be better UX all around. react-native-webview is a very strong API with a lot of features that I'm hoping will be enough to tide us over before that comes. This issue is of particular concern to me.

3. Should we also be testing (at-least locally) with development branch of stream repo considering the Wordpress transition should be launching within the next 2-3 weeks -- change the WebView source prop to source={{ uri: 'https://stream.resonate.ninja/discover' }}. As far as I know, the only difference for the streaming player should be signup/login flow and account settings

I now realize your suggestion was to test locally on this uri instead of changing the uri in the actual app code, sorry about that. I think this is a great idea! I've updated the Readme with this, in addition to more explicit yarn commands in the instructions to address this issue.

4. How do we establish a process of QA testing the the mobile app when the streaming player is updated?

Good question. Theoretically many of the bugs that would impact the mobile app would also impact the PWA viewed on a browser with a phone, but not all.