Feat/next gen formats

src/components/app-img/app-img.tsx

@@ -39,14 +39,18 @@ export class Img {
         // we can just use data[0]
         if (data[0].isIntersecting) {
           this.loadSrc = this.src;
+          this.changeImageFormat();
           this.removeIntersectionObserver();
         }
       });
 
       this.io.observe(this.el);
     } else {
       // fall back to setTimeout for Safari and IE
-      setTimeout(() => (this.loadSrc = this.src), 300);
+      setTimeout(() => {
+        this.loadSrc = this.src;
+        this.changeImageFormat();
+      }, 300);
     }
   }
 
@@ -58,7 +62,7 @@ export class Img {
   }
 
   private changeImageFormat() {
-    if (this.loadSrc && (!Build.isBrowser || localStorage.getItem('allowWebp') === 'true')) {
+    if (this.loadSrc && (Build.isBrowser && localStorage.getItem('allowWebp') === 'true')) {
       const idx = this.loadSrc.lastIndexOf('.');
       const ext = this.loadSrc.substring(idx + 1, this.loadSrc.length);
       if (ext === 'png' || ext === 'jpg' || ext === 'jpeg') {
@@ -68,7 +72,6 @@ export class Img {
   }
 
   render() {
-    this.changeImageFormat();
     return <lazy-img class={{ fit: this.fit }} src={this.loadSrc} alt={this.alt} />;
   }
 }

src/pages/app-about/app-about.scss

@@ -1,7 +1,6 @@
 .about {
   font-family: 'Muli', sans-serif;
   height: 100%;
-  overflow-x: hidden;
   padding: 73px 0 0 0;
 
   h1 {

src/pages/app-case-study/app-case-study.tsx

@@ -1,11 +1,11 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Build } from '@stencil/core';
 
 @Component({
   tag: 'app-case-study',
   styleUrl: 'app-case-study.scss',
 })
 export class AppCaseStudy {
-  // private className = localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
+  private className = Build.isBrowser && localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
 
   scrollToTop() {
     const form = document.getElementsByTagName('header')[0];
@@ -28,7 +28,7 @@ export class AppCaseStudy {
   render() {
     return (
       <div class="case-study">
-        <header class="hero">
+        <header class={this.className}>
           <div class="container">
             <div class="row align-items-center">
               <div style={{ margin: 'auto' }}>

src/pages/app-home/app-home.scss

@@ -414,11 +414,13 @@
     .loudcloud {
       @include media-breakpoint-up(lg) {
         background-image: url('/assets/home-graphic-loudcloud-pattern.jpg');
+        background-position: center;
         background-size: cover;
       }
       .content-panel-image {
         @include media-breakpoint-down(md) {
           background-image: url('/assets/home-graphic-loudcloud-pattern.jpg');
+          background-position: center;
           background-size: cover;
         }
       }
@@ -427,11 +429,13 @@
     .voyage {
       @include media-breakpoint-up(lg) {
         background-image: url('/assets/home-graphic-voyage-pattern.jpg');
+        background-position: center;
         background-size: cover;
       }
       .content-panel-image {
         @include media-breakpoint-down(md) {
           background-image: url('/assets/home-graphic-voyage-pattern.jpg');
+          background-position: center;
           background-size: cover;
         }
       }
@@ -440,15 +444,52 @@
     .mobilemeasures {
       @include media-breakpoint-up(lg) {
         background-image: url('/assets/home-graphic-mobilemeasures-pattern.jpg');
+        background-position: center;
         background-size: cover;
       }
       .content-panel-image {
         @include media-breakpoint-down(md) {
           background-image: url('/assets/home-graphic-mobilemeasures-pattern.jpg');
+          background-position: center;
           background-size: cover;
         }
       }
     }
+
+    &.webp {
+      .loudcloud {
+        @include media-breakpoint-up(lg) {
+          background-image: url('/assets/home-graphic-loudcloud-pattern.webp');
+        }
+        .content-panel-image {
+          @include media-breakpoint-down(md) {
+            background-image: url('/assets/home-graphic-loudcloud-pattern.webp');
+          }
+        }
+      }
+
+      .voyage {
+        @include media-breakpoint-up(lg) {
+          background-image: url('/assets/home-graphic-voyage-pattern.webp');
+        }
+        .content-panel-image {
+          @include media-breakpoint-down(md) {
+            background-image: url('/assets/home-graphic-voyage-pattern.webp');
+          }
+        }
+      }
+
+      .mobilemeasures {
+        @include media-breakpoint-up(lg) {
+          background-image: url('/assets/home-graphic-mobilemeasures-pattern.webp');
+        }
+        .content-panel-image {
+          @include media-breakpoint-down(md) {
+            background-image: url('/assets/home-graphic-mobilemeasures-pattern.webp');
+          }
+        }
+      }
+    }
   }
 
   .process {

src/pages/app-home/app-home.tsx

@@ -22,6 +22,8 @@ export class AppHome {
   timer: any;
   currItem = 0;
 
+  private isWebpAllowed = Build.isBrowser && localStorage.getItem('allowWebp') === 'true' ? true : false;
+
   componentWillLoad() {
     if (Build.isBrowser) {
       this.getFeaturedPost();
@@ -130,7 +132,13 @@ export class AppHome {
           </div>
         </header>
 
-        <section id="work" class="work">
+        <section
+          id="work"
+          class={{
+            work: true,
+            webp: this.isWebpAllowed,
+          }}
+        >
           <div class="main-content">
             <div id="sticky-sidebar" class="sidebar">
               <div id="sticky-sidebar-inner">

src/pages/app-resources/app-resources.tsx

@@ -1,4 +1,4 @@
-import { Component, State, Prop, Listen, h } from '@stencil/core';
+import { Component, State, Prop, Listen, h, Build } from '@stencil/core';
 import { translate } from '../../services/translation.service';
 import { MatchResults, RouterHistory } from '@stencil/router';
 
@@ -7,7 +7,7 @@ import { MatchResults, RouterHistory } from '@stencil/router';
   styleUrl: 'app-resources.scss',
 })
 export class AppResources {
-  // private className = localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
+  private className = Build.isBrowser && localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
 
   @State() formSubmitted = false;
   @State() formSubmitting = false;
@@ -141,7 +141,7 @@ export class AppResources {
       <div id="top" class="resources">
         {/* header - hero */}
         {!this.formSubmitted ? (
-          <header class="hero">
+          <header class={this.className}>
             <div class="overlay">
               <div class="container">
                 <div class="row align-items-center">

src/pages/app-service-level-agreement/app-service-level-agreement.tsx

@@ -1,16 +1,14 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Build } from '@stencil/core';
 
 @Component({
   tag: 'app-service-level-agreement',
   styleUrl: 'app-service-level-agreement.scss',
 })
 export class AppServiceLevelAgreement {
+  private className: string;
 
-  private className;
   componentWillLoad() {
-    // Removing optimized assets for now
-    // this.className = !this.isServer ? (localStorage.getItem('allowWebp') === 'false' ? 'webp' : 'hero') : 'webp';
-    this.className = 'hero';
+    this.className = Build.isBrowser && localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
   }
 
   componentDidLoad() {}

src/pages/app-team-landing/app-team-landing.tsx

@@ -1,19 +1,21 @@
-import { Component, State, Prop, Watch, h } from '@stencil/core';
+import { Component, State, Prop, Watch, h, Build } from '@stencil/core';
 import { MatchResults, RouterHistory } from '@stencil/router';
 import { translate } from '../../services/translation.service';
+import { BrowserService } from '../../services/browser.services';
 
 @Component({
   tag: 'app-team-landing',
   styleUrl: 'app-team-landing.scss',
 })
 export class AppTeamLanding {
-  // private allowWebp = localStorage.getItem('allowWebp') === 'true' ? true : false;
   backgroundPhoto: string;
   headshotPhoto: string;
   @Prop() match: MatchResults;
   @Prop() history: RouterHistory;
 
   @State() chips;
+  @State() browserService: BrowserService;
+
   data = {
     'jedidiah-weller': {
       firstname: 'Jedi',
@@ -135,7 +137,7 @@ export class AppTeamLanding {
           'As Project Manager, Billy ensures that our team and your team have the resources and requirements needed in order to successfully launch your product. Heading up our quality assurance process, Billy leads the team in testing all deliverables maintaining high quality standards.',
         keywords: 'William Billy Holloran',
         url: 'https://openforge.io/about/william-holloran/',
-        image: 'https://openforge.io/assets/bios-background-billy.jpg',
+        image: 'https://openforge.io/assets/bios-background-billy.png',
       },
     },
     'luis-chacon': {
@@ -156,7 +158,7 @@ export class AppTeamLanding {
           'Luis grew up in San José, Costa Rica where he received his Bachelor’s degree in Computer Science and Informatics. Then he traveled to Italy and Spain to study a Masters in Software Engineering with a full scholarship form the European Union. Since then he has developed applications for companies, start ups and government institutions before joining our team at OpenForge.',
         keywords: 'Luis Chacon',
         url: 'https://openforge.io/about/luis-chacon/',
-        image: 'https://openforge.io/assets/bios-background-luis.jpg',
+        image: 'https://openforge.io/assets/bios-background-luis.png',
       },
     },
     'claudio-del-valle': {
@@ -388,6 +390,9 @@ export class AppTeamLanding {
     },
   };
 
+  constructor() {
+    this.browserService = new BrowserService();
+  }
   @Watch('match')
   matchHandler() {
     this.changeMetadata();
@@ -419,11 +424,15 @@ export class AppTeamLanding {
   }
 
   changeImageFormat(img: string) {
-    // if (img && this.allowWebp) {
-    //   const idx = img.lastIndexOf('.');
-    //   return `${img.substring(0, idx)}.webp`;
-    // }
-    return img;
+    let result = img;
+    if (img && (Build.isBrowser && localStorage.getItem('allowWebp') === 'true')) {
+      const idx = img.lastIndexOf('.');
+      const ext = img.substring(idx + 1, img.length);
+      if (ext === 'png' || ext === 'jpg' || ext === 'jpeg') {
+        result = `${img.substring(0, idx)}.webp`;
+      }
+    }
+    return result;
   }
 
   updateBackground() {

src/pages/app-toolbox/app-toolbox.scss

@@ -6,12 +6,7 @@
     background-image: url('/assets/toolbox-hero-img.png');
   }
 
-  .webp {
-    background-image: url('/assets/toolbox-hero-img.webp');
-  }
-
-  .hero,
-  .webp {
+  .hero {
     background-position: top center;
     background-size: cover;
     height: 100vh;

src/pages/app-toolbox/app-toolbox.tsx

@@ -5,8 +5,6 @@ import { Component, h } from '@stencil/core';
   styleUrl: 'app-toolbox.scss',
 })
 export class AppToolbox {
-  // private className = localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
-
   scrollToForm() {
     const form = document.getElementById('second-content');
     form.scrollIntoView({ block: 'start', behavior: 'smooth' });

src/pages/open-forge-app/open-forge-app.tsx

@@ -1,6 +1,7 @@
 import '@stencil/router';
-import { Component, h, Listen } from '@stencil/core';
+import { Component, h, Listen, Build } from '@stencil/core';
 import { polyfill } from 'smoothscroll-polyfill';
+import { BrowserService } from '../../services/browser.services';
 
 polyfill();
 
@@ -12,6 +13,11 @@ export class OpenForgeApp {
   mainEl: HTMLElement;
   newServiceWorker: boolean = false;
 
+  constructor() {
+    const browserService = new BrowserService();
+    browserService.check_webp(Build.isBrowser);
+  }
+
   @Listen('swUpdate', { target: 'window' })
   async onSWUpdate() {
     const registration = await navigator.serviceWorker.getRegistration();

src/services/browser.services.ts

@@ -1,6 +1,6 @@
 export class BrowserService {
   // Right now, this method can only check for lossy webp capabilities. The rest of the code for serving the proper .webp images is scattered throughout the site and is based on a boolean "allowWebp". Some refactoring later could potentially support lossless, alpha, and animation. At the time of this writing, 01-08-19, the only .webp images in the website assets are lossy.
-  check_webp(isServer) {
+  check_webp(isBrowser) {
     const kTestImages = {
       lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
       lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
@@ -12,13 +12,13 @@ export class BrowserService {
       const result = img.width > 0 && img.height > 0;
       console.log(result);
       const allowWebp = String(result);
-      if (!isServer) {
+      if (isBrowser) {
         localStorage.setItem('allowWebp', allowWebp);
       }
     };
     img.onerror = function() {
       const allowWebp = 'false';
-      if (!isServer) {
+      if (isBrowser) {
         localStorage.setItem('allowWebp', allowWebp);
       }
     };