feat: 🎸 #2542

airplay test version

✅ Closes: #2542

public/images/airplay.svg

@@ -0,0 +1,3 @@
+<svg class="svg-icon" style="width: 1.123046875em;height: 1em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1150 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M196.771179 53.044507c-47.338204 0-63.653409 4.902598-81.616208 14.707795A98.413635 98.413635 0 0 0 74.326775 108.500128C64.561763 126.503113 59.659165 142.778132 59.659165 191.723745v367.172472c0 47.338204 4.902598 63.693594 14.66761 81.616208 9.805197 17.962799 22.905583 31.023 40.828196 40.828196 16.315204 9.805197 32.670594 14.66761 81.616208 14.66761h109.303833l45.730795-53.848212H180.455975a71.971752 71.971752 0 0 1-40.828197-6.590378c-8.157602-3.214819-14.707795-11.372421-19.610393-19.530023-4.902598-13.060201-8.157602-26.120401-6.510008-40.828197V177.056135c-1.607409-13.060201 0-27.727811 6.510008-40.788011 3.255004-8.157602 11.452791-14.66761 19.610393-19.570208 13.060201-4.902598 26.120401-8.197787 40.828197-6.590378h717.989553c13.060201-1.607409 27.727811 0.08037 40.828196 6.590378 8.157602 3.295189 14.627425 11.412606 19.530024 19.570208 4.902598 13.020015 8.157602 26.120401 6.510007 40.788011v399.843066c1.607409 13.020015 0 27.727811-6.510007 40.788011-3.255004 8.157602-11.372421 14.66761-19.530024 19.530024-13.060201 4.902598-26.120401 8.157602-40.828196 6.550192h-171.349832l45.690609 53.888398 112.639208-1.60741c48.945613 0 65.220633-4.902598 83.183431-14.707795a98.413635 98.413635 0 0 0 40.828197-40.828196c9.765012-16.315204 14.66761-32.670594 14.66761-81.576023V191.68356c0-48.945613-4.902598-65.220633-14.66761-83.183432a98.413635 98.413635 0 0 0-40.828197-40.788011c-17.962799-9.805197-34.237818-14.707795-83.183431-14.707795H196.771179v0.040185z m339.605402 490.139284a20.132802 20.132802 0 0 0-14.868536 7.514638l-285.556264 327.99187a18.686133 18.686133 0 0 0-4.942784 13.100386 18.887059 18.887059 0 0 0 19.610394 19.570208h574.367532c4.902598 0 9.845382-1.607409 13.100385-4.862413 8.157602-6.550193 8.197787-19.650579 1.647595-27.808181l-285.596449-327.99187-1.647595-1.607409a23.870028 23.870028 0 0 0-16.074093-5.907229h-0.040185z" />
+</svg>

src/features/AirPlay/index.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from 'react'
+
+import { usePageParams } from 'hooks/usePageParams'
+
+import { AirplayButton, AirplayIcon } from './styled'
+
+type Props = {
+  videoRef: React.RefObject<HTMLVideoElement>,
+}
+
+export const AirPlay = ({ videoRef }: Props) => {
+  const { profileId: matchId, sportType } = usePageParams()
+
+  useEffect(() => {
+    // попытки подсунуть airplay кнопке урл отличающийся от урла основного плеера
+    // const baseUrl = includes(videoRef?.current?.src, '.m3u8')
+    // eslint-disable-next-line max-len
+    //   ? `${API_ROOT}/video/chromecast/stream/${sportType}/${matchId}.m3u8?access_token=${readToken()}`
+    //   : videoRef?.current?.src
+
+    const video = videoRef.current!
+    // const video = document.createElement('video')
+    // video.src = baseUrl!
+
+    const airPlayBtn = document.getElementById('airPlay')!
+
+    const changeAvailability = (event: any) => {
+      switch (event.availability) {
+        case 'available':
+          airPlayBtn.style.display = 'block'
+          break
+        case 'unavailable':
+          airPlayBtn.style.display = 'none'
+          break
+      }
+    }
+
+    const onAirplayClick = () => {
+      (video as any).webkitShowPlaybackTargetPicker()
+    }
+
+    if ((window as any).WebKitPlaybackTargetAvailabilityEvent && video) {
+      video.addEventListener('webkitplaybacktargetavailabilitychanged', changeAvailability)
+      airPlayBtn.addEventListener('click', onAirplayClick)
+    }
+
+    return () => {
+      video.removeEventListener('webkitplaybacktargetavailabilitychanged', changeAvailability)
+      airPlayBtn.removeEventListener('click', onAirplayClick)
+    }
+  }, [matchId, sportType, videoRef])
+
+  return (
+    <AirplayButton id='airPlay'>
+      <AirplayIcon src='/images/airplay.svg' />
+    </AirplayButton>
+  )
+}

src/features/AirPlay/styled.tsx

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components'
+
+import { isMobileDevice } from 'config/userAgent'
+
+import { ButtonBase } from '../StreamPlayer/styled'
+
+export const AirplayButton = styled(ButtonBase)`
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: none;
+  margin-left: 25px;
+
+  ${isMobileDevice
+    ? css`
+      width: 22px;
+      height: 22px;
+      margin-left: 15px;
+    `
+    : ''};
+`
+
+export const AirplayIcon = styled.img`
+  width: 24px;
+  height: 24px;
+`

src/features/MultiSourcePlayer/index.tsx

@@ -197,6 +197,7 @@ export const MultiSourcePlayer = (props: Props) => {
         src={firstPlayerActive ? activeSrc : nextSrc}
         togglePlaying={togglePlaying}
         videoQualities={videoQualities}
+        videoRef={firstPlayerActive ? video1Ref : video2Ref}
         volume={volume}
         volumeInPercent={volumeInPercent}
       />

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

@@ -1,5 +1,6 @@
 import { T9n } from 'features/T9n'
 import { Settings } from 'features/MultiSourcePlayer/components/Settings'
+import { AirPlay } from 'features/AirPlay'
 import { ChromeCast } from 'features/ChromeCast'
 
 import { ControlsPropsExtended } from '../..'
@@ -27,6 +28,7 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
     selectedQuality,
     src,
     videoQualities,
+    videoRef,
   } = props
 
   return (
@@ -44,6 +46,7 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
               <T9n t='live' />
             </LiveBtn>
           )}
+          <AirPlay videoRef={videoRef} />
           <ChromeCast src={src} />
           <Settings
             onSelect={onQualitySelect}

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

@@ -47,6 +47,7 @@ export type ControlsProps = {
   src?: string,
   togglePlaying: () => void,
   videoQualities: Array<string>,
+  videoRef: React.RefObject<HTMLVideoElement>,
   volume: number,
   volumeInPercent: number,
 }

src/features/StreamPlayer/index.tsx

@@ -174,6 +174,7 @@ export const StreamPlayer = (props: Props) => {
         selectedQuality={selectedQuality}
         togglePlaying={togglePlaying}
         videoQualities={videoQualities}
+        videoRef={videoRef}
         volume={volume}
         volumeInPercent={volumeInPercent}
         activeChapterIndex={activeChapterIndex}