From 0a66e963f971360e23f8cf55695a622211da53ef Mon Sep 17 00:00:00 2001
From: Abhinav-grd <abhinavk.grd@gmail.com>
Date: Sun, 23 May 2021 05:44:02 +0530
Subject: [PATCH] added install mobile app to photoFrame

---
 src/components/PhotoFrame.tsx | 73 ++++++++++++++++++++++++++++-------
 src/pages/gallery/index.tsx   | 14 -------
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx
index 94c0a6697..ef367cc78 100644
--- a/src/components/PhotoFrame.tsx
+++ b/src/components/PhotoFrame.tsx
@@ -2,7 +2,7 @@ import router from 'next/router';
 import { DeadCenter, FILE_TYPE } from 'pages/gallery';
 import PreviewCard from 'pages/gallery/components/PreviewCard';
 import React, { useState } from 'react';
-import { Button } from 'react-bootstrap';
+import { Alert, Button } from 'react-bootstrap';
 import { File } from 'services/fileService';
 import styled from 'styled-components';
 import DownloadManager from 'services/downloadManager';
@@ -23,6 +23,7 @@ interface TimeStampListItem {
     items?: File[];
     itemStartIndex?: number;
     date?: string;
+    banner?: any;
 }
 
 const Container = styled.div`
@@ -31,7 +32,7 @@ const Container = styled.div`
     width: 100%;
     flex-wrap: wrap;
     margin: 0 auto;
-    margin-bottom: 40px;
+    margin-bottom: 1rem;
 
     .pswp-thumbnail {
         display: inline-block;
@@ -72,6 +73,7 @@ const DateContainer = styled.div`
 enum ITEM_TYPE {
     TIME = 'TIME',
     TILE = 'TILE',
+    BANNER = 'BANNER',
 }
 
 interface Props {
@@ -308,15 +310,13 @@ const PhotoFrame = ({
                                 ) {
                                     currentDate =
                                         item.metadata.creationTime / 1000;
-                                    const dateTimeFormat = new Intl.DateTimeFormat(
-                                        'en-IN',
-                                        {
+                                    const dateTimeFormat =
+                                        new Intl.DateTimeFormat('en-IN', {
                                             weekday: 'short',
                                             year: 'numeric',
                                             month: 'long',
                                             day: 'numeric',
-                                        }
-                                    );
+                                        });
                                     timeStampList.push({
                                         itemType: ITEM_TYPE.TIME,
                                         date: isSameDay(
@@ -355,6 +355,20 @@ const PhotoFrame = ({
                                     }
                                 }
                             });
+                            files.length < 30 &&
+                                timeStampList.push({
+                                    itemType: ITEM_TYPE.BANNER,
+                                    banner: (
+                                        <Alert
+                                            variant="success"
+                                            style={{
+                                                textAlign: 'center',
+                                            }}
+                                        >
+                                            {constants.INSTALL_MOBILE_APP()}
+                                        </Alert>
+                                    ),
+                                });
                             const extraRowsToRender = Math.ceil(
                                 (NO_OF_PAGES * height) / IMAGE_CONTAINER_HEIGHT
                             );
@@ -362,9 +376,9 @@ const PhotoFrame = ({
                                 <List
                                     itemSize={(index) =>
                                         timeStampList[index].itemType ===
-                                        ITEM_TYPE.TIME
-                                            ? DATE_CONTAINER_HEIGHT
-                                            : IMAGE_CONTAINER_HEIGHT
+                                        ITEM_TYPE.TILE
+                                            ? IMAGE_CONTAINER_HEIGHT
+                                            : DATE_CONTAINER_HEIGHT
                                     }
                                     height={height}
                                     width={width}
@@ -374,14 +388,35 @@ const PhotoFrame = ({
                                 >
                                     {({ index, style }) => {
                                         return (
-                                            <ListItem style={style}>
+                                            <ListItem
+                                                style={
+                                                    index ===
+                                                    timeStampList.length - 1
+                                                        ? {
+                                                              ...style,
+                                                              top: Math.max(
+                                                                  Number(
+                                                                      style.top
+                                                                  ),
+                                                                  height - 45
+                                                              ),
+                                                              height:
+                                                                  width < 450
+                                                                      ? Number(
+                                                                            style.height
+                                                                        ) * 2
+                                                                      : style.height,
+                                                          }
+                                                        : style
+                                                }
+                                            >
                                                 <ListContainer
                                                     columns={
                                                         timeStampList[index]
                                                             .itemType ===
-                                                        ITEM_TYPE.TIME
-                                                            ? 1
-                                                            : columns
+                                                        ITEM_TYPE.TILE
+                                                            ? columns
+                                                            : 1
                                                     }
                                                 >
                                                     {timeStampList[index]
@@ -394,6 +429,16 @@ const PhotoFrame = ({
                                                                 ].date
                                                             }
                                                         </DateContainer>
+                                                    ) : timeStampList[index]
+                                                          .itemType ===
+                                                      ITEM_TYPE.BANNER ? (
+                                                        <>
+                                                            {
+                                                                timeStampList[
+                                                                    index
+                                                                ].banner
+                                                            }
+                                                        </>
                                                     ) : (
                                                         timeStampList[
                                                             index
diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
index 212d83f93..fa1c7ee2f 100644
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -340,20 +340,6 @@ export default function Gallery() {
                 openFileUploader={openFileUploader}
                 loadingBar={loadingBar}
             />
-            {files.length < 30 && (
-                <Alert
-                    variant="success"
-                    style={{
-                        position: 'fixed',
-                        bottom: '1%',
-                        width: '100%',
-                        textAlign: 'center',
-                        marginBottom: '0px',
-                    }}
-                >
-                    {constants.INSTALL_MOBILE_APP()}
-                </Alert>
-            )}
             {selected.count > 0 && (
                 <SelectedFileOptions
                     addToCollectionHelper={addToCollectionHelper}