diff --git a/src/components/PictureInPicture/PiP.tsx b/src/components/PictureInPicture/PiP.tsx index bd509707..384f6755 100644 --- a/src/components/PictureInPicture/PiP.tsx +++ b/src/components/PictureInPicture/PiP.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { RefObject, useEffect, @@ -8,6 +9,8 @@ import styled from 'styled-components/macro' import { Icon } from 'features/Icon' import { useAuthStore } from 'features/AuthStore' +import { isIOS } from 'config' + const PipWrapper = styled.div` cursor: pointer; margin-left: 25px; @@ -21,17 +24,39 @@ type PipProps = { export const PiP = ({ videoRef }: PipProps) => { const { user } = useAuthStore() + const togglePip = async () => { + const isInPIP = () => Boolean(document.pictureInPictureElement) + + const closePIP = async () => { + if (!isInPIP()) return + + if (isIOS) { + await (videoRef.current as any)?.webkitSetPresentationMode('inline') + } + await document.exitPictureInPicture() + } + + const openPIP = async () => { + if (isInPIP()) return + + if (isIOS) { + await (videoRef.current as any)?.webkitSetPresentationMode('picture-in-picture') + } + + await videoRef.current?.requestPictureInPicture() + } + try { if ( document.pictureInPictureEnabled && videoRef.current !== document.pictureInPictureElement ) { - await videoRef.current?.requestPictureInPicture() + await openPIP() } else { - await document.exitPictureInPicture() + await closePIP() } } catch (err) { - await document.exitPictureInPicture() + await closePIP() } } diff --git a/src/features/App/hooks.tsx b/src/features/App/hooks.tsx index 4a1c33d6..fbc4ac2b 100644 --- a/src/features/App/hooks.tsx +++ b/src/features/App/hooks.tsx @@ -7,13 +7,112 @@ import { useLocalStore } from 'hooks' import { querieKeys } from 'config' +const defaultSportList: SportsType = { + 1: { + id: 1, + lexic: 12980, + name_eng: 'football', + name_rus: 'футбол', + }, + 2: { + id: 2, + lexic: 6959, + name_eng: 'hockey', + name_rus: 'хоккей', + }, + 3: { + id: 3, + lexic: 3556, + name_eng: 'basketball', + name_rus: 'баскетбол', + }, + 4: { + id: 4, + lexic: 20000, + name_eng: 'tennis', + name_rus: 'теннис', + }, + 6: { + id: 6, + lexic: 9761, + name_eng: 'volleyball', + name_rus: 'волейбол', + }, + 7: { + id: 7, + lexic: 9760, + name_eng: 'handball', + name_rus: 'гандбол', + }, + 9: { + id: 9, + lexic: 3556, + name_eng: 'basketball 3x3', + name_rus: 'баскетбол 3х3', + }, + 12: { + id: 12, + lexic: 19816, + name_eng: 'boxing', + name_rus: 'бокс', + }, + 14: { + id: 14, + lexic: 19956, + name_eng: 'field hockey', + name_rus: 'хоккей на траве', + }, + 15: { + id: 15, + lexic: 19957, + name_eng: 'figure skating', + name_rus: 'фигурное катание', + }, + 16: { + id: 16, + lexic: 1, + name_eng: 'american football', + name_rus: 'американский футбол', + }, + 17: { + id: 17, + lexic: 17670, + name_eng: 'futsal', + name_rus: 'футзал', + }, + 18: { + id: 18, + lexic: 18, + name_eng: 'floorball', + name_rus: 'флорбол', + }, + 19: { + id: 19, + lexic: 20051, + name_eng: 'cricket', + name_rus: 'крикет', + }, + 20: { + id: 20, + lexic: 9759, + name_eng: 'baseball', + name_rus: 'бейсбол', + }, + 21: { + id: 21, + lexic: 20091, + name_eng: 'softball', + name_rus: 'софтбол', + }, +} + export type SportsType = { [key: number]: Sport, } export const useSportList = () => { const [sportsList, setSportsList] = useLocalStore({ - defaultValue: {} as Sport, + defaultValue: defaultSportList, key: querieKeys.sportsList, validator: Boolean, }) diff --git a/src/features/LexicsStore/hooks/useLang.tsx b/src/features/LexicsStore/hooks/useLang.tsx index b0e1e1b2..b08f1552 100644 --- a/src/features/LexicsStore/hooks/useLang.tsx +++ b/src/features/LexicsStore/hooks/useLang.tsx @@ -14,6 +14,7 @@ import { client } from 'config/clients' import { getLanguages, ReferenceLanguages } from 'requests/getLanguages' import { getSortedLangs } from 'helpers/getSortedLangs' +import { readToken } from 'helpers' const LANG_KEY = 'lang' const DEFAULT_LANG = client.defaultLanguage || 'en' @@ -36,7 +37,7 @@ export const useLang = (initialLanguage?: string) => { }, []) useEffect(() => { - fetchLanguages() + readToken() && fetchLanguages() }, [fetchLanguages]) const changeLang = useCallback( diff --git a/src/index.tsx b/src/index.tsx index 7424b9a4..7b6e9869 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,6 +18,7 @@ if (process.env.NODE_ENV !== 'development') { dsn: 'https://bbe0cdfb954644ebaf3be16bb472cc3d@sentry.insports.tv/21', environment: ENV, integrations: [new BrowserTracing()], + normalizeDepth: 5, tracesSampleRate: 1.0, }) }