add go to ente button

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 }>) => (
+    <Button variant="outline-success">
+        <NoStyleAnchor href={href}>{children}</NoStyleAnchor>
+    </Button>
+);
+
+function GoToEnte() {
+    const [os, setOS] = useState<OS>(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 (
+        <Wrapper>
+            <ButtonWithLink href={getHookLink(os)}>
+                {getButtonText(os)}
+            </ButtonWithLink>
+        </Wrapper>
+    );
+}
+
+export default GoToEnte;

src/components/pages/sharedAlbum/OpenInEnte.tsx

@@ -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 (
-        <Wrapper onClick={redirect}>
-            <Button variant="outline-success">open in ente</Button>
-        </Wrapper>
-    );
-}
-
-export default OpenInEnte;

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<EnteFile[]>(null);
     const [publicCollection, setPublicCollection] = useState<Collection>(null);
     const appContext = useContext(AppContext);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [abuseReportFormView, setAbuseReportFormView] = useState(false);
     const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
     const [messageDialogView, setMessageDialogView] = useState(false);
@@ -107,7 +106,7 @@ export default function PublicCollectionGallery() {
                 accessedThroughSharedURL: true,
                 setDialogMessage,
             }}>
-            <OpenInEnte redirect={() => null} />
+            <GoToEnte />
 
             <CollectionInfo collection={publicCollection} />
 

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;

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;