Skip to content

C
chat_webview
Commit dd28d628 by Lee Munkyeong
Options

ボード協業実装

parent 4f062177
Showing with 149 additions and 69 deletions
public_new/chat_room.html
......@@ -125,7 +125,7 @@
</div>
<!--リリース後開発予定-->
<div class="footer_item">
<img src="icon/icon_whiteboard_gray.png" alt="ホワイトボードアイコン" onclick="alert(getLocalizedString('notify_not_released'));">
<img src="icon/icon_whiteboard_gray.png" alt="ホワイトボードアイコン" onclick="javascript:CHAT_UI.startCollaboration(collaborationType.BOARD);">
<p>ボード</p>
</div>
</div>
......
public_new/collaboration_video.html
......@@ -100,7 +100,7 @@
</div>
</div>
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item none">
<div class="footer_menu_item">
<!-- <a href="#" data-toggle="modal" data-target="#captyaModal">-->
<a href="#">
<div class="img_wrap wide bg_blue" id="captureBtn">
......
public_new/collaboration_whiteboard.html
......@@ -14,6 +14,7 @@
<link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/share.css">
</head>
<body>
......@@ -21,81 +22,55 @@
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
通話中
<span>15:20</span>
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn"></button>
<button type="button" name="button" class="btn menu_btn"></button>
<button type="button" name="button" class="btn add_user_btn none"></button>
<!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
</div>
</div>
</div>
</header><!-- header -->
<!-- 拡大縮小機能 -->
<!--#include virtual="zoom.html" -->
<div id="zoom"></div>
<!-- コンテンツ -->
<main id="collabo_main">
<div class="whiteboard_wrap">
<main id="collabo_main" class="none white_board">
<div class="document_wrap">
<div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
</div>
</div>
</main>
<!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none">
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<a href="#" class="close_btn">閉じる</a>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ユーザー選択</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="inv_btn">招待</a>
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- ユーザー検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="ユーザー検索" maxlength="30">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- ユーザーリスト -->
<div id="add_user_list"></div>
<div class="coview_share_photo_select_bubble none">
<button id="coviewSharePhotoCamera" class="coview_share_photo_select_bubble_in_button cam">
</button>
<BR>
<button id="coviewSharePhotoGallery" class="coview_share_photo_select_bubble_in_button gal">
</button>
</div>
<!-- オーバーレイ　メニュー -->
<!--#include virtual="collaboration_video_overlay_menu.html" -->
<!-- ユーザー追加オーバーレイ -->
<div id="add_user_list"></div>
<div id="modal_add_user_confirm" ></div>
<!-- オーバーレイ　メニュー -->
<div id="collaboration_picture_overlay_menu"></div>
<!-- オーバーレイ　ユーザーリスト -->
<div id="overlay_user_list" class="overlay noscroll">
<!--#include virtual="collabotarion_overlay_user_list.html" -->
<div id="collaboration_overlay_user_list"></div>
</div>
<!-- キャプチャ　モーダル -->
<!--#include virtual="modal_collabo_capture.html" -->
<div id="modal_collabo_capture"></div>
<!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" -->
<!--#include virtual="modal_collabo_profile2.html" -->
<div id="userProfileModalInCollaboration"></div>
<div id="modal_collabo_profile2"></div>
<!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" -->
<div id="modal_collabo_change_host"></div>
<!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" -->
<div id="modal_collabo_host_request"></div>
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
......@@ -104,12 +79,12 @@
<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>
</div>
<div class="footer_menu_item">
<div class="footer_menu_item none">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
......@@ -118,30 +93,107 @@
</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>
</div>
</div>
<div class="d-flex align-items-center h-100">
<div class="d-flex align-items-center h-100 none">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む">
</div>
</a>
</div>
</div>
</div>
</footer>
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<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://livetaskyell.abookcloud.com/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_capture").load("./modal_collabo_capture.html");
$("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
$("#collaboration_picture_overlay_menu").load("./collaboration_picture_overlay_menu.html");
$("#add_user_list").load("./modal_add_user_list.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;
let collaborationJoinFlg = 0;
let roomType;
if (typeof(android) != "undefined") {
android.getLoginParameter();
android.getGlobalParameter();
roomType = android.getRoomType();
} else {
webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
webkit.messageHandlers.getGlobalParameter.postMessage({});
roomType = CHAT_DB.getRoomType();
}
if (roomType == chatRoomType.DM) {
$('.add_user_btn').removeClass('none');
}
async function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
if (CHAT_UTIL.isIOS()) {
collaborationJoinFlg = CHAT_DB.getCollaborationJoinFlg();
} else if (CHAT_UTIL.isAndroid()) {
collaborationJoinFlg = android.getCollaborationJoinFlg();
}
globalUserInfo.coWorkType = collaborationTypeKey.BOARD;
if (collaborationJoinFlg != '2') {
CHAT_SOCKET.connectSocket();
socket.emit('join', CHAT.globalLoginParameter, function() {
});
}
};
</script>
</body>
</html>
\ No newline at end of file
public_new/css/share.css
......@@ -2,6 +2,9 @@
padding-top: 9px;
}
.white_board #canvasRemote {
background-color: white !important;
}
.coview_share_area{
display: none;
......
public_new/footer_collabo.html
......@@ -8,7 +8,7 @@
</div>
</a>
</div>
<div class="footer_item none">
<div class="footer_item">
<a href="#">
<div class="img_wrap bg_gray" id="recordBtn">
<img src="icon/icon_record.png" alt="録音">
......
public_new/js/constant.js
......@@ -41,14 +41,16 @@ const collaborationTypeKey = {
AUDIO : "audio",
CAMERA : "camera",
VIDEO : "video" ,
DOCUMENT : "document"
DOCUMENT : "document",
BOARD : "board"
}
const collaborationType = {
AUDIO : 0,
CAMERA : 2,
VIDEO : 3,
DOCUMENT : 4
DOCUMENT : 4,
BOARD : 5
}
const makeRoomFlg = {
......
public_new/js/share.js
......@@ -3,8 +3,9 @@
/* --------------------------------------------------- */
let coview_api = new CoviewApi();
var isDocument = false;
var isBoard = false;
let isLeaved = false;
var backgroundFileName;
$(function () {
var coviewApiActive = coview_api.Init({
testSTRParam: "param1",
......@@ -111,12 +112,6 @@ $(function () {
$(".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_addLoginId(globalUserInfo.loginId);
......@@ -168,6 +163,10 @@ $(function () {
isDocument = true;
globalUserInfo.coWorkType = collaborationTypeKey.AUDIO;
}
if (globalUserInfo.coWorkType == collaborationTypeKey.BOARD) {
isBoard = true;
globalUserInfo.coWorkType = collaborationTypeKey.CAMERA;
}
if (collaborationJoinFlg == "1") {
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
if (isDocument) {
......@@ -193,6 +192,7 @@ $(function () {
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
}
Coview_moveToVideoShareArea();
break;
case "CreateRoomResponse":
if (json.resultCode == 200) {
......@@ -206,6 +206,13 @@ $(function () {
CHAT_UTIL.getCollaborationType(collaborationTypeKey.DOCUMENT) +
messageSeperator +
meetingId;
} else if (isBoard) {
coviewInviteMessage =
"" +
messageSeperator +
messageType.COMMUNICATIONSTART +
messageSeperator +
collaborationType.BOARD;
} else {
coviewInviteMessage =
"" +
......@@ -221,6 +228,11 @@ $(function () {
},
0
);
if (isBoard) {
$('#open_file_upload').on("click",function(e){
e.preventDefault();
});
}
} else {
}
break;
......@@ -263,6 +275,16 @@ $(function () {
// wc_api.dispatchEvent (new Event ("message"), {"HostRequest":"userID"});
console.log("consoleLog", json);
break;
case "fileChange":
LoadMobileShareFile(json.fileName);
backgroundFileName = json.fileName;
console.log("fileChange", json);
break;
case "ReceiveMediaResponse":
if (isBoard && g_isMainMan) {
wc_api.dispatchEvent (new Event ("message"), {"api":"fileChange","fileName":backgroundFileName});
}
break;
default:
console.log("Unrecognized api", json);
break;
......
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