harmacist/vichan
1
0
Fork 0
forked from GithubBackups/vichan
Code Pull Requests Activity

changes to expand-video.js

Browse Source
This commit is contained in:
Anonish 2015-02-08 01:04:41 -06:00
parent e75fd4d8fe
commit 1df89e2a87
1 changed files with 58 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
js/expand-video.js
View File

@ -21,6 +21,7 @@ function setupVideo(thumb, url) {
function unexpand() { function unexpand() {
if (expanded) { if (expanded) {
expanded = false; expanded = false;
hovering = false;
if (video.pause) video.pause(); if (video.pause) video.pause();
videoContainer.style.display = "none"; videoContainer.style.display = "none";
thumb.style.display = "inline"; thumb.style.display = "inline";
@ -34,8 +35,7 @@ function setupVideo(thumb, url) {
hovering = false; hovering = false;
if (video.pause) video.pause(); if (video.pause) video.pause();
videoContainer.style.display = "none"; videoContainer.style.display = "none";
video.style.maxWidth = "inherit"; video.style.display = "none";
video.style.maxHeight = "inherit";
} }
} }
@ -56,6 +56,7 @@ function setupVideo(thumb, url) {
videoHide.addEventListener("click", unexpand, false); videoHide.addEventListener("click", unexpand, false);
videoContainer = document.createElement("div"); videoContainer = document.createElement("div");
videoContainer.id = "#expandedVideo";
videoContainer.style.paddingLeft = "15px"; videoContainer.style.paddingLeft = "15px";
videoContainer.style.display = "none"; videoContainer.style.display = "none";
videoContainer.appendChild(videoHide); videoContainer.appendChild(videoHide);
@ -113,6 +114,7 @@ function setupVideo(thumb, url) {
function expand2() { function expand2() {
video.style.maxWidth = "100%"; video.style.maxWidth = "100%";
video.style.maxHeight = window.innerHeight + "px"; video.style.maxHeight = window.innerHeight + "px";
var bottom = video.getBoundingClientRect().bottom; var bottom = video.getBoundingClientRect().bottom;
if (bottom > window.innerHeight) { if (bottom > window.innerHeight) {
window.scrollBy(0, bottom - window.innerHeight); window.scrollBy(0, bottom - window.innerHeight);
@ -129,29 +131,59 @@ function setupVideo(thumb, url) {
expanded = false; expanded = false;
hovering = true; hovering = true;
var docRight = document.documentElement.getBoundingClientRect().right; var pageURL = window.location.href;
var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; var jsonURL = pageURL.replace(/\.html$/, ".json");
var maxWidth = docRight - thumbRight - 20; var vidName = video.src.split('/').pop().split(".").shift();
if (maxWidth < 250) maxWidth = 250;
video.style.position = "fixed"; $.getJSON(jsonURL, function (result) {
video.style.right = "0px"; $.each(result.posts, function(){
video.style.top = "0px"; if (vidName==this.tim) {
var docRight = document.documentElement.getBoundingClientRect().right;
var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right; var vidX = e.clientX;
video.style.maxWidth = maxWidth + "px"; var vidY = e.clientY;
video.style.maxHeight = "100%"; var vidWidth = this.w;
video.style.pointerEvents = "none"; 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;
if (vidWidth > windowWidth) {
video.style.maxWidth = maxWidth+"px";
video.style.maxHeight = maxHeight+"px";
vidBottom = vidTop + maxHeight;
} else {
video.style.maxWidth = vidWidth+"px";
video.style.maxHeight = vidHeight+"px";
vidBottom = vidTop + vidHeight;
}
if (vidBottom > windowHeight) { vidTop -= vidBottom-windowHeight; }
video.style.display = "inline";
videoHide.style.display = "none";
videoContainer.style.display = "inline";
videoContainer.style.position = "fixed"; videoContainer.style.position = "fixed";
videoContainer.style.display = "block";
videoHide.style.display = "none";
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.muted = (setting("videovolume") == 0);
video.volume = setting("videovolume"); video.volume = setting("videovolume");
video.controls = false; video.controls = false;
video.play(); video.play();
}
});
});
} }
}, false); }, false);
@ -241,4 +273,3 @@ onready(function(){
observer.observe(document.body, {childList: true, subtree: true}); observer.observe(document.body, {childList: true, subtree: true});
} }
}); });