From 5f47bbce1bce1811d1709033e765bc4cf36a5478 Mon Sep 17 00:00:00 2001
From: Farber Denis <dsnakez11@yandex.ru>
Date: Fri, 18 Nov 2022 12:31:11 +0300
Subject: [PATCH] fix(#in178): pip fix

fix($in178): min fix

fix(#in178): attr check add

fix(#in178): auto pip conditions fixed

fix(#178): auto pip min fix
---
 src/components/PictureInPicture/PiP.tsx        | 18 +++++++++++++++++-
 src/features/MatchPage/index.tsx               |  1 +
 .../Controls/Components/ControlsWeb/index.tsx  |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/PictureInPicture/PiP.tsx b/src/components/PictureInPicture/PiP.tsx
index b56290c9..30f8661e 100644
--- a/src/components/PictureInPicture/PiP.tsx
+++ b/src/components/PictureInPicture/PiP.tsx
@@ -1,6 +1,7 @@
 import {
   memo,
   RefObject,
+  useEffect,
 } from 'react'
 
 import styled from 'styled-components/macro'
@@ -15,10 +16,11 @@ const PipWrapper = styled.div`
 `
 
 type PipProps = {
+  isPlaying: boolean,
   videoRef: RefObject<HTMLVideoElement>,
 }
 
-export const PiP = memo(({ videoRef }: PipProps) => {
+export const PiP = memo(({ isPlaying, videoRef }: PipProps) => {
   const togglePip = async () => {
     try {
       if (
@@ -33,6 +35,20 @@ export const PiP = memo(({ videoRef }: PipProps) => {
     }
   }
 
+  useEffect(() => {
+    window.addEventListener('visibilitychange', async () => {
+      if (
+        document.hidden === true
+        && document.pictureInPictureEnabled
+        && videoRef.current !== document.pictureInPictureElement
+        && videoRef.current?.hidden === false
+        && isPlaying
+      ) {
+        await videoRef.current?.requestPictureInPicture()
+      }
+    })
+  }, [videoRef, isPlaying])
+
   return (
     <PipWrapper>
       <Icon refIcon='PiP' onClick={togglePip} />
diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx
index ed4ec6ad..112a6a4d 100644
--- a/src/features/MatchPage/index.tsx
+++ b/src/features/MatchPage/index.tsx
@@ -82,6 +82,7 @@ const MatchPageComponent = () => {
     const sportName = history.location.pathname.split('/')[1]
     history.push(`/${sportName}/tournaments/${profile.tournament.id}`)
   }
+
   return (
     <PageWrapper isIOS={isIOS}>
       <ProfileHeader color='#2B2A28' height={client.name === 'facr' ? 5 : 4.5} />
diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx
index a98c2f18..5c0f2d7e 100644
--- a/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx
+++ b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx
@@ -114,7 +114,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
           )}
           <ChromeCast src={src} />
           {document.pictureInPictureEnabled && (
-            <PiP videoRef={videoRef} />
+            <PiP videoRef={videoRef} isPlaying={playing} />
           )}
           <Settings
             onSelect={onQualitySelect}