From e0d83a0eabd003a7c0421ac2b774a0fc65f1cdab Mon Sep 17 00:00:00 2001 From: Mirlan Date: Tue, 7 Sep 2021 18:02:58 +0600 Subject: [PATCH] Ott 1531 ios fullscreen (#460) * fix: console nested li error * fix(1531): full screen mode on ios * fix: removed redundant tab index --- src/config/userAgent.tsx | 4 +- .../MatchCard/CardFrontside/index.tsx | 10 ++--- src/features/MatchCard/styled.tsx | 7 +--- .../MultiSourcePlayer/hooks/index.tsx | 10 +++++ src/features/MultiSourcePlayer/index.tsx | 8 +++- .../StreamPlayer/hooks/useFullscreen.tsx | 41 ++++++++++++++++++- src/features/VideoPlayer/hooks/index.tsx | 1 + src/features/VideoPlayer/index.tsx | 2 + 8 files changed, 69 insertions(+), 14 deletions(-) diff --git a/src/config/userAgent.tsx b/src/config/userAgent.tsx index 2e588933..409a6b7d 100644 --- a/src/config/userAgent.tsx +++ b/src/config/userAgent.tsx @@ -1,5 +1,7 @@ import { includes } from 'lodash' -export const isMobileDevice = includes(window.navigator.userAgent, 'Android') || includes(window.navigator.userAgent, 'iPhone') +export const isIphone = includes(window.navigator.userAgent, 'iPhone') + +export const isMobileDevice = includes(window.navigator.userAgent, 'Android') || isIphone // удалю когда закончу с адаптивом. // || includes(window.navigator.userAgent, 'Linux') diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 4335243f..63b700e5 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -83,11 +83,11 @@ export const CardFrontside = ({ const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id) return ( - - + + { diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index ca839c3d..55c9134c 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -17,7 +17,7 @@ export const CardWrapperOuter = styled.li.attrs({ padding-top: 0; height: 90px; margin-bottom: 10px; - + @media screen and (orientation: landscape){ width: 49%; :nth-child(odd){ @@ -28,9 +28,7 @@ export const CardWrapperOuter = styled.li.attrs({ : ''}; ` -export const CardWrapper = styled.li.attrs({ - tabIndex: 0, -})` +export const CardWrapper = styled.div` position: absolute; top: 0; left: 0; @@ -150,7 +148,6 @@ export const Info = styled.div` padding: 13px 12px 13px 10px; ` : ''}; - ` export const SecondaryInfo = styled.div` diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx index 763bbca9..476a4265 100644 --- a/src/features/MultiSourcePlayer/hooks/index.tsx +++ b/src/features/MultiSourcePlayer/hooks/index.tsx @@ -167,6 +167,14 @@ export const useMultiSourcePlayer = ({ setPlayerState({ playedProgress: value }) } + const onEnded = () => { + playNextChapter() + } + + const onPause = () => { + setPlayerState({ playing: false }) + } + useEffect(() => { onPlayingChange(playing) }, [playing, onPlayingChange]) @@ -204,8 +212,10 @@ export const useMultiSourcePlayer = ({ loadedProgress, nextSrc: getChapterUrl((activeChapterIndex + 1) % numberOfChapters), numberOfChapters, + onEnded, onError: handleError, onLoadedProgress, + onPause, onPlayedProgress, onPlayerClick, onProgressChange, diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx index 32d542b8..8fd8a660 100644 --- a/src/features/MultiSourcePlayer/index.tsx +++ b/src/features/MultiSourcePlayer/index.tsx @@ -47,9 +47,11 @@ export const MultiSourcePlayer = (props: Props) => { muted, nextSrc, numberOfChapters, + onEnded, onError, onFullscreenClick, onLoadedProgress, + onPause, onPlayedProgress, onPlayerClick, onProgressChange, @@ -101,7 +103,8 @@ export const MultiSourcePlayer = (props: Props) => { isFullscreen={isFullscreen} onLoadedProgress={firstPlayerActive ? onLoadedProgress : undefined} onPlayedProgress={firstPlayerActive ? onPlayedProgress : undefined} - onEnded={() => playNextChapter()} + onEnded={onEnded} + onPause={onPause} onError={onError} onReady={onReady} /> @@ -116,7 +119,8 @@ export const MultiSourcePlayer = (props: Props) => { isFullscreen={isFullscreen} onLoadedProgress={!firstPlayerActive ? onLoadedProgress : undefined} onPlayedProgress={!firstPlayerActive ? onPlayedProgress : undefined} - onEnded={() => playNextChapter()} + onEnded={onEnded} + onPause={onPause} onError={onError} onReady={onReady} /> diff --git a/src/features/StreamPlayer/hooks/useFullscreen.tsx b/src/features/StreamPlayer/hooks/useFullscreen.tsx index 0c9be006..f17542e8 100644 --- a/src/features/StreamPlayer/hooks/useFullscreen.tsx +++ b/src/features/StreamPlayer/hooks/useFullscreen.tsx @@ -1,8 +1,21 @@ import { useEffect, useRef } from 'react' import screenfull from 'screenfull' +import { isIphone } from 'config/userAgent' + import { useToggle } from 'hooks' +type IOSVideo = HTMLVideoElement & { + webkitEnterFullscreen: () => void, + webkitExitFullscreen: () => void, +} + +const supportsFullscreen = (video: HTMLVideoElement | null): video is IOSVideo => Boolean( + video + && 'webkitEnterFullscreen' in video + && 'webkitExitFullscreen' in video, +) + export const useFullscreen = () => { const wrapperRef = useRef(null) const { @@ -24,12 +37,38 @@ export const useFullscreen = () => { } }, [setFullscreen]) - const onFullscreenClick = () => { + const toggleFullscreen = () => { if (screenfull.isEnabled && wrapperRef.current) { screenfull.toggle(wrapperRef.current) } } + /** + * В обертке могут быть 2 плеера, находим тот который играет сейчас, т.е. не скрыт + */ + const getPlayingVideoElement = () => ( + wrapperRef.current?.querySelector('video:not([hidden])') as HTMLVideoElement | null + ) + + const toggleIOSFullscreen = () => { + const video = getPlayingVideoElement() + if (!video || !supportsFullscreen(video)) return + + if (isFullscreen) { + video.webkitExitFullscreen() + } else { + video.webkitEnterFullscreen() + } + } + + const onFullscreenClick = () => { + if (isIphone) { + toggleIOSFullscreen() + } else { + toggleFullscreen() + } + } + return { isFullscreen, onFullscreenClick, diff --git a/src/features/VideoPlayer/hooks/index.tsx b/src/features/VideoPlayer/hooks/index.tsx index f2c30797..71e105d1 100644 --- a/src/features/VideoPlayer/hooks/index.tsx +++ b/src/features/VideoPlayer/hooks/index.tsx @@ -23,6 +23,7 @@ export type Props = { onEnded?: (e: SyntheticEvent) => void, onError?: (e?: SyntheticEvent) => void, onLoadedProgress?: (loadedMs: number) => void, + onPause?: (e: SyntheticEvent) => void, onPlayedProgress?: (playedMs: number) => void, onReady?: () => void, playing?: boolean, diff --git a/src/features/VideoPlayer/index.tsx b/src/features/VideoPlayer/index.tsx index 071c6d9b..8d39709d 100644 --- a/src/features/VideoPlayer/index.tsx +++ b/src/features/VideoPlayer/index.tsx @@ -13,6 +13,7 @@ export const VideoPlayer = forwardRef((props: Props, re muted, onEnded, onError, + onPause, src, width, } = props @@ -38,6 +39,7 @@ export const VideoPlayer = forwardRef((props: Props, re onProgress={handleLoadedChange} onEnded={onEnded} onDurationChange={handleDurationChange} + onPause={onPause} onError={onError} crossOrigin={crossOrigin} />