update placeholder to use core (#289)

Author: strausr

projects/angular-cld/src/lib/cloudinary-placeholder.component.ts

@@ -7,7 +7,6 @@ import {
   Renderer2,
 } from '@angular/core';
 import {Cloudinary} from './cloudinary.service';
-import { placeholderImageOptions, predominantColorTransformPxl } from './constants';
 
 @Component({
   selector: 'cl-placeholder',
@@ -45,9 +44,9 @@ export class CloudinaryPlaceHolder implements AfterContentChecked {
 
   getPlaceholderImage() {
     if (this.type === 'predominant-color' && this.itemHeight && this.itemWidth) {
-      return this.cloudinary.url(this.publicId, {transformation: [this.options, ...predominantColorTransformPxl]});
+      return this.cloudinary.url(this.publicId, {transformation: [this.options], placeholder: 'predominant-color-pixel' || true});
     } else {
-      return this.cloudinary.url(this.publicId, {transformation: [this.options, ...(placeholderImageOptions[this.type] || placeholderImageOptions['blur'])]});
+      return this.cloudinary.url(this.publicId, {transformation: [this.options], placeholder: this.type || true});
     }
   }
 

projects/angular-cld/src/lib/constants.ts

@@ -5,21 +5,3 @@ export const accessibilityEffect = {
   'colorblind': {effect: 'assist_colorblind'}
 }
 
-export const predominantColorTransformPxl = [
-  {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
-  {crop: 'crop', width: 1, height: 1, gravity: 'north_east'},
-  {fetch_format: 'auto', quality: 'auto'}];
-
-export const predominantColorTransform  = [
-  {variables: [['$currWidth', 'w'], ['$currHeight', 'h']]},
-  {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
-  {crop: 'crop', width: 10, height: 10, gravity: 'north_east'},
-  {width: '$currWidth', height: '$currHeight', crop: 'fill'},
-  {fetch_format: 'auto', quality: 'auto'}];
-
-export const placeholderImageOptions = {
-  'vectorize': [{effect: 'vectorize:3:0.1', fetch_format: 'svg'}],
-  'pixelate': [{effect: 'pixelate', quality: 1, fetch_format: 'auto'}],
-  'blur': [{effect: 'blur:2000', quality: 1, fetch_format: 'auto'}],
-  'predominant-color': predominantColorTransform
-};