Compare commits
1 Commits
develop
...
tunisia.in
| Author | SHA1 | Date |
|---|---|---|
Dmitry Kosolapov home
|
6782a60bc2 | 3 years ago |
@ -1 +0,0 @@ |
||||
google.com, pub-6802442215403184, DIRECT, f08c47fec0942fa0 |
||||
@ -1,9 +0,0 @@ |
||||
{ |
||||
"applinks": { |
||||
"apps": [], |
||||
"details": [{ |
||||
"appID": "2X9NY5X2LZ.com.insports.ott", |
||||
"paths": ["*"] |
||||
}] |
||||
} |
||||
} |
||||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 793 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 802 B |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
@ -1,12 +0,0 @@ |
||||
<?xml version="1.0" encoding="utf-8"?> |
||||
<browserconfig> |
||||
<msapplication> |
||||
<tile> |
||||
<square70x70logo src="/mstile-70x70.png"/> |
||||
<square144x144logo src="/mstile-144x144.png"/> |
||||
<square150x150logo src="/mstile-150x150.png"/> |
||||
<square310x310logo src="/mstile-310x310.png"/> |
||||
<TileColor>#da532c</TileColor> |
||||
</tile> |
||||
</msapplication> |
||||
</browserconfig> |
||||
|
Before Width: | Height: | Size: 477 B |
|
Before Width: | Height: | Size: 982 B |
|
Before Width: | Height: | Size: 15 KiB |
@ -1,19 +0,0 @@ |
||||
{ |
||||
"name": "", |
||||
"short_name": "", |
||||
"icons": [ |
||||
{ |
||||
"src": "/android-chrome-192x192.png", |
||||
"sizes": "192x192", |
||||
"type": "image/png" |
||||
}, |
||||
{ |
||||
"src": "/android-chrome-512x512.png", |
||||
"sizes": "512x512", |
||||
"type": "image/png" |
||||
} |
||||
], |
||||
"theme_color": "#ffffff", |
||||
"background_color": "#ffffff", |
||||
"display": "standalone" |
||||
} |
||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 884 B After Width: | Height: | Size: 598 B |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
@ -1,12 +0,0 @@ |
||||
<?xml version="1.0" encoding="utf-8"?> |
||||
<browserconfig> |
||||
<msapplication> |
||||
<tile> |
||||
<square70x70logo src="/mstile-70x70.png"/> |
||||
<square144x144logo src="/mstile-144x144.png"/> |
||||
<square150x150logo src="/mstile-150x150.png"/> |
||||
<square310x310logo src="/mstile-310x310.png"/> |
||||
<TileColor>#da532c</TileColor> |
||||
</tile> |
||||
</msapplication> |
||||
</browserconfig> |
||||
|
Before Width: | Height: | Size: 477 B |
|
Before Width: | Height: | Size: 982 B |
|
Before Width: | Height: | Size: 15 KiB |
@ -1,19 +0,0 @@ |
||||
{ |
||||
"name": "", |
||||
"short_name": "", |
||||
"icons": [ |
||||
{ |
||||
"src": "/android-chrome-192x192.png", |
||||
"sizes": "192x192", |
||||
"type": "image/png" |
||||
}, |
||||
{ |
||||
"src": "/android-chrome-512x512.png", |
||||
"sizes": "512x512", |
||||
"type": "image/png" |
||||
} |
||||
], |
||||
"theme_color": "#ffffff", |
||||
"background_color": "#ffffff", |
||||
"display": "standalone" |
||||
} |
||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 624 B |
|
Before Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 170 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 229 B |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 908 B |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 451 B |
|
Before Width: | Height: | Size: 755 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 329 B |
|
Before Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1,28 +1,15 @@ |
||||
<!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 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() |
||||
// обновляем рефреш токен в локалсторадже |
||||
// так как safari не дает доступ к кукам |
||||
.then(() => { |
||||
const refreshToken = localStorage.getItem('refresh_token'); |
||||
if (refreshToken) { |
||||
localStorage.setItem('refresh_token', new URLSearchParams(document.location.search).get('refresh_token')); |
||||
} |
||||
}) |
||||
.catch((err) => { |
||||
console.error('OIDC: silent refresh callback error', err); |
||||
}); |
||||
.catch((err) => { |
||||
console.error('OIDC: silent refresh callback error', err); |
||||
}); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
</html> |
||||
|
||||
@ -1,128 +0,0 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
RefObject, |
||||
} from 'react' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { Icon } from 'features/Icon' |
||||
import { useAuthStore } from 'features/AuthStore' |
||||
|
||||
import { |
||||
AccessTimerContainer, |
||||
PreviewInfo, |
||||
SignInBtn, |
||||
SignText, |
||||
Timer, |
||||
TimerContainer, |
||||
} from './styled' |
||||
|
||||
import { SimplePopup } from '../SimplePopup' |
||||
import { secondsToHms } from '../../helpers' |
||||
import { getViewMatchDuration } from '../../requests/getViewMatchDuration' |
||||
import { usePageParams } from '../../hooks' |
||||
import { getUserInfo } from '../../requests' |
||||
|
||||
type AccessTimerType = { |
||||
access: boolean, |
||||
isFullscreen: boolean, |
||||
onFullscreenClick: () => void, |
||||
playing: boolean, |
||||
videoRef?: RefObject<HTMLVideoElement> | null, |
||||
} |
||||
|
||||
const ACCESS_TIME = 60 |
||||
|
||||
export const AccessTimer = ({ |
||||
access, |
||||
isFullscreen, |
||||
onFullscreenClick, |
||||
playing, |
||||
videoRef, |
||||
}: AccessTimerType) => { |
||||
const { |
||||
logout, |
||||
setUserInfo, |
||||
userInfo, |
||||
} = useAuthStore() |
||||
|
||||
const { profileId, sportType } = usePageParams() |
||||
|
||||
const [timeIsFinished, setTimeIsFinished] = useState(true) |
||||
const [time, setTime] = useState(ACCESS_TIME) |
||||
const isTimeExpired = time <= 0 || !access |
||||
|
||||
useEffect(() => { |
||||
if (isTimeExpired) { |
||||
document.pictureInPictureEnabled && document.exitPictureInPicture() |
||||
setTimeIsFinished(true) |
||||
videoRef?.current?.pause() |
||||
setTime(0) |
||||
if (isFullscreen) onFullscreenClick() |
||||
} |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [access, playing, profileId]) |
||||
|
||||
useEffect(() => { |
||||
let stopWatch: ReturnType<typeof setInterval> | null = null |
||||
if (playing) { |
||||
stopWatch = setInterval(() => { |
||||
setTime((prev) => prev - 1) |
||||
}, 1000) |
||||
} else { |
||||
stopWatch && clearInterval(stopWatch) |
||||
} |
||||
return () => { |
||||
stopWatch && clearInterval(stopWatch) |
||||
} |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [playing, profileId]) |
||||
|
||||
useEffect(() => { |
||||
(async () => { |
||||
setTime(ACCESS_TIME) |
||||
const updatedUserInfo = await getUserInfo() |
||||
setUserInfo(updatedUserInfo) |
||||
const timeViewed = await getViewMatchDuration({ |
||||
matchId: profileId, |
||||
sportType, |
||||
userId: Number(updatedUserInfo?.email), |
||||
}) |
||||
setTime(isTimeExpired ? 0 : (ACCESS_TIME - Number(timeViewed.duration))) |
||||
})() |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [profileId]) |
||||
|
||||
return ( |
||||
<> |
||||
{(!userInfo || Number(userInfo?.email) < 0) && access && time > 0 |
||||
? ( |
||||
<AccessTimerContainer isFullscreen={isFullscreen}> |
||||
<TimerContainer> |
||||
<PreviewInfo> |
||||
<Timer>{secondsToHms(time)} </Timer> |
||||
<T9n t='game_preview' className='gamePreview' /> |
||||
</PreviewInfo> |
||||
<SignText> |
||||
<T9n t='sign_in_full_game' /> |
||||
</SignText> |
||||
</TimerContainer> |
||||
<SignInBtn onClick={() => logout('saveToken')} id='match_register'> |
||||
<T9n t='sign_in' /> |
||||
</SignInBtn> |
||||
</AccessTimerContainer> |
||||
) |
||||
: ( |
||||
<SimplePopup |
||||
isModalOpen={timeIsFinished} |
||||
withCloseButton={false} |
||||
headerName='sec_60' |
||||
mainText='continue_watching' |
||||
buttonName='sign_in' |
||||
onHandle={() => logout('saveToken')} |
||||
icon={<Icon refIcon='ExclamationPoint' />} |
||||
/> |
||||
)} |
||||
</> |
||||
) |
||||
} |
||||
@ -1,124 +0,0 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
|
||||
import { ButtonSolid } from 'features/Common' |
||||
|
||||
export const AccessTimerContainer = styled.div<{isFullscreen?: boolean}>` |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 5.7rem; |
||||
transform: translateX(-50%); |
||||
background-color: #333333; |
||||
border-radius: 5px; |
||||
padding: 20px 50px; |
||||
|
||||
gap: 40px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
padding: 9px 7px 9px 15px; |
||||
bottom: 6.5rem; |
||||
|
||||
@media screen and (orientation: landscape) { |
||||
max-width: 95%; |
||||
bottom: 4rem; |
||||
} |
||||
` |
||||
: ''}; |
||||
|
||||
${({ isFullscreen }) => isFullscreen && css` |
||||
${isMobileDevice |
||||
? css` |
||||
padding: 9px 7px 9px 15px; |
||||
bottom: 12rem; |
||||
|
||||
@media screen and (orientation: landscape) { |
||||
max-width: 95%; |
||||
bottom: 6rem; |
||||
} |
||||
` |
||||
: ''}; |
||||
`}
|
||||
` |
||||
|
||||
export const SignInBtn = styled(ButtonSolid)` |
||||
width: 246px; |
||||
border-radius: 5px; |
||||
height: 50px; |
||||
font-weight: 600; |
||||
font-size: 20px; |
||||
white-space: nowrap; |
||||
padding: 0 35px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
white-space: nowrap; |
||||
padding: 0px 16px; |
||||
width: 140px; |
||||
height: 30px; |
||||
|
||||
@media screen and (orientation: landscape) { |
||||
font-size: 12px; |
||||
padding: 0px 8px; |
||||
} |
||||
` |
||||
: ''}; |
||||
|
||||
` |
||||
|
||||
export const TimerContainer = styled.div` |
||||
color: white; |
||||
font-weight: 700; |
||||
font-size: 20px; |
||||
line-height: 24px; |
||||
white-space: nowrap; |
||||
max-width: 215px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
line-height: 28px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const PreviewInfo = styled.div` |
||||
display: flex; |
||||
line-height: 24px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
line-height: 14px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const Timer = styled.div` |
||||
min-width: 67px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
min-width: 40px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const SignText = styled.span` |
||||
display: block; |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
font-weight: 400; |
||||
white-space: break-spaces; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 9px; |
||||
line-height: 14px |
||||
` |
||||
: ''}; |
||||
` |
||||
@ -1,163 +0,0 @@ |
||||
import { useEffect, useState } from 'react' |
||||
|
||||
import ReactGA from 'react-ga' |
||||
|
||||
import { updateAdsView } from 'requests' |
||||
|
||||
import { useToggle } from 'hooks' |
||||
|
||||
import { getLocalStorageItem, isMatchPage } from 'helpers' |
||||
|
||||
import { |
||||
device, |
||||
COUNTRY, |
||||
} from 'config' |
||||
|
||||
import { useMatchPageStore } from 'features/MatchPage/store' |
||||
|
||||
import type { AdComponentType } from './index' |
||||
|
||||
import { checkVideo } from '../../helpers' |
||||
import { |
||||
adsViews, |
||||
EventGA, |
||||
ViewsType, |
||||
} from '../../types' |
||||
|
||||
const countryCode = getLocalStorageItem(COUNTRY) |
||||
|
||||
export const useAd = ({ ad }: AdComponentType) => { |
||||
const isMatch = isMatchPage() |
||||
|
||||
const [isOpenAd, setIsOpenAd] = useState(isMatch) |
||||
const [isNeedToShow, setIsNeedToShow] = useState(isMatch) |
||||
const [shownTime, setShownTime] = useState(0) |
||||
|
||||
const { isFullscreen } = useMatchPageStore() |
||||
|
||||
const views = getLocalStorageItem(adsViews) as ViewsType |
||||
const { |
||||
duration, |
||||
frequency, |
||||
id, |
||||
media, |
||||
name, |
||||
time_close, |
||||
} = ad |
||||
|
||||
const { |
||||
close, |
||||
isOpen: isOpenCloseBtn, |
||||
open: showCloseBtn, |
||||
} = useToggle() |
||||
|
||||
const isNeedBanner = Number(views?.HOME) % frequency === 0 |
||||
const isVideo = checkVideo(media.url) |
||||
const currentAdsTime = duration - shownTime |
||||
|
||||
useEffect(() => { |
||||
if (!isFullscreen) { |
||||
if (currentAdsTime === 0) { |
||||
setShownTime(0) |
||||
} else { |
||||
const stopWatch = setInterval(() => { |
||||
setShownTime((prev) => prev + 1) |
||||
}, 1000) |
||||
return () => clearInterval(stopWatch) |
||||
} |
||||
} |
||||
return undefined |
||||
}, [ |
||||
isFullscreen, |
||||
currentAdsTime, |
||||
]) |
||||
|
||||
const handleClose = () => { |
||||
setIsOpenAd(false) |
||||
isMatch && setIsNeedToShow(false) |
||||
sendBannerClickEvent(EventGA.CLOSE) |
||||
} |
||||
|
||||
const sendBannerClickEvent = (event: EventGA) => { |
||||
ReactGA.initialize('Advertisement') |
||||
ReactGA.event({ |
||||
action: event, |
||||
category: 'Advertisement', |
||||
label: `${name}_${countryCode ?? ''}_${device}`, |
||||
value: id, |
||||
}) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
setShownTime(0) |
||||
|
||||
if (isMatch) { |
||||
const interval = setInterval(() => { |
||||
setIsNeedToShow(true) |
||||
setIsOpenAd(true) |
||||
}, frequency * 1000) |
||||
|
||||
return () => clearInterval(interval) |
||||
} |
||||
|
||||
setIsNeedToShow(isNeedBanner) |
||||
return setIsOpenAd(isNeedBanner) |
||||
}, [ |
||||
frequency, |
||||
isNeedToShow, |
||||
views?.HOME, |
||||
isNeedBanner, |
||||
isMatch, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
if (isFullscreen || !isOpenAd) return undefined |
||||
|
||||
const timeoutCloseAd = setTimeout(handleClose, currentAdsTime * 1000) |
||||
return () => { |
||||
clearTimeout(timeoutCloseAd) |
||||
} |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ |
||||
isNeedToShow, |
||||
isOpenAd, |
||||
isFullscreen, |
||||
currentAdsTime, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
close() |
||||
const timeoutCloseBtn = time_close && setTimeout(showCloseBtn, time_close * 1000) |
||||
return () => { |
||||
time_close && clearTimeout(timeoutCloseBtn) |
||||
} |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ |
||||
isNeedToShow, |
||||
isOpenAd, |
||||
views?.HOME, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
if (!isNeedToShow || (!isMatch && !isNeedBanner)) return |
||||
|
||||
(async () => { |
||||
await updateAdsView({ adv_id: id }) |
||||
})() |
||||
sendBannerClickEvent(EventGA.DISPLAY) |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ |
||||
id, |
||||
isNeedToShow, |
||||
isMatch, |
||||
]) |
||||
|
||||
return { |
||||
handleClose, |
||||
isNeedToShow, |
||||
isOpenAd, |
||||
isOpenCloseBtn, |
||||
isVideo, |
||||
sendBannerClickEvent, |
||||
} |
||||
} |
||||
@ -1,91 +0,0 @@ |
||||
import type { MouseEvent } from 'react' |
||||
import { memo } from 'react' |
||||
|
||||
import type { AdType } from 'requests' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
|
||||
import { useAd } from './hooks' |
||||
|
||||
import { EventGA } from '../../types' |
||||
|
||||
import { |
||||
AdImg, |
||||
AdVideo, |
||||
AdWrapper, |
||||
LinkWrapper, |
||||
AdsCloseButton, |
||||
} from './styled' |
||||
|
||||
export type AdComponentType = { |
||||
ad: AdType, |
||||
} |
||||
export const AdComponent = memo(({ ad }: AdComponentType) => { |
||||
const { |
||||
link, |
||||
media, |
||||
position, |
||||
} = ad |
||||
|
||||
const { |
||||
handleClose, |
||||
isNeedToShow, |
||||
isOpenAd, |
||||
isOpenCloseBtn, |
||||
isVideo, |
||||
sendBannerClickEvent, |
||||
} = useAd({ ad }) |
||||
|
||||
const { suffix } = useLexicsStore() |
||||
|
||||
const close = (e: MouseEvent<HTMLButtonElement>) => { |
||||
e.stopPropagation() |
||||
handleClose() |
||||
} |
||||
|
||||
const onLinkClick = () => { |
||||
link && sendBannerClickEvent(EventGA.CLICK) |
||||
} |
||||
|
||||
return ( |
||||
position && isOpenAd && isNeedToShow |
||||
? ( |
||||
<AdWrapper |
||||
position={position.id} |
||||
isOpenAd={isOpenAd} |
||||
> |
||||
{isOpenCloseBtn && ( |
||||
<AdsCloseButton |
||||
onClick={close} |
||||
size={12} |
||||
position={position.id} |
||||
/> |
||||
)} |
||||
<LinkWrapper |
||||
href={link} |
||||
target='_blank' |
||||
rel='noreferrer' |
||||
onClick={onLinkClick} |
||||
> |
||||
{isVideo |
||||
? ( |
||||
<AdVideo |
||||
muted={isVideo} |
||||
autoPlay={isVideo} |
||||
loop={isVideo} |
||||
src={media.url} |
||||
position={position.id} |
||||
/> |
||||
) |
||||
: ( |
||||
<AdImg |
||||
src={media.url} |
||||
position={position.id} |
||||
alt={`name_${suffix}`} |
||||
/> |
||||
)} |
||||
</LinkWrapper> |
||||
</AdWrapper> |
||||
) : null |
||||
) |
||||
}) |
||||
@ -1,109 +0,0 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import includes from 'lodash/includes' |
||||
|
||||
import { CloseButton } from 'features/PopupComponents' |
||||
|
||||
import { |
||||
MATCH_ADS, |
||||
PLAYER_ADS, |
||||
VIEW_ADS, |
||||
} from '../../types' |
||||
|
||||
type Props = { |
||||
position: number, |
||||
} |
||||
|
||||
const header = [7, 8, 9] |
||||
|
||||
const chooseStyle = (type: number) => { |
||||
switch (true) { |
||||
case VIEW_ADS.COLUMN === type: |
||||
return 'grid-row: 1 / 3; img {max-height: none;}' |
||||
case VIEW_ADS.ROW === type: |
||||
return 'grid-column: 1 / 3' |
||||
case VIEW_ADS.SQUARE === type: |
||||
return 'grid-row: 1 / 3; grid-column: 1 / 3; img {max-height: none;}' |
||||
case VIEW_ADS.SECOND_COLUMN === type: |
||||
return 'grid-column: 2 / 3; grid-row: 1 / 1' |
||||
case VIEW_ADS.SECOND_ROW === type: |
||||
return 'grid-column: 1 / 2; grid-row: 2 / 3;' |
||||
case MATCH_ADS.PLAYS_TOP === type: |
||||
return 'margin-left: 14px; height: 48px' |
||||
case MATCH_ADS.PLAYS_BOTTOM === type: |
||||
return 'grid-row: 4; margin-bottom: 12px; height: 48px;' |
||||
case PLAYER_ADS.LEFT_BOTTOM === type: |
||||
return css` |
||||
height: auto;
|
||||
width: 42.4%;
|
||||
bottom: 100px;
|
||||
left: 20px;
|
||||
` |
||||
case PLAYER_ADS.CENTER_BOTTOM === type: |
||||
return css` |
||||
height: 18.3%;
|
||||
width: 81.3%;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); |
||||
` |
||||
case PLAYER_ADS.RIGHT === type: |
||||
return css` |
||||
height: 87.2%;
|
||||
width: 18.3%;
|
||||
bottom: 90px;
|
||||
right: 18px; |
||||
` |
||||
case PLAYER_ADS.FULL_SCREEN === type: |
||||
return 'bottom: 0; left: 0;' |
||||
default: |
||||
return '' |
||||
} |
||||
} |
||||
|
||||
export const AdImg = styled.img<Props>` |
||||
width: 100%; |
||||
min-height: ${({ position }) => (!includes(header, position) && '100%')}; |
||||
max-height: ${({ position }) => (includes(header, position) ? '13rem' : '100%')}; |
||||
cursor: pointer; |
||||
border-radius: 3px; |
||||
` |
||||
|
||||
export const AdVideo = styled.video<Props>` |
||||
object-fit: contain; |
||||
width: 100%; |
||||
cursor: pointer; |
||||
max-height: ${({ position }) => (includes(header, position) ? '283px' : '100%')}; |
||||
background-color: black; |
||||
border-radius: 3px; |
||||
` |
||||
|
||||
export const AdWrapper = styled.div<Props & {isOpenAd: boolean}>` |
||||
position: ${({ position }) => (includes(PLAYER_ADS, position) ? 'absolute' : 'relative')}; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 1; |
||||
|
||||
${({ position }) => chooseStyle(position)}; |
||||
|
||||
display: ${({ isOpenAd }) => (isOpenAd ? '' : 'none')}; |
||||
` |
||||
|
||||
export const AdsCloseButton = styled(CloseButton)<Props>` |
||||
position: absolute; |
||||
right: ${({ position }) => (position === PLAYER_ADS.FULL_SCREEN ? '10px' : '0')}; |
||||
top: ${({ position }) => (position === PLAYER_ADS.FULL_SCREEN ? '10px' : '0')}; |
||||
background: none; |
||||
border-radius: 0; |
||||
z-index: 2; |
||||
cursor: pointer; |
||||
color: #9B9B9B; |
||||
width: 28px; |
||||
height: 28px; |
||||
|
||||
:hover { |
||||
background: none; |
||||
} |
||||
` |
||||
|
||||
export const LinkWrapper = styled.a`` |
||||
@ -1,79 +0,0 @@ |
||||
import type { MouseEvent } from 'react' |
||||
|
||||
import includes from 'lodash/includes' |
||||
|
||||
import type { AdType } from 'requests' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
|
||||
import { useAd } from '../AdComponent/hooks' |
||||
import { EventGA, PLAYER_MOBILE_FULL_SCREEN } from '../../types' |
||||
|
||||
import { |
||||
AdsCloseButton, |
||||
Img, |
||||
MobileAdWrapper, |
||||
Video, |
||||
} from './styled' |
||||
|
||||
type MobileAdTypes = { |
||||
ad: AdType, |
||||
} |
||||
|
||||
export const MobileAd = ({ ad }: MobileAdTypes) => { |
||||
const { |
||||
link, |
||||
media, |
||||
position, |
||||
} = ad |
||||
|
||||
const { suffix } = useLexicsStore() |
||||
|
||||
const { |
||||
handleClose, |
||||
isNeedToShow, |
||||
isOpenAd, |
||||
isOpenCloseBtn, |
||||
isVideo, |
||||
sendBannerClickEvent, |
||||
} = useAd({ ad }) |
||||
|
||||
const close = (e: MouseEvent<HTMLButtonElement>) => { |
||||
e.stopPropagation() |
||||
handleClose() |
||||
} |
||||
|
||||
const onLinkClick = () => { |
||||
if (link) { |
||||
sendBannerClickEvent(EventGA.CLICK) |
||||
window.open(link, '_blank') |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
position && isOpenAd && isNeedToShow ? ( |
||||
<MobileAdWrapper |
||||
position={position.id} |
||||
onClick={onLinkClick} |
||||
> |
||||
{isOpenCloseBtn |
||||
&& ( |
||||
<AdsCloseButton |
||||
position={position.id} |
||||
onClick={close} |
||||
size={includes(PLAYER_MOBILE_FULL_SCREEN, position.id) ? 12 : 8} |
||||
/> |
||||
)} |
||||
{isVideo |
||||
? <Video position={position.id} src={media.url} /> |
||||
: ( |
||||
<Img |
||||
position={position.id} |
||||
src={media.url} |
||||
alt={`name_${suffix}`} |
||||
/> |
||||
)} |
||||
</MobileAdWrapper> |
||||
) : null |
||||
) |
||||
} |
||||
@ -1,115 +0,0 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import includes from 'lodash/includes' |
||||
|
||||
import { CloseButton } from 'features/PopupComponents' |
||||
|
||||
import { |
||||
MATCH_ADS, |
||||
PLAYER_MOBILE_FULL_SCREEN, |
||||
PLAYER_MOBILE_ADS, |
||||
MATCH_PAGE_MOBILE_ADS, |
||||
VIEW_ADS, |
||||
} from '../../types' |
||||
|
||||
type Props = { |
||||
position: number, |
||||
} |
||||
|
||||
const chooseStyle = (type: number) => { |
||||
switch (type) { |
||||
case MATCH_ADS.PLAYS_BOTTOM_MOBILE: |
||||
return css` |
||||
grid-row: 4;
|
||||
margin-bottom: 12px;
|
||||
height: 48px; |
||||
` |
||||
case PLAYER_MOBILE_ADS: |
||||
return css` |
||||
position: absolute; |
||||
width: 92%;
|
||||
bottom: 50px;
|
||||
left: 15px; |
||||
` |
||||
case PLAYER_MOBILE_FULL_SCREEN.VERTICAL_FULL_SCREEN: |
||||
case PLAYER_MOBILE_FULL_SCREEN.HORIZONTAL_FULL_SCREEN: |
||||
return css` |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
height: 100%; |
||||
padding: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.7); |
||||
` |
||||
case VIEW_ADS.MOBILE_IN_COLLAPSE_FOOTER: |
||||
case VIEW_ADS.MOBILE_IN_COLLAPSE_HEADER: |
||||
return 'margin-top: 6px' |
||||
default: |
||||
return '' |
||||
} |
||||
} |
||||
|
||||
export const MobileAdWrapper = styled.div<Props>` |
||||
position: relative; |
||||
width: 100%; |
||||
z-index: ${({ position }) => (includes(PLAYER_MOBILE_FULL_SCREEN, position) ? '101' : '4')}; |
||||
|
||||
${({ position }) => chooseStyle(position)}; |
||||
` |
||||
|
||||
export const AdsCloseButton = styled(CloseButton)<Props>` |
||||
position: absolute; |
||||
right: ${({ position }) => (includes(PLAYER_MOBILE_FULL_SCREEN, position) ? '-5px' : '-10px')}; |
||||
top: ${({ position }) => (includes(PLAYER_MOBILE_FULL_SCREEN, position) ? '15px' : '10px')}; |
||||
background: none; |
||||
border-radius: 0; |
||||
transform: translate(-50%, -50%); |
||||
z-index: 2; |
||||
color: #9B9B9B; |
||||
` |
||||
|
||||
export const Img = styled.img<Props>` |
||||
border-radius: 2px; |
||||
width: 100%; |
||||
|
||||
object-fit: ${({ position }) => { |
||||
switch (true) { |
||||
case position === PLAYER_MOBILE_FULL_SCREEN.VERTICAL_FULL_SCREEN: |
||||
return 'fill' |
||||
case position === MATCH_ADS.PLAYS_TOP_MOBILE: |
||||
return 'contain' |
||||
default: |
||||
return 'cover' |
||||
} |
||||
}}; |
||||
|
||||
height: ${({ position }) => { |
||||
switch (true) { |
||||
case position === 10: |
||||
return '50px' |
||||
case includes(MATCH_PAGE_MOBILE_ADS, position): |
||||
return '100%' |
||||
default: |
||||
return '75px' |
||||
} |
||||
}} |
||||
` |
||||
|
||||
export const Video = styled.video<Props>` |
||||
max-height: 100%; |
||||
object-fit: cover; |
||||
min-width: 100%; |
||||
height: ${({ position }) => (position === 10 ? '50px' : '75px')}; |
||||
border-radius: 2px; |
||||
|
||||
height: ${({ position }) => { |
||||
switch (true) { |
||||
case position === 10: |
||||
return '50px' |
||||
case position === MATCH_ADS.PLAYS_TOP_MOBILE: |
||||
return '48px' |
||||
default: |
||||
return '75px' |
||||
} |
||||
}} |
||||
` |
||||
@ -1,16 +0,0 @@ |
||||
import type { AdResponse, AdsListType } from 'requests' |
||||
|
||||
export const calcMaxAdDurationAds = (advertisements: AdResponse) => { |
||||
const allAds = Object.values(advertisements) |
||||
|
||||
const combineAds = allAds.reduce((result, currentAd) => { |
||||
result.push(...currentAd) |
||||
|
||||
return result |
||||
}, [] as AdsListType) |
||||
|
||||
const maxDuration = combineAds |
||||
.reduce((result, { duration }) => Math.max(result, duration), 0) |
||||
|
||||
return maxDuration |
||||
} |
||||
@ -1 +0,0 @@ |
||||
export * from './isVideo' |
||||
@ -1,2 +0,0 @@ |
||||
const regexp = /^https?:\/\/\S+(?:mp4)$/ |
||||
export const checkVideo = (url: string) => regexp.test(url) |
||||
@ -1,65 +0,0 @@ |
||||
import { useMemo } from 'react' |
||||
|
||||
import { useQuery } from 'react-query' |
||||
|
||||
import { useRecoilState } from 'recoil' |
||||
|
||||
import { isMobileDevice, querieKeys } from 'config' |
||||
|
||||
import { getAds } from 'requests' |
||||
|
||||
import { isMatchPage } from 'helpers/isMatchPage' |
||||
import { useLang } from 'features/LexicsStore/hooks/useLang' |
||||
import { useAuthStore } from 'features/AuthStore' |
||||
|
||||
import { |
||||
DeviceType, |
||||
PageType, |
||||
} from './types' |
||||
import { calcMaxAdDurationAds } from './helpers/calcMaxDurationAds' |
||||
import { adsStore } from '../../pages/HighlightsPage/storeHighlightsAtoms' |
||||
|
||||
type Props = { |
||||
matchId?: number, |
||||
sportType?: number, |
||||
tournamentId?: number, |
||||
} |
||||
|
||||
export const useAds = ({ |
||||
matchId, |
||||
sportType, |
||||
tournamentId, |
||||
}: Props) => { |
||||
const [ads, setAds] = useRecoilState(adsStore) |
||||
const { lang } = useLang() |
||||
const { user } = useAuthStore() |
||||
|
||||
useQuery({ |
||||
enabled: isMatchPage() ? (!!user && !!tournamentId) : !!user, |
||||
queryFn: async () => { |
||||
const adsList = await getAds({ |
||||
client_type: isMobileDevice ? DeviceType.MOBILE : DeviceType.WEB, |
||||
language: lang, |
||||
type_id: isMatchPage() ? PageType.MATCH : PageType.HOME, |
||||
...isMatchPage() && { |
||||
matches: [{ |
||||
match_id: matchId, |
||||
sport_id: sportType, |
||||
}], |
||||
tournaments: [{ |
||||
sport_id: sportType, |
||||
tournament_id: tournamentId, |
||||
}], |
||||
}, |
||||
}) |
||||
adsList && setAds(adsList) |
||||
return adsList |
||||
}, |
||||
queryKey: [querieKeys.ads, matchId], |
||||
staleTime: useMemo(() => Math.max(calcMaxAdDurationAds(ads), 60 * 1000), [ads]), |
||||
}) |
||||
|
||||
return { |
||||
ads, |
||||
} |
||||
} |
||||
@ -1,31 +0,0 @@ |
||||
import type { AdType } from 'requests' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
|
||||
import type { AdsPropsType } from './types' |
||||
import { AdComponent } from './components/AdComponent' |
||||
import { MobileAd } from './components/MobileAd' |
||||
|
||||
import { |
||||
HeaderWrapAd, |
||||
} from './styled' |
||||
|
||||
export const HeaderAds = ({ ads }: AdsPropsType) => ( |
||||
ads?.length ? ( |
||||
<HeaderWrapAd column={ads?.length}> |
||||
{ads.map((ad: AdType) => ( |
||||
!isMobileDevice ? ( |
||||
<AdComponent |
||||
ad={ad} |
||||
key={ad.id} |
||||
/> |
||||
) : ( |
||||
<MobileAd |
||||
ad={ad} |
||||
key={ad.id} |
||||
/> |
||||
) |
||||
))} |
||||
</HeaderWrapAd> |
||||
) : null |
||||
) |
||||
@ -1,16 +0,0 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
|
||||
export const HeaderWrapAd = styled.div<{column: number}>` |
||||
width: 100%; |
||||
margin-bottom: 0.7rem; |
||||
display: grid; |
||||
grid-column-gap: 0.9rem; |
||||
grid-template-columns: ${({ column }) => (column > 1 ? `repeat(${column},${16.3 * 6 / column}%)` : 'repeat(1, 98.7%)')}; |
||||
|
||||
${isMobileDevice && css` |
||||
padding: 0 0.71rem; |
||||
grid-template-columns: none; |
||||
`}}
|
||||
` |
||||
@ -1,59 +0,0 @@ |
||||
import type { AdsListType } from 'requests' |
||||
|
||||
export enum PageType { |
||||
HOME = 1, |
||||
MATCH = 2, |
||||
} |
||||
|
||||
export enum DeviceType { |
||||
MOBILE = 'mobile', |
||||
WEB = 'web' |
||||
} |
||||
|
||||
export type ViewsType = Partial<Record<keyof typeof PageType, number>> |
||||
|
||||
export enum EventGA { |
||||
CLICK = 'banner_click', |
||||
CLOSE = 'banner_close', |
||||
DISPLAY = 'banner_display' |
||||
} |
||||
|
||||
export enum VIEW_ADS { |
||||
ROW = 4, |
||||
COLUMN = 5, |
||||
SQUARE = 6, |
||||
SECOND_COLUMN = 2, |
||||
SECOND_ROW = 3, |
||||
MOBILE_IN_COLLAPSE_HEADER = 12, |
||||
MOBILE_IN_COLLAPSE_FOOTER = 25 |
||||
} |
||||
|
||||
export const HEADER_MOBILE_ADS = [10, 11] |
||||
|
||||
export enum MATCH_ADS { |
||||
WATCH_TOP = 13, |
||||
PLAYS_TOP = 14, |
||||
PLAYS_BOTTOM = 15, |
||||
PLAYS_TOP_MOBILE = 16, |
||||
PLAYS_BOTTOM_MOBILE = 17, |
||||
} |
||||
|
||||
export enum PLAYER_ADS { |
||||
LEFT_BOTTOM = 18, |
||||
CENTER_BOTTOM = 19, |
||||
RIGHT = 20, |
||||
FULL_SCREEN = 21, |
||||
} |
||||
|
||||
export const PLAYER_MOBILE_ADS = 22 |
||||
|
||||
export enum PLAYER_MOBILE_FULL_SCREEN { |
||||
VERTICAL_FULL_SCREEN = 23, |
||||
HORIZONTAL_FULL_SCREEN = 24, |
||||
} |
||||
|
||||
export const MATCH_PAGE_MOBILE_ADS = [16, 17, 22, 23, 24] |
||||
|
||||
export type AdsPropsType = Record<'ads', AdsListType | undefined> |
||||
|
||||
export const adsViews = 'adsViews' |
||||
@ -1,72 +0,0 @@ |
||||
import type { Props, State } from '../types' |
||||
import { |
||||
createVariableSizingTransformationSet, |
||||
createClones, |
||||
createDefaultTransformationSet, |
||||
getElementDimensions, |
||||
getItemsCount, |
||||
getItemsOffset, |
||||
getTransitionProperty, |
||||
getTranslate3dProperty, |
||||
getItemsInSlide, |
||||
} from './elements' |
||||
import { getActiveIndex, getStartIndex } from './math' |
||||
|
||||
export const calculateInitialState = (props: Props, el: HTMLElement | null): State => { |
||||
const { |
||||
activeIndex: propsActiveIndex = 0, |
||||
animationDuration = 0, |
||||
infinite = false, |
||||
variableSizing = false, |
||||
} = props |
||||
const clones = createClones(props) |
||||
const transition = getTransitionProperty() |
||||
const itemsCount = getItemsCount(props) |
||||
const itemsOffset = getItemsOffset(props) |
||||
const itemsInSlide = getItemsInSlide(itemsCount, props) |
||||
const startIndex = getStartIndex(propsActiveIndex, itemsCount) |
||||
const activeIndex = getActiveIndex({ |
||||
infinite, |
||||
itemsCount, |
||||
startIndex, |
||||
}) |
||||
const { width: listWidth } = getElementDimensions(el) |
||||
|
||||
const transformationSet = variableSizing |
||||
? createVariableSizingTransformationSet({ |
||||
el, |
||||
infinite, |
||||
listWidth, |
||||
props, |
||||
}).coords |
||||
: createDefaultTransformationSet({ |
||||
children: clones, |
||||
infinite, |
||||
itemsInSlide, |
||||
listWidth, |
||||
props, |
||||
}).coords |
||||
|
||||
const translate3d = getTranslate3dProperty(activeIndex, { |
||||
infinite, |
||||
itemsInSlide, |
||||
itemsOffset, |
||||
transformationSet, |
||||
variableSizing, |
||||
}) |
||||
|
||||
return { |
||||
activeIndex, |
||||
animationDuration, |
||||
clones, |
||||
infinite, |
||||
itemsCount, |
||||
itemsInSlide, |
||||
itemsOffset, |
||||
listWidth, |
||||
transformationSet, |
||||
transition, |
||||
translate3d, |
||||
variableSizing, |
||||
} |
||||
} |
||||
@ -1,274 +0,0 @@ |
||||
import type { CSSProperties, ReactNode } from 'react' |
||||
import { Children } from 'react' |
||||
|
||||
import type { |
||||
Transformations, |
||||
ItemCoords, |
||||
Props, |
||||
State, |
||||
Transition, |
||||
} from '../types' |
||||
import { mapPartialCoords, mapPositionCoords } from './mappers' |
||||
import { getShiftIndex } from './math' |
||||
|
||||
export const getSlides = ({ children }: Props) => Children.toArray(children) |
||||
|
||||
export const getItemsCount = (props: Props) => getSlides(props).length |
||||
|
||||
export const getItemsOffset = ({ infinite }: Props) => (infinite ? 1 : 0) |
||||
|
||||
export const createClones = (props: Props) => { |
||||
const slides = getSlides(props) |
||||
|
||||
if (!props.infinite) return slides |
||||
|
||||
const itemsCount = getItemsCount(props) |
||||
const itemsOffset = getItemsOffset(props) |
||||
const itemsInSlide = getItemsInSlide(itemsCount, props) |
||||
const cursor = Math.min(itemsInSlide, itemsCount) + itemsOffset |
||||
|
||||
const clonesAfter = slides.slice(0, cursor) |
||||
const clonesBefore = slides.slice(-cursor) |
||||
|
||||
if (itemsOffset && itemsInSlide === itemsCount) { |
||||
const afterOffsetClone = slides[0] |
||||
const [beforeOffsetClone] = slides.slice(-1) |
||||
|
||||
clonesBefore.unshift(beforeOffsetClone) |
||||
clonesAfter.push(afterOffsetClone) |
||||
} |
||||
|
||||
return clonesBefore.concat(slides, clonesAfter) |
||||
} |
||||
|
||||
type CreateVariableSizingTransformationSetArgs = { |
||||
el: HTMLElement | null, |
||||
infinite: boolean, |
||||
listWidth: number, |
||||
props: Props, |
||||
} |
||||
|
||||
export const createVariableSizingTransformationSet = ({ |
||||
el, |
||||
infinite, |
||||
listWidth, |
||||
props, |
||||
}: CreateVariableSizingTransformationSetArgs) => { |
||||
let content = 0 |
||||
let partial = true |
||||
let coords: Array<ItemCoords> = [] |
||||
|
||||
const { spaceBetween = 0 } = props |
||||
|
||||
const children: Array<HTMLElement | Element> = Array.from(el?.children || []) |
||||
|
||||
coords = children.reduce<Array<ItemCoords>>(( |
||||
acc, |
||||
child, |
||||
i, |
||||
) => { |
||||
let position = 0 |
||||
const previewsChildCursor = i - 1 |
||||
const previewsChild = acc[previewsChildCursor] |
||||
const { width = 0 } = getElementDimensions(child?.firstChild as HTMLElement) |
||||
|
||||
content += width + spaceBetween |
||||
partial = listWidth >= content |
||||
|
||||
if (previewsChild) { |
||||
position = previewsChildCursor === 0 |
||||
? previewsChild.width + spaceBetween |
||||
: previewsChild.width + previewsChild.position + spaceBetween |
||||
} |
||||
|
||||
acc.push({ position, width }) |
||||
return acc |
||||
}, []) |
||||
|
||||
if (!infinite) { |
||||
if (partial) { |
||||
coords = mapPartialCoords(coords) |
||||
} else { |
||||
const position = content - listWidth |
||||
coords = mapPositionCoords(coords, position) |
||||
} |
||||
} |
||||
|
||||
return { |
||||
content, |
||||
coords, |
||||
partial, |
||||
} |
||||
} |
||||
|
||||
type CreateDefaultTransformationSetArgs = { |
||||
children: Array<ReactNode>, |
||||
infinite: boolean, |
||||
itemsInSlide: number, |
||||
listWidth: number, |
||||
props: Props, |
||||
} |
||||
|
||||
export const createDefaultTransformationSet = ({ |
||||
children, |
||||
infinite, |
||||
itemsInSlide, |
||||
listWidth, |
||||
props, |
||||
}: CreateDefaultTransformationSetArgs): Transformations => { |
||||
let content = 0 |
||||
let partial = true |
||||
let coords: Array<ItemCoords> = [] |
||||
|
||||
const { spaceBetween = 0 } = props |
||||
|
||||
const width = getItemWidth({ |
||||
galleryWidth: listWidth, |
||||
itemsInSlide, |
||||
props, |
||||
}) |
||||
|
||||
coords = children.reduce<Array<ItemCoords>>(( |
||||
acc, |
||||
_, |
||||
i, |
||||
) => { |
||||
let position = 0 |
||||
const previewsChild = acc[i - 1] |
||||
|
||||
content += width + spaceBetween |
||||
partial = listWidth >= content |
||||
|
||||
if (previewsChild) { |
||||
position = width + spaceBetween + previewsChild.position || 0 |
||||
} |
||||
|
||||
acc.push({ position, width }) |
||||
return acc |
||||
}, []) |
||||
|
||||
if (!infinite) { |
||||
if (partial) { |
||||
coords = mapPartialCoords(coords) |
||||
} else { |
||||
const position = content - listWidth |
||||
coords = mapPositionCoords(coords, position) |
||||
} |
||||
} |
||||
|
||||
return { |
||||
content, |
||||
coords, |
||||
partial, |
||||
} |
||||
} |
||||
|
||||
type GetItemWidthArgs = { |
||||
galleryWidth: number, |
||||
itemsInSlide: number, |
||||
props: Props, |
||||
} |
||||
|
||||
export const getItemWidth = ({ |
||||
galleryWidth, |
||||
itemsInSlide, |
||||
props: { spaceBetween = 0 }, |
||||
}: GetItemWidthArgs) => (itemsInSlide > 0 |
||||
? (galleryWidth - spaceBetween * (itemsInSlide - 1)) / itemsInSlide |
||||
: galleryWidth) |
||||
|
||||
export const getElementDimensions = (element: HTMLElement | null) => { |
||||
const { height, width } = element?.getBoundingClientRect() || { height: 0, width: 0 } |
||||
|
||||
return { height, width } |
||||
} |
||||
|
||||
export const getTransitionProperty = (options?: Transition): string => { |
||||
const { animationDuration = 0, animationTimingFunction = 'ease' } = options || {} |
||||
return `transform ${animationDuration}ms ${animationTimingFunction} 0ms` |
||||
} |
||||
|
||||
export const getListElementStyles = ( |
||||
{ translate3d }: Partial<State>, |
||||
currentStyles: CSSProperties, |
||||
): CSSProperties => { |
||||
const transform = `translate3d(${-(translate3d || 0)}px, 0, 0)` |
||||
|
||||
return { ...currentStyles, transform } |
||||
} |
||||
|
||||
export const getItemStyles = (index: number, state: State): CSSProperties => { |
||||
const { transformationSet } = state |
||||
const { width } = transformationSet[index] || {} |
||||
|
||||
return { |
||||
width, |
||||
} |
||||
} |
||||
|
||||
export const getTranslate3dProperty = (nextIndex: number, state: Partial<State>) => { |
||||
let cursor = nextIndex |
||||
|
||||
const { |
||||
infinite, |
||||
itemsInSlide = 0, |
||||
itemsOffset = 0, |
||||
transformationSet = [], |
||||
} = state |
||||
|
||||
if (infinite) { |
||||
cursor = nextIndex + getShiftIndex(itemsInSlide, itemsOffset) |
||||
} |
||||
|
||||
return (transformationSet[cursor] || {}).position || 0 |
||||
} |
||||
|
||||
export const isDisplayedItem = (i = 0, state: State) => { |
||||
const { |
||||
activeIndex, |
||||
infinite, |
||||
itemsInSlide, |
||||
itemsOffset, |
||||
variableSizing, |
||||
} = state |
||||
|
||||
const shiftIndex = getShiftIndex(itemsInSlide, itemsOffset) |
||||
|
||||
if (variableSizing && infinite) { |
||||
return i - shiftIndex === activeIndex + itemsOffset |
||||
} |
||||
|
||||
const index = activeIndex + shiftIndex |
||||
|
||||
if (!infinite) { |
||||
return i >= activeIndex && i < index |
||||
} |
||||
|
||||
return i >= index && i < index + itemsInSlide |
||||
} |
||||
|
||||
export const getItemsInSlide = (itemsCount: number, props: Props) => { |
||||
let itemsInSlide = 1 |
||||
|
||||
const { |
||||
breakpoints = {}, |
||||
infinite, |
||||
variableSizing, |
||||
} = props |
||||
|
||||
if (variableSizing) { |
||||
return infinite ? itemsCount : itemsInSlide |
||||
} |
||||
|
||||
const configKeys = Object.keys(breakpoints) |
||||
|
||||
configKeys.forEach((key) => { |
||||
if (Number(key) <= window.innerWidth) { |
||||
const { items, itemsFit = 'fill' } = breakpoints[key] |
||||
|
||||
itemsInSlide = itemsFit === 'contain' ? items : Math.min(items, itemsCount) |
||||
} |
||||
}) |
||||
|
||||
return itemsInSlide || 1 |
||||
} |
||||
@ -1,4 +0,0 @@ |
||||
export * from './common' |
||||
export * from './elements' |
||||
export * from './math' |
||||
export * from './mappers' |
||||