move commit c265b6e2ef (035444824e3ed8a923e579f9c51caa99dc0d5eaa)

package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
+<<<<<<< HEAD
 <<<<<<< HEAD
   "packages": {
     "": {
@@ -33658,6 +33659,8 @@
   },
 =======
 >>>>>>> 2304396 (fix(2703): fixes on match profile)
+=======
+>>>>>>> 56a24928 (move commit https://gitlab.instatfootball.tv/frontend/spa_instat_tv/-/commit/c265b6e2efb219770ed9eb2742d5269f49fe0a0a#035444824e3ed8a923e579f9c51caa99dc0d5eaa)
   "dependencies": {
     "@babel/code-frame": {
       "version": "7.16.0",

src/features/StreamPlayer/hooks/index.tsx

@@ -20,6 +20,7 @@ import { useLiveMatch } from 'features/MatchPage/components/LiveMatch/hooks'
 
 import type { Chapters } from 'features/StreamPlayer/types'
 
+import { useLexicsStore } from 'features/LexicsStore'
 import { REWIND_SECONDS } from '../config'
 import { useHlsPlayer } from './useHlsPlayer'
 import { useFullscreen } from './useFullscreen'
@@ -79,6 +80,8 @@ export const useVideoPlayer = ({
 
   const { onPlaylistSelect, selectedPlaylist } = useLiveMatch()
 
+  const { lang } = useLexicsStore()
+
   const { url } = chapters[0] ?? { url: '' }
   const numberOfChapters = size(chapters)
   const { hls, videoRef } = useHlsPlayer(url, resumeFrom)
@@ -374,6 +377,10 @@ export const useVideoPlayer = ({
     }
   }, [ready, videoRef])
 
+  const warningText = lang === 'es'
+    ? 'La transmisión en vivo no está disponible temporalmente en dispositivos iOS'
+    : 'Live streaming is temporarily unavailable on iOS devices'
+
   return {
     activeChapterIndex,
     allPlayedProgress: playedProgress + getActiveChapter().startMs,
@@ -410,6 +417,7 @@ export const useVideoPlayer = ({
     togglePlaying,
     url,
     videoRef,
+    warningText,
     wrapperRef,
     ...useControlsVisibility(isFullscreen, playing),
     ...useVolume(),

src/features/StreamPlayer/index.tsx

@@ -1,12 +1,10 @@
+import { isIOS, isMobileDevice } from 'config/userAgent'
+
 import { Loader } from 'features/Loader'
 import { VideoPlayer } from 'features/VideoPlayer'
 import { useMatchPageStore } from 'features/MatchPage/store'
 import { Name } from 'features/Name'
 
-import { WaterMark } from 'components/WaterMark'
-
-import { isMobileDevice } from 'config/userAgent'
-
 import { REWIND_SECONDS } from './config'
 
 import {
@@ -18,10 +16,11 @@ import {
   Forward,
   ControlsGradient,
   TeamsDetailsWrapper,
+  WarningIosText,
+  WarningIosWrapper,
 } from './styled'
 import type { Props } from './hooks'
 import { useVideoPlayer } from './hooks'
-import { useAuthStore } from '../AuthStore'
 import { Controls } from './components/Controls'
 import RewindMobile from './components/RewindMobile'
 
@@ -30,7 +29,6 @@ import RewindMobile from './components/RewindMobile'
  */
 export const StreamPlayer = (props: Props) => {
   const { profile } = useMatchPageStore()
-  const { user } = useAuthStore()
 
   const {
     activeChapterIndex,
@@ -78,6 +76,7 @@ export const StreamPlayer = (props: Props) => {
     videoRef,
     volume,
     volumeInPercent,
+    warningText,
     wrapperRef,
   } = useVideoPlayer(props)
   return (
@@ -94,11 +93,19 @@ export const StreamPlayer = (props: Props) => {
       <LoaderWrapper buffering={buffering}>
         <Loader color='#515151' />
       </LoaderWrapper>
-      {(profile?.tournament.id === 1136 || profile?.tournament.id === 131)
+      {isIOS
-          && playing
+        ? (
-          && (
+          <WarningIosWrapper>
-            <WaterMark value={user?.profile?.sub} />
+            <WarningIosText>
-          )}
+              {warningText}
+            </WarningIosText>
+          </WarningIosWrapper>
+        )
+        : (
+          <LoaderWrapper buffering={buffering}>
+            <Loader color='#515151' />
+          </LoaderWrapper>
+        )}
       <VideoPlayer
         width='100%'
         height='100%'

src/features/StreamPlayer/styled.tsx

@@ -368,3 +368,17 @@ export const TeamsDetailsWrapper = styled.div`
   color: #FFFFFF;
   z-index: 50;
 `
+export const WarningIosWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  width: 80%;
+`
+
+export const WarningIosText = styled.span`
+  color: red;
+  text-align: center;
+  font-size: 14px;
+`