pengjunjie/onlyoffice.github.io
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/onlyoffice.github.io.git synced 2026-02-10 18:05:06 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
onlyoffice.github.io/sdkjs-plugins/content/zoom/index_zoom.html
Oleg Korshul 61dc63d938 Update jquery version
2025-02-12 22:05:54 +03:00

361 lines
20 KiB
HTML
Raw Permalink Blame History

<!--
(c) Copyright Ascensio System SIA 2020
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<head>
<title>Zoom WebSDK</title>
<meta charset="utf-8" />
<script src="vendor/jquery/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="vendor/select2-4.0.13/css/select2.css" />
<script src="vendor/select2-4.0.13/js/select2.js"></script>
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.9/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.9/css/react-select.css" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
</head>
<body id="body">
<div id="loader-container" class="asc-plugin-loader display-none">
<div id="flex-loader-container">
<div>
<div class="asc-loader-image">
<div class="asc-loader-title"></div>
</div>
<div class="asc-loader-title"> Loading... </div>
</div>
</div>
</div>
<style>
body, html {
font-size: 11px !important;
min-height: 100% !important;
height: 100%;
min-width: 100% !important;
width: 100%;
font-family: "Arial" !important;
line-height: normal !important;
}
.display-none {
display: none !important;
}
#flex-loader-container {
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 50px;
border: none;
background-image: none;
background-color: rgba(68, 68, 68, 0.95);
color: #f1f1f1;
border-radius: 6px;
}
.asc-plugin-loader .asc-loader-image {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iMTAuMjUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCUsIDQwJSIgLz48L3N2Zz4=) !important;
}
.sdk-select {
height: 34px;
border-radius: 4px;
}
#nav-tool {
margin-bottom: 0px;
}
#show-test-tool {
float:bottom;
top: 100px;
left: 0;
display: block;
z-index: 99999;
}
#display_name {
width: 100%;
}
.btn-primary {
margin-top: 5%;
}
#websdk-iframe {
width: 100%;
height: 100%;
border: 1px;
border-color: red;
border-style: dashed;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
left: 50%;
margin: 0;
}
.btn-text-default {
min-height: 22px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
width: 40%;
margin-top: 16px;
text-align: center;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 12px !important;
}
label {
font-size: 11px;
margin-bottom: 0 !important;
color: #f1f1f1;
}
.form-control {
outline:0 !important;
width: 100% !important;
}
input[type=text]:focus {
outline: 0 !important;
}
.navbar-form {
border-top: none;
border-bottom: none;
webkit-box-shadow: none;
box-shadow: none;
margin-top: 0;
padding: 16px 12px !important;
margin-bottom: 0px !important;
}
.navbar {
border: none;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
line-height: 3;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
</style>
<div id="join_container" style="height: 100%;">
<nav id="nav-tool" class="navbar navbar-inverse navbar-fixed-top" style="height: 100%;">
<div class="container" style="height: 100%;">
<div id="navbar" class="websdktest" style="height: 100%;">
<form class="navbar-form navbar-right" id="meeting_form" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative;">
<div>
<div class="form-group">
<label>Your Name*</label>
<input type="text" name="display_name" id="display_name" data-id="zoom-display-name-id" value="" maxLength="100" placeholder="Name" class="form-control" required>
</div>
<div class="form-group">
<label>Meeting ID*</label>
<input type="text" name="meeting_number" id="meeting_number" value="" maxLength="200" style="width:150px" placeholder="Meeting Number" class="form-control" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="text" name="meeting_pwd" id="meeting_pwd" value="" style="width:150px" maxLength="32" placeholder="Meeting Password" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="meeting_email" id="meeting_email" value="" data-id="zoom-email-id" style="width:150px" maxLength="32" placeholder="Email option" class="form-control">
</div>
<div class="form-group">
<label>Meeting role</label>
<select id="meeting_role" class="sdk-select">
<option value=0>Attendee</option>
<option value=1>Host</option>
<option value=5>Assistant</option>
</select>
</div>
<div class="form-group">
<label>Meeting region</label>
<select id="meeting_china" class="sdk-select">
<option value=0>Global</option>
<option value=1>China</option>
</select>
</div>
<div class="form-group">
<label>Meeting language</label>
<select id="meeting_lang" class="sdk-select">
<option value="en-US">English</option>
<option value="de-DE">German Deutsch</option>
<option value="es-ES">Spanish Español</option>
<option value="fr-FR">French Français</option>
<option value="jp-JP">Japanese 日本語</option>
<option value="pt-PT">Portuguese Portuguese</option>
<option value="ru-RU">Russian Русский</option>
<option value="zh-CN">Chinese 简体中文</option>
<option value="zh-TW">Chinese 繁体中文</option>
<option value="ko-KO">Korean 한국어</option>
<option value="vi-VN">Vietnamese Tiếng Việt</option>
<option value="it-IT">Italian italiano</option>
</select>
</div>
<input type="hidden" value="" id="copy_link_value" />
<div id="button_wrapper" style="display: flex; justify-content: space-between;">
<div style="width: 100%; margin-right: 5px;" type="submit" class="btn-text-default" id="join_meeting" onclick="window.joinMeeting('#joinMeeting')">Join</div>
<div style="width: 100%;" type="button" link="" onclick="window.copyJoinLink('#copy_join_link')" class="btn-text-default" id="copy_join_link">Copy Direct join link</div>
</div>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 16px;">
<div id="switch" style="z-index: 9999;">
<label class="switch-label noselect" style="cursor:pointer; border-bottom: 1px dashed #f1f1f1; z-index: 9999;">Go to Creating meeting</label>
</div>
<div id="reconf" style="z-index: 9999;">
<label class="reconf-label noselect" style="cursor:pointer; border-bottom: 1px dashed #f1f1f1; z-index: 9999;">Reconfigure</label>
</div>
</div>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div id="show-test-tool">
<button type="submit" class="btn btn-primary" id="show-test-tool-btn" title="show or hide top test tool">Show</button>
</div>
</div>
<div id="iframe_meeting" style="width:100%; height:100%;margin:0;padding:0; display:none;"></div>
<script>
document.getElementById('show-test-tool-btn').addEventListener("click", function (e) {
var textContent = e.target.textContent;
if (textContent === 'Show') {
document.getElementById('nav-tool').style.display = 'block';
document.getElementById('show-test-tool-btn').textContent = 'Hide';
} else {
document.getElementById('nav-tool').style.display = 'none';
document.getElementById('show-test-tool-btn').textContent = 'Show';
}
});
window.addEventListener('message', function (msg) {
if (typeof(msg.data) === "object")
{
var oTheme;
//event for change theme
if (msg.data.oTheme) {
oTheme = msg.data.oTheme;
var rule = ".form-control, .form-control[readonly], .form-control[disabled] { color : " + oTheme["text-normal"] + "; background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["border-regular-control"] + ";}\n";
rule += ".form-control:focus { border-color : " + oTheme["border-control-focus"] + ";}\n";
rule += ".form-control[disabled] { color : " + oTheme["text-invers"] + ";}\n";
rule += ".btn-text-default { background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["border-regular-control"] + "; color : " + oTheme["text-normal"] + ";}\n";
rule += ".btn-text-default:hover { background-color : " + oTheme["highlight-button-hover"] + ";}\n";
rule += ".btn-text-default:active { background-color : " + oTheme["highlight-button-pressed"] + " !important;}\n";
rule += ".btn-text-default[disabled]:hover,\
.btn-text-default.disabled:hover,\
.btn-text-default[disabled]:active,\
.btn-text-default[disabled].active,\
.btn-text-default.disabled:active,\
.btn-text-default.disabled.active: {background-color : " + oTheme["background-normal"] + " !important; color : " + oTheme["text-normal"] + ";}\n";
rule += ".select2-container--default .select2-selection--single { color : " + oTheme["text-normal"] + " !important; background-color : " + oTheme["background-normal"] + " !important;}\n";
rule += ".select2-container--default .select2-selection--single .select2-selection__rendered { color : " + oTheme["text-normal"] + " !important;}\n";
rule += ".select2-results { background-color : " + oTheme["background-normal"] + ";}\n";
rule += ".select2-container--default .select2-results__option--highlighted[aria-selected] { background-color : " + oTheme["highlight-button-hover"] + " !important;}\n";
rule += ".select2-container--default .select2-results__option[aria-selected=true] { color: " + oTheme["text-contrast-background"] + "!important; background-color : " + oTheme["highlight-button-pressed"] + " !important;}\n";
rule += ".select2-dropdown, .select2-container--default .select2-selection--single { border: 0.5px solid " + oTheme["border-regular-control"] + " !important;}\n";
rule += ".select2-container--default.select2-container--open .select2-selection--single { border-color : " + oTheme["border-control-focus"] + " !important;}\n";
rule += ".select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single { border-color : " + oTheme["border-regular-control"] + " !important;}\n";
rule += ".select2-container--default.select2-container--open.select2-container--focus .select2-selection--single { border-color : " + oTheme["border-control-focus"] + " !important;}\n";
rule += ".select2-search--dropdown { background-color : " + oTheme["background-normal"] + " !important;}\n";
rule += ".select2-container--default .select2-search--dropdown .select2-search__field { color : " + oTheme["text-normal"] + "; background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["border-regular-control"] + ";}\n";
rule += ".select2-container--default.select2-container--disabled .select2-selection--single { background-color : " + oTheme["background-normal"] +";}\n";
rule += ".select2-container--default .select2-selection--single .select2-selection__arrow b { border-color : " + oTheme["text-normal"] + " !important" + ";}\n";
rule += ".select2-results__option { color : " + oTheme["text-normal"] + " !important" + ";}\n";
rule += ".ps .ps__rail-y:hover { background-color : " + oTheme["background-toolbar"] + "!important;}\n";
rule += ".ps .ps__rail-y.ps--clicking { background-color : " + oTheme["background-toolbar"] + ";}\n";
rule += ".ps__thumb-y { background-color : " + oTheme["background-normal"] + "; border-color:" + oTheme["Border"] + " !important" + ";}\n";
rule += ".ps__rail-y:hover > .ps__thumb-y { border-color : " + oTheme["canvas-scroll-thumb-hover"] + "; background-color : " + oTheme["canvas-scroll-thumb-hover"] + " !important" + ";}\n";
rule += ".ps .ps__rail-x:hover { background-color : " + oTheme["background-toolbar"] + ";}\n";
rule += ".ps .ps__rail-x.ps--clicking { background-color : " + oTheme["background-toolbar"] + ";}\n";
rule += ".ps__thumb-x { background-color : " + oTheme["background-normal"] + "; border-color : " + oTheme["Border"] + " !important" + ";}\n";
rule += ".ps__rail-x:hover > .ps__thumb-x { border-color : " + oTheme["canvas-scroll-thumb-hover"] + ";}\n";
rule += "*::-webkit-scrollbar-track { background : " + oTheme["background-normal"] + ";}\n";
rule += "*::-webkit-scrollbar-track:hover { border-radius: 2px; background : " + oTheme["background-toolbar-additional"] + ";}\n";
rule += "*::-webkit-scrollbar-thumb { background-color : " + oTheme["background-toolbar"] + "!important; border-color : " + oTheme["border-regular-control"] + ";}\n";
rule += "*::-webkit-scrollbar-thumb:hover { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC) !important; background: no-repeat; border-radius: 2px; background-color : " + oTheme["canvas-scroll-thumb-hover"] + " !important;}\n";
if (oTheme['type'] == 'light') {
rule+= '*::-webkit-scrollbar-thumb:hover { background-position: -7px center !important;}';
}
rule += ".select2-search__field { height: 20px; }\n";
rule += "*::-webkit-scrollbar { width: 9px !important; }\n";
rule += "*::-webkit-scrollbar-thumb { border: 1px solid " + oTheme['border-regular-control'] + " !important; border-radius: 2px; background: no-repeat;}\n";
rule += `::selection {\
background-color: ${oTheme["highlight-text-select"]};\
color: ${oTheme["text-inverse"]};\
}`;
rule += "input::placeholder {\
font-size: 11px !important;\
}";
$('#nav-tool').css('background-color', oTheme["background-toolbar"]);
$("label").css('color', oTheme["text-normal"]);
$('.reconf-label, .switch-label, .label-settings').css('border-bottom', '1px dashed ' + oTheme["text-normal"]);
var styleTheme = document.createElement('style');
styleTheme.type = 'text/css';
styleTheme.innerHTML = rule;
document.getElementsByTagName('head')[0].appendChild(styleTheme);
}
}
});
</script>
<script src="https://source.zoom.us/2.8.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.8.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.8.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.8.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.8.0/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-2.8.0.min.js"></script>
<script src="vendor/zoom-sdk/tool.js"></script>
<script src="vendor/zoom-sdk/meeting.js"></script>
<script src="vendor/zoom-sdk/vconsole.min.js"></script>
<script src="vendor/zoom-sdk/index.js"></script>
<script>
$('.sdk-select').select2({
minimumResultsForSearch: Infinity,
width : '100%',
});
var Ps = new PerfectScrollbar("#meeting_form", {suppressScrollX: true});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink