hover video fixes

- fixes width on thread pages when opening video at bottom
- works better on index pages, but still need to get actual width of video

js/expand-video.js

@@ -153,24 +153,50 @@ function setupVideo(thumb, url) {
 	    $.getJSON(jsonURL, function (thread) {
 		$this = thread;
 		if(typeof thread.threads != "undefined" && thread.threads != null && thread.threads.length > 0){
-		    console.log("index page");
-		    var docRight = document.documentElement.getBoundingClientRect().right;
-		    var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right;
-		    var maxWidth = docRight - thumbRight - 20;
-		    if (maxWidth < 250) maxWidth = 250;
-		    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";
 
-		    video.style.display = "inline";
+		    var vidX = e.clientX;
-		    videoHide.style.display = "none";
+		    var vidY = e.clientY;
-		    videoContainer.style.display = "inline";
+		    var windowWidth = $(window).width();
+		    var windowHeight = $(window).height();
+		    var vidWidth = windowWidth - vidX;
+		    var vidHeight = windowHeight - vidY;
+		    var vidAspect = vidHeight / vidWidth;
+
+		    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 = 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;
@@ -182,14 +208,12 @@ function setupVideo(thumb, url) {
 			var tim = this.tim;
 			var fileNum = vidName.split('-').pop();
 			if(typeof this.extra_files != "undefined" && this.extra_files != null && this.extra_files.length > 0){
-			console.log("extra file exists");
 			    $.each(this.extra_files, function() {
 				if (vidName==this.tim){
 				    tim = this.tim;
 				}
 			    });
 			}
-		    console.log("tim = "+tim);
 			if (vidName==tim) { 
 			    var vidX = e.clientX;
 			    var vidY = e.clientY;
@@ -205,25 +229,33 @@ function setupVideo(thumb, url) {
 			    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;
 			    }
-
-			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";
@@ -232,9 +264,9 @@ function setupVideo(thumb, url) {
 			    video.volume = setting("videovolume");
 			    video.controls = false;
 			    video.play();
-			
 			}
-		});  } //else*/
+		    });  
+		} //else*/
 	    });
         }
     }, false);