mirror of
https://github.com/vichan-devel/vichan.git
synced 2024-11-28 17:31:00 +01:00
Updating expand-video.js
This commit is contained in:
anonish
parent
e115bff930
commit
78cc03c204
@ -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']
|
||||
|
||||
@ -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});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user