Skip to content

C
chat_webview
Commit c9e99c56 by Kim Peace
Options

Merge branch 'feature/add_user_in_collaboration' into debug/console_logs 

# Conflicts:
#	public_new/js/sockets/chat-websocket-message.js
#	public_new/js/views/collaboration/collaboration-add-user.js
#	public_new/js/views/collaboration/share-event-listener.js
parents e6d5fa69 3e3da3c4
Showing with 343 additions and 206 deletions
public_new/css/collaboration.css
...@@ -26,14 +26,42 @@ ...@@ -26,14 +26,42 @@
margin: 0 5px; margin: 0 5px;
} }
.menu-icon {width: 40px;height: 50px;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20} .menu-icon {
.menu-bar {width: 40px;height: 5px;background: white;position: absolute;transition: all 0.3s;} width: 40px;
.menu-bar1 {margin-top: 9px} height: 50px;
.menu-bar2 {margin-top: 23px} margin: 10px 15px;
.menu-bar3 {margin-top: 37px} transform: scale(0.8);
.menu-icon.hover .menu-bar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;} padding: 0;
.menu-icon.hover .menu-bar2 {opacity: 0} cursor: pointer;
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;} z-index: 20;
}
.menu-bar {
width: 40px;
height: 5px;
background: white;
position: absolute;
transition: all 0.3s;
}
.menu-bar1 {
margin-top: 9px;
}
.menu-bar2 {
margin-top: 23px;
}
.menu-bar3 {
margin-top: 37px;
}
.menu-icon.hover .menu-bar1 {
-webkit-transform: rotate(45deg) scaleX(0.7);
margin-top: 22px;
}
.menu-icon.hover .menu-bar2 {
opacity: 0;
}
.menu-icon.hover .menu-bar3 {
-webkit-transform: rotate(-45deg) scaleX(0.7);
margin-top: 22px;
}
.collabo-label { .collabo-label {
padding: 2px 5px; padding: 2px 5px;
...@@ -50,8 +78,8 @@ ...@@ -50,8 +78,8 @@
margin-top: 50px; margin-top: 50px;
} }
#overlay_user_list .user_list { #overlay_user_list .user_list {
background: #383838!important; background: #383838 !important;
border: none!important; border: none !important;
height: calc(100% - 140px); height: calc(100% - 140px);
overflow-x: unset; overflow-x: unset;
overflow-y: scroll; overflow-y: scroll;
...@@ -139,38 +167,40 @@ ...@@ -139,38 +167,40 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
#collabo_main .talking_area,#collabo_main .start_pip_area { #collabo_main .talking_area,
#collabo_main .start_pip_area {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.talking_img_wrap { .talking_img_wrap {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 90px; width: 90px;
height: 90px; height: 90px;
border-radius: 50%; border-radius: 50%;
border: 1px solid #fff; border: 1px solid #fff;
box-shadow: 0 0 20px #ffffff; box-shadow: 0 0 20px #ffffff;
cursor: pointer; cursor: pointer;
} }
.talking_img_wrap::before, .talking_img_wrap::after { .talking_img_wrap::before,
content: ""; .talking_img_wrap::after {
display: block; content: "";
position: absolute; display: block;
top: 0; position: absolute;
bottom: 0; top: 0;
left: 0; bottom: 0;
right: 0; left: 0;
margin: auto; right: 0;
width: 100%; margin: auto;
height: 100%; width: 100%;
border: 1px solid #fff; height: 100%;
border-radius: 50%; border: 1px solid #fff;
box-sizing: border-box; border-radius: 50%;
pointer-events: none; box-sizing: border-box;
animation: pulsate 2s linear infinite; pointer-events: none;
animation: pulsate 2s linear infinite;
} }
/**************************** overlay *************************/ /**************************** overlay *************************/
...@@ -217,9 +247,9 @@ animation: pulsate 2s linear infinite; ...@@ -217,9 +247,9 @@ animation: pulsate 2s linear infinite;
background: #383838; background: #383838;
height: 100vh; height: 100vh;
} }
#add_user_list{ #add_user_list {
width: 90%; width: 90%;
height: 90%; height: 90%;
} }
.fixed { .fixed {
position: fixed; position: fixed;
...@@ -236,53 +266,53 @@ animation: pulsate 2s linear infinite; ...@@ -236,53 +266,53 @@ animation: pulsate 2s linear infinite;
overflow: scroll; overflow: scroll;
} }
#overlay_menu { #overlay_menu {
transition: .7s; transition: 0.7s;
position: absolute; position: absolute;
top: 60px; top: 60px;
right: 0; right: 0;
} }
#overlay_menu .item01{ #overlay_menu .item01 {
opacity: 0; opacity: 0;
animation: fadein .5s ease forwards; animation: fadein 0.5s ease forwards;
} }
#overlay_menu .item02{ #overlay_menu .item02 {
opacity: 0; opacity: 0;
animation: fadein 1s ease forwards; animation: fadein 1s ease forwards;
} }
#overlay_menu .item03{ #overlay_menu .item03 {
opacity: 0; opacity: 0;
animation: fadein 1.5s ease forwards; animation: fadein 1.5s ease forwards;
} }
#overlay_menu .item04{ #overlay_menu .item04 {
opacity: 0; opacity: 0;
animation: fadein 2s ease forwards; animation: fadein 2s ease forwards;
} }
#overlay_menu .item05{ #overlay_menu .item05 {
opacity: 0; opacity: 0;
animation: fadein 2.5s ease forwards; animation: fadein 2.5s ease forwards;
} }
@keyframes fadein{ @keyframes fadein {
0%{ 0% {
opacity: 0; opacity: 0;
} }
100%{ 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes fadeout{ @keyframes fadeout {
0%{ 0% {
opacity: 1; opacity: 1;
} }
100%{ 100% {
opacity: 0; opacity: 0;
} }
} }
#overlay_menu .item01.hide, #overlay_menu .item01.hide,
#overlay_menu .item02.hide, #overlay_menu .item02.hide,
#overlay_menu .item03.hide, #overlay_menu .item03.hide,
#overlay_menu .item04.hide, #overlay_menu .item04.hide,
#overlay_menu .item05.hide{ #overlay_menu .item05.hide {
opacity: 1; opacity: 1;
animation: fadeout 0.3s ease forwards; animation: fadeout 0.3s ease forwards;
} }
...@@ -303,7 +333,7 @@ animation: pulsate 2s linear infinite; ...@@ -303,7 +333,7 @@ animation: pulsate 2s linear infinite;
position: relative; position: relative;
z-index: 999; z-index: 999;
} }
#overlay_menu .menu_wrap .menu .item.hide{ #overlay_menu .menu_wrap .menu .item.hide {
z-index: 0; z-index: 0;
} }
#overlay_menu .menu_wrap .menu .item:hover { #overlay_menu .menu_wrap .menu .item:hover {
...@@ -317,8 +347,8 @@ animation: pulsate 2s linear infinite; ...@@ -317,8 +347,8 @@ animation: pulsate 2s linear infinite;
color: #fff; color: #fff;
padding-top: 6px; padding-top: 6px;
} }
#overlay_menu .menu_wrap .menu .item span{ #overlay_menu .menu_wrap .menu .item span {
font-size:12px; font-size: 12px;
} }
#overlay_menu .img_wrap { #overlay_menu .img_wrap {
width: 35px; width: 35px;
...@@ -330,21 +360,14 @@ animation: pulsate 2s linear infinite; ...@@ -330,21 +360,14 @@ animation: pulsate 2s linear infinite;
width: 35px; width: 35px;
height: 35px; height: 35px;
} }
.fas.fa-wrench{ .fas.fa-wrench {
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
vertical-align: middle; vertical-align: middle;
} }
/* ユーザー追加 */ /* ユーザー追加 */
#overlay_add_user_list {
position: fixed;
z-index: 100;
top: 0;
background: white;
height: 70%;
width: 80%;
}
#add_user_list .user_list li { #add_user_list .user_list li {
list-style: none; list-style: none;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
...@@ -424,13 +447,20 @@ animation: pulsate 2s linear infinite; ...@@ -424,13 +447,20 @@ animation: pulsate 2s linear infinite;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
} }
#overlay_add_user_list a {
color: #323743;
}
/**************************** add user *************************/ /**************************** add user *************************/
#addUserFormInCollaboration nav{ #addUserFormInCollaboration nav {
border:none; border: none;
}
#addUserFormInCollaboration {
height: 100%;
display: flex;
flex-flow: column;
overflow-y: auto;
}
#addUserFormInCollaboration .content {
width: 100%;
} }
/**************************** zoomin zoomout *************************/ /**************************** zoomin zoomout *************************/
...@@ -483,12 +513,12 @@ animation: pulsate 2s linear infinite; ...@@ -483,12 +513,12 @@ animation: pulsate 2s linear infinite;
height: 50px; height: 50px;
border-radius: 5px; border-radius: 5px;
} }
#modalAddUserConfirm .chat_list h2{ #modalAddUserConfirm .chat_list h2 {
font-size: 20px; font-size: 20px;
} }
/**************************** document *************************/ /**************************** document *************************/
.start_pip_img_wrap{ .start_pip_img_wrap {
width: 40px; width: 40px;
} }
...@@ -519,12 +549,12 @@ animation: pulsate 2s linear infinite; ...@@ -519,12 +549,12 @@ animation: pulsate 2s linear infinite;
.end:hover { .end:hover {
background: #ff4747c7; background: #ff4747c7;
} }
.close_img{ .close_img {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.t-icon{ .t-icon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
...@@ -532,40 +562,40 @@ animation: pulsate 2s linear infinite; ...@@ -532,40 +562,40 @@ animation: pulsate 2s linear infinite;
height: 30px; height: 30px;
margin: 0 10px 6px 10px; margin: 0 10px 6px 10px;
} }
.voice{ .voice {
background-image: url("../icon/icon_voice_white.svg"); background-image: url("../icon/icon_voice_white.svg");
} }
.voice.disable{ .voice.disable {
background-image: url("../icon/icon_voice_white_disable.svg"); background-image: url("../icon/icon_voice_white_disable.svg");
} }
.pen{ .pen {
background-image: url("../icon/icon_collabo_pen_white.svg"); background-image: url("../icon/icon_collabo_pen_white.svg");
} }
.pen.disable{ .pen.disable {
background-image: url("../icon/icon_collabo_pen_white_disable.svg"); background-image: url("../icon/icon_collabo_pen_white_disable.svg");
} }
.picture{ .picture {
background-image: url("../icon/icon_collabo_picture.svg"); background-image: url("../icon/icon_collabo_picture.svg");
} }
.place{ .place {
background-image: url("../icon/icon_collabo_place_white.svg"); background-image: url("../icon/icon_collabo_place_white.svg");
} }
.delete{ .delete {
background-image: url("../icon/icon_collabo_delete_white.svg"); background-image: url("../icon/icon_collabo_delete_white.svg");
} }
.rewind{ .rewind {
background-image: url("../icon/icon_collabo_rewind_white.svg"); background-image: url("../icon/icon_collabo_rewind_white.svg");
} }
.forward{ .forward {
background-image: url("../icon/icon_collabo_forward_white.svg"); background-image: url("../icon/icon_collabo_forward_white.svg");
} }
.capture{ .capture {
background-image: url("../icon/icon_collabo_capture.svg"); background-image: url("../icon/icon_collabo_capture.svg");
} }
.record{ .record {
background-image: url("../icon/icon_record.svg"); background-image: url("../icon/icon_record.svg");
} }
.record.disable{ .record.disable {
background-image: url("../icon/icon_record_disable.svg"); background-image: url("../icon/icon_record_disable.svg");
} }
...@@ -575,11 +605,12 @@ animation: pulsate 2s linear infinite; ...@@ -575,11 +605,12 @@ animation: pulsate 2s linear infinite;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
background-color: #DD4545; background-color: #dd4545;
box-shadow: 0 0 20px #dd4545; box-shadow: 0 0 20px #dd4545;
cursor: pointer; cursor: pointer;
} }
.record.disable::before, .record.disable::after { .record.disable::before,
.record.disable::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
...@@ -590,7 +621,7 @@ animation: pulsate 2s linear infinite; ...@@ -590,7 +621,7 @@ animation: pulsate 2s linear infinite;
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #DD4545; border: 1px solid #dd4545;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
pointer-events: none; pointer-events: none;
...@@ -607,7 +638,7 @@ animation: pulsate 2s linear infinite; ...@@ -607,7 +638,7 @@ animation: pulsate 2s linear infinite;
} }
} }
.flash-txt{ .flash-txt {
position: absolute; position: absolute;
top: -35px; top: -35px;
left: -45px; left: -45px;
...@@ -627,14 +658,32 @@ animation: pulsate 2s linear infinite; ...@@ -627,14 +658,32 @@ animation: pulsate 2s linear infinite;
border-radius: 5px; border-radius: 5px;
} }
@-webkit-keyframes fade-in-out { @-webkit-keyframes fade-in-out {
0% {visibility: hidden; opacity: 0;} 0% {
50% {visibility: visible; opacity: 1;} visibility: hidden;
100% {visibility: hidden; opacity: 0;} opacity: 0;
}
50% {
visibility: visible;
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
} }
@keyframes fade-in-out { @keyframes fade-in-out {
0% {visibility: hidden; opacity: 0;} 0% {
50% {visibility: visible; opacity: 1;} visibility: hidden;
100% {visibility: hidden; opacity: 0;} opacity: 0;
}
50% {
visibility: visible;
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
} }
/**************************** footer-menu *************************/ /**************************** footer-menu *************************/
...@@ -677,15 +726,17 @@ animation: pulsate 2s linear infinite; ...@@ -677,15 +726,17 @@ animation: pulsate 2s linear infinite;
margin: 0 5px; margin: 0 5px;
color: #fff; color: #fff;
} }
#collabo_footer_menu{ #collabo_footer_menu {
opacity: 1; opacity: 1;
animation: fadein 0.5s ease forwards; animation: fadein 0.5s ease forwards;
} }
#collabo_footer_menu.hide{ #collabo_footer_menu.hide {
opacity: 1; opacity: 1;
animation: fadeout 0.5s ease forwards; animation: fadeout 0.5s ease forwards;
} }
#collabo_footer .txt{ font-size: 12px; } #collabo_footer .txt {
font-size: 12px;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#add_user_list .user_item_ttl { #add_user_list .user_item_ttl {
...@@ -723,7 +774,7 @@ animation: pulsate 2s linear infinite; ...@@ -723,7 +774,7 @@ animation: pulsate 2s linear infinite;
.add_user_modal { .add_user_modal {
width: 80%; width: 80%;
height: 80%; height: 100%;
left: 12.5%; left: 12.5%;
overflow: auto; overflow: auto;
} }
...@@ -768,8 +819,8 @@ animation: pulsate 2s linear infinite; ...@@ -768,8 +819,8 @@ animation: pulsate 2s linear infinite;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.modal-content .msg_notification { .modal-content .msg_notification {
display: none; display: none;
} }
input[name="tab_item"] { input[name="tab_item"] {
display: none; display: none;
...@@ -781,28 +832,35 @@ input[name="tab_item"] { ...@@ -781,28 +832,35 @@ input[name="tab_item"] {
overflow: hidden; overflow: hidden;
} }
#addUserFormInCollaboration #tab1_content,
#addUserFormInCollaboration #tab2_content {
height: 70vh;
overflow-y: scroll;
overflow-x: hidden;
}
#tabMyGroupOnMakeRoom:checked ~ #tab1_content, #tabMyGroupOnMakeRoom:checked ~ #tab1_content,
#tabAllGroupOnMakeRoom:checked ~ #tab2_content{ #tabAllGroupOnMakeRoom:checked ~ #tab2_content {
display: block; display: block;
} }
#tabMyGroupOnAddUserInCollaboration:checked ~ #tab1_content, #tabMyGroupOnAddUserInCollaboration:checked ~ #tab1_content,
#tabAllGroupOnAddUserInCollaboration:checked ~ #tab2_content{ #tabAllGroupOnAddUserInCollaboration:checked ~ #tab2_content {
display: block; display: block;
} }
#tabMyGroupOnAddUser:checked ~ #tab1_content, #tabMyGroupOnAddUser:checked ~ #tab1_content,
#tabAllGroupOnAddUser:checked ~ #tab2_content{ #tabAllGroupOnAddUser:checked ~ #tab2_content {
display: block; display: block;
} }
#tabMyGroup:checked ~ #tab1_content, #tabMyGroup:checked ~ #tab1_content,
#tabAllGroup:checked ~ #tab2_content{ #tabAllGroup:checked ~ #tab2_content {
display: block; display: block;
} }
#tabGroup:checked ~ #tab1_content, #tabGroup:checked ~ #tab1_content,
#tabDM:checked ~ #tab2_content{ #tabDM:checked ~ #tab2_content {
display: block; display: block;
} }
...@@ -851,7 +909,7 @@ input[name="tab_item"] { ...@@ -851,7 +909,7 @@ input[name="tab_item"] {
z-index: 999; z-index: 999;
} }
#userNameCardInCollaboration li{ #userNameCardInCollaboration li {
list-style: none; list-style: none;
} }
...@@ -926,4 +984,3 @@ input[name="tab_item"] { ...@@ -926,4 +984,3 @@ input[name="tab_item"] {
max-width: 75%; max-width: 75%;
} }
} }
public_new/js/common/common.js
...@@ -179,7 +179,7 @@ Common.startCollaboration = function (collaborationType) { ...@@ -179,7 +179,7 @@ Common.startCollaboration = function (collaborationType) {
return; return;
} }
const sendData = DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL; const sendData = DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL;
CHAT_SOCKET.emitCreateMessage(sendData, 0); CHAT_SOCKET.emitCreateMessage(SOCKET_KEY.CREATE_MESSAGE, sendData);
NativeBridgeDelegate.finishAllCollaboration(); NativeBridgeDelegate.finishAllCollaboration();
} }
NativeBridgeDelegate.startCollaboration(collaborationType); NativeBridgeDelegate.startCollaboration(collaborationType);
......
public_new/js/common/constant.js
...@@ -131,6 +131,7 @@ const SOCKET_KEY = { ...@@ -131,6 +131,7 @@ const SOCKET_KEY = {
DISCONNECT: "disconnect", DISCONNECT: "disconnect",
CONNECT_ERROR: "connect_error", CONNECT_ERROR: "connect_error",
NEW_MESSAGE: "newMessage", NEW_MESSAGE: "newMessage",
NEW_COMMUNICATION: "newCommunication",
NEW_NOTIFICATION: "newNotification", NEW_NOTIFICATION: "newNotification",
REFRESH_GROUPLIST: "refreshGroupList", REFRESH_GROUPLIST: "refreshGroupList",
REFRESH_USERLIST_INGROUP: "refreshUserListInGroup", REFRESH_USERLIST_INGROUP: "refreshUserListInGroup",
...@@ -138,6 +139,10 @@ const SOCKET_KEY = { ...@@ -138,6 +139,10 @@ const SOCKET_KEY = {
RETRY_JOIN_PROCESS: "retryJoinProcess", RETRY_JOIN_PROCESS: "retryJoinProcess",
JOIN: "join", JOIN: "join",
CREATE_MESSAGE: "createMessage", CREATE_MESSAGE: "createMessage",
CREATE_TEXT: "createText",
CREATE_IMAGE: "createImage",
CREATE_VIDEO: "createVideo",
COMMUNICATION: "communication",
GET_GROUP_LIST: "getGroupList", GET_GROUP_LIST: "getGroupList",
LEAVE_ROOM: "leaveRoom", LEAVE_ROOM: "leaveRoom",
}; };
......
public_new/js/sockets/chat-websocket-message.js
...@@ -10,49 +10,62 @@ CHAT_SOCKET.bindOnNewMessage = function () { ...@@ -10,49 +10,62 @@ CHAT_SOCKET.bindOnNewMessage = function () {
", roomName: " + ", roomName: " +
roomName roomName
); );
const systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE); CHAT_SOCKET.handleMessage(message, roomName, SOCKET_KEY.NEW_MESSAGE)
});
const unwrappedMessageInfo = CHAT_SOCKET.decodeMessage(message.text);
if ( socket.on(SOCKET_KEY.NEW_COMMUNICATION, function (message, roomID, roomName) {
unwrappedMessageInfo == console.log(
DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL "peacekim:: on SOCKET_KEY.NEW_COMMUNICATION message: " +
) { message +
CHAT_SOCKET.cleanUpCollaborationMessage(); ", roomID: " +
return; roomID +
} ", roomName: " +
roomName
if (unwrappedMessageInfo.includes(messageSeperator)) { );
const messageInfo = unwrappedMessageInfo.split(messageSeperator); CHAT_SOCKET.handleMessage(message, roomName, SOCKET_KEY.NEW_COMMUNICATION)
const messageText = messageInfo[0];
const messageType = messageInfo[1];
if (
messageType == MessageType.COMMUNICATIONSTART ||
messageType == MessageType.COMMUNICATIONEND
) {
CHAT_SOCKET.addCollaborationMessage(
messageInfo,
message.userId,
roomName,
message.insertDate,
message.createdAt
);
} else {
CHAT_SOCKET.addTextMessage(messageText, message, socket.id);
}
}
if (typeof ChatRoom !== "undefined") {
// 画像、動画の描画を待ってからスクロール
setTimeout(function () {
ChatRoom.scrollToBottom();
}, 300);
} else {
Common.dismissLoadingIndicator();
}
}); });
}; };
CHAT_SOCKET.handleMessage = function (message, roomName, socketKey) {
const systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
const unwrappedMessageInfo = CHAT_SOCKET.decodeMessage(message.text);
if (
unwrappedMessageInfo ==
DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL
) {
CHAT_SOCKET.cleanUpCollaborationMessage();
return;
}
const messageInfo = unwrappedMessageInfo;
const messageType = socketKey;
const messageText = unwrappedMessageInfo;
if (
messageType == SOCKET_KEY.NEW_COMMUNICATION
) {
CHAT_SOCKET.addCollaborationMessage(
messageInfo,
message.userId,
roomName,
message.insertDate,
message.createdAt
);
} else {
CHAT_SOCKET.addTextMessage(messageText, message, socket.id);
}
if (typeof ChatRoom !== "undefined") {
// 画像、動画の描画を待ってからスクロール
setTimeout(function () {
ChatRoom.scrollToBottom();
}, 300);
} else {
Common.dismissLoadingIndicator();
}
}
CHAT_SOCKET.decodeMessage = function (text) { CHAT_SOCKET.decodeMessage = function (text) {
try { try {
return decodeURIComponent(text); return decodeURIComponent(text);
...@@ -232,7 +245,7 @@ CHAT_SOCKET.cleanUpCollaborationMessage = function () { ...@@ -232,7 +245,7 @@ CHAT_SOCKET.cleanUpCollaborationMessage = function () {
.attr("disabled", "disabled"); .attr("disabled", "disabled");
$(collaborationMessage) $(collaborationMessage)
.find(".collaboration_join_message") .find(".collaboration_join_message")
.text(getLocalizedString("flex-directionmessage_ended")); .text(getLocalizedString("message_ended"));
}); });
}; };
......
public_new/js/sockets/chat-websocket.js
...@@ -203,14 +203,60 @@ var bindOnRefreshUserListInGroup = function () { ...@@ -203,14 +203,60 @@ var bindOnRefreshUserListInGroup = function () {
); );
}; };
CHAT_SOCKET.emitCreateMessage = function (sendData, offset) { var nextFibonacci = function (num) {
socket.emit(SOCKET_KEY.CREATE_MESSAGE, { text: sendData }, offset); let nextNum = num * (1 + Math.sqrt(5)) / 2.0;
return Math.round(nextNum);
}
CHAT_SOCKET.emitCreateMessage = function (socketKey, sendData) {
if (socket.connected == false) {
CHAT_SOCKET.reconnectCreateMessage(socketKey, sendData);
} else {
socket.emit(socketKey, { text: sendData });
}
};
CHAT_SOCKET.emitCreateText = function (sendData) {
CHAT_SOCKET.emitCreateMessage(SOCKET_KEY.CREATE_TEXT, sendData);
};
CHAT_SOCKET.emitCreateImage = function (sendData) {
CHAT_SOCKET.emitCreateMessage(SOCKET_KEY.CREATE_IMAGE, sendData);
};
CHAT_SOCKET.emitCreateVideo = function (sendData) {
CHAT_SOCKET.emitCreateMessage(SOCKET_KEY.CREATE_VIDEO, sendData);
}; };
CHAT_SOCKET.emitCreateCommunicationStart = function (sendData, collaborationType, meetingID) {
if (socket.connected == false) {
CHAT_SOCKET.reconnectCreateMessage(SOCKET_KEY.COMMUNICATION, sendData, collaborationType, meetingID);
} else {
socket.emit(SOCKET_KEY.COMMUNICATION, { text: sendData }, collaborationType, meetingID);
}
};
CHAT_SOCKET.reconnectCreateMessage = function (socketKey, sendData, timeout = 100, collaborationType = null, meetingID = null) {
if (socket.connected == false) {
console.log("socket disconnected, reconnect... " + timeout)
CHAT_SOCKET.initialJoin();
setTimeout(function() {
CHAT_SOCKET.reconnectCreateMessage(socketKey, sendData, nextFibonacci(timeout));
}, timeout);
} else {
console.log("reconnected")
if (collaborationType == null) {
socket.emit(socketKey, { text: sendData });
} else {
socket.emit(socketKey, { text: sendData }, collaborationType, meetingID);
}
}
}
CHAT_SOCKET.emitCollaborationFinishMessage = function () { CHAT_SOCKET.emitCollaborationFinishMessage = function () {
if (socket != null && socket.connected) { if (socket != null && socket.connected) {
const sendData = DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL; const sendData = DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL;
CHAT_SOCKET.emitCreateMessage(sendData, 0); CHAT_SOCKET.emitCreateMessage(SOCKET_KEY.CREATE_MESSAGE, sendData);
} }
}; };
......
public_new/js/utils/chat-media-handler.js
...@@ -169,8 +169,8 @@ ChatMediaHandler.videoEncodeEnd = function (encodedUri) { ...@@ -169,8 +169,8 @@ ChatMediaHandler.videoEncodeEnd = function (encodedUri) {
} catch (e) { } catch (e) {
encodedText = text; encodedText = text;
} }
const sendData = encodedText + messageSeperator + MessageType.VIDEO; const sendData = encodedText;
CHAT_SOCKET.emitCreateMessage(sendData, 1); CHAT_SOCKET.emitCreateVideo(sendData);
$(".overlay").removeClass("active undismissable"); $(".overlay").removeClass("active undismissable");
$(".loader").removeClass("active"); $(".loader").removeClass("active");
...@@ -320,8 +320,8 @@ ChatMediaHandler.uploadImage = function (formData) { ...@@ -320,8 +320,8 @@ ChatMediaHandler.uploadImage = function (formData) {
} catch (e) { } catch (e) {
encodedText = text; encodedText = text;
} }
const sendData = encodedText + messageSeperator + MessageType.IMAGE; const sendData = encodedText;
CHAT_SOCKET.emitCreateMessage(sendData, 1); CHAT_SOCKET.emitCreateImage(sendData);
} else { } else {
// 動画の処理 // 動画の処理
if (res.thumbnailPath && res.thumbnailPath.length > 0) { if (res.thumbnailPath && res.thumbnailPath.length > 0) {
...@@ -371,8 +371,8 @@ ChatMediaHandler.uploadImage = function (formData) { ...@@ -371,8 +371,8 @@ ChatMediaHandler.uploadImage = function (formData) {
} catch (e) { } catch (e) {
encodedText = text; encodedText = text;
} }
const sendData = encodedText + messageSeperator + MessageType.VIDEO; const sendData = encodedText;
CHAT_SOCKET.emitCreateMessage(sendData, 1); CHAT_SOCKET.emitCreateVideo(sendData);
} }
$(".overlay").removeClass("active undismissable"); $(".overlay").removeClass("active undismissable");
......
public_new/js/views/archive/archive.js
...@@ -23,7 +23,7 @@ ArchiveUI.refreshSearchScreen = function (keyword) { ...@@ -23,7 +23,7 @@ ArchiveUI.refreshSearchScreen = function (keyword) {
); );
let obj = jQuery.parseHTML(html); let obj = jQuery.parseHTML(html);
$(".overlay_src_msg").append(obj); $(".overlay_src_msg").prepend(obj);
}); });
}); });
}; };
...@@ -340,7 +340,7 @@ ArchiveUI.refreshArchiveScreen = function () { ...@@ -340,7 +340,7 @@ ArchiveUI.refreshArchiveScreen = function () {
typeImage: typeImage, typeImage: typeImage,
}); });
const obj = $(jQuery.parseHTML(html)).on("click", function () {}); const obj = $(jQuery.parseHTML(html)).on("click", function () {});
$("#archiveList").append(obj); $("#archiveList").prepend(obj);
}); });
// loadingIndicatorを非表示 // loadingIndicatorを非表示
......
public_new/js/views/chats/chat-room-message.js
...@@ -71,8 +71,8 @@ ChatRoom.sendMessage = function (e) { ...@@ -71,8 +71,8 @@ ChatRoom.sendMessage = function (e) {
messageTextBox.val(""); messageTextBox.val("");
if (message.length > 0) { if (message.length > 0) {
const sendData = message + messageSeperator + MessageType.TEXT; const sendData = message;
CHAT_SOCKET.emitCreateMessage(sendData, 0); CHAT_SOCKET.emitCreateText(sendData);
} }
$(".message_input_form").focus(); $(".message_input_form").focus();
}; };
......
public_new/js/views/chats/chat-room.js
...@@ -12,30 +12,39 @@ window.onscroll = function () { ...@@ -12,30 +12,39 @@ window.onscroll = function () {
beforeScroll = window.scrollY; beforeScroll = window.scrollY;
const beforeHeight = $(".room_container").height(); const beforeHeight = $(".room_container").height();
messageCount = $(".chat_message").length; messageCount = $(".chat_message").length;
// TODO: peacekim :: check this condition
if ($(this).scrollTop() === 0 && messageCount >= PagingSize.MESSAGE) { if ($(this).scrollTop() === 0 && messageCount >= PagingSize.MESSAGE) {
setTimeout(function () { setTimeout(() => {
if (!$("#chatLoader").is(":visible")) { if (!$("#chatLoader").is(":visible")) {
// display loading indicator in chat message // display loading indicator in chat message
let loader = $( let loader = $(
'<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>' '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
); );
$("#messages").append(loader); $("#messages").append(loader);
// get lastest message id and update message from server via native }
const messageID = $($(".chat_message").last()).data("messageid"); ChatRoom.loadNewMessage().then((messages) => {
NativeBridgeDelegate.updatePreMessage(messageID);
let messages = NativeBridgeDataSource.getMessagesByMessageID(messageID);
// prepend message // prepend message
ChatRoom.prependMessage(messages); ChatRoom.prependMessage(messages);
// hide loading indicator // hide loading indicator
loader.remove(); if (typeof loader !== "undefined") {
var afterHeight = $(".room_container").height(); loader.remove();
}
const afterHeight = $(".room_container").height();
window.scroll(0, afterHeight - beforeHeight); window.scroll(0, afterHeight - beforeHeight);
} });
}, 0); }, 0);
} }
}; };
ChatRoom.loadNewMessage = async function () {
return new Promise(function (done) {
// get lastest message id and update message from server via native
const messageID = $($(".chat_message").last()).data("messageid");
NativeBridgeDelegate.updatePreMessage(messageID);
let messages = NativeBridgeDataSource.getMessagesByMessageID(messageID);
done(messages);
});
};
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
console.log("peacekim:: chat-room DOMContentLoaded"); console.log("peacekim:: chat-room DOMContentLoaded");
// 検索イベントバインディング // 検索イベントバインディング
......
public_new/js/views/collaboration/collaboration-add-user.js
...@@ -159,7 +159,7 @@ CollaborationUI.refreshAllGroupForAddUserInCollaboration = function (groupID) { ...@@ -159,7 +159,7 @@ CollaborationUI.refreshAllGroupForAddUserInCollaboration = function (groupID) {
CollaborationUI.appendChildGroups(result.childGroupList); CollaborationUI.appendChildGroups(result.childGroupList);
//該当グループの所属ユーザを表示。 //該当グループの所属ユーザを表示。
CollaborationUI.appendUsers(); CollaborationUI.appendUsers(result.groupUserList);
}; };
CollaborationUI.bindOnClickParentGroup = function (parentGroupID) { CollaborationUI.bindOnClickParentGroup = function (parentGroupID) {
...@@ -183,7 +183,7 @@ CollaborationUI.displayRootGroupAndParentGroupIfNeeded = function ( ...@@ -183,7 +183,7 @@ CollaborationUI.displayRootGroupAndParentGroupIfNeeded = function (
groupID groupID
) { ) {
console.log("peacekim:: CollaborationUI.displayRootGroupAndParentGroupIfNeeded"); console.log("peacekim:: CollaborationUI.displayRootGroupAndParentGroupIfNeeded");
if (typeof rootGroupID !== "undefined" && paramGroupID == 0) { if (typeof rootGroupID !== "undefined" && rootGroupID == 0) {
groupID = rootGroupID; groupID = rootGroupID;
} }
......
public_new/js/views/collaboration/collaboration.js
...@@ -74,14 +74,16 @@ CollaborationUI.bindChangeHostButton = function () { ...@@ -74,14 +74,16 @@ CollaborationUI.bindChangeHostButton = function () {
CollaborationUI.bindCloseButton = function () { CollaborationUI.bindCloseButton = function () {
$(".close_btn").click(function () { $(".close_btn").click(function () {
$("#overlay_add_user_list").addClass("none"); $("#add_user_list").addClass("none");
$(".modal-backdrop").addClass("none");
CollaborationUI.bindDisableScroll(); CollaborationUI.bindDisableScroll();
}); });
}; };
CollaborationUI.bindInviteButton = function () { CollaborationUI.bindInviteButton = function () {
$(".inv_btn").click(function () { $(".inv_btn").click(function () {
$("#overlay_add_user_list").addClass("none"); $("#add_user_list").addClass("none");
}); });
}; };
......
public_new/js/views/collaboration/share-event-listener.js
...@@ -256,18 +256,16 @@ CollaborationFeature.didReceiveCreateRoomResponseMessage = function () { ...@@ -256,18 +256,16 @@ CollaborationFeature.didReceiveCreateRoomResponseMessage = function () {
console.log( console.log(
"peacekim:: CollaborationFeature.didReceiveCreateRoomResponseMessage" "peacekim:: CollaborationFeature.didReceiveCreateRoomResponseMessage"
); );
let coviewInviteMessage =
"" + let coviewInviteMessage = "";
messageSeperator + let collaborationType = CHAT_UTIL.getCollaborationTypeNumber(globalUserInfo.collaborationType);
MessageType.COMMUNICATIONSTART + let meetingID = null
messageSeperator +
CHAT_UTIL.getCollaborationTypeNumber(globalUserInfo.collaborationType);
if (globalUserInfo.collaborationType == COLLABORATION_TYPE.DOCUMENT) { if (globalUserInfo.collaborationType == COLLABORATION_TYPE.DOCUMENT) {
coviewInviteMessage += messageSeperator + globalUserInfo.meetingID; meetingID = globalUserInfo.meetingID;
} }
CHAT_SOCKET.emitCreateMessage(coviewInviteMessage, 0); CHAT_SOCKET.emitCreateCommunicationStart(coviewInviteMessage, collaborationType, meetingID);
}; };
CollaborationFeature.didReceivedJoinRoomInfoResponseMessage = function () { CollaborationFeature.didReceivedJoinRoomInfoResponseMessage = function () {
......
public_new/modal_add_user_list.html
<!-- コンテンツ --> <!-- コンテンツ -->
<div class="modal fade add_user_modal" id="addUserInCollaboration" tabindex="-1" role="dialog" aria-labelledby="addUserInCollaboration" aria-hidden="true"> <div class="modal fade add_user_modal" id="addUserInCollaboration" tabindex="-1" role="dialog"
<div class="modal-dialog modal-dialog-centered modal_collaboration_user" role="document"> aria-labelledby="addUserInCollaboration" aria-hidden="true">
<div class="modal-content" style="position: fixed;width: 100%;height:100%;top: 0px;left:0;"> <div class="modal-dialog-centered modal_collaboration_user" role="document">
<div class="modal-content">
<form id="addUserFormInCollaboration" action="chat_add_user_confirm.html" method="post"> <form id="addUserFormInCollaboration" action="chat_add_user_confirm.html" method="post">
<!-- ユーザー検索 --> <!-- ユーザー検索 -->
<!-- タブ --> <!-- タブ -->
...@@ -9,7 +10,8 @@ ...@@ -9,7 +10,8 @@
<div class="row h-100 align-items-center"> <div class="row h-100 align-items-center">
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<a href="#" class="close_btn" class="close" data-dismiss="modal" aria-label="Close">閉じる</a> <a href="#" class="close_btn" class="close" data-dismiss="modal"
aria-label="Close">閉じる</a>
</div> </div>
</div> </div>
<div class="col-4 p-0"> <div class="col-4 p-0">
...@@ -20,19 +22,23 @@ ...@@ -20,19 +22,23 @@
</div><!-- .row --> </div><!-- .row -->
</nav><!-- nav --> </nav><!-- nav -->
<div class="content tabs"> <div class="content tabs">
<input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked onclick="CollaborationUI.refreshMyGroupForAddUserInCollaboration();"> <input id="tabMyGroupOnAddUserInCollaboration" type="radio" name="tab_item" checked
onclick="CollaborationUI.refreshMyGroupForAddUserInCollaboration();">
<label class="tab_item m-0" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label> <label class="tab_item m-0" for="tabMyGroupOnAddUserInCollaboration">マイグループ</label>
<input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item" onclick="CollaborationUI.refreshAllGroupForAddUserInCollaboration('0');"> <input id="tabAllGroupOnAddUserInCollaboration" type="radio" name="tab_item"
onclick="CollaborationUI.refreshAllGroupForAddUserInCollaboration('0');">
<label class="tab_item m-0" for="tabAllGroupOnAddUserInCollaboration">全グループ</label> <label class="tab_item m-0" for="tabAllGroupOnAddUserInCollaboration">全グループ</label>
<div class="tab_content" id="tab1_content" style="height: 100vh; overflow:scroll;"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category" onclick="CollaborationUI.toggleCategory(this);"><div class="category_name"><span>お気に入り</span></div></div> <div class="category" onclick="CollaborationUI.toggleCategory(this);">
<div class="category_name"><span>お気に入り</span></div>
</div>
<div id="favoriteListForAddUserInCollaboration"></div> <div id="favoriteListForAddUserInCollaboration"></div>
<div id="myGroupListForAddUserInCollaboration"></div> <div id="myGroupListForAddUserInCollaboration"></div>
</div> </div>
</div> </div>
<div class="tab_content" id="tab2_content" style="height: 100vh; overflow:scroll;"> <div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathAreaForAddUserInCollaboration"></div> <div class="breadcrumb" id="groupPathAreaForAddUserInCollaboration"></div>
<div class="chat_list"> <div class="chat_list">
<!-- 全グループ --> <!-- 全グループ -->
...@@ -80,7 +86,7 @@ ...@@ -80,7 +86,7 @@
</div> </div>
</div> </div>
<!-- ルーム解説ボタン --> <!-- ルーム解説ボタン -->
<div class="add_user_confirm_btn content" id="addUserConfirmBtnInCollaboration" style="position: fixed;"> <div class="add_user_confirm_btn content" id="addUserConfirmBtnInCollaboration">
<button type="button" name="button" id="buttonAddUser" style="bottom: 0; width: 100%;"> <button type="button" name="button" id="buttonAddUser" style="bottom: 0; width: 100%;">
確認<br> 確認<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button> <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
...@@ -88,4 +94,4 @@ ...@@ -88,4 +94,4 @@
</form> </form>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment