diff --git a/builds/4chan-X.user.js b/builds/4chan-X.user.js index 4f86f6093..67fce89fe 100644 --- a/builds/4chan-X.user.js +++ b/builds/4chan-X.user.js @@ -7606,7 +7606,7 @@ ImageExpand.contract(this); return ImageExpand.expand(this); } else if (this.isClone && this.file.isExpanded && this.file.isVideo) { - return ImageExpand.setupVideo(this); + return ImageExpand.setupVideoControls(this); } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { return ImageExpand.expand(this); } @@ -7772,10 +7772,16 @@ $.rmClass(post.file.thumb, 'expanding'); post.file.isExpanded = true; if (post.file.isVideo) { - return ImageExpand.setupVideo(post, Conf['Autoplay']); + return ImageExpand.setupVideo(post); } }, videoCB: { + click: function(e) { + if (this.paused && !this.controls) { + this.play(); + return e.stopPropagation(); + } + }, mousedown: function(e) { if (e.button === 0) { return this.dataset.mousedown = 'true'; @@ -7795,23 +7801,21 @@ } } }, - setupVideo: function(post, play) { + setupVideoControls: function(post) { var cb, contract, eventName, file, video, _ref; file = post.file; video = file.fullImage; - file.videoControls = $.el('span', { - className: 'video-controls' - }); file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('target'); - video.muted = !Conf['Allow Sound']; - video.controls = Conf['Show Controls']; video.dataset.mousedown = 'false'; _ref = ImageExpand.videoCB; for (eventName in _ref) { cb = _ref[eventName]; $.on(video, eventName, cb); } + file.videoControls = $.el('span', { + className: 'video-controls' + }); if (Conf['Show Controls']) { contract = $.el('a', { textContent: 'contract', @@ -7823,11 +7827,20 @@ }); $.add(file.videoControls, [$.tn('\u00A0'), contract]); } - if (play) { + return $.add(file.text, file.videoControls); + }, + setupVideo: function(post) { + var file, video; + ImageExpand.setupVideoControls(post); + file = post.file; + video = file.fullImage; + video.muted = !Conf['Allow Sound']; + video.controls = Conf['Show Controls']; + if (Conf['Autoplay']) { video.controls = false; video.play(); if (Conf['Show Controls']) { - $.asap((function() { + return $.asap((function() { return (video.readyState >= 3 && video.currentTime <= Math.max(0.1, video.duration - 0.5)) || !file.isExpanded; }), function() { if (file.isExpanded) { @@ -7835,18 +7848,7 @@ } }, 500); } - } else if (!Conf['Show Controls']) { - play = $.el('a', { - textContent: 'play', - href: 'javascript:;' - }); - $.on(play, 'click', function(e) { - video[this.textContent](); - return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; - }); - $.add(file.videoControls, [$.tn('\u00A0'), play]); } - return $.add(file.text, file.videoControls); }, error: function() { var URL, post, src, timeoutID; diff --git a/builds/crx/script.js b/builds/crx/script.js index dd9f2a051..f83466d20 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -7625,7 +7625,7 @@ ImageExpand.contract(this); return ImageExpand.expand(this); } else if (this.isClone && this.file.isExpanded && this.file.isVideo) { - return ImageExpand.setupVideo(this); + return ImageExpand.setupVideoControls(this); } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { return ImageExpand.expand(this); } @@ -7791,10 +7791,16 @@ $.rmClass(post.file.thumb, 'expanding'); post.file.isExpanded = true; if (post.file.isVideo) { - return ImageExpand.setupVideo(post, Conf['Autoplay']); + return ImageExpand.setupVideo(post); } }, videoCB: { + click: function(e) { + if (this.paused && !this.controls) { + this.play(); + return e.stopPropagation(); + } + }, mousedown: function(e) { if (e.button === 0) { return this.dataset.mousedown = 'true'; @@ -7814,23 +7820,21 @@ } } }, - setupVideo: function(post, play) { + setupVideoControls: function(post) { var cb, contract, eventName, file, video, _ref; file = post.file; video = file.fullImage; - file.videoControls = $.el('span', { - className: 'video-controls' - }); file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('target'); - video.muted = !Conf['Allow Sound']; - video.controls = Conf['Show Controls']; video.dataset.mousedown = 'false'; _ref = ImageExpand.videoCB; for (eventName in _ref) { cb = _ref[eventName]; $.on(video, eventName, cb); } + file.videoControls = $.el('span', { + className: 'video-controls' + }); if (Conf['Show Controls']) { contract = $.el('a', { textContent: 'contract', @@ -7842,11 +7846,20 @@ }); $.add(file.videoControls, [$.tn('\u00A0'), contract]); } - if (play) { + return $.add(file.text, file.videoControls); + }, + setupVideo: function(post) { + var file, video; + ImageExpand.setupVideoControls(post); + file = post.file; + video = file.fullImage; + video.muted = !Conf['Allow Sound']; + video.controls = Conf['Show Controls']; + if (Conf['Autoplay']) { video.controls = false; video.play(); if (Conf['Show Controls']) { - $.asap((function() { + return $.asap((function() { return (video.readyState >= 3 && video.currentTime <= Math.max(0.1, video.duration - 0.5)) || !file.isExpanded; }), function() { if (file.isExpanded) { @@ -7854,18 +7867,7 @@ } }, 500); } - } else if (!Conf['Show Controls']) { - play = $.el('a', { - textContent: 'play', - href: 'javascript:;' - }); - $.on(play, 'click', function(e) { - video[this.textContent](); - return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; - }); - $.add(file.videoControls, [$.tn('\u00A0'), play]); } - return $.add(file.text, file.videoControls); }, error: function() { var URL, post, src, timeoutID; diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index 7c955149e..6c0a992d6 100755 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -23,7 +23,7 @@ ImageExpand = ImageExpand.contract @ ImageExpand.expand @ else if @isClone and @file.isExpanded and @file.isVideo - ImageExpand.setupVideo @ + ImageExpand.setupVideoControls @ else if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) ImageExpand.expand @ cb: @@ -143,9 +143,15 @@ ImageExpand = $.addClass post.nodes.root, 'expanded-image' $.rmClass post.file.thumb, 'expanding' post.file.isExpanded = true - ImageExpand.setupVideo post, Conf['Autoplay'] if post.file.isVideo + ImageExpand.setupVideo post if post.file.isVideo videoCB: + click: (e) -> + if @paused and not @controls + @play() + e.stopPropagation() + + # dragging to the left contracts the video mousedown: (e) -> @dataset.mousedown = 'true' if e.button is 0 mouseup: (e) -> @dataset.mousedown = 'false' if e.button is 0 mouseover: (e) -> @dataset.mousedown = 'false' @@ -153,43 +159,44 @@ ImageExpand = if @dataset.mousedown is 'true' and e.clientX <= @getBoundingClientRect().left ImageExpand.contract (Get.postFromNode @) - setupVideo: (post, play) -> + setupVideoControls: (post) -> {file} = post video = file.fullImage - file.videoControls = $.el 'span', - className: 'video-controls' + + # disable link to file so native controls can work file.thumb.parentNode.removeAttribute 'href' file.thumb.parentNode.removeAttribute 'target' - video.muted = !Conf['Allow Sound'] - video.controls = Conf['Show Controls'] - # drag left to contract + + # setup callbacks on video element video.dataset.mousedown = 'false' $.on video, eventName, cb for eventName, cb of ImageExpand.videoCB + + # setup controls in file info + file.videoControls = $.el 'span', + className: 'video-controls' if Conf['Show Controls'] - # contract link in file info contract = $.el 'a', textContent: 'contract' href: 'javascript:;' title: 'You can also contract the video by dragging it to the left.' $.on contract, 'click', (e) -> ImageExpand.contract post $.add file.videoControls, [$.tn('\u00A0'), contract] - if play + $.add file.text, file.videoControls + + setupVideo: (post) -> + ImageExpand.setupVideoControls post + {file} = post + video = file.fullImage + video.muted = !Conf['Allow Sound'] + video.controls = Conf['Show Controls'] + if Conf['Autoplay'] video.controls = false video.play() - # Hacky workaround for Firefox forever-loading bug + # Hacky workaround for Firefox forever-loading bug for very short videos if Conf['Show Controls'] $.asap (-> (video.readyState >= 3 and video.currentTime <= Math.max 0.1, (video.duration - 0.5)) or !file.isExpanded), -> video.controls = true if file.isExpanded , 500 - else unless Conf['Show Controls'] - play = $.el 'a', - textContent: 'play' - href: 'javascript:;' - $.on play, 'click', (e) -> - video[@textContent]() - @textContent = if @textContent is 'play' then 'pause' else 'play' - $.add file.videoControls, [$.tn('\u00A0'), play] - $.add file.text, file.videoControls error: -> post = Get.postFromNode @