Merge commit '6f181fada421e92'

annasob · Nov 27, 2010 · d14ac75 · d14ac75
2 parents f85a78f + 6f181fa
commit d14ac75
Showing 1 changed file with 27 additions and 7 deletions.
diff --git a/popcorn.js b/popcorn.js
@@ -145,6 +145,20 @@
     }
   };
 
+  var offset = function(elem) {
+    if(!elem) elem = this;
+
+    var x = elem.offsetLeft;
+    var y = elem.offsetTop;
+
+    while (elem = elem.offsetParent) {
+      x += elem.offsetLeft;
+      y += elem.offsetTop;
+    }
+
+    return { left: x, top: y };
+  }
+
   ////////////////////////////////////////////////////////////////////////////
   // Command objects
   ////////////////////////////////////////////////////////////////////////////
@@ -208,14 +222,17 @@
   // Child commands. Uses onIn() and onOut() to do time based operations
   popcorn.SubtitleCommand = function(name, params, text, videoManager) {
     popcorn.VideoCommand.call(this, name, params, text, videoManager);
-    var style = "";
 
     // Creates a div for all subtitles to use
     if (!popcorn.SubtitleCommand.subDiv) {
       popcorn.SubtitleCommand.subDiv = document.createElement('div');
-
-      style = 'position:absolute;top:240px;left:1px;color:white;font-weight:bold;font-family:sans-serif;text-shadow:black 2px 2px 6px;font-size:18px;width:100%;';
-      popcorn.SubtitleCommand.subDiv.setAttribute('style', style);  
+      popcorn.SubtitleCommand.subDiv.style.position = "absolute";
+      popcorn.SubtitleCommand.subDiv.style.color = "white";
+      popcorn.SubtitleCommand.subDiv.style.textShadow = "black 2px 2px 6px";
+      popcorn.SubtitleCommand.subDiv.style.fontSize = "18px";
+      popcorn.SubtitleCommand.subDiv.style.fontWeight = "bold";
+      popcorn.SubtitleCommand.subDiv.style.textAlign = "center";
+
       this.videoManager.videoElement.parentNode.appendChild(popcorn.SubtitleCommand.subDiv);
     }
     if (this.params.target) {
@@ -233,14 +250,17 @@
            (this.params.accessibilitysrc && document.getElementById(this.params.accessibilitysrc).checked)) {
           google.language.translate(this.text, '', document.getElementById(this.params.languagesrc).options[i].value, function(result) {
             that.target.innerHTML = result.translation;
+            that.target.style.display = "inline";
+            popcorn.SubtitleCommand.subDiv.style.top = offset(videoManager.videoElement).top + videoManager.videoElement.offsetHeight - 64 + "px";
+            popcorn.SubtitleCommand.subDiv.style.left = offset(videoManager.videoElement).left + ((videoManager.videoElement.offsetWidth / 2) - (popcorn.SubtitleCommand.subDiv.offsetWidth / 2)) + "px";
           });
         }
       } else {
         this.target.innerHTML = this.text;
+        this.target.style.display = "inline";
+        popcorn.SubtitleCommand.subDiv.style.top = offset(videoManager.videoElement).top + videoManager.videoElement.offsetHeight - 64 + "px";
+        popcorn.SubtitleCommand.subDiv.style.left = offset(videoManager.videoElement).left + ((videoManager.videoElement.offsetWidth / 2) - (popcorn.SubtitleCommand.subDiv.offsetWidth / 2)) + "px";
       }
-      style = this.target.getAttribute("style") + 'text-align:'+( this.params.align || "center" )+';';
-      this.target.setAttribute('style', style);
-      this.target.style.display = "inline";
     };
     this.onOut = function() {
       this.target.innerHTML = "";