feat(watermark): add watermark for brasil matches

src/components/WaterMark/index.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components/macro'
+
+type WmType = {
+  leftWM: number,
+  topWM: number,
+}
+
+export const ScWaterMark = styled.div<WmType>`
+  position: absolute;
+  top: ${({ topWM }) => `${topWM}%`};
+  left: ${({ leftWM }) => `${leftWM}%`};
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  color: white;
+  opacity: 0.4;
+  transition-property: left, top;
+  transition-duration: 3s;
+`
+
+type WaterMarkProps = {
+  value: string | number | undefined,
+}
+
+export const WaterMark = ({ value }: WaterMarkProps) => {
+  const calcCoordinate = () => {
+    const leftWM = Math.floor(Math.random() * 100)
+    let topWM
+    if (leftWM < 10 || leftWM > 90) {
+      topWM = Math.floor(Math.random() * 100)
+    } else {
+      topWM = Math.floor(Math.random() * 10)
+    }
+    return { leftWM, topWM }
+  }
+  return (
+    <ScWaterMark leftWM={calcCoordinate().leftWM} topWM={calcCoordinate().topWM}>
+      {value}
+    </ScWaterMark>
+  )
+}

src/features/MatchPage/components/LiveMatch/index.tsx

@@ -61,6 +61,7 @@ export const LiveMatch = ({
               isLive={profile?.live}
               resumeFrom={resume}
               chapters={chapters}
+              profile={profile}
             />
           )
         )}

src/features/StreamPlayer/index.tsx

@@ -4,6 +4,8 @@ import { T9n } from 'features/T9n'
 import { Loader } from 'features/Loader'
 import { VideoPlayer } from 'features/VideoPlayer'
 
+import { WaterMark } from 'components/WaterMark'
+
 import { secondsToHms } from 'helpers'
 
 import { HOUR_IN_MILLISECONDS, REWIND_SECONDS } from './config'
@@ -28,15 +30,18 @@ import {
   ChaptersText,
   Next,
   Prev,
+  // WaterMark,
 } from './styled'
 import type { Props } from './hooks'
 import { useVideoPlayer } from './hooks'
+import { useAuthStore } from '../AuthStore'
 
 /**
  * HLS плеер, применяется на лайв и завершенных матчах
  */
 export const StreamPlayer = (props: Props) => {
-  const { isLive } = props
+  const { isLive, profile } = props
+  const { user } = useAuthStore()
 
   const {
     activeChapterIndex,
@@ -89,7 +94,6 @@ export const StreamPlayer = (props: Props) => {
     volumeInPercent,
     wrapperRef,
   } = useVideoPlayer(props)
-
   return (
     <PlayerWrapper
       ref={wrapperRef}
@@ -104,6 +108,11 @@ export const StreamPlayer = (props: Props) => {
       <LoaderWrapper buffering={buffering}>
         <Loader color='#515151' />
       </LoaderWrapper>
+      {profile?.tournament.id === 1136
+          && playing
+          && (
+            <WaterMark value={user?.profile?.sub} />
+          )}
       <VideoPlayer
         width='100%'
         height='100%'