58 |
59 | 2. ~~翻译~~和朗读(翻译已失效)
60 |
61 | ~~大量使用 google translate api，超出官方调用频率会导致请求超时，翻译或朗读失败。~~
62 |
63 | 3. 鼠标穿透功能
64 |
65 | 点击顶部穿透按钮后可开启鼠标穿透功能，再次点击可取消解锁
66 |
67 | 4. 自定义样式(仅支持昵称样式和弹幕样式)
68 |
69 | 点击 Dev Tools，编写对应的编辑 CSS 样式，只复制 css 声明语句，例如上图的 css 为
70 |
71 | ```css
72 | text-shadow: 1px 1px 2px #e91e63, 0 0 0.2em #e91e63;
73 | ```
74 |
75 | 填入到 `设置` > `自定义样式` 中，`Ctrl+R` 重载即可。
76 |
77 | ### 开发
78 |
79 | [README_DEV](https://github.com/Beats0/bilive-danmaku/blob/master/README_DEV.md)
80 |
81 | ### [更新日志](https://github.com/Beats0/bilive-danmaku/blob/master/CHANGELOG.md)
82 |
83 | ### LICENSE
84 |
85 | [MIT](https://github.com/Beats0/bilive-danmaku/blob/master/LICENSE)
86 |
87 | [MIT © Electron React Boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate)
88 |
--------------------------------------------------------------------------------
/README_DEV.md:
--------------------------------------------------------------------------------
1 | # DEV
2 |
3 | 开发文档
4 |
5 | 设置源
6 |
7 | ```
8 | npm config set registry https://registry.npmmirror.com
9 | yarn config set registry https://registry.npmmirror.com
10 | yarn config set disturl https://registry.npmmirror.com/dist
11 | yarn config set electron_mirror https://registry.npmmirror.com/electron/
12 |
13 |
14 | npm config set disturl=https://registry.npmmirror.com/-/binary/node
15 | npm config set ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/
16 | yarn config set disturl https://registry.npmmirror.com/-/binary/node -g
17 | ```
18 |
19 | eslint 配置不生效，JSX 代码格式各种警告，实在搞不动了，有代码强迫症的把 eslint 检查关了吧 = =
20 |
21 | ## 命令
22 |
23 | 调试
24 |
25 | ```sh
26 | # install
27 | $ npm intall
28 |
29 | # run dev
30 | $ npm run start
31 |
32 | # 打包
33 | $ npm run package
34 | ```
35 |
36 | 默认打包将输出到 release 文件夹中
37 |
38 | ## 快速生成 icns 图标
39 |
40 | ```
41 | sips -z 16 16 pic.png --out icon/icon_16x16.png
42 | sips -z 24 24 pic.png --out icon/icon_24x24.png
43 | sips -z 32 32 pic.png --out icon/icon_32x32.png
44 | sips -z 48 48 pic.png --out icon/icon_48x48.png
45 | sips -z 64 64 pic.png --out icon/icon_64x64.png
46 | sips -z 96 96 pic.png --out icon/icon_96x96.png
47 | sips -z 128 128 pic.png --out icon/icon_128x128.png
48 | sips -z 256 256 pic.png --out icon/icon_256x256.png
49 | sips -z 512 512 pic.png --out icon/icon_512x512.png
50 | sips -z 1024 1024 pic.png --out icon/icon_1024x1024.png
51 | ```
52 |
53 | ```sh
54 | iconutil -c icns icon -o Icon.icns
55 | ```
56 |
--------------------------------------------------------------------------------
/assets/assets.d.ts:
--------------------------------------------------------------------------------
1 | type Styles = Record
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/DanmakuControl/CustomStyledPanel.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import StyledDao, { StyledDaoNS } from '../../../dao/StyledDao';
3 |
4 | // user 样式
5 | const UserWrapperStr = StyledDao.get(StyledDaoNS.UserWrapper);
6 |
7 | // content 样式
8 | const ContentWrapperStr = StyledDao.get(StyledDaoNS.ContentWrapper);
9 |
10 | export default function CustomStyledPanel() {
11 | const { t } = useTranslation();
12 |
13 | return (
14 | <>
15 | {t('CustomStyleTitle')}
16 |
17 |
18 | {t('CustomStyledUserName')}
19 |
20 |
24 | StyledDao.save(StyledDaoNS.UserWrapper, e.target.value)
25 | }
26 | className="link-input t-center v-middle border-box level-input custom-style"
27 | />
28 |
29 |
30 |
31 | {t('CustomStyledDanmakuContent')}
32 |
33 |
37 | StyledDao.save(StyledDaoNS.ContentWrapper, e.target.value)
38 | }
39 | className="link-input t-center v-middle border-box level-input custom-style"
40 | />
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/DanmakuControl/LanguagePanel.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import Menu, { Item as MenuItem } from 'rc-menu';
3 | import Dropdown from 'rc-dropdown';
4 | import { ConfigKey } from '../../../reducers/types';
5 | import { HandleUpdateConfigFunc } from './DanmakuControl';
6 | import lang from '../../../i18n/locales/lang.json';
7 | import { useAppSelector } from '../../../store/hooks';
8 | import { selectConfig } from '../../../store/features/configSlice';
9 |
10 | interface Props {
11 | configKey: 'languageCode' | 'translateTo' | 'voiceTranslateTo';
12 | handleUpdateConfig: HandleUpdateConfigFunc;
13 | }
14 |
15 | export default function LanguagePanel(props: Props) {
16 | const { configKey, handleUpdateConfig } = props;
17 | const config = useAppSelector(selectConfig);
18 | const { i18n } = useTranslation();
19 |
20 | function onSelect({ key }) {
21 | switch (configKey) {
22 | case 'languageCode':
23 | handleUpdateConfig(ConfigKey.languageCode, key);
24 | i18n.changeLanguage(key);
25 | break;
26 | case 'translateTo':
27 | handleUpdateConfig(ConfigKey.translateTo, key);
28 | break;
29 | case 'voiceTranslateTo':
30 | handleUpdateConfig(ConfigKey.voiceTranslateTo, key);
31 | break;
32 | default:
33 | break;
34 | }
35 | }
36 |
37 | const menu = (
38 |
43 | );
44 |
45 | const currentLang = lang.filter(i => i.code === config[configKey])[0];
46 |
47 | return (
48 |
158 |
168 | );
169 | }
170 |
171 | export default forwardRef(DanmakuGiftList);
172 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/DanmakuList/DanmakuList.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | forwardRef,
3 | useCallback,
4 | useEffect,
5 | useImperativeHandle,
6 | useRef,
7 | useState
8 | } from 'react';
9 |
10 | interface DanmakuListProps {
11 | showGiftDanmakuList: boolean;
12 | height: number;
13 | maxMessageCount: number;
14 | }
15 |
16 | export interface DanmakuListRef {
17 | onMessage: (lists: React.ReactElement[]) => void;
18 | clearMessage: () => void;
19 | }
20 |
21 | function DanmakuList(props: DanmakuListProps, ref: React.Ref
159 |
160 |
161 |
165 | {[...renderDanmakuGiftLists]}
166 |
167 |
88 | {[...renderDanmakuLists]}
89 |
90 | );
91 | }
92 |
93 | export default forwardRef(DanmakuList);
94 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/GiftBubble/Container.tsx:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import GiftBubbleItem from "./GiftBubbleItem";
3 | import { openLink, userAvatarFilter } from "../../../utils/common";
4 | import { ComboData } from "./Provider";
5 | import { useAppSelector } from "../../../store/hooks";
6 | import { selectDanmaku } from "../../../store/features/danmakuSlice";
7 |
8 | export interface GiftListsItem {
9 | id: number;
10 | ttl: number;
11 | comboId?: string;
12 | msg: DanmakuGift;
13 | }
14 |
15 | interface GiftContainerProps {
16 | lists: GiftListsItem[];
17 | comboMap: Map
65 | ) {
16 | const [lists, setLists] = useState([]);
17 | const giftRef = useRef(null);
18 |
19 | const onMessage = useCallback(
20 | (msg: GiftBubbleMsg) => {
21 | lists.push(msg);
22 | setLists([...lists]);
23 | onGiftBubbleMessage(msg);
24 | },
25 | []
26 | );
27 |
28 | const onGiftBubbleMessage = useCallback((msg: GiftBubbleMsg) => {
29 | giftRef.current.onMessage && giftRef.current.onMessage(msg);
30 | }, []);
31 |
32 | useImperativeHandle(
33 | ref,
34 | () => ({
35 | onMessage
36 | }),
37 | [onMessage]
38 | );
39 |
40 | return (
41 | ) => {
12 | const { addItem, updateItem } = useList();
13 |
14 | const onMessage = useCallback(
15 | (msg: SEND_GIFT | COMBO_SEND | COMBO_END) => {
16 | // console.log('onMessage', msg);
17 | if (msg.cmd === CmdType.SEND_GIFT) {
18 | handleAddItem(msg);
19 | } else if (msg.cmd === CmdType.COMBO_SEND) {
20 | handleUpdateItem(msg);
21 | }
22 | },
23 | [addItem, updateItem]
24 | );
25 |
26 | useImperativeHandle(
27 | ref,
28 | () => ({
29 | onMessage
30 | }),
31 | [onMessage]
32 | );
33 |
34 | const handleAddItem = (msg: GiftBubbleMsg) => {
35 | const ttl = defaultTtl + msg.comboStayTime;
36 | addItem(msg, ttl);
37 | };
38 |
39 | // TODO: handleUpdateItem
40 | const handleUpdateItem = (msg: GiftBubbleMsg) => {
41 | const ttl = defaultTtl + msg.comboStayTime;
42 | updateItem(msg, ttl);
43 | };
44 |
45 | return <>
46 | };
47 |
48 | export default forwardRef(ListEntity);
49 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/GiftBubble/GiftBubbleItem.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useRef } from 'react';
2 | import styled from 'styled-components';
3 | import { animated } from 'react-spring';
4 | import { useList } from './Provider';
5 | import { DanmakuSuperChat } from '../MsgModel';
6 |
7 | export interface SuperChatItemProps {
8 | id: number;
9 | ttl: number;
10 | msg: DanmakuSuperChat;
11 | config: ConfigStateType;
12 | }
13 |
14 | const Wrapper = styled(animated.div)`
15 | padding: 16px 16px 16px 0;
16 | margin-bottom: 16px;
17 | width: 288px;
18 | position: relative;
19 | `;
20 |
21 | const GiftBubbleItem = ({ children, id, ttl, style }: SuperChatItemProps) => {
22 | const [timer, setTimer] = useState(ttl);
23 | const { removeItem } = useList();
24 | const intervalRef = useRef();
25 |
26 | const active = () => {
27 | if (timer > 0) {
28 | const timerId = setInterval(() => {
29 | setTimer(t => t - 1);
30 | }, 1000);
31 | intervalRef.current = timerId;
32 | }
33 | };
34 |
35 | const destroy = () => {
36 | clearInterval(intervalRef.current);
37 | if (timer === 1) {
38 | removeItem(id);
39 | }
40 | };
41 |
42 | useEffect(() => {
43 | // console.log('timer=>', timer)
44 | active();
45 | return () => destroy();
46 | }, [id, removeItem, ttl, timer]);
47 |
48 | return {children} ;
49 | };
50 |
51 | export default GiftBubbleItem;
52 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/GiftBubble/Provider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useContext, useState } from 'react';
2 | import SuperChatContainer, { GiftListsItem } from './Container';
3 | import { sortBy, unionSet } from '../../../utils/common';
4 |
5 | const SuperChatContext = React.createContext(null);
6 |
7 | export interface ComboData {
8 | giftCount?: number;
9 | superGiftNum?: number;
10 | superBatchGiftNum?: number;
11 | }
12 |
13 | let id = 1;
14 | const comboMap = new Map();
15 | // 初始化为0
16 | comboMap.set('-1', 0);
17 |
18 | const updateMap = (comboId: string, msg: DanmakuGift) => {
19 | comboMap.set(comboId, msg);
20 | // if (msg.superGiftNum) {
21 | // comboMap.set(comboId, { superGiftNum: msg.superGiftNum });
22 | // } else {
23 | // comboMap.set(comboId, { giftCount: msg.giftCount });
24 | // }
25 | };
26 |
27 | const ListProvider = ({ children }: { children: React.ReactNode }) => {
28 | const [lists, setLists] = useState([]);
29 |
30 | // FIXME: 大量添加会造成阻塞，速度过快添加不了
31 | const addItem = useCallback(
32 | (msg: DanmakuGift, ttl: number) => {
33 | setLists(lists => {
34 | const comboId = msg.batchComboId;
35 | // combo连击增加
36 | if (comboId) {
37 | updateMap(comboId, msg);
38 | }
39 | let newLists = [
40 | ...lists,
41 | {
42 | id: id++,
43 | ttl,
44 | comboId,
45 | msg
46 | }
47 | ].sort(sortBy('price', false, 'msg'));
48 | newLists = unionSet(newLists, 'comboId');
49 | // 最多只显示3个
50 | if (newLists.length > 3) {
51 | removeItem(newLists[0].id);
52 | // newLists.splice(0, 1);
53 | }
54 | return newLists;
55 | });
56 | },
57 | [setLists]
58 | );
59 |
60 | const updateItem = useCallback(
61 | (msg: GiftSend, ttl: number, comboId: string) => {
62 | setLists(lists => {
63 | // const newLists = [
64 | // ...lists,
65 | // {
66 | // id: id++,
67 | // ttl,
68 | // msg
69 | // }
70 | // ].sort(sortBy('price', false, 'msg'));
71 | // if (newLists.length > 3) {
72 | // removeItem(newLists[0].id);
73 | // // newLists.splice(0, 1);
74 | // }
75 | // return newLists;
76 | // comboMap.set(msg.batchComboId, msg.comboNum);
77 | updateMap(msg.batchComboId, msg);
78 |
79 | lists.map(item => {
80 | if (item.comboId === comboId) {
81 | item.msg.giftCount = msg.comboNum;
82 | return item;
83 | }
84 | });
85 | console.log('handle update update', msg, lists);
86 | return lists;
87 | });
88 | },
89 | [setLists]
90 | );
91 |
92 | const removeItem = useCallback(
93 | (id: number) => {
94 | setLists(lists => {
95 | const newLists = lists.filter(t => t.id !== id);
96 | return newLists;
97 | });
98 | },
99 | [setLists]
100 | );
101 |
102 | return (
103 |
110 |
113 | );
114 | };
115 |
116 | const useList = () => {
117 | return useContext(SuperChatContext);
118 | };
119 |
120 | export { SuperChatContext, useList };
121 | export default ListProvider;
122 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/LiveRoomLists/LiveRoomLists.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import Tooltip from 'rc-tooltip';
3 | import { animated, useSpring } from 'react-spring';
4 | import { useTranslation } from 'react-i18next';
5 | import LiveRoomDao from '../../../dao/LiveRoomDao';
6 | import { getLiveRoomInfo, LiveRoom } from '../../../api';
7 | import { openLink, sortBy } from "../../../utils/common";
8 | import { useAppSelector } from '../../../store/hooks';
9 | import { selectConfig } from '../../../store/features/configSlice';
10 |
11 | interface LiveRoomListsProps {
12 | onChangeRoomID: (e: null, shortId: number) => void;
13 | }
14 |
15 | interface ListsProps extends LiveRoomListsProps {
16 | visible: boolean;
17 | }
18 |
19 | function FadeInRight({ children }) {
20 | const props = useSpring({
21 | from: {
22 | transform: 'translate3d(100%, 0, 0)',
23 | opacity: 0,
24 | },
25 | to: {
26 | transform: 'translate3d(0, 0, 0)',
27 | opacity: 1,
28 | },
29 | });
30 | return {children} ;
31 | }
32 |
33 | function Lists(props: ListsProps) {
34 | const { onChangeRoomID, visible } = props;
35 | const { t } = useTranslation();
36 | const config = useAppSelector(selectConfig);
37 | const currentRoomID = config.shortid;
38 | const roomListsCache = LiveRoomDao.getLists();
39 | const [loading, setLoading] = useState(true);
40 | let [liveRoomLists, setLiveRoomLists] = useState([]);
41 | // const currentLiveRoomLists = useRef(liveRoomLists);
42 |
43 | function resetLists() {
44 | setLoading(true);
45 | liveRoomLists = [];
46 | setLiveRoomLists(liveRoomLists);
47 | }
48 |
49 | function handleChangeRoom(shortid: number) {
50 | onChangeRoomID(null, shortid);
51 | }
52 |
53 | function handleOpenRoom(shortid: number) {
54 | const url = `https://live.bilibili.com/${shortid}`;
55 | openLink(url);
56 | }
57 |
58 | function handleDeleteRoom(shortid: number) {
59 | LiveRoomDao.delete(shortid);
60 | setLiveRoomLists((lists) => lists.filter((i) => i.shortid !== shortid));
61 | }
62 |
63 | async function fetchLiveRoomData() {
64 | for (let i = 0; i < roomListsCache.length; i++) {
65 | const roomData = await getLiveRoomInfo(roomListsCache[i].roomid);
66 | liveRoomLists.push(roomData);
67 | setLiveRoomLists((lists) => [...lists, roomData]);
68 | }
69 | liveRoomLists = liveRoomLists.sort(sortBy('isLive'));
70 | setLiveRoomLists([...liveRoomLists]);
71 | setLoading(false);
72 | }
73 |
74 | useEffect(() => {
75 | if (visible) {
76 | resetLists();
77 | fetchLiveRoomData();
78 | }
79 | }, [visible]);
80 |
81 | if (loading) {
82 | return (
83 | setListsVisible(!listsVisible)}
154 | trigger="click"
155 | overlay={
156 |
168 | );
169 | }
170 |
171 | export default LiveRoomLists;
172 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgConnectSuccess.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 |
3 | export default function MsgConnectSuccess() {
4 | const { t } = useTranslation();
5 | return {children} ;
29 | }
30 |
31 | interface MsgEntityProps extends DanmakuDataFormatted {
32 | cmd: string;
33 | key: string;
34 | showTransition: boolean;
35 | data?: any;
36 | showGift?: boolean;
37 | }
38 |
39 | export default function MsgEntity(props: MsgEntityProps) {
40 | const { cmd, showTransition, showGift = false } = props;
41 | let Msg = null;
42 | switch (cmd) {
43 | case CmdType.DANMU_MSG:
44 | Msg = {Msg} : Msg;
87 | }
88 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgGuardBuy.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 |
3 | export default function MsgGuardBuy(props: GuardBuyMsg) {
4 | const { ...msg } = props;
5 | const { t } = useTranslation();
6 |
7 | return (
8 | 
openLink(`https://space.bilibili.com/${uid}`)}
11 | className="pointer user-avatar"
12 | />
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgVip.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector } from '../../../store/hooks';
2 | import { selectConfig } from '../../../store/features/configSlice';
3 |
4 | interface VipProps {
5 | isVip: boolean;
6 | isVipM: boolean;
7 | isVipY: boolean;
8 | }
9 |
10 | function MsgVip(vip: VipProps) {
11 | const config = useAppSelector(selectConfig);
12 | if (config.showVip === 0 || !vip.isVip) return null;
13 | if (vip.isVipY) {
14 | return 爷;
15 | }
16 | if (vip.isVipM) {
17 | return 爷;
18 | }
19 | return null;
20 | }
21 |
22 | export default MsgVip;
23 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgWelcome.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import MsgVip from './MsgVip';
3 | import { useAppSelector } from '../../../store/hooks';
4 | import { selectConfig } from '../../../store/features/configSlice';
5 |
6 | function MsgWelcome(props: MsgWelcome) {
7 | const { ...msg } = props;
8 | const { t } = useTranslation();
9 | const config = useAppSelector(selectConfig);
10 | if (config.blockEffectItem2 === 1) return null;
11 |
12 | return (
13 | {
44 | switch (data.cmd) {
45 | case CmdType.LIVE:
46 | break;
47 | case CmdType.DANMU_MSG:
48 | const userID = data.info['2']['0'];
49 | const danmakuMsg: DanmakuMsg = {
50 | cmd: CmdType.DANMU_MSG,
51 | username: data.info['2']['1'],
52 | userID,
53 | isAdmin: !!data.info['2']['2'],
54 | isVip: !!data.info['2']['3'],
55 | isVipM: !!data.info['2']['3'],
56 | isVipY: !!data.info['2']['4'],
57 | guardLevel: data.info['7'],
58 | content: data.info['1'],
59 | fanLv: data.info['3']['0'],
60 | fanName: data.info['3']['1'],
61 | liveUp: data.info['3']['2'],
62 | liveRoomID: data.info['3']['3'],
63 | userLevel: data.info['4']['0'] || 0,
64 | repeat: 0,
65 | };
66 | // 从消息中获取
67 | if (data.info["0"]["15"] && data.info["0"]["15"]["user"]) {
68 | const face = data.info["0"]["15"]["user"].base.face
69 | UserAvatarDao.save(userID, face);
70 | danmakuMsg.face = face;
71 | } else if (UserAvatarDao.has(userID)) {
72 | // 从Dao中获取,如果有就直接添加
73 | danmakuMsg.face = UserAvatarDao.get(userID).avatar;
74 | }
75 | // 不用这个了
76 | // else if (config.showAvatar && userID > 1) {
77 | // // 从api获取
78 | // UserInfoApiTask.push(userID);
79 | // // 频繁请求api会导致被ban
80 | // if (
81 | // UserInfoApiTask.getTaskQueueLength() <= apiTaskConfig.taskMaxLength
82 | // ) {
83 | // await sleep(apiTaskConfig.sleepMs);
84 | // }
85 | // danmakuMsg.face = UserAvatarDao.get(userID).avatar;
86 | // }
87 | return danmakuMsg;
88 | case CmdType.SEND_GIFT:
89 | const danmakuGiftMsg: GiftBubbleMsg = {
90 | cmd: CmdType.SEND_GIFT,
91 | username: data.data.uname,
92 | userID: data.data.uid,
93 | face: data.data.face,
94 | giftName: data.data.giftName,
95 | action: data.data.action,
96 | giftCount: data.data.num,
97 | coinType: data.data.coin_type,
98 | totalCoin: data.data.total_coin,
99 | price: data.data.num * data.data.price,
100 | giftAction: data.data.action,
101 | giftId: data.data.giftId
102 | };
103 |
104 | if (data.data.batch_combo_id) {
105 | danmakuGiftMsg.batchComboId = data.data.batch_combo_id;
106 | }
107 | if (data.data.super_gift_num) {
108 | danmakuGiftMsg.superGiftNum = data.data.super_gift_num;
109 | danmakuGiftMsg.superBatchGiftNum = data.data.super_batch_gift_num;
110 | danmakuGiftMsg.comboStayTime = data.data.combo_stay_time;
111 | }
112 | return danmakuGiftMsg;
113 | case CmdType.WELCOME:
114 | const welcomeMsg: MsgWelcome = {
115 | cmd: CmdType.WELCOME,
116 | username: data.data.uname,
117 | userID: data.data.uid,
118 | isAdmin: !!data.data.is_admin,
119 | isVip: !!data.data.vip,
120 | isVipM: data.data.vip === 1,
121 | isVipY: data.data.svip === 1
122 | };
123 | return welcomeMsg;
124 | case CmdType.WELCOME_GUARD:
125 | const welcomeguardMsg: MsgWelcomeGuard = {
126 | cmd: CmdType.WELCOME_GUARD,
127 | username: data.data.username,
128 | };
129 | return welcomeguardMsg;
130 | case CmdType.INTERACT_WORD:
131 | const interActWordMsg: MsgInterActWordMsg = {
132 | cmd: CmdType.INTERACT_WORD,
133 | msgType: data.data.msg_type,
134 | username: data.data.uname,
135 | userID: data.data.uid,
136 | };
137 | return interActWordMsg;
138 | case CmdType.GUARD_BUY:
139 | const guardBuyMsg: GuardBuyMsg = {
140 | cmd: CmdType.GUARD_BUY,
141 | username: data.data.username,
142 | userID: data.data.uid,
143 | guardLevel: data.data.guard_level,
144 | giftName: ['', '总督', '提督', '舰长'][data.data.guard_level],
145 | giftCount: data.data.num
146 | };
147 | return guardBuyMsg;
148 | case CmdType.SUPER_CHAT_MESSAGE:
149 | const superChatMsg: SUPER_CHAT_MESSAGE = {
150 | cmd: CmdType.SUPER_CHAT_MESSAGE,
151 | data: data.data
152 | };
153 | return superChatMsg;
154 | case CmdType.COMBO_SEND:
155 | const comboSendMsg: GiftBubbleMsg = {
156 | cmd: CmdType.COMBO_SEND,
157 | userID: data.data.uid,
158 | username: data.data.uname,
159 | giftName: data.data.gift_name,
160 | giftId: data.data.gift_id,
161 | comboId: data.data.combo_id,
162 | comboNum: data.data.combo_num,
163 | batchComboId: data.data.batch_combo_id,
164 | action: data.data.action
165 | };
166 | return comboSendMsg;
167 | case CmdType.POPULAR:
168 | const popularMsg: POPULAR = {
169 | cmd: CmdType.POPULAR,
170 | popular: data.popular
171 | };
172 | return popularMsg;
173 | case CmdType.WATCHED_CHANGE:
174 | const watchedChangeMsg: WATCHED_CHANGE = {
175 | cmd: CmdType.WATCHED_CHANGE,
176 | data: data.data
177 | };
178 | return watchedChangeMsg;
179 | // case CmdType.COMBO_END:
180 | // // TODO:
181 | // break;
182 | case CmdType.ROOM_BLOCK_MSG:
183 | const roomBlockMsg: MsgRoomBlockMsg = {
184 | cmd: CmdType.ROOM_BLOCK_MSG,
185 | username: data.data.uname,
186 | userID: data.data.uid,
187 | };
188 | return roomBlockMsg;
189 | case CmdType.WARNING:
190 | const warningMsg: WarningMsg = {
191 | cmd: CmdType.WARNING,
192 | msg: data.msg,
193 | };
194 | return warningMsg;
195 | case CmdType.CUT_OFF:
196 | const cutOffMsg: CutOffMsg = {
197 | cmd: CmdType.CUT_OFF,
198 | msg: data.msg,
199 | };
200 | return cutOffMsg;
201 | default:
202 | return assertUnknownCmdType(data.cmd);
203 | }
204 | }
205 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/RankMessageLists/RankMessageLists.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import Tooltip from 'rc-tooltip';
3 | import { animated, useSpring } from 'react-spring';
4 | import { useTranslation } from 'react-i18next';
5 | import { getRankMessageList, RankMessageListsItem } from '../../../api';
6 | import { useAppSelector } from '../../../store/hooks';
7 | import { selectConfig } from '../../../store/features/configSlice';
8 | import { dateFormat, openLink } from '../../../utils/common';
9 |
10 | interface ListsProps {
11 | visible: boolean;
12 | }
13 |
14 | function FadeInRight({ children }) {
15 | const props = useSpring({
16 | from: {
17 | transform: 'translate3d(100%, 0, 0)',
18 | opacity: 0,
19 | },
20 | to: {
21 | transform: 'translate3d(0, 0, 0)',
22 | opacity: 1,
23 | },
24 | });
25 | return {children} ;
26 | }
27 |
28 | function Lists(props: ListsProps) {
29 | const { visible } = props;
30 | const { t } = useTranslation();
31 | const config = useAppSelector(selectConfig);
32 | const [loading, setLoading] = useState(true);
33 | const [lists, setLists] = useState([]);
34 |
35 | function resetLists() {
36 | setLoading(true);
37 | setLists([]);
38 | }
39 |
40 | async function fetchRankMessageListData() {
41 | const messageListsData = await getRankMessageList(config.roomid);
42 | setLists(messageListsData);
43 | setLoading(false);
44 | }
45 |
46 | useEffect(() => {
47 | if (visible) {
48 | resetLists();
49 | fetchRankMessageListData();
50 | }
51 | }, [visible]);
52 |
53 | if (loading) {
54 | return (
55 | setListsVisible(!listsVisible)}
119 | trigger="click"
120 | overlay={
128 | );
129 | }
130 |
131 | export default RankMessageLists;
132 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/SuperChatPanel/Container.tsx:
--------------------------------------------------------------------------------
1 | import SuperChatItem from './SuperChatItem';
2 |
3 | const SuperChatContainer = ({ lists }) => {
4 | return (
5 | <>
6 | {lists.map(item => {
7 | return
52 |
55 | );
56 | };
57 |
58 | const useList = () => {
59 | const listHelpers = useContext(SuperChatContext);
60 | return listHelpers;
61 | };
62 |
63 | export { SuperChatContext, useList };
64 | export default ListProvider;
65 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/SuperChatPanel/SuperChatEntity.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
2 | import { useList } from './Provider';
3 |
4 | export interface SuperChatEntityProps {
5 | onMessage: (msg: SUPER_CHAT_MESSAGE_DATA) => void;
6 | clearMessage: () => void;
7 | }
8 |
9 | const ListEntity = (props, ref: React.Ref) => {
10 | const { addItem, clear } = useList();
11 |
12 | const onMessage = useCallback(
13 | (msg: SUPER_CHAT_MESSAGE_DATA) => {
14 | handleAddItem(msg);
15 | },
16 | [addItem]
17 | );
18 |
19 | const clearMessage = useCallback(
20 | () => {
21 | clear();
22 | },
23 | [clear]
24 | );
25 |
26 | useImperativeHandle(
27 | ref,
28 | () => ({
29 | onMessage,
30 | clearMessage
31 | }),
32 | [onMessage, clearMessage]
33 | );
34 |
35 | const handleAddItem = (msg: SUPER_CHAT_MESSAGE_DATA) => {
36 | // 总时长
37 | const ttl = msg.end_time - msg.start_time;
38 | addItem(msg, ttl);
39 | };
40 |
41 | return <>;
42 | };
43 |
44 | export default forwardRef(ListEntity);
45 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/SuperChatPanel/SuperChatItem.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useRef } from 'react';
2 | import Tooltip from 'rc-tooltip';
3 | import { useList } from './Provider';
4 | import MsgSuperChatCard from '../MsgEntity/MsgSuperChatCard';
5 |
6 | export interface SuperChatItemProps {
7 | id: number;
8 | ttl: number;
9 | msg: SUPER_CHAT_MESSAGE_DATA;
10 | }
11 |
12 | const SuperChatItem = ({ id, ttl, msg }: SuperChatItemProps) => {
13 | // timer = ttl(总时长) - (end_time - ts)已过期时长
14 | const [timer, setTimer] = useState(ttl - (msg.ts - msg.start_time));
15 | const { removeItem } = useList();
16 | const [showDetail, setShowDetail] = useState(false);
17 | const intervalRef = useRef();
18 |
19 | const active = () => {
20 | if (timer > 0) {
21 | const timerId = setInterval(() => {
22 | setTimer(t => t - 1);
23 | }, 1000);
24 | intervalRef.current = timerId;
25 | }
26 | };
27 |
28 | const destroy = () => {
29 | clearInterval(intervalRef.current);
30 | if (timer === 1) {
31 | removeItem(id);
32 | }
33 | };
34 |
35 | useEffect(() => {
36 | active();
37 | return () => destroy();
38 | }, [id, removeItem, ttl, timer]);
39 |
40 | const w = Math.floor((timer / ttl) * 100);
41 |
42 | return (
43 | setShowDetail(!showDetail)}
49 | trigger="click"
50 | overlay={
77 | );
78 | };
79 |
80 | export default SuperChatItem;
81 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/SuperChatPanel/SuperChatPanel.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | forwardRef,
3 | useImperativeHandle,
4 | useCallback,
5 | useRef,
6 | useState
7 | } from 'react';
8 | import ListProvider from './Provider';
9 | import SuperChatEntity, { SuperChatEntityProps } from './SuperChatEntity';
10 | import { SuperChatItemProps } from './SuperChatItem';
11 |
12 | export interface SuperChatPanelRef {
13 | onScEntityMessage: (msg: SUPER_CHAT_MESSAGE_DATA) => void;
14 | clearMessage: () => void;
15 | }
16 |
17 | function SuperChatPanel(props, ref: React.Ref) {
18 | const [lists, setLists] = useState([]);
19 | const [prevVisible, setPrevVisible] = useState(false);
20 | const [nextVisible, setNextVisible] = useState(false);
21 | const scEntityRef = useRef(null);
22 | const sliderRef = useRef(null);
23 | const offsetWidthValue = sliderRef.current ? sliderRef.current.offsetWidth : 0;
24 | const scrollWidthValue = sliderRef.current ? sliderRef.current.scrollWidth : 0;
25 |
26 | const onMessage = useCallback(
27 | (msg: SUPER_CHAT_MESSAGE) => {
28 | lists.push(msg);
29 | setLists([...lists]);
30 | onScEntityMessage(msg);
31 | showSliderBtn(sliderRef.current.offsetWidth, sliderRef.current.scrollWidth)
32 | },
33 | []
34 | );
35 |
36 | const onClearMessage = useCallback(
37 | () => {
38 | clearMessage()
39 | }, []
40 | )
41 |
42 | const onScEntityMessage = useCallback((msg) => {
43 | scEntityRef.current.onMessage && scEntityRef.current.onMessage(msg);
44 | }, []);
45 |
46 | const clearMessage = useCallback(() => {
47 | scEntityRef.current.clearMessage && scEntityRef.current.clearMessage();
48 | }, []);
49 |
50 | useImperativeHandle(
51 | ref,
52 | () => ({
53 | onMessage,
54 | onClearMessage
55 | }),
56 | [onMessage, onClearMessage]
57 | );
58 |
59 | const removeItemCb = (lists: SuperChatItemProps[]) => {
60 | setLists(lists);
61 | showSliderBtn(sliderRef.current.offsetWidth, sliderRef.current.scrollWidth);
62 | };
63 |
64 | const showSliderBtn = (offsetWidthValue, scrollWidthValue) => {
65 | setPrevVisible(sliderRef.current.scrollLeft > 0);
66 | setNextVisible(sliderRef.current.scrollLeft + offsetWidthValue < scrollWidthValue)
67 | };
68 |
69 | const handleArrowClick = (position: string) => {
70 | const el = sliderRef.current;
71 | if(position === 'left') {
72 | el.scrollLeft -= offsetWidthValue / 2;
73 | } else {
74 | el.scrollLeft += offsetWidthValue / 2;
75 | }
76 | showSliderBtn(offsetWidthValue, scrollWidthValue);
77 | };
78 |
79 | return (
80 |
66 |
72 |
73 |
74 |
125 |
126 | );
127 | })
128 | }
129 |
130 | );
131 | };
132 |
133 | export default GiftContainer;
134 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/GiftBubble/GiftBubble.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | forwardRef,
3 | useCallback,
4 | useImperativeHandle,
5 | useRef,
6 | useState
7 | } from 'react';
8 | import ListProvider from './Provider';
9 | import GiftBubbleEntity, { GiftBubbleEntityRef } from './GiftBubbleEntity';
10 |
11 | export interface GiftBubbleRef {
12 | onMessage: (msg: GiftBubbleMsg) => void;
13 | }
14 |
15 | function GiftBubble(props, ref: React.Ref
75 |
124 |
76 |
123 | handleOpenUser(msg.userID)}
79 | style={ { backgroundImage: `url(${ face })` } }
80 | />
81 |
82 |
83 |
89 |
84 | { msg.username }
85 |
86 | { msg.giftAction }
87 | { msg.giftName }
88 |
90 | {/* 
103 | ) }
104 | {/* 不包含连击效果 count = giftCount */ }
105 | {/*
122 | */ }
91 | {/* */ }
92 | {/* */ }
93 | {/* */ }
94 | {/* */ }
95 | {/*
*/ }
96 | {/* 过期的礼物或没有图片的礼物不显示图片 */ }
97 | { giftItem.gif && (
98 | */ }
106 | {/* */ }
107 | {/* {giftCount && Multiply(giftCount)} */ }
108 | {/*
*/ }
109 |
110 | {/* 包含连击效果: count = giftCount * superBatchGiftNum */ }
111 | {
112 |
113 | {/* */ }
114 |
115 | { Multiply(
116 | msg.batchComboId,
117 | giftCount * superBatchGiftNum
118 | ) }
119 |
120 | }
121 |
42 |
48 | );
49 | }
50 |
51 | export default forwardRef(GiftBubble);
52 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/GiftBubble/GiftBubbleEntity.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
2 | import { useList } from './Provider';
3 | import { CmdType } from '../MsgModel';
4 |
5 | export interface GiftBubbleEntityRef {
6 | onMessage: () => void;
7 | }
8 |
9 | const defaultTtl = 1;
10 |
11 | const ListEntity = (props, ref: React.Ref
43 |
44 |
46 |
47 |
84 | {t('LiveRoomListsLoading')}
85 |
93 | );
94 | }
95 | return (
96 |
86 |
92 |
87 | Loading(
88 | {liveRoomLists.length}/{roomListsCache.length}
89 | )...
90 |
91 |
97 |
98 | {liveRoomLists.map(i => {
99 | return (
100 |
134 |
135 | );
136 | }
137 |
138 | function LiveRoomLists(props: LiveRoomListsProps) {
139 | const { onChangeRoomID } = props;
140 | const { t } = useTranslation();
141 | const config = useAppSelector(selectConfig);
142 | const [listsVisible, setListsVisible] = useState(false);
143 |
144 | return (
145 |
101 |
131 | );
132 | })}
133 | handleOpenRoom(i.shortid)}
104 | >
105 |
109 | {i.isLive && }
110 |
111 | handleChangeRoom(i.shortid)}
114 | >
115 |
125 | handleDeleteRoom(i.shortid)}
128 | className="icon-item icon-font icon-error error liveIcon live-icon-item pointer"
129 | />
130 | 119 | {i.uname} 120 |
121 |122 | {i.title} 123 |
124 |{t('SocketConnectSuccess')}
;
6 | }
7 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgConnecting.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 |
3 | export default function MsgConnecting() {
4 | const { t } = useTranslation();
5 | return {t('SocketDanmakuConnecting')}
;
6 | }
7 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgDanmu.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useEffect, useState } from 'react';
2 | import styled from 'styled-components';
3 | import Tooltip from 'rc-tooltip';
4 | import MsgVip from './MsgVip';
5 | import MsgUserAvatar from './MsgUserAvatar';
6 | import { ConfigKey } from '../../../reducers/types';
7 | import { currentTranslateToCode, translate } from '../../../utils/translation';
8 | import { openLink } from '../../../utils/common';
9 | import voice from '../../../utils/vioce';
10 | import StyledDao, { StyledDaoNS } from '../../../dao/StyledDao';
11 | import { useAppDispatch, useAppSelector } from "../../../store/hooks";
12 | import { selectConfig, updateConfig } from "../../../store/features/configSlice";
13 | import { useTranslation } from "react-i18next";
14 |
15 | /**
16 | * userName 样式
17 | * eg:
18 | * const UserWrapper = styled.span`
19 | * text-shadow: 1px 1px 2px #E91E63, 0 0 0.2em #E91E63;
20 | * `
21 | * */
22 | const UserWrapperStr = StyledDao.get(StyledDaoNS.UserWrapper);
23 | const UserWrapper = styled.span`
24 | ${UserWrapperStr}
25 | `;
26 |
27 | // content 样式
28 | const ContentWrapperStr = StyledDao.get(StyledDaoNS.ContentWrapper);
29 | const ContentWrapper = styled.span`
30 | ${ContentWrapperStr}
31 | `;
32 |
33 | function MsgDanmu(props: DanmakuMsg) {
34 | const dispatch = useAppDispatch();
35 | const { t } = useTranslation();
36 | const config = useAppSelector(selectConfig);
37 |
38 | const [showToolTip, setShowToolTip] = useState(false);
39 | let [translateContent, setTranslateContent] = useState(props.content);
40 |
41 | // 翻译文字
42 | const handleTranslate = () => {
43 | translate(props.content, {
44 | from: 'auto',
45 | to: currentTranslateToCode()
46 | })
47 | .then(translateObj => {
48 | translateContent = `${translateObj.text}`;
49 | setTranslateContent(translateContent);
50 | })
51 | .catch((e: any) => {
52 | console.log(e);
53 | translateContent = `${props.content}(${t('TranslateFailed')})`;
54 | setTranslateContent(translateContent);
55 | })
56 | .finally(() => {
57 | setShowToolTip(false);
58 | });
59 | };
60 |
61 | useEffect(() => {
62 | if (config.autoTranslate === 1) {
63 | handleTranslate();
64 | }
65 | }, []);
66 |
67 | // 屏蔽用户
68 | const handleBlockUser = (uid: number) => {
69 | let blockUserLists = JSON.parse(JSON.stringify(config.blockUserLists));
70 | blockUserLists.push(uid);
71 | blockUserLists = [...new Set(blockUserLists)];
72 | dispatch(updateConfig({ k: ConfigKey.blockUserLists, v: blockUserLists }));
73 | setShowToolTip(false);
74 | };
75 |
76 | // 屏蔽对应弹幕文字
77 | const handleBlockDanmaku = (text: string) => {
78 | let blockDanmakuLists = JSON.parse(JSON.stringify(config.blockDanmakuLists));
79 | blockDanmakuLists.push(text);
80 | blockDanmakuLists = [...new Set(blockDanmakuLists)];
81 | dispatch(updateConfig({ k: ConfigKey.blockDanmakuLists, v: blockDanmakuLists }));
82 | setShowToolTip(false);
83 | };
84 |
85 | const handleReadDanmaku = (uname: string, text: string) => {
86 | voice.resetPush(uname, text);
87 | };
88 |
89 | const danmakuActionMenu = (uid: number, uname: string, text: string) => {
90 | return (
91 |
92 | openLink(`https://space.bilibili.com/${uid}`)}>{uname}
93 | {t('DanmakuTranslate')}
94 | handleReadDanmaku(uname, text)}>{t('DanmakuRead')}
95 | handleBlockUser(uid)}>{t('DanmakuBlockUser')}
96 | handleBlockDanmaku(text)}>{t('DanmakuBlockSimilar')}
97 |
98 | )
99 | }
100 |
101 | return (
102 |
103 | {
104 | config.showAvatar === 1 && MsgUserAvatar(props.userID, props.face)
105 | }
106 | {
107 | props.isAdmin &&
108 | }
109 |
111 |
127 | {props.username}:
128 |
129 |
130 | setShowToolTip(v)}
135 | trigger="click"
136 | overlay={danmakuActionMenu(props.userID, props.username, props.content)}
137 | >
138 |
139 |
140 | {translateContent}
141 | {props.repeat > 0 && ({props.repeat})}
142 |
143 |
144 |
145 |
146 | );
147 | }
148 |
149 | export default memo(MsgDanmu);
150 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgDisconnected.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 |
3 | export default function MsgDisconnected() {
4 | const { t } = useTranslation();
5 | return
115 |
120 | )
121 | }
122 | {
123 | config.showLvLabel === 1 && 20 ? 20 : props.fanLv}`] }>
116 | { props.fanName }
117 | { props.fanLv }
118 |
119 | UL {props.userLevel}
124 | }
125 |
126 | {t('SocketDisconnected')}
;
6 | }
7 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgEntity.tsx:
--------------------------------------------------------------------------------
1 | import { animated, useSpring } from 'react-spring';
2 | import { CmdType } from '../MsgModel';
3 | import MsgWelcome from './MsgWelcome';
4 | import MsgDanmu from './MsgDanmu';
5 | import MsgLive from './MsgLive';
6 | import MsgSendGift from './MsgSendGift';
7 | import MsgWelcomeGuard from './MsgWelcomeGuard';
8 | import MsgInterActWord from './MsgInterActWord';
9 | import MsgGuardBuy from './MsgGuardBuy';
10 | import MsgGuardBuySystem from './MsgGuardBuySystem';
11 | import MsgConnecting from './MsgConnecting';
12 | import MsgDisconnected from './MsgDisconnected';
13 | import MsgConnectSuccess from './MsgConnectSuccess';
14 | import MsgSuperChatCard from './MsgSuperChatCard';
15 | import MsgRoomBlock from './MsgRoomBlock';
16 |
17 | function FadeInUp({ children }) {
18 | const props = useSpring({
19 | from: {
20 | transform: 'translate3d(0, 100%, 0)',
21 | opacity: 0
22 | },
23 | to: {
24 | transform: 'translate3d(0, 0, 0)',
25 | opacity: 1
26 | }
27 | });
28 | return
9 | {msg.username}
10 |
11 | {t('DanmakuGuardBuy')}
12 | {props.giftName}
13 |
14 |
18 |
19 | X {msg.giftCount}
20 | {t('DanmakuGuardBuyTime')}
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgGuardBuySystem.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 |
3 | export default function MsgGuardBuy(props: GuardBuyMsg) {
4 | const { ...msg } = props;
5 | const { t } = useTranslation();
6 |
7 | return (
8 |
9 |
13 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgInterActWord.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import { useAppSelector } from '../../../store/hooks';
3 | import { selectConfig } from '../../../store/features/configSlice';
4 | import { openLink } from '../../../utils/common';
5 |
6 | function MsgInterActWord(props: MsgInterActWordMsg) {
7 | const { ...msg } = props;
8 | const { t } = useTranslation();
9 | const config = useAppSelector(selectConfig);
10 | let msgEntity = null;
11 | if (config.blockEffectItem2 === 1) return null;
12 |
13 | // msgType === 1 进入了直播间
14 | if (msg.msgType === 1) {
15 | msgEntity = (
16 |
14 |
15 |
16 | {msg.username}
17 |
18 |
19 | {t('DanmakuGuardBuyInRoom')}
20 | {msg.giftName}
21 |
22 |
23 |
24 |
17 | openLink(`https://space.bilibili.com/${msg.userID}`)}>{msg.username}
18 | {t('DanmakuWelcomeLiveRoom')}
19 |
20 | );
21 | } else if (msg.msgType === 2) {
22 | // msgType === 2 关注了直播间
23 | msgEntity = (
24 |
25 | openLink(`https://space.bilibili.com/${msg.userID}`)}>{msg.username}
26 | {t('DanmakuFollowedLiveRoom')}
27 |
28 | );
29 | }
30 |
31 | return msgEntity;
32 | }
33 |
34 | export default MsgInterActWord;
35 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgLive.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 |
3 | export default function MsgLive() {
4 | const { t } = useTranslation();
5 | return {t('DanmakuLive')}
;
6 | }
7 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgRoomBlock.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import { openLink } from '../../../utils/common';
3 |
4 | export default function MsgRoomBlock(props: MsgRoomBlockMsg) {
5 | const { ...msg } = props;
6 | const { t } = useTranslation();
7 |
8 | return (
9 |
10 | {t('DanmakuBlockedUser')}
11 | openLink(`https://space.bilibili.com/${msg.userID}`)}>{msg.username}
12 | {t('DanmakuBlockedText')}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgSendGift.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector } from '../../../store/hooks';
2 | import { selectDanmaku } from '../../../store/features/danmakuSlice';
3 | import { selectConfig } from '../../../store/features/configSlice';
4 | import { openLink } from '../../../utils/common';
5 |
6 | function MsgSendGift(props: DanmakuGift) {
7 | const { ...msg } = props;
8 | const config = useAppSelector(selectConfig);
9 | const danmaku = useAppSelector(selectDanmaku);
10 | const { giftMap } = danmaku;
11 | if (config.blockEffectItem0 === 1) return null;
12 | if (msg.coinType === 'gold' && msg.price < config.blockMinGoldSeed)
13 | return null;
14 | if (msg.coinType === 'silver' && msg.price < config.blockMinSilverSeed)
15 | return null;
16 |
17 | const giftItem = giftMap.get(msg.giftId);
18 | if (giftItem) {
19 | return (
20 |
21 | openLink(`https://space.bilibili.com/${msg.userID}`)}>{msg.username}
22 | {msg.giftAction} {msg.giftName}{' '}
23 | 
x {msg.giftCount}
24 |
25 | );
26 | }
27 | return null;
28 | }
29 |
30 | export default MsgSendGift;
31 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgSuperChatCard.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, useState } from 'react';
2 | import { currentTranslateToCode, translate } from '../../../utils/translation';
3 | import { useTranslation } from "react-i18next";
4 | import { useAppSelector } from "../../../store/hooks";
5 | import { selectConfig } from "../../../store/features/configSlice";
6 | import { openLink } from "../../../utils/common";
7 |
8 | interface SuperChatCardProps {
9 | msg: SUPER_CHAT_MESSAGE_DATA;
10 | style?: CSSProperties;
11 | }
12 |
13 | function handleOpenUser(uid: number) {
14 | const url = `https://space.bilibili.com/${ uid }`;
15 | openLink(url);
16 | }
17 |
18 | function MsgSuperChatCard(props: SuperChatCardProps) {
19 | const { msg, style } = props;
20 | const { t } = useTranslation();
21 | const config = useAppSelector(selectConfig);
22 |
23 | let [translateContent, setTranslateContent] = useState(msg.message);
24 |
25 | const handleTranslate = () => {
26 | translate(msg.message, {
27 | from: 'auto',
28 | to: currentTranslateToCode()
29 | })
30 | .then(translateObj => {
31 | translateContent = `${ msg.message }(${ translateObj.text })`;
32 | setTranslateContent(translateContent);
33 | })
34 | .catch((e: any) => {
35 | console.log(e);
36 | translateContent = `${ msg.message }(${t('TranslateFailed')})`;
37 | setTranslateContent(translateContent);
38 | });
39 | };
40 |
41 | if (config.blockEffectItem3 === 1) return null;
42 |
43 | return (
44 | x {msg.giftCount}
24 |
45 |
103 | );
104 | }
105 |
106 | export default MsgSuperChatCard;
107 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgUserAvatar.tsx:
--------------------------------------------------------------------------------
1 | import { openLink, userAvatarFilter } from '../../../utils/common';
2 |
3 | const defaultAvatar = 'https://static.hdslb.com/images/member/noface.gif';
4 |
5 | export default function MsgUserAvatar(uid: number, avatar: string) {
6 | const face = userAvatarFilter(avatar);
7 | return (
8 |
46 |
102 |
54 |
79 | handleOpenUser(msg.uid)}>
56 |
62 |
68 |
69 |
70 |
78 | {msg.user_info.uname}
71 |
72 |
77 |
73 | ￥{msg.price}
74 | （{Math.floor(msg.price / 10)}万金瓜子）
75 |
76 |
83 |
101 |
84 | {translateContent}
85 |
86 |
87 | {
88 | !!msg.message_trans && (
89 |
90 | {msg.message_trans}
91 |
92 | )
93 | }
94 |
100 |
14 |
18 | );
19 | }
20 |
21 | export default MsgWelcome;
22 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgEntity/MsgWelcomeGuard.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector } from "../../../store/hooks";
2 | import { selectConfig } from "../../../store/features/configSlice";
3 | import { useTranslation } from "react-i18next";
4 |
5 |
6 | function MsgWelcomeGuard(props: MsgWelcomeGuard) {
7 | const { ...msg } = props;
8 | const config = useAppSelector(selectConfig);
9 | const { t } = useTranslation();
10 | if (config.blockEffectItem2 === 1) return null;
11 |
12 | return (
13 |
14 |
15 | {t('DanmakuWelcome')}
16 |
19 | {msg.username}
20 | {t('DanmakuWelcomeLiveRoom')}
21 |
22 |
23 | );
24 | }
25 |
26 | export default MsgWelcomeGuard;
27 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/MsgModel.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-case-declarations */
2 | /* eslint-disable consistent-return */
3 |
4 | import UserInfoApiTask, { apiTaskConfig } from '../../api';
5 | import config from '../../config';
6 | import UserAvatarDao from '../../dao/UserAvatarDao';
7 | import { sleep } from '../../utils/common';
8 |
9 | export enum CmdType {
10 | CONNECTING = 'CONNECTING',
11 | DISCONNECTED = 'DISCONNECTED',
12 | CONNECT_SUCCESS = 'CONNECT_SUCCESS',
13 | LIVE = 'LIVE',
14 | POPULAR = 'POPULAR',
15 | DANMU_MSG = 'DANMU_MSG',
16 | SEND_GIFT = 'SEND_GIFT',
17 | SPECIAL_GIFT = 'SPECIAL_GIFT',
18 | COMBO_SEND = 'COMBO_SEND',
19 | COMBO_END = 'COMBO_END',
20 | NOTICE_MSG = 'NOTICE_MSG',
21 | INTERACT_WORD = 'INTERACT_WORD',
22 | WATCHED_CHANGE = 'WATCHED_CHANGE',
23 | ENTRY_EFFECT = 'ENTRY_EFFECT',
24 | ROOM_BLOCK_MSG = 'ROOM_BLOCK_MSG',
25 | WELCOME = 'WELCOME',
26 | WELCOME_GUARD = 'WELCOME_GUARD',
27 | GUARD_BUY = 'GUARD_BUY',
28 | SUPER_CHAT_MESSAGE = 'SUPER_CHAT_MESSAGE',
29 | WARNING = 'WARNING',
30 | CUT_OFF = 'CUT_OFF',
31 | UNKNOWN = 'UNKNOWN',
32 | }
33 |
34 | function assertUnknownCmdType(cmd: any): UnknownMsg {
35 | return {
36 | cmd,
37 | content: `Unknown cmd: ${cmd}`
38 | };
39 | }
40 |
41 | export async function parseData(
42 | data: DanmakuData
43 | ): Promise
56 | {t('RankMessageList')}
57 |
61 | );
62 | }
63 | if (lists.length === 0) {
64 | return (
65 |
58 |
60 | Loading...
59 |
66 | {t('RankMessageList')}
67 |
68 |
69 | );
70 | }
71 | return (
72 |
73 |
74 | {
75 | lists.map((i, index) => {
76 | return (
77 |
101 |
102 | );
103 | }
104 |
105 | function RankMessageLists() {
106 | const { t } = useTranslation();
107 | const [listsVisible, setListsVisible] = useState(false);
108 |
109 | return (
110 |
78 |
97 | );
98 | })
99 | }
100 |
79 | {
80 | index <= 2
81 | ?
82 | :
94 | {index+1}
83 | }
84 | openLink(`https://space.bilibili.com/${i.uid}`)}>
85 |
86 | {i.face_frame && }
87 |
88 |
89 |
92 | openLink(`https://space.bilibili.com/${i.uid}`)}>{i.uname}
90 |{dateFormat(new Date(i.send_time * 1000), 'HH:MM:SS')}
91 |¥ {i.price}
93 | {i.message}
95 |
96 |
56 |
76 |
57 |
61 |
65 |
71 |
75 |
72 | ￥{msg.price}
73 |
74 |
81 |
82 | bilive danmaku
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/renderer/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Provider } from 'react-redux';
4 | import App from './App';
5 | import store from './store';
6 |
7 | ReactDOM.render(
8 |
9 |
10 |
12 | ,
13 | document.getElementById('root')
14 | );
15 |
--------------------------------------------------------------------------------
/src/renderer/reducers/types.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch as ReduxDispatch, Store as ReduxStore, Action } from 'redux';
2 | import { SocketInstanceType } from '../components/Danmaku/base/Socket';
3 |
4 | export enum ConfigKey {
5 | version = 'version',
6 | latestVersion = 'latestVersion',
7 | languageCode = 'languageCode',
8 | setAlwaysOnTop = 'setAlwaysOnTop',
9 | ignoreMouse = 'ignoreMouse',
10 | roomid = 'roomid',
11 | shortid = 'shortid',
12 | showAvatar = 'showAvatar',
13 | avatarSize = 'avatarSize',
14 | showFanLabel = 'showFanLabel',
15 | showLvLabel = 'showLvLabel',
16 | showVip = 'showVip',
17 | backgroundColor = 'backgroundColor',
18 | backgroundOpacity = 'backgroundOpacity',
19 | fontFamily = 'fontFamily',
20 | fontSize = 'fontSize',
21 | fontLineHeight = 'fontLineHeight',
22 | fontMarginTop = 'fontMarginTop',
23 | blockScrollBar = 'blockScrollBar',
24 | showVoice = 'showVoice',
25 | voiceVolume = 'voiceVolume',
26 | voiceSpeed = 'voiceSpeed',
27 | autoTranslate = 'autoTranslate',
28 | translateFrom = 'translateFrom',
29 | translateTo = 'translateTo',
30 | maxMessageCount = 'maxMessageCount',
31 | voiceTranslateTo = 'voiceTranslateTo',
32 | taskMaxLength = 'taskMaxLength',
33 | blockMode = 'blockMode',
34 | blockEffectItem0 = 'blockEffectItem0',
35 | blockEffectItem1 = 'blockEffectItem1',
36 | blockEffectItem2 = 'blockEffectItem2',
37 | blockEffectItem3 = 'blockEffectItem3',
38 | blockEffectItem4 = 'blockEffectItem4',
39 | blockEffectItem5 = 'blockEffectItem5',
40 | blockEffectItem6 = 'blockEffectItem6',
41 | blockMinGoldSeed = 'blockMinGoldSeed',
42 | blockMinSilverSeed = 'blockMinSilverSeed',
43 | blockDanmakuLists = 'blockDanmakuLists',
44 | blockUserLists = 'blockUserLists',
45 | blockUserLv = 'blockUserLv',
46 | blockUserNotMember = 'blockUserNotMember',
47 | blockUserNotBindPhone = 'blockUserNotBindPhone',
48 | showGiftDanmakuList = 'showGiftDanmakuList',
49 | maxDanmakuGiftCount = 'maxDanmakuGiftCount',
50 | danmakuGiftListHeight = 'danmakuGiftListHeight',
51 | showTransition = 'showTransition'
52 | }
53 |
54 | export type counterStateType = {
55 | count: number;
56 | };
57 |
58 | export type danmakuStateType = {
59 | roomid: number;
60 | socket: SocketInstanceType;
61 | giftMap: Map;
62 | userAvatarMap: Map;
63 | };
64 |
65 | export type rootStatePropsType = {
66 | counter: counterStateType;
67 | danmaku: danmakuStateType;
68 | config: ConfigStateType;
69 | };
70 |
71 | export type GetState = () => rootStatePropsType;
72 |
73 | export type Dispatch = ReduxDispatch>;
74 |
75 | export type Store = ReduxStore>;
76 |
--------------------------------------------------------------------------------
/src/renderer/store/features/configSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { RootState } from '../index';
3 | import config, { setConfig } from '../../config';
4 | import ConfigDao from '../../dao/ConfigDao';
5 | import { getVersionInfo } from '../../api';
6 |
7 | const initialState: ConfigStateType = {
8 | ...config,
9 | };
10 |
11 | export const configSlice = createSlice({
12 | name: 'config',
13 | initialState,
14 | reducers: {
15 | updateConfig(state, { payload }) {
16 | const { k, v } = payload;
17 | state[k] = v;
18 | setConfig(k, v);
19 | },
20 | resetConfig(state) {
21 | state = ConfigDao.reset();
22 | window.location.reload();
23 | },
24 | },
25 | });
26 |
27 | export const fetchVersionInfo = () => async (dispatch) => {
28 | const latestVersion = await getVersionInfo();
29 | const versionData = {
30 | k: 'latestVersion',
31 | v: latestVersion,
32 | };
33 | dispatch(updateConfig(versionData));
34 | };
35 |
36 | export const { updateConfig, resetConfig } = configSlice.actions;
37 | export const selectConfig = (state: RootState) => state.config;
38 | export default configSlice.reducer;
39 |
--------------------------------------------------------------------------------
/src/renderer/store/features/counterSlice.ts:
--------------------------------------------------------------------------------
1 | import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
2 | import { RootState } from '../index';
3 | import { counterStateType } from '../../reducers/types';
4 |
5 | const initialState: counterStateType = {
6 | count: 0,
7 | };
8 |
9 | export const counterSlice = createSlice({
10 | name: 'counter',
11 | initialState,
12 | reducers: {
13 | increment(state, { payload }) {
14 | state.count += payload.step;
15 | },
16 | decrement(state) {
17 | state.count -= 1;
18 | },
19 | },
20 | });
21 |
22 | export const asyncIncrement = (payload) => (dispatch) => {
23 | setTimeout(() => {
24 | dispatch(increment(payload));
25 | }, 2000);
26 | };
27 |
28 | export const { increment, decrement } = counterSlice.actions;
29 | export const selectCounter = (state: RootState) => state.counter;
30 | export default counterSlice.reducer;
31 |
--------------------------------------------------------------------------------
/src/renderer/store/features/danmakuSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { RootState } from '../index';
3 | import { danmakuStateType } from '../../reducers/types';
4 | import config from '../../config';
5 | import Socket from '../../components/Danmaku/base/Socket';
6 | import { getGiftInfo } from '../../api';
7 |
8 | const initialState: danmakuStateType = {
9 | roomid: config.roomid,
10 | socket: new Socket(config.roomid),
11 | giftMap: new Map(),
12 | userAvatarMap: new Map(),
13 | };
14 |
15 | export const danmakuSlice = createSlice({
16 | name: 'danmaku',
17 | initialState,
18 | reducers: {
19 | createSocket(state, action) {
20 | const roomid = action.payload;
21 | state.socket.close();
22 | state.roomid = roomid;
23 | state.socket = new Socket(roomid);
24 | },
25 | setGiftData(state, action) {
26 | state.giftMap = action.payload;
27 | },
28 | },
29 | });
30 |
31 | export const fetchGiftData = () => async (dispatch) => {
32 | const giftMap = await getGiftInfo();
33 | dispatch(setGiftData(giftMap));
34 | };
35 |
36 | export const { setGiftData, createSocket } = danmakuSlice.actions;
37 | export const selectDanmaku = (state: RootState) => state.danmaku;
38 | export default danmakuSlice.reducer;
39 |
--------------------------------------------------------------------------------
/src/renderer/store/hooks.ts:
--------------------------------------------------------------------------------
1 | import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
2 | import type { RootState, AppDispatch } from './index';
3 |
4 | // Use throughout your app instead of plain `useDispatch` and `useSelector`
5 | export const useAppDispatch = () => useDispatch();
6 | export const useAppSelector: TypedUseSelectorHook = useSelector;
7 |
--------------------------------------------------------------------------------
/src/renderer/store/index.ts:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import danmakuReducer from './features/danmakuSlice';
3 | import counterReducer from './features/counterSlice';
4 | import configReducer from './features/configSlice';
5 |
6 | const store = configureStore({
7 | middleware: (getDefaultMiddleware) =>
8 | getDefaultMiddleware({
9 | serializableCheck: false,
10 | }),
11 | reducer: {
12 | danmaku: danmakuReducer,
13 | counter: counterReducer,
14 | config: configReducer,
15 | },
16 | });
17 |
18 | export default store;
19 | export type RootState = ReturnType;
20 | export type AppDispatch = typeof store.dispatch;
21 |
--------------------------------------------------------------------------------
/src/renderer/utils/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Beats0/bilive-danmaku/590e9f122929bc29659eeb8b44ff45a0890894c0/src/renderer/utils/.gitkeep
--------------------------------------------------------------------------------
/src/renderer/utils/common.ts:
--------------------------------------------------------------------------------
1 | import { ipcRenderer, shell } from "electron";
2 | import { lt } from "semver";
3 |
4 | function openLink(href: string) {
5 | shell.openExternal(href).catch(e => {
6 | console.warn(e);
7 | });
8 | }
9 |
10 | function userAvatarFilter(avatar: string): string {
11 | const gifRe = /\.(gif)$/;
12 | const webpRe = /\.(webp)$/;
13 | const jpgRe = /\.(jpg)$/;
14 | if (gifRe.test(avatar) || webpRe.test(avatar)) return avatar;
15 | if (jpgRe.test(avatar)) return `${avatar}_64x64.jpg`;
16 | return avatar;
17 | }
18 |
19 | function toPercentNum(number: number): number {
20 | const numberP = Math.floor(number * 100);
21 | return numberP;
22 | }
23 |
24 | function isInclude(item: string | number, lists: string[] | number[]): boolean {
25 | return lists.includes(item);
26 | }
27 |
28 | function arrayDiff(arr1: any[], arr2: any[]): any[] {
29 | return arr1.filter(el => !arr2.includes(el));
30 | }
31 |
32 | function setCssVariable(configKey: string, value: string | null) {
33 | const propertyName = `--primary-${configKey}`;
34 | document.documentElement.style.setProperty(propertyName, value);
35 | }
36 |
37 | // 太菜了，写法好low (
38 | const sortBy = (sortKey: string, reverse = false, sortKeyPrefix?: string) => (
39 | a,
40 | b
41 | ) => {
42 | if (sortKeyPrefix) {
43 | if (a[sortKeyPrefix][`${sortKey}`] < b[sortKeyPrefix][`${sortKey}`]) {
44 | return reverse ? -1 : 1;
45 | }
46 | if (a[sortKeyPrefix][`${sortKey}`] > b[sortKeyPrefix][`${sortKey}`]) {
47 | return reverse ? 1 : -1;
48 | }
49 | return 0;
50 | }
51 | if (a[`${sortKey}`] < b[`${sortKey}`]) {
52 | return reverse ? -1 : 1;
53 | }
54 | if (a[`${sortKey}`] > b[`${sortKey}`]) {
55 | return reverse ? 1 : -1;
56 | }
57 | return 0;
58 | };
59 |
60 | const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
61 |
62 | function unionSet(array: any[], key: string) {
63 | const hash = {};
64 | let result = [];
65 | result = array.reduce((item, next) => {
66 | hash[next[key]] ? '' : (hash[next[key]] = true && item.push(next));
67 | return item;
68 | }, []);
69 | return result;
70 | }
71 |
72 | function tranNumber(num: number, point = 2): string {
73 | const numStr = num.toString();
74 | if (numStr.length < 5) {
75 | return numStr;
76 | }
77 | const decimal = numStr.substring(
78 | numStr.length - 4,
79 | numStr.length - 4 + point
80 | );
81 | return `${parseFloat(`${parseInt(String(num / 10000), 10)}.${decimal}`)}w`;
82 | }
83 |
84 | /**
85 | * @param {string} clientVersion 客户端版本
86 | * @param {string} serverVersion 服务器端版本.
87 | * @return {boolean} 判断是否能更新
88 | */
89 | const hasNewVersion = (
90 | clientVersion: string,
91 | serverVersion: string
92 | ): boolean => {
93 | return lt(clientVersion, serverVersion);
94 | };
95 |
96 | /**
97 | * 时间格式化
98 | * @param {Date} date
99 | * @param {string} fmt YYYY-mm-dd HH:MM => 2022-02-15 19:45
100 | * @return {string}
101 | * */
102 | function dateFormat(date: Date, fmt: string) {
103 | let ret;
104 | const opt = {
105 | "Y+": date.getFullYear().toString(),
106 | "m+": (date.getMonth() + 1).toString(),
107 | "d+": date.getDate().toString(),
108 | "H+": date.getHours().toString(),
109 | "M+": date.getMinutes().toString(),
110 | "S+": date.getSeconds().toString()
111 | };
112 | for (let k in opt) {
113 | ret = new RegExp("(" + k + ")").exec(fmt);
114 | if (ret) {
115 | fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
116 | };
117 | };
118 | return fmt;
119 | }
120 |
121 | export const systemFonts: string[] = [];
122 |
123 | // 获取系统字体列表
124 | ipcRenderer.send('getSystemFonts');
125 | ipcRenderer.on('getSystemFontsCb', (e, fonts: string[] = []) => {
126 | // console.log('fonts', fonts);
127 | systemFonts = fonts;
128 | });
129 |
130 | export {
131 | openLink,
132 | userAvatarFilter,
133 | toPercentNum,
134 | isInclude,
135 | arrayDiff,
136 | setCssVariable,
137 | sortBy,
138 | sleep,
139 | unionSet,
140 | tranNumber,
141 | hasNewVersion,
142 | dateFormat,
143 | };
144 |
--------------------------------------------------------------------------------
/src/renderer/utils/convert.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 字符串转化为Byte字节
3 | * @param {String} str 要转化的字符串
4 | * @return {Array[byte]} 字节数组
5 | */
6 | function str2bytes(str: string): number[] {
7 | const bytes = [];
8 | let c;
9 | const len = str.length;
10 | for (let i = 0; i < len; i++) {
11 | c = str.charCodeAt(i);
12 | if (c >= 0x010000 && c <= 0x10ffff) {
13 | bytes.push(((c >> 18) & 0x07) | 0xf0);
14 | bytes.push(((c >> 12) & 0x3f) | 0x80);
15 | bytes.push(((c >> 6) & 0x3f) | 0x80);
16 | bytes.push((c & 0x3f) | 0x80);
17 | } else if (c >= 0x000800 && c <= 0x00ffff) {
18 | bytes.push(((c >> 12) & 0x0f) | 0xe0);
19 | bytes.push(((c >> 6) & 0x3f) | 0x80);
20 | bytes.push((c & 0x3f) | 0x80);
21 | } else if (c >= 0x000080 && c <= 0x0007ff) {
22 | bytes.push(((c >> 6) & 0x1f) | 0xc0);
23 | bytes.push((c & 0x3f) | 0x80);
24 | } else {
25 | bytes.push(c & 0xff);
26 | }
27 | }
28 | return bytes;
29 | }
30 |
31 | /**
32 | * 将字节数组转化为字符串
33 | * @param {Array[byte]} bytesArray 字节数组
34 | * @return {String} 字符串
35 | */
36 | function bytes2str(array: number[]): string {
37 | const bytes = array.slice(0);
38 | const filterArray = [
39 | [0x7f],
40 | [0x1f, 0x3f],
41 | [0x0f, 0x3f, 0x3f],
42 | [0x07, 0x3f, 0x3f, 0x3f]
43 | ];
44 | let j;
45 | let str = '';
46 | for (let i = 0; i < bytes.length; i += j) {
47 | const item = bytes[i];
48 | let number = '';
49 | if (item >= 240) {
50 | j = 4;
51 | } else if (item >= 224) {
52 | j = 3;
53 | } else if (item >= 192) {
54 | j = 2;
55 | } else if (item < 128) {
56 | j = 1;
57 | }
58 | const filter = filterArray[j - 1];
59 | for (let k = 0; k < j; k++) {
60 | let r = (bytes[i + k] & filter[k]).toString(2);
61 | const l = r.length;
62 | if (l > 6) {
63 | number = r;
64 | break;
65 | }
66 | for (let n = 0; n < 6 - l; n++) {
67 | r = `0${r}`;
68 | }
69 | number += r;
70 | }
71 | str += String.fromCharCode(parseInt(number, 2));
72 | }
73 | return str;
74 | }
75 |
76 | export { str2bytes, bytes2str };
77 |
--------------------------------------------------------------------------------
/src/renderer/utils/json-parser.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 解析字符串内包含的对象
3 | * @param {String} str 传入字符串
4 | * @returns {Array[Object]}
5 | */
6 | function parser(str: string): any[] {
7 | let i = -1;
8 | const len = str.length;
9 | const result = [];
10 |
11 | const store = [];
12 | while (i++ < len - 1) {
13 | if (str[i] === '{') {
14 | store.push({
15 | index: i
16 | });
17 | }
18 | if (str[i] === '}') {
19 | const prev = store.pop();
20 | if (!prev) {
21 | console.warn(`${str}不是正确的对象字符串`);
22 | continue;
23 | }
24 | if (store.length === 0) {
25 | result.push(str.slice(prev.index, i + 1));
26 | }
27 | }
28 | }
29 |
30 | return result;
31 | }
32 |
33 | export { parser };
34 |
--------------------------------------------------------------------------------
/src/renderer/utils/packet.ts:
--------------------------------------------------------------------------------
1 | import { str2bytes } from './convert';
2 |
3 | /**
4 | * 生成对应的消息包
5 | * @param {Number} action 2是心跳包/7是加入房间
6 | * @param {String} payload
7 | */
8 | function generatePacket(action = 2, payload = ''): DataView {
9 | const packet = str2bytes(payload);
10 | const buff = new ArrayBuffer(packet.length + 16);
11 | const dataBuf = new DataView(buff);
12 | dataBuf.setUint32(0, packet.length + 16);
13 | dataBuf.setUint16(4, 16);
14 | dataBuf.setUint16(6, 1);
15 | dataBuf.setUint32(8, action);
16 | dataBuf.setUint32(12, 1);
17 | for (let i = 0; i < packet.length; i++) {
18 | dataBuf.setUint8(16 + i, packet[i]);
19 | }
20 | return dataBuf;
21 | }
22 |
23 | export { generatePacket };
24 |
--------------------------------------------------------------------------------
/src/renderer/utils/safeEval.ts:
--------------------------------------------------------------------------------
1 | import vm, { Context, RunningScriptOptions } from 'vm';
2 |
3 | export default function safeEval(
4 | code: string,
5 | context?: Context,
6 | opts?: RunningScriptOptions
7 | ) {
8 | const sandbox: Context = {};
9 | const resultKey = `SAFE_EVAL_${Math.floor(Math.random() * 1000000)}`;
10 | sandbox[resultKey] = {};
11 | const clearContext = `
12 | (function(){
13 | Function = undefined;
14 | const keys = Object.getOwnPropertyNames(this).concat(['constructor']);
15 | keys.forEach((key) => {
16 | const item = this[key];
17 | if(!item || typeof item.constructor !== 'function') return;
18 | this[key].constructor = undefined;
19 | });
20 | })();
21 | `;
22 | code = `${clearContext + resultKey}=${code}`;
23 | if (context) {
24 | Object.keys(context).forEach(function(key) {
25 | sandbox[key] = context[key];
26 | });
27 | }
28 | vm.runInNewContext(code, sandbox, opts);
29 | return sandbox[resultKey];
30 | }
31 |
--------------------------------------------------------------------------------
/src/renderer/utils/ttk.ts:
--------------------------------------------------------------------------------
1 | import Configstore from 'configstore';
2 |
3 | // BEGIN
4 | function sM(a: string) {
5 | let b;
6 | if (yr !== null) b = yr;
7 | else {
8 | b = wr(String.fromCharCode(84));
9 | var c = wr(String.fromCharCode(75));
10 | b = [b(), b()];
11 | b[1] = c();
12 | b = (yr = window[b.join(c())] || '') || '';
13 | }
14 | var d = wr(String.fromCharCode(116));
15 | var c = wr(String.fromCharCode(107));
16 | var d = [d(), d()];
17 | d[1] = c();
18 | c = `&${d.join('')}=`;
19 | d = b.split('.');
20 | b = Number(d[0]) || 0;
21 | for (var e = [], f = 0, g = 0; g < a.length; g++) {
22 | let l = a.charCodeAt(g);
23 | l < 128
24 | ? (e[f++] = l)
25 | : (l < 2048
26 | ? (e[f++] = (l >> 6) | 192)
27 | : ((l & 64512) == 55296 &&
28 | g + 1 < a.length &&
29 | (a.charCodeAt(g + 1) & 64512) == 56320
30 | ? ((l = 65536 + ((l & 1023) << 10) + (a.charCodeAt(++g) & 1023)),
31 | (e[f++] = (l >> 18) | 240),
32 | (e[f++] = ((l >> 12) & 63) | 128))
33 | : (e[f++] = (l >> 12) | 224),
34 | (e[f++] = ((l >> 6) & 63) | 128)),
35 | (e[f++] = (l & 63) | 128));
36 | }
37 | a = b;
38 | for (f = 0; f < e.length; f++) (a += e[f]), (a = xr(a, '+-a^+6'));
39 | a = xr(a, '+-3^+b+-f');
40 | a ^= Number(d[1]) || 0;
41 | a < 0 && (a = (a & 2147483647) + 2147483648);
42 | a %= 1e6;
43 | return `${c}${a.toString()}.${a ^ b}`;
44 | }
45 |
46 | var yr = null;
47 | var wr = function(a: string) {
48 | return function() {
49 | return a;
50 | };
51 | };
52 | var xr = function(a: string, b: string) {
53 | for (let c = 0; c < b.length - 2; c += 3) {
54 | var d = b.charAt(c + 2);
55 | var d = d >= 'a' ? d.charCodeAt(0) - 87 : Number(d);
56 | var d = b.charAt(c + 1) == '+' ? a >>> d : a << d;
57 | a = b.charAt(c) == '+' ? (a + d) & 4294967295 : a ^ d;
58 | }
59 | return a;
60 | };
61 |
62 | // END
63 | const config = new Configstore('google-translate-api');
64 |
65 | var window = {
66 | TKK: config.get('TKK') || '0'
67 | };
68 |
69 | export function updateTKK() {
70 | return new Promise(function(resolve, reject) {
71 | const now = Math.floor(Date.now() / 3600000);
72 |
73 | if (Number(window.TKK.split('.')[0]) === now) {
74 | resolve();
75 | } else {
76 | fetch('https://translate.google.cn')
77 | .then(async function(res) {
78 | const textString: string = await res.text();
79 | const code = textString.match(/TKK=(.*?)\(\)\)'\);/g);
80 |
81 | if (code) {
82 | eval(code[0]);
83 | /* eslint-disable no-undef */
84 | if (typeof TKK !== 'undefined') {
85 | window.TKK = TKK;
86 | config.set('TKK', TKK);
87 | }
88 | }
89 |
90 | /**
91 | * Note: If the regex or the eval fail, there is no need to worry. The server will accept
92 | * relatively old seeds.
93 | */
94 |
95 | resolve();
96 | })
97 | .catch(function(err) {
98 | const e = new Error();
99 | e.code = 'BAD_NETWORK';
100 | e.message = err.message;
101 | reject(e);
102 | });
103 | }
104 | });
105 | }
106 |
107 | export function get(text: string) {
108 | return updateTKK()
109 | .then(function() {
110 | let tk = sM(text);
111 | tk = tk.replace('&tk=', '');
112 | return { name: 'tk', value: tk };
113 | })
114 | .catch(function(err) {
115 | throw err;
116 | });
117 | }
118 |
--------------------------------------------------------------------------------
/src/renderer/utils/vioce.ts:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import {
3 | currentTranslateToCode,
4 | getTranslateTTSUrl,
5 | translate
6 | } from './translation';
7 |
8 | const $audio = document.createElement('audio');
9 | const $source = document.createElement('source');
10 | $audio.volume = config.voiceVolume;
11 | $audio.playbackRate = config.voiceSpeed;
12 | $source.setAttribute('type', 'audio/mp3');
13 | $source.setAttribute('src', '');
14 | $audio.appendChild($source);
15 | // 防止electron主进程还拿不到body导致渲染白版
16 | document?.body.appendChild($audio);
17 |
18 | async function baiduTTS(fullText: string) {
19 | console.log('[baiduTTS translate]', fullText);
20 | const url = `http://tts.baidu.com/text2audio?cuid=baike&lan=zh&ctp=1&pdt=301&tex=${fullText}`;
21 | const res = await fetch(url);
22 | const blob = await res.blob();
23 | const resData = {
24 | res,
25 | blob
26 | };
27 | return resData;
28 | }
29 |
30 | async function googleTTS(fullText: string) {
31 | console.log('[googleTTS translate]', fullText);
32 | const url = await getTranslateTTSUrl(fullText);
33 | const res = await fetch(url);
34 | const blob = await res.blob();
35 | const resData = {
36 | res,
37 | blob
38 | };
39 | return resData;
40 | }
41 |
42 | // TODO: edgeTTS see: https://github.com/koodo-reader/koodo-reader/blob/fcc8a6f014f20b1bf5c1b2b2dacc0761905646d5/edge-tts.js
43 | async function edgeTTS() {
44 |
45 | }
46 |
47 | export async function read(uname: string, text: string) {
48 | const fullText = `${uname} 说 ${text}`;
49 | let res;
50 | let blob;
51 | try {
52 | let resData;
53 | // googleTTS
54 | // google 翻译挂了 = =
55 | // const googleTranslateRes = await translate(text, {
56 | // from: 'auto',
57 | // to: currentTranslateToCode()
58 | // });
59 | // console.log(googleTranslateRes.text);
60 | // const { iso } = googleTranslateRes.from.language;
61 | // let resData = {};
62 | // if (config.voiceTranslateTo === 'zhCn' && iso === 'zh-CN') {
63 | // resData = await baiduTTS(fullText);
64 | // } else {
65 | // resData = await googleTTS(`${googleTranslateRes.text}`);
66 | // }
67 |
68 | // 直接用百度TTS
69 | resData = await baiduTTS(fullText);
70 |
71 | // edgeTTS
72 | // resData = await edgeTTS(fullText);
73 |
74 | res = resData.res;
75 | blob = resData.blob;
76 |
77 | if (res.status !== 200) {
78 | console.warn('合成语言失败');
79 | return;
80 | }
81 | $source.setAttribute('src', URL.createObjectURL(blob));
82 | $audio.load();
83 |
84 | try {
85 | const playEndPromise = new Promise(resolve => {
86 | $audio.onended = resolve;
87 | });
88 | await $audio.play();
89 | return playEndPromise;
90 | } catch (err) {
91 | console.warn('语言朗读消息失败', err.message);
92 | }
93 | } catch (err) {
94 | console.warn('语言朗读消息失败', err.message);
95 | }
96 | }
97 |
98 | type Task = {
99 | uname: string;
100 | text: string;
101 | };
102 |
103 | export type TaskConfig = {
104 | taskLength: number;
105 | taskMaxLength: number;
106 | };
107 |
108 | let taskQueue: Task[] = [];
109 | let isWorking = false;
110 |
111 | export function queryTask(): TaskConfig {
112 | const taskConfig: TaskConfig = {
113 | taskLength: taskQueue.length,
114 | taskMaxLength: config.taskMaxLength
115 | };
116 | return taskConfig;
117 | }
118 |
119 | async function handleTaskQueue() {
120 | isWorking = true;
121 | const task = taskQueue.shift();
122 | if (task) {
123 | await read(task.uname, task.text);
124 | await handleTaskQueue();
125 | } else {
126 | isWorking = false;
127 | }
128 | }
129 |
130 | const voice = {
131 | push(uname: string, text: string) {
132 | if (taskQueue.length >= config.taskMaxLength) return;
133 | if (taskQueue.some(t => t.text === text)) return;
134 | taskQueue.push({ uname, text });
135 | if (!isWorking) {
136 | handleTaskQueue();
137 | }
138 | },
139 | resetPush(uname: string, text: string) {
140 | this.reset();
141 | this.push(uname, text);
142 | },
143 | reset() {
144 | taskQueue = [];
145 | isWorking = false;
146 | },
147 | updateVolume(volume: number) {
148 | $audio.volume = volume;
149 | },
150 | updatePlaybackRate(rate: number) {
151 | $audio.playbackRate = rate;
152 | }
153 | };
154 |
155 | export default voice;
156 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2021",
4 | "module": "commonjs",
5 | "lib": ["dom", "esnext"],
6 | "declaration": true,
7 | "declarationMap": true,
8 | "jsx": "react-jsx",
9 | "strict": true,
10 | "pretty": true,
11 | "sourceMap": true,
12 | "baseUrl": "./src",
13 | "noUnusedLocals": true,
14 | "noUnusedParameters": true,
15 | "noImplicitReturns": true,
16 | "noFallthroughCasesInSwitch": true,
17 | "moduleResolution": "node",
18 | "esModuleInterop": true,
19 | "allowSyntheticDefaultImports": true,
20 | "resolveJsonModule": true,
21 | "allowJs": true,
22 | "outDir": "release/app/dist"
23 | },
24 | "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
25 | }
26 |
--------------------------------------------------------------------------------
83 |
84 |
86 |
87 | handleArrowClick('left')} />
88 |
91 | );
92 | }
93 |
94 | export default forwardRef(SuperChatPanel);
95 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/common/msg-struct.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 各个帧结构所需要的字段，待拓展
3 | */
4 |
5 | const messageStruct = [
6 | {
7 | name: 'Header Length', // 帧头
8 | key: 'headerLen',
9 | bytes: 2, // 字节长度
10 | offset: 4, // 偏移量
11 | value: 16
12 | },
13 | {
14 | name: 'Protocol Version', // 协议版本
15 | key: 'ver',
16 | bytes: 2,
17 | offset: 6,
18 | value: 1
19 | },
20 | {
21 | name: 'Operation', // 指令
22 | key: 'op',
23 | bytes: 4,
24 | offset: 8,
25 | value: 1
26 | },
27 | {
28 | name: 'Sequence Id',
29 | key: 'seq',
30 | bytes: 4,
31 | offset: 12,
32 | value: 1
33 | }
34 | ];
35 |
36 | export default messageStruct;
37 |
--------------------------------------------------------------------------------
/src/renderer/components/Danmaku/common/ws-url.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 获取对应的ws-url地址
3 | */
4 | // let wsUrl = 'wss://ks-live-dmcmt-bj6-pm-01.chat.bilibili.com/sub';
5 | let wsUrl = 'ws://broadcastlv.chat.bilibili.com:2244/sub';
6 |
7 | if (window !== undefined) {
8 | const protocol = location.origin.match(/^(.+):\/\//)[1];
9 | if (protocol === 'https') {
10 | wsUrl = 'wss://broadcastlv.chat.bilibili.com:2245/sub';
11 | }
12 | }
13 |
14 | export default wsUrl;
15 |
--------------------------------------------------------------------------------
/src/renderer/config.ts:
--------------------------------------------------------------------------------
1 | import ConfigDao from './dao/ConfigDao';
2 |
3 | const config = ConfigDao.get();
4 |
5 | export function setConfig(configKey: string, value: string | number) {
6 | console.log('configKey', configKey, 'value', value);
7 | config[configKey] = value;
8 | ConfigDao.save(config);
9 | }
10 |
11 | // 直接挂载到全局
12 | global.config = config;
13 |
14 | export default config;
15 |
--------------------------------------------------------------------------------
/src/renderer/dao/ConfigDao.ts:
--------------------------------------------------------------------------------
1 | import LiveRoomDao from './LiveRoomDao';
2 | import pkg from '../../../package.json';
3 |
4 | const prefixKey = 'config';
5 |
6 | const resentLiveData = LiveRoomDao.getResent();
7 |
8 | export const defaultConfig: ConfigStateType = {
9 | version: pkg.version,
10 | latestVersion: pkg.version,
11 | languageCode: 'zhCn',
12 | setAlwaysOnTop: 1,
13 | roomid: resentLiveData.roomid,
14 | shortid: resentLiveData.shortid,
15 | ignoreMouse: 0,
16 | showAvatar: 0,
17 | avatarSize: 24,
18 | showFanLabel: 0,
19 | showLvLabel: 0,
20 | showVip: 0,
21 | backgroundColor: 1,
22 | backgroundOpacity: 0.5,
23 | fontFamily: '',
24 | fontSize: 17,
25 | fontLineHeight: 24,
26 | fontMarginTop: 3,
27 | blockScrollBar: 0,
28 | showVoice: 0,
29 | voiceVolume: 0.3,
30 | voiceSpeed: 1,
31 | autoTranslate: 0,
32 | translateFrom: 'auto',
33 | translateTo: 'ja',
34 | maxMessageCount: 500,
35 | taskMaxLength: 5,
36 | voiceTranslateTo: 'zhCn',
37 | blockMode: 0,
38 | blockEffectItem0: 0,
39 | blockEffectItem1: 0,
40 | blockEffectItem2: 1,
41 | blockEffectItem3: 0,
42 | blockEffectItem4: 0,
43 | blockEffectItem5: 0,
44 | blockEffectItem6: 0,
45 | blockMinGoldSeed: 0,
46 | blockMinSilverSeed: 0,
47 | blockDanmakuLists: [],
48 | blockUserLists: [],
49 | blockUserLv: 0,
50 | blockUserNotMember: 0,
51 | blockUserNotBindPhone: 0,
52 | showTransition: 1,
53 | showGiftDanmakuList: 0,
54 | maxDanmakuGiftCount: 30,
55 | danmakuGiftListHeight: 200,
56 | };
57 |
58 | export default class ConfigDao {
59 | static get(): ConfigStateType {
60 | const configStr = localStorage.getItem(prefixKey);
61 | if (!configStr) return defaultConfig;
62 | const configData: ConfigStateType = {
63 | ...defaultConfig,
64 | ...JSON.parse(configStr),
65 | };
66 | configData.version = pkg.version;
67 | // 与最新版config合并
68 | this.save(configData);
69 | return configData;
70 | }
71 |
72 | static save(config: ConfigStateType) {
73 | localStorage.setItem(prefixKey, JSON.stringify(config));
74 | }
75 |
76 | static reset(): ConfigStateType {
77 | localStorage.removeItem(prefixKey);
78 | this.save(defaultConfig);
79 | return defaultConfig;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/renderer/dao/LiveRoomDao.ts:
--------------------------------------------------------------------------------
1 | import { sortBy, unionSet } from '../utils/common';
2 |
3 | const prefixKey = 'liveRoomData';
4 |
5 | export interface LiveRoomData {
6 | // 房间号
7 | roomid: number;
8 | // 房间短号(如果api返回 0， shortid 为 roomid)
9 | shortid: number;
10 | uid: number;
11 | // 上次数据添加时间
12 | lastTime: number;
13 | }
14 |
15 | const defaultLiveRoomData: LiveRoomData = {
16 | roomid: 213,
17 | shortid: 47867,
18 | uid: 0,
19 | lastTime: Date.now()
20 | };
21 |
22 | export default class LiveRoomDao {
23 | static get(shortid: number): LiveRoomData {
24 | let lists = this.getLists();
25 | lists = lists.filter(i => i.shortid === shortid);
26 | return lists[0];
27 | }
28 |
29 | // 获取上一次的直播间
30 | static getResent(): LiveRoomData {
31 | const lists = this.getLists();
32 | return lists[0];
33 | }
34 |
35 | // 获取直播间历史记录列表(按时间倒序排列)
36 | static getLists(): LiveRoomData[] {
37 | const liveRoomStr = localStorage.getItem(prefixKey);
38 | if (!liveRoomStr) {
39 | return [defaultLiveRoomData];
40 | }
41 | // 防止数据为空，为空时返回默认 LiveRoomData[]
42 | const lists: LiveRoomData[] = JSON.parse(liveRoomStr);
43 | if (lists.length === 0) {
44 | return [defaultLiveRoomData];
45 | }
46 | return lists.sort(sortBy('lastTime', false));
47 | }
48 |
49 | static save(data: LiveRoomData) {
50 | let lists = this.getLists();
51 | lists.unshift(data);
52 | lists = unionSet(lists, 'roomid');
53 | localStorage.setItem(prefixKey, JSON.stringify(lists));
54 | }
55 |
56 | static delete(shortid: number) {
57 | let lists = this.getLists();
58 | lists = lists.filter(i => i.shortid !== shortid);
59 | localStorage.setItem(prefixKey, JSON.stringify(lists));
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/renderer/dao/StyledDao.ts:
--------------------------------------------------------------------------------
1 | export enum StyledDaoNS {
2 | UserWrapper = 'UserWrapper',
3 | ContentWrapper = 'ContentWrapper'
4 | }
5 |
6 | export default class StyledDao {
7 | static has(nameSpace: StyledDaoNS): boolean {
8 | return localStorage.getItem(nameSpace) !== null;
9 | }
10 |
11 | static get(nameSpace: StyledDaoNS): string {
12 | return localStorage.getItem(nameSpace) || '';
13 | }
14 |
15 | static save(nameSpace: StyledDaoNS, style: string) {
16 | localStorage.setItem(nameSpace, style);
17 | }
18 |
19 | static clear() {
20 | localStorage.removeItem(StyledDaoNS.UserWrapper);
21 | localStorage.removeItem(StyledDaoNS.ContentWrapper);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/renderer/dao/UesrInfoDao.ts:
--------------------------------------------------------------------------------
1 | export enum UserInfoDaoNS {
2 | UserInfoUid = 'UserInfoUid',
3 | UserInfoSession = 'UserInfoSession',
4 | }
5 |
6 | export default class UserInfoDao {
7 | static has(nameSpace: UserInfoDaoNS): boolean {
8 | return localStorage.getItem(nameSpace) !== null;
9 | }
10 |
11 | static get(nameSpace: UserInfoDaoNS): string {
12 | return localStorage.getItem(nameSpace) || '';
13 | }
14 |
15 | static save(nameSpace: UserInfoDaoNS, style: string) {
16 | localStorage.setItem(nameSpace, style);
17 | }
18 |
19 | static clear() {
20 | localStorage.removeItem(UserInfoDaoNS.UserInfoUid);
21 | localStorage.removeItem(UserInfoDaoNS.UserInfoSession);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/renderer/dao/UserAvatarDao.ts:
--------------------------------------------------------------------------------
1 | const defaultAvatar = 'https://static.hdslb.com/images/member/noface.gif';
2 | // expires： 单位毫秒, 默认10天
3 | const expires = 1000 * 60 * 60 * 24 * 10;
4 |
5 | interface UserAvatar {
6 | uid: number;
7 | avatar: string;
8 | expires: number;
9 | }
10 |
11 | interface UserAvatarData {
12 | [key: number]: UserAvatar
13 | }
14 |
15 | // 放缓存里面更快些
16 | let userAvatarData:UserAvatarData = {}
17 |
18 | export default class UserAvatarDao {
19 | // 初始化 检验expires, 到期自动删除
20 | static init() {
21 | const keyArr = Object.keys(localStorage);
22 | for (let i = 0; i < keyArr.length; i++) {
23 | if (keyArr[i].indexOf(`uid_`) !== -1) {
24 | const uid = Number(keyArr[i].replace('uid_', ''));
25 | const dataStr = localStorage.getItem(keyArr[i])
26 | if(dataStr) {
27 | const parseData: UserAvatar = JSON.parse(dataStr);
28 | if (Date.now() >= parseData.expires) {
29 | this.delete(uid);
30 | } else {
31 | userAvatarData[uid] = parseData
32 | }
33 | }
34 | }
35 | }
36 | }
37 |
38 | static has(uid: number): boolean {
39 | return userAvatarData.hasOwnProperty(uid);
40 | }
41 |
42 | static get(uid: number): UserAvatar {
43 | const data = userAvatarData[uid];
44 | if (!data) {
45 | return {
46 | uid,
47 | avatar: defaultAvatar,
48 | expires: Date.now(),
49 | };
50 | }
51 | return data;
52 | }
53 |
54 | static save(uid: number, avatar: string) {
55 | if(!uid || !avatar) return
56 |
57 | const avatarData: UserAvatar = {
58 | uid,
59 | avatar,
60 | expires: Date.now() + expires
61 | };
62 | userAvatarData[uid] = avatarData;
63 | localStorage.setItem(`uid_${uid}`, JSON.stringify(avatarData));
64 | }
65 |
66 | static delete(uid: number) {
67 | delete userAvatarData[uid]
68 | localStorage.removeItem(`uid_${uid}`);
69 | }
70 | }
71 |
72 | UserAvatarDao.init();
73 |
--------------------------------------------------------------------------------
/src/renderer/i18n/index.ts:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next';
2 | import { initReactI18next } from 'react-i18next';
3 | import LanguageDetector from 'i18next-browser-languagedetector';
4 | import jaTrans from './locales/ja.json';
5 | import zhCnTrans from './locales/zh-cn.json';
6 | import config from '../config';
7 |
8 | const fallbackLng = 'zhCn';
9 | const defaultNS = 'translation';
10 | const lng = config.languageCode || fallbackLng;
11 |
12 | const resources = {
13 | zhCn: {
14 | common: {
15 | ...zhCnTrans
16 | }
17 | },
18 | ja: {
19 | common: {
20 | ...jaTrans
21 | }
22 | }
23 | };
24 |
25 | i18n
26 | .use(LanguageDetector)
27 | .use(initReactI18next)
28 | .init({
29 | resources,
30 | lng,
31 | ns: [defaultNS, 'local'],
32 | defaultNS,
33 | fallbackNS: ['local', 'common'],
34 | keySeparator: false,
35 | interpolation: {
36 | escapeValue: false,
37 | formatSeparator: ','
38 | },
39 | debug: false,
40 | // react: {
41 | // wait: true
42 | // }
43 | });
44 |
45 | export default i18n;
46 |
--------------------------------------------------------------------------------
/src/renderer/i18n/locales/ja.json:
--------------------------------------------------------------------------------
1 | {
2 | "code": "ja",
3 | "LanguageTip": "言語",
4 | "Language": "日本語",
5 | "fontFamily": "フォント",
6 | "HeaderSubscribeTitle": "サブスクリプション",
7 | "HeaderLockTitle": "ロッキング",
8 | "HeaderCloseTitle": "上のウィンドウ",
9 | "LiveRoomPopular": "人気",
10 | "LiveRoomWatched": "見たことがある",
11 | "LiveRoomListsDelete": "削除する",
12 | "LiveRoomListsLoading": "遅いほど...",
13 | "DanmakuControlSetting": "セットアップ",
14 | "TranslateControlSetting": "翻訳設定",
15 | "DanmakuControlEffectBlock": "特殊効果",
16 | "DanmakuControlDanmakuBlock": "弾幕シールド",
17 | "DanmakuControlClearHistory": "弾幕の履歴をクリア",
18 | "DanmakuControlBlockScroll": "弾幕スクロールロック",
19 | "DanmakuControlUpdate": "更新",
20 | "DanmakuControlAbout": "オン",
21 | "GlobalSettingTitle": "全体設定",
22 | "GlobalSettingShowAvatar": "アバターを表示",
23 | "GlobalSettingShowFanLabel": "タイトルを表示",
24 | "GlobalSettingShowLvLabel": "表示レベル",
25 | "GlobalSettingShowVip": "おじいちゃんを表示",
26 | "TranslateSettingTitle": "翻訳設定",
27 | "AutoTranslate": "自動翻訳",
28 | "TranslateFrom": "ソース言語",
29 | "TranslateFromAuto": "自動",
30 | "TranslateTo": "翻訳対象言語",
31 | "VoiceSettingTitle": "音声再生をオンにする",
32 | "VoiceSettingShowVoice": "音声再生をオンにする",
33 | "VoiceTranslateTo": "ターゲット言語を読む",
34 | "VoiceSettingTaskMaxLength": "最大キュー",
35 | "VoiceSettingVolume": "再生音量",
36 | "VoiceSettingVoiceSpeed": "プレイ率",
37 | "DanmakuSettingTitle": "弾幕の設定",
38 | "DanmakuSettingMaxMessageCount": "弾幕の最大数",
39 | "DanmakuSettingMaxGiftCount": "ギフトの最大数",
40 | "DanmakuSettingBlockMinGoldSeed": "最も低いヒマワリの種を表示",
41 | "DanmakuSettingBlockMinSilverSeed": "最も低い銀のヒマワリの種を表示する",
42 | "DanmakuSettingShowTransition": "弾幕遷移アニメーション",
43 | "BackgroundColorTitle": "バックグラウンド",
44 | "BackgroundColorWhite": "白い",
45 | "BackgroundColorBlack": "黒",
46 | "BackgroundOpacity": "背景の透明度",
47 | "AvatarSize": "アバターのサイズ",
48 | "FontSize": "フォントサイズズーム",
49 | "FontLineHeight": "テキスト行の高さ",
50 | "FontMarginTop": "テキストの上余白",
51 | "ResetConfig": "リセット",
52 | "BlockEffectTitle": "特殊効果",
53 | "BlockEffectItem0": "シールドギフト弾幕",
54 | "BlockEffectItem1": "シールドドロー弾幕",
55 | "BlockEffectItem2": "ブロックエントリー情報",
56 | "BlockEffectItem3": "太字のメッセージをブロック",
57 | "BlockEffectItem4": "バブリングギフトのシールド",
58 | "BlockEffectItem5": "シールドキャプテンの弾幕効果",
59 | "GlobalBlockModeTitle": "グローバルブロック",
60 | "GlobalBlockModeHasBeen": "ブロックされました",
61 | "GlobalBlockModeOn": "開いた",
62 | "GlobalBlockModeOff": "シャットダウン",
63 | "GlobalBlockUserLv": "ユーザーレベル",
64 | "GlobalBlockUserLvUnder": "以下",
65 | "GlobalBlockUserNotMember": "非公式メンバー",
66 | "GlobalBlockUserNotBindPhone": "拘束されていない携帯電話ユーザー",
67 | "GlobalBlockKeyWordTitle": "キーワードシールド",
68 | "GlobalBlockKeyWordPlaceHolder": "ブロックしたいものを入力してください",
69 | "GlobalBlockKeyWordAdd": "追加",
70 | "GlobalBlockListsTitle": "ブロックリスト",
71 | "GlobalBlockKeyWordLists": "キーワードをブロック",
72 | "GlobalBlockUserLists": "ユーザーをブロック",
73 | "GlobalBlockCheck": "すべて選択",
74 | "GlobalBlockDelete": "削除する",
75 | "AboutTitle": "オン",
76 | "AboutSourceCode": "ソースコード",
77 | "CurrentVersion": "現行版",
78 | "LatestVersion": "の最新バージョン",
79 | "Author": "著者",
80 | "SocketDanmakuConnecting": "接続しています...",
81 | "SocketDisconnected": "古いソケットは閉じられています...",
82 | "SocketConnectSuccess": "接続に成功しました",
83 | "DanmakuTranslate": "翻訳",
84 | "DanmakuRead": "読み上げます",
85 | "DanmakuBlockUser": "送信者をブロック",
86 | "DanmakuBlockSimilar": "そのような弾幕をブロック",
87 | "DanmakuGuardBuy": "購入",
88 | "DanmakuGuardBuyInRoom": "この部屋に開通しました。",
89 | "DanmakuGuardBuyTime": "月",
90 | "DanmakuLive": "放送を開始",
91 | "DanmakuWelcome": "ようこそ",
92 | "DanmakuWelcomeLiveRoom": "ライブルームに入る",
93 | "DanmakuFollowedLiveRoom": "生放送室をフォローしました",
94 | "DanmakuBlockedUser": "ユーザー",
95 | "DanmakuBlockedText": "禁止された",
96 | "TranslateFailed": "翻訳に失敗しました",
97 | "CustomStyleTitle": "ユーザー定義のスタイル",
98 | "CustomStyledUserName": "ユーザーのニックネームスタイルをカスタマイズ",
99 | "CustomStyledDanmakuContent": "ユーザー定義の弾幕の内容スタイル",
100 | "ShowGiftDanmakuList": "ギフト弾幕リストを表示",
101 | "RankMessageList": "ゲストブック",
102 | "IgnoreMouse": "マウスの浸透",
103 | "UserConfig": "ユーザー構成",
104 | "Parameter": "パラメータ",
105 | "ParameterDescription": "パラメータの説明",
106 | "ParameterDescriptionText": "bilibiliプライバシーの制限のため、ログインしていない場合は他人のニックネームを見ることができません。ブラウザでbilibiliにログインした後、コンソールクッキーでSESSDATAの値を選択し、次の入力ボックスにコピーして貼り付けてクリックしてリフレッシュすればよい。",
107 | "SessionError": "uid取得に失敗しました。セッションが正しいか期限切れであるかを確認してください",
108 | "Refresh": "リフレッシュ"
109 | }
110 |
--------------------------------------------------------------------------------
/src/renderer/i18n/locales/lang.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "Language": "中文",
4 | "code": "zhCn"
5 | },
6 | {
7 | "Language": "日本語",
8 | "code": "ja"
9 | }
10 | ]
11 |
--------------------------------------------------------------------------------
/src/renderer/i18n/locales/zh-cn.json:
--------------------------------------------------------------------------------
1 | {
2 | "code": "zhCn",
3 | "LanguageTip": "语言",
4 | "Language": "中文",
5 | "fontFamily": "字体",
6 | "HeaderSubscribeTitle": "订阅",
7 | "HeaderLockTitle": "窗口置顶",
8 | "HeaderCloseTitle": "关闭",
9 | "LiveRoomPopular": "人气值",
10 | "LiveRoomWatched": "观看过",
11 | "LiveRoomListsDelete": "删除",
12 | "LiveRoomListsLoading": "越多越慢...",
13 | "DanmakuControlSetting": "设置",
14 | "TranslateControlSetting": "翻译设置",
15 | "DanmakuControlEffectBlock": "屏蔽特效",
16 | "DanmakuControlDanmakuBlock": "弹幕屏蔽",
17 | "DanmakuControlClearHistory": "清除弹幕历史",
18 | "DanmakuControlBlockScroll": "弹幕滚动锁定",
19 | "DanmakuControlUpdate": "更新",
20 | "DanmakuControlAbout": "关于",
21 | "GlobalSettingTitle": "全局设置",
22 | "GlobalSettingShowAvatar": "显示头像",
23 | "GlobalSettingShowFanLabel": "显示头衔",
24 | "GlobalSettingShowLvLabel": "显示等级",
25 | "GlobalSettingShowVip": "显示姥爷",
26 | "TranslateSettingTitle": "翻译设置",
27 | "AutoTranslate": "自动翻译(已失效)",
28 | "TranslateFrom": "源语言",
29 | "TranslateFromAuto": "自动",
30 | "TranslateTo": "翻译目标语言",
31 | "VoiceSettingTitle": "开启语音播放",
32 | "VoiceSettingShowVoice": "开启语音播放",
33 | "VoiceTranslateTo": "朗读目标语言",
34 | "VoiceSettingTaskMaxLength": "队列最大值",
35 | "VoiceSettingVolume": "播放音量",
36 | "VoiceSettingVoiceSpeed": "播放语速",
37 | "DanmakuSettingTitle": "弹幕设置",
38 | "DanmakuSettingMaxMessageCount": "弹幕最大条数",
39 | "DanmakuSettingMaxGiftCount": "礼物最大条数",
40 | "DanmakuSettingBlockMinGoldSeed": "显示最低金瓜子",
41 | "DanmakuSettingBlockMinSilverSeed": "显示最低银瓜子",
42 | "DanmakuSettingShowTransition": "弹幕过渡动画",
43 | "BackgroundColorTitle": "背景",
44 | "BackgroundColorWhite": "白色",
45 | "BackgroundColorBlack": "黑色",
46 | "BackgroundOpacity": "背景透明度",
47 | "AvatarSize": "头像大小",
48 | "FontSize": "字号缩放",
49 | "FontLineHeight": "文字行高",
50 | "FontMarginTop": "文字上边距",
51 | "ResetConfig": "重置",
52 | "BlockEffectTitle": "屏蔽特效",
53 | "BlockEffectItem0": "屏蔽礼物弹幕",
54 | "BlockEffectItem1": "屏蔽抽奖弹幕",
55 | "BlockEffectItem2": "屏蔽进场信息",
56 | "BlockEffectItem3": "屏蔽醒目留言",
57 | "BlockEffectItem4": "屏蔽冒泡礼物",
58 | "BlockEffectItem5": "屏蔽舰长弹幕特效",
59 | "BlockEffectItem6": "屏蔽表情动画",
60 | "GlobalBlockModeTitle": "全局屏蔽",
61 | "GlobalBlockModeHasBeen": "屏蔽已",
62 | "GlobalBlockModeOn": "开启",
63 | "GlobalBlockModeOff": "关闭",
64 | "GlobalBlockUserLv": "用户等级",
65 | "GlobalBlockUserLvUnder": "以下",
66 | "GlobalBlockUserNotMember": "非正式会员",
67 | "GlobalBlockUserNotBindPhone": "未绑定手机用户",
68 | "GlobalBlockKeyWordTitle": "关键词屏蔽",
69 | "GlobalBlockKeyWordPlaceHolder": "请输入您要屏蔽的内容",
70 | "GlobalBlockKeyWordAdd": "添加",
71 | "GlobalBlockListsTitle": "屏蔽列表",
72 | "GlobalBlockKeyWordLists": "屏蔽关键词",
73 | "GlobalBlockUserLists": "屏蔽用户",
74 | "GlobalBlockCheck": "全选",
75 | "GlobalBlockDelete": "删除",
76 | "AboutTitle": "关于",
77 | "AboutSourceCode": "源代码",
78 | "CurrentVersion": "当前版本",
79 | "LatestVersion": "最新版本",
80 | "Author": "作者",
81 | "SocketDanmakuConnecting": "连接中...",
82 | "SocketDisconnected": "旧的socket已经关闭...",
83 | "SocketConnectSuccess": "连接成功",
84 | "DanmakuTranslate": "翻译",
85 | "DanmakuRead": "朗读",
86 | "DanmakuBlockUser": "屏蔽发送者",
87 | "DanmakuBlockSimilar": "屏蔽此类弹幕",
88 | "DanmakuGuardBuy": "购买",
89 | "DanmakuGuardBuyInRoom": "在本房间开通了",
90 | "DanmakuGuardBuyTime": "月",
91 | "DanmakuLive": "开播啦",
92 | "DanmakuWelcome": "欢迎",
93 | "DanmakuWelcomeLiveRoom": "进入直播间",
94 | "DanmakuFollowedLiveRoom": "关注了直播间",
95 | "DanmakuBlockedUser": "用户",
96 | "DanmakuBlockedText": "已被禁言",
97 | "TranslateFailed": "翻译失败",
98 | "CustomStyleTitle": "自定义样式",
99 | "CustomStyledUserName": "自定义用户昵称样式",
100 | "CustomStyledDanmakuContent": "自定义弹幕内容样式",
101 | "ShowGiftDanmakuList": "显示礼物弹幕列表",
102 | "RankMessageList": "留言榜",
103 | "IgnoreMouse": "鼠标穿透",
104 | "UserConfig": "用户配置",
105 | "Parameter": "参数配置",
106 | "ParameterDescription": "参数说明",
107 | "ParameterDescriptionText": "由于bilibili隐私限制, 未登录情况下无法查看他人昵称。为了更好的体验可在浏览器登录bilibili后，在控制台cookie中选择SESSDATA的值, 复制粘贴到以下输入框点击刷新即可。",
108 | "SessionError": "uid获取失败,请检查session是否正确或是否已过期",
109 | "Refresh": "刷新"
110 | }
111 |
--------------------------------------------------------------------------------
/src/renderer/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | handleArrowClick('right')} />
89 |
90 |