add video obj fit set + update readme
هذا الالتزام موجود في:
Miroslav Pejic
14
README.md
14
README.md
@@ -156,6 +156,20 @@ You can start videoconferencing directly from your Local PC, and be reachable fr
|
||||
|
||||
[](LICENSE)
|
||||
|
||||
MiroTalk is free and can be modified and forked. But the conditions of the AGPLv3 (GNU Affero General Public License v3.0) need to be respected. In particular modifications need to be free as well and made available to the public. Get a quick overview of the license at [Choose an open source license](https://choosealicense.com/licenses/agpl-3.0/).
|
||||
|
||||
---
|
||||
|
||||
## Commercial License or closed source
|
||||
|
||||
For commercial use or closed source projects, we can offer licensing under the following terms.
|
||||
|
||||
> World-wide, non-exclusive, non-transferable and non-sub-licensable license of MiroTalk as is on https://github.com/miroslavpejic85/mirotalksfu for use in purchasers products, as long as the resulting software does not stand in concurrence to the MiroTalk itself. Any liability is excluded. The law of the Federal Republic of Italy shall apply exclusively.
|
||||
|
||||
The one time fee is 499 EUR net. Please contact miroslav.pejic.85@gmail.com.
|
||||
|
||||
---
|
||||
|
||||
<br/>
|
||||
|
||||
# Sponsors
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
|
||||
:root {
|
||||
--body-bg: linear-gradient(to left, #1f1e1e, #000000);
|
||||
--border: 1px solid rgb(255 255 255 / 32%);
|
||||
--msger-top: 50%;
|
||||
--msger-left: 50%;
|
||||
--msger-height: 680px;
|
||||
@@ -61,6 +62,10 @@
|
||||
--btns-width: 320px;
|
||||
--btns-flex-direction: row;
|
||||
*/
|
||||
/*
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
|
||||
*/
|
||||
--videoObjFit: cover;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -81,7 +86,7 @@ body {
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#loadingDiv {
|
||||
color: white;
|
||||
color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
background: var(--body-bg);
|
||||
@@ -163,6 +168,7 @@ body {
|
||||
min-height: 480px;
|
||||
background: var(--msger-bg);
|
||||
box-shadow: var(--box-shadow);
|
||||
border: var(--border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -174,7 +180,7 @@ body {
|
||||
#mySettings i,
|
||||
#mySettings p {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
}
|
||||
@@ -183,7 +189,7 @@ body {
|
||||
width: auto;
|
||||
max-width: 270px;
|
||||
height: 40px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@@ -214,7 +220,7 @@ body {
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
@@ -251,7 +257,7 @@ body {
|
||||
height: var(--msger-height);
|
||||
width: var(--msger-width);
|
||||
background: var(--msger-bg);
|
||||
border-radius: 5px;
|
||||
border: var(--border);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--box-shadow);
|
||||
overflow: hidden;
|
||||
@@ -408,7 +414,7 @@ body {
|
||||
}
|
||||
|
||||
#chat-msg-a {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@@ -427,7 +433,7 @@ body {
|
||||
border: none;
|
||||
border-top-left-radius: 10px;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chat-msger-inputarea button {
|
||||
@@ -458,7 +464,12 @@ emoji-picker {
|
||||
.swal2-content,
|
||||
.swal2-input {
|
||||
text-align: center;
|
||||
color: white !important;
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.swal2-html-container {
|
||||
text-align: center;
|
||||
color: #7c7c7c !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
@@ -480,7 +491,7 @@ emoji-picker {
|
||||
}
|
||||
|
||||
#about a {
|
||||
color: white;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -546,7 +557,7 @@ emoji-picker {
|
||||
p,
|
||||
button {
|
||||
background: transparent;
|
||||
color: white;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -566,6 +577,7 @@ button:hover {
|
||||
padding: 10px;
|
||||
min-width: 320px;
|
||||
background: var(--body-bg);
|
||||
border: var(--border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -576,7 +588,7 @@ button:hover {
|
||||
background: rgb(0, 0, 0);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
@@ -593,7 +605,7 @@ button:hover {
|
||||
#roomParticipants td,
|
||||
#roomParticipants th {
|
||||
/* border: 1px solid #444444; */
|
||||
color: white;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
@@ -629,7 +641,7 @@ button:hover {
|
||||
min-width: 320px;
|
||||
background: var(--body-bg);
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -637,7 +649,7 @@ button:hover {
|
||||
#receiveHideBtn {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -670,8 +682,8 @@ progress {
|
||||
width: var(--wb-width);
|
||||
height: var(--wb-height);
|
||||
background: var(--wb-bg);
|
||||
border: var(--border);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -681,7 +693,7 @@ progress {
|
||||
background: rgb(0, 0, 0);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.4);
|
||||
border: var(--border);
|
||||
box-shadow: var(--box-shadow);
|
||||
animation: show 0.4s ease;
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
.audio {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: white;
|
||||
color: #fff;
|
||||
margin: 5px;
|
||||
width: auto;
|
||||
height: 25px;
|
||||
@@ -60,7 +60,7 @@
|
||||
.username {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -76,7 +76,7 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
margin: 5px;
|
||||
width: auto;
|
||||
height: 25px;
|
||||
@@ -114,7 +114,7 @@
|
||||
.videoMenuBar button {
|
||||
float: right;
|
||||
margin-right: 3px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
display: inline;
|
||||
@@ -135,9 +135,8 @@
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: var(--videoObjFit);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--box-shadow);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -817,6 +817,10 @@ function handleSelects() {
|
||||
BtnsAspectRatio.onchange = () => {
|
||||
setAspectRatio(BtnsAspectRatio.value);
|
||||
};
|
||||
BtnVideoObjectFit.onchange = () => {
|
||||
handleVideoObjectFit(BtnVideoObjectFit.value);
|
||||
}; // cover
|
||||
BtnVideoObjectFit.selectedIndex = 2;
|
||||
BtnsBarPosition.onchange = () => {
|
||||
rc.changeBtnsBarPosition(BtnsBarPosition.value);
|
||||
};
|
||||
@@ -1524,6 +1528,14 @@ function getParticipantAvatar(peerName) {
|
||||
return cfg.msgAvatar + '?name=' + peerName + '&size=32' + '&background=random&rounded=true';
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// HANDLE VIDEO OBJ FIT
|
||||
// ####################################################
|
||||
|
||||
function handleVideoObjectFit(value) {
|
||||
document.documentElement.style.setProperty('--videoObjFit', value);
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// HANDLE ASPECT RATIO
|
||||
// ####################################################
|
||||
|
||||
@@ -239,6 +239,16 @@ access to use this app.
|
||||
<option value="4">1:2</option>
|
||||
</select>
|
||||
<br />
|
||||
<p>Video Object fit:</p>
|
||||
<br />
|
||||
<select id="BtnVideoObjectFit" class="form-select text-light bg-dark">
|
||||
<option value="fill">fill</option>
|
||||
<option value="contain">contain</option>
|
||||
<option value="cover">cover</option>
|
||||
<option value="scale-down">scale-down</option>
|
||||
<option value="none">none</option>
|
||||
</select>
|
||||
<br />
|
||||
<p>Buttons bar:</p>
|
||||
<br />
|
||||
<select id="BtnsBarPosition" class="form-select text-light bg-dark">
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم