Merge pull request #2540 from mike-esokia/PHRAS-1935_refacto_prod_video_editor

PHRAS-1935 refacto prod video tools section

resources/gulp/components/common.js

@@ -41,7 +41,9 @@ gulp.task('build-common-js', function(){
         config.paths.src + 'vendors/jquery-contextmenu/js/jquery.contextmenu_custom.js',
         config.paths.src + 'common/js/components/common.js',
         config.paths.src + 'common/js/components/tooltip.js',
-        config.paths.src + 'common/js/components/dialog.js'
+        config.paths.src + 'common/js/components/dialog.js',
+        config.paths.src + 'common/js/components/utils.js',
+        config.paths.src + 'common/js/components/download.js',
     ];
     return utils.buildJsGroup(commonGroup, 'common', 'common/js', debugMode);
 });

resources/www/common/js/components/download.js

@@ -0,0 +1,173 @@
+//download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage
+// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
+// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
+// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
+// v4 adds AMD/UMD, commonJS, and plain browser support
+// v4.1 adds url download capability via solo URL argument (same domain/CORS only)
+// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
+// https://github.com/rndme/download
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define([], factory);
+    } else if (typeof exports === 'object') {
+        // Node. Does not work with strict CommonJS, but
+        // only CommonJS-like environments that support module.exports,
+        // like Node.
+        module.exports = factory();
+    } else {
+        // Browser globals (root is window)
+        root.download = factory();
+    }
+}(this, function () {
+
+    return function download(data, strFileName, strMimeType) {
+
+        var self = window, // this script is only for browsers anyway...
+            defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
+            mimeType = strMimeType || defaultMime,
+            payload = data,
+            url = !strFileName && !strMimeType && payload,
+            anchor = document.createElement("a"),
+            toString = function (a) {
+                return String(a);
+            },
+            myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
+            fileName = strFileName || "download",
+            blob,
+            reader;
+        myBlob = myBlob.call ? myBlob.bind(self) : Blob;
+
+        if (String(this) === "true") { //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
+            payload = [payload, mimeType];
+            mimeType = payload[0];
+            payload = payload[1];
+        }
+
+
+        if (url && url.length < 2048) { // if no filename and no mime, assume a url was passed as the only argument
+            fileName = url.split("/").pop().split("?")[0];
+            anchor.href = url; // assign href prop to temp anchor
+            if (anchor.href.indexOf(url) !== -1) { // if the browser determines that it's a potentially valid url path:
+                var ajax = new XMLHttpRequest();
+                ajax.open("GET", url, true);
+                ajax.responseType = 'blob';
+                ajax.onload = function (e) {
+                    download(e.target.response, fileName, defaultMime);
+                };
+                setTimeout(function () {
+                    ajax.send();
+                }, 0); // allows setting custom ajax headers using the return:
+                return ajax;
+            } // end if valid url?
+        } // end if url?
+
+
+        //go ahead and download dataURLs right away
+        if (/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)) {
+
+            if (payload.length > (1024 * 1024 * 1.999) && myBlob !== toString) {
+                payload = dataUrlToBlob(payload);
+                mimeType = payload.type || defaultMime;
+            } else {
+                return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
+                    navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
+                    saver(payload); // everyone else can save dataURLs un-processed
+            }
+
+        }//end if dataURL passed?
+
+        blob = payload instanceof myBlob ?
+            payload :
+            new myBlob([payload], {type: mimeType});
+
+
+        function dataUrlToBlob(strUrl) {
+            var parts = strUrl.split(/[:;,]/),
+                type = parts[1],
+                decoder = parts[2] == "base64" ? atob : decodeURIComponent,
+                binData = decoder(parts.pop()),
+                mx = binData.length,
+                i = 0,
+                uiArr = new Uint8Array(mx);
+
+            for (i; i < mx; ++i) uiArr[i] = binData.charCodeAt(i);
+
+            return new myBlob([uiArr], {type: type});
+        }
+
+        function saver(url, winMode) {
+
+            if ('download' in anchor) { //html5 A[download]
+                anchor.href = url;
+                anchor.setAttribute("download", fileName);
+                anchor.className = "download-js-link";
+                anchor.innerHTML = "downloading...";
+                anchor.style.display = "none";
+                document.body.appendChild(anchor);
+                setTimeout(function () {
+                    anchor.click();
+                    document.body.removeChild(anchor);
+                    if (winMode === true) {
+                        setTimeout(function () {
+                            self.URL.revokeObjectURL(anchor.href);
+                        }, 250);
+                    }
+                }, 66);
+                return true;
+            }
+
+            // handle non-a[download] safari as best we can:
+            if (/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
+                url = url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
+                if (!window.open(url)) { // popup blocked, offer direct download:
+                    if (confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")) {
+                        location.href = url;
+                    }
+                }
+                return true;
+            }
+
+            //do iframe dataURL download (old ch+FF):
+            var f = document.createElement("iframe");
+            document.body.appendChild(f);
+
+            if (!winMode) { // force a mime that will download:
+                url = "data:" + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
+            }
+            f.src = url;
+            setTimeout(function () {
+                document.body.removeChild(f);
+            }, 333);
+
+        }//end saver
+
+
+        if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
+            return navigator.msSaveBlob(blob, fileName);
+        }
+
+        if (self.URL) { // simple fast and modern way using Blob and URL:
+            saver(self.URL.createObjectURL(blob), true);
+        } else {
+            // handle non-Blob()+non-URL browsers:
+            if (typeof blob === "string" || blob.constructor === toString) {
+                try {
+                    return saver("data:" + mimeType + ";base64," + self.btoa(blob));
+                } catch (y) {
+                    return saver("data:" + mimeType + "," + encodeURIComponent(blob));
+                }
+            }
+
+            // Blob but not URL support:
+            reader = new FileReader();
+            reader.onload = function (e) {
+                saver(this.result);
+            };
+            reader.readAsDataURL(blob);
+        }
+        return true;
+    };
+    /* end download() */
+}));

templates/web/prod/actions/Tools/confirm.html.twig

@@ -1,25 +1,10 @@
 <div id="thumb_confirm">
-<table>
-  <tbody>
-    <tr>
-      <td>
-        <img class="selected" src="{{image}}"/>
-      </td>
-      <td>
-        <img style=" width:50px;height:80px;"src="/assets/prod/images/ThumbExtractor/question_mark.png"/>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2" style='text-align:left'>
-        {{ 'you are about to change the  representation thumbnail of your video' | trans }} : <span style='color:#1B9DD0'>{{video_title}}</span>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2" style='text-align:left'>
-        {{ 'do you want to validate' | trans }}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
+  <img class="selected" src="{{ image }}"/>
+  <div>
+      {{ 'you are about to change the  representation thumbnail of your video' | trans }} : <span
+            style='color:#884c92'>{{ video_title }}</span>
+  </div>
+  <div>
+      {{ 'do you want to validate' | trans }}
+  </div>
 </div>

templates/web/prod/actions/Tools/videoEditor.html.twig

@@ -10,10 +10,10 @@
     {% endfor %}
 {% endif %}
 
-<div id='prod-tool-box' class="PNB10">
+<div id='prod-tool-box' class="PNB10 video-edit">
 
     {# jquery Tabs #}
-    <div id="tool-tabs" class="tabs">
+    <div id="tool-tabs" class="tabs PNB">
         {# jquery menu #}
         <div>
             <ul>
@@ -33,108 +33,113 @@
         {% if selectionLength == 1 %}
             {% for record in records %}
                 {% if record.get_type() == 'video' %}
-                    <div id="thumbExtractor" class="tabBox">
-                        <div class="PNB10 main_title">
-                            <img src='/assets/prod/images/ThumbExtractor/camera_title.png'/>
-                            {{ "screenshot video" | trans }}
-                        </div>
-                        <hr style='margin-top:25px;'/>
-                        <div class="PNB part_title_left"></div>
+                    <div id="thumbExtractor">
 
-                        <div class="PNB frame_video">
-                            {% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
-                            {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
-                            {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
-                            {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
+                        <div id="thumbExtractor-preview">
+                            <div class="frame_video">
+                                {% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
+                                {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
+                                {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
+                                {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}
 
-                            {% set technical_info = record.get_technical_infos %}
-                            {% set width = technical_info[dataW].value %}
-                            {% set height = technical_info[dataH].value %}
+                                {% set technical_info = record.get_technical_infos %}
+                                {% set width = technical_info[dataW].value %}
+                                {% set height = technical_info[dataH].value %}
 
-                            {% if width and height %}
-                                {% set rawRatio =  (width / height)|number_format(3, '.') %}
-                                {% set rawRatioLength =  rawRatio|length %}
-                                {% set ratio = rawRatio|slice(0,rawRatioLength-1) %}
-                            {% else %}
-                                {% set ratio = '' %}
-                            {% endif %}
+                                {% if width and height %}
+                                    {% set rawRatio =  (width / height)|number_format(3, '.') %}
+                                    {% set rawRatioLength =  rawRatio|length %}
+                                    {% set ratio = rawRatio|slice(0,rawRatioLength-1) %}
+                                {% else %}
+                                    {% set ratio = '' %}
+                                {% endif %}
 
-                            <video id="thumb_video" controls="" preload="auto" data-ratio="{{ ratio }}">
-                                {% for subdef in previewHtml5 %}
-                                    <source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}"/>
-                                {% endfor %}
-                                {{ 'No preview available' | trans }}
-                            </video>
-                        </div>
-
-                        <div class="PNB action_bar_left">
-                        </div>
-
-                        <div id="thumb_camera_button" class="PNB">
-                            <img src="/assets/prod/images/ThumbExtractor/camera_button.png"
-                                 alt="{{ 'take a screenshot' | trans }}"/>
-                        </div>
-
-                        <div class="PNB part_title_right">
-                        </div>
-
-                        <div class="PNB frame_canva">
-                            <div id="thumb_delete_button">
-                                <img src="/assets/prod/images/ThumbExtractor/delete.png"/>
+                                <video id="thumb_video" controls="" preload="auto" data-ratio="{{ ratio }}">
+                                    {% for subdef in previewHtml5 %}
+                                        <source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}"/>
+                                    {% endfor %}
+                                    {{ 'No preview available' | trans }}
+                                </video>
                             </div>
-                            <p id='thumb_info'>{{ 'To take a screenshot click on camera' | trans }}</p>
-                            <canvas id="thumb_canvas"></canvas>
-                            <div id="alt_canvas_container"
-                                 style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
-                                {% for subdef in outputFormats %}
-                                    <canvas data-width="{{ subdef.get_width() }}" data-name="{{ subdef.get_name() }}"
-                                            class="alt_canvas" id="{{ subdef.get_name() }}"></canvas>
-                                {% endfor %}
+
+                            <div id="thumb_camera_button"></div>
+
+                            <div class="vertical-divider"></div>
+
+                            <div class="video-data-container">
+                                <dl class="dl-horizontal">
+                                    <dt>Ratio</dt>
+                                    <dd>{{ ratio }}</dd>
+                                    <dt>Type</dt>
+                                    <dd>{{ record.get_mime() }}</dd>
+                                    {% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
+                                        <dt>{{ 'Images par secondes' | trans }}</dt>
+                                        <dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }}ips
+                                        </dd>
+                                    {% endif %}
+                                    {% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
+                                        <dt>{{ 'Codec Audio' | trans }}</dt>
+                                        <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
+                                    {% endif %}
+                                    <dt>{{ 'Size' | trans }}</dt>
+                                    <dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
+                                        (null) %}
+                                        {% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
+                                        {% if width is not none and height is not none %}
+                                            {{ width ~ " x " ~ height }}
+                                        {% endif %}</dd>
+                                </dl>
                             </div>
 
                         </div>
-                        <div id="thumb_slider" class="PNB">
-                            <div id="thumb_wrapper">
+                        <div class="horizontal-divider"></div>
+                        <div id="thumbExtractor-screenshot">
+                            <p id='thumb_info'>{{ "screenshot video" | trans }}</p>
+
+                            <div id="frame">
+                                <div class="frame_canva">
+                                    <div id="thumb_delete_button"/>
+                                    <div id="thumb_download_button"/>
+                                    <canvas id="thumb_canvas"></canvas>
+                                    <div id="alt_canvas_container"
+                                         style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
+                                        {% for subdef in outputFormats %}
+                                            <canvas data-width="{{ subdef.get_width() }}"
+                                                    data-height="{{ subdef.get_height() }}"
+                                                    data-name="{{ subdef.get_name() }}"
+                                                    class="alt_canvas" id="{{ subdef.get_name() }}"></canvas>
+                                        {% endfor %}
+                                    </div>
+
+                                </div>
+                            </div>
+
+                            <div id="grid">
+                            </div>
+
+                            {#<div id="thumb_slider">#}
+                            {#<div id="thumb_wrapper">#}
+                            {#</div>#}
+                            {#</div>#}
+                            <div class="thumb_submit_action">
+                                <input type="hidden" value='{{ record.get_sbas_id() }}' name='sbas_id'>
+                                <input type="hidden" value='{{ record.get_record_id() }}' name='record_id'>
+                                <button id="thumb_validate_button" class="btn btn-inverse"
+                                        type="button">{{ "validate" | trans }}</button>
+
                             </div>
-                        </div>
-                        <div class="thumb_submit_action PNB">
-                            <input type="hidden" value='{{ record.get_sbas_id() }}' name='sbas_id'>
-                            <input type="hidden" value='{{ record.get_record_id() }}' name='record_id'>
-                            <button id="thumb_validate_button" class="btn btn-inverse"
-                                    type="button">{{ "validate" | trans }}</button>
 
                         </div>
+
                     </div>
                     <div id="rangeExtractor" class="">
-                        <div class="main_title">
-                            <img src='/assets/prod/images/ThumbExtractor/camera_title.png'/>
-                            {{ "video range extractor" | trans }}
+                        <div class="video-range-editor-side-container">
+                            <div class="main_title">
+                                {{ "prod:edit: chapters" | trans }}
+                            </div>
+                            <hr/>
                         </div>
                         <div class="video-range-editor-container"></div>
-                        <div class="video-data-container">
-                            <dl class="dl-horizontal">
-                                <dt>Ratio</dt>
-                                <dd>{{ ratio }}</dd>
-                                <dt>Type</dt>
-                                <dd>{{ record.get_mime() }}</dd>
-                                {% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
-                                    <dt>{{ 'Images par secondes' | trans }}</dt>
-                                    <dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }}ips
-                                    </dd>
-                                {% endif %}
-                                {% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
-                                    <dt>{{ 'Codec Audio' | trans }}</dt>
-                                    <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
-                                {% endif %}
-                                <dt>{{ 'Size' | trans }}</dt>
-                                <dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
-                                    (null) %}
-                                    {% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
-                                    {% if width is not none and height is not none %}
-                                        {{ width ~ " x " ~ height }}
-                                    {% endif %}</dd>
-                            </dl>
-                        </div>
                     </div>
                 {% endif %}
             {% endfor %}