aws / aws/amazon-ivs-react-native-player

Unexpected resizing behaviour (slow/delayed/animated)

Open
#57 11 comments 1 reaction 0 assignees View on GitHub
feature-request
Dominant language
TypeScript
Stars
313
Forks
42
PR merge metrics
No merged PRs in 30d

Description

The player exhibits some unexpected behaviour when it resizes - it appears to smoothly animate to its new dimensions over a period of about 180-220 milliseconds.

I don't know if it's reasonable to call this a bug, but the current behaviour is unfortunate for our use case, as we have a requirement to animate the player's size in arbitrary ways that don't synchronise with the apparent default animation behaviour.

## More details

Currently, the animations we have implemented result in the player "lagging behind" its parent, leaving such obvious signs as parent borders being under or over-filled, and the player shrinking or growing at a rate that is slightly out-of-phase with other changing UI states.

## Steps to reproduce

I've modified the SimpleExample component in the project examples to demonstrate the behaviour. See [this fork](https://github.com/dwood023/amazon-ivs-react-native-player) (specifically, [this commit](https://github.com/dwood023/amazon-ivs-react-native-player/commit/d28ef7bb6dd974588d16e73afa63beb6a359023a)) for the code.

Here is a GIF of the demo running on a simulator - the expected behaviour is shown by the orange view, whose size is shown to update instantly. The player's width is determined by the exact same value as the orange view, but acquires its new size slowly, making it appear to "lag behind". This example is analogous to our use case in which the player's size is out of sync with its parent or surrounding elements whose sizes are changing.

![asd](https://s1.gifyu.com/images/recording8e091d7739da4241.gif)

For convenience, here is the code to produce the component rendered in this example:
```tsx
import * as React from 'react';
import { View } from 'react-native';
import IVSPlayer from 'amazon-ivs-react-native-player';

const URL =
'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8';

const growthRate = 10;
const growthInterval = 1000;

export default function SimpleExample() {
const [width, setWidth] = React.useState(10);

React.useEffect(() => {
const interval = setInterval(() => setWidth((width) => (width + growthRate) % 100), growthInterval);
return () => clearInterval(interval);
}, []);

return (
<>




);
}

```

## Expected behavior

For our use-case, it would be preferable for the player to instantly acquire the size prescribed by its props, so we can precisely control its size without worrying about the apparent default animation lagging behind.

## Device

Tested on real iPhone 13 device, as well as an iPhone 13 Simulator running iOS 15.4.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.