From a648695e4489e2f9228f1d9a92e8068d964ce517 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Wed, 19 Jan 2022 12:55:15 +0530 Subject: [PATCH] add go to ente button --- src/components/pages/sharedAlbum/GoToEnte.tsx | 69 +++++++++++++++++++ .../pages/sharedAlbum/OpenInEnte.tsx | 26 ------- src/pages/shared-album/index.tsx | 5 +- src/utils/common/deviceDetection.ts | 15 ++-- src/utils/strings/englishConstants.tsx | 2 + 5 files changed, 84 insertions(+), 33 deletions(-) create mode 100644 src/components/pages/sharedAlbum/GoToEnte.tsx delete mode 100644 src/components/pages/sharedAlbum/OpenInEnte.tsx diff --git a/src/components/pages/sharedAlbum/GoToEnte.tsx b/src/components/pages/sharedAlbum/GoToEnte.tsx new file mode 100644 index 000000000..cf12cc352 --- /dev/null +++ b/src/components/pages/sharedAlbum/GoToEnte.tsx @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from 'react'; +import { Button } from 'react-bootstrap'; +import styled from 'styled-components'; +import GetDeviceOS, { OS } from 'utils/common/deviceDetection'; +import constants from 'utils/strings/constants'; + +const Wrapper = styled.div` + position: fixed; + display: flex; + align-items: center; + justify-content: center; + top: 0; + z-index: 100; + min-height: 64px; + right: 32px; + transition: opacity 1s ease; + cursor: pointer; +`; + +const NoStyleAnchor = styled.a` + text-decoration: none !important; + &:hover { + color: #fff !important; + } +`; + +export const ButtonWithLink = ({ + href, + children, +}: React.PropsWithChildren<{ href: string }>) => ( + +); + +function GoToEnte() { + const [os, setOS] = useState(OS.UNKNOWN); + + useEffect(() => { + const os = GetDeviceOS(); + setOS(os); + }, []); + + const getButtonText = (os: OS) => { + if (os === OS.ANDROID || os === OS.IOS) { + return constants.INSTALL; + } else { + return constants.SIGNUP_OR_LOGIN; + } + }; + + const getHookLink = (os: OS) => { + if (os === OS.ANDROID || os === OS.IOS) { + return 'ente.io/app'; + } else { + return 'https://web.ente.io'; + } + }; + + return ( + + + {getButtonText(os)} + + + ); +} + +export default GoToEnte; diff --git a/src/components/pages/sharedAlbum/OpenInEnte.tsx b/src/components/pages/sharedAlbum/OpenInEnte.tsx deleted file mode 100644 index a910a44d1..000000000 --- a/src/components/pages/sharedAlbum/OpenInEnte.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { Button } from 'react-bootstrap'; -import styled from 'styled-components'; - -const Wrapper = styled.div` - position: fixed; - display: flex; - align-items: center; - justify-content: center; - top: 0; - z-index: 100; - min-height: 64px; - right: 32px; - transition: opacity 1s ease; - cursor: pointer; -`; - -function OpenInEnte({ redirect }) { - return ( - - - - ); -} - -export default OpenInEnte; diff --git a/src/pages/shared-album/index.tsx b/src/pages/shared-album/index.tsx index d9acda03a..3bb3c9cfe 100644 --- a/src/pages/shared-album/index.tsx +++ b/src/pages/shared-album/index.tsx @@ -18,11 +18,11 @@ import { Collection } from 'types/collection'; import { EnteFile } from 'types/file'; import { mergeMetadata, sortFiles } from 'utils/file'; import { AppContext } from 'pages/_app'; -import OpenInEnte from 'components/pages/sharedAlbum/OpenInEnte'; import { CollectionInfo } from 'components/pages/sharedAlbum/CollectionInfo'; import ReportAbuse from 'components/pages/sharedAlbum/ReportAbuse'; import { AbuseReportForm } from 'components/pages/sharedAlbum/AbuseReportForm'; import MessageDialog, { MessageAttributes } from 'components/MessageDialog'; +import GoToEnte from 'components/pages/sharedAlbum/GoToEnte'; export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryContextType = { @@ -43,7 +43,6 @@ export default function PublicCollectionGallery() { const [publicFiles, setPublicFiles] = useState(null); const [publicCollection, setPublicCollection] = useState(null); const appContext = useContext(AppContext); - // eslint-disable-next-line @typescript-eslint/no-unused-vars const [abuseReportFormView, setAbuseReportFormView] = useState(false); const [dialogMessage, setDialogMessage] = useState(); const [messageDialogView, setMessageDialogView] = useState(false); @@ -107,7 +106,7 @@ export default function PublicCollectionGallery() { accessedThroughSharedURL: true, setDialogMessage, }}> - null} /> + diff --git a/src/utils/common/deviceDetection.ts b/src/utils/common/deviceDetection.ts index 7aee26367..795a429a2 100644 --- a/src/utils/common/deviceDetection.ts +++ b/src/utils/common/deviceDetection.ts @@ -1,3 +1,10 @@ +export enum OS { + WP = 'wp', + ANDROID = 'android', + IOS = 'ios', + UNKNOWN = 'unknown', +} + const GetDeviceOS = () => { let userAgent = ''; if ( @@ -8,19 +15,19 @@ const GetDeviceOS = () => { } // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { - return 'wp'; + return OS.WP; } if (/android/i.test(userAgent)) { - return 'android'; + return OS.ANDROID; } // iOS detection from: http://stackoverflow.com/a/9039885/177710 if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { - return 'ios'; + return OS.IOS; } - return 'unknown'; + return OS.UNKNOWN; }; export default GetDeviceOS; diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index c980d7176..fa11e0c10 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -632,6 +632,8 @@ const englishConstants = { REPORT_SUBMIT_SUCCESS_CONTENT: 'thank you, your report have been submitted', REPORT_SUBMIT_SUCCESS_TITLE: 'report sent', REPORT_SUBMIT_FAILED: 'failed to sent report, try again', + INSTALL: 'install', + SIGNUP_OR_LOGIN: 'signup / login', }; export default englishConstants;