Merge pull request #14 from THEOplayer/bugfix/transition-issues

Bugfix/transition issues

src/ui/components/button/PipButton.tsx

@@ -36,11 +36,12 @@ export class PipButton extends PureComponent<unknown, PipButtonState> {
   };
 
   private togglePip = () => {
-    const player = (this.context as UiContext).player;
+    const context = this.context as UiContext;
+    const player = context.player;
     switch (player.presentationMode) {
       case 'inline':
       case 'fullscreen':
-        player.presentationMode = PresentationMode.pip;
+        context.ui.enterPip_();
         break;
       case 'picture-in-picture':
         player.presentationMode = PresentationMode.inline;

src/ui/components/uicontroller/UiContainer.tsx

@@ -221,7 +221,13 @@ export class UiContainer extends PureComponent<React.PropsWithChildren<UiContain
   };
 
   private onPresentationModeChange = (event: PresentationModeChangeEvent) => {
-    this.setState({ pip: event.presentationMode === PresentationMode.pip });
+    this.setState({ pip: event.presentationMode === PresentationMode.pip }, () => {
+      if (!this.state.pip) {
+        // Show UI when exiting PIP
+        this.stopAnimationsAndShowUi_();
+        this.resumeAnimationsIfPossible_();
+      }
+    });
   };
 
   get buttonsEnabled_(): boolean {
@@ -248,8 +254,25 @@ export class UiContainer extends PureComponent<React.PropsWithChildren<UiContain
   public closeCurrentMenu_ = () => {
     this._menus.pop();
     const nextMenu = this._menus.length > 0 ? this._menus[this._menus.length - 1] : undefined;
-    this.setState({ currentMenu: nextMenu?.() });
-    this.resumeAnimationsIfPossible_();
+    this.setState({ currentMenu: nextMenu?.() }, () => {
+      this.resumeAnimationsIfPossible_();
+    });
+  };
+
+  public enterPip_ = () => {
+    // Make sure the UI is disabled first before entering PIP
+    clearTimeout(this._currentFadeOutTimeout);
+    const { fadeAnimation } = this.state;
+    this.setState({ buttonsEnabled: false });
+    Animated.timing(fadeAnimation, {
+      useNativeDriver: true,
+      toValue: 0,
+      duration: 0,
+    }).start(() => {
+      this.setState({ showing: false }, () => {
+        this.props.player.presentationMode = PresentationMode.pip;
+      });
+    });
   };
 
   private stopAnimationsAndShowUi_() {

src/ui/components/uicontroller/UiControls.ts

@@ -28,4 +28,9 @@ export interface UiControls {
    * Closes the current menu. If this was a sub-menu, the parent menu will re-open.
    */
   closeCurrentMenu_: () => void;
+
+  /*
+   * Enter picture-in-picture mode.
+   */
+  enterPip_: () => void;
 }