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

@@ -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} />

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} />

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}