Ott 1833 player on ios (#544)

* fix(1833): conditionally apply aspect ratio styles

* fix(1833): removed redundant component

* chore(1833): added fr to prod builds

* fix(1833): send token in cookie on iOS

Makefile

@@ -26,12 +26,14 @@ facr-production-build: clean
 
 prod: production-build
 	rsync -zavP build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/wwwroot/
+	rsync -zavP build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/wwwroot/
 
 preprod: preproduction-build
 	rsync -zavP build/ -e 'ssh -p 666' ott-test@test.instat.tv:/usr/local/www/ott-test/wwwroot/
 
 facr-prod: facr-production-build
 	rsync -zavP build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/facr-wwwroot/
+	rsync -zavP build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/facr-wwwroot/
 
 stage: build
 	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/

src/features/AuthStore/hooks/useAuth.tsx

@@ -14,6 +14,7 @@ import isString from 'lodash/isString'
 import { PAGES } from 'config'
 
 import { writeToken, removeToken } from 'helpers/token'
+import { setCookie, removeCookie } from 'helpers/cookie'
 import { isMatchPage } from 'helpers/isMatchPage'
 
 import { useLocalStore, useToggle } from 'hooks'
@@ -41,11 +42,17 @@ export const useAuth = () => {
       userManager.signoutRedirect({ post_logout_redirect_uri: url })
     })
     removeToken()
+    removeCookie('access_token')
   }, [userManager])
 
   const storeUser = useCallback((loadedUser: User) => {
     setUser(loadedUser)
     writeToken(loadedUser.access_token)
+    setCookie({
+      exdays: 1,
+      name: 'access_token',
+      value: loadedUser.access_token,
+    })
   }, [])
 
   const checkUser = useCallback(async () => {

src/features/StreamPlayer/config.tsx

@@ -1,13 +1,19 @@
 import Hls from 'hls.js'
 
 import { readToken } from 'helpers/token'
+import { isIphone } from 'config/userAgent'
 
 export const streamConfig: Partial<Hls.Config> = {
   liveSyncDuration: 30,
   maxBufferLength: 30,
   xhrSetup: (xhr, urlString) => {
-    const url = new URL(urlString)
-    url.searchParams.set('access_token', readToken() || '')
-    xhr.open('GET', url.toString())
+    if (isIphone) {
+      // eslint-disable-next-line no-param-reassign
+      xhr.withCredentials = true
+    } else {
+      const url = new URL(urlString)
+      url.searchParams.set('access_token', readToken() || '')
+      xhr.open('GET', url.toString())
+    }
   },
 }

src/features/StreamPlayer/index.tsx

@@ -2,6 +2,7 @@ import { T9n } from 'features/T9n'
 import { Loader } from 'features/Loader'
 import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config'
 import { Settings } from 'features/MultiSourcePlayer/components/Settings'
+import { VideoPlayer } from 'features/VideoPlayer'
 
 import { secondsToHms } from 'helpers'
 
@@ -10,7 +11,6 @@ import { ProgressBar } from './components/ProgressBar'
 
 import {
   PlayerWrapper,
-  VideoPlayer,
   Controls,
   ControlsRow,
   ControlsGroup,

src/features/StreamPlayer/styled.tsx

@@ -2,14 +2,6 @@ import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
 
-import { VideoPlayer as VideoPlayerBase } from 'features/VideoPlayer'
-
-export const VideoPlayer = styled(VideoPlayerBase)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-
 export const ControlsGradient = styled.div`
   background-image: url(/images/player-controls-gradient.png);
   bottom: 0;
@@ -100,15 +92,23 @@ export const ControlsGroup = styled.div`
     : ''};
 `
 
+const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9')
+
 export const PlayerWrapper = styled.div<PlayStopProps>`
-  position: relative;
   width: 100%;
+  position: relative;
   background-color: #000;
-  aspect-ratio: calc(16 / 9);
 
   :fullscreen {
     padding-top: 0;
   }
+
+  ${supportsAspectRatio
+    ? css`aspect-ratio: 16 / 9;`
+    : css`
+        height: 0px;
+        padding-top: 56.25%;
+      `}
 `
 
 export const LoaderWrapper = styled.div`