add file not previewable notification message

apps/photos/public/locales/en/translation.json

@@ -340,7 +340,7 @@
     "CAPTION_CHARACTER_LIMIT": "5000 characters max",
     "DATE_TIME_ORIGINAL": "EXIF:DateTimeOriginal",
     "DATE_TIME_DIGITIZED": "EXIF:DateTimeDigitized",
-    "METADATA_DATE":"EXIF:MetadataDate",
+    "METADATA_DATE": "EXIF:MetadataDate",
     "CUSTOM_TIME": "Custom time",
     "REOPEN_PLAN_SELECTOR_MODAL": "Re-open plans",
     "OPEN_PLAN_SELECTOR_MODAL_FAILED": "Failed to open plans",
@@ -521,11 +521,12 @@
     "at": "at",
     "AUTH_NEXT": "next",
     "AUTH_DOWNLOAD_MOBILE_APP": "Download our mobile app to manage your secrets",
-    "HIDDEN":"Hidden",
-    "HIDE":"Hide",
-    "UNHIDE":"Unhide",
-    "UNHIDE_TO_COLLECTION":"Unhide to album",
-    "SORT_BY":"Sort by",
-    "NEWEST_FIRST":"Newest first",
-    "OLDEST_FIRST":"Oldest first"
+    "HIDDEN": "Hidden",
+    "HIDE": "Hide",
+    "UNHIDE": "Unhide",
+    "UNHIDE_TO_COLLECTION": "Unhide to album",
+    "SORT_BY": "Sort by",
+    "NEWEST_FIRST": "Newest first",
+    "OLDEST_FIRST": "Oldest first",
+    "CONVERSION_FAILED_NOTIFICATION_MESSAGE": "This file could not be previewed, click here to download the original"
 }

apps/photos/src/components/Notification.tsx

@@ -6,6 +6,8 @@ import {
     IconButton,
     Snackbar,
     Stack,
+    SxProps,
+    Theme,
     Typography,
 } from '@mui/material';
 import React from 'react';
@@ -17,9 +19,19 @@ interface Iprops {
     open: boolean;
     onClose: () => void;
     attributes: NotificationAttributes;
+    horizontal?: 'left' | 'right';
+    vertical?: 'top' | 'bottom';
+    sx?: SxProps<Theme>;
 }
 
-export default function Notification({ open, onClose, attributes }: Iprops) {
+export default function Notification({
+    open,
+    onClose,
+    horizontal,
+    vertical,
+    sx,
+    attributes,
+}: Iprops) {
     if (!attributes) {
         return <></>;
     }
@@ -37,10 +49,10 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
         <Snackbar
             open={open}
             anchorOrigin={{
-                horizontal: 'right',
-                vertical: 'bottom',
+                horizontal: horizontal ?? 'right',
+                vertical: vertical ?? 'bottom',
             }}
-            sx={{ width: '320px' }}>
+            sx={{ width: '320px', ...sx }}>
             <Button
                 color={attributes.variant}
                 onClick={handleClick}

apps/photos/src/components/PhotoViewer/index.tsx

@@ -42,7 +42,7 @@ import ChevronLeft from '@mui/icons-material/ChevronLeft';
 import { t } from 'i18next';
 import { getParsedExifData } from 'services/upload/exifService';
 import { getFileType } from 'services/typeDetectionService';
-import { ConversionFailedBtn } from './styledComponents/ConversionFailedBtn';
+import { ConversionFailedNotification } from './styledComponents/ConversionFailedNotification';
 
 interface PhotoswipeFullscreenAPI {
     enter: () => void;
@@ -556,13 +556,11 @@ function PhotoViewer(props: Iprops) {
                         </LivePhotoBtn>
                     )}
                     {conversionFailed && (
-                        <ConversionFailedBtn
+                        <ConversionFailedNotification
                             onClick={() =>
                                 downloadFileHelper(photoSwipe.currItem)
-                            }>
-                            {' '}
-                            DOWNLOAD{' '}
-                        </ConversionFailedBtn>
+                            }
+                        />
                     )}
 
                     <div className="pswp__container">

apps/photos/src/components/PhotoViewer/styledComponents/ConversionFailedBtn.tsx

@@ -1,15 +0,0 @@
-import { styled } from '@mui/material';
-export const ConversionFailedBtn = styled('button')`
-    position: absolute;
-    bottom: 6vh;
-    left: 6vh;
-    height: 40px;
-    width: 80px;
-    background: #d7d7d7;
-    outline: none;
-    border: none;
-    border-radius: 10%;
-    z-index: 10;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    }
-`;

apps/photos/src/components/PhotoViewer/styledComponents/ConversionFailedNotification.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import Notification from 'components/Notification';
+import React from 'react';
+import { t } from 'i18next';
+
+interface Iprops {
+    onClick: () => void;
+}
+
+export const ConversionFailedNotification = ({ onClick }: Iprops) => {
+    const [open, setOpen] = useState(true);
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <Notification
+            open={open}
+            onClose={handleClose}
+            attributes={{
+                variant: 'secondary',
+                message: t('CONVERSION_FAILED_NOTIFICATION_MESSAGE'),
+                onClick: onClick,
+            }}
+            horizontal="left"
+            vertical="bottom"
+            sx={{ zIndex: 4000 }}
+        />
+    );
+};

apps/photos/src/utils/file/index.ts

@@ -359,6 +359,7 @@ export async function getPlayableVideo(
 
 export async function getRenderableImage(fileName: string, imageBlob: Blob) {
     try {
+        throw Error('not implemented');
         const tempFile = new File([imageBlob], fileName);
         const { exactType } = await getFileType(tempFile);
         let convertedImageBlob: Blob;