I have a screen with a thumbnail sized <Video> playing and then transition to another screen where the video takes up the full window via react-navigation.
Is there a way to preserve that video element and transfer it to the new screen? If I render a new <Video>, it adds a delay as the video has to buffer before it can start playing rather than being a seamless transition where I can animate as the resize happens.
This should be supported in a future version of react-navigation once RFC 17 is completed:
https://github.com/react-navigation/rfcs/issues/17
In the meantime, there is a separate project called Fluid Transitions to support it:
https://github.com/fram-x/FluidTransitions
I have not gotten to test whether this will work for videos yet, but it does allow shared transitions for images, etc.
Related
I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
I've got an application in React Native to be developed in Android and iOS, in which I'd like to take the camera stream, make some processing, and render it multiple times.
Imagine an app like Instagram, in which you can add filters to the camera live and it shows the applied filters with on live previews. It would be more or less the same.
I need to get the camera stream and be able to show it on screen multiple times.
I've tried react-native-camera, but it only lets me to get one instance of the camera to be shown.
With this same library, I've tried to take pictures in intervals of the camera and to render them via <Image> container but, of course, it's a performance kill and the app ends up crashing.
How can I achieve what I'm trying to do? Do you know of any module or any approach that allows me to do so?
Thank you.
I am currently building an objective c application in xcode that features a full screen horizontally scrolling collection view with cells that take up about 80% of the screen; similar to that of Instagram, Vine, etc. Initially in these cells are video thumbnails that are loaded from a backend source upon the loading of the view.
Since it would be terribly inefficient to load all of these videos at once, I am trying to find a way to only load one video at a time while the user scrolls through the collection view.
The way I am achieving this right now is by using the scrollViewDidEndDecelerating method to calculate whichever cell is in the center of the screen after scrolling, and then beginning to load the video, as well as the scrollViewDidScroll method to stop loading the video. This implementation is shown below:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//calculate which cell is in the center
//load video in respective cell
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
//stop loading video
}
As you all can probably see, this generates a lot of ux problems:
The video doesn't start loading until scrolling has stopped
completely
This approach doesn't account for drag gestures to
navigate the Collection View
Once a video has loaded, any drag or
scroll stops loading/playing the video
There are times where no video is loading, between scrolls
I am trying to turn this current approach into a system similar to the Instagram method of loading videos, which is as follows:
A video begins to load as soon as it begins to show up on the screen while the user scrolls
A video stops loading when a different video begins to appear on the screen while the user scrolls.
One video is always being loaded, there is no downtime between loading one video and another
I understand that in order to achieve this functionality, these loading functions will need to be done on a background thread in order to allow for seamless scrolling which I can handle, I just need to know which methods I should be using instead of the ones i'm using now in order to achieve this functionality.
You should make it such that the video uses "lazy loading" to load its contents/thumbnail.
To make it play when cell is at center, use scrollViewDidScroll to detect if the cell is completely showing by method indicated at this answer
I am trying to use video.js in a samsung smart tv application which unfortunately can only play one video at a time.
I need to simulate the smooth, preferably crossfade, transition between two videos. I am trying to do this by first fading in a screenshot of the next video and using that to cover up the screen while I switch video sources of the video.js plugin. When the player is ready I need to remove the screenshot.
The closest I have found is to remove the screenshot when "loadedmetadata" is called however I am still seeing an inconsistant blip of a black flash between the time the screenshot is removed and the video plays. This is very jarring and I need a consistent way to remove the screenshot only when the first frame has been loaded into the player.
Any other suggestions on how I could each a smooth transition between two videos while only using one video element would be greatly appreciated.
I found the loadeddata event which, as described on MDN :
The loadeddata event is fired when the first frame of the media has finished loading.
loadedmetadata only announce that media informations such as duration are loaded, but the loadeddata event should do the trick.
I want to know that how one should proceed in building animated splash screen.
I already did the animated splash screen with images but here I want to add custom animation like something is drawn on screen etc.
can anyone guide me through this.
simply you need to present a UIViewController which is hold your animations and dismiss it when your app is ready to launch. but also I think its better to follow apple HIG .. as apple describe you should
Supply a launch image to improve user experience.
Avoid using your launch image as an opportunity to provide:
An “application entry experience,” such as a splash screen An About
window Branding elements, unless they are a static part of your
application’s first screen Because users are likely to switch among
applications frequently, you should make every effort to cut launch
time to a minimum, and you should design a launch image that downplays
the experience rather than drawing attention to it.
Generally, design a launch image that is identical to the first screen
of the application.
Exceptions:
Text. The launch image is static, so any text you display in it will
not be localized.
UI elements that might change. Avoid including elements that might
look different when the application finishes launching, so that users
don’t experience a flash between the launch image and the first
application screen.