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 @@
<!-- 拡大縮小機能 -->
<div id="zoom"></div>
<!-- コンテンツ -->
<main id="collabo_main">
<main id="collabo_main" class="none">
<div class="document_wrap">
<div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
</div>
</div>
</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">
<nav>
......@@ -99,7 +109,7 @@
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<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="ペン">
</div>
</a>
......@@ -113,7 +123,7 @@
</div>
<div class="footer_menu_item">
<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="削除">
</div>
</a>
......@@ -139,27 +149,64 @@
</footer>
<!-- フッター -->
<div id="footer_collabo"></div>
<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/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/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/constant.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="./js/share.js"></script>
<script>
$("#footer_collabo").load("./footer_collabo.html");
$("#modal_collabo_host_request").load("./modal_collabo_host_request.html");
$("#modal_collabo_change_host").load("./modal_collabo_change_host.html");
$("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
$("#modal_collabo_profile").load("./modal_collabo_profile.html");
$("#modal_collabo_capture").load("./modal_collabo_capture.html");
$("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html");
$("#collaboration_video_overlay_menu").load("./collaboration_video_overlay_menu.html");
$("#zoom").load("./zoom.html");
$("#footer_collabo").load("./footer_collabo.html");
$("#modal_collabo_host_request").load("./modal_collabo_host_request.html");
$("#modal_collabo_change_host").load("./modal_collabo_change_host.html");
$("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
$("#modal_collabo_profile").load("./modal_collabo_profile.html");
$("#modal_collabo_capture").load("./modal_collabo_capture.html");
$("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html");
$("#collaboration_video_overlay_menu").load("./collaboration_video_overlay_menu.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>
</body>
......
public_new/css/share.css
......@@ -21,7 +21,7 @@
}
.coview_share_body{
width: 100%;
height: calc(100vh - 58px);
height: 100%;
}
.coview_share_dropdown_bar{
......@@ -144,3 +144,7 @@
border: none;
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 @@
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
<a href="#">
<div class="img_wrap bg_gray">
<div class="img_wrap bg_red" id="micBtn">
<img src="icon/icon_voice_gray.png" alt="音声">
</div>
</a>
......
public_new/js/chat-ui.js
......@@ -1177,6 +1177,11 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
, function(text) {
systemMessageTemplate = text;
});
var openCollaborationMessageTemplate;
$.get({ url: "./template/template_open_collaboration_message.html", async: false }
, function(text) {
openCollaborationMessageTemplate = text;
});
var topUserListTemplate;
$.get({ url: "./template/template_chatroom_user_list.html", async: false }
, function(text) {
......@@ -1214,6 +1219,9 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
if (message.messageType == messageType.SYSTEM) {
template = systemMessageTemplate;
}
if (message.messageType == messageType.COMMUNICATIONSTART) {
template = openCollaborationMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.insertDate);
// ユーザの様式を読み込む
......
public_new/js/chat.js
......@@ -244,7 +244,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
if (!languageCode) {
languageCode = "en"
}
CHAT_UI.htmlElementTextInitialize(languageCode);
// fermi coview share
globalUserInfo.sid = sid;
......@@ -254,6 +253,7 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
globalUserInfo.roomName = roomName;
globalUserInfo.languageCode = languageCode;
CHAT_UI.htmlElementTextInitialize(languageCode);
CHAT_UI.dismissLoadingIndicator();
}
......
public_new/js/collaboration.js
......@@ -85,4 +85,30 @@ $(function () {
$("#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 = {
IMAGE : 1 ,
VIDEO : 2 ,
SYSTEM : 3 ,
COMMUNICATION : 4
COMMUNICATIONSTART : 4,
COMMUNICATIONEND : 5
}
const userAPICmd = {
......@@ -36,5 +37,11 @@ const nameCardAreaId = {
USER : "userNamecard"
}
const collaborationTypeKey = {
CAMERA : "camera",
AUDIO : "audio",
VIDEO : "video"
}
const messageSeperator = "<::split>";
const dataMessageScheme = "::NOT_MESSAGE";
public_new/js/share.js
......@@ -2,189 +2,191 @@
/* Functions */
/* --------------------------------------------------- */
let coview_api = new CoviewApi();
$(function(){
var coviewApiActive = coview_api.Init(
{
testSTRParam : "param1",
testNUMParam : 77,
testBOOLParam : false,
coview_api_srv_addr: "https://app.coview.co.kr:7443",
coview_wrap_id : "coviewShare",
}
);
// 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();
{
testSTRParam : "param1",
testNUMParam : 77,
testBOOLParam : false,
coview_api_srv_addr: "https://app.coview.co.kr:7443",
coview_wrap_id : "coviewShare",
coview_api_key: "8dda7092c5820d663"
}
}
else{
$(".coview_share_dropdown_bar").slideDown();
}
});
$("#coviewShareCloseButton").on("click", function(e){
coview_api.LeaveRoom();
$(".coview_share_area").hide();
});
$("body").on("click", function(){
Coview_shareDropdownHide();
});
$(document).on("click", ".coview_share_request", function(){
console.log("globalUserInfo", globalUserInfo);
if($(this).hasClass("video") == true){
globalUserInfo.coWorkType = "video";
$(".coview_share_title_name").text("LIVE");
}
else{
globalUserInfo.coWorkType = "image";
$(".coview_share_title_name").text("IMAGE");
}
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// $('#coviewShareRequestVideo').bind('click', function()
// console.log("globalUserInfo", globalUserInfo);
// globalUserInfo.coWorkType = "video";
// coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
// });
/* --------------------------------------------------- */
/* Video, photo, chat, doc */
/* --------------------------------------------------- */
$("#coviewShareChat").on("click", function(){
console.log("ON click coviewShareChat");
});
$("#coviewSharePhoto").on("click", function(e){
e.stopPropagation();
console.log("ON click coviewSharePhoto");
if($(".coview_share_photo_select_bubble").is(':visible') == true){
$(".coview_share_photo_select_bubble").slideUp();
}
else{
$(".coview_share_photo_select_bubble").slideDown();
}
});
$("#coviewSharePhotoCamera").on("click", function(){
$(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "camera";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".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);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("ライブラリ");
});
$("#coviewShareLive").on("click", function(){
console.log("ON click coviewShareLive");
globalUserInfo.coWorkType = "video";
console.log("globalUserInfo", globalUserInfo);
// var chars = "0123456789";
// var string_length = 6;
// var randomstring = '';
// for (var i=0; i<string_length; i++) {
// var rnum = Math.floor(Math.random() * chars.length);
// randomstring += chars.substring(rnum,rnum+1);
// }
// coview_api.CreateRoom(randomstring, globalUserInfo.coWorkType);
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("LIVE");
});
$("#coviewShareDoc").on("click", function(){
console.log("ON click coviewShareDoc");
alert("INTO a document share mode (only audio)");
globalUserInfo.coWorkType = "audio";
});
coview_api.addEventListener ("ready", function () {
console.log("=============> READY : ready for coview api");
coview_api.Login(globalUserInfo.loginId);
});
coview_api.addEventListener ("start", function () {
console.log("=============> START : share start");
$("#loadingIndicator").removeClass("full_active");
});
coview_api.addEventListener ("destroy", function () {
console.log("=============> START : share start");
coview_api.LeaveRoom();
$(".coview_share_area").hide();
$("#loadingIndicator").removeClass("full_active");
});
coview_api.addEventListener ("message", async function (event, json) {
console.log("+++ addEventListener", json);
console.log("processMessage api = ", json.api);
switch (json.api){
case "LoginResponse":
break;
case "CreateRoomResponse":
if(json.resultCode == 200){
var coviewInviteMessage = "coviewsharerequest:" + globalUserInfo.coWorkType;
socket.emit('createMessage', {
text: coviewInviteMessage
}, 0);
}
else{
}
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;
}
});
);
// 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();
}
});
$("#coviewShareCloseButton").on("click", function(e){
coview_api.LeaveRoom();
$(".coview_share_area").hide();
});
$("body").on("click", function(){
Coview_shareDropdownHide();
});
$(document).on("click", ".coview_share_request", function(){
console.log("globalUserInfo", globalUserInfo);
if($(this).hasClass("video") == true){
globalUserInfo.coWorkType = "video";
$(".coview_share_title_name").text("LIVE");
}
else{
globalUserInfo.coWorkType = "image";
$(".coview_share_title_name").text("IMAGE");
}
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// $('#coviewShareRequestVideo').bind('click', function()
// console.log("globalUserInfo", globalUserInfo);
// globalUserInfo.coWorkType = "video";
// coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
// });
/* --------------------------------------------------- */
/* Video, photo, chat, doc */
/* --------------------------------------------------- */
$("#coviewShareChat").on("click", function(){
console.log("ON click coviewShareChat");
});
$("#coviewSharePhoto").on("click", function(e){
e.stopPropagation();
console.log("ON click coviewSharePhoto");
if($(".coview_share_photo_select_bubble").is(':visible') == true){
$(".coview_share_photo_select_bubble").slideUp();
}
else{
$(".coview_share_photo_select_bubble").slideDown();
}
});
$("#coviewSharePhotoCamera").on("click", function(){
$(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "camera";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".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);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("ライブラリ");
});
$("#coviewShareLive").on("click", function(){
console.log("ON click coviewShareLive");
globalUserInfo.coWorkType = "video";
console.log("globalUserInfo", globalUserInfo);
// var chars = "0123456789";
// var string_length = 6;
// var randomstring = '';
// for (var i=0; i<string_length; i++) {
// var rnum = Math.floor(Math.random() * chars.length);
// randomstring += chars.substring(rnum,rnum+1);
// }
// coview_api.CreateRoom(randomstring, globalUserInfo.coWorkType);
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("LIVE");
});
$("#coviewShareDoc").on("click", function(){
console.log("ON click coviewShareDoc");
alert("INTO a document share mode (only audio)");
globalUserInfo.coWorkType = "audio";
});
coview_api.addEventListener ("ready", function () {
console.log("=============> READY : ready for coview api");
coview_api.Login(globalUserInfo.loginId);
});
coview_api.addEventListener ("start", function () {
console.log("=============> START : share start");
$("#loadingIndicator").removeClass("full_active");
});
coview_api.addEventListener ("destroy", function () {
console.log("=============> START : share start");
coview_api.LeaveRoom();
$(".coview_share_area").hide();
$("#loadingIndicator").removeClass("full_active");
});
coview_api.addEventListener ("message", async function (event, json) {
console.log("+++ addEventListener", json);
console.log("processMessage api = ", json.api);
switch (json.api){
case "LoginResponse":
if(globalUserInfo.coWorkType = collaborationTypeKey.CAMERA) {
globalUserInfo.coWorkType = "camera";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
}
break;
case "CreateRoomResponse":
if(json.resultCode == 200){
var coviewInviteMessage = "coviewsharerequest:" + globalUserInfo.coWorkType;
socket.emit('createMessage', {
text: coviewInviteMessage + messageSeperator + messageType.COMMUNICATIONSTART
}, 0);
}
else{
}
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(){
......@@ -195,4 +197,5 @@ function Coview_shareDropdownHide(){
function Coview_moveToVideoShareArea(){
$("#loadingIndicator").addClass("full_active");
$(".coview_share_area").show();
$('#collabo_main').removeClass('none');
}
public_new/template/template_open_collaboration_message.html
......@@ -7,7 +7,7 @@
<div class="collabo_area">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名ルーム名ルーム名</span>
<span>{{roomName}}</span>
<span>の通話</span>
</div>
<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