diff --git a/src/General/Config.coffee b/src/General/Config.coffee index 5c5c06a25..a41b50762 100755 --- a/src/General/Config.coffee +++ b/src/General/Config.coffee @@ -245,6 +245,11 @@ Config = true 'Show controls on videos expanded inline.' ] + 'Click Passthrough': [ + false + 'Clicks on videos trigger your browser\'s default behavior. Videos can be contracted with button / dragging to the left.' + 1 + ] 'Allow Sound': [ true 'Allow sound in videos.' diff --git a/src/General/lib/clone.class b/src/General/lib/clone.class index 218f0368d..a03d67d64 100755 --- a/src/General/lib/clone.class +++ b/src/General/lib/clone.class @@ -60,6 +60,7 @@ class Clone extends Post @file.text = file.firstElementChild @file.thumb = $ '.fileThumb > [data-md5]', file @file.fullImage = $ '.full-image', file + @file.videoControls = $ '.video-controls', @file.text @file.thumb.muted = true if @file.videoThumb diff --git a/src/Images/ImageCommon.coffee b/src/Images/ImageCommon.coffee index 1d7d3a671..efda1df22 100644 --- a/src/Images/ImageCommon.coffee +++ b/src/Images/ImageCommon.coffee @@ -82,7 +82,8 @@ ImageCommon = # XXX Estimate whether clicks are on the video controls and should be ignored. onControls: (e) -> - e.target.controls and e.target.getBoundingClientRect().bottom - e.clientY < 35 + (Conf['Show Controls'] and Conf['Click Passthrough']) or + (e.target.controls and e.target.getBoundingClientRect().bottom - e.clientY < 35) download: (e) -> return true if @protocol is 'blob:' diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index db7c3d737..87fb02bd7 100755 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -11,6 +11,8 @@ ImageExpand = $.on @EAI, 'click', @cb.toggleAll Header.addShortcut @EAI, 3 $.on d, 'scroll visibilitychange', @cb.playVideos + @videoControls = $.el 'span', className: 'video-controls' + $.extend @videoControls, <%= html('\u00A0contract') %> Post.callbacks.push name: 'Image Expansion' @@ -29,6 +31,7 @@ ImageExpand = else if @file.isExpanded and @file.isVideo @file.fullImage.muted = !Conf['Allow Sound'] + ImageExpand.setupVideoCB @ ImageExpand.setupVideo @, !@origin.file.fullImage?.paused or @origin.file.wasPlaying, @file.fullImage.controls else if ImageExpand.on and !@isHidden and !@isFetchedQuote and @@ -116,9 +119,10 @@ ImageExpand = $.rmClass post.nodes.root, 'expanded-image' $.rmClass file.thumb, 'expanding' + $.rm file.videoControls if file.videoControls file.thumb.parentNode.href = file.URL file.thumb.parentNode.target = '_blank' - for x in ['isExpanding', 'isExpanded', 'wasPlaying', 'scrollIntoView'] + for x in ['isExpanding', 'isExpanded', 'videoControls', 'wasPlaying', 'scrollIntoView'] delete file[x] return unless el @@ -138,6 +142,8 @@ ImageExpand = ImageCommon.pushCache el if file.isVideo el.pause() + for eventName, cb of ImageExpand.videoCB + $.off el, eventName, cb ImageCommon.rewind file.thumb if Conf['Restart when Opened'] delete file.fullImage $.queueTask -> @@ -173,12 +179,18 @@ ImageExpand = $.after thumb, el if isVideo + # add contract link to file info + if Conf['Show Controls'] and Conf['Click Passthrough'] and !file.videoControls + file.videoControls = ImageExpand.videoControls.cloneNode true + $.add file.text, file.videoControls + # disable link to file so native controls can work thumb.parentNode.removeAttribute 'href' thumb.parentNode.removeAttribute 'target' el.loop = true el.muted = !Conf['Allow Sound'] + ImageExpand.setupVideoCB post if !isVideo $.asap (-> el.naturalHeight), -> ImageExpand.completeExpand post @@ -228,6 +240,20 @@ ImageExpand = if controls ImageCommon.addControls fullImage + videoCB: do -> + # dragging to the left contracts the video + mousedown = false + mouseover: -> mousedown = false + mousedown: (e) -> mousedown = true if e.button is 0 + mouseup: (e) -> mousedown = false if e.button is 0 + mouseout: (e) -> ImageExpand.toggle(Get.postFromNode @) if mousedown and e.clientX <= @getBoundingClientRect().left + + setupVideoCB: (post) -> + for eventName, cb of ImageExpand.videoCB + $.on post.file.fullImage, eventName, cb + if post.file.videoControls + $.on post.file.videoControls.firstElementChild, 'click', -> ImageExpand.toggle post + error: -> post = Get.postFromNode @ $.rm @