Skip to content

C
chat_webview
Commit fbb06052 by Lee Munkyeong
Options

写真協業実装

parent 334ec8ab
Showing with 295 additions and 199 deletions
public_new/collaboration_picture.html
...@@ -38,11 +38,21 @@ ...@@ -38,11 +38,21 @@
<!-- 拡大縮小機能 --> <!-- 拡大縮小機能 -->
<div id="zoom"></div> <div id="zoom"></div>
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="collabo_main"> <main id="collabo_main" class="none">
<div class="document_wrap"> <div class="document_wrap">
<div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
</div>
</div> </div>
</main> </main>
<div class="coview_share_photo_select_bubble none">
<button id="coviewSharePhotoCamera" class="coview_share_photo_select_bubble_in_button cam">
</button>
<BR>
<button id="coviewSharePhotoGalary" class="coview_share_photo_select_bubble_in_button gal">
</button>
</div>
<!-- ユーザー追加オーバーレイ --> <!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none"> <div id="overlay_add_user_list" class="none">
<nav> <nav>
...@@ -99,7 +109,7 @@ ...@@ -99,7 +109,7 @@
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue"> <div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン"> <img src="icon/icon_collabo_pen_white.png" alt="ペン">
</div> </div>
</a> </a>
...@@ -113,7 +123,7 @@ ...@@ -113,7 +123,7 @@
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue"> <div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除"> <img src="icon/icon_collabo_delete_white.png" alt="削除">
</div> </div>
</a> </a>
...@@ -139,27 +149,64 @@ ...@@ -139,27 +149,64 @@
</footer> </footer>
<!-- フッター --> <!-- フッター -->
<div id="footer_collabo"></div> <div id="footer_collabo"></div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/constant.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
<script src="./js/common.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/chat-websocket.js"></script>
<script src="https://app.coview.co.kr:7443/coview_api.js"></script> <script src="https://app.coview.co.kr:7443/coview_api.js"></script>
<script src="./js/share.js"></script> <script src="./js/share.js"></script>
<script> <script>
$("#footer_collabo").load("./footer_collabo.html"); $("#footer_collabo").load("./footer_collabo.html");
$("#modal_collabo_host_request").load("./modal_collabo_host_request.html"); $("#modal_collabo_host_request").load("./modal_collabo_host_request.html");
$("#modal_collabo_change_host").load("./modal_collabo_change_host.html"); $("#modal_collabo_change_host").load("./modal_collabo_change_host.html");
$("#modal_collabo_profile2").load("./modal_collabo_profile2.html"); $("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
$("#modal_collabo_profile").load("./modal_collabo_profile.html"); $("#modal_collabo_profile").load("./modal_collabo_profile.html");
$("#modal_collabo_capture").load("./modal_collabo_capture.html"); $("#modal_collabo_capture").load("./modal_collabo_capture.html");
$("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html"); $("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html");
$("#collaboration_video_overlay_menu").load("./collaboration_video_overlay_menu.html"); $("#collaboration_video_overlay_menu").load("./collaboration_video_overlay_menu.html");
$("#zoom").load("./zoom.html"); $("#zoom").load("./zoom.html");
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
if (typeof(android) != "undefined") {
android.getLoginParameter();
android.getGlobalParameter();
} else {
}
async function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
globalUserInfo.coWorkType = collaborationTypeKey.CAMERA;
CHAT_SOCKET.connectSocket();
socket.emit('join', CHAT.globalLoginParameter, function() {
});
};
</script> </script>
</body> </body>
......
public_new/css/share.css
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
.coview_share_body{ .coview_share_body{
width: 100%; width: 100%;
height: calc(100vh - 58px); height: 100%;
} }
.coview_share_dropdown_bar{ .coview_share_dropdown_bar{
...@@ -144,3 +144,7 @@ ...@@ -144,3 +144,7 @@
border: none; border: none;
border-radius: 5px; border-radius: 5px;
} }
.coview_on_screen_btn_area {
display: none; !important;
}
\ No newline at end of file
public_new/footer_collabo.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_gray"> <div class="img_wrap bg_red" id="micBtn">
<img src="icon/icon_voice_gray.png" alt="音声"> <img src="icon/icon_voice_gray.png" alt="音声">
</div> </div>
</a> </a>
......
public_new/js/chat-ui.js
...@@ -1177,6 +1177,11 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1177,6 +1177,11 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
, function(text) { , function(text) {
systemMessageTemplate = text; systemMessageTemplate = text;
}); });
var openCollaborationMessageTemplate;
$.get({ url: "./template/template_open_collaboration_message.html", async: false }
, function(text) {
openCollaborationMessageTemplate = text;
});
var topUserListTemplate; var topUserListTemplate;
$.get({ url: "./template/template_chatroom_user_list.html", async: false } $.get({ url: "./template/template_chatroom_user_list.html", async: false }
, function(text) { , function(text) {
...@@ -1214,6 +1219,9 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1214,6 +1219,9 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
if (message.messageType == messageType.SYSTEM) { if (message.messageType == messageType.SYSTEM) {
template = systemMessageTemplate; template = systemMessageTemplate;
} }
if (message.messageType == messageType.COMMUNICATIONSTART) {
template = openCollaborationMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.insertDate); let messageTime = CHAT_UTIL.formatDate(message.insertDate);
// ユーザの様式を読み込む // ユーザの様式を読み込む
......
public_new/js/chat.js
...@@ -244,7 +244,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam ...@@ -244,7 +244,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
if (!languageCode) { if (!languageCode) {
languageCode = "en" languageCode = "en"
} }
CHAT_UI.htmlElementTextInitialize(languageCode);
// fermi coview share // fermi coview share
globalUserInfo.sid = sid; globalUserInfo.sid = sid;
...@@ -254,6 +253,7 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam ...@@ -254,6 +253,7 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
globalUserInfo.roomName = roomName; globalUserInfo.roomName = roomName;
globalUserInfo.languageCode = languageCode; globalUserInfo.languageCode = languageCode;
CHAT_UI.htmlElementTextInitialize(languageCode);
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
} }
......
public_new/js/collaboration.js
...@@ -85,4 +85,30 @@ $(function () { ...@@ -85,4 +85,30 @@ $(function () {
$("#add_user_list").html(data); $("#add_user_list").html(data);
}); });
}); });
$('#penBtn').click(function () {
$('#coviewPenCtrBtn').click();
if ($('#penBtn').hasClass('bg_red')) {
$('#penBtn').removeClass('bg_red');
$('#penBtn').addClass('bg_blue');
} else {
$('#penBtn').addClass('bg_red');
$('#penBtn').removeClass('bg_blue');
}
})
$('#eraserBtn').click(function () {
$('#coviewEraserCtrBtn').click();
})
$('#micBtn').click(function () {
$('#coviewMicCtrBtn').click();
if ($('#micBtn').hasClass('bg_red')) {
$('#micBtn').removeClass('bg_red');
$('#micBtn').addClass('bg_blue');
} else {
$('#micBtn').addClass('bg_red');
$('#micBtn').removeClass('bg_blue');
}
})
}); });
public_new/js/constant.js
...@@ -14,7 +14,8 @@ const messageType = { ...@@ -14,7 +14,8 @@ const messageType = {
IMAGE : 1 , IMAGE : 1 ,
VIDEO : 2 , VIDEO : 2 ,
SYSTEM : 3 , SYSTEM : 3 ,
COMMUNICATION : 4 COMMUNICATIONSTART : 4,
COMMUNICATIONEND : 5
} }
const userAPICmd = { const userAPICmd = {
...@@ -36,5 +37,11 @@ const nameCardAreaId = { ...@@ -36,5 +37,11 @@ const nameCardAreaId = {
USER : "userNamecard" USER : "userNamecard"
} }
const collaborationTypeKey = {
CAMERA : "camera",
AUDIO : "audio",
VIDEO : "video"
}
const messageSeperator = "<::split>"; const messageSeperator = "<::split>";
const dataMessageScheme = "::NOT_MESSAGE"; const dataMessageScheme = "::NOT_MESSAGE";
public_new/js/share.js
...@@ -2,189 +2,191 @@ ...@@ -2,189 +2,191 @@
/* Functions */ /* Functions */
/* --------------------------------------------------- */ /* --------------------------------------------------- */
let coview_api = new CoviewApi(); let coview_api = new CoviewApi();
$(function(){ $(function(){
var coviewApiActive = coview_api.Init( var coviewApiActive = coview_api.Init(
{ {
testSTRParam : "param1", testSTRParam : "param1",
testNUMParam : 77, testNUMParam : 77,
testBOOLParam : false, testBOOLParam : false,
coview_api_srv_addr: "https://app.coview.co.kr:7443", coview_api_srv_addr: "https://app.coview.co.kr:7443",
coview_wrap_id : "coviewShare", coview_wrap_id : "coviewShare",
} coview_api_key: "8dda7092c5820d663"
);
// special button IN Chat ui
$("#coviewShareMainBtn").on("click", function(e){
e.stopPropagation();
if($(".coview_share_dropdown_bar").is(':visible') == true){
Coview_shareDropdownHide();
if($(".coview_share_photo_select_bubble").is(':visible') == true){
$(".coview_share_photo_select_bubble").slideUp();
} }
} );
else{
$(".coview_share_dropdown_bar").slideDown(); // special button IN Chat ui
} $("#coviewShareMainBtn").on("click", function(e){
e.stopPropagation();
}); if($(".coview_share_dropdown_bar").is(':visible') == true){
Coview_shareDropdownHide();
$("#coviewShareCloseButton").on("click", function(e){
coview_api.LeaveRoom(); if($(".coview_share_photo_select_bubble").is(':visible') == true){
$(".coview_share_area").hide(); $(".coview_share_photo_select_bubble").slideUp();
}
}); }
else{
$("body").on("click", function(){ $(".coview_share_dropdown_bar").slideDown();
Coview_shareDropdownHide(); }
});
});
$(document).on("click", ".coview_share_request", function(){
console.log("globalUserInfo", globalUserInfo); $("#coviewShareCloseButton").on("click", function(e){
if($(this).hasClass("video") == true){ coview_api.LeaveRoom();
globalUserInfo.coWorkType = "video"; $(".coview_share_area").hide();
$(".coview_share_title_name").text("LIVE");
} });
else{
globalUserInfo.coWorkType = "image"; $("body").on("click", function(){
$(".coview_share_title_name").text("IMAGE"); Coview_shareDropdownHide();
} });
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); $(document).on("click", ".coview_share_request", function(){
Coview_moveToVideoShareArea(); console.log("globalUserInfo", globalUserInfo);
if($(this).hasClass("video") == true){
globalUserInfo.coWorkType = "video";
}); $(".coview_share_title_name").text("LIVE");
}
// $('#coviewShareRequestVideo').bind('click', function() else{
// console.log("globalUserInfo", globalUserInfo); globalUserInfo.coWorkType = "image";
// globalUserInfo.coWorkType = "video"; $(".coview_share_title_name").text("IMAGE");
// coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); }
// });
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
/* --------------------------------------------------- */ Coview_moveToVideoShareArea();
/* Video, photo, chat, doc */
/* --------------------------------------------------- */
$("#coviewShareChat").on("click", function(){ });
console.log("ON click coviewShareChat");
}); // $('#coviewShareRequestVideo').bind('click', function()
// console.log("globalUserInfo", globalUserInfo);
$("#coviewSharePhoto").on("click", function(e){ // globalUserInfo.coWorkType = "video";
e.stopPropagation(); // coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
console.log("ON click coviewSharePhoto"); // });
if($(".coview_share_photo_select_bubble").is(':visible') == true){ /* --------------------------------------------------- */
$(".coview_share_photo_select_bubble").slideUp(); /* Video, photo, chat, doc */
} /* --------------------------------------------------- */
else{ $("#coviewShareChat").on("click", function(){
$(".coview_share_photo_select_bubble").slideDown(); console.log("ON click coviewShareChat");
} });
});
$("#coviewSharePhoto").on("click", function(e){
e.stopPropagation();
console.log("ON click coviewSharePhoto");
$("#coviewSharePhotoCamera").on("click", function(){ if($(".coview_share_photo_select_bubble").is(':visible') == true){
$(".coview_share_photo_select_bubble").hide(); $(".coview_share_photo_select_bubble").slideUp();
globalUserInfo.coWorkType = "camera"; }
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); else{
Coview_moveToVideoShareArea(); $(".coview_share_photo_select_bubble").slideDown();
}
$(".coview_share_title_name").text("カメラ"); });
});
$("#coviewSharePhotoGalary").on("click", function(){
$(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "galary";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); $("#coviewSharePhotoCamera").on("click", function(){
Coview_moveToVideoShareArea(); $(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "camera";
$(".coview_share_title_name").text("ライブラリ"); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
}); Coview_moveToVideoShareArea();
$("#coviewShareLive").on("click", function(){ $(".coview_share_title_name").text("カメラ");
console.log("ON click coviewShareLive"); });
globalUserInfo.coWorkType = "video"; $("#coviewSharePhotoGalary").on("click", function(){
console.log("globalUserInfo", globalUserInfo); $(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "galary";
// var chars = "0123456789"; coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
// var string_length = 6; Coview_moveToVideoShareArea();
// var randomstring = '';
// for (var i=0; i<string_length; i++) { $(".coview_share_title_name").text("ライブラリ");
// var rnum = Math.floor(Math.random() * chars.length); });
// randomstring += chars.substring(rnum,rnum+1);
// } $("#coviewShareLive").on("click", function(){
// coview_api.CreateRoom(randomstring, globalUserInfo.coWorkType); console.log("ON click coviewShareLive");
globalUserInfo.coWorkType = "video";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); console.log("globalUserInfo", globalUserInfo);
Coview_moveToVideoShareArea();
// var chars = "0123456789";
$(".coview_share_title_name").text("LIVE"); // var string_length = 6;
}); // var randomstring = '';
// for (var i=0; i<string_length; i++) {
$("#coviewShareDoc").on("click", function(){ // var rnum = Math.floor(Math.random() * chars.length);
console.log("ON click coviewShareDoc"); // randomstring += chars.substring(rnum,rnum+1);
alert("INTO a document share mode (only audio)"); // }
globalUserInfo.coWorkType = "audio"; // coview_api.CreateRoom(randomstring, globalUserInfo.coWorkType);
});
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
coview_api.addEventListener ("ready", function () { Coview_moveToVideoShareArea();
console.log("=============> READY : ready for coview api");
coview_api.Login(globalUserInfo.loginId); $(".coview_share_title_name").text("LIVE");
}); });
coview_api.addEventListener ("start", function () { $("#coviewShareDoc").on("click", function(){
console.log("=============> START : share start"); console.log("ON click coviewShareDoc");
$("#loadingIndicator").removeClass("full_active"); alert("INTO a document share mode (only audio)");
}); globalUserInfo.coWorkType = "audio";
});
coview_api.addEventListener ("destroy", function () {
console.log("=============> START : share start"); coview_api.addEventListener ("ready", function () {
coview_api.LeaveRoom(); console.log("=============> READY : ready for coview api");
$(".coview_share_area").hide(); coview_api.Login(globalUserInfo.loginId);
$("#loadingIndicator").removeClass("full_active"); });
});
coview_api.addEventListener ("start", function () {
coview_api.addEventListener ("message", async function (event, json) { console.log("=============> START : share start");
console.log("+++ addEventListener", json); $("#loadingIndicator").removeClass("full_active");
console.log("processMessage api = ", json.api); });
switch (json.api){ coview_api.addEventListener ("destroy", function () {
case "LoginResponse": console.log("=============> START : share start");
break; coview_api.LeaveRoom();
case "CreateRoomResponse": $(".coview_share_area").hide();
if(json.resultCode == 200){ $("#loadingIndicator").removeClass("full_active");
var coviewInviteMessage = "coviewsharerequest:" + globalUserInfo.coWorkType; });
socket.emit('createMessage', {
text: coviewInviteMessage coview_api.addEventListener ("message", async function (event, json) {
}, 0); console.log("+++ addEventListener", json);
} console.log("processMessage api = ", json.api);
else{
switch (json.api){
} case "LoginResponse":
break; if(globalUserInfo.coWorkType = collaborationTypeKey.CAMERA) {
globalUserInfo.coWorkType = "camera";
case "joinRoomInfoResponse": coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
if(json.resultCode == 200){ Coview_moveToVideoShareArea();
} }
else{
// alert(json.resultMsg + "(" + json.resultCode + ")" ); break;
alert("Not exist sharing call (" + json.resultCode + ")\nPlease using share menu."); case "CreateRoomResponse":
coview_api.LeaveRoom(); if(json.resultCode == 200){
$(".coview_share_area").hide(); var coviewInviteMessage = "coviewsharerequest:" + globalUserInfo.coWorkType;
$("#loadingIndicator").removeClass("full_active"); socket.emit('createMessage', {
} text: coviewInviteMessage + messageSeperator + messageType.COMMUNICATIONSTART
break; }, 0);
}
default: else{
// console.log('Unrecognized api', json);
break; }
} break;
});
case "joinRoomInfoResponse":
if(json.resultCode == 200){
}
else{
// alert(json.resultMsg + "(" + json.resultCode + ")" );
alert("Not exist sharing call (" + json.resultCode + ")\nPlease using share menu.");
coview_api.LeaveRoom();
$(".coview_share_area").hide();
$("#loadingIndicator").removeClass("full_active");
}
break;
default:
// console.log('Unrecognized api', json);
break;
}
});
}); });
function Coview_shareDropdownHide(){ function Coview_shareDropdownHide(){
...@@ -195,4 +197,5 @@ function Coview_shareDropdownHide(){ ...@@ -195,4 +197,5 @@ function Coview_shareDropdownHide(){
function Coview_moveToVideoShareArea(){ function Coview_moveToVideoShareArea(){
$("#loadingIndicator").addClass("full_active"); $("#loadingIndicator").addClass("full_active");
$(".coview_share_area").show(); $(".coview_share_area").show();
$('#collabo_main').removeClass('none');
} }
public_new/template/template_open_collaboration_message.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="collabo_area"> <div class="collabo_area">
<div class="collabo_desc"> <div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row"> <div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名ルーム名ルーム名</span> <span>{{roomName}}</span>
<span>の通話</span> <span>の通話</span>
</div> </div>
<div class="d-flex flex-row justify-content-between"> <div class="d-flex flex-row justify-content-between">
......
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