mirror of
https://github.com/vichan-devel/vichan.git
synced 2025-02-21 04:59:49 +01:00
Revert "Update to expand-video.js (video hover changes) and fix for portrait mode laptop"
This commit is contained in:
Fredrick Brennan
parent
a6191d0172
commit
d48c568a35
@ -22,7 +22,7 @@ function load_twig() {
|
||||
$loader = new Twig_Loader_Filesystem($config['dir']['template']);
|
||||
$loader->setPaths($config['dir']['template']);
|
||||
$twig = new Twig_Environment($loader, array(
|
||||
'autoescape' => false,
|
||||
'autoescape' => false,
|
||||
'cache' => is_writable('templates') || (is_dir('templates/cache') && is_writable('templates/cache')) ?
|
||||
"{$config['dir']['template']}/cache" : false,
|
||||
'debug' => $config['debug']
|
||||
|
||||
@ -21,7 +21,6 @@ function setupVideo(thumb, url) {
|
||||
function unexpand() {
|
||||
if (expanded) {
|
||||
expanded = false;
|
||||
hovering = false;
|
||||
if (video.pause) video.pause();
|
||||
videoContainer.style.display = "none";
|
||||
thumb.style.display = "inline";
|
||||
@ -35,7 +34,8 @@ function setupVideo(thumb, url) {
|
||||
hovering = false;
|
||||
if (video.pause) video.pause();
|
||||
videoContainer.style.display = "none";
|
||||
video.style.display = "none";
|
||||
video.style.maxWidth = "inherit";
|
||||
video.style.maxHeight = "inherit";
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,7 +56,6 @@ function setupVideo(thumb, url) {
|
||||
videoHide.addEventListener("click", unexpand, false);
|
||||
|
||||
videoContainer = document.createElement("div");
|
||||
videoContainer.id = "#expandedVideo";
|
||||
videoContainer.style.paddingLeft = "15px";
|
||||
videoContainer.style.display = "none";
|
||||
videoContainer.appendChild(videoHide);
|
||||
@ -114,7 +113,6 @@ function setupVideo(thumb, url) {
|
||||
function expand2() {
|
||||
video.style.maxWidth = "100%";
|
||||
video.style.maxHeight = window.innerHeight + "px";
|
||||
|
||||
var bottom = video.getBoundingClientRect().bottom;
|
||||
if (bottom > window.innerHeight) {
|
||||
window.scrollBy(0, bottom - window.innerHeight);
|
||||
@ -126,148 +124,34 @@ function setupVideo(thumb, url) {
|
||||
|
||||
// Hovering over thumbnail displays video
|
||||
thumb.addEventListener("mouseover", function(e) {
|
||||
if (setting("videohover")) {
|
||||
getVideo();
|
||||
expanded = false;
|
||||
hovering = true;
|
||||
|
||||
var vidName = video.src.split('/').pop().split(".").shift();
|
||||
var isMod = (window.location.pathname.split("/")[1]=="mod.php");
|
||||
var thisBoard = isMod?window.location.href.split("/")[4]:window.location.pathname.split("/")[1];
|
||||
var pageType = window.active_page;
|
||||
var pageURL = isMod?window.location.href:window.location.pathname;
|
||||
var jsonURL;
|
||||
var thisThread;
|
||||
var thisPost;
|
||||
console.log("vidName = "+vidName);
|
||||
|
||||
if (pageType==="thread") {
|
||||
jsonURL = pageURL.replace(/\.html$/, ".json");
|
||||
} else
|
||||
if (pageType==="index"){
|
||||
var thisPage = isMod?window.location.href.split("/")[5].split(".")[0]:window.location.pathname.split("/")[2].split(".")[0];
|
||||
if (thisPage=="index") { thisPage="0"; } else { thisPage-=1;}
|
||||
jsonURL = pageURL.replace(/[a-z0-9]+.html$/, thisPage+".json");
|
||||
}
|
||||
if (setting("videohover")) {
|
||||
getVideo();
|
||||
expanded = false;
|
||||
hovering = true;
|
||||
|
||||
$.getJSON(jsonURL, function (thread) {
|
||||
$this = thread;
|
||||
if(typeof thread.threads != "undefined" && thread.threads != null && thread.threads.length > 0){
|
||||
var docRight = document.documentElement.getBoundingClientRect().right;
|
||||
var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right;
|
||||
var maxWidth = docRight - thumbRight - 20;
|
||||
if (maxWidth < 250) maxWidth = 250;
|
||||
|
||||
var vidX = e.clientX;
|
||||
var vidY = e.clientY;
|
||||
var windowWidth = $(window).width();
|
||||
var windowHeight = $(window).height();
|
||||
var vidWidth = windowWidth - vidX;
|
||||
var vidHeight = windowHeight - vidY;
|
||||
var vidAspect = vidHeight / vidWidth;
|
||||
video.style.position = "fixed";
|
||||
video.style.right = "0px";
|
||||
video.style.top = "0px";
|
||||
var docRight = document.documentElement.getBoundingClientRect().right;
|
||||
var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right;
|
||||
video.style.maxWidth = maxWidth + "px";
|
||||
video.style.maxHeight = "100%";
|
||||
video.style.pointerEvents = "none";
|
||||
|
||||
var totalWidth = windowWidth - vidX;
|
||||
var totalHeight = totalWidth*vidAspect;
|
||||
var maxWidth = totalWidth - 20;
|
||||
if (maxWidth < 250) { maxWidth = 250; }
|
||||
var maxHeight = maxWidth * vidAspect;
|
||||
var vidTop = vidY;
|
||||
var vidBottom;
|
||||
var vidRight;
|
||||
video.style.display = "inline";
|
||||
videoHide.style.display = "none";
|
||||
videoContainer.style.display = "inline";
|
||||
videoContainer.style.position = "fixed";
|
||||
|
||||
if (vidWidth > windowWidth) {
|
||||
video.style.maxWidth = maxWidth+"px";
|
||||
video.style.maxHeight = maxHeight+"px";
|
||||
vidBottom = vidTop + maxHeight;
|
||||
vidRight = vidX+maxWidth - 20;
|
||||
} else {
|
||||
video.style.maxWidth = vidWidth+"px";
|
||||
video.style.maxHeight = vidHeight+"px";
|
||||
vidBottom = vidTop + vidHeight;
|
||||
vidRight = vidX+vidWidth - 20;
|
||||
}
|
||||
|
||||
if (vidBottom > windowHeight) { vidTop -= vidBottom-windowHeight; }
|
||||
videoContainer.style.position = "fixed";
|
||||
videoContainer.style.display = "block";
|
||||
videoHide.style.display = "none";
|
||||
if (vidRight > windowWidth) {
|
||||
video.style.left = vidX-(vidRight-windowWidth)+"px";
|
||||
}
|
||||
else {
|
||||
video.style.left = vidX+"px";
|
||||
}
|
||||
video.style.top = vidTop+"px";
|
||||
video.style.pointerEvents = "none";
|
||||
video.style.display = "block";
|
||||
video.style.position = "fixed";
|
||||
video.muted = (setting("videovolume") == 0);
|
||||
video.volume = setting("videovolume");
|
||||
video.controls = false;
|
||||
video.play();
|
||||
}
|
||||
else {
|
||||
|
||||
$.each($this.posts, function(){
|
||||
var tim = this.tim;
|
||||
var fileNum = vidName.split('-').pop();
|
||||
if(typeof this.extra_files != "undefined" && this.extra_files != null && this.extra_files.length > 0){
|
||||
$.each(this.extra_files, function() {
|
||||
if (vidName==this.tim){
|
||||
tim = this.tim;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (vidName==tim) {
|
||||
var vidX = e.clientX;
|
||||
var vidY = e.clientY;
|
||||
var vidWidth = this.w;
|
||||
var vidHeight = this.h;
|
||||
var vidAspect = vidHeight / vidWidth;
|
||||
var windowWidth = $(window).width();
|
||||
var windowHeight = $(window).height();
|
||||
var totalWidth = windowWidth - vidX;
|
||||
var totalHeight = totalWidth*vidAspect;
|
||||
var maxWidth = totalWidth - 20;
|
||||
if (maxWidth < 250) { maxWidth = 250; }
|
||||
var maxHeight = maxWidth * vidAspect;
|
||||
var vidTop = vidY;
|
||||
var vidBottom;
|
||||
var vidRight;
|
||||
if (vidWidth > windowWidth) {
|
||||
video.style.maxWidth = maxWidth+"px";
|
||||
video.style.maxHeight = maxHeight+"px";
|
||||
vidBottom = vidTop + maxHeight;
|
||||
vidRight = maxWidth+vidX;
|
||||
} else {
|
||||
video.style.maxWidth = vidWidth+"px";
|
||||
video.style.maxHeight = vidHeight+"px";
|
||||
vidBottom = vidTop + vidHeight;
|
||||
vidRight = vidWidth+vidX;
|
||||
}
|
||||
if (vidBottom > windowHeight) {
|
||||
vidTop -= vidBottom-windowHeight;
|
||||
}
|
||||
|
||||
videoContainer.style.position = "fixed";
|
||||
videoContainer.style.display = "block";
|
||||
|
||||
videoHide.style.display = "none";
|
||||
|
||||
if (vidRight > windowWidth) {
|
||||
video.style.left = vidX-(vidRight-windowWidth)+"px";
|
||||
}
|
||||
else {
|
||||
video.style.left = vidX+"px";
|
||||
}
|
||||
video.style.top = vidTop+"px";
|
||||
video.style.pointerEvents = "none";
|
||||
video.style.display = "block";
|
||||
video.style.position = "fixed";
|
||||
video.muted = (setting("videovolume") == 0);
|
||||
video.volume = setting("videovolume");
|
||||
video.controls = false;
|
||||
video.play();
|
||||
}
|
||||
});
|
||||
} //else*/
|
||||
});
|
||||
video.muted = (setting("videovolume") == 0);
|
||||
video.volume = setting("videovolume");
|
||||
video.controls = false;
|
||||
video.play();
|
||||
}
|
||||
}, false);
|
||||
|
||||
@ -357,3 +241,4 @@ onready(function(){
|
||||
observer.observe(document.body, {childList: true, subtree: true});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
#quick-reply td.recaptcha-response {\
|
||||
padding: 0 0 1px 0;\
|
||||
}\
|
||||
@media screen and (max-width: 400px) {\
|
||||
@media screen and (max-width: 600px) {\
|
||||
#quick-reply {\
|
||||
display: none !important;\
|
||||
}\
|
||||
@ -366,7 +366,7 @@
|
||||
$(window).ready(function() {
|
||||
if (settings.get('hide_at_top', true)) {
|
||||
$(window).scroll(function() {
|
||||
if ($(this).width() <= 400)
|
||||
if ($(this).width() <= 600)
|
||||
return;
|
||||
if ($(this).scrollTop() < $origPostForm.offset().top + $origPostForm.height() - 100)
|
||||
$postForm.fadeOut(100);
|
||||
@ -388,7 +388,7 @@
|
||||
};
|
||||
|
||||
$(window).on('cite', function(e, id, with_link) {
|
||||
if ($(this).width() <= 400)
|
||||
if ($(this).width() <= 600)
|
||||
return;
|
||||
show_quick_reply();
|
||||
if (with_link) {
|
||||
@ -443,7 +443,7 @@
|
||||
$('.quick-reply-btn').hide();
|
||||
|
||||
$(window).scroll(function() {
|
||||
if ($(this).width() <= 400)
|
||||
if ($(this).width() <= 600)
|
||||
return;
|
||||
if ($(this).scrollTop() < $('form[name="post"]:first').offset().top + $('form[name="post"]:first').height() - 100)
|
||||
$('.quick-reply-btn').fadeOut(100);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user