Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

set up clones of videos properly

Browse Source
This commit is contained in:
ccd0 2014-04-07 17:38:00 -07:00
parent deeba623a0
commit 1ef501fc91
4 changed files with 88 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
builds/4chan-X.user.js
View File

@ -1236,7 +1236,7 @@
__extends(Clone, _super); __extends(Clone, _super);
function Clone(origin, context, contractThumb) { function Clone(origin, context, contractThumb) {
var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4; var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
this.origin = origin; this.origin = origin;
this.context = context; this.context = context;
_ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply']; _ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply'];
@ -1306,12 +1306,16 @@
this.file.thumb = $('img[data-md5]', file); this.file.thumb = $('img[data-md5]', file);
this.file.fullImage = $('.full-image', file); this.file.fullImage = $('.full-image', file);
if (contractThumb) { if (contractThumb) {
$.rmClass(this.nodes.root, 'expanded-image'); $.rmClass(root, 'expanded-image');
$.rmClass(this.file.thumb, 'expanding'); $.rmClass(this.file.thumb, 'expanding');
} }
this.file.isExpanded = $.hasClass(root, 'expanded-image');
if ((_ref4 = this.file.fullImage) != null) { if ((_ref4 = this.file.fullImage) != null) {
_ref4.removeAttribute('id'); _ref4.removeAttribute('id');
} }
if ((_ref5 = $('.video-controls', this.file.text)) != null) {
_ref5.remove();
}
} }
if (origin.isDead) { if (origin.isDead) {
this.isDead = true; this.isDead = true;
@ -7600,10 +7604,10 @@
$.on(thumb.parentNode, 'click', ImageExpand.cb.toggle); $.on(thumb.parentNode, 'click', ImageExpand.cb.toggle);
if (this.isClone && $.hasClass(thumb, 'expanding')) { if (this.isClone && $.hasClass(thumb, 'expanding')) {
ImageExpand.contract(this); ImageExpand.contract(this);
ImageExpand.expand(this); return ImageExpand.expand(this);
return; } else if (this.isClone && this.file.isExpanded && this.file.isVideo) {
} return ImageExpand.setupVideo(this);
if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) {
return ImageExpand.expand(this); return ImageExpand.expand(this);
} }
}, },
@ -7692,7 +7696,7 @@
return ImageExpand.contract(post); return ImageExpand.contract(post);
}, },
contract: function(post) { contract: function(post) {
var cb, eventName, video, _ref, _ref1; var cb, eventName, video, _ref;
if (post.file.isVideo && (video = post.file.fullImage)) { if (post.file.isVideo && (video = post.file.fullImage)) {
video.pause(); video.pause();
TrashQueue.add(video, post); TrashQueue.add(video, post);
@ -7703,9 +7707,7 @@
cb = _ref[eventName]; cb = _ref[eventName];
$.off(video, eventName, cb); $.off(video, eventName, cb);
} }
if ((_ref1 = post.file.videoControls) != null) { $.rm(post.file.videoControls);
_ref1.map($.rm);
}
delete post.file.videoControls; delete post.file.videoControls;
} }
$.rmClass(post.nodes.root, 'expanded-image'); $.rmClass(post.nodes.root, 'expanded-image');
@ -7750,25 +7752,29 @@
if (!$.hasClass(thumb, 'expanding')) { if (!$.hasClass(thumb, 'expanding')) {
return; return;
} }
post.file.isExpanded = true;
if (post.file.isVideo) {
ImageExpand.setupVideo(post);
}
if (!post.nodes.root.parentNode) { if (!post.nodes.root.parentNode) {
$.addClass(post.nodes.root, 'expanded-image'); ImageExpand.completeExpand2(post);
$.rmClass(post.file.thumb, 'expanding');
return; return;
} }
bottom = post.nodes.root.getBoundingClientRect().bottom; bottom = post.nodes.root.getBoundingClientRect().bottom;
return $.queueTask(function() { return $.queueTask(function() {
$.addClass(post.nodes.root, 'expanded-image'); ImageExpand.completeExpand2(post);
$.rmClass(post.file.thumb, 'expanding');
if (!(bottom <= 0)) { if (!(bottom <= 0)) {
return; return;
} }
return window.scrollBy(0, post.nodes.root.getBoundingClientRect().bottom - bottom); return window.scrollBy(0, post.nodes.root.getBoundingClientRect().bottom - bottom);
}); });
}, },
completeExpand2: function(post) {
var thumb;
thumb = post.file.thumb;
$.addClass(post.nodes.root, 'expanded-image');
$.rmClass(post.file.thumb, 'expanding');
post.file.isExpanded = true;
if (post.file.isVideo) {
return ImageExpand.setupVideo(post, Conf['Autoplay']);
}
},
videoCB: { videoCB: {
mousedown: function(e) { mousedown: function(e) {
if (e.button === 0) { if (e.button === 0) {
@ -7789,11 +7795,13 @@
} }
} }
}, },
setupVideo: function(post) { setupVideo: function(post, play) {
var cb, contract, eventName, file, play, video, _ref; var cb, contract, eventName, file, video, _ref;
file = post.file; file = post.file;
video = file.fullImage; video = file.fullImage;
file.videoControls = []; file.videoControls = $.el('span', {
className: 'video-controls'
});
file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('href');
file.thumb.parentNode.removeAttribute('target'); file.thumb.parentNode.removeAttribute('target');
video.muted = !Conf['Allow Sound']; video.muted = !Conf['Allow Sound'];
@ -7813,9 +7821,9 @@
$.on(contract, 'click', function(e) { $.on(contract, 'click', function(e) {
return ImageExpand.contract(post); return ImageExpand.contract(post);
}); });
file.videoControls.push($.tn('\u00A0'), contract); $.add(file.videoControls, [$.tn('\u00A0'), contract]);
} }
if (Conf['Autoplay']) { if (play) {
video.controls = false; video.controls = false;
video.play(); video.play();
if (Conf['Show Controls']) { if (Conf['Show Controls']) {
@ -7836,7 +7844,7 @@
video[this.textContent](); video[this.textContent]();
return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; return this.textContent = this.textContent === 'play' ? 'pause' : 'play';
}); });
file.videoControls.push($.tn('\u00A0'), play); $.add(file.videoControls, [$.tn('\u00A0'), play]);
} }
return $.add(file.text, file.videoControls); return $.add(file.text, file.videoControls);
}, },

56
builds/crx/script.js
View File

@ -1273,7 +1273,7 @@
__extends(Clone, _super); __extends(Clone, _super);
function Clone(origin, context, contractThumb) { function Clone(origin, context, contractThumb) {
var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4; var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
this.origin = origin; this.origin = origin;
this.context = context; this.context = context;
_ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply']; _ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply'];
@ -1343,12 +1343,16 @@
this.file.thumb = $('img[data-md5]', file); this.file.thumb = $('img[data-md5]', file);
this.file.fullImage = $('.full-image', file); this.file.fullImage = $('.full-image', file);
if (contractThumb) { if (contractThumb) {
$.rmClass(this.nodes.root, 'expanded-image'); $.rmClass(root, 'expanded-image');
$.rmClass(this.file.thumb, 'expanding'); $.rmClass(this.file.thumb, 'expanding');
} }
this.file.isExpanded = $.hasClass(root, 'expanded-image');
if ((_ref4 = this.file.fullImage) != null) { if ((_ref4 = this.file.fullImage) != null) {
_ref4.removeAttribute('id'); _ref4.removeAttribute('id');
} }
if ((_ref5 = $('.video-controls', this.file.text)) != null) {
_ref5.remove();
}
} }
if (origin.isDead) { if (origin.isDead) {
this.isDead = true; this.isDead = true;
@ -7619,10 +7623,10 @@
$.on(thumb.parentNode, 'click', ImageExpand.cb.toggle); $.on(thumb.parentNode, 'click', ImageExpand.cb.toggle);
if (this.isClone && $.hasClass(thumb, 'expanding')) { if (this.isClone && $.hasClass(thumb, 'expanding')) {
ImageExpand.contract(this); ImageExpand.contract(this);
ImageExpand.expand(this); return ImageExpand.expand(this);
return; } else if (this.isClone && this.file.isExpanded && this.file.isVideo) {
} return ImageExpand.setupVideo(this);
if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) {
return ImageExpand.expand(this); return ImageExpand.expand(this);
} }
}, },
@ -7711,7 +7715,7 @@
return ImageExpand.contract(post); return ImageExpand.contract(post);
}, },
contract: function(post) { contract: function(post) {
var cb, eventName, video, _ref, _ref1; var cb, eventName, video, _ref;
if (post.file.isVideo && (video = post.file.fullImage)) { if (post.file.isVideo && (video = post.file.fullImage)) {
video.pause(); video.pause();
TrashQueue.add(video, post); TrashQueue.add(video, post);
@ -7722,9 +7726,7 @@
cb = _ref[eventName]; cb = _ref[eventName];
$.off(video, eventName, cb); $.off(video, eventName, cb);
} }
if ((_ref1 = post.file.videoControls) != null) { $.rm(post.file.videoControls);
_ref1.map($.rm);
}
delete post.file.videoControls; delete post.file.videoControls;
} }
$.rmClass(post.nodes.root, 'expanded-image'); $.rmClass(post.nodes.root, 'expanded-image');
@ -7769,25 +7771,29 @@
if (!$.hasClass(thumb, 'expanding')) { if (!$.hasClass(thumb, 'expanding')) {
return; return;
} }
post.file.isExpanded = true;
if (post.file.isVideo) {
ImageExpand.setupVideo(post);
}
if (!post.nodes.root.parentNode) { if (!post.nodes.root.parentNode) {
$.addClass(post.nodes.root, 'expanded-image'); ImageExpand.completeExpand2(post);
$.rmClass(post.file.thumb, 'expanding');
return; return;
} }
bottom = post.nodes.root.getBoundingClientRect().bottom; bottom = post.nodes.root.getBoundingClientRect().bottom;
return $.queueTask(function() { return $.queueTask(function() {
$.addClass(post.nodes.root, 'expanded-image'); ImageExpand.completeExpand2(post);
$.rmClass(post.file.thumb, 'expanding');
if (!(bottom <= 0)) { if (!(bottom <= 0)) {
return; return;
} }
return window.scrollBy(0, post.nodes.root.getBoundingClientRect().bottom - bottom); return window.scrollBy(0, post.nodes.root.getBoundingClientRect().bottom - bottom);
}); });
}, },
completeExpand2: function(post) {
var thumb;
thumb = post.file.thumb;
$.addClass(post.nodes.root, 'expanded-image');
$.rmClass(post.file.thumb, 'expanding');
post.file.isExpanded = true;
if (post.file.isVideo) {
return ImageExpand.setupVideo(post, Conf['Autoplay']);
}
},
videoCB: { videoCB: {
mousedown: function(e) { mousedown: function(e) {
if (e.button === 0) { if (e.button === 0) {
@ -7808,11 +7814,13 @@
} }
} }
}, },
setupVideo: function(post) { setupVideo: function(post, play) {
var cb, contract, eventName, file, play, video, _ref; var cb, contract, eventName, file, video, _ref;
file = post.file; file = post.file;
video = file.fullImage; video = file.fullImage;
file.videoControls = []; file.videoControls = $.el('span', {
className: 'video-controls'
});
file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('href');
file.thumb.parentNode.removeAttribute('target'); file.thumb.parentNode.removeAttribute('target');
video.muted = !Conf['Allow Sound']; video.muted = !Conf['Allow Sound'];
@ -7832,9 +7840,9 @@
$.on(contract, 'click', function(e) { $.on(contract, 'click', function(e) {
return ImageExpand.contract(post); return ImageExpand.contract(post);
}); });
file.videoControls.push($.tn('\u00A0'), contract); $.add(file.videoControls, [$.tn('\u00A0'), contract]);
} }
if (Conf['Autoplay']) { if (play) {
video.controls = false; video.controls = false;
video.play(); video.play();
if (Conf['Show Controls']) { if (Conf['Show Controls']) {
@ -7855,7 +7863,7 @@
video[this.textContent](); video[this.textContent]();
return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; return this.textContent = this.textContent === 'play' ? 'pause' : 'play';
}); });
file.videoControls.push($.tn('\u00A0'), play); $.add(file.videoControls, [$.tn('\u00A0'), play]);
} }
return $.add(file.text, file.videoControls); return $.add(file.text, file.videoControls);
}, },

6
src/General/lib/clone.class
View File

@ -61,12 +61,16 @@ class Clone extends Post
# Contract thumbnails in quote preview # Contract thumbnails in quote preview
if contractThumb if contractThumb
$.rmClass @nodes.root, 'expanded-image' $.rmClass root, 'expanded-image'
$.rmClass @file.thumb, 'expanding' $.rmClass @file.thumb, 'expanding'
@file.isExpanded = $.hasClass root, 'expanded-image'
# Remove any #ihover ID # Remove any #ihover ID
@file.fullImage?.removeAttribute 'id' @file.fullImage?.removeAttribute 'id'
# Remove video controls.
($ '.video-controls', @file.text)?.remove()
@isDead = true if origin.isDead @isDead = true if origin.isDead
@isClone = true @isClone = true
root.dataset.clone = origin.clones.push(@) - 1 root.dataset.clone = origin.clones.push(@) - 1

33
src/Images/ImageExpand.coffee
View File

@ -22,8 +22,9 @@ ImageExpand =
# make it loading in the clone too. # make it loading in the clone too.
ImageExpand.contract @ ImageExpand.contract @
ImageExpand.expand @ ImageExpand.expand @
return else if @isClone and @file.isExpanded and @file.isVideo
if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) ImageExpand.setupVideo @
else if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler)
ImageExpand.expand @ ImageExpand.expand @
cb: cb:
toggle: (e) -> toggle: (e) ->
@ -99,7 +100,7 @@ ImageExpand =
post.file.thumb.parentNode.target = '_blank' post.file.thumb.parentNode.target = '_blank'
for eventName, cb of ImageExpand.videoCB for eventName, cb of ImageExpand.videoCB
$.off video, eventName, cb $.off video, eventName, cb
post.file.videoControls?.map($.rm) $.rm post.file.videoControls
delete post.file.videoControls delete post.file.videoControls
$.rmClass post.nodes.root, 'expanded-image' $.rmClass post.nodes.root, 'expanded-image'
$.rmClass post.file.thumb, 'expanding' $.rmClass post.file.thumb, 'expanding'
@ -126,21 +127,24 @@ ImageExpand =
completeExpand: (post) -> completeExpand: (post) ->
{thumb} = post.file {thumb} = post.file
return unless $.hasClass thumb, 'expanding' # contracted before the image loaded return unless $.hasClass thumb, 'expanding' # contracted before the image loaded
post.file.isExpanded = true
ImageExpand.setupVideo post if post.file.isVideo
unless post.nodes.root.parentNode unless post.nodes.root.parentNode
# Image might start/finish loading before the post is inserted. # Image might start/finish loading before the post is inserted.
# Don't scroll when it's expanded in a QP for example. # Don't scroll when it's expanded in a QP for example.
$.addClass post.nodes.root, 'expanded-image' ImageExpand.completeExpand2 post
$.rmClass post.file.thumb, 'expanding'
return return
{bottom} = post.nodes.root.getBoundingClientRect() {bottom} = post.nodes.root.getBoundingClientRect()
$.queueTask -> $.queueTask ->
$.addClass post.nodes.root, 'expanded-image' ImageExpand.completeExpand2 post
$.rmClass post.file.thumb, 'expanding'
return unless bottom <= 0 return unless bottom <= 0
window.scrollBy 0, post.nodes.root.getBoundingClientRect().bottom - bottom window.scrollBy 0, post.nodes.root.getBoundingClientRect().bottom - bottom
completeExpand2: (post) ->
{thumb} = post.file
$.addClass post.nodes.root, 'expanded-image'
$.rmClass post.file.thumb, 'expanding'
post.file.isExpanded = true
ImageExpand.setupVideo post, Conf['Autoplay'] if post.file.isVideo
videoCB: videoCB:
mousedown: (e) -> @dataset.mousedown = 'true' if e.button is 0 mousedown: (e) -> @dataset.mousedown = 'true' if e.button is 0
mouseup: (e) -> @dataset.mousedown = 'false' if e.button is 0 mouseup: (e) -> @dataset.mousedown = 'false' if e.button is 0
@ -149,10 +153,11 @@ ImageExpand =
if @dataset.mousedown is 'true' and e.clientX <= @getBoundingClientRect().left if @dataset.mousedown is 'true' and e.clientX <= @getBoundingClientRect().left
ImageExpand.contract (Get.postFromNode @) ImageExpand.contract (Get.postFromNode @)
setupVideo: (post) -> setupVideo: (post, play) ->
{file} = post {file} = post
video = file.fullImage video = file.fullImage
file.videoControls = [] file.videoControls = $.el 'span',
className: 'video-controls'
file.thumb.parentNode.removeAttribute 'href' file.thumb.parentNode.removeAttribute 'href'
file.thumb.parentNode.removeAttribute 'target' file.thumb.parentNode.removeAttribute 'target'
video.muted = !Conf['Allow Sound'] video.muted = !Conf['Allow Sound']
@ -167,8 +172,8 @@ ImageExpand =
href: 'javascript:;' href: 'javascript:;'
title: 'You can also contract the video by dragging it to the left.' title: 'You can also contract the video by dragging it to the left.'
$.on contract, 'click', (e) -> ImageExpand.contract post $.on contract, 'click', (e) -> ImageExpand.contract post
file.videoControls.push $.tn('\u00A0'), contract $.add file.videoControls, [$.tn('\u00A0'), contract]
if Conf['Autoplay'] if play
video.controls = false video.controls = false
video.play() video.play()
# Hacky workaround for Firefox forever-loading bug # Hacky workaround for Firefox forever-loading bug
@ -183,7 +188,7 @@ ImageExpand =
$.on play, 'click', (e) -> $.on play, 'click', (e) ->
video[@textContent]() video[@textContent]()
@textContent = if @textContent is 'play' then 'pause' else 'play' @textContent = if @textContent is 'play' then 'pause' else 'play'
file.videoControls.push $.tn('\u00A0'), play $.add file.videoControls, [$.tn('\u00A0'), play]
$.add file.text, file.videoControls $.add file.text, file.videoControls
error: -> error: ->