using localstorage for remoteMappingName, disabled rightclick to prevent contextmenu getting in the picture, added reload button for crashed tracks
This commit is contained in:
parent
89bbe4831a
commit
902e85eb64
27
index.html
27
index.html
|
@ -42,6 +42,16 @@
|
|||
.video {
|
||||
text-align: center;
|
||||
}
|
||||
.volume {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 50px;
|
||||
}
|
||||
.name {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -64,13 +74,11 @@
|
|||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="col-md-4 video video-2">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
@ -78,19 +86,16 @@
|
|||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="col-md-4 video video-4">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="col-md-4 video video-5">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
@ -98,19 +103,16 @@
|
|||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="col-md-4 video video-7">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="col-md-4 video video-8">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<span class="name"></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -119,16 +121,19 @@
|
|||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(0, this.value)">
|
||||
<input type="text" onchange="setName(0, this.value)">
|
||||
<button onclick="reload(0)">Reload</button>
|
||||
</div>
|
||||
<div class="volume-slider volume-1 col">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(1, this.value)">
|
||||
<input type="text" onchange="setName(1, this.value)">
|
||||
<button onclick="reload(1)">Reload</button>
|
||||
</div>
|
||||
<div class="volume-slider volume-2 col">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(2, this.value)">
|
||||
<input type="text" onchange="setName(2, this.value)">
|
||||
<button onclick="reload(2)">Reload</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
@ -136,16 +141,19 @@
|
|||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(3, this.value)">
|
||||
<input type="text" onchange="setName(3, this.value)">
|
||||
<button onclick="reload(3)">Reload</button>
|
||||
</div>
|
||||
<div class="volume-slider volume-4 col">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(4, this.value)">
|
||||
<input type="text" onchange="setName(4, this.value)">
|
||||
<button onclick="reload(4)">Reload</button>
|
||||
</div>
|
||||
<div class="volume-slider volume-5 col">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(5, this.value)">
|
||||
<input type="text" onchange="setName(5, this.value)">
|
||||
<button onclick="reload(5)">Reload</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
@ -153,16 +161,19 @@
|
|||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(6, this.value)">
|
||||
<input type="text" onchange="setName(6, this.value)">
|
||||
<button onclick="reload(6)">Reload</button>
|
||||
</div>
|
||||
<div class="volume-slider volume-7 col">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(7, this.value)">
|
||||
<input type="text" onchange="setName(7, this.value)">
|
||||
<button onclick="reload(7)">Reload</button>
|
||||
</div>
|
||||
<div class="volume-slider volume-8 col">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(8, this.value)">
|
||||
<input type="text" onchange="setName(8, this.value)">
|
||||
<button onclick="reload(8)">Reload</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
29
script.js
29
script.js
|
@ -1,3 +1,6 @@
|
|||
// DISABLE RIGHTCLICK
|
||||
document.addEventListener('contextmenu', event => event.preventDefault());
|
||||
|
||||
const options = {
|
||||
serviceUrl: 'https://meet.theater.digital/http-bind',
|
||||
hosts: {
|
||||
|
@ -288,13 +291,12 @@ function connect(e) {
|
|||
$('#room-selector').hide();
|
||||
$('#room').show();
|
||||
|
||||
let video = $('.video');
|
||||
for(let i = 0; i<video.length; i++) {
|
||||
if(!video.hasOwnProperty(i)) {
|
||||
continue;
|
||||
}
|
||||
// initiaize fields with values
|
||||
for(let i = 0; i<remoteMappingName.length; i++) {
|
||||
$('.volume-' + i + ' input[type="text"]').val(remoteMappingName[i]);
|
||||
$('.volume-' + i + ' input[type="range"]').val(0.7);
|
||||
$(video[i]).find('video').on('resize', onVideoResize).width(videoSize.width).height(videoSize.height);
|
||||
$('.video-' + i + ' video').on('resize', onVideoResize).width(videoSize.width).height(videoSize.height);
|
||||
$('.video-' + i + ' span').text(remoteMappingName[i]);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -342,7 +344,16 @@ function setName(position, name) {
|
|||
break;
|
||||
}
|
||||
}
|
||||
selectParticipants()
|
||||
selectParticipants();
|
||||
window.localStorage.setItem('remoteMappingName', JSON.stringify(remoteMappingName));
|
||||
}
|
||||
|
||||
function reload(position) {
|
||||
for(let i in tracks) {
|
||||
if(tracks.hasOwnProperty(i) && tracks[i].position === position) {
|
||||
attachUser(i, position);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateParticipantList() {
|
||||
|
@ -391,3 +402,7 @@ if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(window.localStorage.getItem('remoteMappingName') !== null) {
|
||||
remoteMappingName = JSON.parse(window.localStorage.getItem('remoteMappingName'));
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue