Merge pull request #19 from slatejack/feature/resize-bullets-screen

Feature/resize bullets screen
slatejack · Feb 2, 2024 · a3fb5d1 · a3fb5d1
2 parents b1ba009 + 223cbdf
commit a3fb5d1
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 16 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);
     }
   };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-bullets-ts",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "一个简单的react弹幕库",
   "main": "dist/main.js",
   "module": "dist/main.js",

diff --git a/src/bulletScreen.tsx b/src/bulletScreen.tsx
@@ -61,6 +61,11 @@ class BulletScreen {
         style.sheet?.insertRule(`@keyframes RightToLeft { ${from} ${to} }`, 0);
     }
 
+    /**
+     * 发送弹幕
+     * @param item
+     * @param opts
+     */
     push(item: pushItem, opts: Partial<ScreenOpsTypes>) {
         const options = {...this.options, ...opts};
         const {onStart, onEnd, top, bottom} = options;
@@ -101,6 +106,10 @@ class BulletScreen {
         return bulletContainer.id;
     }
 
+    /**
+     * 获取需要渲染的dom样式
+     * @param Item
+     */
     getRenderDom(Item: pushItem) {
         if (React.isValidElement(Item)) {
             return Item;
@@ -169,6 +178,15 @@ class BulletScreen {
         this.bullets = [];
     }
 
+    /**
+     * 样式重置
+     */
+    resize() {
+        const {trackHeight} = this.options;
+        this.initBulletTrack(trackHeight);
+        this.initBulletAnimate(this.target);
+    }
+
     /**
      * 获取播放轨道
      * @returns
@@ -226,8 +244,6 @@ class BulletScreen {
                 const observer = new IntersectionObserver(enteries => {
                     for (const entry of enteries) {
                         const {intersectionRatio, target, isIntersecting} = entry;
-                        console.log('bullet id', target.id, intersectionRatio, isIntersecting);
-                        console.log('resTarget', this.target, entry);
                         if (intersectionRatio >= 1) {
                             const curTaget = target as HTMLElement;
                             const trackIdx = typeof (curTaget.dataset.track) === 'undefined' ? undefined : +curTaget.dataset.track;

diff --git a/typings/bulletScreen.d.ts b/typings/bulletScreen.d.ts
@@ -19,14 +19,27 @@ declare class BulletScreen {
      * @param screen
      */
     initBulletAnimate(screen: HTMLElement): void;
+    /**
+     * 发送弹幕
+     * @param item
+     * @param opts
+     */
     push(item: pushItem, opts: Partial<ScreenOpsTypes>): string;
+    /**
+     * 获取需要渲染的dom样式
+     * @param Item
+     */
     getRenderDom(Item: pushItem): JSX.Element;
     _toggleAnimateStatus: (id: string | null, status?: string) => void;
     pause(id?: string | null): void;
     resume(id?: string | null): void;
     hide(): void;
     show(): void;
     clear(id?: null): void;
+    /**
+     * 样式重置
+     */
+    resize(): void;
     /**
      * 获取播放轨道
      * @returns

diff --git a/typings/src/bulletScreen.d.ts b/typings/src/bulletScreen.d.ts
@@ -19,14 +19,27 @@ declare class BulletScreen {
      * @param screen
      */
     initBulletAnimate(screen: HTMLElement): void;
+    /**
+     * 发送弹幕
+     * @param item
+     * @param opts
+     */
     push(item: pushItem, opts: Partial<ScreenOpsTypes>): string;
+    /**
+     * 获取需要渲染的dom样式
+     * @param Item
+     */
     getRenderDom(Item: pushItem): JSX.Element;
     _toggleAnimateStatus: (id: string | null, status?: string) => void;
     pause(id?: string | null): void;
     resume(id?: string | null): void;
     hide(): void;
     show(): void;
     clear(id?: null): void;
+    /**
+     * 样式重置
+     */
+    resize(): void;
     /**
      * 获取播放轨道
      * @returns