From 1769ff51a2fcd0f12cb4afb0bdd1a8dbf6ae2dc8 Mon Sep 17 00:00:00 2001 From: Mirlan Date: Tue, 24 Aug 2021 16:48:10 +0600 Subject: [PATCH] Ott 1458 player cookie (#436) * fix: removed ProfileRoutes * fix: OIDC provider url change * fix(1127): hls plaayer cookie --- src/features/App/AuthenticatedApp.tsx | 18 +++++++++++-- src/features/AuthStore/helpers.tsx | 4 +-- src/features/AuthStore/hooks/useAuth.tsx | 7 +++++ src/features/MatchPage/index.tsx | 3 +++ src/features/PlayerPage/index.tsx | 3 +++ src/features/ProfileRoutes/index.tsx | 33 ------------------------ src/features/StreamPlayer/config.tsx | 4 +++ src/features/StreamPlayer/index.tsx | 1 + src/features/TeamPage/index.tsx | 3 +++ src/features/TournamentPage/index.tsx | 3 +++ src/features/VideoPlayer/hooks/index.tsx | 1 + src/features/VideoPlayer/index.tsx | 2 ++ src/helpers/cookie/index.tsx | 29 +++++++++++++++++++++ src/hooks/usePageLogger.tsx | 10 ++++--- 14 files changed, 81 insertions(+), 40 deletions(-) delete mode 100644 src/features/ProfileRoutes/index.tsx create mode 100644 src/helpers/cookie/index.tsx diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index a4eb41ae..c228c7ae 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -19,10 +19,13 @@ import { UserFavoritesStore } from 'features/UserFavorites/store' import { MatchPopup, MatchPopupStore } from 'features/MatchPopup' import { BuyMatchPopup, BuyMatchPopupStore } from 'features/BuyMatchPopup' import { CardsStore } from 'features/CardsStore' -import { ProfileRoutes } from 'features/ProfileRoutes' const HomePage = lazy(() => import('features/HomePage')) const UserAccount = lazy(() => import('features/UserAccount')) +const TeamPage = lazy(() => import('features/TeamPage')) +const MatchPage = lazy(() => import('features/MatchPage')) +const PlayerPage = lazy(() => import('features/PlayerPage')) +const TournamentPage = lazy(() => import('features/TournamentPage')) export const AuthenticatedApp = () => { useLexicsConfig(indexLexics) @@ -46,7 +49,18 @@ export const AuthenticatedApp = () => { - + + + + + + + + + + + + diff --git a/src/features/AuthStore/helpers.tsx b/src/features/AuthStore/helpers.tsx index aa9958ca..d9aa24a6 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/src/features/AuthStore/helpers.tsx @@ -2,12 +2,12 @@ import type { UserManagerSettings } from 'oidc-client' import { WebStorageStateStore } from 'oidc-client' export const getClientSettings = (): UserManagerSettings => ({ - authority: 'https://api.instat.tv/', + authority: 'https://auth.instat.tv/', automaticSilentRenew: true, client_id: 'ott-web', filterProtocolClaims: false, loadUserInfo: false, - metadataUrl: 'https://api.instat.tv/auth/.well-known/openid-configuration', + metadataUrl: 'https://auth.instat.tv/.well-known/openid-configuration', post_logout_redirect_uri: `${window.origin}/login`, redirect_uri: `${window.origin}/redirect`, response_mode: 'query', diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx index f7f2881e..76069d2b 100644 --- a/src/features/AuthStore/hooks/useAuth.tsx +++ b/src/features/AuthStore/hooks/useAuth.tsx @@ -9,6 +9,7 @@ import type { User } from 'oidc-client' import { UserManager } from 'oidc-client' import { writeToken, removeToken } from 'helpers/token' +import { setCookie, removeCookie } from 'helpers/cookie' import { useToggle } from 'hooks' @@ -31,6 +32,7 @@ export const useAuth = () => { userManager.signoutRedirect() userManager.clearStaleState() removeToken() + removeCookie('access_token') }, [userManager]) const register = useRegister() @@ -38,6 +40,11 @@ export const useAuth = () => { const storeUser = useCallback(async (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/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index db95b31b..9d3af2c2 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -1,3 +1,5 @@ +import { usePageLogger } from 'hooks/usePageLogger' + import { ProfileHeader } from 'features/ProfileHeader' import { UserFavorites } from 'features/UserFavorites' import { @@ -12,6 +14,7 @@ import { useMatchProfile } from './hooks/useMatchProfile' import { Wrapper } from './styled' const MatchPage = () => { + usePageLogger() const profile = useMatchProfile() const hasVideo = profile?.has_video diff --git a/src/features/PlayerPage/index.tsx b/src/features/PlayerPage/index.tsx index b448b6d0..56004820 100644 --- a/src/features/PlayerPage/index.tsx +++ b/src/features/PlayerPage/index.tsx @@ -1,3 +1,5 @@ +import { usePageLogger } from 'hooks/usePageLogger' + import { ProfileHeader } from 'features/ProfileHeader' import { ProfileCard } from 'features/ProfileCard' import { Matches } from 'features/Matches' @@ -11,6 +13,7 @@ import { import { usePlayerPage } from './hooks' const PlayerPage = () => { + usePageLogger() const { fetchMatches, profile, diff --git a/src/features/ProfileRoutes/index.tsx b/src/features/ProfileRoutes/index.tsx deleted file mode 100644 index 803e8cc3..00000000 --- a/src/features/ProfileRoutes/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Fragment, lazy } from 'react' -import { Route, useLocation } from 'react-router-dom' - -import { PAGES } from 'config' - -import { usePageLogger } from 'hooks/usePageLogger' - -const TeamPage = lazy(() => import('features/TeamPage')) -const MatchPage = lazy(() => import('features/MatchPage')) -const PlayerPage = lazy(() => import('features/PlayerPage')) -const TournamentPage = lazy(() => import('features/TournamentPage')) - -export const ProfileRoutes = () => { - const { pathname } = useLocation() - usePageLogger(pathname) - - return ( - - - - - - - - - - - - - - - ) -} diff --git a/src/features/StreamPlayer/config.tsx b/src/features/StreamPlayer/config.tsx index d94ea880..f2699604 100644 --- a/src/features/StreamPlayer/config.tsx +++ b/src/features/StreamPlayer/config.tsx @@ -4,4 +4,8 @@ export const streamConfig: Partial = { liveSyncDuration: 10, maxBufferLength: 10, maxBufferSize: 0, + xhrSetup: (xhr) => { + // eslint-disable-next-line no-param-reassign + xhr.withCredentials = true + }, } diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx index b2a390dc..dfc4b5e2 100644 --- a/src/features/StreamPlayer/index.tsx +++ b/src/features/StreamPlayer/index.tsx @@ -85,6 +85,7 @@ export const StreamPlayer = (props: Props) => { onEnded={togglePlaying} onReady={startPlaying} onError={onError} + crossOrigin='use-credentials' /> {ready && ( diff --git a/src/features/TeamPage/index.tsx b/src/features/TeamPage/index.tsx index 0ecc3232..31d53401 100644 --- a/src/features/TeamPage/index.tsx +++ b/src/features/TeamPage/index.tsx @@ -1,3 +1,5 @@ +import { usePageLogger } from 'hooks/usePageLogger' + import { ProfileHeader } from 'features/ProfileHeader' import { ProfileCard } from 'features/ProfileCard' import { Matches } from 'features/Matches' @@ -11,6 +13,7 @@ import { import { useTeamPage } from './hooks' const TeamPage = () => { + usePageLogger() const { fetchMatches, profile, diff --git a/src/features/TournamentPage/index.tsx b/src/features/TournamentPage/index.tsx index a14f4f9c..90799209 100644 --- a/src/features/TournamentPage/index.tsx +++ b/src/features/TournamentPage/index.tsx @@ -1,3 +1,5 @@ +import { usePageLogger } from 'hooks/usePageLogger' + import { ProfileHeader } from 'features/ProfileHeader' import { ProfileCard } from 'features/ProfileCard' import { Matches } from 'features/Matches' @@ -11,6 +13,7 @@ import { import { useTournamentPage } from './hooks' const TournamentPage = () => { + usePageLogger() const { fetchMatches, profile, diff --git a/src/features/VideoPlayer/hooks/index.tsx b/src/features/VideoPlayer/hooks/index.tsx index 91c42f9c..f2c30797 100644 --- a/src/features/VideoPlayer/hooks/index.tsx +++ b/src/features/VideoPlayer/hooks/index.tsx @@ -14,6 +14,7 @@ type Ref = Parameters>[1] export type Props = { className?: string, + crossOrigin?: string, height?: string, hidden?: boolean, isFullscreen?: boolean, diff --git a/src/features/VideoPlayer/index.tsx b/src/features/VideoPlayer/index.tsx index 21e3c8b0..071c6d9b 100644 --- a/src/features/VideoPlayer/index.tsx +++ b/src/features/VideoPlayer/index.tsx @@ -7,6 +7,7 @@ import { Video } from './styled' export const VideoPlayer = forwardRef((props: Props, ref) => { const { className, + crossOrigin, height, hidden, muted, @@ -38,6 +39,7 @@ export const VideoPlayer = forwardRef((props: Props, re onEnded={onEnded} onDurationChange={handleDurationChange} onError={onError} + crossOrigin={crossOrigin} /> ) }) diff --git a/src/helpers/cookie/index.tsx b/src/helpers/cookie/index.tsx new file mode 100644 index 00000000..7a122822 --- /dev/null +++ b/src/helpers/cookie/index.tsx @@ -0,0 +1,29 @@ +type Args = { + domain?: string, + exdays: number, + name: string, + value: string, +} + +export const setCookie = ({ + domain = getDomain(), + exdays, + name, + value, +}: Args) => { + const date = new Date() + date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000)) + const expires = `expires=${date.toUTCString()}` + document.cookie = `${name}=${value};${expires};path=/;domain=${domain}` +} + +export const removeCookie = (name: string, domain = getDomain()) => { + const expires = 'expires=Thu, 01 Jan 1970 00:00:01 GMT' + document.cookie = `${name}=;${expires};path=/;domain=${domain}` +} + +const getDomain = () => ( + process.env.NODE_ENV === 'development' + ? 'localhost' + : '.instat.tv' +) diff --git a/src/hooks/usePageLogger.tsx b/src/hooks/usePageLogger.tsx index e02b2740..fd87bb39 100644 --- a/src/hooks/usePageLogger.tsx +++ b/src/hooks/usePageLogger.tsx @@ -9,8 +9,10 @@ import round from 'lodash/round' import { LogActions, logUserAction } from 'requests/logUserAction' import { useEventListener } from 'hooks' +import { useLocation } from 'react-router' -export const usePageLogger = (page: string) => { +export const usePageLogger = (page?: string) => { + const location = useLocation() const startTimeRef = useRef(new Date()) const resetTime = useCallback(() => { @@ -21,14 +23,16 @@ export const usePageLogger = (page: string) => { round((Date.now() - startTimeRef.current.getTime()) / 1000) ), []) + const url = page || location.pathname + const log = useCallback(() => { logUserAction({ actionType: LogActions.PageChange, dateVisit: startTimeRef.current.toISOString(), duration: getSpentTime(), - url: page, + url, }) - }, [page, getSpentTime]) + }, [url, getSpentTime]) useEffect(() => { resetTime()