|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -1,15 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<title></title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.11.5/oidc-client.min.js" integrity="sha512-pGtU1n/6GJ8fu6bjYVGIOT9Dphaw5IWPwVlqkpvVgqBxFkvdNbytUh0H8AP15NYF777P4D3XEeA/uDWFCpSQ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
|
||||||
<script> |
|
||||||
new Oidc.UserManager().signinSilentCallback() |
|
||||||
.catch((err) => { |
|
||||||
console.error('OIDC: silent refresh callback error', err); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import { UserManager } from 'oidc-client' |
||||||
|
|
||||||
|
import { getClientSettings } from './helpers' |
||||||
|
|
||||||
|
export const userManager = new UserManager(getClientSettings()) |
||||||
@ -1,52 +1,20 @@ |
|||||||
import { |
import { ReactNode } from 'react' |
||||||
ReactNode, |
|
||||||
useEffect, |
|
||||||
useState, |
|
||||||
} from 'react' |
|
||||||
|
|
||||||
import { useLocation } from 'react-router' |
|
||||||
|
|
||||||
import { getLanguageUrlParam } from 'helpers/languageUrlParam' |
import { getLanguageUrlParam } from 'helpers/languageUrlParam' |
||||||
|
|
||||||
import { AuthStore } from 'features/AuthStore' |
import { AuthStore } from 'features/AuthStore' |
||||||
import { LexicsStore } from 'features/LexicsStore' |
import { LexicsStore } from 'features/LexicsStore' |
||||||
|
|
||||||
import { getGeoInfo } from 'requests' |
|
||||||
|
|
||||||
import { redirectToUrl } from 'helpers' |
|
||||||
|
|
||||||
const initialLanguage = getLanguageUrlParam() |
const initialLanguage = getLanguageUrlParam() |
||||||
|
|
||||||
type Props = { |
type Props = { |
||||||
children: ReactNode, |
children: ReactNode, |
||||||
} |
} |
||||||
|
|
||||||
export const GlobalStores = ({ children }: Props) => { |
export const GlobalStores = ({ children }: Props) => ( |
||||||
const { pathname, search } = useLocation() |
|
||||||
const [isGeoReady, setIsGeoReady] = useState(false) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
(async () => { |
|
||||||
if (pathname === '/' && search === '') { |
|
||||||
const geo = await getGeoInfo() |
|
||||||
|
|
||||||
if (geo.country_code === 'TN') { |
|
||||||
redirectToUrl('https://diwan.insports.tv') |
|
||||||
return |
|
||||||
} |
|
||||||
} |
|
||||||
setIsGeoReady(true) |
|
||||||
})() |
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []) |
|
||||||
|
|
||||||
if (!isGeoReady) return null |
|
||||||
|
|
||||||
return ( |
|
||||||
<LexicsStore initialLanguage={initialLanguage}> |
<LexicsStore initialLanguage={initialLanguage}> |
||||||
<AuthStore> |
<AuthStore> |
||||||
{children} |
{children} |
||||||
</AuthStore> |
</AuthStore> |
||||||
</LexicsStore> |
</LexicsStore> |
||||||
) |
) |
||||||
} |
|
||||||
|
|||||||
@ -1,78 +0,0 @@ |
|||||||
import { Fragment } from 'react' |
|
||||||
|
|
||||||
import { isMobileDevice } from 'config' |
|
||||||
import { joinMatchLexics } from 'config/lexics/joinMatch' |
|
||||||
|
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import { useLexicsConfig } from 'features/LexicsStore' |
|
||||||
|
|
||||||
import { useAuthStore } from 'features/AuthStore' |
|
||||||
|
|
||||||
import { getCurrentYear } from 'helpers' |
|
||||||
|
|
||||||
import { |
|
||||||
Wrapper, |
|
||||||
TunisiaLogo, |
|
||||||
HeaderWrapper, |
|
||||||
Footer, |
|
||||||
BlockWrapper, |
|
||||||
MatchInfo, |
|
||||||
LigueImgWrapper, |
|
||||||
Season, |
|
||||||
MainInfoTitle, |
|
||||||
MainInfoButton, |
|
||||||
MainInfoContainer, |
|
||||||
MainInfoText, |
|
||||||
FooterRights, |
|
||||||
ClubsLogo, |
|
||||||
InsportsLogo, |
|
||||||
ScGradient, |
|
||||||
LigueImg, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
export const DiwanInsportsTv = () => { |
|
||||||
useLexicsConfig(joinMatchLexics) |
|
||||||
const { login } = useAuthStore() |
|
||||||
|
|
||||||
const currentYear = getCurrentYear() |
|
||||||
|
|
||||||
return ( |
|
||||||
<Wrapper> |
|
||||||
<HeaderWrapper> |
|
||||||
<InsportsLogo /> |
|
||||||
{isMobileDevice && <TunisiaLogo />} |
|
||||||
</HeaderWrapper> |
|
||||||
<MainInfoContainer> |
|
||||||
<BlockWrapper> |
|
||||||
<LigueImgWrapper> |
|
||||||
<ScGradient /> |
|
||||||
<LigueImg /> |
|
||||||
</LigueImgWrapper> |
|
||||||
<MatchInfo> |
|
||||||
<Season> |
|
||||||
<T9n t='diwan_season' /> |
|
||||||
</Season> |
|
||||||
<MainInfoTitle> |
|
||||||
<T9n t='diwan_title' /> |
|
||||||
</MainInfoTitle> |
|
||||||
<MainInfoText> |
|
||||||
<T9n t='diwan_desc' /> |
|
||||||
</MainInfoText> |
|
||||||
<MainInfoButton onClick={login}> |
|
||||||
<T9n t='diwan_join' /> |
|
||||||
</MainInfoButton> |
|
||||||
{!isMobileDevice && ( |
|
||||||
<Fragment> |
|
||||||
<TunisiaLogo /> |
|
||||||
<ClubsLogo /> |
|
||||||
</Fragment> |
|
||||||
)} |
|
||||||
</MatchInfo> |
|
||||||
</BlockWrapper> |
|
||||||
</MainInfoContainer> |
|
||||||
<Footer> |
|
||||||
<FooterRights>©inSports.tv {currentYear}</FooterRights> |
|
||||||
</Footer> |
|
||||||
</Wrapper> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,301 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { devices, isMobileDevice } from 'config' |
|
||||||
|
|
||||||
import { ButtonSolid } from 'features/Common' |
|
||||||
|
|
||||||
export const Wrapper = styled.div` |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
color: white; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: space-between; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
height: 100%; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const HeaderWrapper = styled.div` |
|
||||||
padding: 20px 0; |
|
||||||
padding-left: 20%; |
|
||||||
width: 100%; |
|
||||||
background: rgba(19, 21, 27, 0.7); |
|
||||||
backdrop-filter: blur(20px); |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
@media ${devices.laptop} { |
|
||||||
padding-left: 5%; |
|
||||||
} |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
background: #000000; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const TunisiaLogo = styled.div` |
|
||||||
background-image: url(/images/tunis-logo.svg); |
|
||||||
background-size: contain; |
|
||||||
background-repeat: no-repeat; |
|
||||||
width: 229px; |
|
||||||
height: 49px; |
|
||||||
margin-bottom: 50px; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 66px; |
|
||||||
height: 14px; |
|
||||||
margin-bottom: 0; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const InsportsLogo = styled.div` |
|
||||||
background-image: url(/images/insports-logo.svg); |
|
||||||
background-size: contain; |
|
||||||
background-repeat: no-repeat; |
|
||||||
width: 80px; |
|
||||||
height: 25px; |
|
||||||
margin-right: 25px; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 57px; |
|
||||||
height: 18px; |
|
||||||
|
|
||||||
::after { |
|
||||||
content: ''; |
|
||||||
position: absolute; |
|
||||||
width: 0.5px; |
|
||||||
height: 25px; |
|
||||||
background: #FFFFFF; |
|
||||||
right: -13px; |
|
||||||
top: -3px; |
|
||||||
opacity: 0.6; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const ClubsLogo = styled.div` |
|
||||||
background-image: url(/images/tunis_clubs.svg); |
|
||||||
background-size: contain; |
|
||||||
background-repeat: no-repeat; |
|
||||||
width: 408px; |
|
||||||
height: 86px; |
|
||||||
` |
|
||||||
|
|
||||||
export const MainInfoContainer = styled.div` |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
margin-top: 50px; |
|
||||||
height: 100%; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const BlockWrapper = styled.div` |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
padding-left: 20%; |
|
||||||
width: 100%; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
@media ${devices.laptop} { |
|
||||||
padding-left: 5%; |
|
||||||
} |
|
||||||
@media ${devices.mobile} { |
|
||||||
padding-left: 5.4rem; |
|
||||||
} |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
flex-direction: column; |
|
||||||
padding: 5.4rem; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
padding-top: 20px; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const ScGradient = styled.div` |
|
||||||
content: ''; |
|
||||||
position: absolute; |
|
||||||
width: 620px; |
|
||||||
height: 310px; |
|
||||||
border-radius: 50%; |
|
||||||
background: rgba(29, 185, 171, 0.4); |
|
||||||
opacity: 0.7; |
|
||||||
filter: blur(104.135px); |
|
||||||
top: 30%; |
|
||||||
left: 25px; |
|
||||||
z-index: 1; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
filter: blur(50.135px); |
|
||||||
border-radius: 40%; |
|
||||||
width: 349px; |
|
||||||
height: 210px; |
|
||||||
left: -35px; |
|
||||||
top: -71px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
|
|
||||||
` |
|
||||||
|
|
||||||
export const LigueImg = styled.div` |
|
||||||
background-image: url(/images/landing_${() => ( |
|
||||||
isMobileDevice |
|
||||||
? 'mobile_ligue_1.png' |
|
||||||
: 'ligue_1.png' |
|
||||||
)}); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: center; |
|
||||||
background-size: contain; |
|
||||||
width: 670px; |
|
||||||
height: 156px; |
|
||||||
z-index: 2; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 288px; |
|
||||||
height: 66px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const LigueImgWrapper = styled.div` |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
height: 80%; |
|
||||||
margin-right: 5%; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
margin-right: 0; |
|
||||||
margin-bottom: 83px; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
display: block; |
|
||||||
height: 100%; |
|
||||||
width: 70%; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const MatchInfo = styled.div` |
|
||||||
margin-bottom: 60px; |
|
||||||
max-width: 670px; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
padding-top: 0; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const Season = styled.div` |
|
||||||
text-transform: uppercase; |
|
||||||
background-color: rgba(0,0,0,0.4); |
|
||||||
padding: 8px 25px; |
|
||||||
color: #B9B9B9; |
|
||||||
border-radius: 5px; |
|
||||||
font-size: 13px; |
|
||||||
font-weight: 600; |
|
||||||
display: inline-flex; |
|
||||||
margin-bottom: 50px; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
margin-bottom: 15px; |
|
||||||
padding: 0.7em 2.5rem; |
|
||||||
font-size: 10px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const MainInfoTitle = styled.div` |
|
||||||
font-weight: 600; |
|
||||||
font-size: 2rem; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 24px; |
|
||||||
margin-bottom: 25px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const MainInfoButton = styled(ButtonSolid)` |
|
||||||
width: auto; |
|
||||||
height: 70px; |
|
||||||
font-size: 24px; |
|
||||||
font-weight: 600; |
|
||||||
border-radius: 5px; |
|
||||||
margin-bottom: 50px; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 100%; |
|
||||||
font-size: 17px; |
|
||||||
margin-bottom: 30px; |
|
||||||
height: 40px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const MainInfoText = styled.div` |
|
||||||
margin: 40px 0; |
|
||||||
font-size: 17px; |
|
||||||
line-height: 150%; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 12px; |
|
||||||
margin: 0 0 25px; |
|
||||||
letter-spacing: 0.1px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const Footer = styled.div` |
|
||||||
font-size: 14px; |
|
||||||
background-color: black; |
|
||||||
padding: 16px 0; |
|
||||||
padding-left: 20%; |
|
||||||
width: 100%; |
|
||||||
@media ${devices.laptop} { |
|
||||||
padding-left: 5%; |
|
||||||
} |
|
||||||
@media ${devices.mobile} { |
|
||||||
padding-left: 35px; |
|
||||||
} |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
display: none; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const FooterRights = styled.div` |
|
||||||
opacity: .5; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 12px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
Loading…
Reference in new issue