diff --git a/src/admin/js/media-manager/sidebar-info.js b/src/admin/js/media-manager/sidebar-info.js
index 64d4bfa..645a167 100644
--- a/src/admin/js/media-manager/sidebar-info.js
+++ b/src/admin/js/media-manager/sidebar-info.js
@@ -62,87 +62,159 @@ function getMediaTypeLabel( mimetype ) {
}
}
+function injectCimoMetadata( {
+ model,
+ container,
+} ) {
+ if ( ! model || ! container ) {
+ return
+ }
+
+ // Prevent duplicate inserts
+ if ( container.querySelector( '.cimo-media-manager-metadata' ) ) {
+ return
+ }
+
+ let customMetadata = model.get( 'cimo' ) || null
+
+ if ( ! customMetadata || Object.keys( customMetadata ).length === 0 ) {
+ customMetadata = getCachedMetadata(
+ model.get( 'originalImageName' ) || model.get( 'filename' )
+ )
+ }
+
+ if ( ! customMetadata ) {
+ return
+ }
+
+ const customContent = document.createElement( 'div' )
+ customContent.className = 'cimo-media-manager-metadata'
+
+ const convertedFormatRaw = customMetadata.convertedFormat || model.get( 'mime' ) || ''
+ const mediaTypeLabel = getMediaTypeLabel( convertedFormatRaw )
+
+ let html = `
+
+
+ `
+
+ const optimizationSavings = customMetadata.compressionSavings
+ ? ( 100 - ( customMetadata.compressionSavings * 100 ) ).toFixed( 2 )
+ : null
+
+ const kbSaved = formatFilesize(
+ customMetadata.originalFilesize - customMetadata.convertedFilesize,
+ 1,
+ true
+ )
+
+ const optimizationSavingsClass =
+ optimizationSavings > 0
+ ? 'cimo-optimization-savings-up'
+ : 'cimo-optimization-savings-down'
+
+ html += `
+ -
+ Saved ${ escape( optimizationSavings ) }%
+ (${ escape( kbSaved ) })
+
+ `
+
+ html += `
+ -
+ Original: ${ escape( formatFilesize( parseInt( customMetadata.originalFilesize ) || 0 ) ) }
+
+ -
+ Optimized: ${ escape( formatFilesize( parseInt( customMetadata.convertedFilesize ) || 0 ) ) }
+
+ `
+
+ html += `
+ -
+ 🏞️ Converted to ${ escape( convertMimetypeToFormat( customMetadata.convertedFormat ) ) }
+
+ `
+
+ let conversionTimeDisplay = 'N/A'
+ if ( customMetadata.conversionTime ) {
+ const timeMs = parseFloat( customMetadata.conversionTime )
+ conversionTimeDisplay =
+ timeMs < 1000
+ ? `${ timeMs.toFixed( 0 ) } ms`
+ : timeMs < 60000
+ ? `${ ( timeMs / 1000 ).toFixed( 1 ) } sec`
+ : `${ ( timeMs / 60000 ).toFixed( 1 ) } min`
+ }
+
+ html += `
+ -
+ ⚡️ Done in ${ escape( conversionTimeDisplay ) }
+
+
+ `
+
+ customContent.innerHTML = html
+ container.appendChild( customContent )
+}
+
domReady( () => {
// Only proceed if wp.media is available (media library is loaded)
- if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.view || ! wp.media.view.Attachment || ! wp.media.view.Attachment.Details ) {
+ if (
+ typeof wp === 'undefined' ||
+ ! wp.media ||
+ ! wp.media.view ||
+ ! wp.media.view.Attachment ||
+ ! wp.media.view.Attachment.Details
+ ) {
return
}
- wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend( {
- template: function template( view ) {
- const html = wp.media.template( 'attachment-details' )( view )
- const dom = document.createElement( 'div' )
- dom.innerHTML = html
-
- // Get the metadata from the model or the cache
- let customMetadata = view.model.get( 'cimo' ) || null
-
- // If the attachment was just uploaded, the model data won't be available, fetch it from the cache
- if ( ! customMetadata || Object.keys( customMetadata ).length === 0 ) {
- customMetadata = getCachedMetadata( view.model.get( 'originalImageName' ) || view.model.get( 'filename' ) )
- }
-
- // TODO: Translate this
- const details = dom.querySelector( '.attachment-info' )
- if ( customMetadata && details ) {
- const customContent = document.createElement( 'div' )
- customContent.className = 'cimo-media-manager-metadata'
-
- const convertedFormatRaw = customMetadata.convertedFormat || view.model.get( 'mime' ) || ''
- const mediaTypeLabel = getMediaTypeLabel( convertedFormatRaw )
-
- let html = `
- `
-
- /**
- * Format optimization savings, display an arrow up or down and color it green or red.
- */
- const optimizationSavings = customMetadata.compressionSavings
- ? ( 100 - ( customMetadata.compressionSavings * 100 ) ).toFixed( 2 )
- : null
- const kbSaved = formatFilesize( customMetadata.originalFilesize - customMetadata.convertedFilesize, 1, true )
- const optimizationSavingsClass = optimizationSavings > 0 ? 'cimo-optimization-savings-up' : 'cimo-optimization-savings-down'
-
- html += `- Saved ${ escape( optimizationSavings ) }% (${ escape( kbSaved ) })
`
-
- /**
- * Filesize
- */
- const originalSize = formatFilesize( parseInt( customMetadata.originalFilesize ) || 0 )
- const convertedSize = formatFilesize( parseInt( customMetadata.convertedFilesize ) || 0 )
- html += `- Original: ${ escape( originalSize ) }
`
- html += `- Optimized: ${ escape( convertedSize ) }
`
-
- /**
- * Original format
- */
- html += `- 🏞️ Converted to ${ escape( convertMimetypeToFormat( customMetadata.convertedFormat ) ) }
`
-
- /**
- * Conversion time
- */
- // This is number string.
- let conversionTimeDisplay = 'N/A'
- if ( customMetadata.conversionTime ) {
- const timeMs = parseFloat( customMetadata.conversionTime )
- if ( timeMs < 1000 ) {
- conversionTimeDisplay = `${ timeMs.toFixed( 0 ) } ms`
- } else if ( timeMs < 60000 ) {
- conversionTimeDisplay = `${ ( timeMs / 1000 ).toFixed( 1 ) } sec`
- } else {
- conversionTimeDisplay = `${ ( timeMs / 60000 ).toFixed( 1 ) } min`
- }
- }
- html += `- ⚡️ Done in ${ escape( conversionTimeDisplay ) }
`
-
- customContent.innerHTML = html
- details.appendChild( customContent )
- }
-
- return dom.innerHTML
- },
- } )
+ // Editor media library modal (Attachment.Details)
+ wp.media.view.Attachment.Details =
+ wp.media.view.Attachment.Details.extend( {
+ template( view ) {
+ const html = wp.media.template( 'attachment-details' )( view )
+ const dom = document.createElement( 'div' )
+ dom.innerHTML = html
+
+ const container = dom.querySelector( '.attachment-info' )
+
+ injectCimoMetadata( {
+ model: view.model,
+ container,
+ } )
+
+ return dom.innerHTML
+ },
+ } )
+
+ // Admin Media in Grid View (Attachment.Details.TwoColumn)
+ if ( wp.media.view.Attachment.Details.TwoColumn ) {
+ const TwoColumn = wp.media.view.Attachment.Details.TwoColumn
+
+ wp.media.view.Attachment.Details.TwoColumn =
+ TwoColumn.extend( {
+ render() {
+ TwoColumn.prototype.render.apply( this, arguments )
+
+ const container = this.el.querySelector(
+ '.attachment-info > .details'
+ )
+
+ injectCimoMetadata( {
+ model: this.model,
+ container,
+ } )
+
+ return this
+ },
+ } )
+ }
} )