fix(2690): fix player watermark

src/components/WaterMark/index.tsx

@@ -4,7 +4,6 @@ import styled from 'styled-components/macro'
 type WmType = {
   leftWm: number,
   topWm: number,
-  visible: boolean,
 }
 
 export const ScWaterMark = styled.div<WmType>`
@@ -14,8 +13,6 @@ export const ScWaterMark = styled.div<WmType>`
   z-index: 1;
   opacity: 1;
   color: white;
-  visibility: ${({ visible }) => (visible ? 'visible'
-    : 'hidden')};
 `
 
 type WaterMarkProps = {
@@ -28,22 +25,20 @@ export const WaterMark = ({ value }: WaterMarkProps) => {
   const [visible, setVisible] = useState(false)
 
   useEffect(() => {
-    setInterval(() => {
+    const interval = setInterval(() => {
       setLeftWm(Math.floor(Math.random() * 95))
       setTopWm(Math.floor(Math.random() * 95))
       setVisible((v) => !v)
-    }, 1000 * 5)
+    }, 1000 * 10)
+    return () => clearInterval(interval)
   }, [])
 
-  return (
-    <>
-      <ScWaterMark
-        visible={visible}
-        topWm={topWm}
-        leftWm={leftWm}
-      >
-        {value}
-      </ScWaterMark>
-    </>
-  )
+  return visible ? (
+    <ScWaterMark
+      topWm={topWm}
+      leftWm={leftWm}
+    >
+      {value}
+    </ScWaterMark>
+  ) : null
 }