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

Extract shared function

Browse source
This commit is contained in:
Manav Rathi 2024-03-23 18:43:44 +05:30
parent 47a7042d55
commit bdb2a22863
No known key found for this signature in database
5 changed files with 30 additions and 183 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/apps/cast/src/utils/file/index.ts
View file

@ -21,13 +21,13 @@ import { isArchivedFile } from "utils/magicMetadata";
import { CustomError } from "@ente/shared/error";
import { addLocalLog, addLogLine } from "@ente/shared/logging";
import { isPlaybackPossible } from "@ente/shared/media/video-playback";
import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
import { User } from "@ente/shared/user/types";
import { convertBytesToHumanReadable } from "@ente/shared/utils/size";
import isElectron from "is-electron";
import { FileTypeInfo } from "types/upload";
import ComlinkCryptoWorker from "utils/comlink/ComlinkCryptoWorker";
import { isPlaybackPossible } from "utils/photoFrame";
const WAIT_TIME_IMAGE_CONVERSION = 30 * 1000;

152
web/apps/cast/src/utils/photoFrame/index.ts
View file

@ -1,152 +0,0 @@
import { logError } from "@ente/shared/sentry";
import { FILE_TYPE } from "constants/file";
import { EnteFile } from "types/file";
export type MergedSourceURL = {
original: string;
converted: string;
};
const WAIT_FOR_VIDEO_PLAYBACK = 1 * 1000;
export async function isPlaybackPossible(url: string): Promise<boolean> {
return await new Promise((resolve) => {
const t = setTimeout(() => {
resolve(false);
}, WAIT_FOR_VIDEO_PLAYBACK);
const video = document.createElement("video");
video.addEventListener("canplay", function () {
clearTimeout(t);
video.remove(); // Clean up the video element
// also check for duration > 0 to make sure it is not a broken video
if (video.duration > 0) {
resolve(true);
} else {
resolve(false);
}
});
video.addEventListener("error", function () {
clearTimeout(t);
video.remove();
resolve(false);
});
video.src = url;
});
}
export async function playVideo(livePhotoVideo, livePhotoImage) {
const videoPlaying = !livePhotoVideo.paused;
if (videoPlaying) return;
livePhotoVideo.style.opacity = 1;
livePhotoImage.style.opacity = 0;
livePhotoVideo.load();
livePhotoVideo.play().catch(() => {
pauseVideo(livePhotoVideo, livePhotoImage);
});
}
export async function pauseVideo(livePhotoVideo, livePhotoImage) {
const videoPlaying = !livePhotoVideo.paused;
if (!videoPlaying) return;
livePhotoVideo.pause();
livePhotoVideo.style.opacity = 0;
livePhotoImage.style.opacity = 1;
}
export function updateFileMsrcProps(file: EnteFile, url: string) {
file.msrc = url;
file.isSourceLoaded = false;
file.conversionFailed = false;
file.isConverted = false;
if (file.metadata.fileType === FILE_TYPE.IMAGE) {
file.src = url;
} else {
file.html = `
<div class = 'pswp-item-container'>
<img src="${url}"/>
</div>
`;
}
}
export async function updateFileSrcProps(
file: EnteFile,
mergedURL: MergedSourceURL,
) {
const urls = {
original: mergedURL.original.split(","),
converted: mergedURL.converted.split(","),
};
let originalImageURL;
let originalVideoURL;
let convertedImageURL;
let convertedVideoURL;
let originalURL;
let isConverted;
let conversionFailed;
if (file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) {
[originalImageURL, originalVideoURL] = urls.original;
[convertedImageURL, convertedVideoURL] = urls.converted;
isConverted =
originalVideoURL !== convertedVideoURL ||
originalImageURL !== convertedImageURL;
conversionFailed = !convertedVideoURL || !convertedImageURL;
} else if (file.metadata.fileType === FILE_TYPE.VIDEO) {
[originalVideoURL] = urls.original;
[convertedVideoURL] = urls.converted;
isConverted = originalVideoURL !== convertedVideoURL;
conversionFailed = !convertedVideoURL;
} else if (file.metadata.fileType === FILE_TYPE.IMAGE) {
[originalImageURL] = urls.original;
[convertedImageURL] = urls.converted;
isConverted = originalImageURL !== convertedImageURL;
conversionFailed = !convertedImageURL;
} else {
[originalURL] = urls.original;
isConverted = false;
conversionFailed = false;
}
const isPlayable = !isConverted || (isConverted && !conversionFailed);
file.w = window.innerWidth;
file.h = window.innerHeight;
file.isSourceLoaded = true;
file.originalImageURL = originalImageURL;
file.originalVideoURL = originalVideoURL;
file.isConverted = isConverted;
file.conversionFailed = conversionFailed;
if (!isPlayable) {
return;
}
if (file.metadata.fileType === FILE_TYPE.VIDEO) {
file.html = `
<video controls onContextMenu="return false;">
<source src="${convertedVideoURL}" />
Your browser does not support the video tag.
</video>
`;
} else if (file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) {
file.html = `
<div class = 'pswp-item-container'>
<img id = "live-photo-image-${file.id}" src="${convertedImageURL}" onContextMenu="return false;"/>
<video id = "live-photo-video-${file.id}" loop muted onContextMenu="return false;">
<source src="${convertedVideoURL}" />
Your browser does not support the video tag.
</video>
</div>
`;
} else if (file.metadata.fileType === FILE_TYPE.IMAGE) {
file.src = convertedImageURL;
} else {
logError(
Error(`unknown file type - ${file.metadata.fileType}`),
"Unknown file type",
);
file.src = originalURL;
}
}

2
web/apps/photos/src/utils/file/index.ts
View file

@ -39,6 +39,7 @@ import { isArchivedFile, updateMagicMetadata } from "utils/magicMetadata";
import ComlinkCryptoWorker from "@ente/shared/crypto";
import { CustomError } from "@ente/shared/error";
import { addLocalLog, addLogLine } from "@ente/shared/logging";
import { isPlaybackPossible } from "@ente/shared/media/video-playback";
import { convertBytesToHumanReadable } from "@ente/shared/utils/size";
import isElectron from "is-electron";
import { moveToHiddenCollection } from "services/collectionService";
@ -49,7 +50,6 @@ import {
updateFilePublicMagicMetadata,
} from "services/fileService";
import { FileTypeInfo } from "types/upload";
import { isPlaybackPossible } from "utils/photoFrame";
import { default as ElectronAPIs } from "@ente/shared/electron";
import { downloadUsingAnchor } from "@ente/shared/utils";

29
web/apps/photos/src/utils/photoFrame/index.ts
View file

@ -4,35 +4,6 @@ import { LivePhotoSourceURL, SourceURLs } from "services/download";
import { EnteFile } from "types/file";
import { SetSelectedState } from "types/gallery";
const WAIT_FOR_VIDEO_PLAYBACK = 1 * 1000;
export async function isPlaybackPossible(url: string): Promise<boolean> {
return await new Promise((resolve) => {
const t = setTimeout(() => {
resolve(false);
}, WAIT_FOR_VIDEO_PLAYBACK);
const video = document.createElement("video");
video.addEventListener("canplay", function () {
clearTimeout(t);
video.remove(); // Clean up the video element
// also check for duration > 0 to make sure it is not a broken video
if (video.duration > 0) {
resolve(true);
} else {
resolve(false);
}
});
video.addEventListener("error", function () {
clearTimeout(t);
video.remove();
resolve(false);
});
video.src = url;
});
}
export async function playVideo(livePhotoVideo, livePhotoImage) {
const videoPlaying = !livePhotoVideo.paused;
if (videoPlaying) return;

28
web/packages/shared/media/video-playback.ts Normal file
View file

@ -0,0 +1,28 @@
const WAIT_FOR_VIDEO_PLAYBACK = 1 * 1000;
export async function isPlaybackPossible(url: string): Promise<boolean> {
return await new Promise((resolve) => {
const t = setTimeout(() => {
resolve(false);
}, WAIT_FOR_VIDEO_PLAYBACK);
const video = document.createElement("video");
video.addEventListener("canplay", function () {
clearTimeout(t);
video.remove(); // Clean up the video element
// also check for duration > 0 to make sure it is not a broken video
if (video.duration > 0) {
resolve(true);
} else {
resolve(false);
}
});
video.addEventListener("error", function () {
clearTimeout(t);
video.remove();
resolve(false);
});
video.src = url;
});
}