diff --git a/apps/photos/src/components/PhotoViewer/index.tsx b/apps/photos/src/components/PhotoViewer/index.tsx index 00ee35e05..d580be688 100644 --- a/apps/photos/src/components/PhotoViewer/index.tsx +++ b/apps/photos/src/components/PhotoViewer/index.tsx @@ -214,6 +214,24 @@ function PhotoViewer(props: Iprops) { }); } + const downloadLivePhotoBtn = document.getElementById( + `download-btn-${item.id}` + ) as HTMLButtonElement; + if (downloadLivePhotoBtn) { + const downloadFile = () => { + downloadFileHelper(photoSwipe.currItem); + }; + + downloadLivePhotoBtn.addEventListener('click', downloadFile); + return () => { + downloadLivePhotoBtn.removeEventListener( + 'click', + downloadFile + ); + setLivePhotoBtnOptions(defaultLivePhotoDefaultOptions); + }; + } + return () => { setLivePhotoBtnOptions(defaultLivePhotoDefaultOptions); }; diff --git a/apps/photos/src/utils/file/index.ts b/apps/photos/src/utils/file/index.ts index a0957b394..7588938b7 100644 --- a/apps/photos/src/utils/file/index.ts +++ b/apps/photos/src/utils/file/index.ts @@ -333,17 +333,22 @@ export async function getPlayableVideo( videoNameTitle: string, video: Uint8Array ) { - const isPlayable = await isPlaybackPossible( - URL.createObjectURL(new Blob([video])) - ); - if (isPlayable) { - return new Blob([video.buffer]); - } else { - addLogLine('video format not supported, converting it'); - const mp4ConvertedVideo = await ffmpegService.convertToMP4( - new File([video], videoNameTitle) + try { + const isPlayable = await isPlaybackPossible( + URL.createObjectURL(new Blob([video])) ); - return new Blob([await mp4ConvertedVideo.arrayBuffer()]); + if (isPlayable) { + return new Blob([video.buffer]); + } else { + addLogLine('video format not supported, converting it'); + const mp4ConvertedVideo = await ffmpegService.convertToMP4( + new File([video], videoNameTitle) + ); + return new Blob([await mp4ConvertedVideo.arrayBuffer()]); + } + } catch (e) { + logError(e, 'video conversion failed'); + return new Blob([video.buffer]); } } diff --git a/apps/photos/src/utils/photoFrame/index.ts b/apps/photos/src/utils/photoFrame/index.ts index cf3357c47..f5ed734d8 100644 --- a/apps/photos/src/utils/photoFrame/index.ts +++ b/apps/photos/src/utils/photoFrame/index.ts @@ -1,4 +1,5 @@ import { FILE_TYPE } from 'constants/file'; +import { t } from 'i18next'; import { EnteFile } from 'types/file'; import { MergedSourceURL } from 'types/gallery'; import { logError } from 'utils/sentry'; @@ -95,6 +96,9 @@ export async function updateFileSrcProps( [originalURL] = urls.original; } + const isPlayable = + convertedVideoURL && (await isPlaybackPossible(convertedVideoURL)); + file.w = window.innerWidth; file.h = window.innerHeight; file.isSourceLoaded = true; @@ -102,22 +106,50 @@ export async function updateFileSrcProps( file.originalVideoURL = originalVideoURL; if (file.metadata.fileType === FILE_TYPE.VIDEO) { - file.html = ` - - `; - } else if (file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) { - file.html = ` -
- -
`; + } else { + file.html = ` +
+ +
+ ${t('VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD')} + +
+
+ `; + } + } else if (file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) { + if (isPlayable) { + file.html = ` +
+ + +
+ `; + } else { + file.html = ` +
+ +
+ ${t('VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD')} + +
+
+ `; + } } else if (file.metadata.fileType === FILE_TYPE.IMAGE) { file.src = convertedImageURL; } else {