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

@@ -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')

src/features/MatchCard/CardFrontside/index.tsx

@@ -83,11 +83,11 @@ export const CardFrontside = ({
   const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id)
 
   return (
-    <CardWrapperOuter>
-      <CardWrapper
-        onClick={onClick}
-        onKeyPress={onKeyPress}
-      >
+    <CardWrapperOuter
+      onClick={onClick}
+      onKeyPress={onKeyPress}
+    >
+      <CardWrapper>
         <HoverFrame />
         <PreviewWrapper>
           {

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`

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,

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}
       />

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<HTMLDivElement>(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,

src/features/VideoPlayer/hooks/index.tsx

@@ -23,6 +23,7 @@ export type Props = {
   onEnded?: (e: SyntheticEvent<HTMLVideoElement>) => void,
   onError?: (e?: SyntheticEvent<HTMLVideoElement>) => void,
   onLoadedProgress?: (loadedMs: number) => void,
+  onPause?: (e: SyntheticEvent<HTMLVideoElement>) => void,
   onPlayedProgress?: (playedMs: number) => void,
   onReady?: () => void,
   playing?: boolean,

src/features/VideoPlayer/index.tsx

@@ -13,6 +13,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, re
     muted,
     onEnded,
     onError,
+    onPause,
     src,
     width,
   } = props
@@ -38,6 +39,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, re
       onProgress={handleLoadedChange}
       onEnded={onEnded}
       onDurationChange={handleDurationChange}
+      onPause={onPause}
       onError={onError}
       crossOrigin={crossOrigin}
     />