Skip to content

C
chat_webview
Commit 0d218888 by Lee Munkyeong
Options

Merge branch 'feature/change_collaboration' into 'develop' 

Feature/change collaboration

See merge request !133
parents e6968a62 33af738e
Showing with 479 additions and 25 deletions
public_new/collaboration.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<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>
<!-- ナビメニュー -->
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn collaboration_contents picture_contents video_contents board_contents"></button>
<button type="button" name="button" class="btn menu_btn host_contents"></button>
<button type="button" name="button" class="btn add_user_btn none"></button>
<button type="button" name="button" class="btn start_pip_btn collaboration_contents document_contents" onclick="startPipMode();"></button>
<!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
</div>
</div>
</div>
</header><!-- header -->
<!-- 拡大縮小機能 -->
<div id="zoom"></div>
<!-- コンテンツ -->
<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="coviewSharePhotoGallery" class="coview_share_photo_select_bubble_in_button gal">
</button>
</div>
<!-- ユーザー追加オーバーレイ -->
<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">
<div id="collaboration_overlay_user_list"></div>
</div>
<!-- キャプチャ　モーダル -->
<div id="modal_collabo_capture"></div>
<!-- プロフィールモーダル -->
<div id="userProfileModalInCollaboration"></div>
<div id="modal_collabo_profile2"></div>
<!-- ホスト変更モーダル -->
<div id="modal_collabo_change_host"></div>
<!-- ホストリクエストモーダル -->
<div id="modal_collabo_host_request"></div>
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item photo_select_button collaboration_contents picture_contents">
<a href="#">
<div class="img_wrap bg_blue" id="photo_open_place_holder">
<img src="icon/icon_collabo_picture.png" alt="写真">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<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 none">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<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 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 class="d-flex align-items-center h-100 collaboration_contents video_contents">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap wide bg_blue" id="captureBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ">
<span>キャプチャ</span>
</div>
</a>
</div>
</div>
</div>
</footer>
<!-- フッター -->
<div id="footer_collabo"></div>
<div class="pip_indicator none">
<div style="vertical-align: middle;display: table-cell;">協業中
</div>
</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/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://biztaskyell.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_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;
let joinCollaborationType = 0;
let joinMeetingId = 0;
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');
}
function startPipMode() {
if (typeof(android) != "undefined") {
android.startPipMode();
} 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;
if (CHAT_UTIL.isIOS()) {
collaborationJoinFlg = CHAT_DB.getCollaborationJoinFlg();
} else if (CHAT_UTIL.isAndroid()) {
joinCollaborationType = android.getJoinCollaborationType();
collaborationJoinFlg = android.getCollaborationJoinFlg();
}
initCollaborationUI(joinCollaborationType);
globalUserInfo.coWorkType = CHAT_UTIL.getCoviewTypeFromCollaborationType(joinCollaborationType);
if (collaborationJoinFlg != '2') {
CHAT_SOCKET.connectSocket();
socket.emit('join', CHAT.globalLoginParameter, function() {
});
}
};
</script>
</body>
</html>
\ No newline at end of file
public_new/collaboration_overlay_menu.html 0 → 100644
<div id="overlay_menu" class="overlay fixed" style="z-index: 6 !important;">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:changeCollaboration(collaborationType.AUDIO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
</div>
<span>音声共有</span>
</a>
</div>
<div class="item collaboration_contents picture_contents voice_contents document_contents board_contents">
<a href="javascript:changeCollaboration(collaborationType.VIDEO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div>
<span>動画共有</span>
</a>
</div>
<div class="item collaboration_contents video_contents voice_contents document_contents board_contents">
<a href="javascript:changeCollaboration(collaborationType.CAMERA);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
</div>
<span>写真共有</span>
</a>
</div>
<div class="item collaboration_contents video_contents voice_contents picture_contents board_contents">
<a href="javascript:changeCollaboration(collaborationType.DOCUMENT);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
</a>
</div>
<div class="item collaboration_contents video_contents voice_contents picture_contents document_contents">
<a href="javascript:changeCollaboration(collaborationType.BOARD);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
</div>
<span>落書き</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/collaboration_picture_overlay_menu.html
......@@ -3,32 +3,45 @@
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
<div class="item collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:changeCollaboration(collaborationType.AUDIO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
</div>
<span>音声共有</span>
</a>
</div>
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="item collaboration_contents picture_contents voice_contents document_contents board_contents">
<a href="javascript:changeCollaboration(collaborationType.VIDEO);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div>
<span>動画共有</span>
</a>
</div>
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="item collaboration_contents video_contents voice_contents document_contents board_contents">
<a href="javascript:coview_api.ChangeCollaboration('image');"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
</div>
<span>写真共有</span>
</a>
</div>
<div class="item collaboration_contents video_contents voice_contents picture_contents board_contents">
<a href="javascript:changeCollaboration(collaborationType.DOCUMENT);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
</a>
</div>
<div class="item">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="item collaboration_contents video_contents voice_contents picture_contents document_contents">
<a href="javascript:changeCollaboration(collaborationType.BOARD);"
class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き">
</div>
......
public_new/collaboration_whiteboard.html
......@@ -141,7 +141,7 @@
<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="https://biztaskyell.abookcloud.com/coview_api.js"></script>
<script src="./js/share.js"></script>
<script>
$("#footer_collabo").load("./footer_collabo.html");
......
public_new/css/collaboration.css
......@@ -128,7 +128,6 @@
.btn.start_pip_btn {
background-image: url("../icon/icon_start_pip.png");
}
.btn.menu_btn.hide,
.btn.add_user_btn.hide,
.btn.user_btn.hide {
transition: 0.3s;
......
public_new/css/collaboration_board.css 0 → 100644
#canvasRemote {
background-color: white !important;
left: 0px !important;
height: 100% !important;
width: 100% !important;
margin-left: 0px !important;
}
public_new/js/chat-util.js
......@@ -130,4 +130,23 @@ CHAT_UTIL.getCollaborationType = function(key) {
default:
return 0;
}
}
CHAT_UTIL.getCoviewTypeFromCollaborationType = function(joinCollaborationType) {
switch(joinCollaborationType) {
case collaborationType.AUDIO:
console.log(collaborationTypeKey.AUDIO);
return collaborationTypeKey.AUDIO;
case collaborationType.CAMERA:
console.log(collaborationTypeKey.CAMERA);
return collaborationTypeKey.CAMERA;
case collaborationType.VIDEO:
return collaborationTypeKey.VIDEO;
case collaborationType.DOCUMENT:
return collaborationTypeKey.DOCUMENT;
case collaborationType.BOARD:
return collaborationTypeKey.BOARD;
default:
return 0;
}
}
\ No newline at end of file
public_new/js/chat-websocket.js
......@@ -160,6 +160,7 @@ function setSocketAction () {
// New Message
// #36170
socket.on('newMessage', function(message, roomId, roomName) {
console.log(message);
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
......
public_new/js/collaboration.js
......@@ -9,9 +9,6 @@ $(function () {
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示
$(".user_btn").toggleClass("none");
$(".add_user_btn").toggleClass("none");
});
// ユーザーリストオーバーレイ表示
......@@ -24,9 +21,6 @@ $(function () {
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示
// $(".add_user_btn").toggleClass("none");
$(".menu_btn").toggleClass("none");
if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
$("#overlay_user_list.overlay").removeClass("noscroll");
......
public_new/js/share.js
......@@ -123,6 +123,28 @@ $(function () {
coview_api.addEventListener("start", function () {
console.log("=============> START : share start");
$("#loadingIndicator").removeClass("full_active");
fw.socket.on('message', async function(data) {
console.log('====> message::data: ', data);
if (data.type ==="CHANGE_COLLABORATION") {
if (joinCollaborationType == collaborationType.DOCUMENT) {
if (CHAT_UTIL.isIOS()) {
//TODO 会議室退場処理
} else if (CHAT_UTIL.isAndroid()) {
android.exitMeetingRoom();
}
}
initCollaborationUI(data.payload.collaborationType);
joinCollaborationType = data.payload.collaborationType
if (data.payload.collaborationType == collaborationType.DOCUMENT) {
if (CHAT_UTIL.isIOS()) {
//TODO 会議室に参加し、PIPモードに入る。
} else if (CHAT_UTIL.isAndroid()) {
android.joinMeetingRoom(data.payload.newMeetingId);
}
joinMeetingId = data.payload.newMeetingId;
}
}
});
});
coview_api.addEventListener("allbye", function () {
......@@ -158,9 +180,6 @@ $(function () {
let loginIdList = new Array();
switch (json.api) {
case "LoginResponse":
console.log("------------------------------");
console.log(globalUserInfo.coWorkType);
console.log(collaborationJoinFlg);
if (globalUserInfo.coWorkType == collaborationTypeKey.DOCUMENT) {
isDocument = true;
globalUserInfo.coWorkType = collaborationTypeKey.AUDIO;
......@@ -174,7 +193,7 @@ $(function () {
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
if (isDocument) {
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.startContentView.postMessage({});
webkit.messageHandlers.startContentView.postMessage({});
} else if (CHAT_UTIL.isAndroid()) {
android.startContentView();
}
......@@ -307,6 +326,112 @@ function Coview_moveToVideoShareArea() {
$("#collabo_main").removeClass("none");
}
function changeCollaboration(changeCollaborationType) {
var newMeetingId = 0;
if (joinCollaborationType == collaborationType.DOCUMENT) {
if (CHAT_UTIL.isIOS()) {
//TODO 会議室を退場し、PIPモードを終了する。（ホストであればルーム削除まで）
} else if (CHAT_UTIL.isAndroid()) {
android.exitMeetingRoom();
}
}
if (CHAT_UTIL.isIOS()) {
//TODO Nativeに変換するCollaborationTypeを保存。
} else if (CHAT_UTIL.isAndroid()) {
android.setJoinCollaborationType(changeCollaborationType);
}
joinCollaborationType = changeCollaborationType;
initCollaborationUI(changeCollaborationType);
switch (changeCollaborationType) {
case collaborationType.AUDIO:
coview_api.ChangeCollaboration('audio');
break;
case collaborationType.CAMERA:
coview_api.ChangeCollaboration('image');
break;
case collaborationType.VIDEO:
coview_api.ChangeCollaboration('video');
break;
case collaborationType.DOCUMENT:
coview_api.ChangeCollaboration('audio');
if (CHAT_UTIL.isIOS()) {
//TODO 会議室を開設し、IDを保存
} else if (CHAT_UTIL.isAndroid()) {
newMeetingId = android.createContentView();
console.log('newMeetingId = ' + newMeetingId);
}
break;
case collaborationType.BOARD:
coview_api.ChangeCollaboration('audio');
break;
}
if (CHAT_UTIL.isIOS()) {
//TODO 協業変換API呼出
} else if (CHAT_UTIL.isAndroid()) {
android.changeCollaboration(changeCollaborationType, newMeetingId);
}
fw.sendToMsg('others', 'CHANGE_COLLABORATION', {"collaborationType": changeCollaborationType, "newMeetingId": newMeetingId});
}
function initCollaborationUI(changeCollaborationType){
if ($('.user_btn').hasClass("hide")) {
$('.user_btn').click();
}
if ($('.menu_btn').hasClass("hide")) {
$(".menu_btn").click();
}
$("link[href='./css/collaboration_board.css']").remove();
switch (changeCollaborationType) {
case collaborationType.AUDIO:
$('.collaboration_contents').addClass('none');
$('.voice_contents').removeClass('none');
var w = $('.user_btn').width();
$('.user_btn').toggleClass("hide");
$("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
$("#overlay_user_list.overlay").removeClass("noscroll");
} else {
$("#overlay_user_list.overlay").addClass("noscroll");
}
break;
case collaborationType.CAMERA:
$('.collaboration_contents').addClass('none');
$('.picture_contents').removeClass('none');
break;
case collaborationType.VIDEO:
$('.collaboration_contents').addClass('none');
$('.video_contents').removeClass('none');
break;
case collaborationType.DOCUMENT:
$('.collaboration_contents').addClass('none');
$('.document_contents').removeClass('none');
var w = $('.user_btn').width();
$('.user_btn').toggleClass("hide");
$("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
$("#overlay_user_list.overlay").removeClass("noscroll");
} else {
$("#overlay_user_list.overlay").addClass("noscroll");
}
break;
case collaborationType.BOARD:
$('.collaboration_contents').addClass('none');
$('.board_contents').removeClass('none');
$('head').append('<link rel="stylesheet" href="./css/collaboration_board.css">');
break;
}
}
function Coview_exitCollaboration(isDocument = false) {
if (isDocument) {
if (CHAT_UTIL.isIOS()) {
......@@ -346,7 +471,7 @@ function Coview_changeHost(userId) {
function Coview_addLoginId(loginId) {
console.log("addUser loginId = " + loginId);
var url = "https://livetaskyell.abookcloud.com/auth/getuser";
var url = "https://biztaskyell.abookcloud.com/auth/getuser";
$.ajax({
url : url,
method : 'post',
......@@ -375,12 +500,18 @@ function Coview_connect_audio_collaboration() {
function hostSearchInterval() {
let hostName = "";
if (g_isMainMan) {
function hostSearch() {
if (g_isMainMan) {
$('.host_contents').removeClass('none');
} else {
if (joinCollaborationType == collaborationType.CAMERA) {
$('.photo_select_button').removeClass('none');
}
} else {
$('.host_contents').addClass('none');
}
function hostSearch() {
if (joinCollaborationType == collaborationType.CAMERA) {
$('.photo_select_button').addClass('none');
}
}
if (hostName != g_isMainManUsername) {
if (hostName != "") {
$("#collaboration_user_" + hostName).removeClass("host");
......
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