feat: Update iOS pwa video (#4025)

* feat: Update iOS pwa video * check if can pop add to home screen menu * check which user agent is shown * remove button * add chrome check * update placeholder images * check is ios instead of safari on ios
dailydotdev · Dec 31, 2024 · 81dac20 · 81dac20
1 parent ee58d12
commit 81dac20
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/packages/shared/src/components/onboarding/OnboardingPWA.tsx b/packages/shared/src/components/onboarding/OnboardingPWA.tsx
@@ -1,17 +1,24 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import { OnboardingTitle } from './common';
-import { cloudinaryPWA, cloudinaryPWAVideo } from '../../lib/image';
+import {
+  cloudinaryPWA,
+  cloudinaryPWAChrome,
+  cloudinaryPWAVideo,
+  cloudinaryPWAVideoChrome,
+} from '../../lib/image';
 import { Typography } from '../typography/Typography';
+import { checkIsChromeOnly } from '../../lib/func';
 
 export const OnboardingPWA = (): ReactElement => {
+  const isChrome = checkIsChromeOnly();
   return (
     <>
       <div className="rounded-lg pointer-events-none absolute top-0 z-2 flex h-screen w-screen flex-col gap-4 p-6 opacity-0 backdrop-blur transition-all duration-200" />
       <video
         className="absolute top-0 max-h-screen w-full"
-        poster={cloudinaryPWA}
-        src={cloudinaryPWAVideo}
+        poster={isChrome ? cloudinaryPWAChrome : cloudinaryPWA}
+        src={isChrome ? cloudinaryPWAVideoChrome : cloudinaryPWAVideo}
         muted
         autoPlay
         loop

diff --git a/packages/shared/src/lib/func.ts b/packages/shared/src/lib/func.ts
@@ -71,18 +71,8 @@ export const isAppleDevice = (): boolean => {
   return appleDeviceMatch.test(window.navigator.platform);
 };
 
-export const isSafariOnIOS = (): boolean => {
-  const { userAgent } = navigator;
-
-  const isIOS = /iPhone|iPad/i.test(userAgent);
-  if (!isIOS) {
-    return false;
-  }
-
-  const isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
-
-  return isSafari;
-};
+export const isIOS = (): boolean =>
+  /iPhone|iPad/i.test(globalThis?.navigator.userAgent);
 
 export enum ArrowKeyEnum {
   Up = 'ArrowUp',
@@ -114,6 +104,7 @@ export const sortAlphabeticallyByProperty =
 
 export enum UserAgent {
   Chrome = 'Chrome',
+  CriOS = 'CriOS', // Chrome running on iOS
   Edge = 'Edg', // intended to be Edg, not Edge
   Android = 'Android',
 }
@@ -122,7 +113,8 @@ export const checkIsBrowser = (agent: UserAgent): boolean =>
   globalThis?.navigator?.userAgent?.includes(agent);
 
 export const checkIsChromeOnly = (): boolean =>
-  checkIsBrowser(UserAgent.Chrome) && !checkIsBrowser(UserAgent.Edge);
+  (checkIsBrowser(UserAgent.Chrome) || checkIsBrowser(UserAgent.CriOS)) &&
+  !checkIsBrowser(UserAgent.Edge);
 
 export const shuffleArray = <T>(array: T[]): T[] => {
   const newArray = array.slice();

diff --git a/packages/shared/src/lib/image.ts b/packages/shared/src/lib/image.ts
@@ -270,10 +270,16 @@ export const cloudinaryAuthBannerBackground1440w =
   'https://daily-now-res.cloudinary.com/image/upload/s--lf8LUJjq--/c_auto,g_center,w_1440/f_auto//v1732012913/login-popover-dailydev_mxb7lw';
 
 export const cloudinaryPWA =
-  'https://daily-now-res.cloudinary.com/image/upload/s--OJZMKmCg--/f_auto/v1730721076/web_-_safari_asp3ts';
+  'https://daily-now-res.cloudinary.com/image/upload/s--_kFKAft3--/f_auto/v1735045791/web_-_safari_j52hcx';
+
+export const cloudinaryPWAChrome =
+  'https://daily-now-res.cloudinary.com/image/upload/s--6ajr-Fje--/f_auto/v1735045791/web_-_chrome_we4vak';
 
 export const cloudinaryPWAVideo =
-  'https://daily-now-res.cloudinary.com/video/upload/s--0mT5rE2C--/v1733649847/web_-_safari_j81dxl.mp4';
+  'https://daily-now-res.cloudinary.com/video/upload/s--gN1-dqeq--/v1735029367/web_-_safari_e3wes4.mp4';
+
+export const cloudinaryPWAVideoChrome =
+  'https://daily-now-res.cloudinary.com/video/upload/s--RD5n9hm9--/v1735044247/web_-_chrome_xavter.mp4';
 
 export const cloudinaryOnboardingExtension = {
   chrome: {

diff --git a/packages/webapp/pages/onboarding.tsx b/packages/webapp/pages/onboarding.tsx
@@ -70,7 +70,7 @@ import { PaymentContextProvider } from '@dailydotdev/shared/src/contexts/Payment
 import { usePlusSubscription } from '@dailydotdev/shared/src/hooks/usePlusSubscription';
 import {
   checkIsBrowser,
-  isSafariOnIOS,
+  isIOS,
   UserAgent,
 } from '@dailydotdev/shared/src/lib/func';
 import { useOnboardingExtension } from '@dailydotdev/shared/src/components/onboarding/Extension/useOnboardingExtension';
@@ -184,7 +184,7 @@ export function OnboardPage(): ReactElement {
 
   const { value: PWAExperiment } = useConditionalFeature({
     feature: featureOnboardingPWA,
-    shouldEvaluate: shouldEnrollOnboardingStep && isSafariOnIOS(),
+    shouldEvaluate: shouldEnrollOnboardingStep && isIOS(),
   });
 
   const hasSelectTopics = !!feedSettings?.includeTags?.length;