diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx index adec69cb..94d9a2f1 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx @@ -1,9 +1,10 @@ -import React, { useMemo } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import classNames from "classnames"; import { useSelector } from "react-redux"; import TQRCode from "../../../components/TQRCode/TQRCode"; +import { $L } from "../../../utils/helperMethods"; import css from "./PlayerOverlayQRCode.module.less"; import { getQRCodeUrl, scaleH, scaleW } from "../../../utils/helperMethods"; @@ -15,6 +16,8 @@ export default function PlayerOverlayQRCode({ const { cntry_cd } = useSelector((state) => state.common.httpHeader); const deviceInfo = useSelector((state) => state.device.deviceInfo); + const [isShowQRCode, setIsShowQRCode] = useState(true); + const timerRef = useRef(null); const serverHOST = useSelector((state) => state.common.appStatus.serverHOST); const serverType = useSelector((state) => state.localSettings.serverType); const { entryMenu, nowMenu } = useSelector((state) => state.common.menu); @@ -106,6 +109,28 @@ export default function PlayerOverlayQRCode({ return qrCurrentItem?.qrcodeUrl; }, [detailUrl, qrCurrentItem, type]); + useEffect(() => { + const toggleQRCode = () => { + if (isShowQRCode) { + timerRef.current = setTimeout(() => { + setIsShowQRCode(false); + }, 10000); + } else { + timerRef.current = setTimeout(() => { + setIsShowQRCode(true); + }, 5000); + } + }; + + toggleQRCode(); + + return () => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + }; + }, [isShowQRCode]); + return ( <> {innerStylePosition && QRCodeUrl && ( @@ -119,15 +144,25 @@ export default function PlayerOverlayQRCode({ )} style={innerStylePosition} > -
{$L("with your phone, Check Product")}
+{$L("info & Purchase easily")}
+