Replace alert with red notice in preview

css/src/components/_settings.scss

@@ -215,13 +215,28 @@
 	}
 }
 
-.settings-warning {
+.settings-alert {
 	display          : inline-block;
 	padding          : 5px 7px;
+	box-shadow       : 0 1px 1px rgba(0, 0, 0, .04);
+}
+
+.settings-alert-info {
 	background-color : #e9faff;
 	border           : 1px solid #ccd0d4;
 	border-left      : 4px solid #00a0d2;
-	box-shadow       : 0 1px 1px rgba(0, 0, 0, .04);
+}
+
+.settings-alert-warning {
+	background-color : #fff5e9;
+	border           : 1px solid #f6e7b6;
+	border-left      : 4px solid #e3be38;
+}
+
+.settings-alert-error {
+	background-color : #ffe9e9;
+	border           : 1px solid #d4cccc;
+	border-left      : 4px solid #d20000;
 }
 
 .field-radio {
@@ -252,8 +267,8 @@
 		cursor: pointer;
 		display: flex;
 		justify-content: space-between;
-		
-		h2 { 
+
+		h2 {
 			margin: 0 !important;
 		}
 
@@ -302,4 +317,4 @@
 	textarea {
 		resize: none;
 	}
-}
+}

js/src/components/global-transformations.js

@@ -1,4 +1,5 @@
 /* global window wp */
+
 const Global_Transformations = {
 	sample: {
 		image: document.getElementById( 'transformation-sample-image' ),
@@ -17,6 +18,7 @@ const Global_Transformations = {
 		image : document.getElementById( 'image-loader' ),
 		video : document.getElementById( 'video-loader' ),
 	},
+	error_container: document.getElementById('cld-preview-error'),
 	activeItem: null,
 	elements: {
 		image: [],
@@ -72,26 +74,43 @@ const Global_Transformations = {
 	},
 	_clearLoading: function( type ) {
 		this.spinner[ type ].style.visibility = 'hidden';
-		this.activeItem               = null;
-		this.preview[ type ].style.opacity      = 1;
+		this.activeItem                       = null;
+		this.preview[ type ].style.opacity    = 1;
 	},
 	_refresh: function( e, type ) {
 		if( e ) {
 			e.preventDefault();
 		}
-		let self                  = this;
-		let new_src               = CLD_GLOBAL_TRANSFORMATIONS[ type ].preview_url + self.elements[ type ].join( ',' ) + CLD_GLOBAL_TRANSFORMATIONS[ type ].file;
+		let self    = this;
+		let new_src = CLD_GLOBAL_TRANSFORMATIONS[ type ].preview_url + self.elements[ type ].join( ',' ) + CLD_GLOBAL_TRANSFORMATIONS[ type ].file;
 		this.button[ type ].style.display = 'none';
 		this._placeItem( this.spinner[ type ] );
 		if ( type === 'image' ) {
 			let newImg = new Image;
 			newImg.onload = function() {
 				self.preview[ type ].src = this.src;
 				self._clearLoading( type );
+				if ( self.error_container ) {
+					self.error_container.style.display = 'none';
+				}
 				newImg.remove();
 			};
 			newImg.onerror = function() {
-				alert( CLD_GLOBAL_TRANSFORMATIONS[type].error );
+				const has_fmp4 = self.elements[ type ].includes( 'f_mp4' );
+
+				if ( self.error_container ) {
+					self.error_container.style.display = 'block';
+
+					if (!has_fmp4) {
+						self.error_container.innerHTML = CLD_GLOBAL_TRANSFORMATIONS[type].error;
+						self.error_container.classList.replace('settings-alert-warning', 'settings-alert-error');
+					} else {
+						// temporary, will be replaced with i18n.sprintf instead of .replace
+						self.error_container.innerHTML = CLD_GLOBAL_TRANSFORMATIONS[type].warning.replace('%s', 'f_mp4');
+						self.error_container.classList.replace('settings-alert-error', 'settings-alert-warning');
+					}
+				}
+
 				self._clearLoading( type );
 			};
 			newImg.src = new_src;