1// PLUGIN: Subtitle
2
3(function ( Popcorn ) {
4
5  var i = 0,
6      createDefaultContainer = function( context, id ) {
7
8        var ctxContainer = context.container = document.createElement( "div" ),
9            style = ctxContainer.style,
10            media = context.media;
11
12        var updatePosition = function() {
13          var position = context.position();
14          // the video element must have height and width defined
15          style.fontSize = "18px";
16          style.width = media.offsetWidth + "px";
17          style.top = position.top  + media.offsetHeight - ctxContainer.offsetHeight - 40 + "px";
18          style.left = position.left + "px";
19
20          setTimeout( updatePosition, 10 );
21        };
22
23        ctxContainer.id = id || Popcorn.guid();
24        style.position = "absolute";
25        style.color = "white";
26        style.textShadow = "black 2px 2px 6px";
27        style.fontWeight = "bold";
28        style.textAlign = "center";
29
30        updatePosition();
31
32        context.media.parentNode.appendChild( ctxContainer );
33
34        return ctxContainer;
35      };
36
37  /**
38   * Subtitle popcorn plug-in
39   * Displays a subtitle over the video, or in the target div
40   * Options parameter will need a start, and end.
41   * Optional parameters are target and text.
42   * Start is the time that you want this plug-in to execute
43   * End is the time that you want this plug-in to stop executing
44   * Target is the id of the document element that the content is
45   *  appended to, this target element must exist on the DOM
46   * Text is the text of the subtitle you want to display.
47   *
48   * @param {Object} options
49   *
50   * Example:
51     var p = Popcorn('#video')
52        .subtitle({
53          start:            5,                 // seconds, mandatory
54          end:              15,                // seconds, mandatory
55          text:             'Hellow world',    // optional
56          target:           'subtitlediv',     // optional
57        } )
58   *
59   */
60
61  Popcorn.plugin( "subtitle" , {
62
63      manifest: {
64        about: {
65          name: "Popcorn Subtitle Plugin",
66          version: "0.1",
67          author: "Scott Downe",
68          website: "http://scottdowne.wordpress.com/"
69        },
70        options: {
71          start: {
72            elem: "input",
73            type: "text",
74            label: "Start"
75          },
76          end: {
77            elem: "input",
78            type: "text",
79            label: "End"
80          },
81          target: "subtitle-container",
82          text: {
83            elem: "input",
84            type: "text",
85            label: "Text"
86          }
87        }
88      },
89
90      _setup: function( options ) {
91        var newdiv = document.createElement( "div" );
92
93        newdiv.id = "subtitle-" + i++;
94        newdiv.style.display = "none";
95
96        // Creates a div for all subtitles to use
97        ( !this.container && ( !options.target || options.target === "subtitle-container" ) ) &&
98          createDefaultContainer( this );
99
100        // if a target is specified, use that
101        if ( options.target && options.target !== "subtitle-container" ) {
102          // In case the target doesn't exist in the DOM
103          options.container = document.getElementById( options.target ) || createDefaultContainer( this, options.target );
104        } else {
105          // use shared default container
106          options.container = this.container;
107        }
108
109        document.getElementById( options.container.id ) && document.getElementById( options.container.id ).appendChild( newdiv );
110        options.innerContainer = newdiv;
111
112        options.showSubtitle = function() {
113          options.innerContainer.innerHTML = options.text || "";
114        };
115      },
116      /**
117       * @member subtitle
118       * The start function will be executed when the currentTime
119       * of the video  reaches the start time provided by the
120       * options variable
121       */
122      start: function( event, options ){
123        options.innerContainer.style.display = "inline";
124        options.showSubtitle( options, options.text );
125      },
126      /**
127       * @member subtitle
128       * The end function will be executed when the currentTime
129       * of the video  reaches the end time provided by the
130       * options variable
131       */
132      end: function( event, options ) {
133        options.innerContainer.style.display = "none";
134        options.innerContainer.innerHTML = "";
135      },
136
137      _teardown: function ( options ) {
138        options.container.removeChild( options.innerContainer );
139      }
140
141  });
142
143})( Popcorn );
144