diff --git a/Makefile b/Makefile index cf34d523..48f82c41 100644 --- a/Makefile +++ b/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/ diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx index 423b0592..1cc1a114 100644 --- a/src/features/AuthStore/hooks/useAuth.tsx +++ b/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 () => { diff --git a/src/features/StreamPlayer/config.tsx b/src/features/StreamPlayer/config.tsx index 72bec30c..28494424 100644 --- a/src/features/StreamPlayer/config.tsx +++ b/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 = { 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()) + } }, } diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx index dddd469b..d4d2fdc2 100644 --- a/src/features/StreamPlayer/index.tsx +++ b/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, diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index 11372086..19b2f970 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/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` - 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`