feat: adds GIF compression and conversion to video files ( mp4 and We…

…bM )
Codeinwp · Oct 21, 2019 · 04d9f7d · 04d9f7d
1 parent 99671b2
commit 04d9f7d
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 9 deletions.
diff --git a/assets/js/bundle.min.js b/assets/js/bundle.min.js
diff --git a/assets/vue/components/general.vue b/assets/vue/components/general.vue
@@ -1,5 +1,6 @@
 <template>
     <div :class="{ 'saving--option' : this.$store.state.loading }">
+        <!--Enable image replacement button -->
         <div class="field  columns">
             <label class="label column has-text-grey-dark">
                 {{strings.enable_image_replace}}
@@ -18,9 +19,31 @@
             </div>
 
         </div>
+        <!-- GIF replacement toggle button -->
+        <div class="field  columns">
+            <label class="label column has-text-grey-dark">
+                {{strings.enable_gif_replace}}
+
+                <p class="is-italic has-text-weight-normal">
+                    {{strings.gif_replacer_desc}}
+                </p>
+            </label>
+
+            <div class="column is-3 ">
+                <toggle-button :class="'has-text-dark'"
+                               v-model="gifReplacementStatus"
+                               :disabled="this.$store.state.loading"
+                               :labels="{checked: strings.enabled, unchecked: strings.disabled}"
+                               :width="80"
+                               :height="25"
+                               color="#008ec2"></toggle-button>
+            </div>
+        </div>
+        <!--Scale and lazy load toggle -->
         <div class="field  is-fullwidth columns" :class="{'is-field-disabled':isReplacerOff }">
             <label class="label column has-text-grey-dark">
                 {{strings.toggle_lazyload}}
+
                 <p class="is-italic has-text-weight-normal">
                     {{strings.lazyload_desc}}
                 </p>
@@ -36,6 +59,7 @@
                                color="#008ec2"></toggle-button>
             </div>
         </div>
+        <!-- Save changes button -->
         <div class="field  is-fullwidth columns ">
             <div class="column is-left">
                 <button @click="saveChanges()" class="button is-success is-small "
@@ -87,10 +111,20 @@
                 set: function (value) {
                     this.showSave = true;
                     this.isReplacerOff = !value;
-                    this.$emit('update-status', value)
+                    this.$emit('update-status', value);
                     this.new_data.image_replacer = value ? 'enabled' : 'disabled'
                 }
             },
+            gifReplacementStatus: {
+                set: function (value) {
+                    this.showSave = true;
+                    this.new_data.img_to_video = value ? 'enabled' : 'disabled';
+                },
+                get: function () {
+                    return !(this.site_settings.img_to_video === 'disabled');
+
+                }
+            },
             lazyLoadStatus: {
                 set: function (value) {
                     this.showSave = true;

diff --git a/inc/admin.php b/inc/admin.php
@@ -548,6 +548,8 @@ private function get_dashboard_strings() {
 				'toggle_ab_item'                    => __( 'Admin bar status', 'optimole-wp' ),
 				'toggle_lazyload'                   => __( 'Scale images & Lazy load', 'optimole-wp' ),
 				'enable_image_replace'              => __( 'Enable image replacement', 'optimole-wp' ),
+				'enable_gif_replace'                => __( 'Enable GIF replacement', 'optimole-wp'),
+                'gif_replacer_desc'                 => __( 'Replace all <img> tags that contain GIF images with <video> tags, that contain the optimized video versions of the images', 'optimole-wp'),
 				'enable_network_opt_title'          => __( 'Enable network based optimizations', 'optimole-wp' ),
 				'enable_resize_smart_title'         => __( 'Enable Smart Cropping', 'optimole-wp' ),
 				'enable_lazyload_placeholder_title' => __( 'Enable generic lazyload placeholder', 'optimole-wp' ),

diff --git a/inc/settings.php b/inc/settings.php
@@ -111,6 +111,7 @@ public function parse_settings( $new_settings ) {
 				case 'network_optimization':
 				case 'lazyload_placeholder':
 				case 'resize_smart':
+                case 'img_to_video':
 					$sanitized_value = $this->to_map_values( $value, array( 'enabled', 'disabled' ), 'enabled' );
 					break;
 				case 'max_width':
@@ -164,6 +165,7 @@ function ( $value ) {
 				default:
 					$sanitized_value = '';
 					break;
+
 			}
 
 			$sanitized[ $key ] = $sanitized_value;
@@ -263,6 +265,7 @@ public function get_site_settings() {
 			'max_height'           => $this->get( 'max_height' ),
 			'filters'              => $this->get_filters(),
 			'watermark'            => $this->get_watermark(),
+            'img_to_video'         => $this->get('img_to_video')
 		);
 	}
 

diff --git a/inc/tag_replacer.php b/inc/tag_replacer.php
@@ -106,7 +106,7 @@ public function img_to_video( $image_url , $image_tag, & $content, $toggle='disa
                         'format' => 'svg',));
 
                 $video_tag = '<video autoplay muted loop playsinline poster="' . $link_svg . '">' .
-                    '<source src="' . $link_mp4 . '">
+                              '<source src="' . $link_mp4 . '">
                                <source src="' . $link_webm . '">
 						       <source src="' . $link_webp . '">' .
                     '</video>';

diff --git a/optimole-wp.php b/optimole-wp.php
@@ -84,7 +84,8 @@ function optml() {
 	}
 
 	if ( ! defined( 'OPTML_DEBUG' ) ) {
-		define( 'OPTML_DEBUG', ( defined( 'TEST_GROUND' ) && TEST_GROUND ) ? true : false );
+		//define( 'OPTML_DEBUG', ( defined( 'TEST_GROUND' ) && TEST_GROUND ) ? true : false );
+		define( 'OPTML_DEBUG', true );
 	}
 
 	return Optml_Main::instance();