mirror of https://github.com/OpenVidu/openvidu.git
CSS cleanup and minor bug fixes in openvidu-testapp
Micael Gallego
parent
7f25e2b927
commit
11378cc420
File diff suppressed because one or more lines are too long
|
|
@ -41,6 +41,10 @@ export class Session {
|
|||
|
||||
this.participants[options.participantId] = this.localParticipant;
|
||||
}
|
||||
|
||||
getId(){
|
||||
return this.id;
|
||||
}
|
||||
|
||||
private activateUpdateMainSpeaker() {
|
||||
|
||||
|
|
|
|||
|
|
@ -11,15 +11,12 @@ import { OpenVidu, Callback } from './OpenVidu';
|
|||
import EventEmitter = require('wolfy87-eventemitter');
|
||||
import * as kurentoUtils from 'kurento-utils';
|
||||
|
||||
//See http://stackoverflow.com/questions/37112074/how-to-use-webrtc-adapter-adapter-js-shim-in-webpack
|
||||
//declare function require(moduleName: string)
|
||||
//require('webrtc-adapter');
|
||||
import 'webrtc-adapter';
|
||||
declare var navigator: any;
|
||||
declare var RTCSessionDescription: any;
|
||||
|
||||
function jq(id: string):string {
|
||||
return /*"#" +*/ id.replace(/(@|:|\.|\[|\]|,)/g, "\\$1");
|
||||
return id.replace(/(@|:|\.|\[|\]|,)/g, "\\$1");
|
||||
}
|
||||
|
||||
function show(id: string){
|
||||
|
|
|
|||
|
|
@ -16,14 +16,17 @@
|
|||
<body>
|
||||
<div id="container">
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="join" class="animate join">
|
||||
<h1>Join a Room</h1>
|
||||
<form onsubmit="joinRoom(); return false;" accept-charset="UTF-8">
|
||||
<p>
|
||||
<label for="userId">User:</label>
|
||||
<input type="text" name="user" value="" id="userId"
|
||||
placeholder="User" required>
|
||||
</p>
|
||||
<p>
|
||||
<label for="roomId">Room:</label>
|
||||
<input type="text" name="room" value="a" id="roomId"
|
||||
placeholder="Room" required>
|
||||
</p>
|
||||
|
|
@ -32,12 +35,12 @@
|
|||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="room" style="display: none;">
|
||||
<h2 id="room-header"></h2>
|
||||
<div id="myVideo"></div>
|
||||
<div id="participants"></div>
|
||||
<input type="button" id="buttonLeaveRoom" onmouseup="leaveRoom();"
|
||||
value="Leave room">
|
||||
<div id="participants"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ function joinRoom() {
|
|||
return console.log(error);
|
||||
|
||||
document.getElementById('room-header').innerText = 'ROOM \"'
|
||||
+ session.name + '\"';
|
||||
+ session.getId() + '\"';
|
||||
|
||||
document.getElementById('join').style.display = 'none';
|
||||
document.getElementById('room').style.display = 'block';
|
||||
|
|
|
|||
|
|
@ -1,435 +1,18 @@
|
|||
@CHARSET "UTF-8";
|
||||
|
||||
body {
|
||||
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
|
||||
color: #404040;
|
||||
background: #0ca3d2;
|
||||
}
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 0.1em 0 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1em;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed),
|
||||
to(#fbfbfb));
|
||||
-webkit-appearance: none;
|
||||
-webkit-box-shadow: 1px 1px 1px #fff;
|
||||
-webkit-border-radius: 0.25em;
|
||||
vertical-align: text-top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
-webkit-border-radius: 2em; /* Make radios round */
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked::after {
|
||||
content: "✔";
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
input[type=radio]:checked::after {
|
||||
content: "●";
|
||||
display: block;
|
||||
height: 16px;
|
||||
line-height: 15px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
select {
|
||||
border: 1px solid #D0D0D0;
|
||||
background: url(http://www.quilor.com/i/select.png) no-repeat right
|
||||
center, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fbfbfb),
|
||||
to(#ededed));
|
||||
background: -moz-linear-gradient(19% 75% 90deg, #ededed, #fbfbfb);
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 50px auto;
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
.join {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 20px 20px 20px;
|
||||
width: 310px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
|
||||
rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
|
||||
rgba(0, 0, 0, 0.3);
|
||||
/*Transition*/
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
.join:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
z-index: -1;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.join h1 {
|
||||
margin: -20px -20px 21px;
|
||||
line-height: 40px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px white;
|
||||
background: #f3f3f3;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
|
||||
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
|
||||
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
|
||||
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
|
||||
-webkit-box-shadow: 0 1px whitesmoke;
|
||||
box-shadow: 0 1px whitesmoke;
|
||||
}
|
||||
|
||||
.join p {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.join p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.join input[type=text], .join input[type=password] {
|
||||
width: 278px;
|
||||
}
|
||||
|
||||
.join p.submit {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: #c9c9c9 !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #ccc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
margin: 5px;
|
||||
padding: 0 10px;
|
||||
width: 200px;
|
||||
height: 34px;
|
||||
color: #404040;
|
||||
background: white;
|
||||
border: 1px solid;
|
||||
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
|
||||
border-radius: 2px;
|
||||
outline: 5px solid #eff4f7;
|
||||
-moz-outline-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=password]:focus {
|
||||
border-color: #7dc9e2;
|
||||
outline-color: #dceefc;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
input[type=button], input[type=submit] {
|
||||
padding: 0 18px;
|
||||
height: 29px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #527881;
|
||||
text-shadow: 0 1px #e3f1f1;
|
||||
background: #cde5ef;
|
||||
border: 1px solid;
|
||||
border-color: #b4ccce #b3c0c8 #9eb9c2;
|
||||
border-radius: 16px;
|
||||
outline: 0;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
|
||||
background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
|
||||
background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
|
||||
background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
|
||||
-webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
input[type=button]:active, input[type=submit]:active {
|
||||
background: #cde5ef;
|
||||
border-color: #9eb9c2 #b3c0c8 #b4ccce;
|
||||
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.lt-ie9 input[type=text], .lt-ie9 input[type=password] {
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
#room {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#button-leave {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.participant {
|
||||
border-radius: 4px;
|
||||
/* border: 2px groove; */
|
||||
margin-left: 5;
|
||||
margin-right: 5;
|
||||
width: 150;
|
||||
text-align: center;
|
||||
overflow: hide;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
|
||||
rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
|
||||
rgba(0, 0, 0, 0.3);
|
||||
/*Transition*/
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
.participant:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
z-index: -1;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.participant:hover {
|
||||
opacity: 1;
|
||||
background-color: 0A33B6;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
}
|
||||
|
||||
.participant video, .participant.main video {
|
||||
width: 100%; ! important;
|
||||
height: auto;
|
||||
!
|
||||
important;
|
||||
}
|
||||
|
||||
.participant span {
|
||||
color: PapayaWhip;
|
||||
}
|
||||
|
||||
.participant.main {
|
||||
width: 20%;
|
||||
margin: 0 auto;
|
||||
margin: 10;
|
||||
}
|
||||
|
||||
.participant {
|
||||
width: 20%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.participant.main video {
|
||||
.participant video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.animate {
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-duration: 0.5s;
|
||||
-moz-animation-fill-mode: both;
|
||||
-o-animation-duration: 0.5s;
|
||||
-o-animation-fill-mode: both;
|
||||
-ms-animation-duration: 0.5s;
|
||||
-ms-animation-fill-mode: both;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.removed {
|
||||
-webkit-animation: disapear 1s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation: disapear 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@
|
||||
-webkit-keyframes disapear { 50% {
|
||||
-webkit-transform: translateX(-5%);
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
|
||||
100%
|
||||
{
|
||||
-webkit-transform
|
||||
|
||||
|
||||
|
||||
|
||||
:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
translateX
|
||||
|
||||
|
||||
|
||||
|
||||
(200%);
|
||||
transform
|
||||
|
||||
|
||||
|
||||
|
||||
:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
translateX
|
||||
|
||||
|
||||
|
||||
|
||||
(200%);
|
||||
}
|
||||
}
|
||||
@
|
||||
keyframes disapear { 50% {
|
||||
-webkit-transform: translateX(-5%);
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
|
||||
100%
|
||||
{
|
||||
-webkit-transform
|
||||
|
||||
|
||||
|
||||
|
||||
:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
translateX
|
||||
|
||||
|
||||
|
||||
|
||||
(200%);
|
||||
transform
|
||||
|
||||
|
||||
|
||||
|
||||
:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
translateX
|
||||
|
||||
|
||||
|
||||
|
||||
(200%);
|
||||
}
|
||||
}
|
||||
a.hovertext {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
text-decoration: none !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.hovertext:after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 0.5em 20px;
|
||||
width: 460px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
text-decoration: none !important;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
}
|
||||
|
||||
a.hovertext:hover:after, a.hovertext:focus:after {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
#console {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
-webkit-transition: border-color ease-in-out .15s, box-shadow
|
||||
ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
}
|
||||
|
||||
#console {
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ccc;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
}
|
||||
Loading…
Reference in New Issue