如需支持功能定制，或技术支持，加群联系我即可
qq群交流群 :
diff --git a/res/home_en.html b/res/home_en.html
index f31ae94..7eccc0a 100644
--- a/res/home_en.html
+++ b/res/home_en.html
@@ -17,7 +17,7 @@
font-family: Rubik,Fallback;
width: 100%;
height: 100%;
- background: linear-gradient(90deg, rgb(128 117 103), rgb(252, 182, 159));
+ background-image: linear-gradient(to right, #C5EDFF, #E6F7FF, #E6F7FF, #E6F7FF, #E6F7FF, #C5EDFF, #C5EDFF);
}
.layui-nav{
text-align: right;
@@ -31,7 +31,7 @@
top: 15px;
font-size: 20px;
font-weight:bolder;
- -webkit-text-stroke:1px #ffffff;
+ -webkit-text-stroke:1px black;
-webkit-text-fill-color:transparent;
position: absolute;
z-index: 10000;
@@ -48,13 +48,13 @@
text-align: center;
}
.tl-rtc-file-intro-main{
- color: #fcfcfc;
+ color: black;
font-size: 36px;
font-weight: 300;
}
.tl-rtc-file-intro-tag{
margin-top: 30px;
- color: #fcfcfc;
+ color: black;
font-size: 25px;
font-weight: 300;
width: 70%;
@@ -82,7 +82,7 @@
.tl-rtc-file-goto-btn{
width: 20%;
padding: 0 25px;
- background-color: #b6c95e;
+ background-color: #5963af;
border: 0;
font-weight: bold;
outline: none;
@@ -134,15 +134,15 @@
tl-rtc-file
@@ -199,7 +199,7 @@
, btnAlign: 'c'
, moveType: 1
, content: `
-
+
If you need support or feature customization or help, just add a qq group to contact me
qq number :
diff --git a/res/index.html b/res/index.html
index 44daf06..9309c37 100644
--- a/res/index.html
+++ b/res/index.html
@@ -9,8 +9,8 @@
-
+
@@ -23,10 +23,6 @@
window.Bus = new Vue({});
window.prefix = "";
-
-
@@ -35,17 +31,19 @@
-
-
+
+
+
+
@@ -53,139 +51,66 @@
style="width: 20px;height: 20px;margin-right: 10px;">
-
-
-
- {{Math.min(aiChatList.length-1,
- 99)}}
- {{Math.min(aiChatList.length,
- 99)}}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{screenTimes}}
-
-
-
-
- {{videoShareTimes}}
-
-
-
-
- {{screenShareTimes}}
-
-
-
- {{Math.min(chatingList.length,
- 99)}}
-
-
-
-
-
-
-
+
+
- 注 : 仅用于学习用途, 请勿他用
- qq交流群 : 624214498
-
-
- 当前在线人数 : {{allManCount}}
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
- (当前禁选)，请确保双方先加入房间，才可选择文件发送，支持多文件拖拽发送
-
-
-
正在发送中...
-当前已发送 {{getFileSizeStr(currentSendAllSize)}} -
-
-
-
-
-
-
-
- {{file.name}}
+
+
+
+
-
-
-
-
点击选取文件，或将文件拖拽到此处，支持多文件拖拽发送
-
-
-
-
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
-
-
-
-
- 发送的文件/文本
-
+
+
+
+
+
+
+
+
+
+
-
+ {{nickName}} - 自己
+ {{socketId}}
+
-
-
-
+
+ | 名称 | -格式 | -大小 | -进度 | -耗时 | -暂存状态 | -暂存进度{{uploadCodeFileProcess}}% | -
|---|---|---|---|---|---|---|
{{file.name}} |
- {{file.type}} | -{{getFileSizeStr(file.size)}} | -{{file.process}}% | -{{file.cost}}秒 | -暂存 - | -
+
+
+
+
+
+
+
-
-
-
接收的文件
-
-
-
-
-
-
+
+ | 用户 | -名称 | -格式 | -大小 | -进度 | -耗时 | -|
|---|---|---|---|---|---|---|
| {{file.id}} | - {{file.name}} |
- {{file.name}} |
- {{file.type}} | -{{getFileSizeStr(file.size)}} | -{{file.process}}% | -{{file.cost}}秒 | -
+
+
+
-
-
-
-
-
-
-
-
- 接收的文本内容
-
-
-
-
-
-
-
- | 发送方ID | -接收内容 | -接收时间 | -
|---|---|---|
| {{txt.id}} | -
-
-
- {{txt.content}}
-
- |
- {{txt.time}} | -
-
-
-
-
-
-
-
- 取件码接收的文件
-
-
-
-
-
-
-
- | 取件码 | -文件名称 | -文件大小 | -
|---|---|---|
| {{code.codeId}} | -{{code.name}} |
- {{code.size}} | -
+
+
@@ -485,14 +686,14 @@
-
-
+
+
-
-
-
+
+
+
-
- {{log.time}}
- {{log.type}}
- {{log.type}}
+
+ {{log.type}}
+ {{log.type}}
{{log.msg}}
-
- {{log.type}}
- {{log.type}}
+
@@ -523,161 +725,46 @@
+ {{log.type}}
+ {{log.type}}
{{log.msg}}
-
-
-
-
-
-
-
-
-
-
-
-
-
- 自己
-
-
{{nickName}}
+
+
+ 
`
}
layer.closeAll(function () {
- let index = layer.open(options)
- if (that.isMobile) {
- layer.full(index)
- }
+ layer.open(options)
})
}
- this.addUserLogs("打开公共聊天面板")
- },
- chatingTpl: function () {
- let tpl_html = document.getElementById("chating_tpl");
- let tpl_view_html = document.getElementById("chating_tpl_view");
-
- if (tpl_html && tpl_view_html) {
-
- this.tpl(tpl_html, this.chatingList, tpl_view_html)
-
- let chatDom = document.querySelector("#chating_tpl_view")
- let chatDomHeight = chatDom.clientHeight
-
- let height = 0;
- if (this.isMobile) {
- height = document.documentElement.clientHeight - 235;
- } else {
- height = 350
- }
- if (chatDomHeight > height) {
- chatDom.style.height = height + "px"
- chatDom.style.overflowY = "scroll"
- } else {
- chatDom.style.overflowY = "none"
- }
-
- if(window.tlrtcfile.scrollToBottom){
- window.tlrtcfile.scrollToBottom(chatDom, 1000, 100)
- }
- }
- },
- tpl: function (tpl_html, data, tpl_view_html, callback) {
- if (window.laytpl) {
- laytpl(tpl_html.innerHTML).render(data, (html) => {
- tpl_view_html.innerHTML = html;
- if (callback) {
- callback()
- }
- });
- }
- },
- sendChating: function () {
- let content = document.querySelector("#chating_value").value;
- if (!this.createDisabled) {
- if (window.layer) {
- layer.msg("请先加入房间，才能发言哦")
- }
- this.addUserLogs("请先加入房间，才能发言哦")
- return
- }
- if (content === '' || content === undefined) {
- if (window.layer) {
- layer.msg("请先填写内容哦")
- }
- this.addUserLogs("请先填写内容哦")
- return
- }
- if (content.length > 1000) {
- if (window.layer) {
- layer.msg("内容太长啦，不能超过1000个字")
- }
- this.addUserLogs("内容太长啦，不能超过1000个字")
- return
- }
- this.socket.emit('chating', {
- msg: encodeURIComponent(content),
- room: this.roomId,
- socketId: this.socketId,
- });
-
- this.addUserLogs("公共频道发言成功");
-
- document.querySelector("#chating_value").value = ''
- },
- sendBugs: function () {
- if (window.layer) {
- let that = this;
- $("#sendBugs").removeClass("layui-anim-rotate")
- setTimeout(() => {
- $("#sendBugs").addClass("layui-anim-rotate")
- }, 50)
- setTimeout(() => {
- layer.prompt({
- formType: 2,
- title: '请描述您需要反馈的问题',
- }, function (value, index, elem) {
- that.socket.emit('message', {
- emitType: "sendBugs",
- msg: value,
- room: that.roomId,
- });
- layer.msg("问题反馈成功，更多问题可以加群交流，将更快解决")
- layer.close(index);
- that.addUserLogs("问题反馈成功，更多问题可以加群交流，将更快解决 ,问题:" + value);
- });
- }, 500);
- }
- },
- refleshRoom: function () {
- if (!this.createDisabled) {
- this.roomId = parseInt(Math.random() * 100000);
- this.addPopup("你刷新了房间号, 当前房间号为 " + this.roomId);
- this.addUserLogs("你刷新了房间号, 当前房间号为 " + this.roomId);
- $("#refresh").removeClass("layui-anim-rotate")
- setTimeout(() => {
- $("#refresh").addClass("layui-anim-rotate")
- }, 50)
- }
- },
- addPopup: function (msg) {
- window.Bus.$emit("addPopup", msg);
- },
- cleanPopup: function () {
- window.Bus.$emit("popupMap");
- },
- addSysLogs: function (msg) {
- this.addLogs(msg, "【系统日志】: ")
- },
- addUserLogs: function (msg) {
- this.addLogs(msg, "【操作日志】: ")
- },
- addLogs: function (msg, type) {
- if (this.logs.length > 1000) {
- this.logs.shift();
- }
- this.logs.unshift({
- type: type,
- msg: msg,
- time: new Date().toLocaleString()
- })
- },
- cleanLogs: function () {
- this.logs = []
- this.addSysLogs("清空日志")
- },
- sendTxt: function (isRealContentMode) {
- if (!this.createDisabled) {
- if (window.layer) {
- layer.msg("请先加入房间，再发送内容")
- }
- this.addUserLogs("请先加入房间，再发送内容");
- return
- }
- if (this.noOthersInRoom) {
- if (window.layer) {
- layer.msg("房间内至少需要两个人才能发送内容")
- }
- this.addUserLogs("房间内至少需要两个人才能发送内容");
- return
- }
- if (isRealContentMode) {
- let realContent = layedit.getContent(this.txtEditId)
- if (realContent.length <= 0) {
- if (window.layer) {
- layer.msg("请输入发送的富文本内容")
- }
- this.addUserLogs("请输入发送的富文本内容");
- return
- }
- if (realContent.length > 1000) {
- if (window.layer) {
- layer.msg("富文本文字内容过长，长度最多1w单词!")
- }
- this.addUserLogs("富文本文字内容过长，长度最多1w单词");
- return
- }
- this.socket.emit('message', {
- emitType: "sendTxt",
- real: isRealContentMode,
- content: encodeURIComponent(realContent),
- room: this.roomId,
- from: this.socketId,
- recoderId: this.recoderId
- });
- if (window.layer) {
- if (window.layui && window.layedit) {
- this.txtEditId = window.layedit.build('txt', {
- tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'face'],
- height: 180
- });
- }
- this.sendFileList.push({
- id: "txt",
- name: realContent,
- size: realContent.length,
- type: "富文本内容",
- process: 100,
- done: true,
- toIdStr: "",
- start: 0,
- cost: 0
- });
- layer.msg("富文本内容发送完毕")
- this.addUserLogs("富文本内容发送完毕");
- }
- } else {
- let content = layedit.getText(this.txtEditId)
- if (content.length <= 0) {
- if (window.layer) {
- layer.msg("请输入发送的文本内容")
- }
- this.addUserLogs("请输入发送的文本内容");
- return
- }
- if (content.length > 1000) {
- if (window.layer) {
- layer.msg("文字内容过长，最多1000单词!")
- }
- this.addUserLogs("文字内容过长，最多1000单词");
- return
- }
- this.socket.emit('message', {
- emitType: "sendTxt",
- real: isRealContentMode,
- content: encodeURIComponent(content),
- room: this.roomId,
- from: this.socketId,
- recoderId: this.recoderId
- });
- if (window.layer) {
- if (window.layui && window.layedit) {
- this.txtEditId = window.layedit.build('txt', {
- tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'face'],
- height: 180
- });
- }
- this.sendFileList.push({
- id: "txt",
- name: content,
- size: content.length,
- type: "文本内容",
- process: 100,
- done: true,
- toIdStr: "",
- start: 0,
- cost: 0
- });
- layer.msg("内容发送完毕")
- this.addUserLogs("内容发送完毕");
- }
- }
- },
- clickHome: function (show = true) {
- this.currentMenu = 1;
-
- let active = document.querySelector("#btnHome")
-
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
-
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickSendFile();
- }
- },
- clickReceive: function (show = true) {
- this.currentMenu = 2;
-
- let active = document.querySelector("#btnReceive")
-
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickReceiveFile()
- }
- },
- clickTxt: function (show = true) {
- this.currentMenu = 3;
-
- let active = document.querySelector("#btnTxt")
-
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickReceiveTxt()
- }
- },
- clickCodeFile: function (show = true) {
- this.currentMenu = 4;
-
- let active = document.querySelector("#btnCodeFile");
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickReceiveCodeFile()
- }
- },
- //点击切换发送文件或者发送文本
- changeFileOrTxt: function () {
- let that = this;
- this.isTxtMode = !this.isTxtMode;
- if (window.layui && window.layedit) {
- this.txtEditId = window.layedit.build('txt', {
- tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'face'],
- height: 180
- });
- }
- $("#changeMode").removeClass("layui-anim-rotate")
- setTimeout(() => {
- $("#changeMode").addClass("layui-anim-rotate")
- if (window.layer) {
- layer.msg(`切换为${this.isTxtMode ? '文本模式' : '文件模式'}`)
- }
- this.addUserLogs(`切换为${this.isTxtMode ? '文本模式' : '文件模式'}`);
- }, 50)
+ this.addUserLogs("打开赞助窗口")
},
//点击下载文件面板
clickReceiveFile: function () {
+ if(this.receiveFileList.length === 0){
+ if(window.layer){
+ layer.msg("暂时没有收到文件")
+ }
+ return
+ }
this.showReceiveFile = !this.showReceiveFile;
if (this.showReceiveFile) {
this.addUserLogs("展开接收文件面板");
- this.numReceiveFile = 50;
+ this.receiveFileMaskHeightNum = 20;
} else {
- this.numReceiveFile = 150;
+ this.receiveFileMaskHeightNum = 150;
this.addUserLogs("收起接收文件面板");
}
},
- //点击接收文字面板
- clickReceiveTxt: function () {
- this.showReceiveTxt = !this.showReceiveTxt;
- if (this.showReceiveTxt) {
- this.addUserLogs("展开接收文字面板");
- this.numReceiveTxt = 50;
- } else {
- this.numReceiveTxt = 150;
- this.addUserLogs("收起接收文字面板");
- }
- },
//点击发送文件面板
clickSendFile: function () {
+ if(!this.hasManInRoom && !this.showSendFile){
+ if(window.layer){
+ layer.msg("房间内至少需要两个人才能发送内容")
+ }
+ return
+ }
this.showSendFile = !this.showSendFile;
if (this.showSendFile) {
- this.numSendFile = 50;
+ this.sendFileMaskHeightNum = 20;
this.addUserLogs("展开发送文件/文本面板");
} else {
- this.numSendFile = 150;
+ this.sendFileMaskHeightNum = 150;
this.addUserLogs("收起发送文件/文本面板");
}
},
- //点击取件码面板
- clickReceiveCodeFile: function () {
- this.showCodeFile = !this.showCodeFile;
- if (this.showCodeFile) {
- this.numCodeFile = 50;
- this.addUserLogs("展开取件码面板");
- } else {
- this.numCodeFile = 150;
- this.addUserLogs("收起取件码面板");
- }
- },
//点击查看日志面板
clickLogs: function () {
this.showLogs = !this.showLogs;
if (this.showLogs) {
- this.numLogs = 50;
+ this.logMaskHeightNum = 50;
+ this.addUserLogs("展开日志面板");
} else {
- this.numLogs = 150;
+ this.logMaskHeightNum = 150;
+ this.addUserLogs("收起日志面板");
}
},
+ //点击打开音视频面板
+ clickMediaVideo: function () {
+ this.showMedia = !this.showMedia;
+ if (this.showMedia) {
+ this.addUserLogs("展开音视频/屏幕共享面板");
+ this.mediaVideoMaskHeightNum = 50;
+ } else {
+ this.mediaVideoMaskHeightNum = 150;
+ this.addUserLogs("收起音视频/屏幕共享面板");
+ }
+ },
+ //点击打开屏幕共享面板
+ clickMediaScreen: function () {
+ this.showMedia = !this.showMedia;
+ if (this.showMedia) {
+ this.addUserLogs("展开音视频/屏幕共享面板");
+ this.mediaScreenMaskHeightNum = 50;
+ } else {
+ this.mediaScreenMaskHeightNum = 150;
+ this.addUserLogs("收起音视频/屏幕共享面板");
+ }
+ },
+ typeInArr: function(arr, type){
+ return arr.filter(item=>{
+ return type.includes(item);
+ }).length > 0;
+ },
//文件大小
getFileSizeStr: function (size) {
let sizeStr = (size / 1048576).toString();
@@ -1497,6 +1400,12 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
},
//创建文件发送房间
createFileRoom: function () {
+ this.openRoomInput = !this.openRoomInput;
+
+ if(this.openRoomInput){
+ return
+ }
+
this.roomId = this.roomId.toString().replace(/\s*/g, "")
if (this.roomId === null || this.roomId === undefined || this.roomId === '') {
if (window.layer) {
@@ -1689,20 +1598,24 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
//当前用户开启了屏幕共享时建立 stream share 链接
initMediaShareChannel: function (rtcConnect, type, track, stream) {
rtcConnect.ontrack = (event) => {
- setTimeout(() => {
- $("#mediaShareRoomList").append(`
-
- `);
- var video = document.querySelector("#otherMediaShareVideo");
- video.srcObject = event.streams[0]
- // ios 微信浏览器兼容问题
+ if(event.track.kind === 'audio'){
+ return;
+ }
+ $(`${type === 'screen' ? '#mediaScreenRoomList': '#mediaVideoRoomList'}`).append(`
+
+
+
+
-
-
-
-
-
-
+ 音视频通话
+
-
+
+
@@ -687,55 +774,6 @@
+
+
+
+
+
+
+ 屏幕共享
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }
+ if (this.isMobile) {
+ delete options.area
+ }
+ layer.closeAll(function () {
+ let index = layer.open(options)
+ if (that.isMobile) {
+ layer.full(index)
+ }
+ })
+ }
+ this.addUserLogs("打开公共聊天面板")
+ },
+ chatingCommTpl: function () {
+ let that = this;
+ let tpl_html = document.getElementById("chating_comm_tpl");
+ let tpl_view_html = document.getElementById("chating_comm_tpl_view");
+
+ if (tpl_html && tpl_view_html) {
+
+ this.tpl(tpl_html, this.chatingCommList, tpl_view_html)
+
+ let chatDom = document.querySelector("#chating_comm_tpl_view")
+ let chatDomHeight = chatDom.clientHeight
+
+ let height = 0;
+ if (this.isMobile) {
+ height = document.documentElement.clientHeight - 235;
+ } else {
+ height = 350
+ }
+
+ if (chatDomHeight > height) {
+ chatDom.style.height = height + "px"
+ chatDom.style.overflowY = "scroll"
+ } else {
+ chatDom.style.overflowY = "none"
+ }
+
+ if(window.tlrtcfile.scrollToBottom){
+ window.tlrtcfile.scrollToBottom(chatDom, 1000, 100)
+ }
+ }
+ },
+ tpl: function (tpl_html, data, tpl_view_html, callback) {
+ if (window.laytpl) {
+ laytpl(tpl_html.innerHTML).render(data, (html) => {
+ tpl_view_html.innerHTML = html;
+ if (callback) {
+ callback()
+ }
+ });
+ }
+ },
+ sendChatingComm: function () {
+ if (!this.isJoined) {
+ if (window.layer) {
+ layer.msg("请先加入房间，才能发言哦")
+ }
+ this.addUserLogs("请先加入房间，才能发言哦")
+ return
+ }
+ let content = document.querySelector("#chating_comm_value").value;
+ if (content === '' || content === undefined) {
+ if (window.layer) {
+ layer.msg("请先填写内容哦")
+ }
+ this.addUserLogs("请先填写内容哦")
+ return
+ }
+ if (content.length > 1000) {
+ if (window.layer) {
+ layer.msg("内容太长啦，不能超过1000个字")
+ }
+ this.addUserLogs("内容太长啦，不能超过1000个字")
+ return
+ }
+ this.socket.emit('chatingComm', {
+ msg: encodeURIComponent(content),
+ room: this.roomId,
+ socketId: this.socketId,
+ });
+
+ this.addUserLogs("公共频道发言成功");
+
+ document.querySelector("#chating_comm_value").value = ''
+ },
+ // 房间内群聊弹窗
+ openChatingRoom: function () {
+ let that = this;
+ if (window.layer) {
+ let options = {
+ type: 1,
+ fixed: false, //不固定
+ maxmin: false,
+ area: ['600px', '600px'],
+ title: `【${this.roomId}】` + "聊天频道",
+ success: function (layero, index) {
+ if (window.layer && window.layui && window.layedit) {
+ that.txtEditId = layedit.build('chating_room_value', {
+ tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'face'],
+ height: 120
+ });
+ }
+ that.chatingRoomTpl();
+ },
+ content: `
+
+
+
+
+
+
+
+
+ `
+ }
+ if (this.isMobile) {
+ delete options.area
+ }
+ layer.closeAll(function () {
+ let index = layer.open(options)
+ if (that.isMobile) {
+ layer.full(index)
+ }
+ })
+ }
+ this.addUserLogs("打开房间聊天面板")
+ },
+ // 房间内群聊渲染
+ chatingRoomTpl: function () {
+ let tpl_html = document.getElementById("chating_room_tpl");
+ let tpl_view_html = document.getElementById("chating_room_tpl_view");
+
+ if (tpl_html && tpl_view_html) {
+
+ this.tpl(tpl_html, this.receiveTxtList, tpl_view_html)
+
+ let chatDom = document.querySelector("#chating_room_tpl_view")
+ let chatDomHeight = chatDom.clientHeight
+
+ let height = 0;
+ if (this.isMobile) {
+ height = document.documentElement.clientHeight - 335;
+ } else {
+ height = 300
+ }
+
+ if (chatDomHeight > height) {
+ chatDom.style.height = height + "px"
+ chatDom.style.overflowY = "scroll"
+ } else {
+ chatDom.style.overflowY = "none"
+ }
+
+ if(window.tlrtcfile.scrollToBottom){
+ window.tlrtcfile.scrollToBottom(chatDom, 1000, 100)
+ }
+ }
+ },
+ // 房间内群聊发言
+ sendChatingRoom: function () {
+ if (!this.isJoined) {
+ if (window.layer) {
+ layer.msg("请先加入房间，再发送内容")
+ }
+ this.addUserLogs("请先加入房间，再发送内容");
+ return
+ }
+ if (!this.hasManInRoom) {
+ if (window.layer) {
+ layer.msg("房间内至少需要两个人才能发送内容")
+ }
+ this.addUserLogs("房间内至少需要两个人才能发送内容");
+ return
+ }
+ let realContent = layedit.getContent(this.txtEditId)
+ if (realContent.length <= 0) {
+ if (window.layer) {
+ layer.msg("请输入文本内容")
+ }
+ this.addUserLogs("请输入文本内容");
+ return
+ }
+ if (realContent.length > 10000) {
+ if (window.layer) {
+ layer.msg("文字内容过长，长度最多1w单词!")
+ }
+ this.addUserLogs("文字内容过长，长度最多1w单词");
+ return
+ }
+ this.socket.emit('message', {
+ emitType: "sendChatingRoom",
+ content: encodeURIComponent(realContent),
+ room: this.roomId,
+ from: this.socketId,
+ nickName : this.nickName,
+ recoderId: this.recoderId
+ });
+
+ let now = new Date().toLocaleString();
+ this.receiveTxtList.push({
+ socketId: this.socketId,
+ content: realContent,
+ nickName : this.nickName,
+ time: now,
+ timeAgo : window.util ? util.timeAgo(now) : now
+ });
+
+ this.chatingRoomTpl();
+
+ layer.msg("文本内容发送完毕")
+ this.addUserLogs("文本内容发送完毕");
+
+ layedit.setContent(this.txtEditId, "", false)
+ },
+ useTurnMsg: function () {
+ if (window.layer) {
+ layer.msg("当前已启用中继服务器，更多信息请到设置查看")
+ }
+ this.addUserLogs("当前已启用中继服务器，更多信息请到设置查看")
+ },
+ networkMsg: function () {
+ if (window.layer) {
+ layer.msg("当前网络状态为" + (this.network !== 'wifi' ? '移动流量' : this.network))
+ }
+ this.addUserLogs("当前网络状态为" + (this.network !== 'wifi' ? '移动流量' : this.network))
+ },
+ addPopup: function (msg) {
+ window.Bus.$emit("addPopup", msg);
+ },
+ cleanPopup: function () {
+ window.Bus.$emit("popupMap");
+ },
+ addSysLogs: function (msg) {
+ this.addLogs(msg, "【系统日志】: ")
+ },
+ addUserLogs: function (msg) {
+ this.addLogs(msg, "【操作日志】: ")
+ },
+ addLogs: function (msg, type) {
+ if (this.logs.length > 1000) {
+ this.logs.shift();
+ }
+ this.logs.unshift({
+ type: type,
+ msg: msg,
+ time: new Date().toLocaleString()
+ })
+ },
+ cleanLogs: function () {
+ this.logs = []
+ this.addSysLogs("清空日志")
+ },
+ sendBugs: function () {
+ if (window.layer) {
+ let that = this;
+ $("#sendBugs").removeClass("layui-anim-rotate")
+ setTimeout(() => {
+ $("#sendBugs").addClass("layui-anim-rotate")
+ }, 50)
+ setTimeout(() => {
+ layer.prompt({
+ formType: 2,
+ title: '请描述您需要反馈的问题',
+ }, function (value, index, elem) {
+ that.socket.emit('message', {
+ emitType: "sendBugs",
+ msg: value,
+ room: that.roomId,
+ });
+ layer.msg("问题反馈成功，更多问题可以加群交流，将更快解决")
+ layer.close(index);
+ that.addUserLogs("问题反馈成功，更多问题可以加群交流，将更快解决 ,问题:" + value);
+ });
+ }, 500);
+ }
+ },
+ refleshRoom: function () {
+ if (!this.isJoined) {
+ this.roomId = parseInt(Math.random() * 100000);
+ this.addPopup("你刷新了房间号, 当前房间号为 " + this.roomId);
+ this.addUserLogs("你刷新了房间号, 当前房间号为 " + this.roomId);
+ }
+ },
shareUrl: function () {
document.querySelector("#shareUrl").setAttribute("data-clipboard-text", window.location.href + "#r=" + this.roomId);
var clipboard = new ClipboardJS('#shareUrl');
@@ -989,6 +1280,7 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
layer.confirm("进入房间" + this.roomId, (index) => {
window.location.hash = "";
layer.close(index)
+ that.openRoomInput = true;
that.createFileRoom();
}, (index) => {
that.roomId = "";
@@ -1001,490 +1293,101 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
}
}
},
- chating: function () {
- if (!this.switchData.openCommRoom) {
- if (window.layer) {
- layer.msg("当前功能已暂时关闭，有问题可以加群交流")
- }
- this.addUserLogs("当前功能已暂时关闭，有问题可以加群交流")
- return
- }
- let that = this;
+ // 赞助
+ coffee: function () {
if (window.layer) {
let options = {
type: 1,
- fixed: false, //不固定
+ fixed: false,
maxmin: false,
- area: ['600px', '600px'],
- title: "公共聊天频道",
+ shadeClose: true,
+ area: ['300px', '350px'],
+ title: "赞助一下，为爱发电",
success: function (layero, index) {
- let active = null;
- if (that.currentMenu === 1) {
- active = document.querySelector("#btnHome");
- } else if (that.currentMenu === 2) {
- active = document.querySelector("#btnReceive");
- } else if (that.currentMenu === 3) {
- active = document.querySelector("#btnTxt");
- } else if (that.currentMenu === 4) {
- active = document.querySelector("#btnCodeFile");
- }
- document.querySelector(".layui-layer-title").style.borderTopRightRadius = "15px"
- document.querySelector(".layui-layer-title").style.borderTopLeftRadius = "15px"
- document.querySelector(".layui-layer-title").style.color = "white";
- document.querySelector(".layui-layer").style.borderRadius = "15px"
- document.querySelector(".chating-content").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector(".layui-textarea").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector(".layui-layer-title").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector(".layui-layer").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
-
- that.chatingTpl();
+ document.querySelector(".layui-layer-title").style.borderTopRightRadius = "8px";
+ document.querySelector(".layui-layer-title").style.borderTopLeftRadius = "8px";
+ document.querySelector(".layui-layer").style.borderRadius = "8px";
},
- content: `
-
-
-
-
-
-
-
-
- `
- }
- if (this.isMobile) {
- delete options.area
+ content: ` `
}
layer.closeAll(function () {
- let index = layer.open(options)
- if (that.isMobile) {
- layer.full(index)
- }
+ layer.open(options)
})
}
- this.addUserLogs("打开公共聊天面板")
- },
- chatingTpl: function () {
- let tpl_html = document.getElementById("chating_tpl");
- let tpl_view_html = document.getElementById("chating_tpl_view");
-
- if (tpl_html && tpl_view_html) {
-
- this.tpl(tpl_html, this.chatingList, tpl_view_html)
-
- let chatDom = document.querySelector("#chating_tpl_view")
- let chatDomHeight = chatDom.clientHeight
-
- let height = 0;
- if (this.isMobile) {
- height = document.documentElement.clientHeight - 235;
- } else {
- height = 350
- }
- if (chatDomHeight > height) {
- chatDom.style.height = height + "px"
- chatDom.style.overflowY = "scroll"
- } else {
- chatDom.style.overflowY = "none"
- }
-
- if(window.tlrtcfile.scrollToBottom){
- window.tlrtcfile.scrollToBottom(chatDom, 1000, 100)
- }
- }
- },
- tpl: function (tpl_html, data, tpl_view_html, callback) {
- if (window.laytpl) {
- laytpl(tpl_html.innerHTML).render(data, (html) => {
- tpl_view_html.innerHTML = html;
- if (callback) {
- callback()
- }
- });
- }
- },
- sendChating: function () {
- let content = document.querySelector("#chating_value").value;
- if (!this.createDisabled) {
- if (window.layer) {
- layer.msg("请先加入房间，才能发言哦")
- }
- this.addUserLogs("请先加入房间，才能发言哦")
- return
- }
- if (content === '' || content === undefined) {
- if (window.layer) {
- layer.msg("请先填写内容哦")
- }
- this.addUserLogs("请先填写内容哦")
- return
- }
- if (content.length > 1000) {
- if (window.layer) {
- layer.msg("内容太长啦，不能超过1000个字")
- }
- this.addUserLogs("内容太长啦，不能超过1000个字")
- return
- }
- this.socket.emit('chating', {
- msg: encodeURIComponent(content),
- room: this.roomId,
- socketId: this.socketId,
- });
-
- this.addUserLogs("公共频道发言成功");
-
- document.querySelector("#chating_value").value = ''
- },
- sendBugs: function () {
- if (window.layer) {
- let that = this;
- $("#sendBugs").removeClass("layui-anim-rotate")
- setTimeout(() => {
- $("#sendBugs").addClass("layui-anim-rotate")
- }, 50)
- setTimeout(() => {
- layer.prompt({
- formType: 2,
- title: '请描述您需要反馈的问题',
- }, function (value, index, elem) {
- that.socket.emit('message', {
- emitType: "sendBugs",
- msg: value,
- room: that.roomId,
- });
- layer.msg("问题反馈成功，更多问题可以加群交流，将更快解决")
- layer.close(index);
- that.addUserLogs("问题反馈成功，更多问题可以加群交流，将更快解决 ,问题:" + value);
- });
- }, 500);
- }
- },
- refleshRoom: function () {
- if (!this.createDisabled) {
- this.roomId = parseInt(Math.random() * 100000);
- this.addPopup("你刷新了房间号, 当前房间号为 " + this.roomId);
- this.addUserLogs("你刷新了房间号, 当前房间号为 " + this.roomId);
- $("#refresh").removeClass("layui-anim-rotate")
- setTimeout(() => {
- $("#refresh").addClass("layui-anim-rotate")
- }, 50)
- }
- },
- addPopup: function (msg) {
- window.Bus.$emit("addPopup", msg);
- },
- cleanPopup: function () {
- window.Bus.$emit("popupMap");
- },
- addSysLogs: function (msg) {
- this.addLogs(msg, "【系统日志】: ")
- },
- addUserLogs: function (msg) {
- this.addLogs(msg, "【操作日志】: ")
- },
- addLogs: function (msg, type) {
- if (this.logs.length > 1000) {
- this.logs.shift();
- }
- this.logs.unshift({
- type: type,
- msg: msg,
- time: new Date().toLocaleString()
- })
- },
- cleanLogs: function () {
- this.logs = []
- this.addSysLogs("清空日志")
- },
- sendTxt: function (isRealContentMode) {
- if (!this.createDisabled) {
- if (window.layer) {
- layer.msg("请先加入房间，再发送内容")
- }
- this.addUserLogs("请先加入房间，再发送内容");
- return
- }
- if (this.noOthersInRoom) {
- if (window.layer) {
- layer.msg("房间内至少需要两个人才能发送内容")
- }
- this.addUserLogs("房间内至少需要两个人才能发送内容");
- return
- }
- if (isRealContentMode) {
- let realContent = layedit.getContent(this.txtEditId)
- if (realContent.length <= 0) {
- if (window.layer) {
- layer.msg("请输入发送的富文本内容")
- }
- this.addUserLogs("请输入发送的富文本内容");
- return
- }
- if (realContent.length > 1000) {
- if (window.layer) {
- layer.msg("富文本文字内容过长，长度最多1w单词!")
- }
- this.addUserLogs("富文本文字内容过长，长度最多1w单词");
- return
- }
- this.socket.emit('message', {
- emitType: "sendTxt",
- real: isRealContentMode,
- content: encodeURIComponent(realContent),
- room: this.roomId,
- from: this.socketId,
- recoderId: this.recoderId
- });
- if (window.layer) {
- if (window.layui && window.layedit) {
- this.txtEditId = window.layedit.build('txt', {
- tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'face'],
- height: 180
- });
- }
- this.sendFileList.push({
- id: "txt",
- name: realContent,
- size: realContent.length,
- type: "富文本内容",
- process: 100,
- done: true,
- toIdStr: "",
- start: 0,
- cost: 0
- });
- layer.msg("富文本内容发送完毕")
- this.addUserLogs("富文本内容发送完毕");
- }
- } else {
- let content = layedit.getText(this.txtEditId)
- if (content.length <= 0) {
- if (window.layer) {
- layer.msg("请输入发送的文本内容")
- }
- this.addUserLogs("请输入发送的文本内容");
- return
- }
- if (content.length > 1000) {
- if (window.layer) {
- layer.msg("文字内容过长，最多1000单词!")
- }
- this.addUserLogs("文字内容过长，最多1000单词");
- return
- }
- this.socket.emit('message', {
- emitType: "sendTxt",
- real: isRealContentMode,
- content: encodeURIComponent(content),
- room: this.roomId,
- from: this.socketId,
- recoderId: this.recoderId
- });
- if (window.layer) {
- if (window.layui && window.layedit) {
- this.txtEditId = window.layedit.build('txt', {
- tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'face'],
- height: 180
- });
- }
- this.sendFileList.push({
- id: "txt",
- name: content,
- size: content.length,
- type: "文本内容",
- process: 100,
- done: true,
- toIdStr: "",
- start: 0,
- cost: 0
- });
- layer.msg("内容发送完毕")
- this.addUserLogs("内容发送完毕");
- }
- }
- },
- clickHome: function (show = true) {
- this.currentMenu = 1;
-
- let active = document.querySelector("#btnHome")
-
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
-
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickSendFile();
- }
- },
- clickReceive: function (show = true) {
- this.currentMenu = 2;
-
- let active = document.querySelector("#btnReceive")
-
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickReceiveFile()
- }
- },
- clickTxt: function (show = true) {
- this.currentMenu = 3;
-
- let active = document.querySelector("#btnTxt")
-
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickReceiveTxt()
- }
- },
- clickCodeFile: function (show = true) {
- this.currentMenu = 4;
-
- let active = document.querySelector("#btnCodeFile");
- document.querySelector("#iamtsm").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileListDisable").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- document.querySelector("#chooseFileList").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- if (this.toolListShadeIndex === -1) { // 没展开状态下才同步颜色
- document.querySelector("#closeTool").style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
- }
-
- let menuBorder = document.querySelector(".menuBorder");
- let box = active.getBoundingClientRect();
- offsetMenuBorder(box, menuBorder);
-
- function offsetMenuBorder(box, menuBorder) {
- let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth - box.width) / 2) + "px";
- menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
- }
-
- if (show) {
- this.clickReceiveCodeFile()
- }
- },
- //点击切换发送文件或者发送文本
- changeFileOrTxt: function () {
- let that = this;
- this.isTxtMode = !this.isTxtMode;
- if (window.layui && window.layedit) {
- this.txtEditId = window.layedit.build('txt', {
- tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'face'],
- height: 180
- });
- }
- $("#changeMode").removeClass("layui-anim-rotate")
- setTimeout(() => {
- $("#changeMode").addClass("layui-anim-rotate")
- if (window.layer) {
- layer.msg(`切换为${this.isTxtMode ? '文本模式' : '文件模式'}`)
- }
- this.addUserLogs(`切换为${this.isTxtMode ? '文本模式' : '文件模式'}`);
- }, 50)
+ this.addUserLogs("打开赞助窗口")
},
//点击下载文件面板
clickReceiveFile: function () {
+ if(this.receiveFileList.length === 0){
+ if(window.layer){
+ layer.msg("暂时没有收到文件")
+ }
+ return
+ }
this.showReceiveFile = !this.showReceiveFile;
if (this.showReceiveFile) {
this.addUserLogs("展开接收文件面板");
- this.numReceiveFile = 50;
+ this.receiveFileMaskHeightNum = 20;
} else {
- this.numReceiveFile = 150;
+ this.receiveFileMaskHeightNum = 150;
this.addUserLogs("收起接收文件面板");
}
},
- //点击接收文字面板
- clickReceiveTxt: function () {
- this.showReceiveTxt = !this.showReceiveTxt;
- if (this.showReceiveTxt) {
- this.addUserLogs("展开接收文字面板");
- this.numReceiveTxt = 50;
- } else {
- this.numReceiveTxt = 150;
- this.addUserLogs("收起接收文字面板");
- }
- },
//点击发送文件面板
clickSendFile: function () {
+ if(!this.hasManInRoom && !this.showSendFile){
+ if(window.layer){
+ layer.msg("房间内至少需要两个人才能发送内容")
+ }
+ return
+ }
this.showSendFile = !this.showSendFile;
if (this.showSendFile) {
- this.numSendFile = 50;
+ this.sendFileMaskHeightNum = 20;
this.addUserLogs("展开发送文件/文本面板");
} else {
- this.numSendFile = 150;
+ this.sendFileMaskHeightNum = 150;
this.addUserLogs("收起发送文件/文本面板");
}
},
- //点击取件码面板
- clickReceiveCodeFile: function () {
- this.showCodeFile = !this.showCodeFile;
- if (this.showCodeFile) {
- this.numCodeFile = 50;
- this.addUserLogs("展开取件码面板");
- } else {
- this.numCodeFile = 150;
- this.addUserLogs("收起取件码面板");
- }
- },
//点击查看日志面板
clickLogs: function () {
this.showLogs = !this.showLogs;
if (this.showLogs) {
- this.numLogs = 50;
+ this.logMaskHeightNum = 50;
+ this.addUserLogs("展开日志面板");
} else {
- this.numLogs = 150;
+ this.logMaskHeightNum = 150;
+ this.addUserLogs("收起日志面板");
}
},
+ //点击打开音视频面板
+ clickMediaVideo: function () {
+ this.showMedia = !this.showMedia;
+ if (this.showMedia) {
+ this.addUserLogs("展开音视频/屏幕共享面板");
+ this.mediaVideoMaskHeightNum = 50;
+ } else {
+ this.mediaVideoMaskHeightNum = 150;
+ this.addUserLogs("收起音视频/屏幕共享面板");
+ }
+ },
+ //点击打开屏幕共享面板
+ clickMediaScreen: function () {
+ this.showMedia = !this.showMedia;
+ if (this.showMedia) {
+ this.addUserLogs("展开音视频/屏幕共享面板");
+ this.mediaScreenMaskHeightNum = 50;
+ } else {
+ this.mediaScreenMaskHeightNum = 150;
+ this.addUserLogs("收起音视频/屏幕共享面板");
+ }
+ },
+ typeInArr: function(arr, type){
+ return arr.filter(item=>{
+ return type.includes(item);
+ }).length > 0;
+ },
//文件大小
getFileSizeStr: function (size) {
let sizeStr = (size / 1048576).toString();
@@ -1497,6 +1400,12 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
},
//创建文件发送房间
createFileRoom: function () {
+ this.openRoomInput = !this.openRoomInput;
+
+ if(this.openRoomInput){
+ return
+ }
+
this.roomId = this.roomId.toString().replace(/\s*/g, "")
if (this.roomId === null || this.roomId === undefined || this.roomId === '') {
if (window.layer) {
@@ -1689,20 +1598,24 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
//当前用户开启了屏幕共享时建立 stream share 链接
initMediaShareChannel: function (rtcConnect, type, track, stream) {
rtcConnect.ontrack = (event) => {
- setTimeout(() => {
- $("#mediaShareRoomList").append(`
-
- `);
- var video = document.querySelector("#otherMediaShareVideo");
- video.srcObject = event.streams[0]
- // ios 微信浏览器兼容问题
+ if(event.track.kind === 'audio'){
+ return;
+ }
+ $(`${type === 'screen' ? '#mediaScreenRoomList': '#mediaVideoRoomList'}`).append(`
+
+
+
+ `);
+
+ var video = document.querySelector("#otherMediaShareVideo");
+ video.srcObject = event.streams[0]
+ // ios 微信浏览器兼容问题
+ video.addEventListener('loadedmetadata', function() {
video.play();
document.addEventListener('WeixinJSBridgeReady', function () {
video.play();
}, false);
- }, 100)
+ });
};
if (track && stream) {
@@ -1737,6 +1650,12 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
},
// 初始发送
initSendFile: function () {
+ if(!this.hasManInRoom){
+ if(window.layer){
+ layer.msg("房间内至少需要两个人才能发送内容")
+ }
+ return
+ }
//选中一个文件
this.changeSendFileNext();
@@ -1869,7 +1788,6 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
sendChannel.send(event.target.result);
fileOffset += event.target.result.byteLength;
remote[this.currentChooseFile.index + "offset"] = fileOffset
- this.currentSendSize += event.target.result.byteLength;
this.currentSendAllSize += event.target.result.byteLength;
//更新发送进度
@@ -1879,7 +1797,6 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
//发送完一份重置相关数据
if (fileOffset === this.currentChooseFile.size) {
- this.currentSendSize = 0
this.addPopup("正在发送给" + nextSendingId.substr(0, 4) + ",100%。");
this.addSysLogs("正在发送给" + nextSendingId.substr(0, 4) + ",100%。")
this.socket.emit('message', {
@@ -2006,10 +1923,8 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
receiveBuffer.push(event.data);
receivedSize += event.data.byteLength;
- document.querySelector("#receiveProgress").value = receivedSize;
this.setRemoteInfo(id, { receiveBuffer: receiveBuffer, receivedSize: receivedSize })
- this.currentReceiveSize += event.data.byteLength;
//更新接收进度
this.updateReceiveProcess(id, {
@@ -2017,9 +1932,7 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
});
if (receivedSize === size) {
- this.currentReceiveSize = 0;
this.addSysLogs(name + " 接收完毕");
- document.querySelector("#receiveProgress").value = 0;
this.addPopup("文件[ " + name + " ]接收完毕，可点击右下角查看。");
//更新接收进度
@@ -2065,7 +1978,7 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
if (item.start === 0) {
item.start = Date.now();
}
- data.cost = parseInt((Date.now() - item.start) / 1000);
+ data.cost = ((Date.now() - item.start) / 1000).toFixed(3)
Object.assign(this.receiveFileList[i], data);
}
}
@@ -2075,7 +1988,7 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
for (let i = 0; i < this.sendFileList.length; i++) {
let item = this.sendFileList[i];
if (item.id === id && item.index === this.currentChooseFile.index && !item.done) {
- data.cost = parseInt((Date.now() - item.start) / 1000);
+ data.cost = ((Date.now() - item.start) / 1000).toFixed(3);
Object.assign(this.sendFileList[i], data);
}
}
@@ -2154,11 +2067,14 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
that.socketId = data.id;
that.roomId = data.room;
that.recoderId = data.recoderId;
- if (data.type === 'screen' && data['peers'].length === 0) {
- window.Bus.$emit("startScreenShare", data.id);
- }
- if (data.type === 'video' && data['peers'].length === 0) {
- window.Bus.$emit("startVideoShare", data.id);
+ // 获取自己本地流
+ if (data['peers'].length === 0) {
+ if(data.type === 'screen'){
+ window.Bus.$emit("startScreenShare", data.id);
+ }
+ if(data.type === 'video'){
+ window.Bus.$emit("startVideoShare", data.id);
+ }
}
for (let i = 0; i < data['peers'].length; i++) {
let otherSocketId = data['peers'][i].id;
@@ -2166,40 +2082,29 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
let rtcConnect = that.getOrCreateRtcConnect(otherSocketId);
// 处理完连接后，更新下昵称
that.setRemoteInfo(otherSocketId, { nickName : otherSocketIdNickName })
- // 处理音视频情况
- if (data.type === 'screen') {
- await new Promise(resolve => {
+
+ await new Promise(resolve => {
+ // 处理音视频情况
+ if (data.type === 'screen') {
window.Bus.$emit("startScreenShare", otherSocketId, (track, stream) => {
that.initMediaShareChannel(rtcConnect, data.type, track, stream)
resolve()
});
- }).then(()=>{
- rtcConnect.createOffer(that.options).then(offer => {
- that.offerSuccess(rtcConnect, otherSocketId, offer);
- }, error => {
- that.offerFailed(rtcConnect, otherSocketId, error);
- });
- })
- } else if (data.type === 'video') {
- await new Promise(resolve => {
+ }else if (data.type === 'video') {
window.Bus.$emit("startVideoShare", otherSocketId, (track, stream) => {
that.initMediaShareChannel(rtcConnect, data.type, track, stream)
resolve()
});
- }).then(()=>{
- rtcConnect.createOffer(that.options).then(offer => {
- that.offerSuccess(rtcConnect, otherSocketId, offer);
- }, error => {
- that.offerFailed(rtcConnect, otherSocketId, error);
- });
- })
- } else {
+ }else{
+ resolve()
+ }
+ }).then(()=>{
rtcConnect.createOffer(that.options).then(offer => {
that.offerSuccess(rtcConnect, otherSocketId, offer);
}, error => {
that.offerFailed(rtcConnect, otherSocketId, error);
});
- }
+ })
}
that.touchResize();
});
@@ -2279,7 +2184,7 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
that.setRemoteInfo(fromId, { receiveFiles: data });
that.addPopup(data.from + "选择了文件 [ " + data.name + " ]，即将发送。");
that.addSysLogs(data.from + "选择了文件 [ " + data.name + " ]，即将发送。");
- document.querySelector("#receiveProgress").max = data.size;
+ // document.querySelector("#receiveProgress").max = data.size;
that.receiveFileList.push({
id: fromId,
@@ -2315,7 +2220,7 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
})
//发送文字内容
- this.socket.on('sendTxt', function (data) {
+ this.socket.on('sendChatingRoom', function (data) {
let fromId = data.from;
that.addPopup(data.from + "发送了文字 [ " + data.content.substr(0, 10) + " ]");
that.addSysLogs(data.from + "发送了文字 [ " + data.content.substr(0, 10) + " ]");
@@ -2325,17 +2230,15 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
} catch (e) {
that.addSysLogs("decode msg err : " + data.content);
}
- that.receiveTxtList.unshift({
- id: fromId,
- real: data.real,
+ let now = new Date().toLocaleString();
+ that.receiveTxtList.push({
+ socketId: fromId,
content: data.content,
- time: new Date().toLocaleString(),
- c_id: "txt_" + that.receiveTxtList.length,
- process: 0,
- done: false,
- start: 0,
- cost: 0
+ nickName : data.nickName,
+ time: now,
+ timeAgo : window.util ? util.timeAgo(now) : now
})
+ that.chatingRoomTpl();
});
//在线数量
@@ -2359,7 +2262,10 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
//关闭共享
this.socket.on('stopScreenShare', function (data) {
if (data.id === that.socketId) {
- $("#selfMediaShareVideo").parent().remove();
+ setTimeout(() => {
+ $("#selfMediaShareVideo").parent().remove();
+ }, 500);
+ that.clickMediaScreen();
} else {
$("#otherMediaShareVideo").parent().remove();
}
@@ -2368,7 +2274,10 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
//关闭音视频
this.socket.on('stopVideoShare', function (data) {
if (data.id === that.socketId) {
- $("#selfMediaShareVideo").parent().remove();
+ setTimeout(() => {
+ $("#selfMediaShareVideo").parent().remove();
+ }, 500);
+ that.clickMediaVideo();
} else {
$("#otherMediaShareVideo").parent().remove();
}
@@ -2398,37 +2307,37 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
this.socket.on('commData', function (data) {
that.switchData = data.switchData
that.switchDataGet = true;
- if(data.chatingData){
- data.chatingData.forEach(elem => {
+ if(data.chatingCommData){
+ data.chatingCommData.forEach(elem => {
try {
elem.msg = decodeURIComponent(elem.msg)
} catch (e) {
that.addSysLogs("decode msg err : " + elem.msg);
}
- that.chatingList.push(elem)
+ that.chatingCommList.push(elem)
})
- that.chatingList.forEach(item => {
+ that.chatingCommList.forEach(item => {
item.timeAgo = window.util ? util.timeAgo(item.time) : item.time;
})
}
});
//公共聊天频道
- this.socket.on('chating', function (data) {
+ this.socket.on('chatingComm', function (data) {
that.addSysLogs(data.room + "频道的" + data.socketId + "发言: [ " + data.msg + " ]");
try {
data.msg = decodeURIComponent(data.msg)
} catch (e) {
that.addSysLogs("decode msg err : " + data.msg);
}
- that.chatingList.push(data);
- if (that.chatingList.length > 10) {
- that.chatingList.shift();
+ that.chatingCommList.push(data);
+ if (that.chatingCommList.length > 10) {
+ that.chatingCommList.shift();
}
- that.chatingList.forEach(item => {
+ that.chatingCommList.forEach(item => {
item.timeAgo = window.util ? util.timeAgo(item.time) : item.time;
})
- that.chatingTpl()
+ that.chatingCommTpl()
});
this.socket.on('manageCheck', function (data) {
@@ -2522,15 +2431,6 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
},
initCss: function (e) {
if (!e) return;
- if (this.currentMenu === 1) {
- this.clickHome(false);
- } else if (this.currentMenu === 2) {
- this.clickReceive(false);
- } else if (this.currentMenu === 3) {
- this.clickTxt(false);
- } else if (this.currentMenu === 4) {
- this.clickCodeFile(false);
- }
//re caculate size
this.reCaculateSwiperSize();
@@ -2550,24 +2450,17 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
// logs height
this.logsHeight = document.documentElement.clientHeight - 55;
+ this.sendFileListHeight = document.querySelector("#send-file-list").clientHeight - 190;
+ this.receiveFileListHeight = document.querySelector("#receive-file-list").clientHeight - 40;
},
reCaculateSwiperSize: function () {
- let clientWidth = document.body.clientWidth;
- if (window.userRoomSwiper) {
- let slidesPerView = parseInt((clientWidth / 100)) - 1;
- window.userRoomSwiper.params.slidesPerView = slidesPerView;
+ this.clientWidth = document.body.clientWidth;
+
+ if (window.fileTxtToolSwiper) {
+ window.fileTxtToolSwiper.params.slidesPerView = this.clientWidth < 600 ? 1 : 2;
}
- if (window.fileRoomSwiper) {
- let slidesPerView = parseInt((clientWidth / 100)) - 1;
- window.fileRoomSwiper.params.slidesPerView = slidesPerView;
- }
- if (window.fileRoomDisabledSwiper) {
- let slidesPerView = parseInt((clientWidth / 100)) - 1;
- window.fileRoomDisabledSwiper.params.slidesPerView = slidesPerView;
- }
- if (window.mediaShareRoomSwiper) {
- let slidesPerView = parseInt((clientWidth / 100)) - 1;
- window.mediaShareRoomSwiper.params.slidesPerView = slidesPerView;
+ if (window.toolSwiper) {
+ window.toolSwiper.params.slidesPerView = this.toolSlidesPerViewCount;
}
},
touchResize: function () {
@@ -2588,47 +2481,6 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
});
}
},
- toolList: function () {
- let that = this;
- setTimeout(() => {
- if (window.$) {
- $('.toolList a').on('click', function () {
- let $this = $(this);
- if ($this.hasClass("layui-icon-component")) {
- return
- }
- if ($this.hasClass('fan-out')) {
- $('.toolList').removeClass('fan-out');
- $('.toolList a').removeClass('fan-out');
- $('.toolList').css("marginBottom", "0")
- $("#layui-layer-shade" + that.toolListShadeIndex).remove()
- $("#closeTool").css("backgroundColor", "rgb(79, 79, 65)")
- } else {
- $('.toolList').addClass('fan-out');
- $('.toolList a').addClass('fan-out');
- $('.toolList').css("marginBottom", "110px")
- $("#closeTool").css("backgroundColor", "rgb(0 0 0)")
- layer.msg('', {
- shade: 0.8, time: 0,
- success: function (layero, index) {
- that.toolListShadeIndex = index;
- $(layero.selector).remove()
- $("#layui-layer-shade" + index).css("zIndex", 1000);
- $("#closeTool").css("backgroundColor", "unset")
- }
- });
- }
- });
- layer.tips('更多功能都放在这里啦，点开看看吧～', '#closeToolIcon', {
- tips: 1
- });
- }
- setInterval(() => {
- let colors = ["#deb887", "#faebd7", "#6495ed", "#008b8b", "#87ceeb", "#48d1cc"]
- $("#closeToolIcon").css("color", colors[parseInt(Math.random(1000) * 1000) % 6])
- }, 500);
- }, 800)
- },
windowOnBusEvent: function () {
window.Bus.$on("changeScreenState", (res) => {
this.isScreen = res
@@ -2664,8 +2516,11 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
}
this.videoShareTimes = res
})
- window.Bus.$on("sendChating", (res) => {
- this.sendChating()
+ window.Bus.$on("sendChatingComm", (res) => {
+ this.sendChatingComm()
+ })
+ window.Bus.$on("sendChatingRoom", (res) => {
+ this.sendChatingRoom()
})
window.Bus.$on("sendOpenaiChat", (res) => {
this.sendOpenaiChat()
@@ -2720,33 +2575,50 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
drag: true,
multiple: true,
choose: function (obj) {
- for (let index in obj.pushFile()) {
- let hasSendFile = that.sendFileList.filter(file => {
- return file.name === obj.pushFile()[index].name && file.size === obj.pushFile()[index].size
- && file.type === obj.pushFile()[index].type
- }).length > 0;
-
- if (hasSendFile && window.layer) {
- layer.msg("已过滤发送过的文件");
- that.addUserLogs("已过滤发送过的文件");
- }
-
- if (!hasSendFile) {
- that.chooseFileList.push(
- Object.assign(obj.pushFile()[index], {
- index: 'file' + index,
- fileSendStatus: 0,
- offset: 0
- })
- )
- }
- }
+ that.chooseFileList = []
+ obj.resetFile()
+ obj.preview((index, file, result)=>{
+ that.chooseFileList.push(
+ Object.assign(file, {
+ index: 'file' + index,
+ fileSendStatus: 0,
+ offset: 0
+ })
+ )
+ })
}
});
}
+ },
+ initSwiper: function(){
+ let clientWidth = document.body.clientWidth;
+ //发文件，收文件功能
+ let fileTxtToolSwiper = new Swiper('.tl-rtc-file-send-file-txt-tool', {
+ direction: 'horizontal',
+ loop: false,
+ slidesPerView: clientWidth < 600 ? 1 : 2,
+ observer: true
+ })
+ window.fileTxtToolSwiper = fileTxtToolSwiper;
+
+ //工具功能
+ let toolSwiper = new Swiper('.tl-rtc-file-tool-list', {
+ direction: 'horizontal',
+ loop: false,
+ slidesPerView: this.toolSlidesPerViewCount,
+ observer: true,
+ })
+ window.toolSwiper = toolSwiper;
}
},
mounted: function () {
+ this.addSysLogs("刷新随机房间号 初始化中...");
+ this.refleshRoom()
+ this.addSysLogs("刷新随机房间号完成");
+
+ this.addSysLogs("滑动组件 初始化中...");
+ this.initSwiper();
+ this.addSysLogs("滑动组件 初始化完成");
this.addSysLogs("SOCKET监听 初始化中...");
this.socketListener();
@@ -2758,6 +2630,9 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
this.addSysLogs("窗口事件监听 初始化中...");
window.onresize = this.initCss;
+ setInterval(() => {
+ this.touchResize()
+ }, 1000);
this.addSysLogs("窗口事件监听 初始化完成");
this.addSysLogs("分享组件 初始化中...");
@@ -2774,13 +2649,10 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
this.addSysLogs("文件选择组件 初始化完成");
}, 2000);
- this.addSysLogs("右侧工具动画 初始化中...");
- this.toolList();
- this.addSysLogs("右侧工具动画 初始化完成");
-
this.addSysLogs("基础样式 初始化中...");
this.logsHeight = document.documentElement.clientHeight - 55;
- this.clickHome(false);
+ this.sendFileListHeight = document.querySelector("#send-file-list").clientHeight - 190;
+ this.receiveFileListHeight = document.querySelector("#receive-file-list").clientHeight - 40;
this.addSysLogs("基础样式 初始化完成");
this.addSysLogs("DEBUG组件 初始化中...");
@@ -2797,9 +2669,13 @@ axios.get(window.prefix + "/api/comm/initData", {}).then((initData) => {
window.manageChange = function (data) {
window.Bus.$emit("manageChange", data)
}
- window.sendChating = function () {
- window.Bus.$emit("sendChating", {})
+ window.sendChatingComm = function () {
+ window.Bus.$emit("sendChatingComm", {})
}
+ window.sendChatingRoom = function () {
+ window.Bus.$emit("sendChatingRoom", {})
+ }
+
window.sendOpenaiChat = function () {
window.Bus.$emit("sendOpenaiChat", {})
}
diff --git a/res/js/screen.js b/res/js/screen.js
index 5b19536..2cb25c9 100644
--- a/res/js/screen.js
+++ b/res/js/screen.js
@@ -62,11 +62,11 @@ var screen = new Vue({
this.interverlId = setInterval(() => {
that.times += 1;
window.Bus.$emit("changeScreenTimes", that.times)
- $("#screen").css("color","#fb0404")
+ $("#screenIcon").css("color","#fb0404")
$("#screenTimes").css("color","#fb0404")
setTimeout(() => {
- $("#screen").css("color","#ffffff")
- $("#screenTimes").css("color","#ffffff")
+ $("#screenIcon").css("color","#000000")
+ $("#screenTimes").css("color","#000000")
}, 500)
}, 1000);
@@ -113,6 +113,10 @@ var screen = new Vue({
layer.msg("录制完成，请在接收文件列表查看")
}
+ setTimeout(() => {
+ $("#screenIcon").css("color","#000000")
+ }, 1000);
+
return;
},
},
diff --git a/res/js/screenShare.js b/res/js/screenShare.js
index c435ce9..c3149ad 100644
--- a/res/js/screenShare.js
+++ b/res/js/screenShare.js
@@ -41,7 +41,7 @@ var screenShare = new Vue({
console.log(error)
}
}
-
+
if (this.stream == null) {
if (window.layer) {
layer.msg("获取设备屏幕录制权限失败")
@@ -53,28 +53,30 @@ var screenShare = new Vue({
return;
}
- $("#mediaShareRoomList").append(`
-