From a38e8b31b1088c3ed43d7cde3f2a0afc752ca172 Mon Sep 17 00:00:00 2001
From: Nicolas Le Goff <legoff.n@gmail.com>
Date: Tue, 17 Jul 2012 17:24:02 +0200
Subject: [PATCH] Fix HTML5 video display in IE

---
 templates/web/common/HTML5Video.html.twig | 10 +++++++---
 templates/web/lightbox/validate.twig      | 24 ++++++++++++++++++++---
 www/skins/lightbox/jquery.lightbox.ie6.js | 13 ++++++++++--
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/templates/web/common/HTML5Video.html.twig b/templates/web/common/HTML5Video.html.twig
index 8cd9193793..704f7af5d6 100644
--- a/templates/web/common/HTML5Video.html.twig
+++ b/templates/web/common/HTML5Video.html.twig
@@ -13,10 +13,12 @@
         <video id="{{ unique_id }}" class="videoTips video-js vjs-default-skin" controls autoplay
         preload="auto" width="{{ displayWidth|round }}" height="{{ displayHeight | round }}"
         data-setup="{}">
+        {% set s_width = null %}
+        {% set s_height = null %}
         {% for name, subdef in arraySubdefs %}
             {% if loop.first %}
-            <input type="hidden" name="width" value="{{subdef.get_width()}}"/>
-            <input type="hidden" name="height" value="{{subdef.get_height()}}"/>
+                {% set s_width = subdef.get_width() %}
+                {% set s_height = subdef.get_height() %}
             {% endif %}
             {% if session.is_authenticated() == true %}
                 {% set url = subdef.get_url() %}
@@ -26,6 +28,8 @@
             <source src="{{ url }}" type='{{ subdef.get_mime() }}'>
         {% endfor %}
         </video>
+        <input type="hidden" name="width" value="{{ s_width }}"/>
+        <input type="hidden" name="height" value="{{ s_height }}"/>
     </div>
 
     <script type="text/javascript">
@@ -38,7 +42,7 @@
                         var parent = $(this).parent();
                         player.width(parent.width());
                         player.height(parent.height());
-                    });
+                    }).trigger('resize-video-js');
 
                     $('#{{ unique_id }}').bind('unload-video-js', function(){
                         player.destroy();
diff --git a/templates/web/lightbox/validate.twig b/templates/web/lightbox/validate.twig
index 652d06fc22..adb1dfddd9 100644
--- a/templates/web/lightbox/validate.twig
+++ b/templates/web/lightbox/validate.twig
@@ -1,6 +1,7 @@
 {% extends "common/index_bootstrap.html.twig" %}
 
 {% import 'common/thumbnail.html' as thumbnail %}
+{% import 'common/HTML5Video.html.twig' as thumbnailHTML5 %}
 {% import 'common/caption_templates/preview.html' as caption %}
 
 {% block javascript %}
@@ -53,9 +54,26 @@
                     </div>
                     <div class="container PNB">
                         {% if basket_element %}
-              {% set bask_prev = basket_element.getRecord().get_preview() %}
-              {{thumbnail.format(bask_prev,bask_prev.get_width(),bask_prev.get_height(),'',session, false)}}
-            {% endif %}
+
+                            {% set bask_prev = basket_element.getRecord().get_preview() %}
+
+                            {% if basket_element.getRecord().get_type() == 'video' %}
+                                {% set previewHtml5 = basket_element.getRecord().getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
+                                {% if previewHtml5|length < 3 %}
+                                    {% set previewHtml5 = null %}
+                                {% endif %}
+                            {% endif %}
+
+                            {% set width = bask_prev.get_width() %}
+                            {% set height = bask_prev.get_height() %}
+
+                            {% if previewHtml5 %}
+                                {{ thumbnailHTML5.format(previewHtml5, width, height, '', session, false) }}
+                            {% else %}
+                                {{ thumbnail.format(bask_prev, width,height, '', session, false) }}
+                            {% endif %}
+
+                        {% endif %}
                         {% include 'lightbox/selector_box.twig' %}
                         {% include 'lightbox/sc_note.twig' %}
                     </div>
diff --git a/www/skins/lightbox/jquery.lightbox.ie6.js b/www/skins/lightbox/jquery.lightbox.ie6.js
index 917dd11318..8755cf2594 100644
--- a/www/skins/lightbox/jquery.lightbox.ie6.js
+++ b/www/skins/lightbox/jquery.lightbox.ie6.js
@@ -925,8 +925,15 @@ function set_image_position(smooth, image, width, height, container, callback)
 	}
 	if(typeof callback == 'undefined')
 	{
-		callback = function(){};
-	}
+        callback = function(){
+          $('.videoTips.video-js', $(image).closest('.container')).trigger('resize-video-js');
+        };
+	} else {
+    callback = function(){
+        $('.videoTips.video-js', $(image).closest('.container')).trigger('resize-video-js');
+        callback();
+      };
+    }
 
 	dimensions.width	= parseInt(width);
 	dimensions.height	= parseInt(height);
@@ -1006,6 +1013,8 @@ function scid_click(event, el)
 					.empty()
 					.append(data.options_html);
 
+            $('.videoTips.video-js',  $('.container', container)).trigger('unload-video-js');
+
 			$('.container', container).empty()
 									.append(data.preview+data.selector_html+data.note_html);