PB-265: Video background for Banner

- fix video reloading for any changes in content type

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js

@@ -8,12 +8,12 @@ import "jarallaxVideo";
 import $ from "jquery";
 import $t from "mage/translate";
 import events from "Magento_PageBuilder/js/events";
+import mageUtils from "mageUtils";
 import _ from "underscore";
 import "vimeoWrapper";
-import ContentTypeConfigInterface from "../../content-type-config.types";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.types";
-import ContentTypeInterface from "../../content-type.types";
+import {DataObject} from "../../data-store";
 import Uploader from "../../uploader";
 import delayUntil from "../../utils/delay-until";
 import {
@@ -27,8 +27,7 @@ import {
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
-import {ContentTypeMountEventParamsInterface, ContentTypeReadyEventParamsInterface} from "../content-type-events.types";
-import ObservableUpdater from "../observable-updater";
+import {ContentTypeReadyEventParamsInterface} from "../content-type-events.types";
 import BasePreview from "../preview";
 
 /**
@@ -67,6 +66,18 @@ export default class Preview extends BasePreview {
      */
     private handledDoubleClick: boolean = false;
 
+    /**
+     * Properties that cause rebuilding video background
+     */
+    private videoUpdateProperties = [
+        "background_type",
+        "video_fallback_image",
+        "video_lazy_load",
+        "video_loop",
+        "video_play_only_visible",
+        "video_source",
+    ];
+
     /**
      * Debounce and defer the init of Jarallax
      *
@@ -110,26 +121,6 @@ export default class Preview extends BasePreview {
 
     }, 50);
 
-    /**
-     * @param {ContentTypeInterface} contentType
-     * @param {ContentTypeConfigInterface} config
-     * @param {ObservableUpdater} observableUpdater
-     */
-    constructor(
-        contentType: ContentTypeInterface,
-        config: ContentTypeConfigInterface,
-        observableUpdater: ObservableUpdater,
-    ) {
-        super(contentType, config, observableUpdater);
-
-        this.contentType.dataStore.subscribe(this.buildJarallax);
-        events.on("banner:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
-            if (args.id === this.contentType.id) {
-                this.buildJarallax();
-            }
-        });
-    }
-
     /**
      * Return an array of options
      *
@@ -459,7 +450,11 @@ export default class Preview extends BasePreview {
      */
     protected bindEvents() {
         super.bindEvents();
-
+        events.on("banner:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
+            if (args.id === this.contentType.id) {
+                this.buildJarallax();
+            }
+        });
         events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, () => {
             const dataStore = this.contentType.dataStore.getState();
             const imageObject = (dataStore[this.config.additional_data.uploaderConfig.dataScope] as object[])[0] || {};
@@ -470,6 +465,14 @@ export default class Preview extends BasePreview {
             events.trigger(`image:${this.contentType.id}:assignAfter`, imageObject);
             nestingLinkDialog(this.contentType.dataStore, this.wysiwyg, "message", "link_url");
         });
+        this.contentType.dataStore.subscribe(function(data: DataObject) {
+            if (this.isVideoShouldBeUpdated(data)) {
+                this.buildJarallax();
+            }
+        }.bind(this));
+        events.on(`image:${this.contentType.id}:uploadAfter`, () => {
+            this.contentType.dataStore.set("background_type", "image");
+        });
     }
 
     /**
@@ -487,4 +490,25 @@ export default class Preview extends BasePreview {
 
         $(this.textarea).height(scrollHeight);
     }
+
+    /**
+     * Adjust textarea's height based on scrollHeight
+     *
+     * @return boolean
+     */
+    private isVideoShouldBeUpdated(state: DataObject): boolean {
+        const previousState = this.contentType.dataStore.previousState;
+        const diff = mageUtils.compare(previousState, state).changes;
+
+        if (diff.length > 0) {
+            return _.some(diff, (element) => {
+                if (element.name === "video_fallback_image") {
+                    return (!_.isEmpty(previousState.video_fallback_image) && previousState.video_fallback_image) !==
+                        (!_.isEmpty(state.video_fallback_image) && state.video_fallback_image);
+                }
+
+                return this.videoUpdateProperties.indexOf(element.name) !== -1;
+            });
+        }
+    }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/data-store.js

@@ -15,9 +15,9 @@ export interface DataObject<T = any> {
 }
 
 export default class DataStore {
+    public previousState: DataObject = {};
     private state: DataObject = {};
     private events: JQuery = $({});
-    private previousState: DataObject = {};
 
     /**
      * Retrieve specific data from the data store
@@ -46,6 +46,7 @@ export default class DataStore {
      * @param value
      */
     public set(key: string, value: any) {
+        this.previousState = Object.assign({}, this.state);
         set(this.state, key, value);
         this.emitState();
     }
@@ -56,6 +57,7 @@ export default class DataStore {
      * @param {DataObject} state
      */
     public setState(state: DataObject) {
+        this.previousState = Object.assign({}, this.state);
         this.state = state;
         this.emitState();
     }

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts

@@ -3,6 +3,19 @@
  * See COPYING.txt for license details.
  */
 
+interface CompareObject {
+    containers: object;
+    changes: CompareObjectItem[];
+    equal: boolean;
+}
+
+interface CompareObjectItem {
+    path: string;
+    name: string;
+    value: any;
+    oldValue: any;
+}
+
 declare let mageUtils: {
     /**
      * Generates a unique identifier.
@@ -18,6 +31,14 @@ declare let mageUtils: {
      * @returns {Object|Array} Extended object.
      */
     extend(...args: any[]): object;
+
+    /**
+     * Compare two objects
+     * @param args
+     *
+     * @return {CompareObject}.
+     */
+    compare(...args: any[]): CompareObject;
 };
 declare module "mageUtils" {
     export = mageUtils;