diff --git a/animations.js b/animations.js index 45b886f..d97fab2 100644 --- a/animations.js +++ b/animations.js @@ -1,28 +1,14 @@ - -/* We need to create dynamic keyframes to show the animation from full-screen to normal. So we create a stylesheet in which we can insert CSS keyframe rules */ $("body").append(''); - -/* Click on the container */ $(".column").on('click', function() { - /* The position of the container will be set to fixed, so set the top & left properties of the container */ - if ( $(this).hasClass( "skip-animation" )){ return; } - - var bounding_box = $(this).get(0).getBoundingClientRect(); $(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' }); - - /* Set container to fixed position. Add animation */ $(this).addClass('in-animation').removeClass('pointer'); - - /* An empty container has to be added in place of the lightbox container so that the elements below don't come up - Dimensions of this empty container is the same as the original container */ $("#empty-container").remove(); $('
').insertAfter(this); - /* To animate the container from full-screen to normal, we need dynamic keyframes */ var styles = ''; styles = '@keyframes outlightbox {'; styles += '0% {'; @@ -43,97 +29,57 @@ $(".column").on('click', function() { styles += '}'; 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(); - $("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' }); - - /* Show animation */ $(this).parent().addClass('out-animation'); - - - 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"); + cleanupMediaTracks(); e.stopPropagation(); }); -/* On animationend : from normal to full screen & full screen to normal */ -$(".column").on('animationend', function(e) { -/* On animation end from normal to full-screen */ -if(e.originalEvent.animationName == 'inlightbox') { - $(this).children(".close").show(); - $(this).children(".container-inner").show(); -} -/* 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').addClass('pointer'); - - /* 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); -} +$(".column").on('animationend', function(e){ + if (e.originalEvent.animationName == 'inlightbox') { + $(this).children(".close").show(); + $(this).children(".container-inner").show(); + } + else if (e.originalEvent.animationName == 'outlightbox') { + $(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade').addClass('pointer'); + $("#empty-container").remove(); + $("#lightbox-animations").get(0).sheet.deleteRule(0); + } }); $('#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();; } - // e.preventDefault(); }); $('#audioSource3').on('mousedown touchend focusin focusout', function(e) { - var state = $('#multiselect-trigger3').data('state') || 0; + var state = $('#multiselect-trigger3').attr('data-state') || 0; if( state == 0 ) { - ////open the dropdown - $('#multiselect-trigger3').data('state', '1').addClass('open').removeClass('closed'); + $('#multiselect-trigger3').attr('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) { var state = $(this).data('state') || 0; if( state == 0 ) { @@ -154,24 +100,22 @@ $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) }); // multiselect dropdowns $('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) { - var state = $(this).data('state') || 0; + var state = $(this).attr('data-state') || 0; + if( state == 0 ) { // open the dropdown - $(this).data('state', '1').addClass('open').removeClass('closed'); + errorlog("STATE: "+state); + $(this).attr('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).attr('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(); }); - - - - diff --git a/cap.webm b/cap.webm new file mode 100644 index 0000000..e8c0f07 Binary files /dev/null and b/cap.webm differ diff --git a/convert.html b/convert.html new file mode 100644 index 0000000..b4482a4 --- /dev/null +++ b/convert.html @@ -0,0 +1,74 @@ + + +You can use FFMpeg locally to achieve much faster results.
+This tool performs the following action in your browser: fmpeg -i input.webm -vf scale=1280:720 output.mp4
+ +
You can use FFMpeg locally to achieve much faster results with either option.
+