feat(#2954): add picture-in-picture button

src/components/PictureInPicture/PiP.tsx

@@ -0,0 +1,41 @@
+import {
+  memo,
+  RefObject,
+} from 'react'
+
+import styled from 'styled-components/macro'
+
+import { Icon } from 'features/Icon'
+
+const PipWrapper = styled.div`
+  cursor: pointer;
+  margin-left: 25px;
+  margin-right: 25px;
+  margin-top: 4px;
+`
+
+type PipProps = {
+  videoRef: RefObject<HTMLVideoElement>,
+}
+
+export const PiP = memo(({ videoRef }: PipProps) => {
+  const togglePip = async () => {
+    try {
+      if (
+        document.pictureInPictureEnabled && videoRef.current !== document.pictureInPictureElement
+      ) {
+        await videoRef.current?.requestPictureInPicture()
+      } else {
+        await document.exitPictureInPicture()
+      }
+    } catch (err) {
+      await document.exitPictureInPicture()
+    }
+  }
+
+  return (
+    <PipWrapper>
+      <Icon refIcon='PiP' onClick={togglePip} />
+    </PipWrapper>
+  )
+})

src/features/MultiSourcePlayer/index.tsx

@@ -77,6 +77,8 @@ export const MultiSourcePlayer = (props: Props) => {
     wrapperRef,
   } = useMultiSourcePlayer(props)
   const firstPlayerActive = activePlayer === Players.PLAYER1
+  const currentVideo = firstPlayerActive ? video1Ref : video2Ref
+
   return (
     <PlayerWrapper
       ref={wrapperRef}
@@ -138,7 +140,10 @@ export const MultiSourcePlayer = (props: Props) => {
       )}
 
       {ready && (
-        <CenterControls controlsVisible={centerControlsVisible} playing={playing}>
+        <CenterControls
+          controlsVisible={centerControlsVisible}
+          playing={!currentVideo.current?.paused}
+        >
           {isMobileDevice && playing ? (
             <RewindMobile isBackward rewindCallback={rewindBackward} />
           ) : (
@@ -172,6 +177,7 @@ export const MultiSourcePlayer = (props: Props) => {
       )}
       <Controls
         activeChapterIndex={activeChapterIndex}
+        activePlayer={activePlayer}
         allPlayedProgress={allPlayedProgress}
         multiSourceChapters={chapters}
         controlsVisible={mainControlsVisible}
@@ -199,7 +205,7 @@ export const MultiSourcePlayer = (props: Props) => {
         src={firstPlayerActive ? activeSrc : nextSrc}
         togglePlaying={togglePlaying}
         videoQualities={videoQualities}
-        videoRef={firstPlayerActive ? video1Ref : video2Ref}
+        videoRef={currentVideo}
         volume={volume}
         volumeInPercent={volumeInPercent}
       />

src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx

@@ -11,6 +11,8 @@ import { T9n } from 'features/T9n'
 import { ChromeCast } from 'features/ChromeCast'
 import { AudioTracks } from 'features/AudioTracks'
 
+import { PiP } from 'components/PictureInPicture/PiP'
+
 import { ControlsPropsExtended } from '../..'
 import { VolumeBar } from '../../../VolumeBar'
 import {
@@ -56,6 +58,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
     src,
     togglePlaying,
     videoQualities,
+    videoRef,
     volumeInPercent,
   } = props
 
@@ -110,6 +113,9 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
             </LiveBtn>
           )}
           <ChromeCast src={src} />
+          {document.pictureInPictureEnabled && (
+            <PiP videoRef={videoRef} />
+          )}
           <Settings
             onSelect={onQualitySelect}
             selectedQuality={selectedQuality}

src/features/StreamPlayer/components/Controls/index.tsx

@@ -18,6 +18,7 @@ import { ProgressBar } from '../ProgressBar'
 
 export type ControlsProps = {
   activeChapterIndex: number,
+  activePlayer?: number,
   allPlayedProgress: number,
   audioTracks?: Array<MediaPlaylist>,
   backToLive?: () => void,

src/libs/index.ts

@@ -15,6 +15,7 @@ export { Sound } from './objects/Sound'
 export { Star } from './objects/Star'
 export { Dollar } from './objects/Dollar'
 export { Close } from './objects/Close'
+export { PiP } from './objects/PiP'
 export { PoweredByInstat } from './objects/PoweredByInstat'
 export { PoweredByInsports } from './objects/PoweredByInsports'
 export { Info } from './objects/Info'

src/libs/objects/PiP.tsx

@@ -0,0 +1,48 @@
+export const PiP = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='27'
+    height='27'
+    fill='none'
+    viewBox='0 0 27 27'
+  >
+    <g fill='#fff' filter='url(#filter0_d_37383_306287)'>
+      <path
+        fillRule='evenodd'
+        d='M3.302 3.802h19.813c1.211 0 2.202.99 2.202 2.202v8.033h-2.202V6.004H3.302v15.41h9.13v2.202h-9.13c-1.211 0-2.202-.991-2.202-2.202V6.004c0-1.211.99-2.202 2.202-2.202z'
+        clipRule='evenodd'
+      />
+      <path d='M25.317 17.049a1 1 0 00-1-1h-8.899a1 1 0 00-1 1v5.567a1 1 0 001 1h8.899a1 1 0 001-1v-5.567z' />
+    </g>
+    <defs>
+      <filter
+        id='filter0_d_37383_306287'
+        width='26.217'
+        height='21.814'
+        x='0.1'
+        y='3.802'
+        colorInterpolationFilters='sRGB'
+        filterUnits='userSpaceOnUse'
+      >
+        <feFlood floodOpacity='0' result='BackgroundImageFix' />
+        <feColorMatrix
+          in='SourceAlpha'
+          result='hardAlpha'
+          values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+        />
+        <feOffset dy='1' />
+        <feGaussianBlur stdDeviation='0.5' />
+        <feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
+        <feBlend
+          in2='BackgroundImageFix'
+          result='effect1_dropShadow_37383_306287'
+        />
+        <feBlend
+          in='SourceGraphic'
+          in2='effect1_dropShadow_37383_306287'
+          result='shape'
+        />
+      </filter>
+    </defs>
+  </svg>
+)