[IMP] website: add video media editor

bzr revid: chm@openerp.com-20140328104453-2faynhhc1wi5598l

5 files changed, 146 insertions, 19 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index e734525ee08..29d4e06eaff 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -531,8 +532,15 @@ span[data-oe-type="monetary"] {
   margin: 40px auto;
 }
 
-.oe_website_overflow_ellipsis{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
+div.media_iframe_video {
+  height: 0;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 66.5%;
+}
+div.media_iframe_video iframe {
+  width: 100%;
+  height: 100%;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 3bdda2cb720..0d545e4362d 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -435,3 +435,13 @@ span[data-oe-type="monetary"]
     overflow:hidden
     text-overflow:ellipsis
 
+div.media_iframe_video
+    height: 0
+    margin: 0 auto
+    text-align: center
+    position: relative
+    overflow: hidden
+    padding-bottom: 66.5%
+    iframe
+        width: 100%
+        height: 100%
\ No newline at end of file
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index d756f3c67d3..9ced9905bd8 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -727,7 +727,7 @@
             // -ish, because when moving to the button itself ``previous`` is
             // still set to the element having triggered showing the button.
             var previous;
-            $(editor.element.$).on('mouseover', 'a, img, .fa', function () {
+            $(editor.element.$).on('mouseover', 'a, img, .fa, .media_iframe_video', function () {
                 // Back from edit button -> ignore
                 if (previous && previous === this) { return; }
 
@@ -746,7 +746,7 @@
                 previous = this;
                 var $selected = $(this);
                 var position = $selected.offset();
-                if ($selected.is('img') || $selected.is('.fa')) {
+                if ($selected.is('img') || $selected.is('.fa') || $selected.is('.media_iframe_video')) {
                     $link_button.hide();
                     // center button on image
                     $image_button.show().offset({
@@ -1370,35 +1370,38 @@
         }),
 
         init: function (editor, media) {
-            this.media = media;
+            this._super(editor);
             this.editor = editor;
             this.page = 0;
-            this._super(editor);
+            this.media = media;
         },
-        start: function (editor, media) {
+        start: function () {
             var self = this;
             this.imageDialog = new website.editor.RTEImageDialog(this, this.editor, this.media);
             this.imageDialog.appendTo(this.$("#editor-media-image"));
             this.iconDialog = new website.editor.FontIconsDialog(this, this.editor, this.media);
             this.iconDialog.appendTo(this.$("#editor-media-icon"));
-            this.videoDialog = {};
-            //this.videoDialog.appendTo(this.$("#editor-media-video"));
+            this.videoDialog = new website.editor.VideoDialog(this, this.editor, this.media);
+            this.videoDialog.appendTo(this.$("#editor-media-video"));
 
             this.active = this.imageDialog;
 
             $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
                 if ($(event.target).is('[href="#editor-media-image"]')) {
                     self.active = self.imageDialog;
+                    self.$('.nav-tabs li.search').removeClass("hidden");
                 } else if ($(event.target).is('[href="#editor-media-icon"]')) {
                     self.active = self.iconDialog;
+                    self.$('.nav-tabs li.search').removeClass("hidden");
                 } else if ($(event.target).is('[href="#editor-media-video"]')) {
                     self.active = self.videoDialog;
+                    self.$('.nav-tabs li.search').addClass("hidden");
                 }
             });
 
             if (this.media.$.nodeName === "IMG") {
                 this.$('[href="#editor-media-image"]').tab('show');
-            } else if (this.media.$.nodeName === "IFRAME") {
+            } else if (this.media.$.className.match(/(^|\s)media_iframe_video($|\s)/)) {
                 this.$('[href="#editor-media-video"]').tab('show');
             } else if (this.media.$.className.match(/(^|\s)fa($|\s)/)) {
                 this.$('[href="#editor-media-icon"]').tab('show');
@@ -1474,9 +1477,9 @@
             'click .existing-attachment-remove': 'try_remove',
         }),
 
-        init: function (editor, media) {
+        init: function (parent, editor, media) {
             this.page = 0;
-            this._super(editor, media);
+            this._super(parent, editor, media);
         },
         start: function () {
             var res = this._super();
@@ -1822,6 +1825,67 @@
         }
     });
 
+    website.editor.VideoDialog = website.editor.Media.extend({
+        template: 'website.editor.dialog.video',
+        events : _.extend({}, website.editor.Dialog.prototype.events, {
+            'input input#urlvideo': 'get_video',
+        }),
+        start: function () {
+            this.$iframe = this.$("iframe");
+            var $media = $(this.media.$);
+            if ($media.hasClass("media_iframe_video")) {
+                var src = $media.data('src');
+                this.$("input#urlvideo").val(src);
+                this.$("#autoplay").attr("checked", src.indexOf('autoplay=1') != -1);
+                this.get_video();
+            }
+            return this._super();
+        },
+        get_url: function () {
+            var video_id = this.$("#video_id").val();
+            var video_type = this.$("#video_type").val();
+            switch (video_type) {
+                case "youtube":
+                    return "//www.youtube.com/embed/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
+                case "vimeo":
+                    return "//player.vimeo.com/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
+                case "dailymotion":
+                    return "//www.dailymotion.com/embed/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
+            }
+        },
+        get_video: function () {
+            var needle = this.$("input#urlvideo").val();
+            var video_id;
+            var video_type;
+
+            if (needle.indexOf(".youtube.") != -1) {
+                video_type = "youtube";
+                video_id = needle.match(/\.youtube\.[a-z]+\/(embed\/|watch\?v=)?([^\/?&]+)/i)[2];
+            } else if (needle.indexOf("//youtu.") != -1) {
+                video_type = "youtube";
+                video_id = needle.match(/youtube\.[a-z]+\/([^\/?&]+)/i)[1];
+            } else if (needle.indexOf("player.vimeo.") != -1 || needle.indexOf("//vimeo.") != -1) {
+                video_type = "vimeo";
+                video_id = needle.match(/vimeo\.[a-z]+\/([^\/?&]+)/i)[1];
+            } else if (needle.indexOf(".dailymotion.") != -1) {
+                video_type = "dailymotion";
+                video_id = needle.match(/dailymotion\.[a-z]+\/(embed\/)?(video\/)?([^\/?&]+)/i)[3];
+            }
+
+            this.$("#video_id").val(video_id);
+            this.$("#video_type").val(video_type);
+
+            this.$iframe.attr("src", this.get_url());
+        },
+        save: function () {
+            $(this.media.$).replaceWith(
+                '<div class="media_iframe_video" data-type="'+video_type+'" data-type="'+video_id+'" data-src="'+this.get_url()+'">'+
+                    '<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+
+                '</div>');
+            this._super();
+        },
+    });
+
     website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
     var OBSERVER_CONFIG = {
         childList: true,
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index 56ad596d71a..e300d4d5338 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -148,4 +148,11 @@
             });
         },
     });
+
+    website.snippet.animationRegistry.media_video = website.snippet.Animation.extend({
+        selector: ".media_iframe_video",
+        start: function () {
+            this.$target.html('<iframe src="'+this.$target.data("src")+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
+        },
+    });
 })();
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 607e603e724..b703ab633ee 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -101,13 +101,13 @@
                             <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
                             <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
                             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
-                            <li style="float: right;">
+                            <li class="search" style="float: right;">
                                 <ul class="pager mb0 mt0">
                                     <li class="previous disabled"><a href="#">← Previous</a></li>
                                     <li class="next disabled"><a href="#">Next →</a></li>
                                 </ul>
                             </li>
-                            <li style="float: right;">
+                            <li class="search" style="float: right;">
                                 <form action="#">
                                     <div class="form-group font-icons fa fa-search mb0">
                                         <input type="search" class="form-control" id="icon-search"/>
@@ -274,9 +274,9 @@
     </t>
 
     <t t-name="website.editor.dialog.font-icons">
-        <form>
-            <input type="hidden" id="fa-icon" class="form-control"/>
-            <input type="hidden" id="fa-size" class="form-control"/>
+        <form action="#">
+            <input type="hidden" id="fa-icon"/>
+            <input type="hidden" id="fa-size"/>
             <div class="font-icons-icons">
                 <t t-call="website.editor.dialog.font-icons.icons">
                     <t t-set="icons" t-value="widget.icons"/>
@@ -295,4 +295,42 @@
         </span>
     </t>
 
+    <t t-name="website.editor.dialog.video">
+        <form action="#" class="form-inline">
+            <div class="well">
+                <div class="form-group">
+                    <label for="urlvideo">Viedo URL</label>
+                    <input type="text"
+                        name="url"
+                        class="form-control url"
+                        style="width: 400px;"
+                        id="urlvideo"
+                        placeholder="http://openerp.com"
+                        value="//www.youtube.com/embed/yws1tbgNV7k"/>
+                    <span class="text-muted">
+                        Youtube, Vimeo, Dailymotion
+                    </span>
+                </div>
+            </div>
+            
+            <div id="video-preview" style="width: 450px; margin: 0 auto;">
+                <div class="media_iframe_video">
+                    <iframe
+                        src="//www.youtube.com/embed/yws1tbgNV7k"
+                        frameborder="0"
+                        allowfullscreen="allowfullscreen"></iframe>
+                </div>
+            </div>
+
+            <input type="hidden" id="video_id" value="yws1tbgNV7k"/>
+            <input type="hidden" id="video_type" value="youtube"/>
+
+            <div class="text-center mt32">
+                <div class="checkbox">
+                    <label><input type="checkbox" id="autoplay"/> Autoplay</label>
+                </div>
+            </div>
+        </form>
+    </t>
+
 </templates>