[FIX] website: review iframe video building

/!\ This commit *must* be "forced" forward-ported /!\

Recent commit(s) broke existing databases making website videos
disappear / not be saved / ...

Original code was broken then fixed by a succession of commits which
solved some errors to create new ones. Hopefully, this one is the right
stable one. Existing databases should be restored while allowing new
videos to be added correctly no matter the version. In master, a solution
must be found to smoothly migrate old videos to a new better system.

See:
https://github.com/odoo/odoo/commit/8749410b1033ddec1207ce1db42d1889a0d2ea33
https://github.com/odoo/odoo/commit/45e0cd564afdae71e9525193250744e88076da71
https://github.com/odoo/odoo/commit/6d2bf44fee76a8b73ebad206cd7a283c88b6c4ef (opw-783233)

opw-786165

1 files changed, 27 insertions, 6 deletions

diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index c3382d565bd..ad3ad611199 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -133,14 +133,35 @@ animation.registry.media_video = animation.Class.extend({
     start: function () {
         // TODO: this code should be refactored to make more sense and be better
         // integrated with Odoo (this refactoring should be done in master).
-        this.$target.find('iframe').remove();
 
-        if (!this.$target.has('.media_iframe_video_size').length) {
-            var editor = '<div class="css_editable_mode_display">&nbsp;</div>';
-            var size = '<div class="media_iframe_video_size">&nbsp;</div>';
-            this.$target.html(editor+size);
+        var def = this._super.apply(this, arguments);
+        if (this.$target.children('iframe').length) {
+            // There already is an <iframe/>, do nothing
+            return def;
         }
-        this.$target.html(this.$target.html()+'<iframe src="'+_.escape(this.$target.data("src"))+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
+
+        // Bug fix / compatibility: empty the <div/> element as all information
+        // to rebuild the iframe should have been saved on the <div/> element
+        this.$target.empty();
+
+        // Add extra content for size / edition
+        this.$target.append(
+            '<div class="css_editable_mode_display">&nbsp;</div>' +
+            '<div class="media_iframe_video_size">&nbsp;</div>'
+        );
+
+        // Rebuild the iframe. Depending on version / compatibility / instance,
+        // the src is saved in the 'data-src' attribute or the
+        // 'data-oe-expression' one (the latter is used as a workaround in 10.0
+        // system but should obviously be reviewed in master).
+        this.$target.append($('<iframe/>', {
+            src: _.escape(this.$target.data('oe-expression') || this.$target.data('src')),
+            frameborder: '0',
+            allowfullscreen: 'allowfullscreen',
+            sandbox: 'allow-scripts allow-same-origin', // https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+        }));
+
+        return def;
     },
 });