@bbki.ng/site 5.4.10 → 5.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/index.html +1 -1
  3. package/package.json +2 -2
  4. package/src/blog/__test__/utils/index.test.ts +0 -34
  5. package/src/blog/pages/streaming/index.tsx +48 -25
  6. package/src/blog/pages/streaming/useScrollBtnVisibility.ts +27 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # @bbki.ng/site
2
2
 
3
+ ## 5.4.12
4
+
5
+ ## 5.4.11
6
+
3
7
  ## 5.4.10
4
8
 
5
9
  ## 5.4.9
package/index.html CHANGED
@@ -55,7 +55,7 @@
55
55
  </style>
56
56
  <script src="https://unpkg.com/open-heart-element" type="module"></script>
57
57
  <script type="module" src="https://cdn.jsdelivr.net/npm/@bbki.ng/bbimg@0.0.3/dist/index.js"></script>
58
- <script type="module" src="https://cdn.jsdelivr.net/npm/@bbki.ng/bb-msg-history@0.11.2/dist/index.js"></script>
58
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@bbki.ng/bb-msg-history@0.13.1/dist/index.js"></script>
59
59
  </head>
60
60
 
61
61
  <body class="h-full m-0 flex flex-col font-mono">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbki.ng/site",
3
- "version": "5.4.10",
3
+ "version": "5.4.12",
4
4
  "description": "code behind bbki.ng",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -20,7 +20,7 @@
20
20
  "sonner": "1.4.0",
21
21
  "swr": "^2.2.5",
22
22
  "vaul": "1.1.2",
23
- "@bbki.ng/components": "5.2.3",
23
+ "@bbki.ng/components": "5.2.4",
24
24
  "@bbki.ng/stylebase": "3.1.1"
25
25
  },
26
26
  "devDependencies": {
package/src/blog/__test__/utils/index.test.ts CHANGED
@@ -1,53 +1,19 @@
1
1
  import {
2
- addOssWebpProcessStyle,
3
- calcDefaultImgSize,
4
2
  delay,
5
3
  floatNumberToPercentageString,
6
4
  getEnv,
7
5
  minDelay,
8
6
  } from "@/utils";
9
- import { ossProcessType } from "@/types/oss";
10
- import { OSS_PHOTOS } from "@/constants/photos";
11
7
 
12
8
  jest.useFakeTimers();
13
9
  jest.spyOn(window, "setTimeout");
14
10
 
15
- describe("calcDefaultImgSize", () => {
16
- it("should respect default width", () => {
17
- const dw = 500;
18
- expect(calcDefaultImgSize(OSS_PHOTOS.shopping, dw).width).toEqual(dw);
19
- });
20
- it("should return 576 as default width when photo is horizontal", () => {
21
- expect(calcDefaultImgSize(OSS_PHOTOS.stone).width).toEqual(576);
22
- });
23
- it("should return 384 as default width when photo is horizontal", () => {
24
- expect(calcDefaultImgSize(OSS_PHOTOS.player).width).toEqual(384);
25
- });
26
- });
27
-
28
11
  describe("floatNumberToPercentageString", () => {
29
12
  it("should return percentage string correctly", () => {
30
13
  expect(floatNumberToPercentageString(0.8)).toBe("80%");
31
14
  });
32
15
  });
33
16
 
34
- describe("addOssWebpProcessStyle", () => {
35
- it("should return original url when image's url is invalid", () => {
36
- const originalUrl = "foo";
37
- expect(addOssWebpProcessStyle(originalUrl, ossProcessType.WEBP)).toEqual(
38
- originalUrl
39
- );
40
- });
41
-
42
- it("should add oss style to url correctly", () => {
43
- const originalUrl =
44
- "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/DSCF2203-1.jpg";
45
- expect(addOssWebpProcessStyle(originalUrl, ossProcessType.WEBP)).toEqual(
46
- `${originalUrl}?x-oss-process=style/${ossProcessType.WEBP}`
47
- );
48
- });
49
- });
50
-
51
17
  describe("delay", () => {
52
18
  it("should delay correctly", () => {
53
19
  delay(5000);
package/src/blog/pages/streaming/index.tsx CHANGED
@@ -1,7 +1,9 @@
1
1
  import React, { useEffect, useRef, useState } from "react";
2
2
  import { useStreaming, StreamingItem } from "@/hooks/use_streaming";
3
3
  import { formatStreamingData } from "@/utils/streaming";
4
- import { Article, Panel } from "@bbki.ng/components";
4
+ import { Article, Button, ButtonType, Panel } from "@bbki.ng/components";
5
+ import { useScrollBtnVisibility } from "./useScrollBtnVisibility";
6
+ import classNames from "classnames";
5
7
 
6
8
  // Extend JSX IntrinsicElements for the web component
7
9
  declare global {
@@ -18,25 +20,16 @@ declare global {
18
20
  }
19
21
  }
20
22
 
21
- interface BbMsgHistoryElement extends HTMLElement {
23
+ export interface BbMsgHistoryElement extends HTMLElement {
22
24
  setAuthor(name: string, config: { avatar: string; side: string; bubbleColor: string }): void;
25
+ scrollToBottom(): void;
23
26
  }
24
27
 
25
28
  const Streaming = () => {
26
29
  const { streaming, isLoading, isError } = useStreaming();
27
30
  const bbMsgHistoryRef = useRef<BbMsgHistoryElement>(null);
28
31
 
29
- useEffect(() => {
30
- const $blog = document.querySelector("#blog") as HTMLDivElement | null;
31
- if (!$blog) return;
32
-
33
- // disable scroll
34
- // $blog.style.overflow = "hidden";
35
-
36
- // return () => {
37
- // $blog.style.overflow = "auto";
38
- // }
39
- }, [])
32
+ const showScrollBtn = useScrollBtnVisibility(bbMsgHistoryRef.current!);
40
33
 
41
34
  if (isError) {
42
35
  return <div className="p-8 text-center text-gray-500">加载失败</div>;
@@ -44,23 +37,53 @@ const Streaming = () => {
44
37
 
45
38
  const formattedData = formatStreamingData(streaming || []);
46
39
 
47
- // if (isLoading) {
48
- // return null;
49
- // }
40
+ console.log("showScrollBtn", showScrollBtn);
50
41
 
51
42
  return (
52
43
  <Article title="直播" loading={isLoading}>
53
44
  {isLoading ? null : (
54
- <Panel className="!p-[10px]">
55
- <bb-msg-history
56
- // infinite
57
- hide-scroll-bar
58
- ref={bbMsgHistoryRef}
59
- style={{ height: "100%", "--bb-max-height": "200px" } as React.CSSProperties}
45
+ <>
46
+ <Panel className="!p-[10px]">
47
+ <bb-msg-history
48
+ // infinite
49
+ hide-scroll-bar
50
+ hide-scroll-button
51
+ ref={bbMsgHistoryRef}
52
+ style={{ height: "100%", "--bb-max-height": "200px" } as React.CSSProperties}
53
+ >
54
+ {formattedData}
55
+ </bb-msg-history>
56
+ </Panel>
57
+ <Button
58
+ className="mt-128"
59
+ transparent={!showScrollBtn}
60
+ onClick={() => {
61
+ bbMsgHistoryRef.current?.scrollToBottom();
62
+ }}>
63
+
64
+ <svg
65
+ data-testid="geist-icon"
66
+ height="16"
67
+ stroke-linejoin="round"
68
+ viewBox="0 0 16 16"
69
+ width="16"
70
+ style={{
71
+ rotate: '180deg'
72
+ }}
73
+ className={classNames("transition-opacity duration-300 inline-block", {
74
+ "opacity-0": !showScrollBtn,
75
+ "opacity-100": showScrollBtn,
76
+ })}
60
77
  >
61
- {formattedData}
62
- </bb-msg-history>
63
- </Panel>
78
+ <path
79
+ fill-rule="evenodd"
80
+ clip-rule="evenodd"
81
+ d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
82
+ fill="currentColor"
83
+ ></path>
84
+ </svg>
85
+ </Button>
86
+ </>
64
87
  )}
65
88
  </Article>
66
89
  );
package/src/blog/pages/streaming/useScrollBtnVisibility.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { useEffect, useState } from "react";
2
+ import { BbMsgHistoryElement } from ".";
3
+
4
+ export const useScrollBtnVisibility = (ele: BbMsgHistoryElement) => {
5
+ const [visible, setVisible] = useState(false);
6
+
7
+ useEffect(() => {
8
+ if (!ele) {
9
+ return;
10
+ }
11
+
12
+ const handleShow = () => setVisible(true);
13
+ const handleHide = () => setVisible(false);
14
+
15
+ ele.addEventListener("bb-scrollbuttonshow", handleShow);
16
+ ele.addEventListener("bb-scrollbuttonhide", handleHide);
17
+
18
+ console.log("add event listeners");
19
+
20
+ return () => {
21
+ ele.removeEventListener("bb-scrollbuttonshow", handleShow);
22
+ ele.removeEventListener("bb-scrollbuttonhide", handleHide);
23
+ };
24
+ }, [ele])
25
+
26
+ return visible;
27
+ }