Merge pull request #354 from openforge/safari-webp-fix

fix(app-case-study.tsx): remove force of webp for assets

Author: Wholloran

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

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

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

@@ -7,6 +7,8 @@ import { MatchResults, RouterHistory } from '@stencil/router';
   styleUrl: 'app-resources.scss',
 })
 export class AppResources {
+  // private className = localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
+
   @State() formSubmitted = false;
   @State() formSubmitting = false;
 
@@ -38,10 +40,6 @@ export class AppResources {
   };
   @Prop() match: MatchResults;
   @Prop() history: RouterHistory;
-  @Prop({ context: 'isServer' })
-  private isServer: boolean;
-
-  private className;
 
   @Listen('check')
   @Listen('valueChange')
@@ -54,8 +52,6 @@ export class AppResources {
   }
 
   componentWillLoad() {
-    this.className = !this.isServer ? (localStorage.getItem('allowWebp') === 'false' ? 'webp' : 'hero') : 'webp';
-
     if (this.match.params.source !== 'pwa-white-paper') {
       this.history.push(`/`, {});
     }
@@ -145,7 +141,7 @@ export class AppResources {
       <div id="top" class="resources">
         {/* header - hero */}
         {!this.formSubmitted ? (
-          <header class={this.className}>
+          <header class="hero">
             <div class="overlay">
               <div class="container">
                 <div class="row align-items-center">

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

@@ -1,4 +1,4 @@
-import { Component, Prop, State, Watch } from '@stencil/core';
+import { Component, State, Prop, Watch } from '@stencil/core';
 import { MatchResults, RouterHistory } from '@stencil/router';
 import { translate } from '../../services/translation.service';
 
@@ -7,10 +7,7 @@ import { translate } from '../../services/translation.service';
   styleUrl: 'app-team-landing.scss',
 })
 export class AppTeamLanding {
-  @Prop({ context: 'isServer' })
-  private isServer: boolean;
-
-  private allowWebp;
+  // private allowWebp = localStorage.getItem('allowWebp') === 'true' ? true : false;
 
   @Prop() match: MatchResults;
   @Prop() history: RouterHistory;
@@ -288,8 +285,6 @@ export class AppTeamLanding {
   }
 
   componentWillLoad() {
-    this.allowWebp = !this.isServer ? (localStorage.getItem('allowWebp') === 'false' ? 'webp' : 'hero') : 'webp';
-
     if (!this.data[this.match.params.member]) {
       this.history.push(`/`, {});
     } else {
@@ -315,10 +310,10 @@ export class AppTeamLanding {
   }
 
   changeImageFormat(img: string) {
-    if (img && this.allowWebp) {
-      const idx = img.lastIndexOf('.');
-      return `${img.substring(0, idx)}.webp`;
-    }
+    // if (img && this.allowWebp) {
+    //   const idx = img.lastIndexOf('.');
+    //   return `${img.substring(0, idx)}.webp`;
+    // }
     return img;
   }
 

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

@@ -1,17 +1,11 @@
-import { Component, Prop } from '@stencil/core';
+import { Component } from '@stencil/core';
 
 @Component({
   tag: 'app-toolbox',
   styleUrl: 'app-toolbox.scss',
 })
 export class AppToolbox {
-  @Prop({ context: 'isServer' })
-  private isServer: boolean;
-
-  private className;
-  componentWillLoad() {
-    this.className = !this.isServer ? (localStorage.getItem('allowWebp') === 'false' ? 'webp' : 'hero') : 'webp';
-  }
+  // private className = localStorage.getItem('allowWebp') === 'true' ? 'webp' : 'hero';
 
   scrollToForm() {
     const form = document.getElementById('second-content');
@@ -35,7 +29,7 @@ export class AppToolbox {
     return (
       <div class="toolbox">
         {/* header - hero */}
-        <header class={this.className}>
+        <header class="hero">
           <div class="container">
             <div class="row align-items-center">
               <div class="col-9 col-md-8 col-lg-9">