feat: 更新demo

slatejack · Feb 2, 2024 · 223cbdf · 223cbdf
1 parent 6c72380
commit 223cbdf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "rc-bullets-ts": "^1.3.0",
+    "rc-bullets-ts": "^1.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/demo/src/App.js b/demo/src/App.js
@@ -1,13 +1,21 @@
 import React, {useEffect, useRef} from 'react';
-import './App.css';
 import BulletScreen, {StyledBullet} from 'rc-bullets-ts';
+import './App.css';
 
 function App() {
   const isPause = useRef(false);
   const barrageScreen = useRef(null);
   useEffect(() => {
     // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效
     barrageScreen.current = new BulletScreen('.screen-container', {duration: 10});
+    document.addEventListener('visibilitychange', function () {
+      if (!document.hidden) {
+        console.log('page is visible');
+        barrageScreen.current.resize();
+      } else {
+        console.log('page is invisible');
+      }
+    });
   }, []);
 
   /**
@@ -16,16 +24,16 @@ function App() {
    */
   const handleSend = (barrageInfo) => {
     if (barrageInfo) {
-      barrageScreen.current.push(
-        <StyledBullet
-          head={barrageInfo.img}
-          msg={barrageInfo.msg}
-          backgroundColor="rgba(0,0,0,0.4)"
-        />,
-        {
-          bottom: '9px', // 指定所有弹幕距离容器底部距离为9px
-        }
-      );
+      setInterval(() => {
+        barrageScreen.current.push(
+          <StyledBullet
+            head={barrageInfo.img}
+            msg={barrageInfo.msg}
+            backgroundColor="rgba(0,0,0,0.4)"
+          />,
+          {}
+        );
+      }, 500);
     }
   };