add go to ente button
This commit is contained in:
parent
894802bc81
commit
a648695e44
69
src/components/pages/sharedAlbum/GoToEnte.tsx
Normal file
69
src/components/pages/sharedAlbum/GoToEnte.tsx
Normal file
|
@ -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;
|
|
@ -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;
|
|
@ -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} />
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue