From 9a96d6bf6603735ac8b2d3ade67cbda9d7e59e27 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 13 Mar 2015 12:38:16 +0100 Subject: [PATCH 1/6] fix camera bug in FF --- .../app/controllers/_profile/avatar.js.coffee | 121 ++++++++++-------- 1 file changed, 68 insertions(+), 53 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_profile/avatar.js.coffee b/app/assets/javascripts/app/controllers/_profile/avatar.js.coffee index 653f6ffc3..a26ba1636 100644 --- a/app/assets/javascripts/app/controllers/_profile/avatar.js.coffee +++ b/app/assets/javascripts/app/controllers/_profile/avatar.js.coffee @@ -242,7 +242,7 @@ class Camera extends App.ControllerModal @button = 'Save' @buttonClass = 'btn--success is-disabled' @centerButtons = [{ - className: 'btn--success js-shoot', + className: 'btn--success js-shoot is-disabled', text: 'Shoot' }] @@ -258,25 +258,26 @@ class Camera extends App.ControllerModal onShootClick: => if @photoTaken @photoTaken = false - @countdown = 0 - @submitButton.addClass('is-disabled') + @submitButton.addClass 'is-disabled' @shootButton - .removeClass('btn--danger') - .addClass('btn--success') - .text( App.i18n.translateInline('Shoot') ) + .removeClass 'btn--danger' + .addClass 'btn--success' + .text App.i18n.translateInline('Shoot') @updatePreview() else @shoot() @shootButton - .removeClass('btn--success') - .addClass('btn--danger') - .text( App.i18n.translateInline('Discard') ) + .removeClass 'btn--success' + .addClass 'btn--danger' + .text App.i18n.translateInline('Discard') shoot: => @photoTaken = true - @submitButton.removeClass('is-disabled') + @submitButton.removeClass 'is-disabled' onWebcamReady: (stream) => + @shootButton.removeClass 'is-disabled' + # in case the modal is closed before the # request was fullfilled if @hidden @@ -286,14 +287,14 @@ class Camera extends App.ControllerModal # cache stream so that we can later turn it off @stream = stream - @video.attr 'src', window.URL.createObjectURL(stream) - # setup the offset to center the webcam image perfectly # when the stream is ready - @video.on('canplay', @setupPreview) + @video.on 'canplay', @setupPreview # start to update the preview once its playing - @video.on('play', @updatePreview) + @video.on 'playing', @updatePreview + + @video.attr 'src', window.URL.createObjectURL(stream) # start the stream @video.get(0).play() @@ -316,47 +317,56 @@ class Camera extends App.ControllerModal @preview.attr width: @size height: @size - @offsetX = (@video.width() - @size)/2 @centerX = @size/2 @centerY = @size/2 - updatePreview: => - @ctx.clearRect(0, 0, @preview.width(), @preview.height()) - # create circle clip area - @ctx.save() - - @ctx.beginPath() - @ctx.arc(@centerX, @centerY, @size/2, 0, 2 * Math.PI, false) - @ctx.closePath() - @ctx.clip() + @ctx.translate @centerX, @centerY # flip the image to look like a mirror - @ctx.scale(-1,1) + @ctx.scale -1, 1 - # draw video frame - @ctx.drawImage(@video.get(0), @offsetX, 0, -@video.width(), @size) - - # flip the image to look like a mirror - @ctx.scale(-1,1) - - # add anti-aliasing - # http://stackoverflow.com/a/12395939 + # settings for anti-aliasing @ctx.strokeStyle = @backgroundColor @ctx.lineWidth = 2 - @ctx.arc(@centerX, @centerY, @size/2, 0, 2 * Math.PI, false) - @ctx.stroke() - # reset the clip area to be able to draw on the whole canvas - @ctx.restore() + updatePreview: => + # try catch fixes a Firefox error + # were the drawImage wouldn't work + # because the video didn't get inizialized + # yet internally + # http://stackoverflow.com/questions/18580844/firefox-drawimagevideo-fails-with-ns-error-not-available-component-is-not-av + try + @ctx.globalCompositeOperation = 'source-over' + @ctx.clearRect 0, 0, @size, @size + @ctx.beginPath() + @ctx.arc 0, 0, @size/2, 0, 2 * Math.PI, false + @ctx.closePath() + @ctx.fill() + @ctx.globalCompositeOperation = 'source-atop' - # update the preview again as soon as - # the browser is ready to draw a new frame - if not @photoTaken - requestAnimationFrame @updatePreview - else - # cache raw video data - @cacheScreenshot() + # draw video frame + @ctx.drawImage @video.get(0), -@video.width()/2, -@size/2, @video.width(), @size + + # add anti-aliasing + # http://stackoverflow.com/a/12395939 + @ctx.beginPath() + @ctx.arc 0, 0, @size/2, 0, 2 * Math.PI, false + @ctx.closePath() + @ctx.stroke() + + # update the preview again as soon as + # the browser is ready to draw a new frame + if not @photoTaken + requestAnimationFrame @updatePreview + else + # cache raw video data + @cacheScreenshot() + catch e + if e.name is "NS_ERROR_NOT_AVAILABLE" + setTimeout @updatePreview, 200 + else + throw e initializeCache: -> # create virtual canvas @@ -367,18 +377,21 @@ class Camera extends App.ControllerModal # reset video height @video.attr height: '' - @cache.attr - width: @video.height() - height: @video.height() + # cache screenshot as big as possible (native webcam dimensions) + size = Math.min @video.height(), @video.width() - offsetX = (@video.width() - @video.height())/2 + @cache.attr + width: size + height: size # draw full resolution screenshot @cacheCtx.save() - # flip image - @cacheCtx.scale(-1,1) - @cacheCtx.drawImage(@video.get(0), offsetX, 0, -@video.width(), @video.height()) + # transform and flip image + @cacheCtx.translate size/2, size/2 + @cacheCtx.scale -1, 1 + + @cacheCtx.drawImage @video.get(0), -@video.width()/2, -@video.height()/2, @video.width(), @video.height() @cacheCtx.restore() @@ -391,6 +404,8 @@ class Camera extends App.ControllerModal onSubmit: (e) => e.preventDefault() - # send picture to the - @options.callback( @cache.get(0).toDataURL() ) + # send picture to the callback + console.log @cache.get(0).toDataURL() + window.file = @cache.get(0).toDataURL() + @options.callback @cache.get(0).toDataURL() @hide() From 115fe897bb5e93ec4205f62c61fa528af0344d0f Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 13 Mar 2015 12:38:42 +0100 Subject: [PATCH 2/6] fix modal center controls to align center --- app/assets/javascripts/app/views/modal.jst.eco | 12 +++++++++--- app/assets/stylesheets/zammad.css.scss | 12 ++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/app/views/modal.jst.eco b/app/assets/javascripts/app/views/modal.jst.eco index ca88a0c35..21764759b 100644 --- a/app/assets/javascripts/app/views/modal.jst.eco +++ b/app/assets/javascripts/app/views/modal.jst.eco @@ -22,13 +22,19 @@
<% if @cancel: %> - <%- @T( 'Cancel & Go Back' ) %> +
+ <%- @T( 'Cancel & Go Back' ) %> +
<% end %> <% for button in @centerButtons: %> -
<%- @T( button.text ) %>
+
+
<%- @T( button.text ) %>
+
<% end %> <% if @button: %> - +
+ +
<% end %>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 81fdb463e..6c4f536da 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -4374,6 +4374,14 @@ footer { border: none; } + .modal-leftFooter, + .modal-centerFooter, + .modal-rightFooter { + @extend .flex; + @extend .horizontal; + @extend .start; + } + .modal.modal--local { display: block; padding-left: 40px; @@ -5511,6 +5519,10 @@ body.fit { width: 33.33%; } +.align-left { + margin-right: auto; +} + .align-right { margin-left: auto; } From 58438d32e776cf62d9c2a3653c858a413ef1f9be Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 13 Mar 2015 14:03:43 +0100 Subject: [PATCH 3/6] fix Bug: FF und lange attachment names --- app/assets/stylesheets/zammad.css.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 6c4f536da..d1514fa9e 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -3827,6 +3827,7 @@ footer { .attachment-name { margin-right: 5px; + word-break: break-all; } .attachment-size { From cef8fcf09efdfdd2462853532735285ccdbb012a Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 13 Mar 2015 14:34:35 +0100 Subject: [PATCH 4/6] add custom radio buttons --- .../javascripts/app/views/generic/table.jst.eco | 11 ++++++++--- app/assets/stylesheets/zammad.css.scss | 15 +++++++++++++-- public/assets/images/sprite.svg | 9 +++++++-- 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco index 003c2318f..608b0872b 100644 --- a/app/assets/javascripts/app/views/generic/table.jst.eco +++ b/app/assets/javascripts/app/views/generic/table.jst.eco @@ -3,7 +3,7 @@ <% if @checkbox: %> -