1 files changed, 145 insertions, 0 deletions
diff --git a/chimere/static/jme/plugins/poster.js b/chimere/static/jme/plugins/poster.js
new file mode 100644
index 0000000..a4c038c
--- /dev/null
+++ b/chimere/static/jme/plugins/poster.js
@@ -0,0 +1,145 @@
+/**
+ * Simple Poster Plugin for jme
+ * @author Matt Dertinger
+ * @version 1.0.0
+ *
+ * http://protofunc.com/jme
+ * http://github.com/aFarkas/jMediaelement
+ *
+ * @description	
+ *
+ * HTML:
+ * 
+ * <video class="player" preload="none" poster="../media/big-buck-bunny-trailer.png" controls="controls">
+ *   ...
+ * </video>
+ *
+ * OR
+ *
+ * <div class="fallback">
+ *   <img class="photo" src="../media/big-buck-bunny-trailer.png" alt="" data-enabled="enabled" />
+ *   ...
+ * </div>
+ *
+ * API:
+ *
+ * $('video, audio').setPosterAttribute()
+ *
+ * $('video, audio').enablePoster(index|object)
+ *
+ * $('video, audio').disablePoster(index|object)
+ * 
+ * Config:
+ * 
+ * Documentation:
+ * 
+ */
+(function($){
+  //enable posters
+  $(document).bind('jmeEmbed', function(e, data){
+    data = data.data;
+    var mm = $(e.target);
+    mm.setPosterAttribute();
+    if ($.attr(e.target, 'poster')) {
+      data.posterDisplay = $('<img />', {
+        src : $.attr(e.target, 'poster'),
+        "class": "poster-display inactive-poster-display",
+        alt : ""
+      }).insertAfter(e.target);
+      if( data.posterDisplay ){
+        mm.enablePoster(data.posterDisplay, data);
+      }
+      //add fullwindow support
+      if(data.posterDisplay.videoOverlay && mm.is('video')){
+        data.posterDisplay
+          .videoOverlay({
+            fullscreenClass: 'poster-in-fullscreen',
+            video: mm,
+            startCSS: {
+              width: 'auto',
+              zIndex: 99999
+            },
+            position: {
+              bottom: 0,
+              left: 0,
+              right: 0
+            }
+          })
+        ;
+      }
+      mm
+        .bind('play', function(){
+          mm.disablePoster(data.posterDisplay, data);
+        })
+        .bind('ended', function(){
+          mm.enablePoster(data.posterDisplay, data);
+		  //worarkound:
+		  mm.pause();
+        })
+      ;
+    }
+  });
+  
+  /* 
+   * extend jme api
+   */
+  $.multimediaSupport.fn._extend({
+    positionPoster: function(object, _data){
+      object = (isFinite(object)) ? posters.filter(':eq('+ object +')') : $(object);
+      if( !_data ){
+        _data = $.data(this.element, 'mediaElemSupport');
+      }
+      // Only if the poster is visible
+      if (!_data.posterDisplay || _data.posterDisplay.is(":hidden")) { return; }
+      _data.posterDisplay.height($(this.element).height() + "px"); // Need incase controlsBelow
+      _data.posterDisplay.width($(this.element).width() + "px"); // Could probably do 100% of box
+    },
+    disablePoster: function(object, _data){
+      object = (isFinite(object)) ? posters.filter(':eq('+ object +')') : $(object);
+      if( !_data ){
+        _data = $.data(this.element, 'mediaElemSupport');
+      }
+      object.removeAttr('data-enabled');
+      _data.posterDisplay.addClass('inactive-poster-display').fadeOut('slow');
+    },
+    enablePoster: function(object, _data){
+      var posters = $('img.poster-display', this.element),
+          that = this,
+          mm = $(this.element),
+          posterData,
+          found
+      ;
+      
+      if( !_data ){
+        _data = mm.data('mediaElemSupport');
+      }
+      object = (isFinite(object)) ? posters.filter(':eq('+ object +')') : $(object);
+      posters
+        .filter('[data-enabled]')
+        .each(function(){
+          if(this !== object[0]){
+            that.disablePoster(this, _data);
+          }
+        })
+      ;
+      if (!object[0]) { return; }
+      
+      posterData = $.data(object[0], 'jmePoster') || $.data(object[0], 'jmePoster', {load: false});
+      posterData.posterDisplay = _data.posterDisplay;
+      posterData.posterDisplay.removeClass('inactive-poster-display').fadeIn("slow");
+      // We may not need this. But if we do, we should make it respect config.
+      /* if (this.options.fit) {
+        that.positionPoster(this, _data);
+      } */
+      object.attr('data-enabled', 'enabled');
+      
+    },
+    setPosterAttribute: function() {
+      if (!$.attr(this.element, 'poster')) {
+        var image = $('img.photo[data-enabled]', this.element).first();
+        if (image) { $.attr(this.element, 'poster', image.attr('src')); }
+      }
+    }
+  }, true);
+  
+})(jQuery);