integration of embed player in permaview, added frontend script for embed bundle, dumped translation keys

bower.json

@@ -27,7 +27,8 @@
     "fancytree": "~2.7",
     "bootstrap-sass": "v2.3.2.2",
     "jquery.lazyload": "~1.9.7",
-    "jquery-treeview": "~1.4.2"
+    "jquery-treeview": "~1.4.2",
+    "alchemy-embed-medias": "https://github.com/lostdalek/embed-bundle.git"
   },
   "devDependencies": {
     "mocha": "latest",

composer.json

@@ -25,6 +25,10 @@
         {
             "type": "git",
             "url": "https://github.com/alchemy-fr/symfony-cors"
+        },
+        {
+            "type": "vcs",
+            "url":  "https://github.com/lostdalek/embed-bundle.git"
         }
     ],
     "require":      {

composer.lock

@@ -2819,7 +2819,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-develop": "0.6-dev"
+                    "dev-develop": "0.7-dev"
                 }
             },
             "autoload": {
@@ -4312,9 +4312,7 @@
             "authors": [
                 {
                     "name": "Fabien Potencier",
-                    "email": "fabien@symfony.com",
+                    "email": "fabien@symfony.com"
-                    "homepage": "http://fabien.potencier.org",
-                    "role": "Lead Developer"
                 }
             ],
             "description": "Pimple is a simple Dependency Injection Container for PHP 5.3",
@@ -6341,6 +6339,7 @@
     ],
     "minimum-stability": "stable",
     "stability-flags": {
+        "alchemy/embed-bundle": 20,
         "alchemy/rest-bundle": 20,
         "alchemy/task-manager": 20,
         "alchemy/zippy": 20,

lib/Alchemy/Phrasea/Controller/PermalinkController.php

@@ -103,6 +103,7 @@ class PermalinkController extends AbstractDelivery
             'module_name' => 'overview',
             'module'      => 'overview',
             'view'        => 'overview',
+            'token'       => $token,
             'record'      => $record,
         ]);
     }

resources/gulp/build.js

@@ -10,6 +10,7 @@ var utils = require('./utils.js');
 
 gulp.task('build', ['build-vendors'], function(){
     gulp.start('build-common');
+    gulp.start('build-permaview');
     gulp.start('build-oauth');
     gulp.start('build-prod');
     gulp.start('build-thesaurus');
@@ -25,6 +26,7 @@ gulp.task('build', ['build-vendors'], function(){
 
 // standalone vendors used across application
 gulp.task('build-vendors', [
+    'build-alchemy-embed',
     'build-bootstrap',
     'build-colorpicker',
     'build-jquery',
@@ -46,5 +48,6 @@ gulp.task('build-vendors', [
     'build-requirejs',
     'build-jquery-treeview',
     'build-jquery-lazyload',
-    'build-jquery-test-paths'
+    'build-jquery-test-paths',
+    'build-swfobject'
     ], function() {});

resources/gulp/components/permaview.js

@@ -0,0 +1,41 @@
+var gulp = require('gulp');
+var config = require('../config.js');
+var utils = require('../utils.js');
+var debugMode = false;
+
+gulp.task('copy-permaview-images', function(){
+    return gulp.src([config.paths.src + 'permaview/images/**/*'])
+        .pipe(gulp.dest( config.paths.build + 'permaview/images'));
+});
+gulp.task('build-permaview-css', function(){
+    return utils.buildCssGroup([
+        config.paths.src + 'permaview/styles/main.scss'
+    ], 'permaview', 'permaview/css/', debugMode);
+});
+
+gulp.task('build-permaview-js', function(){
+    // nothing to build
+    /*
+    var permaviewGroup =  [
+        config.paths.src + 'vendors/jquery-mousewheel/js/jquery.mousewheel.js',
+        config.paths.src + 'vendors/jquery-image-enhancer/js/jquery.image_enhancer.js',
+        config.paths.vendors + 'swfobject/swfobject/swfobject.js', // @TODO: should be moved away (embed-bundle)
+        config.paths.dist + 'include/jslibs/flowplayer/flowplayer-3.2.13.min.js' // @TODO: should be moved away (embed-bundle)
+    ];
+    return utils.buildJsGroup(permaviewGroup, 'permaview', 'permaview/js', debugMode);
+    */
+});
+
+gulp.task('watch-permaview-js', function() {
+    debugMode = true;
+    return gulp.watch(config.paths.src + 'permaview/**/*.js', ['build-permaview-js']);
+});
+
+gulp.task('watch-permaview-css', function() {
+    debugMode = true;
+    gulp.watch(config.paths.src + 'permaview/**/*.scss', ['build-permaview-css']);
+});
+
+gulp.task('build-permaview', ['copy-permaview-images', 'build-permaview-css'], function(){
+    return gulp.start('build-permaview-js');
+});

resources/gulp/components/prod.js

@@ -14,17 +14,6 @@ gulp.task('build-uploadFlash',  function(){
     return utils.buildJsGroup(uploadFlashGroup, 'uploadFlash', 'upload/js');
 });
 
-// prod submodule
-gulp.task('build-permaview',  function(){
-    var permaviewGroup =  [
-        config.paths.src + 'vendors/jquery-mousewheel/js/jquery.mousewheel.js',
-        config.paths.src + 'vendors/jquery-image-enhancer/js/jquery.image_enhancer.js',
-        config.paths.vendors + 'swfobject/swfobject/swfobject.js', // @TODO: should be moved away (embed-bundle)
-        config.paths.dist + 'include/jslibs/flowplayer/flowplayer-3.2.13.min.js' // @TODO: should be moved away (embed-bundle)
-    ];
-    return utils.buildJsGroup(permaviewGroup, 'permaview', 'permaview/js', debugMode);
-});
-
 gulp.task('copy-prod-skin-black-images', function(){
     return gulp.src([
             config.paths.src + 'prod/skins/000000/images/**/*'

resources/gulp/components/vendors/alchemy-embed.js

@@ -0,0 +1,9 @@
+var gulp = require('gulp');
+var config = require('../../config.js');
+var utils = require('../../utils.js');
+
+gulp.task('build-alchemy-embed', function(){
+    // copy all dist folder:
+    return gulp.src(config.paths.vendors + 'alchemy-embed-medias/dist/**/*')
+        .pipe(gulp.dest( config.paths.build + 'vendors/alchemy-embed-medias'));
+});

resources/gulp/components/vendors/swfobject.js

@@ -0,0 +1,9 @@
+var gulp = require('gulp');
+var config = require('../../config.js');
+var utils = require('../../utils.js');
+
+gulp.task('build-swfobject', function(){
+    // copy all dist folder:
+    return gulp.src(config.paths.vendors + 'swfobject/swfobject/swfobject.js')
+        .pipe(gulp.dest( config.paths.build + 'vendors/swfobject'));
+});

resources/locales/validators.de.xlf

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2015-11-18T19:38:50Z" source-language="en" target-language="de" datatype="plaintext" original="not.available">
+  <file date="2015-12-04T11:35:31Z" source-language="en" target-language="de" datatype="plaintext" original="not.available">
     <header>
       <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
       <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>

resources/locales/validators.en.xlf

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2015-11-24T15:43:13Z" source-language="en" target-language="en" datatype="plaintext" original="not.available">
+  <file date="2015-12-04T11:38:08Z" source-language="en" target-language="en" datatype="plaintext" original="not.available">
     <header>
       <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
       <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>

resources/locales/validators.fr.xlf

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2015-11-24T15:44:35Z" source-language="en" target-language="fr" datatype="plaintext" original="not.available">
+  <file date="2015-12-04T11:41:01Z" source-language="en" target-language="fr" datatype="plaintext" original="not.available">
     <header>
       <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
       <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>

resources/locales/validators.nl.xlf

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2015-11-18T19:43:55Z" source-language="en" target-language="nl" datatype="plaintext" original="not.available">
+  <file date="2015-12-04T11:43:56Z" source-language="en" target-language="nl" datatype="plaintext" original="not.available">
     <header>
       <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
       <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>

resources/www/permaview/styles/main.scss

@@ -0,0 +1,106 @@
+@import '../../_shared/styles/variables';
+
+$textPrimaryColor: #FFFFFF; //#b1b1b1;
+$textPrimaryHoverColor: #FFFFFF;
+
+$darkBackgroundColor: #212121;
+$mediumBackgroundColor: #3b3b3b;
+$mediumBorderColor: #303030;
+$lightBackgroundColor: #414141;
+
+$mainMenuBackgroundColor: $mediumBackgroundColor;
+$mainMenuBottomBorder: 1px solid $mediumBorderColor;
+$mainMenuHeight: 41px;
+$mainMenuMarginBottom: 0;
+$mainMenuLinkColor: #b1b1b1;
+$mainMenuLinkBackgroundHoverColor: transparent;
+$mainMenuLinkHoverColor: $textPrimaryHoverColor;
+@import '../../_shared/styles/main-menu';
+
+.PNB {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+body {
+  color: $textPrimaryColor;
+  background-color: $darkBackgroundColor;
+  font-size: $mediumFontSize;
+  font-family: $defaultFontFamily;
+  overflow: auto;
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 26px;
+  font-weight: bold;
+  padding: 30px 0 20px;
+}
+
+.content-container {
+  width: 70%;
+  max-width: 860px;
+  background-color: #414141;
+  padding: 0 20px;
+  margin: 0 auto;
+  height: 100%;
+  position: relative !important;
+}
+
+.preview {
+  iframe {
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.caption {
+  padding: 30px 0 20px;
+}
+
+dl {
+  margin-bottom: 20px;
+}
+
+dt,
+dd {
+  line-height: 20px;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 10px;
+}
+
+.dl-horizontal {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    line-height: 0;
+    content: "";
+  }
+  &:after {
+    clear: both;
+  }
+  dt {
+    float: left;
+    width: 160px;
+    overflow: hidden;
+    clear: left;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  dd {
+    margin-left: 180px;
+  }
+}

templates/web/overview.html.twig

@@ -7,45 +7,11 @@
 {% endblock %}
 
 {% block stylesheet %}
+    <link type="text/css" rel="stylesheet" href="/assets/permaview/css/permaview{% if not app.debug %}.min{% endif %}.css">
         <style type="text/css">
-            body {
-                color: #FFFFFF;
-                background-color: #212121;
-                font-family: Helvetica, Arial, sans-serif;
-                font-size: 14px;
-                overflow: auto;
-                min-height: 100%;
-                width: 100%;
-            }
 
-            h1 {
-                font-size: 26px;
-                font-weight: bold;
-                padding: 50px 0 20px;
-            }
-            #page {
-                width: 860px;
-                background-color: #414141;
-                padding: 0 20px;
-                margin: 0 auto;
-                height: 100%;
-                position: relative !important;
-            }
-
-            .preview .thumb_wrapper {
-                overflow: hidden;
-            }
-
-            .caption {
-                padding: 50px 0 20px;
-            }
         </style>
 {% endblock %}
-{% block javascript %}
-    <script type="text/javascript" src="/assets/vendors/jquery/jquery{% if not app.debug %}.min{% endif %}.js"></script>
-    <script type="text/javascript" src="/assets/vendors/jquery-ui/jquery-ui{% if not app.debug %}.min{% endif %}.js"></script>
-    <script type="text/javascript" src="/assets/permaview/js/permaview{% if not app.debug %}.min{% endif %}.js"></script>
-{% endblock %}
 
 {% block rss %}
     {% for metaKey, metaValue in ogMetaDatas %}
@@ -53,140 +19,14 @@
     {% endfor %}
 {% endblock %}
 
-{% block stylesheet %}
-    <style type="text/css">
-        html {
-            color: white;
-            background-color: #212121;
-        }
-
-        body {
-            font-family: Helvetica, Arial, sans-serif;
-            font-size: 14px;
-            overflow: auto;
-            min-height: 100%;
-            width: 100%;
-            top: 0;
-            left: 0;
-            position: absolute;
-        }
-        #mainContainer {
-            margin-top: 32px;
-        }
-
-        h1 {
-            font-size: 26px;
-            font-weight: bold;
-            padding: 50px 0 20px;
-        }
-
-        #page {
-            width: 860px;
-            background-color: #414141;
-            padding: 0 20px;
-            margin: 0 auto;
-            height: 100%;
-        }
-        .record {
-            margin: 0 auto;
-        }
-        .preview .thumb_wrapper {
-            overflow: hidden;
-        }
-
-        .caption {
-            padding: 30px 0 20px;
-        }
-        dl {
-            margin-bottom: 20px;
-        }
-
-        dt,
-        dd {
-            line-height: 20px;
-        }
-
-        dt {
-            font-weight: bold;
-        }
-
-        dd {
-            margin-left: 10px;
-        }
-
-        .dl-horizontal {
-            *zoom: 1;
-        }
-
-        .dl-horizontal:before,
-        .dl-horizontal:after {
-            display: table;
-            line-height: 0;
-            content: "";
-        }
-
-        .dl-horizontal:after {
-            clear: both;
-        }
-
-        .dl-horizontal dt {
-            float: left;
-            width: 160px;
-            overflow: hidden;
-            clear: left;
-            text-align: right;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .dl-horizontal dd {
-            margin-left: 180px;
-        }
-        </style>
-{% endblock %}
-{% block javascript %}
-
-    {#{% if subdef.get_type() == 'VIDEO_MP4' or subdef.get_type() == 'VIDEO_FLV' %}
-        <script type="text/javascript"
-                src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js,include/jslibs/jquery.mousewheel.js' }) }}"></script>
-        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/jquery.ui/jquery-ui.js' }) }}"></script>
-        <script type="text/javascript" src="/include/jslibs/flowplayer/flowplayer-3.2.13.min.js"></script>
-
-    {% elseif subdef.get_type() == 'FLEXPAPER' or subdef.get_type() == 'AUDIO_MP3' %}
-        <script type="text/javascript"
-                src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js,include/jslibs/jquery.mousewheel.js,assets/swfobject/swfobject.js' }) }}"></script>
-        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/jquery.ui/jquery-ui.js' }) }}"></script>
-
-    {% else %}
-
-        <script type="text/javascript"
-                src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js,include/jslibs/jquery.mousewheel.js,include/jquery.image_enhancer.js' }) }}"></script>
-        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/jquery.ui/jquery-ui.js' }) }}"></script>
-
-        <script type="text/javascript">
-            $(document).ready(function () {
-                $('.preview.enhancable').image_enhance({
-                    zoomable: true
-                });
-            })
-        </script>
-    {% endif %}#}
-
-    <script type="text/javascript">
-        $(document).ready(function () {
-            $('.preview .thumb_wrapper').width('100%');
-        });
-    </script>
-
-{% endblock %}
-
 {% block content %}
-    <div id="page" >
+    <div class="content-container" >
         <h1>{{ record.get_title() }}</h1>
 
-        <div class="preview enhancable">
+        <div class="preview">
-            {% import 'common/thumbnail.html.twig' as thumbnail %}
+            <iframe width="{{ subdef.get_width() }}" height="{{ subdef.get_height() }}"
-            {{ thumbnail.format(subdef, subdef.get_width(), subdef.get_height(), '', true, false) }}
+                    src="{{ app['request'].baseUrl }}/embed/{{ record.getBaseId() }}/{{ record.getRecordId() }}/{{ subdef.get_name() }}/?token={{ token }}"
+                    frameborder="0" allowfullscreen></iframe>
         </div>
 
         <div class="caption">

templates/web/prod/Share/record.html.twig

@@ -1,17 +1,16 @@
 {% if not isAvailable %}
-    <p>{{ 'No permalink available.' | trans }}</p>{#
+    <p>{{ 'No permalink available.' | trans }}</p>
-    <p>{{ 'No preview available.' | trans }}</p>#}
 {% else %}
     {%  if preview.permalinkUrl is not empty %}
         <div id="share">
             <div id="tweet" class="well-large">
-                <div>
+                <p>
                     <a href="http://www.twitter.com/home/?status={{ preview.permaviewUrl }}" target="_blank">
                         <img src="/assets/common/images/icons/twitter.ico" title="share this on twitter" style="vertical-align:middle;padding:0 5px;"/>
                         {% trans %}Send to Twitter{% endtrans %}
                     </a>
-                </div>
+                </p>
-                <div>
+                <p>
                     <a href="http://www.facebook.com/sharer.php?u={{ preview.permaviewUrl }}" target="_blank">
                         <img src="/assets/common/images/icons/facebook.ico" title="share on facebook" style="vertical-align:middle;padding:0 5px;"/>
                         {% trans %}Send to Facebook{% endtrans %}
@@ -25,16 +24,16 @@
                                id="permalinkUrl"/>
 
                         <p class="pull-right">
-                            <a href="{{ preview.permalinkUrl }}" target="_blank">previewLabel</a> &nbsp;&nbsp;
+                            <a href="{{ preview.permalinkUrl }}" target="_blank">{{ 'previewLinkLabel' | trans }}</a> &nbsp;&nbsp;
-                            <a href="#" class="" id="permalinkUrlCopy">copyClipboardLabel</a>
+                            <a href="#" class="" id="permalinkUrlCopy">{{ 'copyClipboardLabel' | trans }}</a>
                         </p>
                     </div>
                     <div class="form-group clearfix">
                         <label>{% trans %}Detailed view URL{% endtrans %}</label>
                         <input class="input-block-level" readonly="readonly" type="text" value="{{ preview.permaviewUrl }}" id="permaviewUrl"/>
                         <p class="pull-right">
-                            <a href="{{ preview.permaviewUrl }}" target="_blank">previewLabel</a> &nbsp;&nbsp;
+                            <a href="{{ preview.permaviewUrl }}" target="_blank">{{ 'previewLinkLabel' | trans }}</a> &nbsp;&nbsp;
-                            <a href="#" class="" id="permaviewUrlCopy">copyClipboardLabel</a>
+                            <a href="#" class="" id="permaviewUrlCopy">{{ 'copyClipboardLabel' | trans }}</a>
                         </p>
                     </div>
                     <div class="form-group clearfix">
@@ -46,13 +45,13 @@
                             </textarea>
                         {% endspaceless %}
                         <p class="pull-right">
-                            <a href="{{ preview.embedUrl }}" target="_blank">previewLabel</a> &nbsp;&nbsp;
+                            <a href="{{ preview.embedUrl }}" target="_blank">{{ 'previewLinkLabel' | trans }}</a> &nbsp;&nbsp;
-                            <a href="#" class="" id="embedCopy">copyClipboardLabel</a>
+                            <a href="#" class="" id="embedCopy">{{ 'copyClipboardLabel' | trans }}</a>
                         </p>
                     </div>
                     {#{% endif %}#}
                 </form>
-            </div>
+            </p>
         </div>
 
         <script language="javascript">