diff --git a/animations.js b/animations.js index 47a2cba..532a850 100644 --- a/animations.js +++ b/animations.js @@ -39,26 +39,46 @@ $(".column").on('click', function() { styles += '}'; /* Add keyframe to CSS */ + $("#lightbox-animations").empty(); $("#lightbox-animations").get(0).sheet.insertRule(styles, 0); /* Hide the window scrollbar */ $("body").css('overflow', 'hidden'); }); + /* Click on close button when full-screen */ $(".close").on('click', function(e) { -$(this).hide(); -$(".container-inner").hide(); -/* Window scrollbar normal */ -$("body").css('overflow', 'auto'); + $(this).hide(); + $(".container-inner").hide(); + + $("body").css('overflow', 'auto'); -var bounding_box = $(this).parent().get(0).getBoundingClientRect(); -$(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' }); + var bounding_box = $(this).parent().get(0).getBoundingClientRect(); + $(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' }); -/* Show animation */ -$(this).parent().addClass('out-animation'); + /* Show animation */ + $(this).parent().addClass('out-animation'); -e.stopPropagation(); + + try{ + + var oldstream = getById('previewWebcam').srcObject; + + if (oldstream){ + log("old stream found"); + oldstream.getTracks().forEach(function(track) { + track.stop(); + oldstream.removeTrack(track); + log("stopping old track"); + }); + } + activatedPreview=false; + } catch (e){ + errorlog(e); + } + log("Cleaned up Video"); + e.stopPropagation(); }); /* On animationend : from normal to full screen & full screen to normal */ @@ -70,34 +90,65 @@ if(e.originalEvent.animationName == 'inlightbox') { } /* On animation end from full-screen to normal */ else if(e.originalEvent.animationName == 'outlightbox') { -/* Remove fixed positioning, remove animation rules */ -$(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade'); + /* Remove fixed positioning, remove animation rules */ + $(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade'); -/* Remove the empty container that was earlier added */ -$("#empty-container").remove(); + /* Remove the empty container that was earlier added */ + $("#empty-container").remove(); -/* Delete the dynamic keyframe rule that was earlier created */ -$("#lightbox-animations").get(0).sheet.deleteRule(0); + /* Delete the dynamic keyframe rule that was earlier created */ + $("#lightbox-animations").get(0).sheet.deleteRule(0); } }); -// multiselect dropdowns $('#audioSource').on('mousedown touchend focusin focusout', function(e) { - var state = $('.multiselect-trigger').data('state') || 0; - if( state == 0 ) { - // open the dropdown - $('.multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); - $('.multiselect-trigger').find('.chevron').removeClass('bottom'); - $('.multiselect-trigger').parent().find('.multiselect-contents').show(); - $('.multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; - $('.multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; + var state = $('#multiselect-trigger').data('state') || 0; + if( state == 0 ) { + ////open the dropdown + $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); + $('#multiselect-trigger').find('.chevron').removeClass('bottom'); + $('#multiselect-trigger').parent().find('.multiselect-contents').show(); + $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; + $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; } - e.preventDefault(); + // e.preventDefault(); +}); + +$('#audioSource3').on('mousedown touchend focusin focusout', function(e) { + var state = $('#multiselect-trigger3').data('state') || 0; + if( state == 0 ) { + ////open the dropdown + $('#multiselect-trigger3').data('state', '1').addClass('open').removeClass('closed'); + $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); + $('#multiselect-trigger3').parent().find('.multiselect-contents').show(); + $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; + $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; + } + // e.preventDefault(); }); // multiselect dropdowns -$('.multiselect-trigger').on('mousedown touchend focusin focusout', function(e) { +$('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) { + var state = $(this).data('state') || 0; + if( state == 0 ) { + // open the dropdown + $(this).data('state', '1').addClass('open').removeClass('closed'); + $(this).find('.chevron').removeClass('bottom'); + $(this).parent().find('.multiselect-contents').show(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; + } else { + // close the dropdown + $(this).data('state', '0').addClass('closed').removeClass('open'); + $(this).find('.chevron').addClass('bottom'); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();; + } + e.preventDefault(); +}); +// multiselect dropdowns +$('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) { var state = $(this).data('state') || 0; if( state == 0 ) { // open the dropdown @@ -110,8 +161,6 @@ $('.multiselect-trigger').on('mousedown touchend focusin focusout', function(e) // close the dropdown $(this).data('state', '0').addClass('closed').removeClass('open'); $(this).find('.chevron').addClass('bottom'); - //$(this).parent().find('.multiselect-contents').hide(); - //$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide(); $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();; $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();; } @@ -119,11 +168,5 @@ $('.multiselect-trigger').on('mousedown touchend focusin focusout', function(e) }); -// when no preference is checked, uncheck the others -$('#multiselect1').on('change', function(e) { - if( $(this).is(':checked') ) { - $(this).parent().parent().find('input[type="checkbox"]').not('#multiselect1').prop('checked', false); - } - e.preventDefault(); -}); + diff --git a/dock.html b/dock.html index 65cd7fb..d469f58 100644 --- a/dock.html +++ b/dock.html @@ -138,9 +138,12 @@ function generateInvite(){ sendstr+="&quality=2"; } } - - sendstr = 'https://obs.ninja/?push=' + sid + sendstr; - viewstr = 'https://obs.ninja/?view=' + sid + viewstr + title; + + var href = window.location.href; + var dir = href.substring(0, href.lastIndexOf('/')) + "/"; + + sendstr = dir+'?push=' + sid + sendstr; + viewstr = dir+'?view=' + sid + viewstr + title; getById("container-setup").style.display="none"; getById("container-links").style.display="block"; @@ -162,7 +165,7 @@ document.addEventListener("dragstart", event => { var streamId = url.split('view='); var label = url.split('label='); - url += '&layer-name=OBS.Ninja'; + url += '&layer-name=OBSN'; if (streamId.length>1) url += ': ' + streamId[1].split('&')[0]; if (label.length>1) url += ' - ' + decodeURI(label[1].split('&')[0]); diff --git a/dual.html b/dual.html index 1cbe697..c183a8e 100644 --- a/dual.html +++ b/dual.html @@ -10,17 +10,20 @@ iframe { margin:0; padding:0; display:block; - margin:10px; - width:40%;; - height:40%; + margin:0px; + min-height: 420px; + min-width: 350px; + max-height: 720px; + max-width: 1280px; + float: left; + position: fixed; } + #viewlink { width:400px; } -#container { - display:block; - padding:0px; -} + + input{ padding:5px; margin:5px; @@ -28,44 +31,296 @@ input{ button{ padding:5px; margin:5px; + position:relative; + } + +.menu { + z-index: 10; + float:right; + right: 20px; + color: #fff; +} + +.close { + background-color: #d33; + color: #fff; +} + +.reload { + background-color: #0a0; + color: #fff; +} + +.popup { + z-index: 9; + background-color: #f1f1f1; + border: 1px solid #d3d3d3; + text-align: center; + min-height: 420px; + min-width: 350px; + max-height: 720px; + max-width: 1280px; + scale: 0.5; +} + +.popup { + position: absolute; + /*resize: both; !*enable this to css resize*! */ + overflow: auto; +} + +.popup-header { + cursor: move; + background-color: #2196f3; +} + + + +.popup .resizer-right { + width: 5px; + height: 100%; + background: transparent; + position: absolute; + right: 0; + bottom: 0; + cursor: e-resize; +} + +.popup .resizer-bottom { + width: 100%; + height: 5px; + background: transparent; + position: absolute; + right: 0; + bottom: 0; + cursor: n-resize; +} + +.popup .resizer-both { + width: 5px; + height: 5px; + background: transparent; + z-index: 10; + position: absolute; + right: 0; + bottom: 0; + cursor: nw-resize; +} + + +/*NOSELECT*/ + +.popup * { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome and Opera */ +} + -
- -