Skip to content

C
chat_webview
Commit 334ec8ab by Lee Munkyeong
Options

写真協業実装

parent 401f36d8
Showing with 383 additions and 17 deletions
public_new/collaboration_picture.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>
......@@ -35,8 +36,7 @@
</header><!-- header -->
<!-- 拡大縮小機能 -->
<!--#include virtual="zoom.html" -->
<div id="zoom"></div>
<!-- コンテンツ -->
<main id="collabo_main">
<div class="document_wrap">
......@@ -77,26 +77,21 @@
</div>
<!-- オーバーレイ　メニュー -->
<!--#include virtual="collaboration_video_overlay_menu.html" -->
<div id="collaboration_video_overlay_menu"></div>
<!-- オーバーレイ　ユーザーリスト -->
<div id="overlay_user_list" class="overlay noscroll">
<!--#include virtual="collabotarion_overlay_user_list.html" -->
<div id="collabotarion_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="modal_collabo_profile"></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">
<button type="button" name="button" class="footer_menu_btn"></button>
......@@ -143,8 +138,7 @@
</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/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
......@@ -152,6 +146,21 @@
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.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");
</script>
</body>
</html>
\ No newline at end of file
public_new/css/share.css 0 → 100644
#coviewShareMainBtn{
padding-top: 9px;
}
.coview_share_area{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1050;
}
.coview_share_title{
background-color: #095395!important;
border-color: #095395!important;
width: 100%;
height: 58px;
}
.coview_share_body{
width: 100%;
height: calc(100vh - 58px);
}
.coview_share_dropdown_bar{
display: none;
list-style: none;
padding: unset;
margin: unset;
/* padding-top: 58px; */
background: #000;
position: absolute;
width: 100%;
top: 57px;
left: 0px;
padding-top: 10px;
}
.coview_share_dropdown_bar ul{
list-style: none;
padding: unset;
margin: unset;
}
.coview_share_dropdown_bar li{
display: inline-block;
width: 24%;
height: 75px;
line-height: 52px;
margin: unset;
padding: unset;
background: #000;
text-align: center;
}
.coview_share_dropdown_btn{
background: transparent;
border: none;
width: 100%;
padding: unset;
text-align: center;
}
.coview_share_dropdown_btn img{
width: 38px;
height: 38px;
vertical-align: middle;
}
.coview_share_dropdown_btn span{
display: block;
color: #fff;
margin-top: -11px;
font-size: 0.85em;
}
.coview_share_title_left_area{
display: inline-block;
height: 58px;
line-height: 58px;
padding: 0;
margin: 0;
}
.coview_share_title_btn{
display: inline-block;
margin-left: 10px;
margin-top: 4px;
color: #fff;
}
.coview_share_title_name{
display: inline-block;
height: 58px;
line-height: 58px;
padding: 0;
margin: 0;
color: #fff;
}
.coview_share_photo_select_bubble{
display: none;
position: absolute;
padding: 2px;
background: #3e3e3e;
border-radius: 5px;
margin-top: 156px;
margin-left: 117px;
font-size: 12px;
}
.coview_share_photo_select_bubble:after{
border-top: 0 solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #3e3e3e;
content: "";
position: absolute;
top: -10px;
left: 22px;
}
.coview_share_photo_select_bubble_in_button{
width: 106px;
height: 39px;
border: none;
text-align: left;
}
.coview_share_photo_select_bubble_in_button.cam{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.coview_share_photo_select_bubble_in_button.gal{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: solid 0.7px #000;
}
.coview_share_photo_select_bubble_in_button_img{
width: 27%;
}
.coview_share_photo_select_bubble_in_button_text{
margin-left: 5px;
}
.coview_share_request{
width: 100%;
height: 4em;
background-image: linear-gradient(to top, #82b127, #30c8d2);
color: #fff;
border: none;
border-radius: 5px;
}
public_new/js/chat.js
......@@ -8,6 +8,9 @@ CHAT.globalIsInvite = false;
//ログイン中の部屋情報を保存する変数
CHAT.globalLoginParameter;
// fermi coview share
let globalUserInfo = new Object();
CHAT.saveRoomInfo = function(roomId, roomName) {
CHAT.globalLoginParameter.roomId = roomId;
CHAT.globalLoginParameter.roomName = roomName;
......@@ -241,7 +244,16 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
if (!languageCode) {
languageCode = "en"
}
CHAT_UI.htmlElementTextInitialize(languageCode)
CHAT_UI.htmlElementTextInitialize(languageCode);
// fermi coview share
globalUserInfo.sid = sid;
globalUserInfo.loginId = loginId;
globalUserInfo.shopName = shopName;
globalUserInfo.roomId = roomId;
globalUserInfo.roomName = roomName;
globalUserInfo.languageCode = languageCode;
CHAT_UI.dismissLoadingIndicator();
}
......
public_new/js/share.js 0 → 100644
/* --------------------------------------------------- */
/* 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();
}
}
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;
}
});
});
function Coview_shareDropdownHide(){
$(".coview_share_dropdown_bar").slideUp();
$(".coview_share_photo_select_bubble").slideUp();
}
function Coview_moveToVideoShareArea(){
$("#loadingIndicator").addClass("full_active");
$(".coview_share_area").show();
}
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