From 541f35dd0284f2b45ca9a0392a22ae2c72d359c4 Mon Sep 17 00:00:00 2001
From: Nicolas Le Goff <legoff.n@gmail.com>
Date: Fri, 2 May 2014 19:59:58 +0200
Subject: [PATCH] Enhance thumbnail display

---
 lib/Alchemy/Phrasea/Application.php          |   2 +
 lib/Alchemy/Phrasea/Twig/Fit.php             |  60 +++++
 templates/web/common/players/audio.html.twig |  21 ++
 templates/web/common/players/pdf.html.twig   |  21 ++
 templates/web/common/players/video.html.twig |  22 ++
 templates/web/common/thumbnail.html.twig     | 266 ++++---------------
 6 files changed, 176 insertions(+), 216 deletions(-)
 create mode 100644 lib/Alchemy/Phrasea/Twig/Fit.php
 create mode 100644 templates/web/common/players/audio.html.twig
 create mode 100644 templates/web/common/players/pdf.html.twig
 create mode 100644 templates/web/common/players/video.html.twig

diff --git a/lib/Alchemy/Phrasea/Application.php b/lib/Alchemy/Phrasea/Application.php
index 33e0e610e2..2634a5dfa9 100644
--- a/lib/Alchemy/Phrasea/Application.php
+++ b/lib/Alchemy/Phrasea/Application.php
@@ -103,6 +103,7 @@ use Alchemy\Phrasea\Core\Provider\UnicodeServiceProvider;
 use Alchemy\Phrasea\Exception\InvalidArgumentException;
 use Alchemy\Phrasea\Exception\LogicException;
 use Alchemy\Phrasea\Twig\JSUniqueID;
+use Alchemy\Phrasea\Twig\Fit;
 use Alchemy\Phrasea\Twig\Camelize;
 use Alchemy\Phrasea\Twig\BytesConverter;
 use FFMpeg\FFMpegServiceProvider;
@@ -589,6 +590,7 @@ class Application extends SilexApplication
                 // add filters truncate, wordwrap, nl2br
                 $twig->addExtension(new \Twig_Extensions_Extension_Text());
                 $twig->addExtension(new JSUniqueID());
+                $twig->addExtension(new Fit());
                 $twig->addExtension(new Camelize());
                 $twig->addExtension(new BytesConverter());
 
diff --git a/lib/Alchemy/Phrasea/Twig/Fit.php b/lib/Alchemy/Phrasea/Twig/Fit.php
new file mode 100644
index 0000000000..b2ef2fe0dd
--- /dev/null
+++ b/lib/Alchemy/Phrasea/Twig/Fit.php
@@ -0,0 +1,60 @@
+<?php
+
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Alchemy\Phrasea\Twig;
+
+class Fit extends \Twig_Extension
+{
+
+    public function getName()
+    {
+        return 'fit';
+    }
+
+    public function getFunctions()
+    {
+        return array(
+            'fitIn' => new \Twig_Function_Method($this, 'fitIn')
+        );
+    }
+
+    public function fitIn(array $content, array $box)
+    {
+        $contentRatio = $content['width'] / $content['height'];
+        $boxRatio = $box['width'] / $box['height'];
+
+        if ($contentRatio > $boxRatio) {
+            if ($box['width'] > $content['width']) {
+                $width = $content['width'];
+            } else {
+                $width = $box['width'];
+            }
+
+            $height = $width / $content['width'] * $content['height'];
+            $top = ($box['height'] - $height) / 2;
+        } else {
+            if ($box['height'] > $content['height']) {
+                $height = $content['height'];
+            } else {
+                $height = $box['height'];
+            }
+
+            $width = $height * $contentRatio;
+            $top = ($box['height'] - $content['height'] / 2);
+        }
+
+        return array(
+            'width' => round($width),
+            'height' => round($height),
+            'top' => round($top)
+        );
+    }
+}
diff --git a/templates/web/common/players/audio.html.twig b/templates/web/common/players/audio.html.twig
new file mode 100644
index 0000000000..09fc62818b
--- /dev/null
+++ b/templates/web/common/players/audio.html.twig
@@ -0,0 +1,21 @@
+{% macro audio_player(thumbnail, url, original_w, original_h, fit) %}
+    {% set random = thumbnail.get_random() %}
+    <div class="record record_audio audioTips" style="width:{{fit.width}}px;height:{{fit.height}}px;top:{{fit.top}}px;">
+        <div id="preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
+        <input type="hidden" name="width" value="{{original_w}}"/>
+        <input type="hidden" name="height" value="{{original_h}}"/>
+    </div>
+    <script type="text/javascript">
+        swfobject.embedSWF(
+                "/include/jslibs/audio-player/player.swf",
+                "preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
+                "{{d_width}}", "{{d_height}}", "9.0.0", false, false, {
+                    menu: "false",
+                    flashvars: "playerID=2&autostart=yes&noinfo=yes&animation=no&remaining=yes&soundFile={{url}}",
+                    movie: "/include/jslibs/audio-player/player.swf",
+                    allowFullScreen :"true",
+                    wmode: "transparent"
+                }, false
+        );
+    </script>
+{% endmacro %}
diff --git a/templates/web/common/players/pdf.html.twig b/templates/web/common/players/pdf.html.twig
new file mode 100644
index 0000000000..e22f84cbed
--- /dev/null
+++ b/templates/web/common/players/pdf.html.twig
@@ -0,0 +1,21 @@
+{% macro pdf_player(thumbnail, url, original_w, original_h, fit) %}
+    {% set random = thumbnail.get_random() %}
+    <div class="record record_document imgTips" style="position:relative;width:{{fit.width}}px;height:{{fit.height}}px;top:{{fit.top}}px;">
+        <div id="preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
+        <input type="hidden" name="width" value="{{original_w}}"/>
+        <input type="hidden" name="height" value="{{original_h}}"/>
+    </div>
+    <script type="text/javascript">
+        swfobject.embedSWF(
+                "/include/FlexPaper_flash/FlexPaperViewer.swf",
+                "preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
+                "100%", "100%", "9.0.0", false, false, {
+                    menu: "false",
+                    flashvars: "SwfFile={{url}}&Scale=0.6&ZoomTransition=easeOut&ZoomTime=0.5&ZoomInterval=0.1&FitPageOnLoad=true&FitWidthOnLoad=true&PrintEnabled=true&FullScreenAsMaxWindow=false&localeChain={{app['locale']}}",
+                    movie: "/include/FlexPaper_flash/FlexPaperViewer.swf",
+                    allowFullScreen :"true",
+                    wmode: "transparent"
+                }, false
+        );
+    </script>
+{% endmacro %}
diff --git a/templates/web/common/players/video.html.twig b/templates/web/common/players/video.html.twig
new file mode 100644
index 0000000000..8455049456
--- /dev/null
+++ b/templates/web/common/players/video.html.twig
@@ -0,0 +1,22 @@
+{% macro video_player(thumbnail, url, original_w, original_h, fit) %}
+    {% set random = thumbnail.get_random %}
+    <div class="record record_video imgTips" style="position:relative;width:{{fit.width}}px;height:{{fit.height}}px;top:{{fit.top}}px;">
+        <div id="preview{{random}}" class="PNB"></div>
+        <input type="hidden" name="width" value="{{original_w}}"/>
+        <input type="hidden" name="height" value="{{original_h}}"/>
+    </div>
+    <script type="text/javascript">
+        flowplayer("preview{{random}}",
+                {src:"/include/jslibs/flowplayer/flowplayer-3.2.18.swf", wmode: "transparent"},
+                {clip:{url:"{{url|url_encode}}",autoPlay: true,autoBuffering:true,provider: "h264streaming",scaling:"fit"},
+                    onError:function(code,message){getNewVideoToken("{{thumbnail.get_sbas_id() ~'_'~thumbnail.get_record_id()}}", this);},
+                    plugins: {
+                        {% if app['phraseanet.h264-factory'].isH264Enabled() %}
+                        h264streaming: {
+                            url: "/include/jslibs/flowplayer/pseudostreaming/flowplayer.pseudostreaming-3.2.13.swf"
+                        }
+                        {% endif %}
+                    }
+                });
+    </script>
+{% endmacro %}
diff --git a/templates/web/common/thumbnail.html.twig b/templates/web/common/thumbnail.html.twig
index a361faf776..5200055e4c 100644
--- a/templates/web/common/thumbnail.html.twig
+++ b/templates/web/common/thumbnail.html.twig
@@ -1,229 +1,63 @@
-{% macro format(thumbnail, b_w, b_h, extraclass, wrap, lazyload)%}
-  {% set record_type = thumbnail.get_type() %}
+{% macro format(thumbnail, box_w, box_h, extra_class, wrap, lazyload) %}
+        {% set record_type = thumbnail.get_type() %}
+        {% set box_w = box_w|round %}
+        {% set box_h = box_h|default(box_w)|round %}
 
+        {% if record_type == 'AUDIO_MP3' %}
+            {% set original_w = 320 %}
+            {% set original_h = 60 %}
 
-  {% set b_width = b_w %}
-  {% set b_height = b_h|default(b_w) %}
-
-  {% if record_type == 'AUDIO_MP3' %}
-
-      {% set d_width = 320 %}
-      {% set d_height = 60 %}
-      {% set top = 0 %}
-  {% elseif record_type == 'FLEXPAPER' %}
-
-      {% set d_width = 800 %}
-      {% set d_height = 600 %}
-      {% set top = 0 %}
-  {% else %}
-
-    {% set b_ratio = b_width / b_height %}
-
-    {% set thumbnail_height = thumbnail.get_height() > 0 ? thumbnail.get_height() : 120 %}
-    {% set thumbnail_width = thumbnail.get_width() > 0 ? thumbnail.get_width() : 120 %}
-
-    {% set i_ratio = thumbnail_width / thumbnail_height %}
-
-    {% if i_ratio > b_ratio%}
-      {% if b_width > thumbnail_width %}
-        {% set d_width = thumbnail_width %}
-      {% else %}
-        {% set d_width = b_width %}
-      {% endif %}
-      {% set d_height = d_width / thumbnail_width * thumbnail_height %}
-      {% set top = (b_height - d_height) / 2 %}
-    {% else %}
-      {% if b_height > thumbnail_height %}
-        {% set d_height = thumbnail_height %}
-      {% else %}
-        {% set d_height = b_height %}
-      {% endif %}
-      {% set d_width = d_height * thumbnail_width / thumbnail_height %}
-      {% set top = ((b_height - d_height) / 2) %}
-    {% endif %}
-
-  {% endif %}
-
-
-
-  {% if app['authentication'].isAuthenticated() == true %}
-  {% set url = thumbnail.get_url() %}
-  {% else %}
-  {% set url = thumbnail.get_permalink().get_url() %}
-  {% endif %}
-        {% if wrap %}
-        <div style="width:{{b_width|round}}px;height:{{b_height|round}}px;" class="thumb_wrapper {{extraclass|default('')}}">
-        {% endif %}
-        {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
-          {% set random = thumbnail.get_random() %}
-          <div class="record record_video imgTips" style="position:relative;width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
-              <div id="preview{{random}}" class="PNB"></div>
-              <input type="hidden" name="width" value="{{thumbnail_width}}"/>
-              <input type="hidden" name="height" value="{{thumbnail_height}}"/>
-          </div>
-          <script type="text/javascript">
-            flowplayer("preview{{random}}",
-              {src:"/include/jslibs/flowplayer/flowplayer-3.2.18.swf", wmode: "transparent"},
-              {clip:{url:"{{url|url_encode}}",autoPlay: true,autoBuffering:true,provider: "h264streaming",scaling:"fit"},
-              onError:function(code,message){getNewVideoToken("{{thumbnail.get_sbas_id() ~'_'~thumbnail.get_record_id()}}", this);},
-              plugins: {
-                  {% if app['phraseanet.h264-factory'].isH264Enabled() %}
-                  h264streaming: {
-                      url: "/include/jslibs/flowplayer/pseudostreaming/flowplayer.pseudostreaming-3.2.13.swf"
-                  }
-                  {% endif %}
-              }
-              });
-          </script>
+            {% set fit_size = {
+              "width":original_w,
+              "height":original_h,
+              "top":0,
+            } %}
         {% elseif record_type == 'FLEXPAPER' %}
-          {% set random = thumbnail.get_random() %}
-          <div class="record record_document imgTips" style="position:relative;width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
-              <div id="preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
-            <input type="hidden" name="width" value="{{d_width}}"/>
-            <input type="hidden" name="height" value="{{d_height}}"/>
-          </div>
-          <script type="text/javascript">
-            swfobject.embedSWF("/include/FlexPaper_flash/FlexPaperViewer.swf",
-            "preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
-            "100%", "100%", "9.0.0", false, false,
-            {menu: "false",flashvars: "SwfFile={{url}}&Scale=0.6&ZoomTransition=easeOut&ZoomTime=0.5&ZoomInterval=0.1&FitPageOnLoad=true&FitWidthOnLoad=true&PrintEnabled=true&FullScreenAsMaxWindow=false&localeChain={{app['locale']}}",	movie: "/include/FlexPaper_flash/FlexPaperViewer.swf",	allowFullScreen :"true",wmode: "transparent"}, false);</script>
+            {% set original_w = 800 %}
+            {% set original_h = 600 %}
 
+            {% set fit_size = {
+              "width":800,
+              "height":600,
+              "top":0,
+            } %}
+        {% else %}
+            {% set original_h = thumbnail.get_height() > 0 ? thumbnail.get_height() : 120 %}
+            {% set original_w = thumbnail.get_width() > 0 ? thumbnail.get_width() : 120 %}
+
+            {% set fit_size = fitIn(
+                {"width":original_w, "height":original_h},
+                {"width":box_w, "height":box_h}
+            )%}
+        {% endif %}
+
+        {% set url = app['authentication'].isAuthenticated() ? thumbnail.get_url() : thumbnail.get_permalink().get_url() %}
+
+        {% if wrap %}
+        <div
+            style="width:{{box_w}}px;height:{{box_h}}px;"
+            class="thumb_wrapper {{extra_class|default('')}}"
+        >
+        {% endif %}
+
+        {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
+            {% import 'common/players/video.html.twig' as player %}
+            {{ player.video_player(thumbnail, url, original_w, original_h, fit_size) }}
+        {% elseif record_type == 'FLEXPAPER' %}
+            {% import 'common/players/pdf.html.twig' as player %}
+            {{ player.pdf_player(thumbnail, url, original_w, original_h, fit_size) }}
+            {% import 'common/players/audio.html.twig' as player %}
         {% elseif record_type == 'AUDIO_MP3' %}
-          {% set random = thumbnail.get_random() %}
-          <div class="record record_audio audioTips" style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
-            <div id="preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
-            <input type="hidden" name="width" value="{{thumbnail_width}}"/>
-            <input type="hidden" name="height" value="{{thumbnail_height}}"/>
-          </div>
-          <script type="text/javascript">
-            swfobject.embedSWF("/include/jslibs/audio-player/player.swf",
-            "preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
-            "{{d_width}}", "{{d_height}}", "9.0.0", false, false,
-            {menu: "false",flashvars: "playerID=2&autostart=yes&noinfo=yes&animation=no&remaining=yes&soundFile={{url}}", movie: "/include/jslibs/audio-player/player.swf",	allowFullScreen :"true",wmode: "transparent"}, false);</script>
+            {{ player.audio_player(thumbnail, url, original_w, original_h, fit_size) }}
         {% else %}
           <img class="{% if lazyload %}lazyload{% endif %} record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
-               style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;"
+               style="width:{{fit_size.width}}px;height:{{fit_size.height}}px;top:{{fit_size.top}}px;"
                src="{% if lazyload %}/skins/grey.gif{% else %}{{ url }}{% endif %}" data-original="{{ url }}" ondragstart="return false;">
-          <input type="hidden" name="width" value="{{thumbnail_width}}"/>
-          <input type="hidden" name="height" value="{{thumbnail_height}}"/>
+          <input type="hidden" name="width" value="{{original_w}}"/>
+          <input type="hidden" name="height" value="{{original_h}}"/>
         {% endif %}
+
         {% if wrap %}
         </div>
         {% endif %}
-
-
 {% endmacro %}
-
-
-
-{% macro format_fit(thumbnail, b_w, b_h, extraclass, wrap)%}
-  {% set record_type = thumbnail.get_type() %}
-
-  {% if record_type == 'AUDIO_MP3' %}
-
-      {% set d_width = 320 %}
-      {% set d_height = 60 %}
-      {% set top = 0 %}
-  {% elseif record_type == 'FLEXPAPER' %}
-
-      {% set d_width = 800 %}
-      {% set d_height = 600 %}
-      {% set top = 0 %}
-  {% else %}
-
-    {% set b_width = b_w %}
-    {% set b_height = b_h|default(b_w) %}
-
-    {% set b_ratio = b_width / b_height %}
-
-    {% set thumbnail_height = thumbnail.get_height() > 0 ? thumbnail.get_height() : 120 %}
-    {% set thumbnail_width = thumbnail.get_width() > 0 ? thumbnail.get_width() : 120 %}
-
-    {% set i_ratio = thumbnail_width / thumbnail_height %}
-
-    {% if i_ratio > b_ratio%}
-      {% set d_height = b_height %}
-      {% set d_width = d_height * thumbnail_width / thumbnail_height %}
-      {% set left = (b_height - d_height) / 2 %}
-    {% else %}
-      {% if b_height > thumbnail_height %}
-        {% set d_height = thumbnail_height %}
-      {% else %}
-        {% set d_height = b_height %}
-      {% endif %}
-      {% set d_width = d_height * thumbnail_width / thumbnail_height %}
-      {% set top = ((b_height - d_height) / 2) %}
-    {% endif %}
-
-  {% endif %}
-
-
-
-  {% if app['authentication'].isAuthenticated() == true %}
-  {% set url = thumbnail.get_url() %}
-  {% else %}
-  {% set url = thumbnail.get_permalink().get_url() %}
-  {% endif %}
-        {% if wrap %}
-        <div style="width:{{b_width|round}}px;height:{{b_height|round}}px;" class="thumb_wrapper {{extraclass|default('')}}">
-        {% endif %}
-        {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
-          {% set random = thumbnail.get_random() %}
-          <div class="record record_video imgTips" style="position:relative;width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
-              <div id="preview{{random}}" class="PNB"></div>
-              <input type="hidden" name="width" value="{{thumbnail_width}}"/>
-              <input type="hidden" name="height" value="{{thumbnail_height}}"/>
-          </div>
-          <script type="text/javascript">
-            flowplayer("preview{{random}}",
-              {src:"/include/jslibs/flowplayer/flowplayer-3.2.18.swf", wmode: "transparent"},
-              {clip:{url:"{{url}}",autoPlay: true,autoBuffering:true,provider: "h264streaming",scaling:"fit"},
-              onError:function(code,message){getNewVideoToken({{thumbnail.get_sbas_id() ~'_'~thumbnail.get_record_id()}}, this);},
-              plugins: {
-                  {% if app['phraseanet.h264-factory'].isH264Enabled() %}
-                  h264streaming: {
-                      url: "/include/jslibs/flowplayer/pseudostreaming/flowplayer.pseudostreaming-3.2.13.swf"
-                  }
-                  {% endif %}
-              }
-              });
-          </script>
-        {% elseif record_type == 'FLEXPAPER' %}
-          {% set random = thumbnail.get_random() %}
-          <div class="record record_document imgTips" style="position:relative;width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
-              <div id="preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
-            <input type="hidden" name="width" value="{{d_width}}"/>
-            <input type="hidden" name="height" value="{{d_height}}"/>
-          </div>
-          <script type="text/javascript">
-            swfobject.embedSWF("/include/FlexPaper_flash/FlexPaperViewer.swf",
-            "preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
-            "100%", "100%", "9.0.0", false, false,
-            {menu: "false",flashvars: "SwfFile={{url}}&Scale=0.6&ZoomTransition=easeOut&ZoomTime=0.5&ZoomInterval=0.1&FitPageOnLoad=true&FitWidthOnLoad=true&PrintEnabled=true&FullScreenAsMaxWindow=false&localeChain={{app['locale']}}",	movie: "/include/FlexPaper_flash/FlexPaperViewer.swf",	allowFullScreen :"true",wmode: "transparent"}, false);</script>
-
-        {% elseif record_type == 'AUDIO_MP3' %}
-          {% set random = thumbnail.get_random() %}
-          <div class="record record_audio audioTips" style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
-            <div id="preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
-            <input type="hidden" name="width" value="{{thumbnail_width}}"/>
-            <input type="hidden" name="height" value="{{thumbnail_height}}"/>
-          </div>
-          <script type="text/javascript">
-            swfobject.embedSWF("/include/jslibs/audio-player/player.swf",
-            "preview_{{thumbnail.get_sbas_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
-            "{{d_width}}", "{{d_height}}", "9.0.0", false, false,
-            {menu: "false",flashvars: "playerID=2&autostart=yes&noinfo=yes&animation=no&remaining=yes&soundFile={{url}}", movie: "/include/jslibs/audio-player/player.swf",	allowFullScreen :"true",wmode: "transparent"}, false);</script>
-        {% else %}
-          <img class="record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
-               style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;"
-               src="{{url}}" ondragstart="return false;">
-          <input type="hidden" name="width" value="{{thumbnail_width}}"/>
-          <input type="hidden" name="height" value="{{thumbnail_height}}"/>
-        {% endif %}
-        {% if wrap %}
-        </div>
-        {% endif %}
-
-
-{% endmacro %}
-