Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Update iOS pwa video #4025

Merged
merged 9 commits into from
Dec 31, 2024
Merged

feat: Update iOS pwa video #4025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e3845c1
feat: Update iOS pwa video
AmarTrebinjac Dec 24, 2024
1ec146f
check if can pop add to home screen menu
AmarTrebinjac Dec 24, 2024
6fcab00
check which user agent is shown
AmarTrebinjac Dec 24, 2024
3b60830
remove button
AmarTrebinjac Dec 24, 2024
0ed9acb
add chrome check
AmarTrebinjac Dec 24, 2024
e50a128
update placeholder images
AmarTrebinjac Dec 24, 2024
84111ac
check is ios instead of safari on ios
AmarTrebinjac Dec 24, 2024
f84dcc1
Merge branch 'main' into MI-708
AmarTrebinjac Dec 24, 2024
474289f
Merge branch 'main' into MI-708
AmarTrebinjac Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions packages/shared/src/components/onboarding/OnboardingPWA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
18 changes: 5 additions & 13 deletions packages/shared/src/lib/func.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
}
Expand All @@ -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();
Expand Down
10 changes: 8 additions & 2 deletions packages/shared/src/lib/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions packages/webapp/pages/onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down
Loading