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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src:
|
||||
local('Roboto Light'),
|
||||
local('Roboto-Light'), url('/resources/fonts/Roboto-light-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src:
|
||||
local('Roboto Light'),
|
||||
local('Roboto-Light'),
|
||||
url('/resources/fonts/Roboto-light.woff2') format('woff2'),
|
||||
url('/resources/fonts/Roboto-light.ttf') format('ttf');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local('Roboto'),
|
||||
local('Roboto-Regular'),
|
||||
url('/resources/fonts/Roboto-regular-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local('Roboto'),
|
||||
local('Roboto-Regular'),
|
||||
url('/resources/fonts/Roboto-regular.woff2') format('woff2'),
|
||||
url('/resources/fonts/Roboto-regular.ttf') format('ttf');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src:
|
||||
local('Roboto Medium'),
|
||||
local('Roboto-Medium'),
|
||||
url('/resources/fonts/Roboto-medium-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src:
|
||||
local('Roboto Medium'),
|
||||
local('Roboto-Medium'),
|
||||
url('/resources/fonts/Roboto-medium.woff2') format('woff2'),
|
||||
url('/resources/fonts/Roboto-medium.ttf') format('ttf');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
@import 'nib';
|
||||
|
||||
global-reset();
|
||||
|
||||
@import './mixins';
|
||||
@import './fonts';
|
||||
|
||||
html {
|
||||
font-family: 'Roboto';
|
||||
background-image: url('/resources/images/body-bg-2.jpg');
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
|
||||
+desktop() {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#mediasoup-demo-app-container {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
// Components
|
||||
@import './components/App';
|
||||
@import './components/Room';
|
||||
@import './components/LocalVideo';
|
||||
@import './components/RemoteVideo';
|
||||
@import './components/Video';
|
||||
@import './components/Stats';
|
||||
}
|
||||
|
||||
// Hack to detect in JS the current media query
|
||||
#mediasoup-demo-app-media-query-detector {
|
||||
position: relative;
|
||||
z-index: -1000;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
|
||||
// In desktop let it "visible" so elem.offsetParent returns the parent element
|
||||
+desktop() {}
|
||||
|
||||
// In mobile ensure it's not displayed so elem.offsetParent returns null
|
||||
+mobile() {
|
||||
display: none;
|
||||
position: fixed; // Required for old IE
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
placeholder()
|
||||
&::-webkit-input-placeholder
|
||||
{block}
|
||||
&:-moz-placeholder
|
||||
{block}
|
||||
&::-moz-placeholder
|
||||
{block}
|
||||
&:-ms-input-placeholder
|
||||
{block}
|
||||
|
||||
text-fill-color()
|
||||
-webkit-text-fill-color: arguments;
|
||||
-moz-text-fill-color: arguments;
|
||||
text-fill-color: arguments;
|
||||
|
||||
mobile()
|
||||
@media (max-device-width: 720px)
|
||||
{block}
|
||||
|
||||
desktop()
|
||||
@media (min-device-width: 721px)
|
||||
{block}
|
||||
|
||||
TransitionAppear($duration = 1s, $appearOpacity = 0, $activeOpacity = 1)
|
||||
will-change: opacity;
|
||||
|
||||
&.transition-appear
|
||||
opacity: $appearOpacity;
|
||||
|
||||
&.transition-appear.transition-appear-active
|
||||
transition-property: opacity;
|
||||
transition-duration: $duration;
|
||||
opacity: $activeOpacity;
|
||||
Reference in New Issue
Block a user