[mozilla#175] subtitle plugin without tests

annasob · Jan 7, 2011 · 5e82435 · 5e82435
1 parent 5518b16
commit 5e82435
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 1 deletion.
diff --git a/plugins/subtitle/popcorn.subtitle.html b/plugins/subtitle/popcorn.subtitle.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Popcorn Subtitle Plug-in Demo</title>
+
+  <script src="../../popcorn.js"></script>
+  <script src="http://google.com/jsapi"></script>
+  <script>google.load("language", "1");</script>
+
+  <script src="popcorn.subtitle.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      var p = Popcorn('#video')
+      .play() 
+      .subtitle({
+        start: 5, // seconds
+        end: 15, // seconds
+        text: 'this is the first subtitle of 2011',
+        language: "en",
+        languagesrc: "language",
+        accessibilitysrc: "accessibility"
+      } )
+      .subtitle({
+        start: 20, // seconds
+        end: 45, // seconds
+        text: 'this is the second subtitle of 2011',
+        language: "en",
+        languagesrc: "language",
+        accessibilitysrc: "accessibility"
+      } )
+
+    }, false);
+
+  </script>
+</head>
+<body>
+  <h1 id="qunit-header">Popcorn Subtitle Plug-in Demo</h1>
+  <p> A subtitle displaying 'this is the first subtitle of 2011' will appear at 5 seconds and disappear at 15 seconds.</p>
+  <p> A subtitle displaying 'this is the second subtitle of 2011' will appear at 20 seconds and disappear at 45 seconds.</p>
+  <div>
+
+    <video id='video' 
+      controls height="480" width="854"
+      poster="../../test/poster.png"> 
+
+      <source id='mp4'
+        src="../../test/trailer.mp4"
+        type='video/mp4; codecs="avc1, mp4a"'> 
+
+      <source id='ogv'
+        src="../../test/trailer.ogv"
+        type='video/ogg; codecs="theora, vorbis"'> 
+
+      <p>Your user agent does not support the HTML5 Video element.</p> 
+
+    </video> 
+  </div>
+  <h2>Choose your language</h2>
+    <select id="language">
+      <option value="zh" selected="selected">Chinese</option>
+      <option value="en">English</option>
+      <option value="fr">French</option>
+      <option value="de">German</option>
+      <option value="it">Italian</option>
+      <option value="ja">Japanese</option>
+      <option value="ko">Korean</option>
+      <option value="fa">Persian</option>
+      <option value="pl">Polish</option>
+      <option value="pt">Portuguese</option>
+      <option value="es">Spanish</option>
+    </select>
+    <div>
+      with help from <a href="http://google.com/translate">Google Translate</a><br />
+      <input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
+    </div>
+
+</body>
+</html>
diff --git a/plugins/subtitle/popcorn.subtitle.js b/plugins/subtitle/popcorn.subtitle.js
@@ -0,0 +1,148 @@
+// PLUGIN: Subtitle
+
+(function (Popcorn) {
+
+  /**
+   */
+
+  // just a little tool function
+  // calculates the top and left position of an element
+  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 };
+  }
+
+  Popcorn.plugin( "subtitle" , {
+
+      manifest: {
+        about:{
+          name: "Popcorn Subtitle Plugin",
+          version: "0.1",
+          author:  "Scott Downe",
+          website: "http://scottdowne.wordpress.com/"
+        },
+        options:{
+          start    : {elem:'input', type:'text', label:'In'},
+          end      : {elem:'input', type:'text', label:'Out'},
+          target  :  'Subtitle-container',
+          text     : {elem:'input', type:'text', label:'Text'}
+        }
+      },
+
+      _setup: function( options ) {
+
+        // Creates a div for all subtitles to use
+        if ( !this.container ) {
+          this.container = document.createElement('div');
+
+          this.container.style.position   = "absolute";
+          this.container.style.color      = "white";
+          this.container.style.textShadow = "black 2px 2px 6px";
+          this.container.style.fontSize   = "18px";
+          this.container.style.fontWeight = "bold";
+          this.container.style.textAlign  = "center";
+
+          // the video element must have height and width defined
+          this.container.style.width      = this.video.offsetWidth + "px";
+          //this.container.style.top        = offset( this.video ).top + "px";
+          this.container.style.left       = offset( this.video ).left + "px";
+
+          this.video.parentNode.appendChild( this.container );
+        }
+
+        // if a target is specified, use that
+        if ( options.target && options.target !== 'Subtitle-container' ) {
+          options.container = document.getElementById( options.target );
+        } else { // use shared default container
+          options.container = this.container;
+        }
+
+        options.translatedText = options.text;
+        var selectedLanguage = ( options.language || "" ),
+            // declared as a function, it can be called, but does nothing if not needed
+            toggleSubtitles = function() {},
+            accessibility = document.getElementById( options.accessibilitysrc ),
+            that = this;
+
+        if ( options.languagesrc ) {
+          var languageSrc = document.getElementById( options.languagesrc );
+
+          var updateLanguage = function() {
+
+            selectedLanguage = document.getElementById( options.languagesrc ).options[ languageSrc.selectedIndex ].value;
+
+            google.language.translate( options.text, '', selectedLanguage, function( result ) {
+
+              options.translatedText = result.translation;
+
+            } );
+
+            google.language.translate( options.container.innerHTML, '', selectedLanguage, function( result ) {
+
+              options.container.innerHTML = result.translation;
+              toggleSubtitles(); // update visuals if accessibility is used
+
+            } );
+
+            that.container.style.top = offset( that.video ).top + that.video.offsetHeight - ( 40 + that.container.offsetHeight ) + "px";
+
+          };
+
+          languageSrc.addEventListener( "click", updateLanguage, false );
+
+          // initiate it once to set starting state
+          updateLanguage();
+        }
+
+        if ( accessibility ) {
+
+          toggleSubtitles = function() {
+
+            if ( accessibility.checked || selectedLanguage !== ( options.language || "") ) {
+              options.container.style.display = "inline";
+            } else if ( selectedLanguage === ( options.language || "") ) {
+              options.container.style.display = "none";
+            }
+            that.container.style.top = offset( that.video ).top + that.video.offsetHeight - ( 40 + that.container.offsetHeight ) + "px";
+
+          };
+
+          accessibility.addEventListener( "click", toggleSubtitles, false );
+
+          // initiate it once to set starting state
+          toggleSubtitles();
+        }
+
+      },
+      /**
+       * @member subtitle 
+       * The start function will be executed when the currentTime 
+       * of the video  reaches the start time provided by the 
+       * options variable
+       */
+      start: function(event, options){
+        options.container.innerHTML = options.translatedText;
+        this.container.style.top = offset( this.video ).top + this.video.offsetHeight - ( 40 + this.container.offsetHeight ) + "px";
+      },
+      /**
+       * @member subtitle 
+       * The end function will be executed when the currentTime 
+       * of the video  reaches the end time provided by the 
+       * options variable
+       */
+      end: function(event, options){
+        options.container.innerHTML = "";
+      }
+
+  } );
+
+})( Popcorn );
diff --git a/popcorn.js b/popcorn.js
@@ -105,7 +105,7 @@
           // adding padding to the front and end of the arrays
           // this is so we do not fall off either end
 
-          var videoDurationPlus = that.video.duration + 1;
+          var videoDurationPlus = 9999; //that.video.duration + 1;
           Popcorn.addTrackEvent( that, {
             start: videoDurationPlus,
             end: videoDurationPlus