[IMP] website: adds video suggestions

This commit adds video suggestions to the media dialog

task-2308019

closes odoo/odoo#55293

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -1439,6 +1439,8 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
             noIcons: true,
             noDocuments: true,
             isForBgVideo: true,
+            vimeoPreviewIds: ['299225971', '414790269', '420192073', '368484050', '334729960', '417478345',
+                '312451183', '415226028', '367762632', '340475898', '374265101', '370467553'],
             'res_model': $editable.data('oe-model'),
             'res_id': $editable.data('oe-id'),
         }, el).open();

addons/web_editor/static/src/js/wysiwyg/widgets/media.js

@@ -1142,6 +1142,7 @@ var VideoWidget = MediaWidget.extend({
         'change .o_video_dialog_options input': '_onUpdateVideoOption',
         'input textarea#o_video_text': '_onVideoCodeInput',
         'change textarea#o_video_text': '_onVideoCodeChange',
+        'click .o_sample_video': '_onSampleVideoClick',
     }),
 
     /**
@@ -1151,6 +1152,8 @@ var VideoWidget = MediaWidget.extend({
         this._super.apply(this, arguments);
         this.isForBgVideo = !!options.isForBgVideo;
         this._onVideoCodeInput = _.debounce(this._onVideoCodeInput, 1000);
+        // list of videoIds from vimeo.
+        this._vimeoPreviewIds = options.vimeoPreviewIds;
     },
     /**
      * @override
@@ -1174,6 +1177,23 @@ var VideoWidget = MediaWidget.extend({
             this._updateVideo();
         }
 
+        // loads the thumbnail of vimeo video previews.
+        this.$('.o_sample_video').each((index, node) => {
+            const $node = $(node);
+            const videoId = $node.attr('data-vimeo');
+            if (!videoId) {
+                return;
+            }
+            fetch(`https://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/${videoId}`)
+                .then(response=>response.json())
+                .then((response) => {
+                    $node.append($('<img>', {
+                        src: response.thumbnail_url,
+                        class: 'mw-100 mh-100 p-1',
+                    }));
+                });
+        });
+
         return this._super.apply(this, arguments);
     },
 
@@ -1344,6 +1364,19 @@ var VideoWidget = MediaWidget.extend({
     _onUpdateVideoOption: function () {
         this._updateVideo();
     },
+    /**
+     * changes the video preview when clicking on the thumbnail of a suggested video
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onSampleVideoClick(ev) {
+        const vimeoId = ev.currentTarget.getAttribute('data-vimeo');
+        if (vimeoId) {
+            this.$('#o_video_text').val(`https://player.vimeo.com/video/${vimeoId}`);
+            this._updateVideo();
+        }
+    },
     /**
      * Called when the video code (URL / Iframe) change is confirmed -> Updates
      * the video preview immediately.

addons/web_editor/static/src/scss/wysiwyg.scss

@@ -348,6 +348,10 @@ body .modal {
                         }
                     }
                 }
+
+                #video-suggestion > .o_sample_video {
+                    cursor: pointer;
+                }
             }
         }
     }

addons/web_editor/static/src/xml/wysiwyg.xml

@@ -410,11 +410,11 @@
                     <label class="col-form-label" for="o_video_text">
                         Video code <small>(URL or Embed)</small>
                     </label>
+                    <div class="text-left">
+                        <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
+                    </div>
                     <textarea class="form-control" id="o_video_text" placeholder="Copy-paste your URL or embed code here"/>
                 </div>
-                <div class="text-right">
-                    <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
-                </div>
                 <div class="o_video_dialog_options d-none mt-4">
                     <div class="o_youtube_option o_vimeo_option o_dailymotion_option">
                       <label class="o_switch mb0">
@@ -442,6 +442,14 @@
                         <label class="o_switch mb0"><input id="o_video_hide_dm_share" type="checkbox"/><span/>Hide sharing button</label>
                     </div>
                 </div>
+                <t t-if="widget._vimeoPreviewIds || widget._youtubePreviewIds">
+                    <span class="font-weight-bold">Suggestions</span>
+                    <div id="video-suggestion" class="mt-4 d-flex flex-wrap mh-75 overflow-auto">
+                        <t t-foreach="widget._vimeoPreviewIds" t-as="vimeoId">
+                            <div class="o_sample_video w-25 mh-100" t-att-data-vimeo="vimeoId"/>
+                        </t>
+                    </div>
+                </t>
             </div>
             <div class="col-md-6">
                 <div id="video-preview" class="p-3">