Make demo public
This commit is contained in:
Iñaki Baz Castillo
@@ -0,0 +1,5 @@
|
||||
[data-component='App'] {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
[data-component='LocalVideo'] {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
|
||||
TransitionAppear(500ms);
|
||||
|
||||
+desktop() {
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
border: 2px solid rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
border: 2px solid rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
&.state-checking {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
&.state-checking {
|
||||
animation: LocalVideo-state-checking .75s infinite linear;
|
||||
}
|
||||
|
||||
&.state-connected,
|
||||
&.state-completed {
|
||||
border-color: rgba(#49ce3e, 0.9);
|
||||
}
|
||||
|
||||
&.state-failed,
|
||||
&.state-disconnected,
|
||||
&.state-closed {
|
||||
border-color: rgba(#ff2000, 0.75);
|
||||
}
|
||||
|
||||
> .controls {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
> .control {
|
||||
pointer-events: auto;
|
||||
flex: 0 0 auto;
|
||||
margin: 4px !important;
|
||||
margin-left: 0 !important;
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
padding: 0 !important;
|
||||
background-color: rgba(#000, 0.25) !important;
|
||||
border-radius: 100%;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#000, 0.85) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .info {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .peer-id {
|
||||
padding: 4px 14px;
|
||||
font-size: 14px;
|
||||
color: rgba(#fff, 0.75);
|
||||
background: rgba(#000, 0.6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes LocalVideo-state-checking {
|
||||
50% {
|
||||
border-color: rgba(orange, 0.9);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
[data-component='RemoteVideo'] {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
TransitionAppear(500ms);
|
||||
|
||||
&.fullsize {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
> .info {
|
||||
justify-content: flex-end;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
+desktop() {
|
||||
height: 350px;
|
||||
width: 400px;
|
||||
margin: 4px;
|
||||
border: 4px solid rgba(#fff, 0.2);
|
||||
|
||||
&.fullsize {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
border: 4px solid rgba(#fff, 0.2);
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
|
||||
&.fullsize {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .controls {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
opacity: 0.8;
|
||||
|
||||
> .control {
|
||||
pointer-events: auto;
|
||||
flex: 0 0 auto;
|
||||
margin: 4px !important;
|
||||
margin-left: 0 !important;
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
padding: 0 !important;
|
||||
background-color: rgba(#000, 0.25) !important;
|
||||
border-radius: 100%;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#000, 0.85) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .info {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
+desktop() {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
justify-content: flex-end;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
> .peer-id {
|
||||
padding: 6px 16px;
|
||||
font-size: 16px;
|
||||
color: rgba(#fff, 0.75);
|
||||
background: rgba(#000, 0.6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
[data-component='Room'] {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
+desktop() {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .room-link-wrapper {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
> .room-link {
|
||||
width: auto;
|
||||
background-color: rgba(#fff, 0.8);
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
box-shadow: 0px 3px 12px 2px rgba(#111, 0.4);
|
||||
|
||||
> a.link {
|
||||
display: block;;
|
||||
user-select: none;
|
||||
pointer-events: auto;
|
||||
padding: 10px 20px;
|
||||
color: #104758;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.25s;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .remote-videos {
|
||||
+desktop() {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding-bottom: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
> .local-video {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 100;
|
||||
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
|
||||
|
||||
+desktop() {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
> .show-stats {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: -40px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url('/resources/images/stats.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(#000, 0.25);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
[data-component='Stats'] {
|
||||
TransitionAppear(500ms);
|
||||
|
||||
+desktop() {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
min-width: 100px;
|
||||
background-color: rgba(#1c446f, 0.75);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(#1c446f, 0.75);
|
||||
padding: 40px 10px;
|
||||
font-size: 0.9rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
> .close {
|
||||
background-image: url('/resources/images/close.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
+desktop() {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .block {
|
||||
padding: 5px;
|
||||
|
||||
+desktop() {
|
||||
border-right: 1px solid rgba(#fff, 0.15);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
> .item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 3px 0;
|
||||
font-size: 0.95em;
|
||||
font-weight: 300;
|
||||
|
||||
> .key {
|
||||
text-align: right;
|
||||
color: rgba(#fff, 0.9);
|
||||
|
||||
+desktop() {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
> .value {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
color: #aae22b;
|
||||
|
||||
+desktop() {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
[data-component='Video'] {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
> .resolution {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 4px 8px;
|
||||
border-bottom-right-radius: 5px;
|
||||
background: rgba(#000, 0.5);
|
||||
transition-property: background;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(#000, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 11px;
|
||||
color: rgba(#fff, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
> .volume {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .bar {
|
||||
width: 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(yellow, 0.65);
|
||||
transition-property: height background-color;
|
||||
transition-duration: 0.25s;
|
||||
|
||||
&.level0 { height: 0; background-color: rgba(yellow, 0.65); }
|
||||
&.level1 { height: 10%; background-color: rgba(yellow, 0.65); }
|
||||
&.level2 { height: 20%; background-color: rgba(yellow, 0.65); }
|
||||
&.level3 { height: 30%; background-color: rgba(yellow, 0.65); }
|
||||
&.level4 { height: 40%; background-color: rgba(orange, 0.65); }
|
||||
&.level5 { height: 50%; background-color: rgba(orange, 0.65); }
|
||||
&.level6 { height: 60%; background-color: rgba(red, 0.65); }
|
||||
&.level7 { height: 70%; background-color: rgba(red, 0.65); }
|
||||
&.level8 { height: 80%; background-color: rgba(#000, 0.65); }
|
||||
&.level9 { height: 90%; background-color: rgba(#000, 0.65); }
|
||||
&.level10 { height: 100%; background-color: rgba(#000, 0.65); }
|
||||
}
|
||||
}
|
||||
|
||||
> video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
background-color: rgba(#041918, 0.65);
|
||||
background-image: url('/resources/images/buddy.svg');
|
||||
background-position: bottom;
|
||||
background-size: auto 85%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&.mirror {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user