[IMP] web_unsplash: Implement Beacon Alternative and credit Unsplash

Unsplash API requirements does not directly allow to store their images on
our server (We should use hotlinking unless the image is edited (cropped etc)).
Still, they have the `Image Beacon Alternative` to allow to store their images
on our server if we really need it with our use case.

With the Beacon Alternative, we should ping Unsplash server to notify an image
view.
To do so, we need to be able to recognize Unsplash imagesin the DOM, this is
why we are now using /unsplash/ in the URL.
The Unsplash image name should be the image ID as it will be the identifier
needed to ping their server.

This commit also adds credit to Unsplash in the media dialog next to the
unsplash input search.
It also add the `w-100` on the media dialog card as we lost that UI behavior
from BS3 to BS4.

opw-35060

closes odoo/odoo#27377

1 files changed, 25 insertions, 15 deletions

diff --git a/addons/web_unsplash/static/src/js/unsplash_image_widget.js b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
index 7ba5f4961da..d353694ddea 100644
--- a/addons/web_unsplash/static/src/js/unsplash_image_widget.js
+++ b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
@@ -17,7 +17,7 @@ ImageWidget.include({
         'input input.unsplash_search': '_onChangeUnsplashSearch',
         'dblclick .unsplash_img_container [data-imgid]': '_onUnsplashImgDblClick',
         'click .unsplash_img_container [data-imgid]': '_onUnsplashImgClick',
-        'click button.access_key': '_onSetAccessKey',
+        'click button.save_unsplash': '_onSaveUnsplash',
     }),
     /**
      * @override
@@ -84,7 +84,7 @@ ImageWidget.include({
             route: '/web_unsplash/attachment/add',
             params: {
                 unsplashurls: self._unsplash.selectedImages,
-                res_model : self.options.res_model || "ir.ui.view",
+                res_model : self.options.res_model,
                 res_id: self.options.res_id,
             }
         }).then(function (images) {
@@ -93,7 +93,7 @@ ImageWidget.include({
             }
 
             _.each(images, function (image) {
-                image.src = _.str.sprintf('/web/image/%s', image.id);
+                image.src = image.url;
                 image.isDocument = !(/gif|jpe|jpg|png/.test(image.mimetype));
             });
             self.images = images;
@@ -130,7 +130,7 @@ ImageWidget.include({
         if (!this._unsplash.query) {
             return this._super.apply(this, arguments);
         }
-        this.unsplashAPI.getImages(self._unsplash.query, this.IMAGES_PER_PAGE, this.page).then(function (res) {
+        this.unsplashAPI.getImages(this._unsplash.query, this.IMAGES_PER_PAGE, this.page).then(function (res) {
             self._unsplash.isMaxed = res.isMaxed;
             var rows = _(res.images).chain()
                 .groupBy(function (a, index) { return Math.floor(index / self.IMAGES_PER_ROW); })
@@ -161,19 +161,29 @@ ImageWidget.include({
     /**
      * @private
      */
-    _onSetAccessKey: function () {
+    _onSaveUnsplash: function () {
         var self = this;
         var key = this.$('#accessKeyInput').val().trim();
-        if (key) {
-            this._rpc({
-                route: '/web_unsplash/set_client_id',
-                params: {
-                    'key': key,
-                },
-            }).then(function () {
-                self.unsplashAPI.clientId = key;
-                self._renderImages();
-            });
+        var appId = this.$('#appIdInput').val().trim();
+
+        this.$('#accessKeyInput').toggleClass('is-invalid', !key);
+        this.$('#appIdInput').toggleClass('is-invalid', !appId);
+
+        if (key && appId) {
+            var params = {
+                'key': key,
+                'appId': appId,
+            };
+
+            if (!this.$el.find('.is-invalid').length) {
+                this._rpc({
+                    route: '/web_unsplash/save_unsplash',
+                    params: params,
+                }).then(function () {
+                    self.unsplashAPI.clientId = key;
+                    self._renderImages();
+                });
+            }
         }
     },
     /**