Compare commits
19 Commits
rfs.inspor
...
develop
| Author | SHA1 | Date |
|---|---|---|
Rakov
|
8896df9f1f | 2 years ago |
|
Rakov
|
10bca448dc | 2 years ago |
|
Rakov
|
7a2423568a | 2 years ago |
|
Rakov
|
ccb265cb2e | 2 years ago |
|
Rakov
|
3152372c39 | 2 years ago |
|
Rakov
|
4e43b9aea8 | 2 years ago |
|
Rakov
|
0c5a1aac4f | 2 years ago |
|
Rakov
|
fc3a3c052c | 2 years ago |
|
Rakov
|
888ac35156 | 2 years ago |
|
Rakov
|
2b9b93ef31 | 2 years ago |
|
Rakov
|
1335d34b07 | 2 years ago |
|
Rakov
|
42623654bb | 2 years ago |
|
Rakov
|
c0d06f8ef9 | 2 years ago |
|
Rakov
|
2dba409aa7 | 2 years ago |
|
Rakov
|
8dce04b35d | 2 years ago |
|
Rakov
|
642e3809dc | 2 years ago |
|
Rakov
|
c41acef4ce | 2 years ago |
|
Rakov
|
af912dca10 | 2 years ago |
Ruslan Khayrullin
|
d06425df94 | 2 years ago |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 793 B |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 802 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 598 B After Width: | Height: | Size: 884 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
@ -1,15 +1,28 @@ |
||||
<!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() |
||||
.catch((err) => { |
||||
console.error('OIDC: silent refresh callback error', err); |
||||
}); |
||||
// обновляем рефреш токен в локалсторадже |
||||
// так как 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); |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
|
||||
</html> |
||||
@ -1,193 +0,0 @@ |
||||
import map from 'lodash/map' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { Icon } from 'features/Icon' |
||||
import { OutsideClick } from 'features/OutsideClick' |
||||
import { BodyBackdrop } from 'features/PageLayout' |
||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
|
||||
import { Fragment } from 'react' |
||||
import { useDateFilter } from '../DateFilter/hooks' |
||||
import { DatePicker } from '../DatePicker' |
||||
import { Tabs } from '../../store/config' |
||||
|
||||
import { |
||||
TabsList, |
||||
Tab, |
||||
TabTitle, |
||||
MonthsMode, |
||||
YearWrapper, |
||||
ArrowButton, |
||||
Arrow, |
||||
MonthModeYear, |
||||
MonthModeWrapper, |
||||
Months, |
||||
Month, |
||||
MonthName, |
||||
FacrWrapper, |
||||
DateWrapper, |
||||
MonthArrow, |
||||
WeekDaysWrapper, |
||||
FacrMonthWrapper, |
||||
WeekDay, |
||||
WeekName, |
||||
WeekNumber, |
||||
FacrDateButton, |
||||
FacrWeek, |
||||
} from '../DateFilter/styled' |
||||
|
||||
export const FacrDateFilter = () => { |
||||
const { |
||||
addAdsViews, |
||||
close, |
||||
date, |
||||
isMonthMode, |
||||
isOpen, |
||||
months, |
||||
onDateChange, |
||||
onNextClick, |
||||
onNextYearClick, |
||||
onPreviousClick, |
||||
onPrevYearClick, |
||||
onWeekDayClick, |
||||
openDatePicker, |
||||
selectedDate, |
||||
selectedMode, |
||||
selectedMonthModeDate, |
||||
setSelectedMode, |
||||
setSelectedMonthModeDate, |
||||
week, |
||||
} = useDateFilter() |
||||
|
||||
const { |
||||
resetFilters, |
||||
} = useHeaderFiltersStore() |
||||
|
||||
return ( |
||||
<FacrWrapper isMonthMode={isMonthMode}> |
||||
<DateWrapper isMonthMode={isMonthMode}> |
||||
<TabsList> |
||||
<Tab |
||||
aria-pressed={selectedMode === Tabs.MONTH} |
||||
onClick={() => setSelectedMode(Tabs.MONTH)} |
||||
> |
||||
<TabTitle> |
||||
<T9n t='month_title' /> |
||||
</TabTitle> |
||||
</Tab> |
||||
<Tab |
||||
aria-pressed={selectedMode === Tabs.WEEK} |
||||
onClick={() => setSelectedMode(Tabs.WEEK)} |
||||
> |
||||
<TabTitle> |
||||
<T9n t='week_title' /> |
||||
</TabTitle> |
||||
</Tab> |
||||
</TabsList> |
||||
{isMonthMode |
||||
? ( |
||||
<YearWrapper> |
||||
<MonthArrow |
||||
aria-label='Previous year' |
||||
onClick={onPrevYearClick} |
||||
> |
||||
<Arrow direction='left' /> |
||||
</MonthArrow> |
||||
<MonthModeYear> |
||||
{selectedMonthModeDate.getFullYear()} |
||||
</MonthModeYear> |
||||
<MonthArrow |
||||
aria-label='Next year' |
||||
onClick={onNextYearClick} |
||||
> |
||||
<Arrow direction='right' /> |
||||
</MonthArrow> |
||||
</YearWrapper> |
||||
) |
||||
: ( |
||||
<FacrMonthWrapper> |
||||
<MonthModeYear onClick={openDatePicker}> |
||||
{date.month} {' '} {date.year} |
||||
</MonthModeYear> |
||||
<FacrDateButton isActive={isOpen} onClick={openDatePicker}> |
||||
<Icon refIcon='Calendar' color='#fff' /> |
||||
</FacrDateButton> |
||||
</FacrMonthWrapper> |
||||
)} |
||||
</DateWrapper> |
||||
|
||||
{isMonthMode |
||||
? ( |
||||
<MonthsMode> |
||||
<MonthModeWrapper isMonthMode={isMonthMode}> |
||||
<Months> |
||||
{ |
||||
map(months, (day) => ( |
||||
<Month |
||||
key={day.name} |
||||
selected={day.date.getMonth() === selectedMonthModeDate.getMonth()} |
||||
onClick={() => setSelectedMonthModeDate(day.date)} |
||||
> |
||||
<MonthName>{day.name}</MonthName> |
||||
</Month> |
||||
)) |
||||
} |
||||
</Months> |
||||
</MonthModeWrapper> |
||||
</MonthsMode> |
||||
) |
||||
: ( |
||||
<WeekDaysWrapper> |
||||
<ArrowButton |
||||
aria-label='Previous week' |
||||
onClick={onPreviousClick} |
||||
> |
||||
<Arrow direction='left' /> |
||||
</ArrowButton> |
||||
<FacrWeek> |
||||
{ |
||||
map(week, (day) => ( |
||||
<WeekDay |
||||
key={day.name} |
||||
selected={day.date.getDate() === selectedDate.getDate()} |
||||
onClick={() => { |
||||
if (day.date.getDate() !== selectedDate.getDate()) { |
||||
addAdsViews() |
||||
onWeekDayClick(day.date) |
||||
} else { |
||||
resetFilters() |
||||
} |
||||
}} |
||||
> |
||||
<WeekName>{day.name.slice(0, 3)}</WeekName> |
||||
<WeekNumber>{day.date.getDate()}</WeekNumber> |
||||
</WeekDay> |
||||
)) |
||||
} |
||||
</FacrWeek> |
||||
<ArrowButton |
||||
aria-label='Next week' |
||||
onClick={onNextClick} |
||||
> |
||||
<Arrow direction='right' /> |
||||
</ArrowButton> |
||||
</WeekDaysWrapper> |
||||
|
||||
)} |
||||
{ |
||||
isOpen && ( |
||||
<Fragment> |
||||
<OutsideClick onClick={close}> |
||||
<DatePicker |
||||
open |
||||
selected={selectedDate} |
||||
onChange={onDateChange} |
||||
/> |
||||
</OutsideClick> |
||||
<BodyBackdrop /> |
||||
</Fragment> |
||||
) |
||||
} |
||||
</FacrWrapper> |
||||
) |
||||
} |
||||
@ -1,3 +1,2 @@ |
||||
export * from './components/DateFilter' |
||||
export * from './components/FacrDateFilter' |
||||
export * from './store' |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
export const MATCH_CARD_WIDTH = 12 |
||||
export const MATCH_CARD_WIDTH = 22 |
||||
|
||||
export const MATCH_CARD_GAP = 20 |
||||
export const MATCH_CARD_GAP = 40 |
||||
|
||||
@ -0,0 +1,58 @@ |
||||
import { atom, selector } from 'recoil' |
||||
|
||||
export interface RawLikeEvent { |
||||
e: number, |
||||
episode: number, |
||||
likes: number, |
||||
s: number, |
||||
} |
||||
|
||||
export interface LikeEvent extends RawLikeEvent { |
||||
iLiked: boolean, |
||||
} |
||||
|
||||
export const myLikesState = atom<Array<RawLikeEvent>>({ |
||||
default: [], |
||||
key: 'myLikesState', |
||||
}) |
||||
|
||||
export const totalLikesState = atom<Array<RawLikeEvent>>({ |
||||
default: [], |
||||
key: 'totalLikesState', |
||||
}) |
||||
|
||||
const transformedLikesState = selector({ |
||||
get: ({ get }) => { |
||||
const totalLikes = get(totalLikesState) |
||||
const myLikes = get(myLikesState) |
||||
|
||||
const likes: Array<LikeEvent> = totalLikes.map((like) => ({ |
||||
...like, |
||||
iLiked: myLikes.findIndex(({ episode }) => episode === like.episode) !== -1, |
||||
})) |
||||
|
||||
return likes |
||||
}, |
||||
key: 'transformedLikesState', |
||||
}) |
||||
|
||||
export const sortTypeState = atom<'asc' | 'desc'>({ |
||||
default: 'asc', |
||||
key: 'sortTypeState', |
||||
}) |
||||
|
||||
export const filterTypeState = atom<'myLikes' | 'totalLikes'>({ |
||||
default: 'totalLikes', |
||||
key: 'filterTypeState', |
||||
}) |
||||
|
||||
export const filteredLikesState = selector<Array<LikeEvent>>({ |
||||
get: ({ get }) => { |
||||
const likes = get(transformedLikesState) |
||||
const filterType = get(filterTypeState) |
||||
|
||||
return filterType === 'totalLikes' ? likes : likes.filter(({ iLiked }) => iLiked) |
||||
}, |
||||
key: 'filteredLikesState', |
||||
}) |
||||
|
||||
@ -0,0 +1,75 @@ |
||||
import { useEffect } from 'react' |
||||
import { useSetRecoilState } from 'recoil' |
||||
|
||||
import { LIKES_API_URL } from 'config' |
||||
|
||||
import { useAuthStore } from 'features/AuthStore' |
||||
import { FULL_MATCH_BOUNDARY } from 'features/MatchPage/components/LiveMatch/helpers' |
||||
|
||||
import { |
||||
usePageParams, |
||||
useVideoBounds, |
||||
useWebSocket, |
||||
} from 'hooks' |
||||
|
||||
import { |
||||
myLikesState, |
||||
totalLikesState, |
||||
type RawLikeEvent, |
||||
} from '../atoms' |
||||
import { useMatchPageStore } from '..' |
||||
|
||||
interface Data { |
||||
data: Array<RawLikeEvent>, |
||||
type: 'user_likes' | 'total_likes', |
||||
} |
||||
|
||||
export const useLikes = () => { |
||||
const setTotalLikes = useSetRecoilState(totalLikesState) |
||||
const setMyLikes = useSetRecoilState(myLikesState) |
||||
|
||||
const { playingProgress } = useMatchPageStore() |
||||
|
||||
const videoBounds = useVideoBounds() |
||||
|
||||
const { profileId, sportType } = usePageParams() |
||||
const { user } = useAuthStore() |
||||
|
||||
useEffect(() => { |
||||
setTotalLikes([]) |
||||
setMyLikes([]) |
||||
}, [setMyLikes, setTotalLikes, profileId, sportType]) |
||||
|
||||
const url = `${LIKES_API_URL}?sport_id=${sportType}&match_id=${profileId}&access_token=${user?.access_token}` |
||||
|
||||
const { sendMessage, webSocketState } = useWebSocket<Data>({ |
||||
allowConnection: Boolean(user), |
||||
autoReconnect: true, |
||||
handlers: { |
||||
onMessage: ({ data = [], type }) => { |
||||
type === 'total_likes' && setTotalLikes(data) |
||||
type === 'user_likes' && setMyLikes(data) |
||||
}, |
||||
}, |
||||
maxReconnectAttempts: 10, |
||||
url, |
||||
}) |
||||
|
||||
const likeClick = () => { |
||||
const startSecond = Number(videoBounds?.find(({ h }) => h === FULL_MATCH_BOUNDARY)?.s || 0) |
||||
|
||||
const message = { |
||||
data: { |
||||
second: playingProgress + startSecond, |
||||
}, |
||||
event: 'like', |
||||
} |
||||
|
||||
sendMessage(message) |
||||
} |
||||
|
||||
return { |
||||
canLike: user && webSocketState === WebSocket.OPEN, |
||||
likeClick, |
||||
} |
||||
} |
||||
@ -0,0 +1,126 @@ |
||||
import { Fragment } from 'react' |
||||
|
||||
import { useVideoBounds } from 'hooks' |
||||
|
||||
import type { LikeEvent as LikeEventType } from 'features/MatchPage/store/atoms' |
||||
import { T9n } from 'features/T9n' |
||||
import { useMatchPageStore } from 'features/MatchPage/store' |
||||
import { Tabs } from 'features/MatchSidePlaylists/config' |
||||
import { FULL_MATCH_BOUNDARY } from 'features/MatchPage/components/LiveMatch/helpers' |
||||
import { PlaylistTypes } from 'features/MatchPage/types' |
||||
|
||||
import { |
||||
Title, |
||||
LikeIcon, |
||||
Time, |
||||
Button, |
||||
LikesCount, |
||||
} from './styled' |
||||
|
||||
type Props = { |
||||
groupTitle: string, |
||||
likeEvent: LikeEventType, |
||||
} |
||||
|
||||
const groupTitlesMap: Record<string, string> = { |
||||
full_time: 'ft', |
||||
half_time: 'ht', |
||||
pre_match: 'pm', |
||||
} |
||||
|
||||
export const LikeEvent = ({ |
||||
groupTitle, |
||||
likeEvent, |
||||
}: Props) => { |
||||
const videoBounds = useVideoBounds() |
||||
const { handlePlaylistClick, selectedPlaylist } = useMatchPageStore() |
||||
|
||||
const firstBound = videoBounds?.find(({ h }) => h === FULL_MATCH_BOUNDARY) |
||||
|
||||
const half = groupTitle.match(/\d/) |
||||
|
||||
const startSecond = half |
||||
? likeEvent.s - Number(videoBounds?.find(({ h }) => h === half[0])?.s || 0) |
||||
: 0 |
||||
const startMinute = Math.ceil(startSecond / 60) |
||||
|
||||
const active = selectedPlaylist.id === likeEvent.episode && selectedPlaylist.tab === Tabs.LIKES |
||||
|
||||
const handleClick = () => { |
||||
handlePlaylistClick({ |
||||
playlist: { |
||||
episodes: [{ |
||||
c: Math.ceil((likeEvent.e - likeEvent.s) / 12), |
||||
e: likeEvent.e - Number(firstBound?.s || 0), |
||||
h: 0, |
||||
s: likeEvent.s - Number(firstBound?.s || 0), |
||||
}], |
||||
id: likeEvent.episode, |
||||
type: PlaylistTypes.EVENT, |
||||
}, |
||||
tab: Tabs.LIKES, |
||||
}) |
||||
} |
||||
|
||||
const getTitle = () => { |
||||
switch (true) { |
||||
case likeEvent.iLiked && likeEvent.likes === 1: |
||||
return ( |
||||
<T9n t='you_liked_this' /> |
||||
) |
||||
|
||||
case likeEvent.iLiked && likeEvent.likes === 2: |
||||
return ( |
||||
<Fragment> |
||||
<T9n t='you_and' /> <LikesCount>1</LikesCount> <T9n t='user_liked_this' /> |
||||
</Fragment> |
||||
) |
||||
|
||||
case likeEvent.iLiked && likeEvent.likes > 2: |
||||
return ( |
||||
<Fragment> |
||||
<T9n t='you_and' /> <LikesCount>{likeEvent.likes - 1}</LikesCount> <T9n t='users_liked_this' /> |
||||
</Fragment> |
||||
) |
||||
|
||||
case !likeEvent.iLiked && likeEvent.likes === 1: |
||||
return ( |
||||
<Fragment> |
||||
<LikesCount>1</LikesCount> <T9n t='user_liked_this' /> |
||||
</Fragment> |
||||
) |
||||
|
||||
case !likeEvent.iLiked && likeEvent.likes > 1: |
||||
return ( |
||||
<Fragment> |
||||
<LikesCount>{likeEvent.likes}</LikesCount> <T9n t='users_liked_this' /> |
||||
</Fragment> |
||||
) |
||||
|
||||
default: return null |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<Button |
||||
onClick={handleClick} |
||||
active={active} |
||||
groupTitle={groupTitle} |
||||
> |
||||
{likeEvent.iLiked && ( |
||||
<LikeIcon |
||||
alt='Like' |
||||
src='/images/like-active-icon.svg' |
||||
/> |
||||
)} |
||||
{groupTitle && ( |
||||
<Fragment> |
||||
{groupTitle in groupTitlesMap |
||||
? <Time><T9n t={groupTitlesMap[groupTitle]} /></Time> |
||||
: <Time>{startMinute}'</Time>} |
||||
</Fragment> |
||||
)} |
||||
<Title>{getTitle()}</Title> |
||||
</Button> |
||||
) |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
import { Button as ButtonBase } from 'features/MatchSidePlaylists/styled' |
||||
|
||||
type ButtonProps = { |
||||
groupTitle: string, |
||||
} |
||||
|
||||
export const Button = styled(ButtonBase)<ButtonProps>` |
||||
justify-content: initial; |
||||
padding-left: ${({ groupTitle }) => (groupTitle ? 77 : 42)}px; |
||||
` |
||||
|
||||
export const Title = styled.div` |
||||
font-size: 12px; |
||||
color: ${({ theme }) => theme.colors.white}; |
||||
` |
||||
|
||||
export const LikeIcon = styled.img` |
||||
position: absolute; |
||||
left: 20px; |
||||
width: 11px; |
||||
height: 11px; |
||||
` |
||||
|
||||
export const Time = styled.span` |
||||
position: absolute; |
||||
right: calc(100% - 67px); |
||||
font-size: 12px; |
||||
color: ${({ theme }) => theme.colors.white}; |
||||
` |
||||
|
||||
export const LikesCount = styled.span` |
||||
font-weight: 600; |
||||
` |
||||
@ -0,0 +1,45 @@ |
||||
import { T9n } from 'features/T9n' |
||||
import type { LikeEvent as LikeEventType } from 'features/MatchPage/store' |
||||
|
||||
import { |
||||
BlockTitle, |
||||
Event, |
||||
TextEvent, |
||||
List, |
||||
} from '../TabEvents/styled' |
||||
import { LikeEvent } from '../LikeEvent' |
||||
|
||||
type Props = { |
||||
groupTitle: string, |
||||
likeEvents: Array<LikeEventType>, |
||||
} |
||||
|
||||
export const LikesList = ({ |
||||
groupTitle, |
||||
likeEvents, |
||||
}: Props) => { |
||||
if (!likeEvents.length) return null |
||||
|
||||
const title = groupTitle.startsWith('half') ? 'half_time' : groupTitle |
||||
|
||||
return ( |
||||
<List> |
||||
{title && ( |
||||
<TextEvent> |
||||
<BlockTitle> |
||||
<T9n t={title} /> |
||||
</BlockTitle> |
||||
</TextEvent> |
||||
)} |
||||
|
||||
{likeEvents.map((likeEvent) => ( |
||||
<Event key={likeEvent.episode}> |
||||
<LikeEvent |
||||
likeEvent={likeEvent} |
||||
groupTitle={title} |
||||
/> |
||||
</Event> |
||||
))} |
||||
</List> |
||||
) |
||||
} |
||||
@ -0,0 +1,235 @@ |
||||
/* eslint-disable sort-keys */ |
||||
import { useEffect } from 'react' |
||||
import { useRecoilState, useRecoilValue } from 'recoil' |
||||
|
||||
import findKey from 'lodash/findKey' |
||||
import orderBy from 'lodash/orderBy' |
||||
import isNumber from 'lodash/isNumber' |
||||
|
||||
import { useVideoBounds } from 'hooks' |
||||
|
||||
import type { MatchInfo } from 'requests' |
||||
import { T9n } from 'features/T9n' |
||||
import { |
||||
filterTypeState, |
||||
filteredLikesState, |
||||
sortTypeState, |
||||
type LikeEvent, |
||||
useMatchPageStore, |
||||
} from 'features/MatchPage/store' |
||||
import { Tabs } from 'features/MatchSidePlaylists/config' |
||||
|
||||
import { LikesList } from '../LikesList' |
||||
import { |
||||
Wrapper, |
||||
Tabs as SortTabs, |
||||
Tab as SortTab, |
||||
ButtonsBlock, |
||||
HalfEvents, |
||||
HalfList, |
||||
} from '../TabEvents/styled' |
||||
import { |
||||
Tab, |
||||
TabList, |
||||
TabTitle, |
||||
} from './styled' |
||||
|
||||
type Props = { |
||||
profile?: MatchInfo, |
||||
} |
||||
|
||||
const groupTitles = [ |
||||
'pre_match', |
||||
'1st_half', |
||||
'half1-2', |
||||
'half1-3', |
||||
'half1-4', |
||||
'half1-5', |
||||
'2nd_half', |
||||
'half2-3', |
||||
'half2-4', |
||||
'half2-5', |
||||
'3rd_half', |
||||
'half3-4', |
||||
'half3-5', |
||||
'4th_half', |
||||
'half4-5', |
||||
'5th_half', |
||||
'full_time', |
||||
] |
||||
|
||||
export const TabLikes = ({ profile: matchProfile }:Props) => { |
||||
const [filterType, setFilterType] = useRecoilState(filterTypeState) |
||||
const [sortType, setSortType] = useRecoilState(sortTypeState) |
||||
const likeEvents = useRecoilValue(filteredLikesState) |
||||
|
||||
const { selectedPlaylist, setEpisodeInfo } = useMatchPageStore() |
||||
|
||||
const videoBounds = useVideoBounds() |
||||
|
||||
const needUseGroups = videoBounds && videoBounds.findIndex(({ h }) => h === '1') !== -1 |
||||
|
||||
const getHalfInterval = (period: number) => { |
||||
const bound = videoBounds?.find(({ h }) => h === String(period)) |
||||
|
||||
return [bound?.s && Number(bound.s), bound?.e && Number(bound.e)] |
||||
} |
||||
|
||||
const getTimeoutInterval = (firstPeriod: number, secondPeriod: number) => { |
||||
const firstBound = videoBounds?.find(({ h }) => h === String(firstPeriod)) |
||||
const secondBound = videoBounds?.find(({ h }) => h === String(secondPeriod)) |
||||
|
||||
return [firstBound?.e && Number(firstBound.e) + 1, secondBound?.s && Number(secondBound.s) - 1] |
||||
} |
||||
|
||||
const getGroupedLikes = () => { |
||||
if (!needUseGroups) return {} |
||||
|
||||
const firstHalf = videoBounds?.find(({ h }) => h === '1') |
||||
const lastHalf = videoBounds?.[videoBounds.length - 1] |
||||
|
||||
const groupedLikes: Record<string, Array<LikeEvent>> = { |
||||
pre_match: [], |
||||
'1st_half': [], |
||||
'half1-2': [], |
||||
'2nd_half': [], |
||||
'half2-3': [], |
||||
'3rd_half': [], |
||||
'half3-4': [], |
||||
'4th_half': [], |
||||
'half4-5': [], |
||||
'5th_half': [], |
||||
full_time: [], |
||||
'half1-3': [], |
||||
'half1-4': [], |
||||
'half1-5': [], |
||||
'half2-4': [], |
||||
'half2-5': [], |
||||
'half3-5': [], |
||||
} |
||||
|
||||
const intervals: Record<string, Array<number | undefined | string>> = { |
||||
pre_match: [0, Number(firstHalf?.s || 0) - 1], |
||||
'1st_half': getHalfInterval(1), |
||||
'half1-2': getTimeoutInterval(1, 2), |
||||
'2nd_half': getHalfInterval(2), |
||||
'half2-3': getTimeoutInterval(2, 3), |
||||
'3rd_half': getHalfInterval(3), |
||||
'half3-4': getTimeoutInterval(3, 4), |
||||
'4th_half': getHalfInterval(4), |
||||
'half4-5': getTimeoutInterval(4, 5), |
||||
'5th_half': getHalfInterval(5), |
||||
full_time: [Number(lastHalf?.e || 0) + 1, 1e5], |
||||
'half3-5': getTimeoutInterval(3, 5), |
||||
'half2-4': getTimeoutInterval(2, 4), |
||||
'half2-5': getTimeoutInterval(2, 5), |
||||
'half1-3': getTimeoutInterval(1, 3), |
||||
'half1-4': getTimeoutInterval(1, 4), |
||||
'half1-5': getTimeoutInterval(1, 5), |
||||
} |
||||
|
||||
likeEvents.forEach((likeEvent) => { |
||||
const half = findKey(intervals, (interval) => { |
||||
if (isNumber(interval[0]) && isNumber(interval[1])) { |
||||
return likeEvent.s >= interval[0] && likeEvent.s <= interval[1] |
||||
} |
||||
|
||||
if (isNumber(interval[0]) |
||||
&& !interval[1] |
||||
&& likeEvent.s >= interval[0] |
||||
&& matchProfile?.live |
||||
) return true |
||||
|
||||
return false |
||||
}) |
||||
|
||||
half && groupedLikes[half].push(likeEvent) |
||||
}) |
||||
|
||||
Object.keys(groupedLikes).forEach((key) => { |
||||
groupedLikes[key] = orderBy( |
||||
groupedLikes[key], |
||||
's', |
||||
sortType, |
||||
) |
||||
}) |
||||
|
||||
return groupedLikes |
||||
} |
||||
|
||||
const groupedLikes = getGroupedLikes() |
||||
|
||||
const likesEntries = needUseGroups |
||||
? orderBy( |
||||
Object.entries(groupedLikes), |
||||
([title]) => groupTitles.findIndex((key) => key === title), |
||||
sortType, |
||||
) |
||||
: [] |
||||
|
||||
const sortedLikes = needUseGroups ? [] : orderBy( |
||||
likeEvents, |
||||
's', |
||||
sortType, |
||||
) |
||||
|
||||
useEffect(() => { |
||||
selectedPlaylist.tab === Tabs.LIKES && setEpisodeInfo({}) |
||||
}, [setEpisodeInfo, selectedPlaylist.tab]) |
||||
|
||||
return ( |
||||
<Wrapper> |
||||
<ButtonsBlock> |
||||
<SortTabs> |
||||
<T9n t={sortType === 'asc' ? 'from_start_match' : 'from_end_match'} /> |
||||
<SortTab |
||||
active={sortType === 'asc'} |
||||
onClick={() => setSortType('asc')} |
||||
id='match_likes_sort_start' |
||||
/> |
||||
<SortTab |
||||
active={sortType === 'desc'} |
||||
onClick={() => setSortType('desc')} |
||||
id='match_likes_sort_final' |
||||
/> |
||||
</SortTabs> |
||||
<TabList> |
||||
<Tab |
||||
aria-pressed={filterType === 'totalLikes'} |
||||
onClick={() => setFilterType('totalLikes')} |
||||
> |
||||
<TabTitle t='total_likes' /> |
||||
</Tab> |
||||
<Tab |
||||
aria-pressed={filterType === 'myLikes'} |
||||
onClick={() => setFilterType('myLikes')} |
||||
> |
||||
<TabTitle t='my_likes' /> |
||||
</Tab> |
||||
</TabList> |
||||
</ButtonsBlock> |
||||
{needUseGroups ? ( |
||||
<HalfList> |
||||
{likesEntries.map(([groupTitle, likesInGroup]) => ( |
||||
<HalfEvents key={groupTitle}> |
||||
<LikesList |
||||
groupTitle={groupTitle} |
||||
likeEvents={likesInGroup} |
||||
/> |
||||
</HalfEvents> |
||||
))} |
||||
</HalfList> |
||||
) |
||||
: ( |
||||
<HalfList> |
||||
<HalfEvents> |
||||
<LikesList |
||||
groupTitle='' |
||||
likeEvents={sortedLikes} |
||||
/> |
||||
</HalfEvents> |
||||
</HalfList> |
||||
)} |
||||
</Wrapper> |
||||
) |
||||
} |
||||
@ -0,0 +1,40 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
|
||||
export const TabList = styled.div.attrs({ role: 'tablist' })` |
||||
display: flex; |
||||
gap: 12px; |
||||
|
||||
${isMobileDevice && css` |
||||
padding-right: 33px; |
||||
`}
|
||||
` |
||||
|
||||
export const TabTitle = styled(T9n)` |
||||
position: relative; |
||||
color: rgba(255, 255, 255, 0.5); |
||||
` |
||||
|
||||
export const Tab = styled.button.attrs({ role: 'tab' })` |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0 0 5px; |
||||
font-size: 12px; |
||||
cursor: pointer; |
||||
border: none; |
||||
background: none; |
||||
border-bottom: 2px solid transparent; |
||||
|
||||
&[aria-pressed="true"] { |
||||
border-color: ${({ theme }) => theme.colors.white}; |
||||
|
||||
${TabTitle} { |
||||
color: ${({ theme }) => theme.colors.white}; |
||||
} |
||||
} |
||||
` |
||||
@ -1,53 +1,94 @@ |
||||
import styled from 'styled-components/macro' |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { devices } from 'config/devices' |
||||
|
||||
import { CardWrapper } from '../MatchCard/styled' |
||||
import { CardWrapper, CardWrapperOuter } from '../MatchCard/styled' |
||||
|
||||
export const Wrapper = styled.div` |
||||
position: relative; |
||||
margin-bottom: 16px; |
||||
overflow: hidden; |
||||
padding-right: 5px; |
||||
` |
||||
|
||||
export const Slides = styled.ul` |
||||
export const Slides = styled.ul<{ |
||||
size?: number, |
||||
}>` |
||||
display: flex; |
||||
scroll-behavior: smooth; |
||||
overflow-x: auto; |
||||
gap: 0.9rem; |
||||
padding: 10px 10px 10px 7px; |
||||
|
||||
&::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
scrollbar-width: none;
|
||||
|
||||
${CardWrapper} { |
||||
width: 283px; |
||||
${CardWrapperOuter} { |
||||
padding-top: 0; |
||||
} |
||||
|
||||
@media ${devices.laptop} { |
||||
min-width: auto; |
||||
width: 279px; |
||||
${CardWrapper} { |
||||
position: relative; |
||||
height: ${({ size }) => (size ? `${size}px` : '12.9rem')}; |
||||
width: ${({ size }) => (size ? `${size}px` : '12.9rem')}; |
||||
transition: scale 0.2s; |
||||
|
||||
&:hover { |
||||
scale: 1.04; |
||||
} |
||||
} |
||||
` |
||||
|
||||
@media ${devices.mobile} { |
||||
flex-direction: column; |
||||
type ArrowProps = { |
||||
direction: 'left' | 'right', |
||||
disabled?: boolean, |
||||
} |
||||
|
||||
${CardWrapper} { |
||||
width: 100%; |
||||
} |
||||
} |
||||
export const Arrow = styled.span<ArrowProps>` |
||||
width: 1rem; |
||||
height: 1rem; |
||||
position: absolute; |
||||
border-left: 0.25rem solid #fff; |
||||
border-bottom: 0.25rem solid #fff; |
||||
top: 50%; |
||||
left: 50%; |
||||
border-radius: 3px; |
||||
|
||||
${({ direction }) => ( |
||||
direction === 'left' |
||||
? 'transform: translate(-50%, -50%) rotate(45deg);' |
||||
: 'transform: translate(-50%, -50%) rotate(225deg);' |
||||
)} |
||||
|
||||
${({ disabled }) => (disabled ? css` |
||||
border-left: 0.25rem solid gray; |
||||
border-bottom: 0.25rem solid gray; |
||||
` : '')}
|
||||
` |
||||
|
||||
export const Arrow = styled.div<{ type: 'arrowLeft' | 'arrowRight' }>` |
||||
export const ArrowButton = styled.button<ArrowProps>` |
||||
border: none; |
||||
outline: none; |
||||
padding: 0; |
||||
background-color: transparent; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
width: 2.28rem; |
||||
height: 2.28rem; |
||||
z-index: 3; |
||||
top: 50%; |
||||
left: ${({ type }) => (type === 'arrowLeft' ? '10px' : 'calc(100% - 10px)')}; |
||||
width: 40px; |
||||
height: 40px; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
background-image: url(${({ type }) => (type === 'arrowLeft' |
||||
? '/images/slideLeft.svg' |
||||
: '/images/slideRight.svg')}); |
||||
cursor: pointer; |
||||
transform: translate(-50%, -50%); |
||||
z-index: 1; |
||||
left: ${({ direction }) => (direction === 'left' ? '1.6rem' : 'calc(100% - 2.3rem)')}; |
||||
|
||||
&:hover { |
||||
${({ direction, disabled }) => (!disabled ? css` |
||||
width: 3rem; |
||||
height: 3rem; |
||||
left: ${direction === 'left' ? '2rem' : 'calc(100% - 2.8rem)'}; |
||||
|
||||
${Arrow} { |
||||
width: 1.5rem; |
||||
height: 1.5rem; |
||||
} |
||||
` : '')}
|
||||
} |
||||
` |
||||
|
||||
@ -0,0 +1,168 @@ |
||||
/* eslint-disable no-param-reassign */ |
||||
import { |
||||
useCallback, |
||||
useEffect, |
||||
useMemo, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import { useQuery } from 'react-query' |
||||
import { querieKeys, PAGES } from 'config' |
||||
|
||||
import { useRouteMatch } from 'react-router-dom' |
||||
|
||||
import { |
||||
MatchDto, |
||||
MatchesTimeline, |
||||
TimelineTournamentDto, |
||||
getLiveScores, |
||||
getTimelineMatches, |
||||
} from 'requests' |
||||
|
||||
import { Match, prepareMatches } from 'helpers' |
||||
|
||||
import { useAuthStore } from 'features/AuthStore' |
||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
import { useMatchSwitchesStore } from 'features/MatchSwitches' |
||||
|
||||
export type TimelineTournamentList = Array<Omit<TimelineTournamentDto, 'matches'> & { |
||||
matches: Array<Match>, |
||||
}> |
||||
|
||||
export const useTimeline = () => { |
||||
const isHomePage = useRouteMatch(PAGES.home)?.isExact |
||||
|
||||
const { user } = useAuthStore() |
||||
|
||||
const { |
||||
compareSport, |
||||
selectedMode, |
||||
selectedSport, |
||||
setSportIds, |
||||
} = useHeaderFiltersStore() |
||||
const { isScoreHidden } = useMatchSwitchesStore() |
||||
|
||||
const [isTimelineFetching, setIsTimelineFetching] = useState(true) |
||||
const [onlineUpcomingMatches, setOnlineUpcomingMatches] = useState<Array<Match>>([]) |
||||
const [tournamentList, setTournamentList] = useState<TimelineTournamentList>([]) |
||||
const [timeline, setTimeline] = useState<MatchesTimeline>() |
||||
|
||||
const prepareMatchesDto = useCallback((matches: Array<MatchDto>) => prepareMatches( |
||||
matches, |
||||
user, |
||||
false, |
||||
), [user]) |
||||
|
||||
useEffect(() => { |
||||
(async () => { |
||||
setIsTimelineFetching(true) |
||||
try { |
||||
const timelineFetched = await getTimelineMatches() |
||||
setTimeline(timelineFetched) |
||||
const convertedMatches = timelineFetched.online_upcoming[0].matches |
||||
const preparedMatches = prepareMatchesDto(convertedMatches) |
||||
setOnlineUpcomingMatches(preparedMatches) |
||||
|
||||
setTournamentList([ |
||||
...timelineFetched.favorite.map((item) => ({ |
||||
...item, |
||||
matches: prepareMatchesDto(item.matches), |
||||
})), |
||||
...timelineFetched.promo.map((item) => ({ |
||||
...item, |
||||
matches: prepareMatchesDto(item.matches), |
||||
})), |
||||
...timelineFetched.others.map((item) => ({ |
||||
...item, |
||||
matches: prepareMatchesDto(item.matches), |
||||
})), |
||||
]) |
||||
} catch (error) { /* empty */ } finally { |
||||
setIsTimelineFetching(false) |
||||
} |
||||
})() |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []) |
||||
|
||||
useQuery({ |
||||
queryFn: async () => { |
||||
let isLiveMatch = false |
||||
if (timeline) { |
||||
for (const [, value] of Object.entries(timeline)) { |
||||
if (isLiveMatch) break |
||||
// eslint-disable-next-line no-loop-func
|
||||
value.forEach((t) => { |
||||
const liveMatch = t.matches.find((match) => match.live) |
||||
if (liveMatch) { |
||||
isLiveMatch = true |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
if (!isScoreHidden && isLiveMatch) { |
||||
const scores = await getLiveScores() |
||||
tournamentList.forEach((tournament) => { |
||||
tournament.matches.forEach((match) => { |
||||
const score = scores.find((s) => ( |
||||
s.match_id === match.id && s.sport_id === match.sportType |
||||
)) |
||||
if (score) { |
||||
match.team1.score = score?.team1.score ?? match.team1.score |
||||
match.team1.penalty_score = score.team1.penalty_score ?? match.team1.penalty_score |
||||
match.team2.score = score?.team2.score ?? match.team2.score |
||||
match.team2.penalty_score = score.team2.penalty_score ?? match.team2.penalty_score |
||||
} |
||||
}) |
||||
}) |
||||
onlineUpcomingMatches.forEach((upcomingMatch) => { |
||||
const score = scores.find((s) => ( |
||||
s.match_id === upcomingMatch.id && s.sport_id === upcomingMatch.sportType |
||||
)) |
||||
if (score) { |
||||
upcomingMatch.team1.score = score?.team1.score ?? upcomingMatch.team1.score |
||||
upcomingMatch.team1.penalty_score = score.team1.penalty_score |
||||
?? upcomingMatch.team1.penalty_score |
||||
upcomingMatch.team2.score = score?.team2.score ?? upcomingMatch.team2.score |
||||
upcomingMatch.team2.penalty_score = score.team2.penalty_score |
||||
?? upcomingMatch.team2.penalty_score |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
queryKey: querieKeys.liveMatchScores, |
||||
refetchInterval: 30000, |
||||
}) |
||||
|
||||
const filteredTournamentsBySport = useMemo(() => { |
||||
if (isHomePage && selectedSport) { |
||||
return tournamentList.filter((t) => compareSport(t.sport_id, selectedSport)) |
||||
} |
||||
|
||||
return tournamentList |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tournamentList, selectedSport]) |
||||
|
||||
const filteredOnlineUpcomingBySport = useMemo(() => { |
||||
if (isHomePage && selectedSport) { |
||||
return onlineUpcomingMatches.filter((m) => compareSport(m.sportType, selectedSport)) |
||||
} |
||||
|
||||
return onlineUpcomingMatches |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [onlineUpcomingMatches, selectedSport]) |
||||
|
||||
useEffect(() => { |
||||
if (!isHomePage) return |
||||
|
||||
const sportIds = Array.from(new Set(tournamentList.map((t) => t.sport_id))) |
||||
setSportIds(sportIds) |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tournamentList, selectedMode]) |
||||
|
||||
return { |
||||
isTimelineFetching, |
||||
onlineUpcomingMatches: filteredOnlineUpcomingBySport, |
||||
tournamentList: filteredTournamentsBySport, |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,151 @@ |
||||
import { |
||||
useCallback, |
||||
useEffect, |
||||
useLayoutEffect, |
||||
useRef, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import isEmpty from 'lodash/isEmpty' |
||||
|
||||
import { MatchesSlider } from 'features/MatchesSlider' |
||||
import { TimelineTournamentList, useTimeline } from 'features/MatchesTimeline/hooks' |
||||
import { InfiniteScroll } from 'features/InfiniteScroll' |
||||
import { T9n } from 'features/T9n' |
||||
import { TournamentSubtitle } from 'features/TournamentSubtitle' |
||||
|
||||
import { ProfileTypes } from 'config' |
||||
|
||||
import { |
||||
Content, |
||||
Tournament, |
||||
RowWrapper, |
||||
Wrapper, |
||||
TournamentLogo, |
||||
Loading, |
||||
TournamentSubtitleWrapper, |
||||
} from './styled' |
||||
|
||||
const TOURNAMENT_LIMIT = 10 |
||||
const MATCH_COUNT = 6 |
||||
const PADDING = 30 |
||||
const GAP_COUNT = 5 |
||||
const SLIDER_ITEM_GAP = 0.9 // rem
|
||||
|
||||
export const MatchesTimeline = () => { |
||||
const { |
||||
isTimelineFetching, |
||||
onlineUpcomingMatches, |
||||
tournamentList, |
||||
} = useTimeline() |
||||
|
||||
const [tournaments, setTournaments] = useState<TimelineTournamentList>([]) |
||||
|
||||
const pageRef = useRef(0) |
||||
const isLastPageRef = useRef(false) |
||||
const wrapperRef = useRef<HTMLDivElement>(null) |
||||
|
||||
const [cardSize, setCardSize] = useState(0) |
||||
|
||||
// вычисляем размеры плитки
|
||||
useLayoutEffect(() => { |
||||
const offsetWidth = wrapperRef.current?.offsetWidth |
||||
const ulItemGapFromRem = SLIDER_ITEM_GAP * parseFloat( |
||||
getComputedStyle(document.documentElement).fontSize, |
||||
) |
||||
|
||||
if (offsetWidth) { |
||||
const size = Math.round( |
||||
((offsetWidth - (ulItemGapFromRem * GAP_COUNT) - PADDING) / MATCH_COUNT), |
||||
) |
||||
|
||||
setCardSize(size) |
||||
} |
||||
}, []) |
||||
|
||||
const getTournaments = useCallback(() => tournamentList.slice( |
||||
pageRef.current * TOURNAMENT_LIMIT, |
||||
pageRef.current * TOURNAMENT_LIMIT + TOURNAMENT_LIMIT, |
||||
), [tournamentList]) |
||||
|
||||
const getMoreTournaments = () => { |
||||
if (isLastPageRef.current) return |
||||
const res = getTournaments() |
||||
|
||||
if (res.length) { |
||||
setTournaments((prev) => ([ |
||||
...prev, |
||||
...res, |
||||
])) |
||||
pageRef.current++ |
||||
} else { |
||||
isLastPageRef.current = true |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (tournamentList.length) { |
||||
pageRef.current = 0 |
||||
isLastPageRef.current = false |
||||
tournamentList.length > 0 && setTournaments(getTournaments()) |
||||
pageRef.current = 1 |
||||
} |
||||
}, [getTournaments, tournamentList]) |
||||
|
||||
return ( |
||||
<InfiniteScroll fullPageScroll onFetchMore={getMoreTournaments}> |
||||
<Wrapper ref={wrapperRef}> |
||||
{isTimelineFetching && <Loading><T9n t='loading' />...</Loading>} |
||||
{(!isEmpty(onlineUpcomingMatches)) && ( |
||||
<RowWrapper> |
||||
<Content> |
||||
<Tournament |
||||
size={cardSize} |
||||
isOnlineUpcoming |
||||
> |
||||
LIVE & UPCOMING |
||||
</Tournament> |
||||
<MatchesSlider |
||||
cardSize={cardSize} |
||||
matches={onlineUpcomingMatches} |
||||
/> |
||||
</Content> |
||||
</RowWrapper> |
||||
)} |
||||
{tournaments.map(({ |
||||
matches, |
||||
sport_id, |
||||
tournament, |
||||
tournament_id, |
||||
}) => ( |
||||
<RowWrapper key={`${tournament_id}_${sport_id}`}> |
||||
<TournamentSubtitleWrapper> |
||||
<TournamentSubtitle |
||||
sportInfo={matches[0].sportInfo} |
||||
countryId={matches[0].countryId} |
||||
sportType={sport_id} |
||||
tournament={tournament} |
||||
/> |
||||
</TournamentSubtitleWrapper> |
||||
<Content> |
||||
<Tournament |
||||
size={cardSize} |
||||
gradientColor={tournament.color} |
||||
> |
||||
<TournamentLogo |
||||
id={tournament_id} |
||||
profileType={ProfileTypes.TOURNAMENTS} |
||||
sportType={sport_id} |
||||
/> |
||||
</Tournament> |
||||
<MatchesSlider |
||||
cardSize={cardSize} |
||||
matches={matches} |
||||
/> |
||||
</Content> |
||||
</RowWrapper> |
||||
))} |
||||
</Wrapper> |
||||
</InfiniteScroll> |
||||
) |
||||
} |
||||
@ -0,0 +1,72 @@ |
||||
import { ProfileLogo } from 'features/ProfileLogo' |
||||
import { StyledLink } from 'features/TournamentSubtitle/styled' |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
export const Wrapper = styled.div` |
||||
& > * { |
||||
margin-bottom: 20px; |
||||
} |
||||
` |
||||
|
||||
export const RowWrapper = styled.div`` |
||||
|
||||
export const Content = styled.div` |
||||
display: flex; |
||||
` |
||||
|
||||
export const Tournament = styled.div<{ |
||||
gradientColor?: string, |
||||
isOnlineUpcoming?: boolean, |
||||
size?: number, |
||||
}>` |
||||
${({ gradientColor }) => (gradientColor |
||||
? css`background: linear-gradient(187deg, ${gradientColor} -4.49%, #000000 68.29%), #000000;` |
||||
: css`background-color: ${({ theme }) => theme.colors.matchCardBackground};`)} |
||||
|
||||
// в будущем от этого нужно будет избавиться
|
||||
${({ isOnlineUpcoming }) => isOnlineUpcoming && css` |
||||
background: linear-gradient(270deg, #C00 0%, #6A2131 100%); |
||||
`}
|
||||
|
||||
position: relative; |
||||
height: ${({ size }) => (size ? `${size}px` : '12.9rem')}; |
||||
width: ${({ size }) => (size ? `${size}px` : '12.9rem')}; |
||||
flex-shrink: 0; |
||||
margin: 10px 0.93rem 10px 0px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 3px; |
||||
font-size: 1.9rem; |
||||
font-weight: 700; |
||||
color: #FFFFFF; |
||||
text-align: start; |
||||
padding: 10px; |
||||
` |
||||
|
||||
export const TournamentLogo = styled(ProfileLogo)` |
||||
position: absolute; |
||||
padding: 20px; |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: scale-down; |
||||
` |
||||
|
||||
export const Loading = styled.div` |
||||
height: 30px; |
||||
margin-top: 20px; |
||||
font-size: 24px; |
||||
color: #fff; |
||||
text-align: center; |
||||
` |
||||
|
||||
export const TournamentSubtitleWrapper = styled.div` |
||||
margin-bottom: 10px; |
||||
|
||||
${StyledLink} { |
||||
font-weight: 700; |
||||
color: #FFFFFF; |
||||
font-size: 1rem; |
||||
text-transform: uppercase; |
||||
} |
||||
` |
||||
@ -0,0 +1,164 @@ |
||||
import { |
||||
forwardRef, |
||||
memo, |
||||
useEffect, |
||||
useRef, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
|
||||
import { defaultTheme } from 'features/Theme/config' |
||||
|
||||
import { |
||||
Button, |
||||
Svg, |
||||
Path, |
||||
} from './styled' |
||||
|
||||
const COLOR_PAIRS = [ |
||||
['#FF0000', '#FFDF00'], |
||||
['#70FF00', '#0001FF'], |
||||
['#CD00FF', defaultTheme.colors.white], |
||||
[defaultTheme.colors.white, defaultTheme.colors.white], |
||||
[defaultTheme.colors.white, defaultTheme.colors.white], |
||||
[defaultTheme.colors.white, defaultTheme.colors.white], |
||||
['#FF0000', '#FFDF00'], |
||||
['#70FF00', '#0001FF'], |
||||
['#CD00FF', defaultTheme.colors.white], |
||||
[], |
||||
] |
||||
|
||||
const OFFSET_CHANGE_SPEED = isMobileDevice ? 20 : 5 |
||||
|
||||
const ANIMATION_INTERVAL = 5000 |
||||
|
||||
const FREEZE_TIME = 6000 |
||||
|
||||
const PARTICLES_GENERATION_TIME = 1500 |
||||
|
||||
type Props = { |
||||
onClick: () => void, |
||||
setGenerateParticles: (state: boolean) => void, |
||||
} |
||||
|
||||
const LikeButtonFC = forwardRef<HTMLButtonElement, Props>(( |
||||
{ |
||||
onClick, |
||||
setGenerateParticles, |
||||
}, |
||||
ref, |
||||
) => { |
||||
const stop1Ref = useRef<SVGStopElement>(null) |
||||
const stop2Ref = useRef<SVGStopElement>(null) |
||||
|
||||
const [canAnimate, setCanAnimate] = useState(false) |
||||
const [isDisabled, setIsDisabled] = useState(false) |
||||
const freezeTimeoutIdRef = useRef<NodeJS.Timeout | null>(null) |
||||
const generateTimeoutIdRef = useRef<NodeJS.Timeout | null>(null) |
||||
|
||||
const startGenerateParticles = () => setGenerateParticles(true) |
||||
|
||||
const stopGenerateParticles = () => setGenerateParticles(false) |
||||
|
||||
const handleClick = () => { |
||||
onClick() |
||||
setIsDisabled(true) |
||||
startGenerateParticles() |
||||
|
||||
freezeTimeoutIdRef.current = setTimeout(() => setIsDisabled(false), FREEZE_TIME) |
||||
generateTimeoutIdRef.current = setTimeout(stopGenerateParticles, PARTICLES_GENERATION_TIME) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
let requestAnimationId: number |
||||
let timeoutId: NodeJS.Timeout |
||||
let index = 0 |
||||
let offset = 100 |
||||
|
||||
const animate = () => { |
||||
if (!stop1Ref.current || !stop2Ref.current) return |
||||
|
||||
stop1Ref.current.setAttribute('offset', `${offset}%`) |
||||
stop2Ref.current.setAttribute('offset', `${offset}%`) |
||||
stop1Ref.current.setAttribute('stop-color', `${COLOR_PAIRS[index][0]}`) |
||||
stop2Ref.current.setAttribute('stop-color', `${COLOR_PAIRS[index][1]}`) |
||||
|
||||
offset = Math.max(offset - OFFSET_CHANGE_SPEED, 0) |
||||
|
||||
if (offset === 0) { |
||||
offset = 100 |
||||
index = index + 1 <= COLOR_PAIRS.length - 1 |
||||
? index + 1 |
||||
: 0 |
||||
} |
||||
|
||||
if (index === COLOR_PAIRS.length - 1 && offset === 100) { |
||||
requestAnimationId && cancelAnimationFrame(requestAnimationId) |
||||
setCanAnimate(false) |
||||
index = 0 |
||||
|
||||
timeoutId = setTimeout(() => { |
||||
requestAnimationId = requestAnimationFrame(animate) |
||||
}, ANIMATION_INTERVAL) |
||||
} else { |
||||
requestAnimationId = requestAnimationFrame(animate) |
||||
setCanAnimate(true) |
||||
} |
||||
} |
||||
|
||||
timeoutId = setTimeout(animate, ANIMATION_INTERVAL) |
||||
|
||||
return () => { |
||||
timeoutId && clearTimeout(timeoutId) |
||||
requestAnimationId && cancelAnimationFrame(requestAnimationId) |
||||
} |
||||
}, []) |
||||
|
||||
useEffect(() => () => { |
||||
freezeTimeoutIdRef.current && clearTimeout(freezeTimeoutIdRef.current) |
||||
generateTimeoutIdRef.current && clearTimeout(generateTimeoutIdRef.current) |
||||
}, []) |
||||
|
||||
return ( |
||||
<Button |
||||
disabled={isDisabled} |
||||
canAnimate={canAnimate} |
||||
ref={ref} |
||||
aria-label='Like this moment' |
||||
onClick={handleClick} |
||||
> |
||||
<Svg |
||||
width='30' |
||||
height='30' |
||||
viewBox='0 0 30 30' |
||||
fill='none' |
||||
> |
||||
<defs> |
||||
<linearGradient id='gradient'> |
||||
<stop |
||||
ref={stop1Ref} |
||||
offset='50%' |
||||
stopColor={defaultTheme.colors.white} |
||||
/> |
||||
<stop |
||||
ref={stop2Ref} |
||||
offset='50%' |
||||
stopColor={defaultTheme.colors.white} |
||||
/> |
||||
</linearGradient> |
||||
</defs> |
||||
|
||||
<g> |
||||
<Path |
||||
fill={canAnimate ? 'url(#gradient)' : defaultTheme.colors.white} |
||||
d='M17.0939 0.686035C15.6852 0.686035 16.1589 3.64594 16.1589 3.64594C16.1589 3.64594 13.1482 11.8087 10.2685 13.9842C9.65136 14.6215 9.26489 15.3262 9.02179 15.9023C8.96569 16.0432 8.91583 16.178 8.87219 16.3006C8.67896 16.6867 8.26757 17.2811 7.38867 17.802L10.2685 30.1135C10.2685 30.1135 14.7252 30.6834 19.1945 30.5915C20.9835 30.7324 22.8784 30.7447 24.3868 30.426C29.5106 29.3536 28.2265 25.8422 28.2265 25.8422C30.9879 23.8015 29.4171 21.2522 29.4171 21.2522C31.873 18.7335 29.4607 16.6193 29.4607 16.6193C29.4607 16.6193 30.7884 14.5847 29.0743 13.0466C26.9363 11.1223 21.1331 12.4031 21.1331 12.4031C20.7279 12.4705 20.2978 12.5563 19.8365 12.6666C19.8365 12.6666 17.8294 13.5858 19.8365 7.59861C21.8499 1.61139 18.5026 0.686035 17.0939 0.686035ZM8.19893 29.2249L6.01728 19.0338C5.89261 18.4516 5.29422 17.9736 4.68959 17.9736H0.525765L0.519531 30.279H7.32003C7.9309 30.2851 8.32359 29.8071 8.19893 29.2249Z' |
||||
/> |
||||
</g> |
||||
</Svg> |
||||
</Button> |
||||
) |
||||
}) |
||||
|
||||
export const LikeButton = memo(LikeButtonFC) |
||||
|
||||
@ -0,0 +1,78 @@ |
||||
import styled, { css, keyframes } from 'styled-components/macro' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
|
||||
const wiggle = keyframes` |
||||
0%, 7% { |
||||
transform: rotateZ(0); |
||||
} |
||||
15% { |
||||
transform: rotateZ(-15deg); |
||||
} |
||||
20% { |
||||
transform: rotateZ(10deg); |
||||
} |
||||
25% { |
||||
transform: rotateZ(-10deg); |
||||
} |
||||
30% { |
||||
transform: rotateZ(6deg); |
||||
} |
||||
35% { |
||||
transform: rotateZ(-4deg); |
||||
} |
||||
40%, 100% { |
||||
transform: rotateZ(0); |
||||
} |
||||
` |
||||
|
||||
export const Svg = styled.svg`` |
||||
|
||||
export const Path = styled.path`` |
||||
|
||||
export const Button = styled.button<{ canAnimate?: boolean }>` |
||||
position: absolute; |
||||
bottom: 25px; |
||||
right: 22px; |
||||
width: 30px; |
||||
height: 30px; |
||||
padding: 0; |
||||
border: none; |
||||
background: none; |
||||
cursor: pointer; |
||||
|
||||
${({ canAnimate }) => (canAnimate |
||||
? css` |
||||
animation: ${wiggle} 1s linear infinite; |
||||
` |
||||
: '')}; |
||||
|
||||
${isMobileDevice && css` |
||||
width: 25px; |
||||
height: 25px; |
||||
bottom: 40px; |
||||
|
||||
${Svg} { |
||||
width: 25px; |
||||
height: 25px; |
||||
} |
||||
`}
|
||||
|
||||
:disabled { |
||||
opacity: 0.5; |
||||
cursor: initial; |
||||
animation: none; |
||||
|
||||
${Path} { |
||||
fill: ${({ theme }) => theme.colors.white}; |
||||
} |
||||
} |
||||
|
||||
:hover { |
||||
animation: none; |
||||
|
||||
${Path} { |
||||
fill: ${({ theme }) => theme.colors.white}; |
||||
} |
||||
} |
||||
` |
||||
@ -0,0 +1,138 @@ |
||||
import { |
||||
useEffect, |
||||
useRef, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
|
||||
type Particle = { |
||||
height: number, // Высота частицы
|
||||
image: HTMLImageElement, // Изображение частицы
|
||||
life: number, // Время жизни частицы
|
||||
opacity: number, // Непрозрачность частицы,
|
||||
vx: number, // Горизонтальная скорость частицы
|
||||
vy: number, // Вертикальная скорость частицы
|
||||
width: number, // Ширина частицы
|
||||
x: number, // Cмещение по горизонтали
|
||||
y: number, // Смещение по вертикали
|
||||
} |
||||
|
||||
const BIRTH_RATE = 100 |
||||
|
||||
const PARTICLES_COUNT = isMobileDevice ? 1 : 2 |
||||
|
||||
export const useParticles = () => { |
||||
const canvasRef = useRef<HTMLCanvasElement>(null) |
||||
const likeButtonRef = useRef<HTMLButtonElement>(null) |
||||
const requestAnimationIdRef = useRef<number | null>(null) |
||||
const [generateParticles, setGenerateParticles] = useState(false) |
||||
|
||||
useEffect(() => { |
||||
const canvas = canvasRef.current |
||||
const likeButton = likeButtonRef.current |
||||
|
||||
if (!canvas || !likeButton) return () => {} |
||||
|
||||
let intervalId: NodeJS.Timeout |
||||
|
||||
const particleImage = new Image() |
||||
particleImage.src = '/images/like-active-icon.svg' |
||||
|
||||
const ctx = canvas.getContext('2d') |
||||
|
||||
if (!ctx) return () => {} |
||||
|
||||
const canvasRect = canvas.getBoundingClientRect() |
||||
const likeButtonRect = likeButton.getBoundingClientRect() |
||||
|
||||
// Массив для хранения частиц
|
||||
const particles: Array<Particle> = [] |
||||
|
||||
// Начальные координаты вылета частиц
|
||||
const startX = (likeButtonRect.left - canvasRect.left) + likeButtonRect.width / 2 |
||||
const startY = likeButtonRect.top - canvasRect.top |
||||
|
||||
// Функция для создания частиц
|
||||
const createParticles = (count: number) => { |
||||
for (let i = 0; i < count; i++) { |
||||
const particleSize = Math.random() * (isMobileDevice ? 30 : 40) |
||||
|
||||
const particle: Particle = { |
||||
height: particleSize, |
||||
image: particleImage, |
||||
life: 500, |
||||
opacity: 0.5, |
||||
vx: 0, |
||||
vy: -(Math.random() * 2 + 2), |
||||
width: particleSize, |
||||
x: startX - particleSize / 2 + Math.random() * 40 - 20, |
||||
y: startY, |
||||
} |
||||
|
||||
particles.push(particle) |
||||
} |
||||
} |
||||
|
||||
// Функция для обновления частиц
|
||||
const updateParticles = () => { |
||||
ctx.clearRect( |
||||
0, |
||||
0, |
||||
canvas.width, |
||||
canvas.height, |
||||
) |
||||
|
||||
for (let i = 0; i < particles.length; i++) { |
||||
const particle = particles[i] |
||||
|
||||
particle.life-- // уменьшаем время жизни частицы
|
||||
|
||||
// Удаляем частицу из массива, если её время жизни истекло
|
||||
if (particle.life <= 0) { |
||||
particles.splice(i, 1) |
||||
i-- |
||||
} else { |
||||
particle.x += particle.vx // Обновляем положение частицы по горизонтали
|
||||
particle.y += particle.vy // Обновляем положение частицы по вертикали
|
||||
|
||||
ctx.globalAlpha = particle.opacity |
||||
ctx.drawImage( |
||||
particle.image, |
||||
particle.x, |
||||
particle.y, |
||||
particle.width, |
||||
particle.height, |
||||
) |
||||
} |
||||
} |
||||
|
||||
if (particles.length === 0 && requestAnimationIdRef.current) { |
||||
cancelAnimationFrame(requestAnimationIdRef.current) |
||||
return |
||||
} |
||||
|
||||
requestAnimationIdRef.current = requestAnimationFrame(updateParticles) |
||||
} |
||||
|
||||
if (generateParticles) { |
||||
createParticles(PARTICLES_COUNT) |
||||
intervalId = setInterval(() => createParticles(PARTICLES_COUNT), BIRTH_RATE) |
||||
updateParticles() |
||||
} |
||||
|
||||
return () => { |
||||
intervalId && clearInterval(intervalId) |
||||
} |
||||
}, [generateParticles]) |
||||
|
||||
useEffect(() => () => { |
||||
requestAnimationIdRef.current && cancelAnimationFrame(requestAnimationIdRef.current) |
||||
}, []) |
||||
|
||||
return { |
||||
canvasRef, |
||||
likeButtonRef, |
||||
setGenerateParticles, |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import { useQueryClient } from 'react-query' |
||||
|
||||
import { querieKeys } from 'config' |
||||
|
||||
import type { MatchScore } from 'requests' |
||||
|
||||
import { useMatchPageStore } from 'features/MatchPage/store' |
||||
|
||||
export const useVideoBounds = () => { |
||||
const { profile: matchProfile } = useMatchPageStore() |
||||
|
||||
const client = useQueryClient() |
||||
|
||||
const matchScore = client.getQueryData<MatchScore>(querieKeys.matchScore) |
||||
|
||||
const videoBounds = matchScore?.video_bounds || matchProfile?.video_bounds |
||||
|
||||
return videoBounds |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue