## 项目结构
一叶的前端代码在本项目里。
Client 文件夹主要有 chatbox 和 inject-script 两部分，都是用 create-react-app 创建的。工作方法是首先在网页里引入 inject-script，然后 inject-script 运行时会生成一个包含了聊天盒的 iframe。
这种分离的设计有两个优点：
1. 聊天盒因为功能很多所以文件较大，所以不用在每次加载页面的时候就加载它，而是当用户想要使用的时候才打开。
2. Iframe 可以起到很好的隔离作用，你的网站和一叶之间不会互相影响，不论是 javascript 还是 css 样式。
Inject script 部分的文件比较小，它的功能有：
1. 在网页上增加一个按钮，点击按钮可以打开含有聊天盒的 iframe。
2. 自动连接聊天服务器，显示多少人在当前网页或网站，显示实时聊天弹幕。
## 如何开发与本地运行
### 本地运行客户端
前面提到了客户端分有 inject-script 和 chatbox 两部分，两者都要启动聊天盒才能正常使用。
首先运行 chatbox 部分
```
cd client/chatbox
npm install .
npm start
```
第一次运行需要先 `npm install .`安装依赖的库，之后则不用。项目会运行于 localhost:3000，但聊天盒并不能独立工作，接下来我们运行 injection-script 的部分。
```
cd client/inject-script
npm install .
npm start
```
现在如果你去 localhost:3210，就可以看到客户端正常运行了，点击右下角的圆圈打开聊天盒。
客户端默认会和官方的服务器通讯，而不是你的本地后端，你可以更改默认的设定，让客户端和你的本地后端通讯。如何运行后端代码请见后端的代码库
[聊天系统后端](https://github.com/Same-Page/chat-backend)
[基本系统后端](https://github.com/Same-Page/web-backend)
## 如何部署前端
### 生成客户端文件
Inject-script 和 chatbox 两部分要分别生成。
生成聊天盒的客户端文件。
```
cd client/chatbox
npm run build
```
生成 inject-script 的客户端文件。
```
cd client/inject-scirpt
npm run build
```
生成的文件在对应的 build 文件夹里，更多细节可以参考 Facebook 官方的 create-react-app 教程。
### 部署到你的网站上
将 inject-script 的`client/inject-scirpt/build/content-static`文件夹上传到你的服务器，确保可以以`your-website.com/build/content-static`的形式访问里面的文件. 接下来在你的网站里引入下面两行即可
```
```
如果聊天盒的部分也要使用你自己生成的版本，相似的，上传你的`client/chatbox/build/`文件夹到你的服务器，确保可以访问`your-website.com/build/static`里面的文件。同时要记得修改 injection script 中设置的 chatbox iframe 的地址指向你自己上传的这个版本，`your-website.com/build/index.html`，也可以在你的网站定义下面的设置。
```
window.spConfig = {
chatboxUrl: 'your-website.com/build/index.html'
}
```
================================================
FILE: README_EN.md
================================================
# Same Page
Same Page (previously called Chat Anywhere) is a [Chrome extension](https://chrome.google.com/webstore/detail/same-page/bldcellajihanglphncgjmceklbibjkk) that adds a chat box to any website. You can also customize the source code and use it on your own website.
## Project structure
This repository contains frontend code only.
The client folder includes the chat box and an injection script, both of them are built with create-react-app. The way it works is that once you include the injection script to your website, the script can create an iframe with chat box. This design has two major benefits:
1. The chat box's file size is quite big because it includes so many features, therefore you probably don't want to load it on every page load. It makes a lot more sense to load the chat box iframe only when user wants to use it.
2. Iframe provides great isolation of the chat box and your website, no need to worry about CSS or Javascript pollution.
The injection script itself is rather small, it's able to
1. Add a button that creates the iframe with chat box.
2. Connect to chat socket server and show how many users are on the same page or site.
3. Show Danmu (scrolling text) for live messages.
We include the 2nd and the 3rd functionality to the injection script rather than the chat box because they are very useful for the Chrome extension.
## How to develop and run locally
### Run the client locally
Remeber that the client contains two pieces, so there are two steps to run client locally.
First, run the chat box app
```
cd client/chatbox
npm install .
npm start
```
The first time you run this will be slower, because it needs to install all the packages needed. The chat box will be running on localhost:3000, but the chat box is not designed to be used by itself, instead, it must be used in an iframe. So the next thing you need to do is to run the injection script app.
```
cd client/injection-script
npm install .
npm start
```
Now you should see the client running on localhost:3210, the chatbox should also show up there.
The client is talking to the official backend by default. If you want the client to talk to your local backend, it's very easy. Instead of `npm start`, type `npm start:dev`. Then it will be talking to your localhost:8080 for websocket connections for live chat feature and localhost:8081 for ajax calls for all other purposes. So you need to have those running. Please read the next section to learn how to run backend locally.
### Run websocket server locally for live chat
```
cd server/chat-socket
npm install .
node index.js
```
### Run API backend locally
```
cd server/api
(Highly recommend that you create a Python virtual env first)
pip install -r requirements.txt
python run.py
```
## How to deploy frontend
### Build
Like mentioned before, the client has two parts - chat box and injection script. They need to be built separately.
To build the chat box.
```
cd client/chatbox
npm run build
```
To build the injection script.
```
cd client/injection-scirpt
npm run build
```
The final build is placed in the `/build` folder.
### Deploy
To use your own version of injection script, upload your `client/injection-scirpt/build/content-static` folder to your server so it's reachable as `your-website.com/build/content-static`. Then include the scripts by adding following lines to your website.
```
```
To use your own version of chat box, upload your `client/chatbox/build/content-static` folder to your server so it's reachable as `your-website.com/build/static`. You'll need to modify the injection script, specifically the iframe src to point to your own chat box, otherwise it will use the offical build of the chat box.
This doc needs update...
================================================
FILE: chatbox/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: chatbox/.prettierrc
================================================
{
"tabWidth": 2,
"semi": false
}
================================================
FILE: chatbox/.storybook/addons.js
================================================
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
================================================
FILE: chatbox/.storybook/config.js
================================================
import { configure } from '@storybook/react';
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);
================================================
FILE: chatbox/README.md
================================================
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.
{room.connectionStatus !== "CONNECTED" && (
{/* )} */}
)
}
export default ChatBody
// const stateToProps = (state, props) => {
// return { show: state.chatView === props.chatView }
// }
// export default connect(stateToProps)(ChatBody)
================================================
FILE: chatbox/src/containers/Chat/Chat.js
================================================
import React, { useState, useEffect } from "react"
// import { message } from "antd"
import { connect } from "react-redux"
import Header from "./Header"
import View from "./View"
// import Footer from "./Footer"
// import MusicTab from "containers/Music"
import socketManager from "socket"
import { changeChatView, setRoomConnectionStatus } from "redux/actions/chat"
import { viewOtherUser, changeTab } from "redux/actions"
import storageManager from "utils/storage"
function syncRoomsPeriodically() {
setTimeout(() => {
// socketManager.syncRooms()
syncRoomsPeriodically()
}, 20 * 1000)
}
function Chat({
blacklist,
account,
rooms,
manMadeRoom,
chatModes,
activeView,
changeChatView,
changeTab,
viewOtherUser,
setRoomConnectionStatus
}) {
// const [mediaDisplay, setMediaDisplay] = useState("none")
// const [mediaNum, setMediaNum] = useState(0)
const [showRoomList, setShowRoomList] = useState(false)
const [noJoinList, setNoJoinList] = useState([])
const [ready, setReady] = useState(false)
useEffect(() => {
storageManager.get("noJoin", noJoin => {
let autoJoinRooms = rooms
if (noJoin) {
setNoJoinList(noJoin)
autoJoinRooms = rooms.filter(r => {
return !noJoin.includes(r.id)
})
}
socketManager.autoJoinRooms(autoJoinRooms)
autoJoinRooms.forEach(r => {
setRoomConnectionStatus(r.id, "JOINING")
})
setReady(true)
})
// setTimeout(() => {
// // wait a few secs only because if user make chatbox iframe
// // display by default, there is race condition that before
// // parent finish joining rooms, chatbox is already trying to get
// // room chat history, thus get no chat history
// socketManager.getRoomInfo()
// }, 500)
syncRoomsPeriodically()
}, [])
if (!ready) return
return (
Offline
)}
{res}
{/*
{
setMediaDisplay("none")
}}
setMediaNum={setMediaNum}
/>
*/}
{
// setMediaDisplay("block")
// }}
/>
{/* {
// setMediaDisplay("block")
// }}
/>
)
})}
)
}
const stateToProps = state => {
return {
chatModes: state.chatModes,
activeView: state.chatView,
manMadeRoom: state.manMadeRoom,
rooms: state.rooms,
account: state.account,
blacklist: state.blacklist
}
}
export default connect(stateToProps, {
changeChatView,
viewOtherUser,
changeTab,
setRoomConnectionStatus
})(Chat)
================================================
FILE: chatbox/src/containers/Chat/Footer/Footer.css
================================================
.sp-chat-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
================================================
FILE: chatbox/src/containers/Chat/Footer/Footer.js
================================================
import "./Footer.css"
import React, { useState, useEffect } from "react"
import { message, Button, Modal, Tooltip } from "antd"
import { useIntl } from "react-intl"
// import { connect } from "react-redux"
import moment from "moment"
import InputWithPicker from "components/InputWithPicker"
import socketManager from "socket/socket"
import { getUrl } from "utils/url"
const MESSAGE_TIME_GAP = 2 * 1000
let lastMsgTime = 0
function Footer({
account,
setMessages,
chatView,
room,
setRoomConnectionStatus
// connected,
// isJoining
}) {
const roomId = room.id
const intl = useIntl()
// const [joining, setJoining] = useState(isJoining)
const [showInvitationModal, setShowInvitationModal] = useState(false)
// useEffect(() => {
// if (connected) {
// setJoining(false)
// }
// }, [connected])
// const roomId = room.id
// const connected = room.connected
// window.spDebug("[Footer.js] connected " + connected)
// const [invitationType, setInvitationType] = useState("room")
// const [invitationPurpose, setInvitationPurpose] = useState("chat")
const send = payload => {
const now = new Date()
if (payload.type === "file" || now - lastMsgTime > MESSAGE_TIME_GAP) {
lastMsgTime = now
const data = {
id: Math.ceil(Math.random() * 100000),
token: account.token,
roomType: chatView,
roomId: roomId,
content: payload
}
socketManager.sendMessage(data)
// convert message to be same format as from server
if (payload.type === "text") {
data.content = {
value: payload.text,
type: payload.type
}
data.time = moment()
data.user = account
data.self = true
// TODO: add timeout for server confirmation
// if no confirmation then show error
setMessages(prevMessages => {
return [...prevMessages, data]
})
}
return true
} else {
message.warn(intl.formatMessage({ id: "slow.down" }))
return false
}
}
let content = (
{intl.formatMessage({ id: "share.url.privacy" })}
{/* 邀请目的
邀请对象
{
setInvitationType(e.target.value)
}}
value={invitationType}
>
当前房间的用户
关注者
全站用户（需20积分）
*/}
{content}
}
export default Footer
// const stateToProps = (state, props) => {
// let roomId = "lobby"
// if (state.chatView == "page") {
// roomId = getUrl()
// }
// if (state.chatView == "site") {
// roomId = getDomain()
// }
// return {
// roomId: roomId
// }
// }
// export default connect(null, { setRoomConnectionStatus })(Footer)
================================================
FILE: chatbox/src/containers/Chat/Footer/index.js
================================================
export { default } from "./Footer"
================================================
FILE: chatbox/src/containers/Chat/Header/Header.css
================================================
.sp-toggle-online {
float: left;
display: none;
}
.sp-toggle-page-site-chat {
/* z-index: 0; */
/* position: relative; */
/* padding-left: 5px; */
/* font-size: 10px; */
}
.ant-tooltip-inner {
/* this is for tooltip of page/site toggle
sometimes the url is tooo long
TODO: This general css is dangerous!
*/
max-height: 200px;
overflow: hidden;
}
.sp-online-user {
display: inline-block;
margin: 5px;
cursor: pointer;
}
.sp-online-user-username {
font-size: 10px;
max-width: 64px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
line-height: 10px;
padding-top: 5px;
}
.yiyelink {
float: right;
margin-top: 30px;
color: yellowgreen;
}
/* .ant-badge {
margin-top: -3px;
} */
================================================
FILE: chatbox/src/containers/Chat/Header/Header.js
================================================
import "./Header.css"
// import { FormattedMessage, useIntl } from "react-intl"
import { useIntl } from "react-intl"
import React, { useState, useEffect } from "react"
import { Badge, Radio, Button, Tooltip, Icon } from "antd"
import { connect } from "react-redux"
import socketManager from "socket/socket"
import RoomHeader from "./RoomHeader"
import RoomInfo from "./RoomInfo"
import { setRoomConnectionStatus } from "redux/actions/chat"
import { getUrl } from "utils/url"
function ChatHeader({
chatModes,
activeView,
changeTab,
changeChatView,
viewOtherUser,
rooms,
account,
setShowRoomList,
setRoomConnectionStatus
}) {
// const chatModes = props.chatModes
// const activeView = props.activeView
const intl = useIntl()
const [showHelp, setShowHelp] = useState(false)
const [unreads, setUnreads] = useState({})
const [showUsers, toggleUsers] = useState(false)
useEffect(() => {
setShowHelp(false)
setUnreads(unreads => {
const res = { ...unreads }
res[activeView] = 0
return res
})
socketManager.addHandler("chat message", "mark_unread_chat", data => {
const roomType = data.roomType
if (roomType !== activeView) {
setUnreads(unreads => {
const res = { ...unreads }
if (res[roomType]) {
res[roomType]++
} else {
res[roomType] = 1
}
return res
})
}
})
return () => {
socketManager.removeHandler("chat message", "mark_unread_chat")
}
}, [activeView])
const getRoom = mode => {
let room = rooms.filter(r => {
return r.type === mode
})
if (room.length) {
room = room[0]
} else {
room = null
}
return { ...room }
}
let content = (
{showHelp && (
{
const chatView = e.target.value
changeChatView(chatView)
}}
>
{chatModes.map(mode => {
const room = getRoom(mode)
let roomTitle = ""
let unreadCount = unreads[mode] || 0
if (room) {
if (mode === "room") {
roomTitle = room.name
} else {
roomTitle = room.id
}
}
return (
//
{intl.formatMessage({ id: mode })}
//
)
})}
{activeView === "room" &&
room &&
!getUrl().includes("yiyechat.com/room/") && (
)}
{/*
)
}
return {content}
}
// const stateToProps = state => {
// return { chatView: state.chatView, chatModes: state.chatModes }
// }
// export default connect(null, { changeChatView, viewOtherUser })(
// ChatHeader
// )
// export default ChatHeader
export default connect(null, { setRoomConnectionStatus })(ChatHeader)
================================================
FILE: chatbox/src/containers/Chat/Header/Invite.js
================================================
import React, { useState } from "react"
import { Popover, Button } from "antd"
function Users(props) {
// const users = props.users || []
const [visible, setVisibility] = useState(false)
return (
{intl.formatMessage({ id: "room.about" })}
{room.about}{room.owner && room.owner.avatarSrc && (
{intl.formatMessage({ id: "room.owner" })}
{intl.formatMessage({ id: "room.about" })}
{intl.formatMessage({ id: "same.site.chat" })} @{" "} {room.id}{intl.formatMessage({ id: "room.about" })}
{intl.formatMessage({ id: "same.page.chat" })} @{" "} {room.id}
// {/*
// )
// }
return (
浏览相似内容的用户会进入该聊天室
*/} //{intl.formatMessage({ id: "keywords.of.room" })}
// {room.tags && room.tags.join(", ")} // {(!room.tags || !room.tags.length) && ( // {intl.formatMessage({ id: "no.keyword" })} // )} //
{intl.formatMessage({ id: "auto.join" })}
{" "}
{
setJoin(joining)
storageManager.get("noJoin", noJoin => {
noJoin = noJoin || []
if (joining) {
noJoin = noJoin.filter(n => {
return n !== room.id
})
} else {
noJoin.push(room.id)
}
noJoin = [...new Set(noJoin)]
storageManager.set("noJoin", noJoin)
// Join or leave room is decided by noJoin filter
})
}}
/>{" "}
{helpContent}
{room.media && (
播放列表
-
{room.media.map((m, index) => {
const mediaName = m["name"]
return (
- { window.playMediaFromRoomMediaList(index) setShowHelp(false) }} > {mediaName} ) })}
viewOtherUser(user)}
key={user.id}
>
{avatar}
)
})
return {username}
{users}
}
const stateToProps = state => {
return { blacklist: state.blacklist }
}
export default connect(stateToProps, { viewOtherUser })(Users)
================================================
FILE: chatbox/src/containers/Chat/Header/index.js
================================================
export { default } from "./Header"
================================================
FILE: chatbox/src/containers/Chat/Message/Body.css
================================================
.sp-message-body {
max-width: calc(100% - 50px);
margin-top: 5px;
display: inline-block;
}
.sp-message-body.file,
.sp-message-body.text,
.sp-message-body.url {
background: rgba(255, 255, 255);
border-radius: 5px;
padding: 10px;
/* padding-top: 5px; */
/* padding-bottom: 5px; */
word-wrap: break-word;
white-space: pre-wrap;
/* border: 1px solid #e0e0e0; */
color: black;
text-align: left;
}
.sp-message-body.invite {
text-align: left;
}
.sp-message-body.emoji {
font-size: 25px;
color: black;
padding-left: 5px;
padding-right: 5px;
}
.self .sp-message-body.text {
background: #bf0;
}
.sp-message-body img {
/* max-width: 100px; */
}
img.sp-message-image {
max-width: 100%;
max-height: 350px;
cursor: pointer;
}
.sp-chat-message-avatar {
cursor: pointer;
}
.sp-message-media {
cursor: pointer;
border-radius: 5px;
padding: 10px;
/* padding-top: 5px; */
/* padding-bottom: 5px; */
word-wrap: break-word;
white-space: pre-wrap;
/* border: 1px solid #e0e0e0; */
color: #ffffff;
background: #1890ff;
text-align: left;
}
.sp-message-menu .ant-popover-inner-content {
padding: 0;
}
.sp-message-menu .ant-btn {
border: none;
}
.sp-message-body .sp-invitation-chat a {
color: lightcoral;
}
.sp-message-body .sp-invitation-help a {
color: rgb(59, 160, 255);
}
================================================
FILE: chatbox/src/containers/Chat/Message/Body.js
================================================
import "./Body.css"
import React, { useState } from "react"
import { Popover, Button, Icon } from "antd"
import { useIntl } from "react-intl"
import { connect } from "react-redux"
import socketManager from "socket"
// import Iframe from "components/Iframe"
import { getData } from "services"
function isPureEmoji(string) {
if (!string) return false
var regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g
return string.replace(regex, "") === ""
}
function MessageBody(props) {
// const [showIframe, setShowIframe] = useState(false)
const data = props.data.content
const self = props.data.self
let content = data.value
let contentType = data.type
const intl = useIntl()
if (isPureEmoji(content)) {
// This should be done in backend
contentType = "emoji"
}
let className = "sp-message-body " + contentType
if (contentType === "sticker") {
let imgSrc = content
content = {
props.playMedia(src)
// if (window.player) {
// window.playMedia(src)
// } else {
// console.error("no player")
// }
}}
>
)
}
if (contentType === "url") {
// const invitationData = data.metadata
// const purposeStr = invitationData.purpose === "chat" ? "聊天邀请" : "求助"
// const iconType =
// invitationData.purpose === "chat" ? "message" : "question-circle"
// const iconType = "link"
content = (
{contentType === "media" && (
)}
{contentType === "url" && (
)}
{contentType === "image" && (
)}
)
const popoverPlacement = self ? "left" : "right"
let contentWrapper = {content}
if (props.showMenu) {
contentWrapper = (
{contentWrapper}
{/* {contentType === "url" && (
)} */}
)
}
// export default MessageBody
const stateToProps = state => {
return {
account: state.account
}
}
export default connect(stateToProps)(MessageBody)
================================================
FILE: chatbox/src/containers/Chat/Message/Message.css
================================================
.sp-message-username {
font-size: smaller;
vertical-align: middle;
margin-left: 5px;
max-width: 60px;
text-overflow: ellipsis;
display: inline-block;
margin-right: 5px;
overflow: hidden;
}
================================================
FILE: chatbox/src/containers/Chat/Message/Message.js
================================================
import "./Message.css"
import React from "react"
import MessageBody from "./Body"
import AvatarWithHoverCard from "containers/OtherProfile/AvatarWithHoverCard"
import { Avatar } from "antd"
/*
This is used by chat messages and direct messages
props includes:
user: object
content
type: text/sticker
self
*/
function ChatMessage(props) {
const data = props.data
const user = data.user
const showUser = props.showUser // avatar and name
const timeDisplay = props.timeDisplay
let userInfo = ""
let avatar =
{user.name}
{avatar}
)
} else {
userInfo = (
{avatar}
{user.name}
)
}
}
return (
{messageTime}
{userInfo}
)
}
export default ChatMessage
================================================
FILE: chatbox/src/containers/Chat/Message/index.js
================================================
export { default } from "./Message"
================================================
FILE: chatbox/src/containers/Chat/ResizableMedia.js
================================================
import React, { useEffect, useRef, useState } from "react"
import { Resizable } from "re-resizable"
import MusicPlayer from "components/MusicPlayer"
import { Button } from "antd"
function ResizableMedia({
show,
showMedia,
setShowMedia,
resizableHeight,
setResizableHeight,
pauseMedia,
playerRef,
mediaSources,
iframeUrl,
setIframeUrl,
messageDetail,
setMessageDetail
}) {
const resizableStyle = {}
if (!show) {
resizableStyle.display = "none"
}
const resizableRef = useRef()
useEffect(() => {
if (resizableRef && resizableRef.current) {
window.foo = resizableRef.current
resizableRef.current.addEventListener("click", e => {
console.log(e)
if (e && e.target && e.target.tagName.toUpperCase() === "IMG") {
e.preventDefault()
window.parent.postMessage({ imgSrc: e.target.src }, "*")
}
return false
})
}
}, [])
return (
{comments}
}
export default CommentBody
================================================
FILE: chatbox/src/containers/Comment/Comment.css
================================================
.sp-comment-footer {
position: fixed;
bottom: 0;
width: 100%;
background: #eceff1;
}
.sp-comment-footer textarea.ant-input {
border-left: 0;
border-right: 0;
}
.sp-comment-message-avatar {
cursor: pointer;
}
================================================
FILE: chatbox/src/containers/Comment/Comment.js
================================================
import "./Comment.css"
import React from "react"
import { Button, Icon, Input } from "antd"
import axios from "axios"
import moment from "moment"
import urls from "config/urls"
import { getUrl } from "utils/url"
// import AccountContext from "context/account-context"
import Header from "./Header"
import Body from "./Body"
const LIMIT = 10
const commentBodyStyle = {
height: "calc(100% - 100px)",
overflow: "auto",
width: "100%",
position: "fixed",
background: "#eceff1",
padding: 10,
paddingBottom: 30
}
const { TextArea } = Input
class CommentTab extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: false,
hasMore: true,
submitting: false,
comments: [],
input: "",
inputFocus: false,
replyTo: "",
replyToUserId: ""
}
this.inputRef = React.createRef()
this.bodyRef = React.createRef()
this.offset = 0
this.order = "best"
}
onFocus = e => {
this.setState({ inputFocus: true })
}
reply = (userId, username) => {
this.setState({ replyTo: username, replyToUserId: userId })
this.inputRef.current.focus()
}
vote = commentId => {
const payload = {
comment_id: commentId
}
axios
.post(urls.dbAPI + "/api/v1/vote_comment", payload)
.then(res => {})
.catch(err => {})
.then(() => {})
}
submit = () => {
const payload = {
url: getUrl(),
content: this.state.input,
reply_to_user_id: this.state.replyToUserId,
reply_to_user_name: this.state.replyTo
}
this.setState({ submitting: true })
axios
.post(urls.dbAPI + "/api/v1/post_comment", payload)
.then(res => {
let content = this.state.input
if (this.state.replyTo) {
content = "@" + this.state.replyTo + " \n" + content
}
const account = this.context.account
const selfMsg = {
id: Math.random(100), // whatever unique
userId: account.id,
avatarSrc: account.avatarSrc,
name: account.name,
time: moment().fromNow(),
content: content,
self: true,
noFooter: true // can't support any action since there is no id
// maybe backend can return id
}
this.setState({ comments: [selfMsg].concat(this.state.comments) })
this.clearInput()
setTimeout(() => {
window.spDebug("[Comment] scroll to top")
this.bodyRef.current.scrollTop = 0
}, 500)
})
.catch(err => {
console.error(err)
})
.then(() => {
this.setState({ submitting: false })
})
}
handleInput = e => {
this.setState({ input: e.target.value })
}
clearInput = () => {
this.setState({
input: "",
inputFocus: false,
replyTo: null,
replyToUserId: null
})
}
orderBy = val => {
this.setState({ comments: [], hasMore: true })
this.offset = 0
this.order = val
this.loadComments()
}
loadMore = () => {
this.offset = this.state.comments.length
this.loadComments()
}
loadComments = () => {
this.setState({ loading: true })
const payload = {
url: getUrl(),
offset: this.offset,
limit: LIMIT,
order: this.order
}
axios
.post(urls.dbAPI + "/api/v1/get_comments", payload)
.then(res => {
res.data.forEach(comment => {
comment.time = moment.utc(comment.created).fromNow()
})
this.setState({
comments: this.state.comments.concat(res.data),
hasMore: res.data.length === LIMIT
})
})
.catch(err => {
console.error(err)
})
.then(() => {
this.setState({ loading: false })
})
}
componentDidMount() {
this.loadComments()
}
render() {
let rowNum = 1
if (this.state.inputFocus) {
rowNum = 5
}
let placeholder = "留言。。。"
if (this.state.replyTo) {
placeholder = "@" + this.state.replyTo
}
let footer = (
{this.state.inputFocus && (
)}
)
}
return (
{this.state.loading && this.state.comments.length === 0 && (
// when no comments loaded, show loading icon
// if there are comments loaded, loading icon is
// shown in load more button
)}
{this.state.comments.length >= LIMIT && this.state.hasMore && (
{footer}
)
}
}
// CommentTab.contextType = AccountContext
export default CommentTab
================================================
FILE: chatbox/src/containers/Comment/Header.js
================================================
import React from "react"
import { Select } from "antd"
const Option = Select.Option
function CommentHeader(props) {
return (
{data.name}
{data.time}
{data.content}
{!data.noFooter && (
{comment.url}
))
}
export default Comments
================================================
FILE: chatbox/src/containers/Home/Comments/index.js
================================================
export { default } from "./Comments"
================================================
FILE: chatbox/src/containers/Home/CreateRoom.js
================================================
import React from "react"
import { Form, Input, Button, message } from "antd"
import { createRoom } from "services/room"
// const { Option } = Select
class CreateRoomForm extends React.Component {
state = {
submitting: false
}
room = this.props.room
handleSubmit = e => {
e.preventDefault()
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
window.spDebug("Received values of form: " + values)
if (!(values.name && values.about)) {
message.error("必须填写房间名与介绍")
return
}
this.setState({ submitting: true })
if (this.room) {
values["roomId"] = this.room.id
}
createRoom(values)
.then(resp => {
message.success("成功！")
this.props.back()
this.props.afterUpdateCb(resp.data)
// reload all rooms
})
.catch(err => {})
.then(() => {
this.setState({ submitting: false })
})
}
})
}
render() {
const { getFieldDecorator } = this.props.form
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
}
}
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0
},
sm: {
span: 16,
offset: 8
}
}
}
return (
)
}
}
const WrappedCreateRoomForm = Form.create({ name: "create-room" })(
CreateRoomForm
)
export default WrappedCreateRoomForm
================================================
FILE: chatbox/src/containers/Home/Danmus/Danmus.js
================================================
import React, { useState, useEffect } from "react"
import { Icon } from "antd"
import { getLatestDanmus } from "services/danmu"
import AvatarWithHoverCard from "containers/OtherProfile/AvatarWithHoverCard"
function Danmus(props) {
const [loading, setLoading] = useState(true)
const [danmus, setDanmus] = useState([])
useEffect(() => {
getLatestDanmus()
.then(resp => {
setDanmus(resp.data)
})
.catch(err => {})
.then(() => {
setLoading(false)
})
}, [])
if (loading)
return (
{comment.user.name}
{moment.utc(comment.created).fromNow()}
{comment.content}
{danmu.url}
))
}
export default Danmus
================================================
FILE: chatbox/src/containers/Home/Danmus/index.js
================================================
export { default } from "./Danmus"
================================================
FILE: chatbox/src/containers/Home/Discover.js
================================================
import "./Home.css"
import { useIntl } from "react-intl"
import React, { useState, useEffect } from "react"
import { Icon, Modal, Button } from "antd"
import { connect } from "react-redux"
import CreateRoomForm from "./CreateRoom"
import { getRooms } from "services/room"
import {
setDiscoveryRoom,
joinManMadeRoom,
setRoomConnectionStatus
} from "redux/actions/chat"
// import VideoRoom from "./VideoRoom"
import socketManager from "socket"
const roomColorCache = {}
function getRandomRolor(roomId) {
if (roomId in roomColorCache) {
return roomColorCache[roomId]
}
var letters = "0123456789".split("")
var color = "#"
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 10)]
}
roomColorCache[roomId] = color
return color
}
const title = (
创建房间（需10积分）
)
function Discover({
joinManMadeRoom,
setRoomConnectionStatus,
back,
showCreateRoomBtn,
user,
activeTab
}) {
// room joined isn't put to redux state, any problem?
const intl = useIntl()
const [loadingRooms, setLoadingRooms] = useState(false)
// rooms here mean room list returned from backend
// do not confuse with state.rooms
const [rooms, setRooms] = useState([])
const [showCreateRoomModal, setShowCreateRoomModal] = useState(false)
let headerTitle = intl.formatMessage({ id: "roomlist" })
// if (user) {
// headerTitle =
// user.name +
// intl.formatMessage({ id: "possessive" }) +
// intl.formatMessage({ id: "roomlist" })
// }
const loadRooms = () => {
setLoadingRooms(true)
// setRooms([])
const params = {}
if (user) {
params["userId"] = user.numId
}
getRooms(params)
.then(resp => {
resp.data.sort((a, b) => {
return b.userCount - a.userCount
})
setRooms(resp.data)
})
.catch(err => {})
.then(() => {
setLoadingRooms(false)
})
}
useEffect(() => {
// console.log(activeTab)
if (activeTab === "discover" || user) {
loadRooms()
}
}, [user, activeTab])
return (
{back && (
)}
{!back && loadingRooms && (
)}
{!back && !loadingRooms && (
)}
{headerTitle}
{showCreateRoomBtn && (
)}
{back && loadingRooms && (
{intl.formatMessage({ id: "empty" })}
)}
{rooms.map(r => {
let color = r.color
if (!color) {
color = getRandomRolor(r.id)
r.color = color
}
const style = {
backgroundColor: color
// "#" + Math.floor(Math.random() * 3777215).toString(16)
}
if (r.cover) {
style.backgroundImage = `url('${r.cover}')`
}
// const randomColor = Math.floor(Math.random()*16777215).toString(16);
// else {
// style.backgroundColor = "#acacac"
// }
return (
{/* {!loadingRooms &&
{
joinManMadeRoom(r)
// setDiscoveryRoom(r)
socketManager.joinRoom(r)
setRoomConnectionStatus(r.id, "JOINING")
}}
className="sp-discover-entry"
style={style}
>
)
})}
{r.name}
{r.media && (
{r.media && (
{/* {!loadingRooms &&
WIP...
} */}
{
joinManMadeRoom(room)
setShowRoomList(false)
if (manMadeRoom) {
socketManager.leaveRoom(manMadeRoom)
}
socketManager.joinRoom(room)
setRoomConnectionStatus(room.id, "JOINING")
}}
>
//
{/* */}
与
props.viewOtherUser(other)}
>
{other.name}
的对话
{body}
{
setUser(user)
}}
key={user.id}
className="sp-inbox-row"
>
)
})
if (conversationsArray.length === 0) {
rows = (
{user.name}
{c.lastMsg && (
{c.time.fromNow()}
)}
{c.lastMsg && (
{c.lastMsg.content}
)}
{selectedConversation && !showNotifications && (
{
setUser(null)
}}
offset={getOffset(conversations)}
conversation={selectedConversation}
mergeAndSaveNewConversations={mergeAndSaveNewConversations}
/>
)}
{!selectedConversation && (
{loading && (
)}
{!loading && (
)}
)
}
const stateToProps = state => {
return { tab: state.tab, user: state.inboxUser, account: state.account }
}
export default connect(stateToProps, { msgOtherUser })(Inbox)
================================================
FILE: chatbox/src/containers/Inbox/index.js
================================================
export { default } from "./Inbox"
================================================
FILE: chatbox/src/containers/Music/MusicTab.js
================================================
import React, { useState } from "react"
import { Button, Radio, Modal } from "antd"
import MusicPlayer from "components/MusicPlayer"
import Playlist from "./Playlist"
function MusicTab(props) {
const [loopMode, setLoopMode] = useState("loopAll")
const [showHelp, setShowHelp] = useState(false)
return (
{!showNotifications && rows}
{showNotifications && (
{intl.formatMessage({ id: "empty" })}
)}
{
// window.player.playlist.currentItem(i)
// setIndex(i)
window.playMessage(msg)
}}
className={className}
key={msg.time.valueOf()}
>
)
})
}
export default Playlist
================================================
FILE: chatbox/src/containers/Music/Playlist/index.js
================================================
export { default } from "./Playlist"
================================================
FILE: chatbox/src/containers/Music/index.js
================================================
export { default } from "./MusicTab"
================================================
FILE: chatbox/src/containers/OtherProfile/AvatarWithHoverCard.js
================================================
import React, { useState } from "react"
import { Avatar } from "antd"
import { connect } from "react-redux"
import ProfileCard from "./ProfileCard"
import ProfileMeta from "./ProfileMeta"
import { viewOtherUser } from "redux/actions"
import Popper from "@material-ui/core/Popper"
function AvatarWithHoverCard(props) {
const user = props.user
const [anchorEl, setAnchor] = useState(null)
const showingCard = Boolean(anchorEl)
let hideCardTimer = 0
function hideCard() {
clearTimeout(hideCardTimer)
hideCardTimer = setTimeout(() => {
setAnchor(null)
}, 100)
}
function showCard(el) {
clearTimeout(hideCardTimer)
if (el) {
setAnchor(el)
}
}
return (
{showRooms && (
// special tab inside special tab
// it ensure the rooms tab is in the fornt
{
setShowRooms(false)
}}
/>
)}
{/* {!showRooms && ( */}
{
setShowRooms(true)
}}
/>
{/* )} */}
)
}
// export default connect(null, { viewOtherUser })(OtherProfile)
export default OtherProfile
================================================
FILE: chatbox/src/containers/OtherProfile/ProfileBody/ProfileBody.js
================================================
import React, { useState } from "react"
import { Button, Avatar, Icon, Row, Col, message } from "antd"
import { useIntl } from "react-intl"
import { connect } from "react-redux"
import { msgOtherUser } from "redux/actions"
import socketManager from "socket"
import storageManager from "utils/storage"
// import { blockUser, unblockUser, thankUser } from "services/user"
import { blockUser, unblockUser } from "services/user"
const avatarStyle = {
// margin: "auto",
// marginTop: 20,
display: "block",
width: "100%",
height: "auto",
borderRadius: 0
}
const aboutStyle = {
display: "inline-block",
minWidth: 200,
maxWidth: 350,
marginLeft: 30,
marginRight: 30,
borderBottom: "1px solid lightgray",
textAlign: "left",
overflow: "auto",
maxHeight: 72,
padding: 5,
paddingLeft: 10,
paddingRight: 10,
wordBreak: "break-word"
}
function ProfileBody(props) {
const {
account,
msgOtherUser,
loading,
loaded,
user,
following,
followerCount,
followUser,
blacklist
} = props
const intl = useIntl()
// const [thanking, setThanking] = useState(false)
const [toggleBlocking, setToggleBlocking] = useState(false)
const blacklisted =
blacklist.filter(u => {
return u.id === user.id
}).length > 0
// const self = account && account.id.toString() === user.id.toString()
return (
{user.numId}
{user.credit}
{user.followerCount}
{user.rooms.length}
{user.about}
{" "}
{/* {!self && (
)} */}
{account && account.isMod && (
)}
{!user.isBanned && (
)}
{user.isBanned && (
)}
)}
{user.about}
{intl.formatMessage({ id: "follower" })}: {props.followerCount}
)
}
const stateToProps = state => {
return {
blacklist: state.blacklist
}
}
export default connect(stateToProps, { msgOtherUser })(ProfileCard)
================================================
FILE: chatbox/src/containers/OtherProfile/ProfileMeta/ProfileMeta.js
================================================
import React, { useState, useEffect } from "react"
import { connect } from "react-redux"
import { getUser } from "services/user"
import followEventHandler from "containers/Account/Follow/event"
import { followUser } from "services/follow"
import { setAccount } from "redux/actions"
function ProfileMeta(props) {
// Use this container to fetch other user's data
// it's a wrapper that handles state and api calls
// but doesn't contain html layout
const { account, setAccount } = props
let [user, setUser] = useState(props.user)
if (props.setUser) {
user = props.user
setUser = props.setUser
}
const [followerCount, setFollowerCount] = useState("")
const [following, setFollowing] = useState(false)
const [loading, setLoading] = useState(false)
const [loaded, setLoaded] = useState(false)
// If receive a wait, won't start fetching right away
// e.g. hover card
const wait = Boolean(props.wait)
function updateAccountFollowing(follow) {
// context.account needs to know about
// following number has changed
const newAccountData = { ...account }
if (follow) {
newAccountData.followingCount++
} else {
newAccountData.followingCount--
}
setAccount(newAccountData)
}
function toggleFollow(follow) {
setFollowing(follow)
if (follow) {
setFollowerCount(followerCount + 1)
} else {
setFollowerCount(followerCount - 1)
}
followUser(user.id)
.then(resp => {
updateAccountFollowing(follow)
followEventHandler.follow(follow, user)
})
.catch(err => {
console.error(err)
})
.then(() => {})
}
function refreshUserInfo() {
setLoading(true)
getUser(user.id)
.then(resp => {
// window.spDebug(resp.data)
const userData = resp.data
setLoaded(true)
setUser(userData)
setFollowing(userData.following)
setFollowerCount(userData.followerCount)
})
.catch(err => {
console.error(err)
})
.then(() => {
// console.log("done loading")
setLoading(false)
})
}
useEffect(() => {
if (wait || loaded) return
refreshUserInfo()
}, [wait, loaded])
const childrenWithProps = React.Children.map(props.children, child =>
React.cloneElement(child, {
...child.props,
account: account,
loading: loading,
loaded: loaded,
user: user,
followerCount: followerCount,
following: following,
followUser: toggleFollow,
refreshUserInfo: refreshUserInfo
})
)
return {childrenWithProps}
}
const stateToProps = state => {
return {
account: state.account
}
}
export default connect(stateToProps, { setAccount })(ProfileMeta)
================================================
FILE: chatbox/src/containers/OtherProfile/ProfileMeta/index.js
================================================
export { default } from "./ProfileMeta"
================================================
FILE: chatbox/src/containers/OtherProfile/index.js
================================================
export { default } from "./OtherProfile"
================================================
FILE: chatbox/src/containers/Tab/Tab.css
================================================
body {
/* background: #eceff1; */
/* background-color: rgb(246, 249, 252); */
}
body ::-webkit-scrollbar {
width: 7px;
}
/* Track */
body ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px lightgray;
}
/* Handle */
body ::-webkit-scrollbar-thumb {
/* background: #1890ff; */
background: rgba(0, 0, 0, 0.173);
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
}
body ::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.05);
}
.ant-tabs-bar {
color: white;
/* background: rgba(0, 0, 0, 0.75); */
background: #1890ff;
margin: 0px;
}
.ant-tabs-nav .ant-tabs-tab:hover {
background: #40a9ff !important;
color: white !important;
}
.ant-tabs-nav-container {
font-size: 18px;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
line-height: 37px;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
height: 35px;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
border-color: transparent;
border-radius: 0;
background: transparent;
height: 35px;
}
.ant-tabs-bar {
border-bottom: none;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
/* border-color: #fff; */
background: #fff;
}
.ant-tabs-nav .ant-tabs-tab .anticon {
margin: 0;
vertical-align: 0;
}
.ant-tabs-tab-arrow-show {
color: white;
margin-top: -2px;
}
.ant-avatar > img {
object-fit: cover;
}
.ant-avatar {
/* avatar is always clickable? NO!*/
/* cursor: pointer; */
}
.ant-avatar.ant-avatar-icon {
/* background: #87d068; */
}
.ant-input {
border-radius: 0;
resize: none;
color: #525252;
}
textarea.ant-input {
line-height: 1.5;
}
.ant-divider-horizontal.ant-divider-with-text::before,
.ant-divider-horizontal.ant-divider-with-text::after {
border-top: 1px solid lightgray;
}
.sp-modal *:not(.ant-btn) {
/* animation-duration: 0s !important; */
}
.sp-modal .ant-modal-content {
/* used by help modal in player tab */
position: fixed;
height: 75%;
/* max-height: 450px; */
/* width: 80%; */
top: 10% !important;
left: 10%;
right: 10%;
}
.sp-modal .ant-modal-title {
margin-right: 20px;
}
.sp-special-tab {
/* covers entire tab except top bar */
background: white;
background-size: cover;
z-index: 10;
position: fixed;
top: 35px;
width: 100%;
height: calc(100% - 35px);
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.sp-tab-body {
/* covers entire tab except top bar and header*/
background: white;
z-index: 9; /* other profile has z index 10 */
position: fixed;
/* top: 80px; */
width: 100%;
height: calc(100% - 75px);
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.sp-back-btn {
position: absolute;
left: 10px;
margin-top: 7px;
/* margin-left: 10px; */
background: none;
border: none;
/* font-size: large; */
box-shadow: none;
color: gray;
}
.sp-back-btn:hover {
background: none;
}
.sp-tab-header {
border-bottom: 1px solid lightgray;
/* padding: 5px; */
line-height: 40px;
height: 40px;
text-align: center;
white-space: nowrap;
}
.sp-tab-header .ant-btn:not(.ant-btn-primary) {
background: none;
border: none;
box-shadow: none;
}
.s .sp-pointer-cursor {
cursor: pointer;
}
.sp-new-message-dot.ant-badge {
font-size: unset;
}
.ant-modal {
top: 10%;
}
.resizable-close {
position: absolute;
right: 0px;
/* padding: 5px; */
/* bottom: 0px; */
/* border-radius: 100%; */
font-size: large;
}
.resizable-close .ant-btn {
border: none;
box-shadow: none;
background: #00000075;
color: #ffffff;
/* background: none; */
border-radius: 0;
}
.ant-btn-danger {
background-color: white;
}
.sp-modal .ant-modal-body {
max-height: calc(100% - 55px);
overflow-y: auto;
}
.sp-modal textarea.ant-input {
min-height: 75px;
}
.sp-modal ul {
padding-inline-start: 20px;
}
================================================
FILE: chatbox/src/containers/Tab/Tab.js
================================================
import "antd/dist/antd.css"
import "./Tab.css"
import { useIntl } from "react-intl"
import React, { useState, useEffect } from "react"
import { Tabs, Icon, Tooltip, Badge } from "antd"
import { connect } from "react-redux"
import Chat from "containers/Chat"
import Comment from "containers/Comment"
import Account from "containers/Account"
import OtherProfile from "containers/OtherProfile"
import Inbox from "containers/Inbox"
import Discover from "containers/Home/Discover"
import storageManager from "utils/storage"
import { changeTab, viewOtherUser } from "redux/actions"
const TabPane = Tabs.TabPane
function Tab({ account, otherUser, activeTab, changeTab, viewOtherUser }) {
const intl = useIntl()
// console.log("render tab")
const tabList = window.spConfig.tabList
// const defaultTab = window.spConfig.defaultTab || props.tab
// const [activeTab, changeTab] = useState(defaultTab)
// view other's profile
const [unread, setUnread] = useState(false)
// view direct message with other
// const [conversationUser, setCoversationUser] = useState()
useEffect(() => {
storageManager.addEventListener("unread", unread => {
setUnread(unread)
})
storageManager.get("unread", unread => {
if (unread) {
setUnread(true)
}
})
}, [])
return (
Online users
{this.state.danmuList.map((danmu, index) => (
{
danmu.ref = _ref
}}
deleteSelf={this.removeDanmu}
/>
))}
)
}
}
export default AnimationDanmu
================================================
FILE: inject-script/src/containers/ChatDanmu/Danmu.js
================================================
import React, { Component } from "react"
class Danmu extends Component {
state = {}
constructor(props) {
super(props)
this.danmuRef = React.createRef()
}
componentDidMount() {
let startX = window.innerWidth
let duration = (startX + 1000) / 100
//.animate isn't supported by safari
// TODO: maybe use animation.js lib?
if (!this.danmuRef.current.animate) {
this.props.deleteSelf(this.props.danmu.id)
return
}
let danmuAnimation = this.danmuRef.current.animate(
[
// keyframes, at least two
{ transform: "translateX(" + startX + "px)" },
{ transform: "translateX(-1000px)" }
],
{
// timing options
duration: duration * 1000
// easing: 'ease-in-out'
}
)
danmuAnimation.onfinish = () => {
this.props.deleteSelf(this.props.danmu.id)
}
this.danmuRef.current.onmouseover = () => {
danmuAnimation.pause()
}
this.danmuRef.current.onmouseout = () => {
danmuAnimation.play()
}
this.danmuRef.current.onmousedown = () => {
window.toggleChatbox()
}
}
render() {
const user = this.props.danmu.user
let avatar = ""
if (user.avatarSrc) {
avatar = (
{avatar}
{content}
)
}
}
export default Danmu
================================================
FILE: inject-script/src/containers/ChatIcon/ChatIcon.js
================================================
import React, { useState, useEffect } from "react"
import Draggable from "react-draggable"
import storage from "storage.js"
import samePageIcon from "icon.png"
import MailIcon from "@material-ui/icons/Mail"
import spConfig from "config"
const SHOW_CHAT_ICON_BY_DEFAULT = true
let dragging = false
function ChatIcon({ userCount }) {
const [showIcon, setShowIcon] = useState(false)
// const [userCount, setUserCount] = useState()
const [unreadMail, setUnreadMail] = useState(false)
// const userCountStr = () => {
// return userCount.join(" | ")
// }
let className = "sp-chat-icon-wrapper"
if (spConfig.icon && spConfig.icon.verticalCenter) {
className += " " + "vertical-center"
}
useEffect(() => {
storage.get("showChatIcon", showChatIcon => {
if (showChatIcon == null) {
setShowIcon(SHOW_CHAT_ICON_BY_DEFAULT)
} else {
setShowIcon(showChatIcon)
}
})
storage.addEventListener("showChatIcon", showChatIcon => {
setShowIcon(showChatIcon)
})
// window.setUserCount = setUserCount
storage.get("unread", unread => {
// console.log("get unread")
// console.log(unread)
setUnreadMail(!!unread)
})
storage.addEventListener("unread", unread => {
// console.log(unread)
setUnreadMail(!!unread)
})
}, [])
if (showIcon) {
let iconContent = (
Welcome to use Same Page
URL:
(urlInput = e.target.value)}
/>
{iframeControl}
{chatboxIframe}
)
}
export default ChatboxIframe
if (window.chrome && window.chrome.extension) {
window.chrome.runtime.onMessage.addListener(
(request, sender, sendResponse) => {
if (!request.chatboxMsg) return
var msg = request.chatboxMsg
window.spDebug(msg)
if (msg === "open_chatbox") {
window.toggleChatbox()
}
if (msg === "is_chatbox_open") {
sendResponse({ is_chatbox_open: window.isChatboxOpen() })
}
}
)
}
================================================
FILE: inject-script/src/containers/ChatboxIframe/index.js
================================================
export { default } from "./ChatboxIframe"
================================================
FILE: inject-script/src/containers/ImageModal/ImageModal.css
================================================
div.sp-image-modal {
z-index: 2147483647;
/* iframe is 2147483646; */
}
.sp-image-modal img {
width: 100%;
}
================================================
FILE: inject-script/src/containers/ImageModal/ImageModal.js
================================================
import "./ImageModal.css"
import React, { useState, useEffect } from "react"
import Dialog from "@material-ui/core/Dialog"
function SimpleDialog(props) {
return (
)
}
export default function SimpleDialogDemo() {
const [open, setOpen] = useState(false)
const [imgSrc, setImgSrc] = useState()
const handleIframeMessage = e => {
if (!e || !e.data) return
if (e.data.imgSrc) {
setImgSrc(e.data.imgSrc)
setOpen(true)
}
}
const handleClose = value => {
setOpen(false)
}
useEffect(() => {
window.addEventListener("message", handleIframeMessage, false)
return () => {
window.removeEventListener("message", handleIframeMessage, false)
}
}, [handleIframeMessage])
return (
- ],
// }
const [showAvatars, setShowAvatars] = useState(spConfig.showAvatars)
const [roomType, setRoomType] = useState(spConfig.defaultChatView)
const getRoom = roomType => {
return rooms[roomType]
}
const getRoomFromId = id => {
// TODO
}
const removeUserMessage = (user, type) => {
const usersInRoom = getRoom(type)
const users = usersInRoom.map(u => {
if (u.id.toString() === user.id.toString()) {
delete u.delMessageTimeout
delete u.message
return {
...u
}
}
return u
})
setRooms({ ...rooms, [type]: users })
}
const room = getRoom(roomType)
// console.log("room")
// console.log(room)
useEffect(() => {
// not best practice, but much simpler than adding callbacks
// to socket, also socket gets re instantiate when reconnect
// Room component is never unmounted, no need to clean up
window.setUserMessage = (user, type, content) => {
const room = getRoom(type)
const users = room.map(u => {
if (u.id.toString() === user.id.toString()) {
// foundUser = true
if (u.delMessageTimeout) {
clearTimeout(u.delMessageTimeout)
}
return {
...u,
message: content.value || content.title || content.url,
delMessageTimeout: setTimeout(() => {
removeUserMessage(user, type)
}, MSG_TIMEOUT)
}
}
return u
})
setRooms({ ...rooms, [type]: users })
}
window.leftRoom = roomId => {
if (!roomId) {
setRooms({})
} else {
// TODO
// backend should return room type etc..
// setRooms({ ...rooms, [type]: [] })
}
}
window.setUsersInRoom = data => {
const res = {}
Object.keys(data).forEach(roomId => {
const room = data[roomId]
if (room.users) {
res[room.type] = room.users
}
})
setRooms({ ...rooms, ...res })
}
window.addUserToRoom = (type, user) => {
const room = getRoom(type)
if (room) {
const existingUser = room.filter(u => {
return u.id === user.id
})
if (existingUser.length) {
return
}
setRooms({ ...rooms, [type]: [...room, user] })
} else {
console.error(
`Failed to add user to room, room type ${type} not exist`
)
}
}
window.removeUserFromRoom = (type, user) => {
const room = getRoom(type)
if (room) {
// const newRoom =
// room.push(user)
const users = room.filter(u => {
return u.id !== user.id
})
setRooms({ ...rooms, [type]: [...users] })
} else {
console.error(
`Faileed to remove user from room, room type ${type} not exist`
)
}
}
}, [rooms])
useEffect(() => {
storageManager.get("showAvatars", showAvatars => {
if (showAvatars !== null) {
setShowAvatars(showAvatars)
}
})
storageManager.addEventListener("showAvatars", showAvatars => {
setShowAvatars(showAvatars)
})
window.addEventListener(
"message",
e => {
if (!e || !e.data) return
if (e.data.type === "sp-change-chat-view") {
const chatView = e.data.data
setRoomType(chatView)
}
},
false
)
}, [])
return (
{user.message}
)}
{
setAnchorEl(e.currentTarget)
}}
onMouseLeave={e => {
setTimeout(() => {
setAnchorEl(null)
}, 100)
}}
>
{!blacklisted && (
)}
{blacklisted && (
)}
{blacklisted && (
{
toggleBlock(user, blacklist, false)
}}
/>
)}
{!blacklisted && (
{
toggleBlock(user, blacklist, true)
}}
/>
)}