Fix Reset State

Author: aatanasovdev

js/asset-edit.js

@@ -112,6 +112,7 @@ class Api {
 			'e'   => 'effect',
 			'l'   => 'overlay',
 			'so'  => 'start_offset',
+			'co'  => 'color',
 			'eo'  => 'end_offset',
 			'du'  => 'duration',
 			'a'   => 'angle',

php/connect/class-api.php

@@ -658,7 +658,7 @@ public function transformations_column_value( $column_name, $attachment_id ) {
 
 			$item = $this->media->plugin->get_component( 'assets' )->get_asset( $attachment_id, 'dataset' );
 			if ( ! empty( $item['data']['public_id'] ) ) {
-				$text            = __( 'Add effects', 'cloudinary' );
+				$text            = __( 'Add Effects', 'cloudinary' );
 				$transformations = Relate::get_transformations( $attachment_id, true );
 				$text_overlay    = Relate::get_overlay( $attachment_id, 'text_overlay' );
 				$image_overlay   = Relate::get_overlay( $attachment_id, 'image_overlay' );
@@ -670,7 +670,7 @@ public function transformations_column_value( $column_name, $attachment_id ) {
 				$link            = add_query_arg( $args, 'admin.php' );
 
 				if ( ! empty( $transformations ) || ! empty( $text_overlay ) || ! empty( $image_overlay ) ) {
-					$text = __( 'Edit effects', 'cloudinary' );
+					$text = __( 'Edit Effects', 'cloudinary' );
 				}
 				?>
 				<a href="<?php echo esc_url( $link ); ?>" class="cld_transformations__icons">

php/media/class-global-transformations.php

@@ -63,12 +63,7 @@ const AssetEdit = {
 		}
 
 		this.isVideo = item?.type === 'video';
-
-		if( this.isVideo ) {
-			this.publicId = item?.data?.public_id;
-		} else {
-			this.publicId = '/' + item.file.split('/').slice(-2).join('/');
-		}
+		this.publicId = '/' + item.file.split('/').slice(-2).join('/');
 
 		// Set up centralized text overlay mapping as a property
 		this.textOverlayMap = [
@@ -99,18 +94,18 @@ const AssetEdit = {
         this.setOverlayInputs(this.textOverlayMap, textOverlayData);
         this.setOverlayInputs(this.imageOverlayMap, imageOverlayData);
 		// Init components.
-		this.initPreview();
+		this.initPreview(item);
 		this.initEditor();
 		this.initGravityGrid( 'edit-overlay-grid-text', textOverlayData );
 		this.initGravityGrid( 'edit-overlay-grid-image', imageOverlayData );
 		this.initImageSelect();
 		this.initRemoveOverlayButtons();
 	},
-	initPreview() {
+	initPreview(item) {
 		if ( this.isVideo ) {
 			this.preview = VideoAssetPreview.init();
 			this.wrap.appendChild( this.preview.createPreview( 480, 360 ) );
-			this.preview.setPublicId( this.publicId );
+			this.preview.setPublicId( item?.data?.public_id );
 			this.preview.setSrc( this.buildSrc(), true );
 		} else {
 			this.preview = AssetPreview.init();
@@ -414,11 +409,12 @@ const AssetEdit = {
 		return placementQualifiers.length > 0 ? ',' + placementQualifiers.join(',') : '';
 	},
 	buildImageOverlay() {
-		if (!this.imageOverlayPublicIdInput || !this.imageOverlayPublicIdInput.value.trim()) {
+		const imageId = this.imageOverlayPublicIdInput.value.trim().replace(/\//g, ':');
+
+		if ( !imageId ) {
 			return '';
 		}
 
-		const imageId = this.imageOverlayPublicIdInput.value.trim().replace(/\//g, ':');
 		let imageLayerDefinition = `l_${imageId}`;
 
 		let transformations = [];

src/js/asset-edit.js

@@ -77,18 +77,19 @@ const VideoAssetPreview = {
 				fluid: true,
 				controls: true,
 			} );
-
-			// Set initial source immediately
-			if ( this.publicId ) {
-				this.player.source( this.publicId );
-			}
 		}
 	},
 
 	setSrc( src, load = false ) {
 		this.preview.style.opacity = 0.6;
 		if ( load ) {
 			this.apply.style.display = 'none';
+
+			// Ensure player is initialized before updating
+			if ( ! this.player ) {
+				this.initPlayer();
+			}
+
 			this.updatePlayer( src );
 		} else {
 			this.apply.style.display = 'block';
@@ -112,6 +113,7 @@ const VideoAssetPreview = {
 		this.player.source( sourceConfig );
 		this.preview.style.opacity = 1;
 	},
+
 	reset( src ) {
 		this.setSrc( src, false );
 	},