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

change UI for no autoplay, no controls

Browse Source
This commit is contained in:
ccd0 2014-04-07 18:23:33 -07:00
parent 1ef501fc91
commit fe1b68a635
3 changed files with 73 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

44
builds/crx/script.js
View File

@ -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;

47
src/Images/ImageExpand.coffee
View File

@ -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 @