Skip to content

A
awrtc
Commit f8bd91c5 by Иван Кубота
Options

Refactor camera adding functions.

Change UI Move PositionSelect to separate file
parent 371cda0f
Showing with 390 additions and 316 deletions
build/app.js
AddCss('/main.css');
let content, remoteVideoEl; let content, remoteVideoEl;
var getConferenceID = function() {
return 'DDD'.replace(/D/g, ()=>Math.random()*10|0)
};
const store = window.store = new Store({ const store = window.store = new Store({
conference_id: 'DDD'.replace(/D/g, ()=>Math.random()*10|0), // LUCID conference_id: getConferenceID(), // LUCID
connection: false, connection: false,
webcamtypes: [ webcamtypes: [
{text: 'Left', value: 'Left', filter: 'RemoteUser'},
{text: 'Center', value: 'Center', filter: 'OfficeUserLeft'}, {text: 'Center', value: 'Center', filter: 'OfficeUserLeft'},
{text: 'Right', value: 'Right', filter: 'RemoteUser'}, {text: 'Right', value: 'Right', filter: 'RemoteUser'},
{text: 'Left', value: 'Left', filter: 'RemoteUser'},
], ],
guestPositions: [ guestPositions: [
...@@ -18,7 +22,7 @@ const store = window.store = new Store({ ...@@ -18,7 +22,7 @@ const store = window.store = new Store({
{text: 'Remote Guest', value: 'RemoteUser', realValue: 'RemoteUser'}, {text: 'Remote Guest', value: 'RemoteUser', realValue: 'RemoteUser'},
{text: 'Office Guest', value: 'OfficeUserLeft', realValue: 'OfficeUser'}, {text: 'Office Guest', value: 'OfficeUserLeft', realValue: 'OfficeUser'},
/*{text: 'Office User Right', value: 'OfficeUserRight'}, /*{text: 'Office User Right', value: 'OfficeUserRight'},
{text: 'Office User Left', value: 'OfficeUserLeft'},*/ {text: 'Office User Left', value: 'OfficseUserLeft'},*/
], ],
}); });
...@@ -43,7 +47,7 @@ var params = location.hash.replace('#/','') ...@@ -43,7 +47,7 @@ var params = location.hash.replace('#/','')
if(params.id){ if(params.id){
store.set('conference_id', params.id); store.set('conference_id', params.id);
Screen.show( 'Conference' ); Screen.show( 'Conference', true );
}else{ }else{
Screen.show( 'Main' ); Screen.show( 'Main' );
} }
......
build/index.html
...@@ -10,270 +10,6 @@ ...@@ -10,270 +10,6 @@
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js" crossorigin="anonymous"></script>
<script src="https://form.dev/vanilla/build/rDOM_latest.js"></script> <script src="https://form.dev/vanilla/build/rDOM_latest.js"></script>
<style>
@font-face {
font-family: "Amazon Ember";
src: url("font/AmazonEmber_W_Bd.woff2"), url("font/AmazonEmber_W_Bd.woff");
font-weight: bold;
}
@font-face {
font-family: "Amazon Ember";
src: url("font/AmazonEmber_W_Rg.woff2"), url("font/AmazonEmber_W_Rg.woff");
font-weight: normal;
}
* {
font-family: "Amazon Ember", Verdana;
}
img.logo {
position: absolute;
top: 40px;
left: 40px;
}
html {
height: 100%;
}
.main-content {
margin: 16px 0;
}
#content {
height: 100%;
position: relative;
}
.main-background {
display: flex;
flex-direction: column;
height: 100%;
background: url(/img/back.jpg);
background-size: cover;
background-position-x: center;
}
.main-background:before {
content: '';
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
right: 0;
bottom: 0;
}
.main-background .p, .main-background .h1 {
color: #fff;
}
.main-background .p {
margin-top: 9px;
}
.top-bar {
height: 64px;
background: #1E143A;
padding: 16px 44px;
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
.button {
box-sizing: border-box;
border-radius: 20px;
padding: 6px 20px;
margin-left: 16px;
cursor: pointer;
}
.button.primary {
background: #584DDA;
color: #fff;
border: 2px solid #584DDA;
}
.button.secondary {
background: transparent;
color: #fff;
border: 2px solid;
}
.buttons {
float: right;
display: flex;
}
.main-buttons {
display: flex;
margin-top: 40px;
}
.sub-content {
position: relative;
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
/*position: absolute;*/
/*left: 12.4%;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
}
.main-background .button {
margin-right: 16px;
margin-left: 0;
padding: 8px 32px;
font-size: 16px;
}
button.dropdown-field__toggler:after {
content: '▼';
}
button.dropdown-field__toggler {
background: transparent !important;
border: 0;
border-bottom: 2px solid #594CD7;
width: 366px;
min-height: 34px;
position: relative;
text-align: left;
padding: 4px;
font-size: 14px;
line-height: 24px;
cursor: pointer;
}
button.dropdown-field__toggler:after {
content: '▼';
position: absolute;
top: 3px;
right: 10px;
font-family: arial;
font-size: 10px;
transform: scaleY(0.7) translateY(4px);
}
.dropdown-field--opened button.dropdown-field__toggler:after {
content: '▲';
}
input[type="text"] {
background: transparent !important;
border: 0;
line-height: 36px;
border-bottom: 2px solid #fff;
font-size: 16px;
color: #fff;
outline: none;
}
input[type="text"]:focus {
border-bottom: 2px solid #594CD7;
}
.page-content {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
}
.block {
margin-bottom: 40px;
}
.header {
font-size: 32px;
margin-bottom: 8px;
}
.h1 {
font-size: 40px;
line-height: 64px;
font-style: normal;
font-weight: bold;
}
.p {
font-size: 16px;
line-height: 32px;
font-style: normal;
font-weight: normal;
}
.input {
border: none;
padding: 4px 8px;
border-bottom: 2px solid #00000066;
width: 366px;
}
.input:focus-visible {
outline: none;
}
.input:focus {
border-bottom: 2px solid #594CD7;
}
.label_label {
display: inline-block;
width: 108px;
font-size: 16px;
padding: 4px 0 0 2px;
}
.callapp_local_video {
display: none;
}
.hidden {
display: none;
}
.income-video {
display: inline-block;
margin: 20px 8px 0 0;
}
.income-video-id {
position: absolute;
z-index: 1;
}
.dropdown-field__tooltip {
display: none;
}
.dropdown-field--opened .dropdown-field__tooltip {
display: block;
position: absolute;
background: #fff;
border: 2px solid #594CD7;
z-index: 1;
padding: 8px 0;
margin-top: -2px;
min-width: 362px;
}
.dropdown-item {
padding: 8px 20px;
font-size: 14px;
line-height: 20px;
/* margin-bottom: 8px; */
}
.dropdown-item:hover {
background: #594CD7;
color: #fff;
cursor: pointer;
}
.form-field__label-text {
font-size: 24px;
font-weight: bold;
margin: 40px 0 4px;
display: block;
line-height: 32px;
}
.form-field {
margin: 2px 0 12px;
}
.canvas-resizer canvas {
display: block;
}
.canvas-resizer {
float: right;
position: relative;
top: 66px;
}
.description.gray {
color: #5C5C5C;
}
.description {
font-size: 14px;
line-height: 24px;
}
</style>
</head> </head>
<body> <body>
...@@ -303,6 +39,7 @@ ...@@ -303,6 +39,7 @@
<script src="view/TableComponent.js"></script> <script src="view/TableComponent.js"></script>
<script src="view/CanvasResizer.js"></script> <script src="view/CanvasResizer.js"></script>
<script src="view/Screen.js"></script> <script src="view/Screen.js"></script>
<script src="view/PositionSelect.js"></script>
<script src="view/MainScreen.js"></script> <script src="view/MainScreen.js"></script>
<script src="view/CallScreen.js"></script> <script src="view/CallScreen.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
......
build/main.css 0 → 100644
@font-face {
font-family: "Amazon Ember";
src: url("font/AmazonEmber_W_Bd.woff2"), url("font/AmazonEmber_W_Bd.woff");
font-weight: bold;
}
@font-face {
font-family: "Amazon Ember";
src: url("font/AmazonEmber_W_Rg.woff2"), url("font/AmazonEmber_W_Rg.woff");
font-weight: normal;
}
* {
font-family: "Amazon Ember", Verdana;
}
img.logo {
position: absolute;
top: 40px;
left: 40px;
}
html {
height: 100%;
}
.main-content {
margin: 16px 0;
}
#content {
height: 100%;
position: relative;
}
.main-background {
display: flex;
flex-direction: column;
height: 100%;
background: url(/img/back.jpg);
background-size: cover;
background-position-x: center;
}
.main-background:before {
content: '';
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
right: 0;
bottom: 0;
}
.main-background .p, .main-background .h1 {
color: #fff;
}
.main-background .p {
margin-top: 9px;
}
.top-bar {
height: 64px;
background: #1E143A;
padding: 16px 44px;
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
.button {
box-sizing: border-box;
border-radius: 20px;
padding: 6px 20px;
margin-left: 16px;
cursor: pointer;
}
.button.primary {
background: #584DDA;
color: #fff;
border: 2px solid #584DDA;
}
.button.orange {
background: rgba(240, 89, 41, 0.92);
color: #fff;
border: 2px solid rgba(240, 89, 41, 0.92);
}
.button.primary:disabled, .button.primary.disabled {
opacity: 0.5;
}
.button.secondary {
background: transparent;
color: #fff;
border: 2px solid;
}
.buttons {
float: right;
display: flex;
}
.main-buttons {
display: flex;
margin-top: 40px;
}
.sub-content {
position: relative;
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
/*position: absolute;*/
/*left: 12.4%;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
}
.main-background .button {
margin-right: 16px;
margin-left: 0;
padding: 8px 32px;
font-size: 16px;
}
button.dropdown-field__toggler:after {
content: '▼';
}
button.dropdown-field__toggler {
background: transparent !important;
border: 0;
border-bottom: 2px solid #594CD7;
width: 366px;
min-height: 34px;
position: relative;
text-align: left;
padding: 4px;
font-size: 14px;
line-height: 24px;
cursor: pointer;
}
button.dropdown-field__toggler:after {
content: '▼';
position: absolute;
top: 3px;
right: 10px;
font-family: arial;
font-size: 10px;
transform: scaleY(0.7) translateY(4px);
}
.dropdown-field--opened button.dropdown-field__toggler:after {
content: '▲';
}
input[type="text"] {
background: transparent !important;
border: 0;
line-height: 36px;
border-bottom: 2px solid #fff;
font-size: 16px;
color: #fff;
outline: none;
}
input[type="text"]:focus {
border-bottom: 2px solid #594CD7;
}
.page-content {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
}
.block {
margin-bottom: 40px;
}
.header {
font-size: 32px;
margin-bottom: 8px;
}
.h1 {
font-size: 40px;
line-height: 64px;
font-style: normal;
font-weight: bold;
}
.p {
font-size: 16px;
line-height: 32px;
font-style: normal;
font-weight: normal;
}
.input {
border: none;
padding: 4px 8px;
border-bottom: 2px solid #00000066;
width: 366px;
}
.input:focus-visible {
outline: none;
}
.input:focus {
border-bottom: 2px solid #594CD7;
}
.label_label {
display: inline-block;
width: 108px;
font-size: 16px;
padding: 4px 0 0 2px;
}
.callapp_local_video {
display: none;
}
.hidden {
display: none;
}
.income-video {
display: inline-block;
margin: 20px 8px 0 0;
}
.income-video-id {
position: absolute;
z-index: 1;
}
.dropdown-field__tooltip {
display: none;
}
.dropdown-field--opened .dropdown-field__tooltip {
display: block;
position: absolute;
background: #fff;
border: 2px solid #594CD7;
z-index: 1;
padding: 8px 0;
margin-top: -2px;
min-width: 362px;
}
.dropdown-item {
padding: 8px 20px;
font-size: 14px;
line-height: 20px;
/* margin-bottom: 8px; */
}
.dropdown-item:hover {
background: #594CD7;
color: #fff;
cursor: pointer;
}
.form-field__label-text {
font-size: 24px;
font-weight: bold;
margin: 40px 0 4px;
display: block;
line-height: 32px;
}
.form-field {
margin: 2px 0 12px;
}
.canvas-resizer canvas {
display: block;
}
.canvas-resizer {
float: right;
position: relative;
top: 66px;
}
.description.gray {
color: #5C5C5C;
}
.description {
font-size: 14px;
line-height: 24px;
}
\ No newline at end of file
build/view/CallScreen.js
...@@ -81,7 +81,7 @@ Screen.Conference = function() { ...@@ -81,7 +81,7 @@ Screen.Conference = function() {
}; };
} }
var camera1canvas, camera2canvas, single = new Store.Value.Boolean(true); var single = new Store.Value.Boolean(true);
var linkHook = _=> var linkHook = _=>
store.sub('conference_id', function(val) { store.sub('conference_id', function(val) {
...@@ -91,23 +91,24 @@ Screen.Conference = function() { ...@@ -91,23 +91,24 @@ Screen.Conference = function() {
var streams = {}; var streams = {};
var userID = 0; var cameraID = 0;
var remoteVideoEl = D.div({cls: 'remote-video'}); var remoteVideoEl = D.div({cls: 'remote-video'});
var generateUserUI = function() { var generateCameraUI = function() {
var currentUserID = userID; var currentCameraID = cameraID;
cameraID++;
var camTypes = store.get('webcamtypes'); var camTypes = store.get('webcamtypes');
store.set('webcam'+userID, camTypes[userID % camTypes.length].value); store.set('webcam'+currentCameraID, camTypes[currentCameraID % camTypes.length].value);
var userRoles = store.get('userRoles'); var userRoles = store.get('userRoles');
store.set('userRole'+userID, userRoles[userID % userRoles.length].value); store.set('userRole'+currentCameraID, userRoles[currentCameraID % userRoles.length].value);
var guestPositions = store.get('guestPositions'); var guestPositions = store.get('guestPositions');
store.set('guestPosition'+userID, false); store.set('guestPosition'+currentCameraID, false);
var cameras = ['Left', 'Center', 'Right']
var cameraCanvas, canvasResizerEl, var cameraCanvas, canvasResizerEl,
dom = D.div( { cls: 'block', style: { marginBottom: '80px' } }, dom = D.div( { cls: 'block', style: { marginBottom: '80px' } },
D.div( { cls: 'header' }, 'Camera ' + ( currentUserID + 1 ) ), D.div( { cls: 'header' }, cameras[currentCameraID%3] + ' Camera' ),
canvasResizerEl = CanvasResizer( canvasResizerEl = CanvasResizer(
cameraCanvas = D.h( 'canvas', { cameraCanvas = D.h( 'canvas', {
cls: "output_canvas", cls: "output_canvas",
...@@ -119,32 +120,27 @@ Screen.Conference = function() { ...@@ -119,32 +120,27 @@ Screen.Conference = function() {
} }
} ) } )
), ),
TableComponent({
roles: 'userRoles',
role: store.bind( 'userRole' + userID ),
guestPositions: 'guestPositions', /*Select( {
guestPosition: store.bind( 'guestPosition' + userID )
}),
Select( {
values: 'userRoles', values: 'userRoles',
bind: store.bind( 'userRole' + userID ), bind: store.bind( 'userRole' ),
label: 'Your role', label: 'Your role',
disabled: isConnected disabled: isConnected
} ), } ),*/
Select( { Select( {
values: 'videoinput', values: 'videoinput',
bind: store.bind( 'videoinput' + userID ), bind: store.bind( 'videoinput' + currentCameraID ),
label: 'Camera device', label: 'Camera device',
disabled: isConnected disabled: isConnected
} ), } ),
Select( { /* Select( {
values: 'webcamtypes', values: 'webcamtypes',
bind: store.bind( 'webcam' + userID ), bind: store.bind( 'webcam' + cameraID ),
label: 'Camera position', label: 'Camera position',
filter: store.bind( 'userRole' + userID ), filter: store.bind( 'userRole' + cameraID ),
disabled: isConnected disabled: isConnected
} ) } ),*/
); );
...@@ -167,11 +163,11 @@ Screen.Conference = function() { ...@@ -167,11 +163,11 @@ Screen.Conference = function() {
if(!is) if(!is)
return; return;
var count = devices.videoinput.length; var count = devices.videoinput.length;
store.set('videoinput'+currentUserID, devices.videoinput[ store.set('videoinput'+currentCameraID, devices.videoinput[
(count-1-currentUserID +count*currentUserID)%count (count-1-currentCameraID +count*currentCameraID)%count
].value); ].value);
}); });
store.sub(['inputsSetted', 'videoinput'+userID], async (is, input) => { store.sub(['inputsSetted', 'videoinput'+currentCameraID], async (is, input) => {
if(!is) if(!is)
return; return;
...@@ -194,13 +190,15 @@ Screen.Conference = function() { ...@@ -194,13 +190,15 @@ Screen.Conference = function() {
canvasResizerEl.style.display = 'block'; canvasResizerEl.style.display = 'block';
}catch(e){ }catch(e){
video1.srcObject = null;
video1.pause();
canvasResizerEl.style.display = 'none'; canvasResizerEl.style.display = 'none';
console.error(e) console.error(e)
} }
} }
for(var streamID in streams){ for(var streamID in streams){
var inUse = false; var inUse = false;
for(var j = 0; j <= userID; j++){ for(var j = 0; j <= cameraID; j++){
if(store.get('videoinput'+j) === streamID){ if(store.get('videoinput'+j) === streamID){
inUse = true; inUse = true;
break; break;
...@@ -219,17 +217,17 @@ Screen.Conference = function() { ...@@ -219,17 +217,17 @@ Screen.Conference = function() {
}); });
window.instances || (window.instances = []); window.instances || (window.instances = []);
var RTCinstance; var RTCinstance;
store.sub('appLoaded', function(loaded) { store.sub(['appLoaded'], function(loaded, callScreenCamerasTune) {
if(!loaded) if(!loaded)// || !callScreenCamerasTune)
return; return;
RTCinstance = new RTC( RTCinstance = new RTC(
currentUserID ? null : document.querySelector("#videoinputapp1"), currentCameraID ? null : document.querySelector("#videoinputapp1"),
cameraCanvas, 'canvas'+currentUserID, cameraCanvas, 'canvas'+currentCameraID,
currentUserID, currentCameraID,
currentUserID ? null : remoteVideoEl currentCameraID ? null : remoteVideoEl
); );
window.instances.push(RTCinstance); window.instances.push(RTCinstance);
RTCinstance.mUiRemoteVideoParent = currentUserID ? null : remoteVideoEl; RTCinstance.mUiRemoteVideoParent = currentCameraID ? null : remoteVideoEl;
var selfieSegmentation = new SelfieSegmentation( { var selfieSegmentation = new SelfieSegmentation( {
locateFile: ( file ) => { locateFile: ( file ) => {
...@@ -247,21 +245,33 @@ Screen.Conference = function() { ...@@ -247,21 +245,33 @@ Screen.Conference = function() {
} ); } );
var segmentation = async function() { var segmentation = async function() {
if(video1.videoWidth>10 && store.get('videoinput'+currentUserID)){
if( store.get( 'callScreenCamerasTune' ) ){
if(cameraID<3){
usersBlock.appendChild( generateCameraUI() )
}
if( video1.videoWidth > 10 && store.get( 'videoinput' + currentCameraID ) ){
try{
await selfieSegmentation.send( { image: video1 } ); await selfieSegmentation.send( { image: video1 } );
}catch( e ){
}
} }
}
requestAnimationFrame(segmentation); requestAnimationFrame(segmentation);
}; };
console.log(video1, canvasResizerEl, canvasElement, currentCameraID)
requestAnimationFrame(segmentation); requestAnimationFrame(segmentation);
}); });
userID++;
return dom; return dom;
} }
var usersBlock, tooMuchUsers = new Store.Value.Boolean(false); var usersBlock, tooMuchUsers = new Store.Value.Boolean(false);
var dom = D.div({cls: 'page-content'}, var dom = D.div({cls: 'page-content'},
D.div({cls: 'top-bar'}, D.div({cls: 'top-bar'},
D.h('img', {src: 'amazon-logo.svg'}), D.h('img', {src: 'amazon-logo.svg'}),
D.div({cls: 'buttons'}, D.div({cls: 'buttons hidden'},
D.h('button', {cls: ['button secondary', {hidden: Store.NOT(isConnected)}], onclick: ()=>store.set('connection', false)}, 'End session'), D.h('button', {cls: ['button secondary', {hidden: Store.NOT(isConnected)}], onclick: ()=>store.set('connection', false)}, 'End session'),
D.h('button', {cls: ['button primary', {hidden: isConnected}], onclick: ()=>store.set('connection', true)}, 'Ready to connect') D.h('button', {cls: ['button primary', {hidden: isConnected}], onclick: ()=>store.set('connection', true)}, 'Ready to connect')
) )
...@@ -274,15 +284,21 @@ Screen.Conference = function() { ...@@ -274,15 +284,21 @@ Screen.Conference = function() {
D.div({cls: 'description'}, 'Link to session: ', link), D.div({cls: 'description'}, 'Link to session: ', link),
), ),
usersBlock = D.div({cls: 'users-block'}, Screen.PositionSelect(),
generateUserUI()
usersBlock = D.div({cls: ['users-block', {
hidden: Store.NOT(store.val('callScreenCamerasTune'))
}]},
generateCameraUI(),
/*generateCameraUI(),
generateCameraUI()*/
), ),
D.h('button', {cls: ['button primary', {hidden: Store.OR(isConnected, tooMuchUsers)}], window.addACameraBtn = D.h('button', {cls: ['button primary hidden', {hidden: Store.OR(isConnected, tooMuchUsers)}],
onclick: ()=> { onclick: ()=> {
usersBlock.appendChild(generateUserUI()) usersBlock.appendChild(generateCameraUI())
if(userID > 1) /*if(cameraID > 1)
tooMuchUsers.set(true); tooMuchUsers.set(true);*/
} }
}, 'Add camera'), }, 'Add camera'),
...@@ -290,7 +306,7 @@ Screen.Conference = function() { ...@@ -290,7 +306,7 @@ Screen.Conference = function() {
D.div({cls: 'block hidden'}, D.div({cls: 'block hidden'},
D.div({cls: 'header'}, 'Conference info'), D.div({cls: 'header'}, 'Conference info'),
LabeledInput({label: 'Session ID', cls: 'callapp_address input', autocomplete: 'off', value: 'DDD'.replace(/D/g, ()=>Math.random()*10|0)}, 'conference_id'), // LUCID LabeledInput({label: 'Session ID', cls: 'callapp_address input', autocomplete: 'off', value: getConferenceID()}, 'conference_id'), // LUCID
), ),
D.div({cls: ['block', {hidden: true}]}, //Store.NOT(isConnected) D.div({cls: ['block', {hidden: true}]}, //Store.NOT(isConnected)
D.div({cls: ['header']}, 'Remote video'), D.div({cls: ['header']}, 'Remote video'),
...@@ -451,3 +467,10 @@ Screen.Conference = function() { ...@@ -451,3 +467,10 @@ Screen.Conference = function() {
})(); })();
return dom; return dom;
}; };
Screen.Conference.beforeShow = function() {
store.set({
connection: false,
callScreenCamerasTune: false
});
};
\ No newline at end of file
build/view/MainScreen.js
...@@ -12,7 +12,7 @@ Screen.Main = function() { ...@@ -12,7 +12,7 @@ Screen.Main = function() {
), ),
D.div({cls: 'main-buttons'}, D.div({cls: 'main-buttons'},
D.h('button', {cls: 'button primary', onclick: ()=>Screen.show('Conference')}, 'Create New Session'), D.h('button', {cls: 'button primary', onclick: ()=>Screen.show('Conference', true)}, 'Create New Session'),
D.h('button', {cls: 'button primary', onclick: ()=> showJoinForm.set(true)}, 'Connect to Session'), D.h('button', {cls: 'button primary', onclick: ()=> showJoinForm.set(true)}, 'Connect to Session'),
) )
), ),
...@@ -24,7 +24,7 @@ Screen.Main = function() { ...@@ -24,7 +24,7 @@ Screen.Main = function() {
), ),
D.div({cls: 'main-buttons'}, D.div({cls: 'main-buttons'},
D.h('button', {cls: 'button primary', onclick: ()=>Screen.show('Conference')}, 'Connect to Session'), D.h('button', {cls: 'button primary', onclick: ()=>Screen.show('Conference', true)}, 'Connect to Session'),
D.h('button', {cls: 'button secondary', onclick: ()=> showJoinForm.set(false)}, 'Go Back'), D.h('button', {cls: 'button secondary', onclick: ()=> showJoinForm.set(false)}, 'Go Back'),
) )
...@@ -34,3 +34,9 @@ Screen.Main = function() { ...@@ -34,3 +34,9 @@ Screen.Main = function() {
); );
return dom; return dom;
}; };
Screen.Main.beforeShow = function() {
store.set({
conference_id: getConferenceID()
});
};
\ No newline at end of file
build/view/PositionSelect.js 0 → 100644
Screen.PositionSelect = function() {
return D.div({cls: [{
hidden: store.val('callScreenCamerasTune')
}]},
D.div({cls: 'block'},
TableComponent({
roles: 'userRoles',
role: store.bind( 'userRole' ),
guestPositions: 'guestPositions',
guestPosition: store.bind( 'guestPosition' )
}),
),
D.div({cls: 'bottom-buttons'},
D.h('button', {
cls: ['button primary', {disabled: Store.NOT(store.val('guestPosition'))}],
onclick: ()=>{
store.set('callScreenCamerasTune', true);
}
}, 'Continue'),
D.h('button', {
cls: ['button orange', {hidden: /*isConnected*/false}],
onclick: ()=>{
Screen.show( 'Main', true );
}}, 'Exit to main menu')
)
);
}
\ No newline at end of file
build/view/Screen.js
const Screen = { const Screen = {
cache: {}, cache: {},
show: function(name) { show: function(name, refresh) {
const renderEl = document.getElementById('content'); const renderEl = document.getElementById('content');
D.removeChildren(renderEl); D.removeChildren(renderEl);
if(!(name in Screen.cache)){ Screen[ name ].beforeShow && Screen[ name ].beforeShow();
if(!(name in Screen.cache)){//} || refresh){
Screen.cache[ name ] = Screen[ name ](); Screen.cache[ name ] = Screen[ name ]();
} }
renderEl.appendChild(Screen.cache[name]); renderEl.appendChild(Screen.cache[name]);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment