Ott 1458 player cookie (#436)

* fix: removed ProfileRoutes

* fix: OIDC provider url change

* fix(1127): hls plaayer cookie

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 = () => {
                     <Route exact path={PAGES.home}>
                       <HomePage />
                     </Route>
-                    <ProfileRoutes />
+                    <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
+                      <TournamentPage />
+                    </Route>
+                    <Route path={`/:sportName${PAGES.team}/:pageId`}>
+                      <TeamPage />
+                    </Route>
+                    <Route path={`/:sportName${PAGES.player}/:pageId`}>
+                      <PlayerPage />
+                    </Route>
+                    <Route path={`/:sportName${PAGES.match}/:pageId`}>
+                      <MatchPage />
+                    </Route>
                     <Redirect to={PAGES.home} />
                   </Switch>
                 </BuyMatchPopupStore>

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',

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 () => {

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
 

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,

src/features/ProfileRoutes/index.tsx

@@ -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 (
-    <Fragment>
-      <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
-        <TournamentPage />
-      </Route>
-      <Route path={`/:sportName${PAGES.team}/:pageId`}>
-        <TeamPage />
-      </Route>
-      <Route path={`/:sportName${PAGES.player}/:pageId`}>
-        <PlayerPage />
-      </Route>
-      <Route path={`/:sportName${PAGES.match}/:pageId`}>
-        <MatchPage />
-      </Route>
-    </Fragment>
-  )
-}

src/features/StreamPlayer/config.tsx

@@ -4,4 +4,8 @@ export const streamConfig: Partial<Hls.Config> = {
   liveSyncDuration: 10,
   maxBufferLength: 10,
   maxBufferSize: 0,
+  xhrSetup: (xhr) => {
+    // eslint-disable-next-line no-param-reassign
+    xhr.withCredentials = true
+  },
 }

src/features/StreamPlayer/index.tsx

@@ -85,6 +85,7 @@ export const StreamPlayer = (props: Props) => {
         onEnded={togglePlaying}
         onReady={startPlaying}
         onError={onError}
+        crossOrigin='use-credentials'
       />
       {ready && (
         <CenterControls playing={playing}>

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,

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,

src/features/VideoPlayer/hooks/index.tsx

@@ -14,6 +14,7 @@ type Ref = Parameters<ForwardRefRenderFunction<HTMLVideoElement>>[1]
 
 export type Props = {
   className?: string,
+  crossOrigin?: string,
   height?: string,
   hidden?: boolean,
   isFullscreen?: boolean,

src/features/VideoPlayer/index.tsx

@@ -7,6 +7,7 @@ import { Video } from './styled'
 export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, ref) => {
   const {
     className,
+    crossOrigin,
     height,
     hidden,
     muted,
@@ -38,6 +39,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, re
       onEnded={onEnded}
       onDurationChange={handleDurationChange}
       onError={onError}
+      crossOrigin={crossOrigin}
     />
   )
 })

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'
+)

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()