diff --git a/src/pages/app-resources/app-resources.tsx b/src/pages/app-resources/app-resources.tsx
index d0a8cdd0..19ab74aa 100644
--- a/src/pages/app-resources/app-resources.tsx
+++ b/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 {
{/* header - hero */}
{!this.formSubmitted ? (
-
+
diff --git a/src/pages/app-service-level-agreement/app-service-level-agreement.tsx b/src/pages/app-service-level-agreement/app-service-level-agreement.tsx
index fd905729..80b60669 100644
--- a/src/pages/app-service-level-agreement/app-service-level-agreement.tsx
+++ b/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() {}
diff --git a/src/pages/app-team-landing/app-team-landing.tsx b/src/pages/app-team-landing/app-team-landing.tsx
index 0c987130..b1cb763d 100644
--- a/src/pages/app-team-landing/app-team-landing.tsx
+++ b/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() {
diff --git a/src/pages/app-toolbox/app-toolbox.scss b/src/pages/app-toolbox/app-toolbox.scss
index 4164d170..b44905d0 100644
--- a/src/pages/app-toolbox/app-toolbox.scss
+++ b/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;
diff --git a/src/pages/app-toolbox/app-toolbox.tsx b/src/pages/app-toolbox/app-toolbox.tsx
index d220771a..73b9d823 100644
--- a/src/pages/app-toolbox/app-toolbox.tsx
+++ b/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' });
diff --git a/src/pages/open-forge-app/open-forge-app.tsx b/src/pages/open-forge-app/open-forge-app.tsx
index 584cd68c..1eba05a8 100644
--- a/src/pages/open-forge-app/open-forge-app.tsx
+++ b/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();
diff --git a/src/services/browser.services.ts b/src/services/browser.services.ts
index 2343934d..fe9cba0c 100644
--- a/src/services/browser.services.ts
+++ b/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);
}
};