Changeset 2741703

Timestamp:

06/13/2022 02:12:07 PM (4 years ago)

Author:

thronspa

Message:

THRON Player enhance parameters, THRON Player and Gutenberg crop feature, various fix

Location:

thron/trunk

Files:

• README.txt (modified) (4 diffs)
• admin/class-thron-admin.php (modified) (23 diffs)
• admin/class-thron-setting.php (modified) (2 diffs)
• admin/css/thron-admin.css (modified) (4 diffs)
• admin/css/thron-block.css (modified) (4 diffs)
• admin/js/collection-filter.js (modified) (2 diffs)
• admin/js/thron-admin.js (modified) (2 diffs)
• admin/js/thron-block.js (modified) (38 diffs)
• admin/js/wp.media.library.js (modified) (11 diffs)
• admin/js/wp.media.thron-view.js (modified) (12 diffs)
• includes/class-thron-api.php (modified) (6 diffs)
• includes/class-thron.php (modified) (9 diffs)
• includes/cmb2-field-ajax-search/cmb2-field-ajax-search.php (modified) (1 diff)
• languages/thron-it_IT-thron-block.json (modified) (5 diffs)
• languages/thron-it_IT.mo (modified) (previous)
• languages/thron-it_IT.po (modified) (3 diffs)
• languages/thron.pot (modified) (2 diffs)
• public/class-thron-public.php (modified) (2 diffs)
• public/partials/player.php (modified) (2 diffs)
• thron.php (modified) (2 diffs)

thron/trunk/README.txt

@@ -2 +2 @@
 Contributors: thronspa, websolutedev
 Tags: DAM
-Stable tag: 1.0.1
-Requires at least: 5.2
-Tested up to: 5.4
+Stable tag: 1.2.1
+Requires at least: 5.9
+Tested up to: 5.9.2
 Requires PHP: 7.0
 License: GPLv2 or later
@@ -11 +11 @@
 THRON is a cloud solution used by leading companies to maximize efficiency and reduce costs related to digital content management.
 
-
 == Description ==
 
-This plugin allows publishers to select directly from the Wordpress media library all media content such as images, videos, documents, audio and galleries that have been previously uploaded into the DAM. Media files can be included both using standard Gutenberg's blocks and using the THRON Universal Player.
+THRON Connector for WordPress allows you to publish and update the contents of your
+website quickly, intuitively and automatically. Editors have access to a library
+of up-to-date and approved content, directly within the CMS, without the need to
+create copies.
+
+Content can be embedded using THRON Universal Player or the Gutenberg editor.
+
+The connector supports THRON DELIVERY and all its features: from Universal Player
+to our Real-Time Image Editor, you can publish your content in a centralized and
+direct way, without duplications and always at maximum performance.
 
 = Features =
 
-* full integrated with THRON DAM
-* allows you to embed images, video, audio and any other type of content
-* fully responsive for any device
-* 100% compliant with gutenberg editor
+- Supports images, videos, audio files and any other type of content
+- Automatic update: every time you edit a content in THRON, your site is automatically updated, with no need of manual updating activities
+- Optimize images for the web: with the Real-Time Image Editor, you can optimize images during publication without creating new copies.
+    - Manage the automatic cropping of images directly from the connector, choosing between different cropping modes: Automatic, Centered, Product and Manual
+    - Independently adjust image parameters such as quality, brightness, contrast, sharpness and color saturation, directly from the plug-in and with no need of post-production.
+- Maximum performance: guarantee the best performance for your users wherever they are thanks to our Universal Player and its features. The player dynamically adapts the quality of the content according to the user's conditions, supports lazy loading and automatically optimizes the reproduced content for SEO purposes.
+- 100% compliant with the Gutenberg editor.
+
+= Benefits = 
+
+- Eliminate content duplication
+- Eliminate integration costs
+- Improve page loading performance and peak load management with THRON's infrastructure
+- Automatically gather insights into the usage of your published content with our Content Analytics tools.
 
 = Requirements =
 
-* All you need to get started is to register for a free [THRON account](https://www.thron.com/en/trial) to use the plugin and start uploading your media to the cloud.
+THRON Connector for WordPress is free of charge. If you already use THRON DAM Platform,
+please contact your Success Manager or email us at [email protected] to learn
+how to install the connector.
 
-= Highlights =
-
-* Automatic responsive images for delivery on various devices in different resolutions.
-* Enpower the performance of your website, 
-* Full support for all types of content: images, videos, audio, gallery and 360 product views
-* Integrated CDN to improve the performance in the delivery of the contents of your site uploaded in THRON
-* THRON Player integration with the gutenberg editor: maximize the usability and the exzperience for multimedia contents
-
-= Simple Integration =
-
-* Upload your assets in a THRON folder
-* Embed an image and video from THRON using the simple Gutenberg Thron embed block
+Would you like to request a demo of THRON DAM Platform? [Click here](https://www.thron.com/en/book-a-demo).
 
 = About THRON =
 
-* [Our website](http://thron.com)
-* [DAM solution](https://www.thron.com/en/digital-asset-management)
-* [Elastic Media delivery](https://www.thron.com/en/elastic-media-delivery)
-* [Help page](https://help.thron.com/hc/en-us)
+- [Our Site](https://www.thron.com/en)
+- [THRON DAM Platform](https://www.thron.com/en/dam-platform)
+- [THRON Connectors](https://www.thron.com/en/connettori-thron)
+- [THRON Blog](https://blog.thron.com/en)
+- [Help Portal](https://help.thron.com/hc/en-us)
 
 = Contributors & Developers =
+
 [THRON spa](https://profiles.wordpress.org/thronspa/)
 [Websolute spa](https://profiles.wordpress.org/websolutedev/)
@@ -68 +79 @@
 = Setting up =
 * Once the plugin is activated, go to the `THRON` settings.
-* You’ll be prompted to your THRON clientId, AppId and AppKey that you can find on the Wordpress Connector page in THRON.
+* You'll be prompted to your THRON clientId, AppId and AppKey that you can find on the Wordpress Connector page in THRON.
 * After saving, the plugin is active and connected to the THRON platform.
 
@@ -80 +91 @@
 == Changelog ==
 
+= 1.2.1 =
+- THRON Player
+ - Enhance parameters
+ - Crop feature (Manual & THRON-powered)
+ - Various improvements
+- Manual crop on native Gutenberg Image block
+- Buttons for “Edit on Thron” and “Update on Thron”
+- Translations improvements
+- Various fix
+
+= 1.0.1 =
+- Bugfixes
+
 = 1.0.0 =
-* Initial version
+- Initial version

thron/trunk/admin/class-thron-admin.php

@@ -57 +57 @@
         $this->wp_language = strtoupper( substr( get_locale(), 0, 2 ) );
 
+        $this->thron_options = get_option( 'thron_option_api_page' );
+
+        $this->thron_list_folder = get_option( 'thron_list_folder' );
+
         /**
          * The parameters to connect to the Thron API are loaded
@@ -191 +195 @@
         } while ( $i < $getTemplate->totalResults );
 
+        $this->templateList[] = array(
+            'createdBy' => 'thronPlugin',
+            'createdDate'=> date(DATE_ISO8601),
+            'name' => 'THRON Customer Experience 1.x',
+            'values' => [],
+            'id' => ''
+        );
 
     }
@@ -221 +232 @@
          */
         $thron_options = get_option( 'thron_option_api_page' );
-        $tlf = get_option('thron_list_folder');
+
         if ( ! is_array( $thron_options ) ) {
             return;
@@ -237 +248 @@
             'media-views'
         ), null, false );
+
+
+
+        wp_enqueue_script(
+            'thron-image-override',
+            plugin_dir_url( __FILE__ ) . 'js/image-override.js',
+            array(),
+            true
+        );
+
 
 
@@ -254 +275 @@
                 'thron_appKey'         => $appKey,
                 'thron_pkey'           => get_option( 'thron_pkey' ),
-                'thron_list_folder'            => $tlf,
                 'thron_rootCategoryId' => get_option( 'thron_rootCategoryId' )
             ) );
@@ -273 +293 @@
         wp_localize_script( 'media-library-taxonomy-filter', 'ThronTagsList', array(
             'tags'    => $tagsFilter,
-            'thron_list_folder'            => $tlf,
             'folders' => $this->folderList,
             'lang'    => array(
                 'all'        => __( 'All', 'thron' ),
-                'allFolders' => $tlf == '' ? __( 'All folders', 'thron' ) : $this->folderNameByID($tlf)
+                'allFolders' => __( 'All folders', 'thron' )
             )
         ) );
@@ -293 +312 @@
             array(
                 'ajaxurl'                      => admin_url( 'admin-ajax.php' ),
-                'thron_list_folder'            => $tlf,
                 'thron_clientId'               => $thron_options['thron_clientId'],
                 'thron_appId'                  => $thron_options['thron_appId'],
@@ -304 +322 @@
                 'tags'                         => $tagsFilter,
                 'folders'                      => $this->folderList,
-                'allfolders'                   => $tlf == '' ? __( 'All folders', 'thron' ) : $this->folderNameByID($tlf),
+                'allfolders'                   => __( 'All folders', 'thron' ),
                 'allcontent'                   => __( 'All content', 'thron' ),
                 'contentdetails'               => __( 'Content details', 'thron' ),
@@ -313 +331 @@
                 'widthpx'                      => __( 'Width (px)', 'thron' ),
                 'heightpx'                     => __( 'Height (px)', 'thron' ),
+                'videos'                        => __( 'Videos', 'thron' ),
+                'audio'                         => __( 'Audio', 'thron' ),
+                'images'                        => __( 'Images', 'thron' ),
+                'documents'                     => __( 'Document (Other)', 'thron' ),
+                'playlist'                      => __( 'Playlist', 'thron' ),
+                'url'                           => __( 'URL', 'thron' ),
+                'pagelet'                       => __( 'Pagelet', 'thron' ),
             ) );
         wp_enqueue_script( 'wp-media-thron' );
     }
-
-    private function folderNameByID( $folderID ) {
-        /**
-         * Carico i TAG da Thron
-         */
-
-        $thron_options = get_option( 'thron_option_api_page' );
-
-        if (!is_array($thron_options ))
-            return;
-
-        $clientId = $thron_options['thron_clientId'];
-        $appId    = $thron_options['thron_appId'];
-        $appKey   = $thron_options['thron_appKey'];
-
-        $thron_api = new ThronAPI( $appId, $clientId, $appKey );
-
-        $results = $thron_api->folderNameByID( $folderID );
-
-        /**
-         * Se la trova seleziona la lingua di default dell'utente
-         */
-        $language = $results->locales[0];
-        foreach ($results->locales as $locale ) {
-            if ('EN' == $locale->locale)
-                $language = $locale;
-        }
-        foreach ($results->locales as $locale ) {
-            if ($this->wp_language == $locale->locale)
-                $language = $locale;
-        }
-
-        return $language->name;
-    }
-
 
     private function createTree( &$list, $parent, $sep = '' ) {
@@ -421 +411 @@
         }
 
-        /*
-        * alambertini 202024061511  ::: array index wrap ::: Undefined index: post__in
-        */
-        if (array_key_exists('post__in',$_REQUEST['query']))
-        {
-            /**
-             * Esco se il post__in fa riferimento ad un post in particolare
-             */         
-            if ( count( $_REQUEST['query']['post__in'] ) > 0 ) {
-                return;
-            }
+        /**
+         * Esco se il post__in fa riferimento ad un post in particolare
+         */
+        if ( count( (array)$_REQUEST['query']['post__in'] ) > 0 ) {
+            return;
         }
 
@@ -519 +503 @@
          */
         $term       = sanitize_text_field( $query['s'] );
-        $categories = sanitize_text_field( (isset($query['thron_categories']) ? $query['thron_categories'] : get_option('thron_list_folder')) );
-        
-        /*
-        * alambertini 202026060917 ::: sanitize only on string
-        */
-        $mime_type  = (is_array($query['post_mime_type']) ? $query['post_mime_type'] : sanitize_text_field($query['post_mime_type']));
-
+        $categories = sanitize_text_field( $query['thron_categories'] );
+        $mime_type  = sanitize_text_field( $query['post_mime_type'] );
         $tags       = null;
         $per_page   = sanitize_text_field( $query['posts_per_page'] );
@@ -547 +526 @@
         wp_send_json_success( $posts );
         die;
+    }
+
+    function infinite_scroll_true( $infinite ){
+        
+        $infinite = true;
+        //print_r($infinite);
+        return $infinite;
     }
 
@@ -600 +586 @@
             'helps' => __( '' )
         );
+
+        $screen = get_current_screen();
+
+        if ( $screen->parent_base == 'upload' ) {
+            $t_id = get_post_meta(get_the_ID(),'thron_id', true);
+            if($t_id) {
+                ?>
+                <script>
+                    jQuery(function(){
+
+                    var th_img = jQuery('.misc-pub-filename > strong').html().split('?')
+                    
+                    var th_info = th_img[0].split('.')
+                    jQuery('.misc-pub-filename > strong').html(th_img[0])
+                    jQuery('.misc-pub-filetype > strong').html(th_info[1].toUpperCase())
+
+
+                    jQuery('#imgedit-open-btn-<?=$post->ID?>').remove()
+                    jQuery('p span.spinner').remove()
+                    jQuery('#media-head-<?=$post->ID?>').append('<p><a type="button" href="https://<?=$this->thron_options['thron_clientId']?>.thron.com/#/contents/content/<?=$t_id?>" target="_blank" class="button button-hero thron-upload-button"><?=__( 'Edit image on THRON', 'thron' )?></a></p><p> <span class="spinner"></span></p>')
+                })
+                </script>
+                <?php
+
+            }
+        }
 
         return $form_fields;
@@ -649 +661 @@
 
         $list_files = $thron_api->search( $term, $categories, $tag, $mime_type, $per_page, $pageToken );
-
+        //print_r($list_files);
         $_SESSION['pageToken'] = $list_files->nextPageToken;
 
@@ -703 +715 @@
                         $width_default = ( array_key_exists( 'thron_maxImageWidth', $thron_options ) ) ? $thron_options['thron_maxImageWidth'] : '0';
 
-                        $file_url = 'https://' . $clientId . '-cdn.thron.com/delivery/public/image/' . $clientId . '/' . $file->id . '/' . $pkey . '/std/' . strval( $width_default ) . 'x0/' . $file->details->source->fileName;
+                        $file_url = 'https://' . $clientId . '-cdn.thron.com/delivery/public/image/' . $clientId . '/' . $file->id . '/' . $pkey . '/std/' . strval( $width_default ) . 'x0/' .  $file->details->source->fileName;
 
                         $attachment_metadata          = array();
@@ -731 +743 @@
                                 $height = null;
                             }
-
+                            //print_r( $file->detail->locales[0]);
+
+                            //print_r( $file->detail->locales[0]->name);
                             $url = 'https://' . $clientId . '-cdn.thron.com/delivery/public/image/' . $clientId . '/' . $file->id . '/' . $pkey . '/std/' . $width . 'x' . $height . '/' . $file->details->source->fileName;
+                            //$url = 'https://' . $clientId . '-cdn.thron.com/delivery/public/image/' . $clientId . '/' . $file->id . '/' . $pkey . '/std/' . $width . 'x' . $height . '/' . $file->details->locales[0]->name;
+
+                            //$url = 'https://' . $clientId . '-cdn.thron.com/api/xcontents/resources/delivery/getThumbnail/' . $clientId . '/' . $width . 'x' . $height . '/' . $file->id;
 
                             $attachment_metadata[ $image_size ] = array(
@@ -874 +891 @@
             'post_type'   => 'attachment',
             'post_status' => 'inherit',
+            'post_parent' => 0,
             'meta_query'  => array(
                 array(
@@ -879 +897 @@
                     'value'   => $thron_id,
                     'compare' => '=',
-                )
+                )               
             )
         );
+
         $query = new WP_Query( $args );
-
         $posts = $query->posts;
+
 
         if ( count( $query->posts ) > 0 ) {
@@ -1165 +1184 @@
         wp_enqueue_script(
             'thron-block',
-            plugin_dir_url( __FILE__ ) . 'js/thron-block-def.js',
+            plugin_dir_url( __FILE__ ) . 'js/thron-block.js',
             array( 'wp-blocks', 'wp-editor' ),
             true
         );
-    
+
         wp_set_script_translations( 'thron-block', 'thron', THRON_PLUGIN_PATH . '/languages' );
 
@@ -1180 +1199 @@
                 'thron_playerTemplates' => get_option( 'thron_playerTemplates' ) ? get_option( 'thron_playerTemplates' ) : $template_default,
                 'pkey'                  => get_option( 'thron_pkey' ),
-                'thron_list_folder'            => get_option('thron_list_folder'),
                 'templateList'          => $templateList,
                 'folders'               => $this->folderList,
@@ -1190 +1208 @@
     }
 
-    function thron_add_tci_tracking_image_block( $attributes, $content ) {
-
-        $content = str_replace('wp-image-', 'tci wp-image-', $content);
-
-        return $content;
-    }
-
-    function thron_add_tci_tracking_video_block( $attributes, $content ) {
-
-        $content = preg_replace_callback( '/(<video) (.*video>)/i', array(
-            $this,
-            'process_video_audio_class'
-        ), $content );
-
-        return $content;
-    }
-
-    function thron_add_tci_tracking_audio_block( $attributes, $content ) {
-
-        $content = preg_replace_callback( '/(<audio) (.*audio>)/i', array(
-            $this,
-            'process_video_audio_class'
-        ), $content );
-
-        return $content;
-    }
-
 
     function register_block_embed() {
-
-        register_block_type( 'core/gallery', array(
-            'render_callback' => array( $this, 'thron_add_tci_tracking_image_block' ),
-        ) );
-
-        register_block_type( 'core/media-text', array(
-            'render_callback' => array( $this, 'thron_add_tci_tracking_image_block' ),
-        ) );
-
-        register_block_type( 'core/audio', array(
-            'render_callback' => array( $this, 'thron_add_tci_tracking_audio_block' ),
-        ) );
-
-        register_block_type( 'core/image', array(
-            'render_callback' => array( $this, 'thron_add_tci_tracking_image_block' ),
-        ) );
-
-        register_block_type( 'core/video', array(
-            'render_callback' => array( $this, 'thron_add_tci_tracking_video_block' ),
-        ) );
-
 
         register_block_type(
@@ -1257 +1227 @@
             )
         );
-
-        
-        register_block_type(
-            'thron/embed',
-            array(
-                'attributes'      => array(
-                    'contentID' => array(
-                        'type'    => 'string',
-                        'default' => false,
-                    ),
-                    'embedCode' => array(
-                        'type'    => 'string',
-                        'default' => false,
-                    ),
-                ),
-                'render_callback' => array( $this, 'render_block_embed_alt' ),
-            )
-        );
-
-    }
+    }
+
+
+
+function thron_add_tracking_class( $class ){
+
+    $class .= ' tci';
+    return $class;
+
+}
+
+
+
 
     function image_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
@@ -1326 +1289 @@
     }
 
-    private function process_video_audio_class( $matches ) {
-
-        return  $matches[1] .  ' class="tci" ' . $matches[2] ;
-    }
 
     function render_block_embed( $attr ) {
-        return do_shortcode( '[thron contentID="' . $attr['contentID'] . '" embedCodeId= "' . $attr['embedCode'] . '"]' );
-    }
-
-    function render_block_embed_alt( $attr ) {
-        return do_shortcode( '[thron contentID="' . $attr['contentID'] . '" embedCodeId= "' . $attr['embedCode'] . '"]' );
-    }   
+        return do_shortcode( '[thron contentID="' . $attr['contentID'] . 
+        '" scalemode= "' . $attr['scalemode'] . '"'.
+        ($attr['scalemode'] == 'manual' ? '" cropx= "' . $attr['cropx'] . '" cropy= "' . $attr['cropy'] . '" cropw= "' . $attr['cropw'] . '" croph= "' . $attr['croph'] . '"' : '').
+        '" quality= "' . $attr['quality'] . '"'.
+        '" brightness= "' . $attr['brightness'] . '"'.
+        '" contrast= "' . $attr['contrast'] . '"'.
+        '" sharpness= "' . $attr['sharpness'] . '"'.
+        '" color= "' . $attr['color'] . '"'.
+        '" embedCodeId= "' . $attr['embedCode'] . '"]' );
+    }
+
+
+    /**
+     * OVERRIDING TEMPLATE MEDIA MODAL
+     */
+    public function ws_add_media_overrides($args) {
+    ?>
+    <script type="text/html" id="tmpl-uploader-inline-custom">
+
+        <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
+        <# if ( data.canClose ) { #>
+        <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
+        <# } #>
+        <div class="uploader-inline-content {{ messageClass }}">
+        <# if ( data.message ) { #>
+            <h2 class="upload-message">{{ data.message }}</h2>
+        <# } #>
+        <?php if ( ! _device_can_upload() ) : ?>
+            <div class="upload-ui">
+                <h2 class="upload-instructions"><?php _e( 'Your browser cannot upload files' ); ?></h2>
+                <p>
+                <?php
+                    printf(
+                        /* translators: %s: https://apps.wordpress.org/ */
+                        __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ),
+                        'https://apps.wordpress.org/'
+                    );
+                ?>
+                </p>
+            </div>
+        <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
+            <div class="upload-ui">
+                <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
+                <?php
+                /** This action is documented in wp-admin/includes/media.php */
+                do_action( 'upload_ui_over_quota' );
+                ?>
+            </div>
+        <?php else : ?>
+            <div class="upload-ui">
+                <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
+                <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
+                <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
+            </div>
+
+            <div class="upload-inline-status"></div>
+
+            <div class="post-upload-ui">
+                <?php
+                /** This action is documented in wp-admin/includes/media.php */
+                do_action( 'pre-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
+                /** This action is documented in wp-admin/includes/media.php */
+                do_action( 'pre-plupload-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
+
+                if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
+                    /** This action is documented in wp-admin/includes/media.php */
+                    do_action( 'post-plupload-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
+                    add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
+                } else {
+                    /** This action is documented in wp-admin/includes/media.php */
+                    do_action( 'post-plupload-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
+                }
+
+                $max_upload_size = wp_max_upload_size();
+                if ( ! $max_upload_size ) {
+                    $max_upload_size = 0;
+                }
+                ?>
+
+                <p class="max-upload-size">
+                <?php
+                    printf(
+                        /* translators: %s: Maximum allowed file size. */
+                        __( 'Maximum upload file size: %s.' ),
+                        esc_html( size_format( $max_upload_size ) )
+                    );
+                ?>
+                </p>
+
+                <br/>
+                <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
+                <a type="button" href="https://<?=$this->thron_options['thron_clientId']?>.thron.com/#/contents/category/<?= $this->thron_options['thron_list_folder']; ?>" target="_blank" class="button button-hero thron-upload-button"><?=__( 'Upload the content in THRON' )?></a>
+
+                <# if ( data.suggestedWidth && data.suggestedHeight ) { #>
+                    <p class="suggested-dimensions">
+                        <?php
+                            /* translators: 1: Suggested width number, 2: Suggested height number. */
+                            printf( __( 'Suggested image dimensions: %1$s by %2$s pixels.' ), '{{data.suggestedWidth}}', '{{data.suggestedHeight}}' );
+                        ?>
+                    </p>
+                <# } #>
+
+                <?php
+                /** This action is documented in wp-admin/includes/media.php */
+                do_action( 'post-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
+                ?>
+            </div>
+        <?php endif; ?>
+        </div>
+    </script>
+
+
+
+
+
+    <script type="text/html" id="tmpl-attachment-details-two-column-custom">
+        <div class="attachment-media-view {{ data.orientation }}">
+            <h2 class="screen-reader-text"><?php _e( 'Attachment Preview' ); ?></h2>
+            <div class="thumbnail thumbnail-{{ data.type }}">
+
+                <?php //print_r($this->thron_options)
+                
+                /*print_r($args);   $thron_id =  get_post_meta($args['id'],'thron_id',true);*/ ?>
+                
+                <# var u = data.url.split('/')
+                //console.log(u)
+                if ( data.uploading ) { #>
+                    <div class="media-progress-bar"><div></div></div>
+                <# } else if ( data.sizes && data.sizes.large ) { #>
+                    <img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
+                <# } else if ( data.sizes && data.sizes.full ) { #>
+                    <img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
+                <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
+                    <img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
+                <# } #>
+
+                <# if ( 'audio' === data.type ) { #>
+                <div class="wp-media-wrapper wp-audio">
+                    <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
+                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
+                    </audio>
+                </div>
+                <# } else if ( 'video' === data.type ) {
+                    var w_rule = '';
+                    if ( data.width ) {
+                        w_rule = 'width: ' + data.width + 'px;';
+                    } else if ( wp.media.view.settings.contentWidth ) {
+                        w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
+                    }
+                #>
+                <div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
+                    <video controls="controls" class="wp-video-shortcode" preload="metadata"
+                        <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
+                        <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
+                        <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
+                        <source type="{{ data.mime }}" src="{{ data.url }}"/>
+                    </video>
+                </div>
+                <# } #>
+
+                <div class="attachment-actions">
+                    <# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
+                        <# var client_info = u[2].split('-');
+                        if(client_info[0] != '<?=$this->thron_options['thron_clientId']?>') { #>
+                    <button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
+                    <# }else{ #>
+                    <a type="button" href="https://<?=$this->thron_options['thron_clientId']?>.thron.com/#/contents/content/{{u[7]}}" target="_blank" class="button button-hero thron-upload-button"><?=__( 'Edit image on THRON', 'thron' )?></a>
+                    <# } #>
+                    <div>
+                        <?php 
+                        // print_r($this->thron_options);
+                        ?>
+                    </div>
+                    <# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
+                    <p><?php _e( 'Document Preview' ); ?></p>
+                    <# } #>
+                </div>
+            </div>
+        </div>
+        <div class="attachment-info">
+            <span class="settings-save-status" role="status">
+                <span class="spinner"></span>
+                <span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
+            </span>
+            <div class="details">
+                <h2 class="screen-reader-text"><?php _e( 'Details' ); ?></h2>
+                <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
+                <div class="uploaded-by">
+                    <strong><?php _e( 'Uploaded by:' ); ?></strong>
+                        <# if ( data.authorLink ) { #>
+                            <a href="{{ data.authorLink }}">{{ data.authorName }}</a>
+                        <# } else { #>
+                            {{ data.authorName }}
+                        <# } #>
+                </div>
+                <# if ( data.uploadedToTitle ) { #>
+                    <div class="uploaded-to">
+                        <strong><?php _e( 'Uploaded to:' ); ?></strong>
+                        <# if ( data.uploadedToLink ) { #>
+                            <a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a>
+                        <# } else { #>
+                            {{ data.uploadedToTitle }}
+                        <# } #>
+                    </div>
+                <# } #>
+                <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
+                <div class="file-type"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
+                <div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
+                <# if ( 'image' === data.type && ! data.uploading ) { #>
+                    <# if ( data.width && data.height ) { #>
+                        <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
+                            <?php
+                            /* translators: 1: A number of pixels wide, 2: A number of pixels tall. */
+                            printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
+                            ?>
+                        </div>
+                    <# } #>
+
+                    <# if ( data.originalImageURL && data.originalImageName ) { #>
+                        <?php _e( 'Original image:' ); ?>
+                        <a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
+                    <# } #>
+                <# } #>
+
+                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
+                    <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
+                        <span aria-hidden="true">{{ data.fileLength }}</span>
+                        <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
+                    </div>
+                <# } #>
+
+                <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
+                    <div class="bitrate">
+                        <strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
+                        <# if ( data.meta.bitrate_mode ) { #>
+                        {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
+                        <# } #>
+                    </div>
+                <# } #>
+
+                <# if ( data.mediaStates ) { #>
+                    <div class="media-states"><strong><?php _e( 'Used as:' ); ?></strong> {{ data.mediaStates }}</div>
+                <# } #>
+
+                <div class="compat-meta">
+                    <# if ( data.compat && data.compat.meta ) { #>
+                        {{{ data.compat.meta }}}
+                    <# } #>
+                </div>
+            </div>
+
+            <div class="settings">
+                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
+                <# if ( 'image' === data.type ) { #>
+                    <span class="setting has-description" data-setting="alt">
+                        <label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
+                        <input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
+                    </span>
+                    <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
+                <# } #>
+                <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
+                <span class="setting" data-setting="title">
+                    <label for="attachment-details-two-column-title" class="name"><?php _e( 'Title' ); ?></label>
+                    <input type="text" id="attachment-details-two-column-title" value="{{ data.title }}" {{ maybeReadOnly }} />
+                </span>
+                <?php endif; ?>
+                <# if ( 'audio' === data.type ) { #>
+                <?php
+                foreach ( array(
+                    'artist' => __( 'Artist' ),
+                    'album'  => __( 'Album' ),
+                ) as $key => $label ) :
+                    ?>
+                <span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
+                    <label for="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
+                    <input type="text" id="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
+                </span>
+                <?php endforeach; ?>
+                <# } #>
+                <span class="setting" data-setting="caption">
+                    <label for="attachment-details-two-column-caption" class="name"><?php _e( 'Caption' ); ?></label>
+                    <textarea id="attachment-details-two-column-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+                </span>
+                <span class="setting" data-setting="description">
+                    <label for="attachment-details-two-column-description" class="name"><?php _e( 'Description' ); ?></label>
+                    <textarea id="attachment-details-two-column-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
+                </span>
+                <span class="setting" data-setting="url">
+                    <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
+                    <input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
+                    <span class="copy-to-clipboard-container">
+                        <button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-two-column-copy-link"><?php _e( 'Copy URL to clipboard' ); ?></button>
+                        <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
+                    </span>
+                </span>
+                <div class="attachment-compat"></div>
+            </div>
+
+            <div class="actions">
+                <# if ( data.link ) { #>
+                    <a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
+                <# } #>
+                <# if ( data.can.save ) { #>
+                    <# if ( data.link ) { #>
+                        <span class="links-separator">|</span>
+                    <# } #>
+                    <a href="{{ data.editLink }}"><?php _e( 'Edit more details' ); ?></a>
+                <# } #>
+                <# if ( ! data.uploading && data.can.remove ) { #>
+                    <# if ( data.link || data.can.save ) { #>
+                        <span class="links-separator">|</span>
+                    <# } #>
+                    <?php if ( MEDIA_TRASH ) : ?>
+                        <# if ( 'trash' === data.status ) { #>
+                            <button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
+                        <# } else { #>
+                            <button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
+                        <# } #>
+                    <?php else : ?>
+                        <button type="button" class="button-link delete-attachment"><?php _e( 'Delete permanently' ); ?></button>
+                    <?php endif; ?>
+                <# } #>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        jQuery(document).ready( function($) {
+
+            /*
+            * c.brualdi - 15.02
+            */
+
+            var uploadUrl = "https://<?=$this->thron_options['thron_clientId']?>.thron.com/#/contents/category/<?= $this->thron_list_folder; ?>";
+
+            // uploader in visualizzazione a griglia
+            var inlineForm = jQuery('.uploader-inline-content.no-upload-message');
+            if (inlineForm.length && !jQuery('#thron-upload').length) {
+                inlineForm.after('<p id="thron-upload" class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p><a type="button" href="' + uploadUrl + '" target="_blank" class="button button-hero thron-upload-button"><?=__( 'Upload the content in THRON', 'thron' )?></a><br/><br/><br/>');
+            }
+            
+            // media-new.php
+            var uploadForm = jQuery('#file-form');
+            if (uploadForm.length) {
+                uploadForm.after('<h2><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?> <a href="' + uploadUrl + '" target="_blank" class="thron-upload-button"><?=__( 'upload the content in THRON', 'thron' )?></a></h2>');
+            }
+
+            // Modale upload
+            if( typeof wp.media.view.UploaderInline != 'undefined' ){
+                wp.media.view.UploaderInline.prototype.template = wp.media.template( 'uploader-inline-custom' );
+            }
+            
+            // Modale edit image
+            if( typeof wp.media.view.Attachment.Details.TwoColumn != 'undefined' ){
+                wp.media.view.Attachment.Details.TwoColumn.prototype.template = wp.media.template( 'attachment-details-two-column-custom' );
+            }           
+            
+        });
+    </script>   
+
+        <?php
+    }
+
+    function ws_add_overrides() {
+        $args = array (
+            'id'        =>  $_GET['item'], // id
+        );
+
+        add_action( 'admin_footer-post.php', [$this,'ws_add_media_overrides'] );
+        add_action( 'admin_footer-media-new.php', [$this,'ws_add_media_overrides'] );
+        add_action( 'admin_footer-edit.php', [$this,'ws_add_media_overrides'] );
+        add_action( 'admin_footer-upload.php', function() use ( $args ) { 
+            $this->ws_add_media_overrides( $args ); } );
+
+    }
+
 }

thron/trunk/admin/class-thron-setting.php

@@ -180 +180 @@
         $thron_options = get_option( 'thron_option_api_page' );
 
-        /*
-        * alambertini 202024061455  ::: spostato sopra per evitare ::: array_key_exists() expects parameter 2 to be array, boolean given
-        */
-        if ( ! is_array( $thron_options ) ) { 
-            ?>
-            <div class="error notice">
-                <p><?php _e( 'The connector has not been successfully configured!!', 'thron' ); ?></p>
-            </div>
-            <?php
-
-            return;
-        }
-
         if (! array_key_exists('thron_maxImageWidth', $thron_options ) or $thron_options['thron_maxImageWidth'] == '' ) {
             $thron_options['thron_maxImageWidth'] = 1920;
@@ -200 +187 @@
 
         $thron_options = get_option( 'thron_option_api_page' );
+
+        if ( ! is_array( $thron_options ) ) {
+            ?>
+            <div class="error notice">
+                <p><?php _e( 'The connector has not been successfully configured!!', 'thron' ); ?></p>
+            </div>
+            <?php
+
+            return;
+        }
+
 
         $clientId = $thron_options['thron_clientId'];

thron/trunk/admin/css/thron-admin.css

@@ -1 +1 @@
 #wp-media-grid #media-attachment-thron-tags-filter,
 #wp-media-grid #media-attachment-thron-folders-filter {
-    display: none !important;
+    display: none;
 }
 
 /* Add Media fix style - style duplicato se si vuole personalizzare una sola area*/
+
 .media-modal #media-attachment-date-filters {
     display: none;
 }
 
+/*
 .media-modal .attachments-browser .media-toolbar {
-      position: absolute;
+    position: absolute;
     right: 300px;
     top: 0;
     display: flex;
     justify-content: space-between;
-    height: 110px;
     max-height: 250px;
-        overflow: auto;
-}
-
-.media-modal .attachments-browser .attachments {
-    position: absolute;
-    top: 125px;
-    left: 0;
-    right: 300px;
-    bottom: 0;
-    overflow: auto;
-    outline: 0;
+    overflow: auto;
+    height: 120px;
+}
+
+.wsthron .attachments-browser .media-toolbar {
+    padding-top: 30px;
 }
 
 .media-modal .media-toolbar-secondary {
-    display: flex;
-    justify-content: flex-start;
-    width: 80%;
-    flex-wrap: wrap;
-}
-
-.media-modal .media-modal-content .media-frame select.attachment-filters {
-    margin-top: 10px !important;
-    width: 30%;
-    max-width: none;
-}
-
-.media-modal .media-attachments-filter-heading {
-    display: none;
-}
-
-.media-modal .media-frame select,
-.media-modal .wp-admin .media-frame select,
-.media-modal .media-frame input[type=search],
-.media-modal .media-frame input[type=number] {
-    min-height: 20px;
-    font-size: 12px;
-    max-height: 26px;
-}
-
-/* fine style Add media wordpress */ 
-
-.wsthron #media-attachment-date-filters {
-    display: none;
-}
-
-.wsthron .media-modal-content .media-frame select.attachment-filters {
-    /* max-width: -webkit-calc(33% - 12px);
-    max-width: calc(33% - 12px); */
-}
-
-.wsthron .attachments-browser .media-toolbar {
-    height: 120px !important;
-}
-.wsthron .attachments-browser .attachments {
-    top: 120px !important;
-}
-
-.wsthron .media-modal-content .media-frame select.attachment-filters {
-        margin-top: 10px !important;
-        width: 30%;
-        max-width: none;
-}
-
-.wsthron .attachments-browser .media-toolbar,
-.wsthron .attachments-browser .uploader-inline {
-    padding-top: 30px;
-}
-
-
-.wsthron #thron_bar .media-uploader-status div {
-    margin-bottom: 15px;
-}
-
-.wsthron #thron_bar .media-uploader-status label {
-    margin-bottom: 10px;
-    font-weight: bold;
-    display: block;
-}
-
-.wsthron .thron_attachments_preview {
-    padding-top: 10px;
-}
-
-
-
-/* app takes the whole page */
-.wsthron #thron_list {
     display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-}
-
-
-.wsthron #thron_app .td-content-grid {
+    justify-content: flex-start;
+    width: 80%;
+    flex-wrap: wrap;
+}*/
+
+
+/*.media-modal .attachments-browser .attachments {
     position: absolute;
-    top: 160px;
+    top: 125px;
     left: 0;
     right: 300px;
@@ -118 +42 @@
     overflow: auto;
     outline: 0;
-}
-
-.wsthron #thron_app .td-content-grid {
-    width: auto; 
-}
-
-
-/* margins and height */
-.wsthron #thron_app #thron_list .content {
-    margin: 6px;
-    height: 150px;
-    width: 150px;
-    overflow: hidden;
-        position: relative;
-        flex-wrap: wrap;
-        /* flex-grow: 1; */
-        flex: calc((100%/6) - 12px);
-    max-width: calc((100%/6) - 12px);
-}
-
-@media (max-width: 1600px) {
-    .wsthron #thron_app #thron_list .content {
-        flex: calc((100%/5) - 12px);
-    max-width: calc((100%/5) - 12px);
-    }
-}
-
-@media (max-width: 1024px) {
-    .wsthron #thron_app #thron_list .content {
-        flex: calc((100%/3) - 12px);
-    max-width: calc((100%/3) - 12px);
-    }
-}
-
-/* cursor */
-.wsthron #thron_list .content,
-.wsthron .content * {
-    cursor: pointer;
-}
+}*/
+
+.media-modal .media-modal-content .media-frame select.attachment-filters {
+    margin-top: 10px !important;
+    width: 30%;
+    max-width: none;
+}
+
+.media-modal .media-attachments-filter-heading {
+    display: none;
+}
+
+.media-modal .media-frame select,
+.media-modal .wp-admin .media-frame select,
+.media-modal .media-frame input[type=search],
+.media-modal .media-frame input[type=number] {
+    min-height: 20px;
+    font-size: 12px;
+    max-height: 26px;
+}
+
+.wsthron #media-attachment-date-filters {
+    display: none;
+}
+
+.wsthron .attachments-browser .attachments {
+    top: 120px !important;
+}
+
+.wsthron .media-modal-content .media-frame select.attachment-filters {
+    margin-top: 10px !important;
+    width: 30%;
+    max-width: none;
+}
+
+.wsthron .attachments-browser .uploader-inline {
+    padding-top: 30px;
+}
+
+.wsthron #thron_bar .media-uploader-status div {
+    margin-bottom: 15px;
+}
+
+.wsthron #thron_bar .media-uploader-status label {
+    margin-bottom: 10px;
+    font-weight: bold;
+    display: block;
+}
+
+.wsthron .thron_attachments_preview {
+    padding-top: 10px;
+}
+
 
 /* selection border and overlay */
+
 .wsthron .content.item-selected {
     box-shadow: 0 0 0 2px #f39900;
-        background-color: black;
+    background-color: black;
 }
 
 /* selection overlay opacity */
+
 .wsthron .content.item-selected img {
     opacity: 0.8;
@@ -170 +110 @@
 
 /* show label when selected */
+
 .wsthron .content.item-selected .label {
     display: flex;
 }
 
-/* image: fill wrapper (absolute is needed for padding "trick") */
-.wsthron #thron_list .content {
-
-}
-
 /* image wrapper: use padding to force aspect ratio */
+
 .wsthron .content .img-wrapper {
     position: relative;
@@ -186 +123 @@
 }
 
-.wsthron .content.selected {
-    border: 7px solid #0073aa;
+/* checkbox margin */
+
+.wsthron input[type="checkbox"] {
+    margin-right: 5px;
+}
+
+.wsthron .media-uploader-status {
+    padding: 16px 0px;
+}
+
+.wsthron .sidebar_img-dimension {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+.wsthron .dimension_separator {
+    font-weight: bold;
+    line-height: 30px;
+    margin: 0 10px;
+}
+
+.wsthron #thron-player-width,
+.wsthron #thron-player-height {
+    flex: 0 0 30%;
+    max-width: 40%;
+}
+
+.wsthron .spinner {
+    position: absolute;
+    right: 0;
+    z-index: 999999;
+}
+
+.thronButton {
+    /*tobe changed asap */
+    height: 48px;
+}
+
+.thronText {
+    box-shadow: 0 0 0 transparent !important;
+    border-radius: 0px !important;
+    border-left: 0px solid #7e8993 !important;
+    border-right: 0px solid #7e8993 !important;
+    border-top: 1px solid #000 !important;
+    border-bottom: 1px solid #000 !important;
+    background-color: #fff !important;
+    color: #000 !important;
+    height: 48px;
+    width: 120px;
+}
+
+/* Griglia elelemento*/
+
+.th-player.th-image:hover .th-wrapper-grid,
+.th-player.th-image.th-user-active .th-wrapper-grid {
+    display: grid;
+}
+
+/*generazione griglia*/
+
+.th-player.th-image .th-wrapper-grid {
+    /*display: grid;*/
+    display: none;
+    grid-template-columns: 33% 33% auto;
+    grid-gap: 1px;
+    background-color: trasparent;
+    color: #444;
+    position: absolute !important;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    pointer-events: none;
+}
+
+/*singoli blocchi*/
+
+.th-player.th-image .th-wrapper-grid .th-wrapper-grid-box {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    border: 2px solid #fff !important;
+    border-left-width: 0 !important;
+    border-top-width: 0 !important;
+}
+
+/*rimozione tasto FS*/
+
+.th-player.th-image .th-fullscreen-button,
+.th-player.th-image .th-text-zoom {
+    display: none !important;
+}
+
+/*Link verso thron.com*/
+
+a.thron-upload-button:hover {
+    opacity: 0.8;
+}
+
+a.thron-upload-button {
+    color: #F39900;
+}
+
+a.button.button-hero.thron-upload-button {
+    color: #fff;
+    background-color: #f39900;
+    cursor: pointer;
+    text-decoration: none;
+    font-weight: 600;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+    -webkit-box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%);
+    -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%);
+    border: 0px;
+    font-size: 15px;
+    height: 40px;
+    width: auto;
+    opacity: 1;
+}
+
+a.button.button-hero.thron-upload-button:hover {
+    opacity: 0.8;
+}
+
+.th_overlay {
+    display: none;
+}
+
+.test {
+    display: block
+}
+
+/*
+NEW
+*/
+
+/*
+MEDIA THRON
+*/
+.media-thron {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+    overflow: hidden;
+}
+
+/*
+THRON CONTENT
+*/
+#thron_content {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+}
+
+#thron_content.thron-block {
+    max-height: calc(100% - 110px);
+}
+
+.media-thron #thron_content {
+    flex: 1 0 calc(100% - 267px);
+    min-height: 100%;
+}
+
+/*
+THRON TOOLBAR
+*/
+#thron_toolbar {
+    /*
+    position: absolute;
+    right: 300px;
+    top: 0;
+    */  
+    flex: 0 0 auto;
+    height: auto;
     box-sizing: border-box;
-}
-
-.wsthron .content.selected .label .thron-type {
-    top: 25%;
-    left: 25%;
-}
-
-/* label styling: ellipsis, positioning, width, etc... */
-.wsthron .content .label {
-        display: none;
-        
-}
-
-/* show label when hovered */
-.wsthron .content:hover .label {
-    display: flex;
-}
-
-/* more label styling */
-.wsthron .content .label span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: calc(100% - 20px);
-}
-
-.wsthron .content .label .thron-type {
-    width: 60px;
-    height: 60px;
+    position: relative;
+    width: 100%;
+    border: 0 solid #ddd;
+    overflow: hidden;
+    background: white;
+    z-index: 10000;
+    padding: 0 10px;
+}
+
+@media (min-width: 768px) {
+    #thron_toolbar {            
+        display: flex;
+        justify-content: space-between; 
+    }
+}
+
+#thron_toolbar .media-toolbar-secondary {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    flex: 1 1 75%;
+    padding-top: 32px;
+    height: auto;
+}
+
+#thron_toolbar .media-toolbar-secondary__label {
     position: absolute;
-    top: 25%;
-    left: 30%;
-}
-
-.thron-type[data-value="URL"] {
-    background: url('./../img/thumbnails-icons.png');
-    background-position: -140px 283px;
-}
-
-.thron-type[data-value="PAGELET"] {
-    background: url('./../img/thumbnails-icons.png');
-    background-position: -5px 215px;
-}
-
-.thron-type[data-value="IMAGE"] {
-    background: url('./../img/thumbnails-icons.png');
-    background-position: 308px 214px;
-}
-
-.thron-type[data-value="VIDEO"] {
-    background: url('./../img/thumbnails-icons.png');
-    background-position: -5px 283px;
-}
-
-.thron-type[data-value="AUDIO"] {
-    background: url('./../img/thumbnails-icons.png');
-    background-position: -5px -3px;
-}
-
-.thron-type[data-value="PLAYLIST"] {
-    background: url('./../img/thumbnails-icons.png');
-    background-position: 240px 214px;
-}
-
-.thron-type[data-value="OTHER"] {
-    background: url('./../img/thumbnails-icons.png');
-    background-position: 3px 83px;
-}
-
-.wsthron .content .label .thron-extension {
+    top: 0;
+}
+
+#thron_toolbar .media-toolbar-primary {
+    position: relative;
+    flex: 1 1 25%;
+    float: none;
+}
+
+#thron_toolbar .media-toolbar-primary .search {
+    min-height: 30px!important;
+    margin: 0 0 10px 0!important;
+}
+
+#thron_toolbar .media-toolbar-primary .media-search-input-label {        
+    display: block;
+    margin: 0 0 5px 0;
+}
+
+@media (min-width: 768px) {
+    #thron_toolbar .media-toolbar-primary {            
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+            
+    #thron_toolbar .media-toolbar-primary .search {
+        margin: 0 0 10px 5px!important;
+    }
+
+    #thron_toolbar .media-toolbar-primary .media-search-input-label {            
+        margin: 0 0 10px;
+    }
+
+    .media-frame #thron_toolbar .media-toolbar-primary {
+        display: block;
+        padding-top: 32px;
+    }
+
+    .media-frame #thron_toolbar .media-toolbar-primary .search {
+        margin: 0 0 10px 5px!important;
+    }
+}
+
+#thron_toolbar select.attachment-filters {
+    margin-top: 0;  
+    max-width: none;
+    margin: 0 10px 10px 0!important;
+    line-height: 2;
+    max-height: 30px;
+    font-size: 14px;
+    min-height: 30px!important;
+    padding: 0 24px 0 8px!important;
+    /* width: calc(25% - 10px); */
+}
+
+.thron-block #thron_toolbar .media-toolbar-secondary,
+.thron-block #thron_toolbar .media-toolbar-primary {
+    padding-top: 10px;
+}
+
+.thron-block #thron_toolbar #media-search-input {
+    font-size: 14px;
+    line-height: 2;
+    color: #32373c;
+    border: 1px solid #7e8993;
+    box-shadow: none;
+    border-radius: 3px;
+    padding: 0 8px;
+    min-height: 30px;
+    max-width: 25rem;
+    appearance: none;
+}
+
+/*
+MEDIA SIDEBAR
+*/
+#thron_bar {
+    box-sizing: border-box;
+    position: relative;
+    flex: 0 0 267px;
+    width: 267px;
+    padding: 0 16px;
+    overflow: auto;
+}
+
+#thron_bar .media-uploader-status div {
+    margin-bottom: 15px;
+}
+
+#thron_bar .media-uploader-status label {
+    margin-bottom: 10px;
+    font-weight: bold;
+    display: block;
+}
+
+/*
+THRON LIST
+*/
+#thron_list {
+    box-sizing: border-box;  
+    flex: 0 1 auto;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: 0;
+}
+
+#thron_list .empty-results {
+    text-align: center;
+    width: 100%;
+    border-top: 1px solid #ccc;
+    padding: 20px 0;
+}
+
+#thron_list .content {
+    flex: 1 1 100%;
+    max-width: 100%;
+}
+
+@media (min-width: 600px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/2) - 12px);
+        max-width: calc((100%/2) - 12px);
+    }
+}
+
+@media (min-width: 800px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/3) - 12px);
+        max-width: calc((100%/3) - 12px);
+    }
+}
+
+@media (min-width: 901px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/2) - 12px);
+        max-width: calc((100%/2) - 12px);
+    }
+}
+
+@media (min-width: 1024px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/3) - 12px);
+        max-width: calc((100%/3) - 12px);
+    }
+}
+
+@media (min-width: 1200px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/4) - 12px);
+        max-width: calc((100%/4) - 12px);
+    }
+}
+
+@media (min-width: 1300px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/5) - 12px);
+        max-width: calc((100%/5) - 12px);
+    }
+}
+
+@media (min-width: 1400px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/6) - 12px);
+        max-width: calc((100%/6) - 12px);
+    }
+}
+
+@media (min-width: 1600px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/7) - 12px);
+        max-width: calc((100%/7) - 12px);
+    }
+}
+
+@media (min-width: 1920px) {
+    #thron_list .content {
+        flex: 1 1 calc((100%/9) - 12px);
+        max-width: calc((100%/9) - 12px);
+    }
+}
+
+/*
+THRON BLOCK
+*/
+@media (min-width: 600px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/2) - 12px);
+        max-width: calc((100%/2) - 12px);
+    }
+}
+
+@media (min-width: 800px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/3) - 12px);
+        max-width: calc((100%/3) - 12px);
+    }
+}
+
+@media (min-width: 1024px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/5) - 12px);
+        max-width: calc((100%/5) - 12px);
+    }
+}
+
+@media (min-width: 1200px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/6) - 12px);
+        max-width: calc((100%/6) - 12px);
+    }
+}
+
+@media (min-width: 1300px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/7) - 12px);
+        max-width: calc((100%/7) - 12px);
+    }
+}
+
+@media (min-width: 1400px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/8) - 12px);
+        max-width: calc((100%/8) - 12px);
+    }
+}
+
+@media (min-width: 1600px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/9) - 12px);
+        max-width: calc((100%/9) - 12px);
+    }
+}
+
+@media (min-width: 1920px) {
+    .thron-block #thron_list .content {
+        flex: 1 1 calc((100%/11) - 12px);
+        max-width: calc((100%/11) - 12px);
+    }
+}
+
+/*
+THRON LIST EXPANDED
+//
+
+.media-modal.acf-expanded #thron_list {
+    right: 740px;
+}
+
+@media (max-width: 1599px) {
+    .media-modal.acf-expanded #thron_list .content {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 1600px) {
+    .media-modal.acf-expanded #thron_list .content {
+        flex: 1 1 calc((100%/2) - 12px);
+        max-width: calc((100%/2) - 12px);
+    }
+}
+
+@media (min-width: 1920px) {
+    .media-modal.acf-expanded #thron_list .content {
+        flex: 1 1 calc((100%/4) - 12px);
+        max-width: calc((100%/4) - 12px);
+    }
+}
+*/
+
+/*
+THRON CONTENT
+*/
+#thron_list .content {
+    position: relative;
+    margin: 6px;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+#thron_list .content picture {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 100%;
+}
+
+#thron_list .content picture img {
+    box-sizing: border-box;
     position: absolute;
-    top: 2px;
-    left: 2px;
-    background-color: rgba(0, 0, 0, 0.6);
-    padding: 0px 5px 2px 5px;
-    border-radius: 3px;
-    color: white;
-    margin: 0 10px;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    object-fit: cover;
+}
+
+#thron_list .content.selected picture img {
+    border: 5px solid #0073aa;
+}
+
+#thron_list .content .label {
+    display: none;
+}
+
+#thron_list .content:hover .label,
+#thron_list .content.selected .label {
+    display: block;
+}
+
+#thron_list .content .label .thron-extension {
+    box-sizing: border-box;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    margin: 0;
+    padding: 3px 6px;
+    border-radius: 0;
+    width: auto;
+    max-width: 60px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
-    align-items: center;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    text-transform: uppercase;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+}
+
+#thron_list .content .label .thron-label {
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
     width: auto;
-    font-size: 12px;
-}
-
-.wsthron .content .label .thron-label {
-    position: absolute;
-    bottom: 10px;
-    background-color: rgba(0, 0, 0, 0.6);
-    padding: 5px 10px;
-    border-radius: 3px;
-    color: white;
-    width: calc(100% - 20px);
-    margin: 0 10px;
+    max-width: calc(100% - 20px);
+    margin: 0;
+    padding: 3px 6px;
+    border-radius: 0;
+    box-sizing: border-box;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
-    align-items: center;
-    width: 65%;
-}
-
-/* font */
-.wsthron .content .label * {
-    font-size: 15px;
-    font-weight: 600;
-}
-
-/* checkbox margin */
-.wsthron input[type="checkbox"] {
-    margin-right: 5px;
-}
-
-
-.wsthron .media-toolbar-secondary {
-    display: flex;
-    justify-content: flex-start;
-    width: 80%;
-    flex-wrap: wrap;
-}
-
-.wsthron .media-uploader-status {
-    padding: 16px 0px;
-}
-
-.wsthron .sidebar_img-dimension {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-.wsthron .dimension_separator {
-    font-weight: bold;
-    line-height: 30px;
-    margin: 0 10px;
-}
-
-.wsthron #thron-player-width,
-.wsthron #thron-player-height {
-    flex: 0 0 30%;
-    max-width: 40%;
-}
-
-.wsthron .spinner {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    text-transform: lowercase;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+}
+
+#thron_list .content .label .thron-type {
     position: absolute;
-    right: 0;
-    z-index: 999999;
-}
+    width: 60px;
+    height: 60px;
+    top: 50%;
+    left: 50%;
+    margin: -30px 0 0 -30px;
+}
+
+.thron-type[data-value="IMAGE"] {
+    background: url('./../img/thumbnails-icons.png');
+    background-position: 308px 214px;
+}
+
+.thron-type[data-value="VIDEO"] {
+    background: url('./../img/thumbnails-icons.png');
+    background-position: -5px 283px;
+}
+
+.thron-type[data-value="AUDIO"] {
+    background: url('./../img/thumbnails-icons.png');
+    background-position: -5px -3px;
+}
+
+.thron-type[data-value="PLAYLIST"] {
+    background: url('./../img/thumbnails-icons.png');
+    background-position: 240px 214px;
+}
+
+.thron-type[data-value="URL"] {
+    background: url('./../img/thumbnails-icons.png');
+    background-position: 240px 283px;
+}
+
+.thron-type[data-value="PAGELET"] {
+    background: url('./../img/thumbnails-icons.png');
+    background-position: -5px 214px;
+}
+
+.thron-type[data-value="OTHER"] {
+    background: url('./../img/thumbnails-icons.png');
+    background-position: 3px 83px;
+}
+
+/* cursor */
+#thron_list .content {
+    cursor: pointer;
+}
+
+.hasThronImage + [aria-label="Rotate"] {
+    display: none;
+}
+
+.hasThronImage + .components-toolbar-group button[aria-label="Rotate"] {
+    display: none;
+}
+
+span.components-menu-item__item {
+    min-width: 0px;
+}

thron/trunk/admin/css/thron-block.css

@@ -10 +10 @@
 }
 
+.thron-block-overlay {
+    width: 100%;
+    background: transparent;
+    height: 100%;
+    z-index: 9;
+    position: absolute;
+    left: 0;
+}
+
 .thron-block-modal .components-modal__content {
     position: relative;
@@ -18 +27 @@
     position: relative;
 }
+
 
 .thron-block-modal .wsthron-header .media-toolbar {
@@ -52 +62 @@
 }
 
+
 .thron-block-modal .modal-footer {
     position: absolute;
@@ -76 +87 @@
     cursor: default;
 }
-
-.thron-block-modal .wsthron {
-    /* overflow-y: scroll; 
-    height: 72%; */
-}
-
-.thron-block-modal .wsthron #thron_list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    overflow: auto;
-}
-
-.wsthron .td-content-grid {
-
-    width: 100%;
-}
-
-.wsthron .content.selected {
-    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa;
-}
-
-.wsthron #thron_list .content {
-    margin: 6px;
-    height: 150px;
-    overflow: hidden;
-    position: relative;
-    flex: calc((100%/10) - 12px);
-  max-width: calc((100%/10) - 12px);
-}
-
-
-
-@media (max-width: 1600px) {
-    .wsthron #thron_list .content {
-        flex: calc((100%/8) - 12px);
-    max-width: calc((100%/8) - 12px);
-    }
-}
-
-@media (max-width: 1024px) {
-    .wsthron #thron_list .content {
-        flex: calc((100%/6)  - 12px);
-    max-width: calc((100%/6) - 12px);
-    }
-}
-
-.center{ text-align: center}
-.left{ text-align: left}
-.right{ text-align: right}

thron/trunk/admin/js/collection-filter.js

@@ -76 +76 @@
      */
     var MediaLibraryFoldersFilter = wp.media.view.AttachmentFilters.extend({
-        
-        className:'attachment-filters media-attachment-thron-folders-filter',
         id: 'media-attachment-thron-folders-filter',
 
@@ -85 +83 @@
 
             var props = {};
-            props['thron_categories'] = ThronTagsList.thron_list_folder;
+            props['thron_categories'] = '';
 
             filters.all = {

thron/trunk/admin/js/thron-admin.js

@@ -1 @@
-jQuery(document).ready(function ($) {
+jQuery(document).ready(function($) {
 
     $(document).on("change", '#media-attachment-thron-source-filter', function(event) {
         if (this.value == 'local') {
-            $('.media-attachment-thron-folders-filter').prop('disabled', 'disabled');
+            $('#media-attachment-thron-folders-filter').prop('disabled', 'disabled');
             $('.attachment-filters-tag').prop('disabled', 'disabled');
 
         } else {
-            $('.media-attachment-thron-folders-filter').prop('disabled', false);
+            $('#media-attachment-thron-folders-filter').prop('disabled', false);
             $('.attachment-filters-tag').prop('disabled', false);
 
@@ -14 +14 @@
 
 });
-
-
-const setExtraPropsToBlockType = (props, blockType, attributes) => {
-    const notDefined = (typeof props.className === 'undefined' || !props.className) ? true : false
-
-    if (blockType.name === 'core/cover') {
-        return Object.assign(props, {
-            className: notDefined ? ' tci' : 'tci ' +  props.className,
-        });
-    }
-
-    return props;
-};
-
-
-if(wp.hooks){
-    wp.hooks.addFilter(
-        'blocks.getSaveContent.extraProps',
-        'your-namespace/block-filters',
-        setExtraPropsToBlockType
-    );
-}

thron/trunk/admin/js/thron-block.js

@@ -1 @@
-(function (blocks, editor, i18n, element, components, _) {
+(function(blocks, blockEditor, i18n, element, components, _) {
     var el = element.createElement;
-    var InspectorControls = editor.InspectorControls;
+    var InspectorControls = blockEditor.InspectorControls;
+    var DropDownMenu = components.DropdownMenu;
+    var MenuItem = components.MenuItem;
     var PanelBody = components.PanelBody;
-
-    const {select} = wp.data;
-
-    function ThronListHeight() {
-        var thron_list = document.getElementById("thron_list");
-        var wsthron_header = document.getElementsByClassName("wsthron-header")[0].offsetHeight;
-        var modal_h = document.getElementsByClassName("components-modal__frame")[0].offsetHeight;
-        var modal_header_h = document.getElementsByClassName("components-modal__header")[0].offsetHeight + 24;
-        var modal_footer_h = document.getElementsByClassName("modal-footer")[0].offsetHeight;
-        thron_list.setAttribute("style", "height:" + parseInt(modal_h - modal_header_h - wsthron_header - modal_footer_h - 10) + "px");
-    }
-
-    const THRONLogo = el('svg', {width: 20, height: 20, viewBox: '80 80 140 140'},
+    var thePlayer = [];
+    var destroy = false;
+    var BlockControls = blockEditor.BlockControls;
+
+    const { select } = wp.data;
+
+
+    const ManualPos = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd;}'
+            )
+        ),
         el('path', {
-            fill: "#F39900",
-            d: "M116.52,117.58c-8.5,8.89-12.84,19.69-12.84,32.38c0,13.03,4.35,23.95,13.06,32.76\n" +
-                "\t\tc8.65,8.86,19.36,13.29,32.12,13.29c12.71,0,23.45-4.43,32.2-13.29c8.76-8.76,13.13-19.57,13.13-32.44\n" +
-                "\t\tc0-13.51-4.53-24.61-13.61-33.31c-8.98-8.66-19.33-13.01-31.08-13.06V86.66c15.83,0,30,5.46,42.55,16.38\n" +
-                "\t\tc13.82,12.08,20.73,27.9,20.73,47.47c0,17.19-6.3,31.96-18.91,44.31c-12.55,12.34-27.64,18.51-45.26,18.51\n" +
-                "\t\tc-17.41,0-32.33-6.23-44.78-18.67c-12.5-12.45-18.75-27.4-18.75-44.86c0-17.57,6.34-32.53,18.89-44.76L116.52,117.58z"
+            id: 'manual_pos',
+            'data-name': 'manual pos',
+            className: 'cls-1',
+            d: 'M263.5,32V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm4.291-11.4v6.4h0.8V39.008L254.02,36.53l1.666,4.97H256.3l1.674-4.988-0.074,2.5V41.5h0.8V35.1h-1.037L256,40.322l-1.67-5.221h-1.037Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+    const ManualNeg = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd;}'
+            )
+        ),
+        el('path', {
+            id: 'manual_neg',
+            'data-name': 'manual neg',
+            className: 'cls-1',
+            d: 'M246,27h20a2,2,0,0,1,2,2V49a2,2,0,0,1-2,2H246a2,2,0,0,1-2-2V29A2,2,0,0,1,246,27Zm17.5,5V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm4.291-11.4v6.4h0.8V39.008L254.02,36.53l1.666,4.97H256.3l1.674-4.988-0.074,2.5V41.5h0.8V35.1h-1.037L256,40.322l-1.67-5.221h-1.037Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+
+    const AutoPos = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd; fill: #1e1e1e; }'
+            )
+        ),
+        el('path', {
+            id: 'auto_pos',
+            'data-name': 'auto pos',
+            className: 'cls-1',
+            d: 'M263.5,32V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm8.586-5h0.827l-2.066-6.4h-0.69L253.6,41.5h0.826l0.5-1.674h2.162ZM256,36.227l0.875,2.909H255.13Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+    const AutoNeg = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd;}'
+            )
+        ),
+        el('path', {
+            id: 'auto_neg',
+            'data-name': 'auto neg',
+            className: 'cls-1',
+            d: 'M246,27h20a2,2,0,0,1,2,2V49a2,2,0,0,1-2,2H246a2,2,0,0,1-2-2V29A2,2,0,0,1,246,27Zm17.5,5V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm8.586-5h0.827l-2.066-6.4h-0.69L253.6,41.5h0.826l0.5-1.674h2.162ZM256,36.227l0.875,2.909H255.13Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+    const CenteredPos = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd;}'
+            )
+        ),
+        el('path', {
+            id: 'centered_pos',
+            'data-name': 'centered pos',
+            className: 'cls-1',
+            d: 'M263.5,32V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm8.338-7.035A1.96,1.96,0,0,1,257,40.586a1.154,1.154,0,0,1-.905.312,1.061,1.061,0,0,1-.956-0.519,2.8,2.8,0,0,1-.327-1.49V37.716a2.654,2.654,0,0,1,.351-1.5,1.149,1.149,0,0,1,1.007-.512,1.034,1.034,0,0,1,.844.334,1.981,1.981,0,0,1,.329,1.116h0.813a2.427,2.427,0,0,0-.551-1.586,1.85,1.85,0,0,0-1.435-.554,1.928,1.928,0,0,0-1.589.725,3.066,3.066,0,0,0-.582,1.973v1.16a3.159,3.159,0,0,0,.567,1.984,1.833,1.833,0,0,0,1.529.732,1.958,1.958,0,0,0,1.483-.547,2.371,2.371,0,0,0,.578-1.575h-0.813Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+    const CenteredNeg = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd;}'
+            )
+        ),
+        el('path', {
+            id: 'centered_neg',
+            'data-name': 'centered neg',
+            className: 'cls-1',
+            d: 'M246,27h20a2,2,0,0,1,2,2V49a2,2,0,0,1-2,2H246a2,2,0,0,1-2-2V29A2,2,0,0,1,246,27Zm17.5,5V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm8.338-7.035A1.96,1.96,0,0,1,257,40.586a1.154,1.154,0,0,1-.905.312,1.061,1.061,0,0,1-.956-0.519,2.8,2.8,0,0,1-.327-1.49V37.716a2.654,2.654,0,0,1,.351-1.5,1.149,1.149,0,0,1,1.007-.512,1.034,1.034,0,0,1,.844.334,1.981,1.981,0,0,1,.329,1.116h0.813a2.427,2.427,0,0,0-.551-1.586,1.85,1.85,0,0,0-1.435-.554,1.928,1.928,0,0,0-1.589.725,3.066,3.066,0,0,0-.582,1.973v1.16a3.159,3.159,0,0,0,.567,1.984,1.833,1.833,0,0,0,1.529.732,1.958,1.958,0,0,0,1.483-.547,2.371,2.371,0,0,0,.578-1.575h-0.813Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+    const ProductPos = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd;}'
+            )
+        ),
+        el('path', {
+            id: 'product_pos',
+            'data-name': 'product pos',
+            className: 'cls-1',
+            d: 'M263.5,32V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm7.292-7.5a1.878,1.878,0,0,0,1.369-.516,2.278,2.278,0,0,0-.024-2.843,1.846,1.846,0,0,0-1.4-.534H254.2v6.4H255V39h1.292ZM255,35.792h1.24a1,1,0,0,1,.808.348,1.385,1.385,0,0,1,.3.924,1.343,1.343,0,0,1-.286.92,1.042,1.042,0,0,1-.822.321H255V35.792Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+    const ProductNeg = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24' },
+        el('defs',
+            el('style', {},
+                '.cls-1 {fill-rule: evenodd;}'
+            )
+        ),
+        el('path', {
+            id: 'product_neg',
+            'data-name': 'product neg',
+            className: 'cls-1',
+            d: 'M246,27h20a2,2,0,0,1,2,2V49a2,2,0,0,1-2,2H246a2,2,0,0,1-2-2V29A2,2,0,0,1,246,27Zm17.5,5V43H265V32a2.006,2.006,0,0,0-2-2H252v1.5h11A0.472,0.472,0,0,1,263.5,32ZM249,46.5a0.472,0.472,0,0,1-.5-0.5V27H247v3h-3v1.5h3V46a2.006,2.006,0,0,0,2,2h14.5v3H265V48h3V46.5H249Zm7.292-7.5a1.878,1.878,0,0,0,1.369-.516,2.278,2.278,0,0,0-.024-2.843,1.846,1.846,0,0,0-1.4-.534H254.2v6.4H255V39h1.292ZM255,35.792h1.24a1,1,0,0,1,.808.348,1.385,1.385,0,0,1,.3.924,1.343,1.343,0,0,1-.286.92,1.042,1.042,0,0,1-.822.321H255V35.792Z',
+            transform: 'translate(-244 -27)'
+        })
+    );
+
+
+    const THRONLogo = el('svg', { width: 20, height: 20, viewBox: '80 80 140 140' },
+        el('path', {
+            fill: '#F39900',
+            d: 'M116.52,117.58c-8.5,8.89-12.84,19.69-12.84,32.38c0,13.03,4.35,23.95,13.06,32.76\n' +
+                '\t\tc8.65,8.86,19.36,13.29,32.12,13.29c12.71,0,23.45-4.43,32.2-13.29c8.76-8.76,13.13-19.57,13.13-32.44\n' +
+                '\t\tc0-13.51-4.53-24.61-13.61-33.31c-8.98-8.66-19.33-13.01-31.08-13.06V86.66c15.83,0,30,5.46,42.55,16.38\n' +
+                '\t\tc13.82,12.08,20.73,27.9,20.73,47.47c0,17.19-6.3,31.96-18.91,44.31c-12.55,12.34-27.64,18.51-45.26,18.51\n' +
+                '\t\tc-17.41,0-32.33-6.23-44.78-18.67c-12.5-12.45-18.75-27.4-18.75-44.86c0-17.57,6.34-32.53,18.89-44.76L116.52,117.58z'
         }),
         el('path', {
-            fill: "#848587",
-            d: "M103.97,105.04c12.64-12.24,27.76-18.36,45.54-18.38v17.25c-13,0-23.81,4.43-32.62,13.29c-0.12,0.13-0.17,0.25-0.37,0.38L103.97,105.04z"
+            fill: '#848587',
+            d: 'M103.97,105.04c12.64-12.24,27.76-18.36,45.54-18.38v17.25c-13,0-23.81,4.43-32.62,13.29c-0.12,0.13-0.17,0.25-0.37,0.38L103.97,105.04z'
         })
     );
+
+    const CropIcon = el('svg', { width: 24, height: 24, viewBox: '0 0 24 24', role: 'img', focusable: 'false' },
+        el('path', {
+            d: 'M17.5 7v8H19V7c0-1.1-.9-2-2-2H9v1.5h8c.3 0 .5.2.5.5zM7 17.5c-.3 0-.5-.2-.5-.5V1H5v4H1v1.5h4V17c0 1.1.9 2 2 2h10.5v4H19v-4h4v-1.5H7z'
+        })
+    );
+
+    const initialCropIcon = function(props) {
+        switch (props.attributes.scalemode) {
+            case 'auto':
+                return AutoPos;
+            case 'centered':
+                return CenteredPos;
+            case 'product':
+                return ProductPos;
+            case 'manual':
+                return ManualPos;
+            default:
+                return CropIcon;
+        }
+    }
+
+    function cropOps(args, props) {
+        var transform = document.querySelector('#thron-preview-id-' + props.clientId + ' .th-main-container .th-media-container .th-image-player').style.transform;
+
+        var numbers = transform.split('matrix(')[1].split(')')[0].split(',').map(function(item) {
+            return parseInt(item);
+        });
+        var translateX = numbers[4];
+        var translateY = numbers[5];
+        var scale = numbers[0];
+
+        // get size of some elements (this is needed to calculate crop params for RTIE from matrix information)
+        var imageSize = document.querySelector('#thron-preview-id-' + props.clientId + ' .th-main-container .th-media-container .th-image-player img').getBoundingClientRect();
+        var playerSize = document.querySelector('#thron-preview-id-' + props.clientId).getBoundingClientRect();
+
+        // we also need the size of original image, do getcontentdetails again (player does not expose this info)
+        var url = 'https://{clientId}-view.thron.com/api/xcontents/resources/delivery/getContentDetail?clientId={clientId}&xcontentId={xcontentId}&templateId=CE1&pkey={sessId}';
+        url = url.replace(/{clientId}/g, args.clientId);
+        url = url.replace('{xcontentId}', props.attributes.contentID);
+        url = url.replace('{sessId}', args.pkey);
+
+
+        return fetch(url, {
+                method: 'GET'
+            })
+            .then(data => data.json())
+            .then(contentdetails => {
+                var originalHeight = contentdetails.content.deliverySize.maxHeight;
+                var originalWidth = contentdetails.content.deliverySize.maxWidth;
+                var cropx = (imageSize.width / 2) - Math.min(playerSize.width / 2, imageSize.width / 2) - translateX;
+                var cropy = (imageSize.height / 2) - Math.min(playerSize.height / 2, imageSize.height / 2) - translateY;
+                var cropw = Math.min(imageSize.right, playerSize.right) - Math.max(imageSize.left, playerSize.left);
+                var croph = Math.min(imageSize.bottom, playerSize.bottom) - Math.max(imageSize.top, playerSize.top);
+                var originalCropW = cropw;
+                var originalCropH = croph;
+                cropx = Math.min(imageSize.width, Math.max(0, cropx));
+                cropy = Math.min(imageSize.height, Math.max(0, cropy));
+                cropw = Math.min(imageSize.width, Math.max(0, cropw));
+                croph = Math.min(imageSize.height, Math.max(0, croph));
+                cropx = cropx * originalWidth / imageSize.width;
+                cropy = cropy * originalHeight / imageSize.height;
+                cropw = cropw * originalWidth / imageSize.width;
+                croph = croph * originalHeight / imageSize.height;
+                return {
+                    'cropx': cropx,
+                    'cropy': cropy,
+                    'cropw': cropw,
+                    'croph': croph
+                }
+            })
+    }
+
+    function wsRenderPlayer(args, props, contentID, embedCode) {
+        var rtie = null
+
+        var template = args.templateList.filter(function(value) {
+            if (value.id == props.attributes.templateID) {
+                return value
+            }
+        })
+        var tplValues = template[0].values.filter(function(v) {
+            if (v.name === 'TH-CSS-SKIN_CUSTOM') return v.value
+        })
+
+        tplValue = tplValues.length ? tplValues[0].value : 'NOVALUE'
+
+        var tplPlugins = {}
+        var tplSkins = {}
+
+        if (props.attributes.manualCropSaving) { //default template for manual
+            tplPlugins['NOVALUE'] = null
+            tplSkins['NOVALUE'] = null
+        } else {
+            tplPlugins[tplValue] = typeof template[0].jsUrl !== 'undefined' ? { 'src': template[0].jsUrl } : null
+            tplSkins[tplValue] = typeof template[0].cssUrl !== 'undefined' ? { 'src': template[0].cssUrl } : null
+        }
+
+        if (props.attributes.scalemode == 'manual' &&
+            typeof props.attributes.rtieCrop != 'undefined' &&
+            props.attributes.rtieCrop != null) {
+
+            rtie = {
+                    'cropmode': 'pixel',
+                    'quality': props.attributes.quality,
+                    'scalemode': props.attributes.scalemode,
+                    'cropx': props.attributes.rtieCrop.cropx,
+                    'cropy': props.attributes.rtieCrop.cropy,
+                    'cropw': props.attributes.rtieCrop.cropw,
+                    'croph': props.attributes.rtieCrop.croph,
+                    'enhance': 'brightness:' + (props.attributes.brightness + 100) + ',contrast:' + (props.attributes.contrast + 100) + ',sharpness:' + (props.attributes.sharpness + 100) + ',color:' + (props.attributes.color + 100)
+                }
+                /*props.setAttributes({
+                    manualCropSaving: false,
+                });*/
+        } else {
+            rtie = {
+                'cropmode': 'pixel',
+                'quality': props.attributes.quality,
+                'scalemode': props.attributes.scalemode,
+                'enhance': 'brightness:' + (props.attributes.brightness + 100) + ',contrast:' + (props.attributes.contrast + 100) + ',sharpness:' + (props.attributes.sharpness + 100) + ',color:' + (props.attributes.color + 100)
+            }
+        }
+
+
+
+        var options = {
+            'plugins': tplPlugins,
+            'skins': tplSkins,
+            'clientId': args.clientId,
+            'xcontentId': contentID,
+            'sessId': args.pkey,
+            /*'embedCodeId': embedCode,*/
+            'ignoreUserBehavior': true,
+            'rtie': rtie,
+            'useCache': false
+        };
+
+        var isContainerEmpty = document.getElementById('thron-preview-id-' + props.clientId)?.innerHTML === "";
+        if ((typeof thePlayer[props.clientId] !== 'undefined' && destroy) || isContainerEmpty) {
+            thePlayer[props.clientId]?.destroy()
+            destroy = false;
+        }
+        thePlayer[props.clientId] = THRONContentExperience('thron-preview-id-' + props.clientId, options);
+
+        if (props.attributes.scalemode == 'manual' && props.attributes.manualCropSaving) {
+
+
+
+            // prima di generare il player gestisco la rimozione dei tasti non necessari
+            thePlayer[props.clientId].on('beforeInit',
+                function(playerInstance) {
+
+                    var schema = window.THRONSchemaHelper.getSchema();
+                    //configure the position of the button
+                    var elements = window.THRONSchemaHelper.removeElementsById(schema, 'IMAGE', 'captionText', 'shareButton', 'downloadableButton', 'zoomText', 'fullscreenButton');
+                    var params = playerInstance.params()
+                    params['bars'] = schema
+                        //add params
+                    playerInstance.params(params);
+                }
+            );
+            // quando il player e pronto inserisco la griglia a video
+            thePlayer[props.clientId].on('ready', function(playerInstance) {
+                //create div grid
+                var mediaContainer = thePlayer[props.clientId].mediaContainer();
+                var newNode = document.createElement('div');
+                newNode.className = 'th-wrapper-grid';
+                //generate box
+                for (i = 0; i < 9; i++) {
+                    var newNodeGrid = document.createElement('div');
+                    newNodeGrid.className = 'th-wrapper-grid-box';
+                    newNode.appendChild(newNodeGrid)
+                }
+                //add div grid
+                mediaContainer.appendChild(newNode)
+            })
+        }
+    }
+
+
+    var debouncedRenderPlayer = _.debounce(function(args, props, contentID, embedCode) {
+        wsRenderPlayer(args, props, contentID, embedCode)
+    }, 300)
+
 
     blocks.registerBlockType('thron/embed-player-block', {
@@ -40 +344 @@
         },
         attributes: {
+            initPlayer: {
+                type: 'boolean',
+                default: true
+            },
+            dropDownCropIcon: {
+                type: 'string',
+                default: null
+            },
+            manualCropSaving: {
+                type: 'boolean',
+                default: false
+            },
             isOpen: {
                 type: 'boolean',
@@ -68 +384 @@
                 default: null
             },
-
+            scalemode: {
+                type: 'string',
+                default: null
+            },
+            currentScaleMode: {
+                type: 'string',
+                default: null
+            },
+            rtieCrop: {
+                cropx: {
+                    type: 'number',
+                    default: 0
+                },
+                cropy: {
+                    type: 'number',
+                    default: 0
+                },
+                cropw: {
+                    type: 'number',
+                    default: 0
+                },
+                croph: {
+                    type: 'number',
+                    default: 0
+                }
+            },
+            quality: {
+                type: 'number',
+                default: 90
+            },
+            brightness: {
+                type: 'number',
+                default: 0
+            },
+            contrast: {
+                type: 'number',
+                default: 0
+            },
+            sharpness: {
+                type: 'number',
+                default: 0
+            },
+            color: {
+                type: 'number',
+                default: 0
+            },
 
             /**
@@ -109 +470 @@
                 default: null
             },
+            initMediaType: {
+                type: 'string',
+                default: null
+            },
             folders: {
                 type: 'string',
@@ -118 +483 @@
         },
 
-        edit: function (props) {
+        edit: function(props) {
+
             var attributes = props.attributes;
             var listTemplate = [];
@@ -128 +494 @@
             var listFolders = [
                 el(
-                    'option',
-                    {
+                    'option', {
                         value: ''
                     },
@@ -136 +501 @@
             ];
 
-            _.each(args.templateList, function (value) {
+            function setMediaType(props) {
+                THRON.init({
+                    clientId: myAjax.thron_clientId,
+                    appId: myAjax.thron_appId,
+                    appKey: myAjax.thron_appKey
+                }).then(function() {
+                    THRON.callApi(
+                            'GET',
+                            '/xcontents/resources/delivery/getContentDetail?clientId=' + myAjax.thron_clientId + '&xcontentId=' + props.attributes.contentID
+                        )
+                        .then(function(response) {
+                            props.setAttributes({
+                                mediaType: response.content.contentType
+                            });
+                        });
+                });
+            }
+
+            _.each(args.templateList, function(value) {
                 listTemplate.push({
-                        value: value.id,
-                        label: value.name
-                    }
-                )
+                    value: value.id,
+                    label: value.name
+                })
             });
+
+            props.isSelected && props.attributes.mediaType == null && props.attributes.contentID != null &&
+                setMediaType(props);
 
             filters.push(
@@ -148 +533 @@
                         className: 'attachment-filters',
                         id: 'media-type',
-                        onChange: function (event) {
+                        onChange: function(event) {
                             search(event)
                         }
                     },
                     el(
-                        'option',
-                        {
+                        'option', {
                             value: ''
                         },
@@ -160 +544 @@
                     ),
                     el(
-                        'option',
-                        {
-                            value: 'IMAGE'
-                        },
-                        i18n.__('Image', 'thron')
+                        'option', {
+                            value: 'VIDEO'
+                        },
+                        i18n.__('Videos', 'thron')
                     ),
                     el(
-                        'option',
-                        {
-                            value: 'VIDEO'
-                        },
-                        i18n.__('Video', 'thron')
-                    ),
-                    el(
-                        'option',
-                        {
+                        'option', {
                             value: 'AUDIO'
                         },
@@ -181 +556 @@
                     ),
                     el(
-                        'option',
-                        {
+                        'option', {
+                            value: 'IMAGE'
+                        },
+                        i18n.__('Images', 'thron')
+                    ),
+                    el(
+                        'option', {
+                            value: 'OTHER'
+                        },
+                        i18n.__('Document (Other)', 'thron')
+                    ),
+                    el(
+                        'option', {
                             value: 'PLAYLIST'
                         },
@@ -188 +574 @@
                     ),
                     el(
-                        'option',
-                        {
-                            value: 'OTHER'
-                        },
-                        i18n.__('Other', 'thron')
+                        'option', {
+                            value: 'URL'
+                        },
+                        i18n.__('URL', 'thron')
+                    ),
+                    el(
+                        'option', {
+                        value: 'PAGELET'
+                        },
+                        i18n.__('Pagelet', 'thron')
                     )
                 )
             );
 
-            _.each(args.folders, function (value) {
+            _.each(args.folders, function(value) {
 
                 listFolders.push(
                     el(
-                        'option',
-                        {
+                        'option', {
                             value: value.id
                         },
@@ -214 +604 @@
                         className: 'attachment-filters',
                         id: 'folders',
-                        onChange: function (event) {
+                        onChange: function(event) {
                             search(event)
                         }
@@ -223 +613 @@
             );
 
-            _.each(args.tagsFilter, function (tagList) {
+            _.each(args.tagsFilter, function(tagList) {
 
                 var options = [
                     el(
-                        'option',
-                        {
+                        'option', {
                             value: ''
                         },
@@ -235 +624 @@
                 ];
 
-                _.each(tagList.list, function (value) {
+                _.each(tagList.list, function(value) {
                     options.push(
                         el(
-                            'option',
-                            {
+                            'option', {
                                 value: value.id
                             },
@@ -251 +639 @@
                             className: 'attachment-filters',
                             id: 'tag-' + tagList.id,
-                            onChange: function (event) {
+                            onChange: function(event) {
                                 search(event);
                             }
@@ -260 +648 @@
             });
 
-            var getEmbedCode = function () {
+            var getEmbedCode = function() {
+
+
 
                 if ((templateID != null) && (contentID != null)) {
 
-                    const title = select("core/editor").getEditedPostAttribute('title') != '' ? select("core/editor").getEditedPostAttribute('title') : 'post-id-' + select("core/editor").getEditedPostAttribute('id');
+                    const title = select('core/editor').getEditedPostAttribute('title') != '' ? select('core/editor').getEditedPostAttribute('title') : 'post-id-' + select('core/editor').getEditedPostAttribute('id');
 
                     /**
@@ -271 +661 @@
                      */
                     this.api = THRON.init({
-                        clientId: myAjax.thron_clientId,
-                        appId: myAjax.thron_appId,
-                        appKey: myAjax.thron_appKey
-                    })
-                        .then(function () {
+                            clientId: myAjax.thron_clientId,
+                            appId: myAjax.thron_appId,
+                            appKey: myAjax.thron_appKey
+                        })
+                        .then(function() {
                             if (embedCode) {
+                                if (templateID !== '') {
+                                    var tplObj = {
+                                        'templateId': templateID,
+                                        'templateType': 'CUSTOM'
+                                    }
+                                } else {
+                                    var tplObj = {
+                                        'templateId': 'CE1',
+                                        'templateType': 'PLATFORM',
+                                        'templateVersion': null
+                                    }
+                                }
                                 THRON.callApi(
-                                    "POST",
-                                    "/xcontents/resources/playerembedcode/update/" + myAjax.thron_clientId,
-                                    {
-                                        body: {
-                                            "embedCodeId": embedCode,
-                                            "source": {
-                                                "id": contentID,
-                                                "entityType": "CONTENT"
-                                            },
-                                            "update": {
-                                                "name": title,
-                                                "template": {
-                                                    "templateId": templateID,
-                                                    "templateType": "CUSTOM"
+                                        'POST',
+                                        '/xcontents/resources/playerembedcode/update/' + myAjax.thron_clientId, {
+                                            body: {
+                                                'embedCodeId': embedCode,
+                                                'source': {
+                                                    'id': contentID,
+                                                    'entityType': 'CONTENT'
                                                 },
-                                                "enabled": true
+                                                'update': {
+                                                    'name': title,
+                                                    'template': tplObj,
+                                                    'enabled': true
+                                                }
                                             }
-                                        }
-                                    })
-                                    .then(function (response) {
+                                        })
+                                    .then(function(response) {
 
                                         embedCode = response.item.id;
@@ -307 +705 @@
                             } else {
                                 THRON.callApi(
-                                    "POST",
-                                    "/xcontents/resources/playerembedcode/insert/" + myAjax.thron_clientId,
-                                    {
-                                        body: {
-                                            "skipPkeyCreation": true,
-                                            "source": {
-                                                "id": contentID,
-                                                "entityType": "CONTENT"
-                                            },
-                                            "value": {
-                                                "name": title,
-                                                "template": {
-                                                    "templateId": templateID,
-                                                    "templateType": "CUSTOM"
+                                        'POST',
+                                        '/xcontents/resources/playerembedcode/insert/' + myAjax.thron_clientId, {
+                                            body: {
+                                                'skipPkeyCreation': true,
+                                                'source': {
+                                                    'id': contentID,
+                                                    'entityType': 'CONTENT'
                                                 },
-                                                "enabled": true
+                                                'value': {
+                                                    'name': title,
+                                                    'template': {
+                                                        'templateId': templateID,
+                                                        'templateType': 'CUSTOM'
+                                                    },
+                                                    'enabled': true
+                                                }
                                             }
-                                        }
-                                    })
-                                    .then(function (response) {
+                                        })
+                                    .then(function(response) {
 
                                         embedCode = response.item.id;
@@ -339 +736 @@
             };
 
-            var search = function (event) {
+            var requestId = -1;
+
+            var search = function(event, append) {
                 var search = attributes.searchString;
                 var folders = attributes.folders;
@@ -355 +754 @@
 
                         props.setAttributes({
-                            mediaType: mediaType,
+                            //mediaType: mediaType,
                             searchResult: searchResult
                         });
@@ -383 +782 @@
                     var id = event.target.id.substring(4).split(';');
 
-                    _.each(tags, function (tag) {
+                    _.each(tags, function(tag) {
                         if (id[1] !== tag.parent) {
                             new_tags.push(tag);
@@ -422 +821 @@
                     appId: myAjax.thron_appId,
                     appKey: myAjax.thron_appKey
-                }).then(function () {
+                }).then(function() {
 
                     var body = {};
@@ -430 +829 @@
                         body.criteria.lemma = {};
                         body.criteria.lemma.text = search;
-                        body.criteria.lemma.textMatch = "any_word_match";
+                        body.criteria.lemma.textMatch = 'any_word_match';
                     }
 
@@ -449 +848 @@
                         body.criteria.itag.haveAll = [];
 
-                        _.each(tags, function (tag) {
+                        _.each(tags, function(tag) {
                             if (tag.id != '') {
                                 body.criteria.itag.haveAll.push({
@@ -467 +866 @@
                     body.responseOptions = new Object();
                     body.responseOptions.resultsPageSize = 50;
-                    body.responseOptions.returnDetailsFields = new Array("locales", "source");
-
+                    body.responseOptions.returnDetailsFields = new Array('locales', 'source');
+
+                    var currentRequestId = ++requestId;
                     THRON.callApi(
-                        "POST",
-                        "/xcontents/resources/content/search/" + myAjax.thron_clientId,
-                        {body: body}
-                    ).then(function (response) {
+                        'POST',
+                        '/xcontents/resources/content/search/' + myAjax.thron_clientId, { body: body }
+                    ).then(function(response) {
+                        if (currentRequestId !== requestId) {
+                            return;
+                        }
 
                         nextPageToken = response.nextPageToken;
 
-                        var output = searchResult.concat(new Array());
-
-                        _.each(response.items, function (value) {
+                        var output = append ? searchResult.concat(new Array()) : [];
+
+                        if (response.items.length === 0 && !append) {
+                            output.push(
+                                el('div', {
+                                        className: 'empty-results',
+                                    },
+                                    i18n.__('No result for this search', 'thron'),
+                                )
+                            );
+                        }
+
+                        _.each(response.items, function(value) {
 
 
                             var local_language = value.details.locales[0];
 
-                            _.each(value.details.locales, function (lang) {
+                            _.each(value.details.locales, function(lang) {
                                 if (lang.locale == 'EN')
                                     local_language = lang;
                             });
-                            _.each(value.details.locales, function (lang) {
+                            _.each(value.details.locales, function(lang) {
                                 if (lang.locale == args.wp_language)
                                     local_language = lang;
@@ -494 +906 @@
 
                             output.push(
-                                el('div',
-                                    {
+                                el('div', {
                                         className: 'content',
                                         'data-id': value.id,
-                                        onClick: function (event) {
+                                        onClick: function(event) {
                                             var id = null;
                                             var content = null;
-
-                                            _.each(document.getElementsByClassName('content'), function (item) {
+                                            _.each(document.getElementsByClassName('content'), function(item) {
                                                 if (item.classList.contains('selected'))
                                                     item.classList.remove('selected');
                                             });
-
-                                            if (event.target.tagName == 'IMG') {
-                                                id = event.target.parentElement.getAttribute('data-id');
-
-                                                content = event.target.parentElement;
+                                            content = event.currentTarget;
+                                            id = content.getAttribute('data-id');
+                                            if (content.classList.contains('selected')) {
+                                                content.classList.remove('selected');
                                             } else {
-                                                id = event.target.parentElement.parentElement.getAttribute('data-id');
-
-                                                content = event.target.parentElement.parentElement;
+                                                content.classList.add('selected');
                                             }
-
-                                            if (content.classList.contains('selected'))
-                                                content.classList.remove('selected');
-                                            else
-                                                content.classList.add('selected');
-
-                                            if (id == null)
+                                            if (id == null) {
                                                 return;
-
+                                            }
                                             props.setAttributes({
                                                 tmpContentID: id,
+                                                initMediaType: value.contentType
                                             });
                                         }
                                     },
-                                    el('img',
-                                        {
+                                    el('picture', {},
+                                        el('img', {
                                             className: 'thumb_img',
                                             src: 'https://' + myAjax.thron_clientId + '-view.thron.com/api/xcontents/resources/delivery/getThumbnail/' + myAjax.thron_clientId + '/200x150/' + value.id + '?scalemode=auto'
-                                        }
+                                        }),
                                     ),
-                                    el('div',
-                                        {
+                                    el('div', {
                                             className: 'label'
                                         },
-                                        el('span',
-                                            {
-                                                className: 'thron-type',
-                                                'data-value': value.contentType
-                                            }
-                                        ),
-                                        el('span',
-                                            {
+                                        el('span', {
+                                            className: 'thron-type',
+                                            'data-value': value.contentType
+                                        }),
+                                        el('span', {
                                                 className: 'thron-extension'
                                             },
-                                            typeof value.details.source != "undefined" ? value.details.source.extension : null
+                                            typeof value.details.source !== 'undefined' ? value.details.source.extension : value.contentType
                                         ),
-                                        el('span',
-                                            {
+                                        el('span', {
                                                 className: 'thron-label'
                                             },
                                             local_language.name
                                         ),
-                                        local_language.name
                                     )
                                 )
@@ -564 +960 @@
                         });
 
-                        ThronListHeight();
                         props.setAttributes({
                             searchResult: output,
@@ -575 +970 @@
             };
 
-            if (embedCode != null) {
-                var options = {
-                    "clientId": args.clientId,
-                    "xcontentId": contentID,
-                    "sessId": args.pkey,
-                    "embedCodeId": embedCode,
-                    "ignoreUserBehavior": true
-                };
-
-                console.log(options);
-
-                THRONContentExperience("thron-preview-id-" + props.clientId, options);
+
+            if (typeof thePlayer[props.clientId] !== 'undefined') {
+                debouncedRenderPlayer(args, props, contentID, embedCode)
+            } else {
+                if (contentID) wsRenderPlayer(args, props, contentID, embedCode)
             }
 
             var searchResult = attributes.searchResult;
+
             var more = [];
 
             if (nextPageToken != null) {
                 more = [
-                    el(components.Button,
-                        {
+                    el(components.Button, {
                             id: 'thron-more',
-                            onClick: function (event) {
-                                search(event)
+                            onClick: function(event) {
+                                search(event, true)
                             }
                         },
@@ -606 +994 @@
             }
 
-            var closeModal = function () {
+            var closeModal = function() {
                 searchResult = new Array();
                 folders = null;
                 tags = null;
+                searchString = null;
                 nextPageToken = null;
-                mediaType = null;
 
                 props.setAttributes({
@@ -618 +1006 @@
                     folders: null,
                     tags: null,
+                    searchString: null,
                     nextPageToken: null,
-                    mediaType: null
                 });
             }
@@ -625 +1013 @@
             var dimension = new Array();
             if (props.attributes.embedType != 'responsive') {
-                dimension.push(el(components.TextControl,
-                    {
+                dimension.push(el(components.TextControl, {
                         label: i18n.__('Width (px)', 'thron'),
                         type: 'number',
                         help: '',
-                        onChange: function (width) {
+                        onChange: function(width) {
 
                             var aspectRatio;
@@ -639 +1026 @@
                             aspectRatio = (maxWidth && maxHeight) ? maxHeight / maxWidth : null;
 
-                            props.setAttributes({width: parseInt(width, 10)});
+                            props.setAttributes({ width: parseInt(width, 10) });
 
                             if (aspectRatio && props.attributes.keepProportions) {
                                 height = Math.round(width * aspectRatio);
-                                props.setAttributes({height: parseInt(height, 10)});
+                                props.setAttributes({ height: parseInt(height, 10) });
                             }
+                            destroy = true;
                         },
                         value: props.attributes.width
-                    }
-                    ),
-                    el(components.TextControl,
-                        {
-                            label: i18n.__('Height (px)', 'thron'),
-                            type: 'number',
-                            help: '',
-                            onChange: function (height) {
-
-                                var aspectRatio;
-
-                                var maxWidth = props.attributes.maxWidth;
-                                var maxHeight = props.attributes.maxHeight;
-
-                                aspectRatio = (maxWidth && maxHeight) ? maxHeight / maxWidth * 100 : null;
-
-                                props.setAttributes({height: parseInt(height, 10)});
-
-                                if (aspectRatio && props.attributes.keepProportions) {
-                                    width = Math.round(height / aspectRatio * 100);
-                                    props.setAttributes({width: parseInt(width, 10)});
-                                }
-
-
-                            },
-                            value: props.attributes.height
-                        }
-                    ),
-                    el(components.CheckboxControl,
-                        {
-                            label: i18n.__('Maintain aspect ratio', 'thron'),
-                            onChange: (value) => {
-                                props.setAttributes({keepProportions: value});
-                            },
-                            checked: props.attributes.keepProportions,
-                        }
-                    ),
+                    }),
+                    el(components.TextControl, {
+                        label: i18n.__('Height (px)', 'thron'),
+                        type: 'number',
+                        help: '',
+                        onChange: function(height) {
+
+                            var aspectRatio;
+
+                            var maxWidth = props.attributes.maxWidth;
+                            var maxHeight = props.attributes.maxHeight;
+
+                            aspectRatio = (maxWidth && maxHeight) ? maxHeight / maxWidth * 100 : null;
+
+                            props.setAttributes({ height: parseInt(height, 10) });
+
+                            if (aspectRatio && props.attributes.keepProportions) {
+                                width = Math.round(height / aspectRatio * 100);
+                                props.setAttributes({ width: parseInt(width, 10) });
+                            }
+                            destroy = true;
+
+                        },
+                        value: props.attributes.height
+                    }),
+                    el(components.CheckboxControl, {
+                        label: i18n.__('Maintain aspect ratio', 'thron'),
+                        onChange: (value) => {
+                            props.setAttributes({ keepProportions: value });
+                        },
+                        checked: props.attributes.keepProportions,
+                    }),
                 )
             }
 
+            /*thron toolbar / dropdown crop opt*/
+            const thronCustomToolbar = el(BlockControls, { key: 'controls', className: 'components-accessible-toolbar block-editor-block-contextual-toolbar' },
+                (props.attributes.scalemode != 'manual' || !props.attributes.manualCropSaving) &&
+                // Non appare finche non c'e il contenuto
+                props.attributes.contentID != null &&
+                el('div', { className: 'components-toolbar' },
+                    el(MenuItem, {
+                        icon: 'edit',
+                        onClick: function(event) {
+                            props.setAttributes({
+                                isOpen: true,
+                            });
+
+                            search(event)
+                        }
+                    })
+                ),
+                props.attributes.mediaType == 'IMAGE' && props.attributes.contentID != null &&
+                // Quando siamo in 'modalità crop' faccio sparire anche la dropdown (come nel blocco immagine standard)
+                (props.attributes.scalemode != 'manual' || !props.attributes.manualCropSaving) &&
+                el(DropDownMenu, {
+                    className: 'components-toolbar components-button components-dropdown-menu__toggle has-icon',
+                    icon: initialCropIcon(props),
+                    title: 'Crop',
+                    'aria-label': 'Crop',
+                    label: 'Crop',
+                    controls: [{
+                            title: 'Auto',
+                            icon: props.attributes.scalemode === 'auto' ? AutoNeg : AutoPos,
+                            //isDisabled: props.attributes.scalemode === 'auto',
+                            onClick: function() {
+                                props.setAttributes({
+                                    dropDownCropIcon: props.attributes.scalemode !== 'auto' ? AutoPos : CropIcon,
+                                    scalemode: props.attributes.scalemode !== 'auto' ? 'auto' : null,
+                                    rtieCrop: null,
+                                    currentScaleMode: props.attributes.scalemode !== 'auto' ? 'auto' : null
+                                });
+                                destroy = true;
+                            },
+                        },
+                        {
+                            title: 'Centered',
+                            icon: props.attributes.scalemode === 'centered' ? CenteredNeg : CenteredPos,
+                            //isDisabled: props.attributes.scalemode === 'centered',
+                            onClick: function() {
+                                props.setAttributes({
+                                    dropDownCropIcon: props.attributes.scalemode !== 'centered' ? CenteredPos : CropIcon,
+                                    scalemode: props.attributes.scalemode !== 'centered' ? 'centered' : null,
+                                    rtieCrop: null,
+                                    currentScaleMode: props.attributes.scalemode !== 'centered' ? 'centered' : null
+                                });
+
+                                destroy = true;
+                            },
+                        },
+                        {
+                            title: 'Product',
+                            icon: props.attributes.scalemode === 'product' ? ProductNeg : ProductPos,
+                            //isDisabled: props.attributes.scalemode === 'product',
+                            onClick: function() {
+                                props.setAttributes({
+                                    dropDownCropIcon: props.attributes.scalemode !== 'product' ? ProductPos : CropIcon,
+                                    scalemode: props.attributes.scalemode !== 'product' ? 'product' : null,
+                                    rtieCrop: null,
+                                    currentScaleMode: props.attributes.scalemode !== 'product' ? 'product' : null
+                                });
+                                destroy = true;
+                            },
+                        },
+                        {
+                            title: 'Manual',
+                            icon: props.attributes.scalemode === 'manual' ? ManualNeg : ManualPos,
+                            onClick: function() {
+                                props.setAttributes({
+                                    manualCropSaving: props.attributes.scalemode !== 'manual' ? true : false,
+                                    scalemode: props.attributes.scalemode !== 'manual' ? 'manual' : null,
+                                    rtieCrop: null
+                                });
+                                destroy = true;
+                            },
+                        }
+                    ]
+                }),
+                props.attributes.mediaType == 'IMAGE' &&
+                props.attributes.manualCropSaving && props.attributes.scalemode == 'manual' &&
+                el('div', { className: 'components-toolbar-group' },
+                    el('input', {
+                        type: 'button',
+                        value: i18n.__('Apply', 'thron'),
+                        className: 'components-button components-toolbar-button thronButton',
+                        onClick: function(event) {
+                            cropOps(args, props)
+                                .then(props)
+                                .then(data => {
+                                    props.setAttributes({
+                                        dropDownCropIcon: ManualPos,
+                                        manualCropSaving: false,
+                                        rtieCrop: data,
+                                        currentScaleMode: 'product'
+                                    })
+                                })
+                            destroy = true;
+                        }
+                    }),
+                    el('input', {
+                        type: 'button',
+                        value: i18n.__('Cancel', 'thron'),
+                        className: 'components-button components-toolbar-button thronButton',
+                        onClick: function(event) {
+                            props.setAttributes({
+                                manualCropSaving: false,
+                                scalemode: props.attributes.currentScaleMode
+                            });
+                            destroy = true;
+                        }
+                    }),
+                )
+            );
+
             return [
-                el('div',
-                    {
+                el('div', {
                         className: props.className
                     },
-                    el('div',
-                        {
-                            className: ''
-                        },
-                        !attributes.mediaID &&
+
+                    /*thron custom toolbar*/
+                    thronCustomToolbar,
+
+                    el('div', {
+                            className: contentID ? 'block-editor-media-placeholder is-large thron-block' : 'components-placeholder block-editor-media-placeholder is-large thron-block'
+                        }, !contentID &&
+                        el('div', {
+                                className: 'components-placeholder__label'
+                            },
+                            el('span', {
+                                    className: 'block-editor-block-icon block-editor-block-switcher__toggle has-colors'
+                                },
+                                THRONLogo
+                            ),
+                            i18n.__('Select a content from THRON', 'thron')
+                        ), !contentID &&
+                        el('div', {
+                                className: 'components-placeholder__instructions'
+                            },
+                            i18n.__('Choose a content from your THRON Library.', 'thron')
+                        ), !contentID &&
                         el(components.Button, {
-                                className: 'button button-large aligncenter',
+                                className: 'components-button block-editor-media-placeholder__button block-editor-media-placeholder__upload-button is-primary',
                                 id: 'thron-open-modal-button',
-                                onClick: function (event) {
+                                onClick: function(event) {
                                     props.setAttributes({
                                         isOpen: true,
@@ -708 +1226 @@
                                 }
                             },
-                            i18n.__('Select content', 'thron')
-                        ),
+                            i18n.__('Select a content', 'thron')
+                        ), !props.isSelected && contentID &&
                         el('div', {
-                                id: "thron-preview-id-" + props.clientId + '-wrapper',
+                            className: 'thron-block-overlay'
+                        }, ),
+                        el('div', {
+                                id: 'thron-preview-id-' + props.clientId + '-wrapper',
                             },
                             el('div', {
-                                id: "thron-preview-id-" + props.clientId,
+                                id: 'thron-preview-id-' + props.clientId,
                                 className: 'thron-block-preview'
                             })
@@ -720 +1241 @@
                         el('style', {},
                             (props.attributes.embedType == 'responsive') ?
-                                "#thron-preview-id-" + props.clientId + '{ width: 100%; height:100%; position: absolute; top: 0} ' +
-                                "#thron-preview-id-" + props.clientId + '-wrapper {padding-top:' + (attributes.maxHeight / attributes.maxWidth * 100 ) + '%; width: 100%; position: relative}'
-                                : "#thron-preview-id-" + props.clientId + '{ width: ' + attributes.width + 'px; height: ' + attributes.height + 'px; } '
+                            '#thron-preview-id-' + props.clientId + '{ width: 100%; height:100%; position: absolute; top: 0} ' +
+                            '#thron-preview-id-' + props.clientId + '-wrapper {padding-top:' + (attributes.maxHeight / attributes.maxWidth * 100) + '%; width: 100%; position: relative}' :
+                            '#thron-preview-id-' + props.clientId + '{ width: ' + attributes.width + 'px; height: ' + attributes.height + 'px; } '
                         ),
 
+                        //!props.isSelected && props.attributes.scalemode == 'manual' &&
+                        props.isSelected && props.attributes.scalemode == 'manual' &&
+                        el('div', {
+                            className: 'components-placeholder__label'
+                        }, ),
                         // Modal
                         attributes.isOpen &&
                         el(components.Modal, {
-                                title: i18n.__('Select content from THRON', 'thron'),
+                                title: i18n.__('Select a content from THRON', 'thron'),
                                 className: 'thron-block-modal',
                                 onRequestClose: closeModal
                             },
-                            //Header modal
-                            el('div',
-                                {
-                                    className: 'wsthron-header'
+                            //Media Content
+                            el('div', {
+                                    className: 'thron-block',
+                                    id: 'thron_content',
                                 },
+                                //Header modal
                                 el('div', {
-                                        className: 'media-toolbar-primary search-form',
-                                    },
-                                    el('label', {
-                                            className: 'media-search-input-label',
-                                            htmlFor: 'media-search-input'
-                                        },
-                                        i18n.__('Search', 'thron')
-                                    ),
-                                    el('input', {
-                                            className: 'search',
-                                            id: 'media-search-input',
-                                            onChange: search
-                                        }
-                                    ),
-                                ),
-                                el('div', {
-                                        className: 'media-toolbar'
+                                        className: 'media-toolbar wsthron-header',
+                                        id: 'thron_toolbar',
                                     },
                                     el('div', {
@@ -761 +1273 @@
                                         filters,
                                     ),
+                                    el('div', {
+                                            className: 'media-toolbar-primary search-form',
+                                        },
+                                        el('label', {
+                                                className: 'media-search-input-label',
+                                                htmlFor: 'media-search-input'
+                                            },
+                                            i18n.__('Search', 'thron')
+                                        ),
+                                        el('input', {
+                                            className: 'search',
+                                            id: 'media-search-input',
+                                            onChange: search
+                                        }),
+                                    ),
+                                ),
+                                //End Header modal
+                                // Search result
+                                el('div', {
+                                        id: 'thron_list',
+                                        class: 'td-content-grid',
+                                        onScroll: function(event) {
+                                            var scrollTop = document.getElementById('thron_list').scrollTop
+                                            var scrollHeight = document.getElementById('thron_list').scrollHeight
+                                            var clientHeight = document.getElementById('thron_list').clientHeight
+                                            if (scrollTop + clientHeight === scrollHeight) {
+                                                if (typeof attributes.nextPageToken !== null && typeof attributes.nextPageToken !== 'undefined') {
+                                                    search(event, true);
+                                                }
+                                            }
+                                        }
+                                    },
+                                    searchResult
+                                ),
+                                el('div', {
+                                        class: 'modal-footer media-toolbar-primary search-form'
+                                    },
+                                    el(components.Button, {
+                                            className: 'button button-large media-button media-button-insert',
+                                            onClick: function() {
+
+                                                /**
+                                                 * if the content is changed it starts the sequence to change
+                                                 * the embed code
+                                                 */
+                                                if (attributes.tmpContentID != contentID) {
+
+                                                    embedCode = null;
+
+                                                    props.setAttributes({ embedCode: embedCode });
+
+                                                    contentID = attributes.tmpContentID;
+
+                                                    /**
+                                                     * Request content detils
+                                                     */
+                                                    THRON.callApi(
+                                                            'GET',
+                                                            '/xcontents/resources/delivery/getContentDetail?clientId=' + myAjax.thron_clientId + '&xcontentId=' + contentID
+                                                        )
+                                                        .then(function(response) {
+
+                                                            deliverySize = response.content.deliverySize.aspectRatio.split(':');
+
+                                                            props.setAttributes({
+                                                                maxWidth: parseInt(deliverySize[0], 10),
+                                                                maxHeight: parseInt(deliverySize[1], 10),
+                                                            });
+                                                        });
+
+                                                    props.setAttributes({
+                                                        contentID: contentID,
+                                                    });
+
+                                                    getEmbedCode();
+                                                }
+
+                                                // Close Modal Frame
+                                                closeModal();
+
+                                                props.setAttributes({
+                                                    mediaType: props.attributes.initMediaType,
+                                                    //searchResult: searchResult
+                                                });
+
+                                            }
+                                        },
+                                        i18n.__('Insert content', 'thron')
+                                    ),
                                 ),
                             ),
-
-                            //End Header modal
-
-                            // Search result
-                            el('div',
-                                {
-                                    class: 'wsthron'
-                                },
-                                el('div', {
-                                        id: 'thron_list',
-                                        class: 'td-content-grid'
-                                    },
-                                    searchResult,
-                                    more
-                                ),
-                            ),
-                            el('div',
-                                {
-                                    class: 'modal-footer media-toolbar-primary search-form'
-                                },
-                                el(components.Button, {
-                                        className: 'button button-large media-button media-button-insert',
-                                        onClick: function () {
-
-                                            /**
-                                             * if the content is changed it starts the sequence to change
-                                             * the embed code
-                                             */
-                                            if (attributes.tmpContentID != contentID) {
-
-                                                embedCode = null;
-
-                                                props.setAttributes({embedCode: embedCode});
-
-                                                contentID = attributes.tmpContentID;
-
-                                                /**
-                                                 * Request content detils
-                                                 */
-                                                THRON.callApi(
-                                                    "GET",
-                                                    "/xcontents/resources/delivery/getContentDetail?clientId=" + myAjax.thron_clientId + "&xcontentId=" + contentID
-                                                )
-                                                    .then(function (response) {
-
-                                                        deliverySize = response.content.deliverySize.aspectRatio.split(':');
-
-                                                        props.setAttributes({
-                                                            maxWidth: parseInt(deliverySize[0], 10),
-                                                            maxHeight: parseInt(deliverySize[1], 10),
-                                                        });
-                                                    });
-
-                                                props.setAttributes({
-                                                    contentID: contentID,
-                                                });
-
-                                                getEmbedCode();
-                                            }
-
-                                            // Close Modal Frame
-                                            closeModal();
-                                        }
-                                    },
-                                    i18n.__('Insert content', 'thron')
-                                ),
-                            )
                         ),
                         // End Modal
 
+
+
                         // SideBar
-                        el(InspectorControls, {key: 'inspector'}, // Display the block options in the inspector panel.
+                        el(InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel.
                             el(PanelBody, {
                                     title: i18n.__('THRON OPTION', 'thron'),
@@ -840 +1376 @@
                                     initialOpen: true
                                 },
-                                el(components.SelectControl,
-                                    {
-                                        label: i18n.__('Select template', 'thron'),
-                                        options: listTemplate,
-                                        onChange: (value) => {
-                                            templateID = value;
-
-                                            props.setAttributes({templateID: templateID});
-
-                                            getEmbedCode();
+                                el(components.SelectControl, {
+                                    label: i18n.__('Select template', 'thron'),
+                                    options: listTemplate,
+                                    onChange: (value) => {
+                                        templateID = value;
+
+                                        props.setAttributes({ templateID: templateID });
+
+                                        getEmbedCode();
+
+                                        destroy = true;
+                                    },
+                                    value: props.attributes.templateID
+                                }),
+                                el(components.SelectControl, {
+                                    label: i18n.__('Select embed type', 'thron'),
+                                    options: [{
+                                            label: i18n.__('Responsive', 'thron'),
+                                            value: 'responsive',
                                         },
-                                        value: props.attributes.templateID
-                                    }
-                                ),
-                                el(components.SelectControl,
-                                    {
-                                        label: i18n.__('Select embed type', 'thron'),
-                                        options: [
-                                            {
-                                                label: i18n.__('Responsive', 'thron'),
-                                                value: 'responsive',
-                                            },
-                                            {
-                                                label: i18n.__('Fixed', 'thron'),
-                                                value: 'fixed'
-                                            },
-                                        ],
-                                        onChange: (value) => {
-                                            props.setAttributes({embedType: value});
+                                        {
+                                            label: i18n.__('Fixed', 'thron'),
+                                            value: 'fixed'
                                         },
-                                        value: props.attributes.embedType
-                                    }
-                                ),
+                                    ],
+                                    onChange: (value) => {
+                                        props.setAttributes({ embedType: value });
+                                    },
+                                    value: props.attributes.embedType
+                                }),
                                 dimension
                             ),
+                            /* props.attributes.mediaType == 'IMAGE' &&
+                            el(PanelBody, {
+                                    title: i18n.__('RTIE Params', 'thron'),
+                                    className: '',
+                                    initialOpen: true
+                                },
+                            ), */
+                            props.attributes.mediaType == 'IMAGE' &&
+                            el(PanelBody, {
+                                    title: i18n.__('Image adjustments', 'thron'),
+                                    className: '',
+                                    initialOpen: true
+                                },
+                                el(components.RangeControl, {
+                                    label: i18n.__('Quality', 'thron'),
+                                    min: 0,
+                                    default: 90,
+                                    max: 100,
+                                    step: 5,
+                                    type: 'number',
+                                    onChange: function(quality) {
+                                        props.setAttributes({ 'quality': quality })
+                                        destroy = true;
+                                    },
+                                    value: props.attributes.quality
+                                }),
+                                el(components.RangeControl, {
+                                    label: i18n.__('Brightness', 'thron'),
+                                    min: -100,
+                                    max: 100,
+                                    default: 0,
+                                    step: 5,
+                                    help: '',
+                                    onChange: function(brightness) {
+                                        props.setAttributes({ 'brightness': brightness })
+                                        destroy = true;
+                                    },
+                                    value: props.attributes.brightness
+                                }),
+                                el(components.RangeControl, {
+                                    label: i18n.__('Contrast', 'thron'),
+                                    min: -100,
+                                    max: 100,
+                                    default: 0,
+                                    step: 5,
+                                    help: '',
+                                    onChange: function(contrast) {
+                                        props.setAttributes({ 'contrast': contrast })
+                                        destroy = true;
+                                    },
+                                    value: props.attributes.contrast
+                                }),
+                                el(components.RangeControl, {
+                                    label: i18n.__('Sharpness', 'thron'),
+                                    min: -100,
+                                    max: 100,
+                                    default: 0,
+                                    step: 5,
+                                    help: '',
+                                    onChange: function(sharpness) {
+                                        props.setAttributes({ 'sharpness': sharpness })
+                                        destroy = true;
+                                    },
+                                    value: props.attributes.sharpness
+                                }),
+                                el(components.RangeControl, {
+                                    label: i18n.__('Color', 'thron'),
+                                    min: -100,
+                                    max: 100,
+                                    default: 0,
+                                    step: 5,
+                                    help: '',
+                                    onChange: function(color) {
+                                        props.setAttributes({ 'color': color })
+                                        destroy = true;
+                                    },
+                                    value: props.attributes.color
+                                }),
+                            ),
                         ),
-
                         // End SideBar
                     ),
@@ -883 +1494 @@
         },
 
-        save: function (props) {
+        save: function(props) {
 
             var aspectRatio = 75;
@@ -895 +1506 @@
                     className: props.className,
                 },
-                '[thron contentID="' +  props.attributes.contentID + '" embedCodeId="' + props.attributes.embedCode + '" embedType="' + props.attributes.embedType + '" width="' + props.attributes.width + '" height="' + props.attributes.height + '" aspectRatio="' + aspectRatio + '"]',
+                '[thron contentID="' + props.attributes.contentID + '" embedCodeId="' + props.attributes.embedCode +
+                '" embedType="' + props.attributes.embedType + '" width="' + props.attributes.width +
+                '" quality="' + props.attributes.quality +
+                '" scalemode="' + props.attributes.scalemode +
+                (props.attributes.scalemode == 'manual' &&
+                    typeof props.attributes.rtieCrop != 'undefined' &&
+                    props.attributes.rtieCrop != null ? '" cropx="' + props.attributes.rtieCrop.cropx +
+                    '" cropy="' + props.attributes.rtieCrop.cropy +
+                    '" croph="' + props.attributes.rtieCrop.croph +
+                    '" cropw="' + props.attributes.rtieCrop.cropw : '') +
+                '" brightness="' + (props.attributes.brightness + 100) + '" contrast="' + (props.attributes.contrast + 100) +
+                '" sharpness="' + (props.attributes.sharpness + 100) + '" color="' + (props.attributes.color + 100) +
+                '" height="' + props.attributes.height + '" aspectRatio="' + aspectRatio + '" ]',
             );
 
-        }
+
+        },
+
+
+        deprecated: [{
+            attributes: {
+                manualCropSaving: {
+                    type: 'boolean',
+                    default: false
+                },
+                isOpen: {
+                    type: 'boolean',
+                    default: false
+                },
+                searchString: {
+                    type: 'string',
+                    default: ''
+                },
+                searchResult: {
+                    type: 'array',
+                    default: []
+                },
+                tmpContentID: {
+                    type: 'string',
+                    default: null
+                },
+                contentID: {
+                    type: 'string',
+                    default: null
+                },
+                templateID: {
+                    type: 'string',
+                    default: args.thron_playerTemplates
+                },
+                embedCode: {
+                    type: 'string',
+                    default: null
+                },
+                scalemode: {
+                    type: 'string',
+                    default: 'auto'
+                },
+                currentScaleMode: {
+                    type: 'string',
+                    default: null
+                },
+                rtieCrop: {
+                    cropx: {
+                        type: 'number',
+                        default: 0
+                    },
+                    cropy: {
+                        type: 'number',
+                        default: 0
+                    },
+                    cropw: {
+                        type: 'number',
+                        default: 0
+                    },
+                    croph: {
+                        type: 'number',
+                        default: 0
+                    }
+                },
+                quality: {
+                    type: 'number',
+                    default: 90
+                },
+                brightness: {
+                    type: 'number',
+                    default: 0
+                },
+                contrast: {
+                    type: 'number',
+                    default: 0
+                },
+                sharpness: {
+                    type: 'number',
+                    default: 0
+                },
+                color: {
+                    type: 'number',
+                    default: 0
+                },
+
+                /**
+                 * Dimension
+                 */
+                embedType: {
+                    type: 'string',
+                    default: 'responsive'
+                },
+                width: {
+                    type: 'number',
+                    default: 100
+                },
+                height: {
+                    type: 'number',
+                    default: null
+                },
+                maxWidth: {
+                    type: 'number',
+                    default: null
+                },
+                maxHeight: {
+                    type: 'number',
+                    default: null
+                },
+                keepProportions: {
+                    type: 'boolean',
+                    default: true
+                },
+
+                /**
+                 * Filter
+                 */
+                nextPageToken: {
+                    type: 'string',
+                    default: null
+                },
+                mediaType: {
+                    type: 'string',
+                    default: null
+                },
+                folders: {
+                    type: 'string',
+                    default: null
+                },
+                tags: {
+                    type: 'array'
+                },
+            },
+
+            save(props) {
+
+                var aspectRatio = 75;
+
+                var maxWidth = props.attributes.maxWidth;
+                var maxHeight = props.attributes.maxHeight;
+
+                aspectRatio = (maxWidth && maxHeight) ? maxHeight / maxWidth * 100 : 75;
+
+                return el('div', {
+                        className: props.className,
+                    },
+                    '[thron contentID="' + props.attributes.contentID + '" embedCodeId="' + props.attributes.embedCode + '" embedType="' + props.attributes.embedType + '" width="' + props.attributes.width + '" height="' + props.attributes.height + '" aspectRatio="' + aspectRatio + '"]',
+                );
+            },
+        }]
+
+
+
     })
 })
 (
     window.wp.blocks,
-    window.wp.editor,
+    window.wp.blockEditor,
     window.wp.i18n,
     window.wp.element,

thron/trunk/admin/js/wp.media.library.js

@@ -1 @@
-function THRONcustomFilter(e){
-
-    //pulizia elementi filtri mediatype "inutili" 
-    if(jQuery(e).length){
-        jQuery(e + " option[value='uploaded']").remove();
-        jQuery(e + " option[value='unattached']").remove();
-        jQuery(e + " option[value='mine']").remove();
-        jQuery(e + " option[value='detached']").remove();
-    }
-
-    if(jQuery('.mode-edit').length){  //variazione label in classic media (no modal)
-        jQuery('#media-attachment-thron-source-filter option[value="all"]').text(wp.i18n.__('Attached from THRON', 'thron'))
-    }
-
-    if(Array.isArray(myAjax.folders)){
-
-    }
-
-}
-
-jQuery(document).ready(function ($) {
+jQuery(document).ready(function($) {
 
     /**
@@ -27 +7 @@
     if (wp.media) {
 
-        // mi assicuro di essere in area media (modale e non)
-            wp.media.view.Search.prototype.on("all", function () {  
 
-                //console.log(myAjax)
+        //wp.media.view.Attachment.prototype.template = wp.media.template('tmpl-attachment-details-two-column-custom');
+        //wp.media.view.Attachment.Details.TwoColumn.prototype.template = wp.media.template('tmpl-attachment-details-two-column-custom');
 
-                THRONcustomFilter('#media-attachment-filters')
-                $('.media-menu-item').on('click', function(){
-                    THRONcustomFilter('#media-attachment-filters')
-                })                
-                
-            });
+        //console.log(wp.media.view.Attachment.Details.TwoColumn.prototype.template)
 
-            if(jQuery('.view-list').length){
-                THRONcustomFilter('#attachment-filter')
-            }
+        //jQuery(document).ready( function($) {
+        //console.log(wp.media.template('attachment-details-two-column-custom'))
+        /*if (typeof wp.media.view.Attachment != 'undefined') {
+            wp.media.view.Attachment.Details.TwoColumn.prototype.template = wp.media.template('attachment-details-two-column-custom');
+        }*/
+        //});
+
+        // Ensure that the Modal is ready.
+        wp.media.view.Modal.prototype.on("all", function(e) {
+            //console.log(e); 
+        });
 
 
-        wp.media.view.Modal.prototype.on("close", function () {
+        wp.media.view.Modal.prototype.on("close", function() {
 
-            var state =  wp.media.frame.state();
+            console.log('Inizio salvataggio...');
+
+            var state = wp.media.frame.state();
+
+            console.log('Stato: ' + state);
+
+
             var selection = wp.media.frame.state().get('selection');
+
             var collection = wp.media.frame.content.get().collection;
+
+            console.log('Stato: ' + state.id);
+
             switch (state.id) {
                 case "library":
@@ -54 +46 @@
                      * image
                      */
-                    selection.each(function (attachment) {
+                    selection.each(function(attachment) {
 
                         var element = collection.get(attachment.id);
+
+                        console.log(attachment)
 
                         $.ajax({
@@ -62 +56 @@
                             dataType: "json",
                             url: myAjax.ajaxurl,
-                            data: {action: "thron_file_upload", 'thron_id': attachment.id},
+                            data: { action: "thron_file_upload", 'thron_id': attachment.id },
                             async: false,
-                            success: function (response) {
+                            success: function(response) {
                                 if (response.success == true) {
 
-                                    element.set({id: response.data.ID});
-                                    element.set({url: response.data.url});
+                                    element.set({ id: response.data.ID });
+                                    element.set({ url: response.data.url });
 
-                                    collection.set({element}, {remove: false})
-                                } else {
-                                }
+                                    collection.set({ element }, { remove: false })
+                                } else {}
                             }
                         });
@@ -81 +74 @@
                      * image
                      */
-                    selection.each(function (attachment) {
+                    selection.each(function(attachment) {
 
                         var element = collection.get(attachment.id);
@@ -89 +82 @@
                             dataType: "json",
                             url: myAjax.ajaxurl,
-                            data: {action: "thron_file_upload", 'thron_id': attachment.id},
+                            data: { action: "thron_file_upload", 'thron_id': attachment.id },
                             async: false,
-                            success: function (response) {
+                            success: function(response) {
                                 if (response.success == true) {
 
-                                    element.set({id: response.data.ID});
-                                    element.set({url: response.data.url});
+                                    element.set({ id: response.data.ID });
+                                    element.set({ url: response.data.url });
 
-                                    collection.set({element}, {remove: false})
-                                } else {
-                                }
+                                    collection.set({ element }, { remove: false })
+                                } else {}
                             }
                         });
@@ -109 +101 @@
                      */
 
-                    selection.each(function (attachment) {
+                    selection.each(function(attachment) {
 
                         var element = collection.get(attachment.id);
@@ -123 +115 @@
                             },
                             async: false,
-                            success: function (response) {
+                            success: function(response) {
                                 if (response.success == true) {
 
-                                    element.set({id: response.data.ID});
-                                    element.set({url: response.data.url});
+                                    element.set({ id: response.data.ID });
+                                    element.set({ url: response.data.url });
 
-                                    collection.set({element}, {remove: false});
-                                } else {
-                                }
+                                    collection.set({ element }, { remove: false });
+                                } else {}
                             }
                         });
@@ -141 +132 @@
                      */
 
-                    collection.each(function (attachment) {
+                    collection.each(function(attachment) {
+
+                        console.log(attachment);
 
                         var element = collection.get(attachment.id);
@@ -149 +142 @@
                             dataType: "json",
                             url: myAjax.ajaxurl,
-                            data: {action: "thron_file_upload", 'thron_id': attachment.id},
+                            data: { action: "thron_file_upload", 'thron_id': attachment.id },
                             async: false,
-                            success: function (response) {
+                            success: function(response) {
                                 if (response.success == true) {
 
-                                    element.set({id: response.data.ID});
-                                    element.set({url: response.data.url});
+                                    element.set({ id: response.data.ID });
+                                    element.set({ url: response.data.url });
 
-                                    collection.set({element}, {remove: false})
-                                } else {
-                                }
+                                    collection.set({ element }, { remove: false })
+                                } else {}
                             }
                         });
@@ -166 +158 @@
                     break;
             }
+
+            console.log('Fine del salvataggio...');
+
         });
+
     }
+
 });

thron/trunk/admin/js/wp.media.thron-view.js

@@ -2 +2 @@
 wp.media.controller.Thron = wp.media.controller.State.extend({
 
-    initialize: function () {
+    initialize: function() {
         // this model contains all the relevant data needed for the application
         this.props = new Backbone.Model({
@@ -24 +24 @@
 
     // called each time the model changes
-    refresh: function () {
+    refresh: function() {
         // update the toolbar
         this.frame.toolbar.get().refresh();
@@ -30 +30 @@
 
     // called when the toolbar button is clicked
-    insertCodeEmbed: function () {
+    insertCodeEmbed: function() {
         var playerembedtemplate = this.props.get('playerembedtemplate');
         var thron_id = this.props.get('thron_id');
@@ -45 +45 @@
             appId: myAjax.thron_appId,
             appKey: myAjax.thron_appKey
-        }).then(function () {
+        }).then(function() {
             THRON.callApi(
-                "POST",
-                "/xcontents/resources/playerembedcode/insert/" + myAjax.thron_clientId,
-                {
+                'POST',
+                '/xcontents/resources/playerembedcode/insert/' + myAjax.thron_clientId, {
                     body: {
-                        "skipPkeyCreation": true,
-                        "source": {
-                            "id": thron_id,
-                            "entityType": "CONTENT"
+                        'skipPkeyCreation': true,
+                        'source': {
+                            'id': thron_id,
+                            'entityType': 'CONTENT'
                         },
-                        "value": {
-                            "name": "Name",
-                            "template": {
-                                "templateId": playerembedtemplate,
-                                "templateType": "CUSTOM"
+                        'value': {
+                            'name': 'Name',
+                            'template': {
+                                'templateId': playerembedtemplate,
+                                'templateType': 'CUSTOM'
                             },
-                            "enabled": true
+                            'enabled': true
                         }
                     }
-                }).then(function (response) {
+                }).then(function(response) {
+                // console.log('test');
                 jQuery('#select_template').html('');
 
@@ -86 +86 @@
 // THRON toolbar : contains the buttons at the bottom
 wp.media.view.Toolbar.Thron = wp.media.view.Toolbar.extend({
-    initialize: function () {
+    initialize: function() {
         _.defaults(this.options, {
             event: 'thron_event',
@@ -105 +105 @@
 
     // called each time the model changes
-    refresh: function () {
+    refresh: function() {
         // you can modify the toolbar behaviour in response to user actions here
         // disable the button if there is no custom data
@@ -116 +116 @@
 
     // triggered when the button is clicked
-    insertAction: function () {
+    insertAction: function() {
         this.controller.state().insertCodeEmbed();
     }
@@ -123 +123 @@
 // THRON content : this view contains the main panel UI
 wp.media.view.Thron = wp.media.View.extend({
-        className: 'media-thron',
-
-        // bind view events
-        events: {
-            'input': 'thron_update',
-            'keyup': 'thron_update',
-            'change': 'thron_update',
-            'click': 'thron_update'
-        },
-
-        api: null,
-
-        initialize: function () {
-            // create an input
-            this.input = this.make();
-
-            this.model.set('thronCollection', new Backbone.Collection());
-            this.model.set('embedType', 'responsive');
-
-
-            // insert it in the view
-            this.$el.append(this.input);
-
-            // re-render the view when the model changes
-            this.model.on('change:thron_id', this.render, this);
-
-            var t = this;
+    className: 'media-thron',
+
+    // bind view events
+    events: {
+        'input': 'thron_update',
+        'keyup': 'thron_update',
+        'change': 'thron_update',
+        'click': 'thron_update'
+    },
+
+    api: null,
+
+    initialize: function() {
+        // create an input
+        this.input = this.make();
+
+        this.model.set('thronCollection', new Backbone.Collection());
+        this.model.set('embedType', 'responsive');
+
+
+        // insert it in the view
+        this.$el.append(this.input);
+
+        // re-render the view when the model changes
+        this.model.on('change:thron_id', this.render, this);
+
+        var t = this;
+
+        /**
+         * Download the list of templates
+         */
+        this.api = THRON.init({
+            clientId: myAjax.thron_clientId,
+            appId: myAjax.thron_appId,
+            appKey: myAjax.thron_appKey
+        }).then(function() {
+
+            THRON.callApi(
+                'POST',
+                '/xcontents/resources/playerembedtemplate/list/' + myAjax.thron_clientId, {
+                    body: {
+                        'criteria': {
+                            'text': ''
+                        },
+                        'offset': 0,
+                        'options': {
+                            'returnRoles': false,
+                            'returnValues': false
+                        }
+                    }
+                }).then(function(response) {
+                jQuery('#select_template').html('').append(' <option value="">' + myAjax.selecttemplate + '</option>');
+
+                _.each(response.items, function(template) {
+                    selected = '';
+
+                    if (myAjax.thron_playerTemplates == template.id) {
+                        selected = 'selected';
+                        t.model.set('playerembedtemplate', template.id);
+                    }
+
+                    jQuery('#select_template').append('<option value="' + template.id + '" selected >' + template.name + '</option>');
+                })
+            });
+        });
+
+        jQuery('body').addClass('wsthron');
+        jQuery('.media-menu-item').not('.media-menu-item.active').click(function() {
+            jQuery('body').removeClass('wsthron');
+        });
+
+        setTimeout(function() {
+            jQuery('#thron_list').on('scroll', function() {
+                if (jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight) {
+                    t.thron_search(true);
+                }
+            });
+        }, 3000);
+
+        // mostra i primi risultati
+        this.thron_search();
+    },
+
+    render: function() {
+        this.input.value = this.model.get('thron_id');
+        return this;
+    },
+
+    make: function() {
+
+        var folder = '';
+        var tags = '';
+
+        if ('on' == myAjax.thron_enable_features_search) {
+            if (myAjax.tags.length > 0) {
+                _.each(myAjax.tags, function(value) {
+                    if (myAjax.tags.length > 0) {
+
+                        tags += '<select id="tag-' + value.id + '" class="attachment-filters">';
+                        tags += '<option value="">All ' + value.name + '</option>';
+
+                        _.each(value.list, function(value2) {
+                            tags += '<option value="' + value2.id + ' ">';
+                            tags += value2.name;
+                            tags += '</option>';
+                        });
+                        tags += '</select>';
+                    }
+                })
+            }
+        }
+
+        if ((typeof myAjax.folders != 'undefined') & (myAjax.folders != null)) {
+            if (myAjax.folders.length > 0) {
+                folder += '<select id="folders" class="attachment-filters">';
+                folder += '<option value="">' + myAjax.allfolders + '</option>';
+
+                _.each(myAjax.folders, function(value) {
+                    folder += '<option id="' + value.id + ' ">';
+                    folder += value.name
+                    folder += '</option>';
+                })
+                folder += '</select>';
+            }
+        }
+
+        return '<div id="thron_content">' +
+            '   <div class="media-toolbar" id="thron_toolbar">' +
+            '       <div class="media-toolbar-secondary">' +
+            '           <div class="media-toolbar-secondary__label"><label class="media-search-input-label">Filters</label></div>' +
+            '           <select id="mediaType" class="attachment-filters">' +
+            '               <option value="">' + myAjax.allcontent + '</option>' +
+            '               <option value="VIDEO">' + myAjax.videos +'</option>' +
+            '               <option value="AUDIO">' + myAjax.audio +'</option>' +
+            '               <option value="IMAGE">' + myAjax.images + '</option>' +
+            '               <option value="OTHER">' + myAjax.documents +'</option>' +
+            '               <option value="PLAYLIST">' + myAjax.playlist +'</option>' +
+            '               <option value="URL">' + myAjax.url +'</option>' +
+            '               <option value="PAGELET">' + myAjax.pagelet +'</option>' +
+            '           </select>' +
+                        folder +
+                        tags +
+            '       </div>' +
+            '       <div class="media-toolbar-primary search-form">' +
+            '           <label for="media-search-input" class="media-search-input-label">Cerca</label>' +
+            '           <input type="search" placeholder="Cerca" class="search" val="{data.value}" />' +
+            '       </div>' +
+            '   </div>' +
+            '   <div class="td-content-grid" id="thron_list"></div>' +
+            '</div>' +
+            '<div class="media-sidebar visible" id="thron_bar">' +
+            '   <div id="thron_attachments_preview"></div>' +
+            '   <div id="thron_playerembedtemplate_preview"></div>' +
+            '   <div class="media-uploader-status">' +
+            '   <div>' +
+            '       <label for="select_template">' + myAjax.playertemplate + '</label>' +
+            '       <select id="select_template" name="select_template"></select>' +
+            '   </div>' +
+            '   <div>' +
+            '       <label for="embedType">' + myAjax.embedtype + '</label>' +
+            '       <div class=\"input_container\"><input type="radio" val="responsive" id="responsive" name="embedType" checked /> Responsive<br \></div>' +
+            '       <div class=\"input_container\"><input type="radio"  val="fixed" id="fixed" name="embedType" /> ' + myAjax.fixedsize + '</div>' +
+            '   </div>' +
+            '   <div class=\"sidebar_img-dimension\">' +
+            '       <input type="number" id="thron-player-width" val="" placeholder="' + myAjax.widthpx + '"/>' +
+            '       <div class=\"dimension_separator\"> X </div>' +
+            '       <input type="number" id="thron-player-height" val="" placeholder="' + myAjax.heightpx + '"/>' +
+            '   </div>' +
+            '</div>';
+    },
+
+    thron_update: function(event) {
+        var t = this;
+
+        var thron_id = event.target.getAttribute('data-id');
+
+        if (thron_id) {
+            this.model.set('thron_id', thron_id);
 
             /**
-             * Download the list of templates
+             * Request content detils
              */
-            this.api = THRON.init({
-                clientId: myAjax.thron_clientId,
-                appId: myAjax.thron_appId,
-                appKey: myAjax.thron_appKey
-            }).then(function () {
-
-                THRON.callApi(
-                    "POST",
-                    "/xcontents/resources/playerembedtemplate/list/" + myAjax.thron_clientId,
-                    {
-                        body: {
-                            "criteria": {
-                                "text": ""
-                            },
-                            "offset": 0,
-                            "options": {
-                                "returnRoles": false,
-                                "returnValues": false
-                            }
-                        }
-                    }).then(function (response) {
-                    jQuery('#select_template').html('').append(" <option value=\"\">" + myAjax.selecttemplate + "</option>");
-
-                    _.each(response.items, function (template) {
-                        selected = '';
-
-                        if (myAjax.thron_playerTemplates == template.id) {
-                            selected = 'selected';
-                            t.model.set('playerembedtemplate', template.id);
-                        }
-
-                        jQuery('#select_template').append("<option value=\"" + template.id + "\" selected >" + template.name + "</option>");
-                    })
-                });
-            });
-
-            jQuery('body').addClass('wsthron');
-            jQuery('.media-menu-item').not('.media-menu-item.active').click(function () {
-                jQuery('body').removeClass('wsthron');
-            });
-
-            setTimeout(function () {
-                jQuery('#thron_list').on('scroll', function () {
-                    if (jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight) {
-                        t.thron_search();
-                    }
-                });
-            }, 3000);
-
-            // mostra i primi risultati
-            this.thron_search('');
-        },
-
-        render: function () {
-            this.input.value = this.model.get('thron_id');
-            return this;
-        },
-
-        make: function () {
-
-            var folder = '';
-            var tags = '';
-
-            if ('on' == myAjax.thron_enable_features_search) {
-                if (myAjax.tags.length > 0) {
-                    _.each(myAjax.tags, function (value) {
-                        if (myAjax.tags.length > 0) {
-
-                            tags += '<select id="tag-' + value.id + '" class="attachment-filters">';
-                            tags += '<option value="">All ' + value.name + '</option>';
-
-                            _.each(value.list, function (value2) {
-                                tags += '<option value="' + value2.id + ' ">';
-                                tags += value2.name;
-                                tags += '</option>';
-                            });
-                            tags += '</select>';
-                        }
-                    })
+            THRON.callApi(
+                    'GET',
+                    '/xcontents/resources/delivery/getContentDetail?clientId=' + myAjax.thron_clientId + '&xcontentId=' + thron_id
+                )
+                .then(function(response) {
+
+                    deliverySize = response.content.deliverySize.aspectRatio.split(':');
+
+                    t.model.set('aspectRatio', deliverySize[1] / deliverySize[0]);
+
+                });
+
+            jQuery('#thron_attachments_preview').html('<h2>' + myAjax.contentdetails + '</h2><div class="attachment-info"><div class="thumbnail thumbnail-image"><img src="https://' + myAjax.thron_clientId + '-view.thron.com/api/xcontents/resources/delivery/getThumbnail/' + myAjax.thron_clientId + '/150x150/' + thron_id + '" ></div></div>');
+        }
+
+        if ('input' == event.type) {
+            /**
+             * Gestisce il tipo di embed:
+             *  * responsive
+             *  * fixed
+             */
+            if ('embedType' == event.target.name) {
+
+                this.model.set('embedType', event.target.id);
+            }
+
+            /**
+             * Gestisce l'altezza e la larghezza dell'embed
+             */
+            if ('thron-player-width' == event.target.id) {
+                this.model.set('width', event.target.value);
+
+                var aspectRatio = this.model.get('aspectRatio');
+                if (aspectRatio) {
+                    this.model.set('height', event.target.value * aspectRatio);
+
+                    jQuery('#thron-player-height').val(event.target.value * aspectRatio)
                 }
             }
 
-            if ((typeof myAjax.folders != "undefined") & (myAjax.folders != null)) {
-                if (myAjax.folders.length > 0) {
-                    folder += '<select id="folders" class="attachment-filters">';
-                    folder += '<option value="">' + myAjax.allfolders + '</option>';
-
-                    _.each(myAjax.folders, function (value) {
-                        folder += '<option id="' + value.id + ' ">';
-                        folder += value.name
-                        folder += '</option>';
-                    })
-                    folder += '</select>';
+            if ('thron-player-height' == event.target.id) {
+                this.model.set('height', event.target.value);
+
+                var aspectRatio = this.model.get('aspectRatio');
+                if (aspectRatio) {
+                    this.model.set('width', event.target.value * aspectRatio);
+
+                    jQuery('#thron-player-width').val(event.target.value / aspectRatio)
                 }
             }
 
-            return "<div class=\"media-toolbar\" style='position: absolute;right: 300px;top: 0;height: 72px; display: flex; justify-content: space-between; height: 110px; max-height: 250px; overflow: auto;'>" +
-                "<div class=\"media-toolbar-secondary\">" +
-                "<select id=\"mediaType\" class=\"attachment-filters\">" +
-                "<option value=\"\">" + myAjax.allcontent + "</option>" +
-                "<option value=\"VIDEO\">" + wp.i18n.__('Video', 'thron') + "</option>" +                
-                "<option value=\"AUDIO\">" + wp.i18n.__('Audio', 'thron') + "</option>" +                
-                "<option value=\"IMAGE\">" + wp.i18n.__('Image', 'thron') + "</option>" +
-                "<option value=\"OTHER\">" + wp.i18n.__('Document', 'thron') + "</option>" +                
-                "<option value=\"PLAYLIST\">" + wp.i18n.__('Playlist', 'thron') + "</option>" +
-                "<option value=\"URL\">" + wp.i18n.__('Url', 'thron') + "</option>" +
-                "<option value=\"PAGELET\">" + wp.i18n.__('Pages', 'thron') + "</option>" +
-                "</select>" +
-                folder +
-                tags +
-                '</div>' +
-                '<div class="media-toolbar-primary search-form">' +
-                '<label for="media-search-input" class="media-search-input-label">Cerca</label>' +
-                "<input type=\"search\" placeholder=\"Cerca\" class=\"search\" val=\"{data.value}\" />" +
-                '</div>' +
-                '</div>' +
-                '<div id="thron_app" class="app">\n' +
-                '<div class="td-content-grid " id="thron_list">' +
-                '</div>' +
-                '<div class="media-sidebar visible" id="thron_bar">' +
-                '<div class="" id="thron_attachments_preview">' +
-                '</div>' +
-                '<div class="" id="thron_playerembedtemplate_preview">' +
-                '</div>' +
-                '<div class="media-uploader-status">' +
-                '<div>' +
-                '<label for="select_template">' + myAjax.playertemplate + '</label>' +
-                '<select id="select_template" name="select_template"></select></div>' +
-                '<div>' +
-                '<label for="embedType">'+myAjax.embedtype+'</label>' +
-                '<div class=\"input_container \"><input type="radio" val="responsive" id="responsive" name="embedType" checked /> Responsive<br \></div>' +
-                '<div class=\"input_container\"><input type="radio"  val="fixed" id="fixed" name="embedType" /> ' + myAjax.fixedsize +
-                '</div></div>' +
-                '<div class=\"sidebar_img-dimension\">' +
-                '<input type="number" id="thron-player-width" val="" placeholder="'+myAjax.widthpx+'"/>' +
-                '<div class=\"dimension_separator\"> X </div>' +
-                '<input type="number" id="thron-player-height" val="" placeholder="'+myAjax.heightpx+'"/>' +
-                '</div>' +
-                '</div>' +
-                '</div>' +
-                '</div>' +
-                '</div>';
-        },
-
-        thron_update: function (event) {
-            var t = this;
-
-            var thron_id = event.target.getAttribute('data-id');
-
-            if (thron_id) {
-                this.model.set('thron_id', thron_id);
-
-                /**
-                 * Request content detils
-                 */
-                THRON.callApi(
-                    "GET",
-                    "/xcontents/resources/delivery/getContentDetail?clientId=" + myAjax.thron_clientId + "&xcontentId=" + thron_id
-                )
-                    .then(function (response) {
-
-                        deliverySize = response.content.deliverySize.aspectRatio.split(':');
-
-                        t.model.set('aspectRatio', deliverySize[1] / deliverySize[0]);
-
-                    });
-
-                jQuery('#thron_attachments_preview').html('<h2>' + myAjax.contentdetails + '</h2><div class="attachment-info"><div class="thumbnail thumbnail-image"><img src="https://' + myAjax.thron_clientId + '-view.thron.com/api/xcontents/resources/delivery/getThumbnail/' + myAjax.thron_clientId + '/150x150/' + thron_id + '" ></div></div>');
-            }
-
-            if ('input' == event.type) {
-                /**
-                 * Gestisce il tipo di embed:
-                 *  * responsive
-                 *  * fixed
-                 */
-                if ('embedType' == event.target.name) {
-
-                    this.model.set('embedType', event.target.id);
-                }
-
-                /**
-                 * Gestisce l'altezza e la larghezza dell'embed
-                 */
-                if ('thron-player-width' == event.target.id) {
-                    this.model.set('width', event.target.value);
-
-                    var aspectRatio = this.model.get('aspectRatio');
-                    if (aspectRatio) {
-                        this.model.set('height', event.target.value * aspectRatio);
-
-                        jQuery('#thron-player-height').val(event.target.value * aspectRatio)
-                    }
-                }
-
-                if ('thron-player-height' == event.target.id) {
-                    this.model.set('height', event.target.value);
-
-                    var aspectRatio = this.model.get('aspectRatio');
-                    if (aspectRatio) {
-                        this.model.set('width', event.target.value * aspectRatio);
-
-                        jQuery('#thron-player-width').val(event.target.value / aspectRatio)
-                    }
-                }
-
-                /**
-                 * Gestisce la folders
-                 */
-                if ('folders' == event.target.id) {
-                    this.model.set('folders', event.srcElement.options[event.target.selectedIndex].id.trim());
-                    this.model.set('pageToken', null);
-
-                    jQuery('#thron_list').html('');
-                    this.thron_search()
-                }
-
-                /**
-                 * Gestisce i tags
-                 */
-                if ('tag-' == event.target.id.substring(0, 4)) {
-                    var tags = this.model.get('tags') || new Array();
-                    var new_tags = new Array();
-
-                    var id = event.target.id.substring(4).split(';');
-
-                    _.each(tags, function (tag) {
-                        if (id[1] != tag.parent) {
-                            new_tags.push(tag);
-                        }
-                    })
-
-                    new_tags.push({
-                        id: event.srcElement.options[event.target.selectedIndex].value.trim(),
-                        classificationID: id[0],
-                        parent: id[1]
-                    });
-
-                    this.model.set('tags', new_tags);
-                    this.model.set('pageToken', null);
-
-                    jQuery('#thron_list').html('');
-                    this.thron_search();
-                }
-
-                /**
-                 * Gestisce tipi di file
-                 */
-                if ('mediaType' == event.target.id) {
-
-                    this.model.set('mediaType', event.target.value);
-                    this.model.set('pageToken', null);
-
-                    jQuery('#thron_list').html('');
-                    this.thron_search();
-                }
-            }
-
-            if ('search' == event.target.type) {
-                this.model.set('search', event.target.value);
+            /**
+             * Gestisce la folders
+             */
+            if ('folders' == event.target.id) {
+                this.model.set('folders', event.target.options[event.target.selectedIndex].id.trim());
+                this.model.set('pageToken', null);
+
+                jQuery('#thron_list').html('');
+                this.thron_search()
+            }
+
+            /**
+             * Gestisce i tags
+             */
+            if ('tag-' == event.target.id.substring(0, 4)) {
+                var tags = this.model.get('tags') || new Array();
+                var new_tags = new Array();
+
+                var id = event.target.id.substring(4).split(';');
+
+                _.each(tags, function(tag) {
+                    if (id[1] != tag.parent) {
+                        new_tags.push(tag);
+                    }
+                })
+
+                new_tags.push({
+                    id: event.target.options[event.target.selectedIndex].value.trim(),
+                    classificationID: id[0],
+                    parent: id[1]
+                });
+
+                this.model.set('tags', new_tags);
                 this.model.set('pageToken', null);
 
@@ -420 +395 @@
             }
 
-            if ('select-one' == event.target.type) {
-                this.model.set('playerembedtemplate', event.target.value);
-            }
-        },
-
-        thron_search: function () {
-
-            var t = this;
-            var pageToken = this.model.get('pageToken');
-
-
-            var thronCollection = this.model.get('thronCollection');
-            var search = this.model.get('search');
-            var folders = this.model.get('folders');
-            var tags = this.model.get('tags');
-            var mediaType = this.model.get('mediaType');
-
-            this.api = THRON.init({
-                clientId: myAjax.thron_clientId,
-                appId: myAjax.thron_appId,
-                appKey: myAjax.thron_appKey
-            }).then(function () {
-
-                var body = {};
-                body.criteria = {};
-
-                if (search) {
-                    body.criteria.lemma = {};
-                    body.criteria.lemma.text = search;
-                    body.criteria.lemma.textMatch = "any_word_match";
+            /**
+             * Gestisce tipi di file
+             */
+            if ('mediaType' == event.target.id) {
+
+                this.model.set('mediaType', event.target.value);
+                this.model.set('pageToken', null);
+
+                jQuery('#thron_list').html('');
+                this.thron_search();
+            }
+        }
+
+        if ('search' == event.target.type) {
+            this.model.set('search', event.target.value);
+            this.model.set('pageToken', null);
+
+            jQuery('#thron_list').html('');
+            this.thron_search();
+        }
+
+        if ('select-one' == event.target.type) {
+            this.model.set('playerembedtemplate', event.target.value);
+        }
+    },
+
+    requestId: -1,
+
+    thron_search: function(append) {
+
+        var t = this;
+        var pageToken = this.model.get('pageToken');
+
+        var thronCollection = this.model.get('thronCollection');
+        var search = this.model.get('search');
+        var folders = this.model.get('folders');
+        var tags = this.model.get('tags');
+        var mediaType = this.model.get('mediaType');
+
+        this.api = THRON.init({
+            clientId: myAjax.thron_clientId,
+            appId: myAjax.thron_appId,
+            appKey: myAjax.thron_appKey
+        }).then(function() {
+
+            var body = {};
+            body.criteria = {};
+
+            if (search) {
+                body.criteria.lemma = {};
+                body.criteria.lemma.text = search;
+                body.criteria.lemma.textMatch = 'any_word_match';
+            }
+
+            if (folders) {
+                body.criteria.linkedCategories = {};
+                body.criteria.linkedCategories.haveAtLeastOne = new Array({
+                    id: folders,
+                    cascade: false
+                });
+            }
+
+            if (tags) {
+                body.criteria.itag = {};
+                body.criteria.itag.haveAll = [];
+
+                _.each(tags, function(tag) {
+                    if (tag.id != '') {
+                        body.criteria.itag.haveAll.push({
+                            id: tag.id,
+                            classificationId: tag.classificationID,
+                            cascade: false
+                        });
+                    }
+
+                });
+            }
+
+            if (mediaType) {
+                body.criteria.contentType = new Array(mediaType);
+            }
+
+            if (pageToken) {
+                body.pageToken = pageToken;
+            }
+
+            body.responseOptions = new Object();
+            body.responseOptions.resultsPageSize = 50;
+            body.responseOptions.returnDetailsFields = new Array('locales', 'source');
+            
+            var currentRequestId = ++this.requestId;
+
+            THRON.callApi(
+                'POST',
+                '/xcontents/resources/content/search/' + myAjax.thron_clientId, { body: body }
+            ).then(function(response) {
+                // console.log(currentRequestId, this.requestId);
+                if (currentRequestId !== this.requestId) {
+                    return;
                 }
 
-                /*if (folders) {
-                    body.criteria.linkedCategories = {};
-                    body.criteria.linkedCategories.haveAtLeastOne = new Array({
-                        id: folders,
-                        cascade: false
+                t.model.set('pageToken', response.nextPageToken);
+
+                var template = _.template(
+                    '<div class="content">' +
+                    '   <picture>'+
+                    '       <img class="thumb_img" data-id="<%- id %>" src="https://<%- clientId %>-view.thron.com/api/xcontents/resources/delivery/getThumbnail/<%- clientId %>/200x150/<%- id %>?scalemode=auto" \>' +
+                    '   </picture>' +
+                    '   <div class="label">' +
+                    '       <span class="thron-type" data-value="<%- thronType %>"></span>' +
+                    '       <span class="thron-extension"><%- extension %></span>' +
+                    '       <span class="thron-label"><%- value %></span>' +
+                    '   </div>' +
+                    '</div>'
+                );
+
+                var output = '';
+
+                if (response.items.length === 0 && !append) {
+                    output += '<div class="empty-results">' + i18n.__('No result for this search', 'thron') + '</div>';
+                }
+
+                _.each(response.items, function(value) {
+
+                    /**
+                     * Aggiunge il content nella collection
+                     */
+                    thronCollection.add(value);
+
+                    output += template({
+                        id: value.id,
+                        value: value.details.locales[0].name,
+                        clientId: myAjax.thron_clientId,
+                        thronType: value.contentType,
+                        extension: typeof value.details.source !== 'undefined' ? value.details.source.extension : value.contentType
                     });
-                }*/
-
-
-
-                if (folders != null) {
-                    body.criteria.linkedCategories = {};
-                    body.criteria.linkedCategories.haveAtLeastOne = new Array({
-                        id: folders,
-                        cascade: (folders == myAjax.thron_list_folder ? true : false)
+                });
+
+                if (append) {
+                    jQuery('#thron_list').append(output);
+                } else {
+                    jQuery('#thron_list').html(output);
+                }
+
+                jQuery('.content').click(function() {
+                    jQuery.each(jQuery('.content'), function() {
+                        jQuery(this).removeClass('selected');
                     });
-                } else {
-                    body.criteria.linkedCategories = {};
-                    body.criteria.linkedCategories.haveAtLeastOne = new Array({
-                        id: myAjax.thron_list_folder,
-                        cascade: true
-                    });
-                }
-
-
-
-
-
-
-                if (tags) {
-                    body.criteria.itag = {};
-                    body.criteria.itag.haveAll = [];
-
-                    _.each(tags, function (tag) {
-                        if (tag.id != '') {
-                            body.criteria.itag.haveAll.push({
-                                id: tag.id,
-                                classificationId: tag.classificationID,
-                                cascade: false
-                            });
-                        }
-
-                    });
-                }
-
-                if (mediaType) {
-                    body.criteria.contentType = new Array(mediaType);
-                }
-
-                if (pageToken) {
-                    body.pageToken = pageToken;
-                }
-
-                body.responseOptions = new Object();
-                body.responseOptions.resultsPageSize = 50;
-                body.responseOptions.returnDetailsFields = new Array("locales", "source");
-
-                THRON.callApi(
-                    "POST",
-                    "/xcontents/resources/content/search/" + myAjax.thron_clientId,
-                    {body: body}
-                ).then(function (response) {
-
-                    t.model.set('pageToken', response.nextPageToken);
-
-                    var template = _.template(
-                        "<div class='content'><img class=\"thumb_img\" data-id = \"<%- id %>\" src='https://<%- clientId %>-view.thron.com/api/xcontents/resources/delivery/getThumbnail/<%- clientId %>/200x150/<%- id %>?scalemode=auto' \>" +
-                        "<div class='label'>" +
-                        "<span class='thron-type' data-value='<%- thronType %>'></span>'" +
-                        "<span class='thron-extension'><%- extension %></span>'" +
-                        "<span class='thron-label'><%- value %></span>'" +
-                        "<%- value %>" +
-                        "</div>" +
-                        "</div>"
-                    );
-
-                    var output = '';
-
-                    _.each(response.items, function (value) {
-
-                        /**
-                         * Aggiunge il content nella collection
-                         */
-                        thronCollection.add(value);
-
-                        output += template({
-                            id: value.id,
-                            value: value.details.locales[0].name,
-                            clientId: myAjax.thron_clientId,
-                            thronType: value.contentType,
-                            extension: typeof value.details.source != "undefined" ? value.details.source.extension : value.contentType.toLowerCase()
-                        });
-
-                    });
-
-
-                    jQuery('#thron_list').append(output);
-
-                    jQuery(".thumb_img").click(function () {
-                        jQuery.each(jQuery(".content"), function () {
-                            jQuery(this).removeClass('selected');
-                        });
-                        jQuery(this).parent().toggleClass("selected");
-                        if (jQuery("#select_template").val() == "") {
-                            setTimeout(function () {
-                                jQuery(".media-button-thron_event").prop("disabled", true);
-                            }, 300)
-                        } else {
-                            setTimeout(function () {
-                                jQuery(".media-button-thron_event").prop("disabled", false);
-                            }, 300)
-                        }
-                    });
-
-                    jQuery("#select_template").change(function () {
-                        if (jQuery("#select_template").val() == "") {
-                            setTimeout(function () {
-                                jQuery(".media-button-thron_event").prop("disabled", true);
-                            }, 300)
-                        } else {
-                            setTimeout(function () {
-                                jQuery(".media-button-thron_event").prop("disabled", false);
-                            }, 300)
-                        }
-                    });
-
-                    jQuery(".thron-type, .thron-extension, .thron-label").click(function () {
-                        jQuery(this).closest('.content').find('img').click();
-                    });
-
-                    jQuery(".media-toolbar-secondary select").change(function () {
-                        setTimeout(function () {
-                            if (jQuery("#thron_list .content").length < 8) jQuery(".wsthron #thron_list .content").css("flex-grow", "initial");
-                        }, 300);
-                    });
-                });
-
-            })
-        }
+                    jQuery(this).toggleClass('selected');
+                    if (jQuery('#select_template').val() == '') {
+                        setTimeout(function() {
+                            jQuery('.media-button-thron_event').prop('disabled', true);
+                        }, 300)
+                    } else {
+                        setTimeout(function() {
+                            jQuery('.media-button-thron_event').prop('disabled', false);
+                        }, 300)
+                    }
+                });
+
+                jQuery('#select_template').change(function() {
+                    if (jQuery('#select_template').val() == '') {
+                        setTimeout(function() {
+                            jQuery('.media-button-thron_event').prop('disabled', true);
+                        }, 300)
+                    } else {
+                        setTimeout(function() {
+                            jQuery('.media-button-thron_event').prop('disabled', false);
+                        }, 300)
+                    }
+                });
+
+                jQuery('.thron-type, .thron-extension, .thron-label').click(function() {
+                    jQuery(this).closest('.content').find('img').click();
+                });
+
+                jQuery('.media-toolbar-secondary select').change(function() {
+                    setTimeout(function() {
+                        if (jQuery('#thron_list .content').length < 8) jQuery('.wsthron #thron_list .content').css('flex-grow', 'initial');
+                    }, 300);
+                });
+            }.bind(this));
+
+        }.bind(this));
     }
-)
-;
+});
 
 // supersede the default MediaFrame.Post view
@@ -599 +586 @@
 wp.media.view.MediaFrame.Post = oldMediaFrame.extend({
 
-    initialize: function () {
+    initialize: function() {
         oldMediaFrame.prototype.initialize.apply(this, arguments);
 
@@ -622 +609 @@
     },
 
-    createTHRONToolbar: function (toolbar) {
+    createTHRONToolbar: function(toolbar) {
         toolbar.view = new wp.media.view.Toolbar.Thron({
             controller: this
@@ -628 +615 @@
     },
 
-    thronAPP: function () {
+    thronAPP: function() {
 
         // this view has no router

thron/trunk/includes/class-thron-api.php

@@ -78 +78 @@
             foreach ( $categories as $category ) {
                 $criteria_categories .= '{
-                  "cascade": '.($category == get_option('thron_list_folder') ? 'true' : 'false').',
+                  "cascade": false,
                   "id": "' . $category . '"
                 },';
@@ -85 +85 @@
             $criteria_categories .= ']}';
         }
-
-        
 
         $criteria_tag .= '"itag": {"haveAll": [';
@@ -150 +148 @@
             }
         }
-
-
 
         $pageTokenBody = $pageToken ? '"pageToken": "' . $pageToken . '",' : '';
@@ -183 +179 @@
         );
 
+
+
         if ( is_wp_error( $response ) ) {
             thron_write_log($response->get_error_message);
@@ -389 +387 @@
                             "options": {
                                 "returnRoles": false,
-                                "returnValues": false
+                                "returnValues": true
                             }
                        }
@@ -402 +400 @@
         } else {
             $result = json_decode( $response['body'] );
-
             return $result;
         }

thron/trunk/includes/class-thron.php

@@ -71 +71 @@
             $this->version = THRON_VERSION;
         } else {
-            $this->version = '1.0.1';
+            $this->version = '1.2.1';
         }
         $this->plugin_name = 'thron';
@@ -79 +79 @@
         $this->define_admin_hooks();
         $this->define_public_hooks();
-
     }
 
@@ -127 +126 @@
          */
         require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-thron-admin.php';
+        require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-thron-wp-rest-attachments-controller.php';
         require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-thron-setting.php';
         require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-thron-cron.php';
 
+
+
         /**
          * The class responsible for defining all actions that occur in the public-facing
@@ -172 +174 @@
 
         $plugin_admin = new Thron_Admin( $this->get_plugin_name(), $this->get_version() );
+        $plugin_wp_rest_attachments_controller = new THRON_WP_REST_Attachments_Controller('attachments');
         $plugin_setting = new Thron_Setting( );
         $plugin_cron = new Thron_Cron( );
@@ -203 +206 @@
 
 
+        //$this->loader->add_filter( 'media_send_to_editor', $plugin_admin, 'thron_add_tracking_class', 20, 3 );
+        $this->loader->add_filter( 'wp_audio_shortcode_class', $plugin_admin, 'thron_add_tracking_class', 1, 1 );
+        $this->loader->add_filter( 'wp_video_shortcode_class', $plugin_admin, 'thron_add_tracking_class', 1, 1 );
         /**
          * Perform AJAX search in the media library
@@ -225 +231 @@
         $this->loader->add_filter( 'attachment_fields_to_edit', $plugin_admin, 'thron_add_attachment_field', 10, 2  );
         $this->loader->add_action( 'edit_attachment', $plugin_admin, 'thron_save_attachment', 10, 3  );
+        
+        /**
+         * Insert overriding media template and attachments operation
+         */
+        $this->loader->add_action( 'wp_enqueue_media', $plugin_admin, 'ws_add_overrides', 10, 2 );
+        $this->loader->add_action( 'rest_api_init', $plugin_wp_rest_attachments_controller, 'add_custom_media_edit_api', 10, 2);
 
         /**
@@ -256 +268 @@
         $this->loader->add_action( 'enqueue_block_editor_assets', $plugin_admin, 'THRONBlock' );
         $this->loader->add_action( 'init', $plugin_admin, 'register_block_embed' );
+
+
+        $this->loader->add_filter( 'media_library_infinite_scrolling', $plugin_admin, 'infinite_scroll_true');
+
     }
 
@@ -282 +298 @@
         $this->loader->add_filter( 'wp_get_attachment_image_attributes', $plugin_public, 'filter_wp_get_attachment_image_attributes', 10, 3 );
 
+
         /**
          * Add class tci to image
@@ -287 +304 @@
         $this->loader->add_filter( 'get_image_tag_class', $plugin_public, 'get_image_tag_class', 10, 3 );
         $this->loader->add_filter( 'wp_get_attachment_image_attributes', $plugin_public, 'wp_get_attachment_image_attributes', 10, 3 );
+        $this->loader->add_filter( 'render_block', $plugin_public, 'add_tci_class', 10, 2 );
 
     }

thron/trunk/includes/cmb2-field-ajax-search/cmb2-field-ajax-search.php

@@ -85 +85 @@
                     $value = $value[0];
                 }
+
                 /**
                  * Se non è salvata nessuna folder utilizza la root folder
                  */
-                if (!$value) {
+                if (! $value) {
                     update_option( 'thron_list_folder',  get_option( 'thron_rootCategoryId' ) );
-                }else{
-                    update_option( 'thron_list_folder',  $value );
-                }
-
-                $value = get_option('thron_list_folder');
+                    $value = get_option('thron_list_folder');
+                }
 
                 $input_value = $this->folderNameByID( $value );

thron/trunk/languages/thron-it_IT-thron-block.json

@@ -8 +8 @@
         "lang": "it_IT"
       },
+      "Select template": [
+        "Seleziona il template"
+      ],
       "THRON Universal Player": [
         "THRON Universal Player"
       ],
-      "Insert THRON player": [
-        "Inserisci THRON player"
-      ],      
       "All content": [
         "Tutti i contenuti"
       ],
-      "Image": [
+      "Images": [
         "Immagini"
       ],
-      "Video": [
+      "Videos": [
         "Video"
       ],
@@ -29 +29 @@
         "Playlist"
       ],
-      "Other": [
-        "Altro"
+      "Pagelet": [
+        "Pagelet"
       ],
-      "Url": [
-        "Url"
+      "Document (Other)": [
+        "Documenti (altro)"
       ],
-      "Pages": [
-        "Pagine"
-      ],            
-      "Document": [
-        "Documento"
-      ],      
-      "More": [
-        "Continua"
+      "Apply": [
+        "Applica"
+      ],
+      "Cancel": [
+        "Annulla"
       ],
       "Width (px)": [
@@ -53 +50 @@
         "Mantieni aspect ratio"
       ],
-      "Select content": [
+      "Select a content": [
         "Seleziona un contenuto"
       ],
-      "Select content from THRON": [
+      "Select a content from THRON": [
         "Seleziona un contenuto da THRON"
+      ],
+      "Choose a content from your THRON Library.": [
+        "Scegli un contenuto dalla tua libreria THRON."
+      ],
+      "Quality": [
+        "Qualità"
+      ],
+      "Brightness": [
+        "Luminosità"
+      ],
+      "Contrast": [
+        "Contrasto"
+      ],
+      "Sharpness": [
+        "Nitidezza"
+      ],
+      "Color": [
+        "Colore"
       ],
       "Search": [
@@ -68 +83 @@
         "THRON OPTION"
       ],
-      "Select template": [
-        "Seleziona il template"
+      "default template": [
+        "THRON Customer Experience 1.x"
       ],
-      "Attached from THRON": [
-        "Allegato da THRON"
-      ],       
+      "Image adjustments": [
+        "Regolazioni immagine"
+      ],
+      "RTIE Params": [
+        "RTIE Params"
+      ],
       "Select embed type": [
         "Tipo di embed"
@@ -85 +103 @@
       "All folders": [
         "Tutte le cartelle"
+      ],
+      "No result for this search": [
+        "Nessun risultato per questa ricerca"
       ]
     }

thron/trunk/languages/thron-it_IT.po

@@ -1 +1 @@
 msgid ""
 msgstr ""
-"Language: it_IT\n"
-"POT-Creation-Date: 2020-05-26 16:27+0000\n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
-"PO-Revision-Date: 2020-05-26 16:29+0000\n"
-"X-Generator: Loco https://localise.biz/\n"
 "Project-Id-Version: THRON\n"
 "Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2020-05-26 16:27+0000\n"
+"PO-Revision-Date: 2021-06-22 10:45+0200\n"
 "Last-Translator: \n"
 "Language-Team: Italiano\n"
+"Language: it_IT\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"X-Loco-Version: 2.3.4; wp-5.4.1"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Poedit 2.4.3\n"
+"X-Loco-Version: 2.3.4; wp-5.4.1\n"
+
+#: admin/class-thron-admin.php:567 admin/class-thron-admin.php:1456
+msgid "Edit image on THRON"
+msgstr "Modifica l'immagine in THRON"
+
+#: admin/class-thron-admin.php:2628
+msgid "Upload the content in THRON"
+msgstr "Carica il contenuto su THRON"
+
+#: admin/class-thron-admin.php:2634
+msgid "upload the content in THRON"
+msgstr "carica il contenuto su THRON"
 
 #: admin/class-thron-admin.php:276
@@ -167 +179 @@
 "L'applicazione non è configurata correttamente. Contatta il supporto tecnico."
 
+#: Content type: Videos
+msgid "Videos"
+msgstr "Video"
+
+#: Content type: Images
+msgid "Images"
+msgstr "Immagini"
+
+#: Content type: Documents
+msgid "Document (Other)"
+msgstr "Documenti (altro)"
+
 #. Description of the plugin
 msgid ""
@@ -178 +202 @@
 msgid "https://www.thron.com"
 msgstr "https://www.thron.com"
+
+#~ msgid "Unable to get meta information for file."
+#~ msgstr "Impossibile ottenere le informazioni meta per questo file."

thron/trunk/languages/thron.pot

@@ -7 +7 @@
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: Loco https://localise.biz/"
+
+#: admin/class-thron-admin.php:567 admin/class-thron-admin.php:1456
+msgid "Edit image on THRON"
+msgstr ""
+
+#: admin/class-thron-admin.php:2628
+msgid "Upload the content in THRON"
+msgstr ""
+
+#: admin/class-thron-admin.php:2634
+msgid "upload the content in THRON"
+msgstr ""
 
 #: admin/class-thron-admin.php:276
@@ -155 +167 @@
 msgstr ""
 
+#: Content type: Videos
+msgid "Videos"
+msgstr ""
+
+#: Content type: Images
+msgid "Images"
+msgstr ""
+
+#: Content type: Documents
+msgid "Document (Other)"
+msgstr ""
+
 #. Description of the plugin
 msgid ""

thron/trunk/public/class-thron-public.php

@@ -90 +90 @@
         $contentID   = $atts['contentid'];
         $embedCodeId = $atts['embedcodeid'];
+        $scalemode = $atts['scalemode'];
+        $quality = $atts['quality'];
+        $brightness = $atts['brightness'];
+        $contrast = $atts['contrast'];
+        $sharpness = $atts['sharpness'];
+        $color = $atts['color'];
+
+        if($scalemode == 'manual'){
+            $cropx = $atts['cropx'];
+            $cropy = $atts['cropy'];
+            $cropw = $atts['cropw'];
+            $croph = $atts['croph'];
+        }
 
         $aspectRatio      = $atts['aspectratio'] ? $atts['aspectratio'] : 75;
@@ -188 +201 @@
     }
 
+    public function add_tci_class( $block_content, $block ) {
+
+        if ( 'core/image' === $block['blockName'] 
+                || 'core/gallery' === $block['blockName']
+                || 'core/media-text' === $block['blockName']
+                || 'core/cover' === $block['blockName']) {
+            $block_content = str_replace('wp-image-', 'tci wp-image-', $block_content);
+            return $block_content;
+        }
+
+        if ( 'core/video' === $block['blockName'] ) {
+            $block_content = preg_replace_callback( '/(<video) (.*video>)/i', 
+                function ( $matches ) {
+                    return  $matches[1] .  ' class="tci" ' . $matches[2] ;
+                },
+                $block_content );
+
+            return $block_content;
+        }
+
+        if ( 'core/audio' === $block['blockName'] ) {
+            $block_content = preg_replace_callback( '/(<audio) (.*audio>)/i', 
+                function ( $matches ) {
+                    return  $matches[1] .  ' class="tci" ' . $matches[2] ;
+                },
+                $block_content );
+
+            return $block_content;
+        }
+
+        return $block_content;
+    }
+
     public function filter_wp_get_attachment_image_attributes( $attr, $attachment, $size ) {
 

thron/trunk/public/partials/player.php

@@ -11 +11 @@
 <script>
 
+<?php if($scalemode == 'manual') { ?>
+
     var options = {
         <?= $tracking_context ? '"contextId": "' . $tracking_context . '",' : ''; ?>
@@ -16 +18 @@
         "xcontentId": "<?= $contentID; ?>",
         "sessId": "<?= $sessId; ?>",
-        "embedCodeId": "<?= $embedCodeId; ?>"
+        "embedCodeId": "<?= $embedCodeId; ?>",
+        "rtie": {
+            "cropmode": "pixel",
+            "quality":"<?=$quality?>",
+            "scalemode":"<?=$scalemode?>",
+            <?php if($cropx != ''){?>
+            "cropx" : <?=$cropx?>,
+            "cropy" : <?=$cropy?>,
+            "croph" : <?=$croph?>,
+            "cropw" : <?=$cropw?>,
+            <?php } ?>            
+            "enhance":"brightness:<?=($brightness != '' ? $brightness : 100); ?>,contrast:<?=($contrast != '' ? $contrast : 100); ?>,sharpness:<?=($sharpness != '' ? $sharpness : 100); ?>,color:<?=($color != '' ? $color : 100); ?>"
+        }
     };
-    var player = THRONContentExperience("elementId_<?= $uniqID;  ?>", options);
+    <?php } else { ?>
 
-console.log('from frontend');
+        var options = {
+        <?= $tracking_context ? '"contextId": "' . $tracking_context . '",' : ''; ?>
+        "clientId": "<?= $clientId; ?>",
+        "xcontentId": "<?= $contentID; ?>",
+        "sessId": "<?= $sessId; ?>",
+        "embedCodeId": "<?= $embedCodeId; ?>",
+        "rtie": {
+            "cropmode": "pixel",
+            "quality":"<?=$quality?>",
+            "scalemode":"<?=$scalemode?>",
+            "enhance":"brightness:<?= $brightness; ?>,contrast:<?= $contrast; ?>,sharpness:<?= $sharpness; ?>,color:<?= $color; ?>"
+        }
+    };
+    <?php }?>
+    console.log(options)
+                /*if(player) {
+                    player.destroy();
+                }*/
 
+    //var player = 
+    THRONContentExperience("elementId_<?= $uniqID;  ?>", options);
 </script>

thron/trunk/thron.php

@@ -17 +17 @@
  * Plugin URI:
  * Description:       Select the assets to insert within your pages directly from the DAM library
- * Version:           1.0.1
+ * Version:           1.2.1
  * Author:            THRON
  * Author URI:        https://www.thron.com
@@ -36 +36 @@
  * Rename this for your plugin and update it as you release new versions.
  */
-define( 'THRON_VERSION', '1.0.7' );
+define( 'THRON_VERSION', '1.2.1' );
 define( 'THRON_PLUGIN_URL', plugin_dir_url(__FILE__) );
 define( 'THRON_PLUGIN_PATH', plugin_dir_path(__FILE__) );