From 78cc03c2041b31590be90a952e1b43ff2d2ae4b4 Mon Sep 17 00:00:00 2001 From: anonish Date: Sun, 8 Feb 2015 21:36:33 -0600 Subject: [PATCH] Updating expand-video.js --- inc/template.php | 3 +- js/expand-video.js | 171 +++++++++++++++++++++++++++++++++++++-------- 2 files changed, 145 insertions(+), 29 deletions(-) diff --git a/inc/template.php b/inc/template.php index b0d7bfb2..2049b004 100644 --- a/inc/template.php +++ b/inc/template.php @@ -22,7 +22,8 @@ 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, + 'auto_reload' => true, 'cache' => is_writable('templates') || (is_dir('templates/cache') && is_writable('templates/cache')) ? "{$config['dir']['template']}/cache" : false, 'debug' => $config['debug'] diff --git a/js/expand-video.js b/js/expand-video.js index 6d04b858..56fc3654 100644 --- a/js/expand-video.js +++ b/js/expand-video.js @@ -21,6 +21,7 @@ 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"; @@ -34,8 +35,7 @@ function setupVideo(thumb, url) { hovering = false; if (video.pause) video.pause(); videoContainer.style.display = "none"; - video.style.maxWidth = "inherit"; - video.style.maxHeight = "inherit"; + video.style.display = "none"; } } @@ -56,6 +56,7 @@ 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); @@ -113,6 +114,7 @@ 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); @@ -124,34 +126,148 @@ function setupVideo(thumb, url) { // Hovering over thumbnail displays video thumb.addEventListener("mouseover", function(e) { - if (setting("videohover")) { - getVideo(); - expanded = false; - hovering = true; + 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; + + 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"); + } - var docRight = document.documentElement.getBoundingClientRect().right; - var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; - var maxWidth = docRight - thumbRight - 20; - if (maxWidth < 250) maxWidth = 250; + $.getJSON(jsonURL, function (thread) { + $this = thread; + if(typeof thread.threads != "undefined" && thread.threads != null && thread.threads.length > 0){ - 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 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.display = "inline"; - videoHide.style.display = "none"; - videoContainer.style.display = "inline"; - videoContainer.style.position = "fixed"; + 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.muted = (setting("videovolume") == 0); - video.volume = setting("videovolume"); - video.controls = false; - video.play(); + 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*/ + }); } }, false); @@ -240,5 +356,4 @@ onready(function(){ }); observer.observe(document.body, {childList: true, subtree: true}); } -}); - +}); \ No newline at end of file