beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added live photo button on loading

Browse source
This commit is contained in:
Rushikesh Tote 2022-02-28 10:51:55 +05:30
parent 1eee5e8a74
commit e08f416b8d
No known key found for this signature in database
GPG key ID: E4461ACF821B1DA8
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/PhotoFrame.tsx
View file

@ -288,8 +288,7 @@ const PhotoFrame = ({
h: window.innerHeight,
};
if (
(files[index].metadata.fileType === FILE_TYPE.VIDEO ||
files[index].metadata.fileType === FILE_TYPE.LIVE_PHOTO) &&
files[index].metadata.fileType === FILE_TYPE.VIDEO &&
!files[index].html
) {
files[index].html = `
@ -301,6 +300,22 @@ const PhotoFrame = ({
</div>
`;
delete files[index].src;
} else if (
files[index].metadata.fileType === FILE_TYPE.LIVE_PHOTO &&
!files[index].html
) {
files[index].html = `
<div class='video-loading'>
<button class = 'live-photo-loading-btn'>
${livePhotoBtnHTML}
</button>
<img src="${url}" />
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
`;
delete files[index].src;
}
if (
files[index].metadata.fileType === FILE_TYPE.IMAGE &&
@ -342,7 +357,9 @@ const PhotoFrame = ({
if (await isPlaybackPossible(videoURL)) {
files[index].html = `
<div class = 'live-photo-container'>
${livePhotoBtnHTML}
<button class = 'live-photo-btn'>
${livePhotoBtnHTML}
</button>
<video class = "live-photo" poster = "${imageURL}" loop muted>
<source src="${videoURL}" />
Your browser does not support the video tag.

2
src/utils/photoFrame/index.ts
View file

@ -15,7 +15,6 @@ export async function isPlaybackPossible(url: string): Promise<boolean> {
}
export const livePhotoBtnHTML = `
<button class = 'live-photo-btn'>
<svg
xmlns="http://www.w3.org/2000/svg"
height="25px"
@ -24,5 +23,4 @@ export const livePhotoBtnHTML = `
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79zM1 10.5h3v2H1zM11 .55h2V3.5h-2zm8.04 2.495l1.408 1.407-1.79 1.79-1.407-1.408zm-1.8 15.115l1.79 1.8 1.41-1.41-1.8-1.79zM20 10.5h3v2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm-1 4h2v2.95h-2zm-7.45-.96l1.41 1.41 1.79-1.8-1.41-1.41z" />
</svg> LIVE
</button>
`;