search

Hylozoic / HyloReactNative

The Hylo mobile app, built with React Native.
3 stars 0 forks source link

Make "Featured" LinkPreviews playable in App #567

Open lorenjohnson opened 2 years ago

lorenjohnson commented 2 years ago

Either use https://github.com/react-native-video/react-native-video or create WebView on Evo for our use of ReactPlayer. The second option is probably preferable, but for performance reasons it may be best to render that WebView only in the Post Detail view and not in the Feed (in the Feed just showing the thumbnail).

After some research and experiments it seems there are two paths forward:

1) Install and configure Expo Modules expo-av into the project. Likely this will give us the best native experience and open the door to a couple other Expo modules we'd really like to be using (i.e. Clipboard.copyHTML). Rough sketch of steps to accomplish this: 

* Install Expo Modules by following this guide: https://docs.expo.dev/bare/installing-expo-modules
* Install `expo-av` by following the "Bare React Native" instructions here: https://github.com/expo/expo/tree/sdk-46/packages/expo-av

2) Create a hyloApp route in hylo-evo for a ReactPlayer instance that takes the URL through a querystring param and map the API through postMessage much like is done currently with the the HyloEditor.

In both cases the result will need to be a new component called Feature which renders instead of the current LinkPreview in the case of a post having a linkPreviewFeatured set to true.

* Once we have embedded videos in the editor a custom react-native-render-html renderer will need to be created in HyloHTML to handle this case.

lorenjohnson commented 1 year ago

I have done some pre-work on this by re-designing the full-width image focused LinkPreview to being the normal Web size and style. That puts Post Images much more into focus, and leaves some attention and space for "Featured" video link previews to stand out more.