feat: cast slideshow

This commit is contained in:
httpjamesm 2023-11-15 18:49:54 -05:00
parent 993dd1e7f4
commit ee4b091f01
No known key found for this signature in database
3 changed files with 95 additions and 6 deletions

View file

@ -4,7 +4,10 @@ export default function Document() {
return ( return (
<Html lang="en"> <Html lang="en">
<Head /> <Head />
<body> <body
style={{
margin: 0,
}}>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

View file

@ -1,11 +1,19 @@
// import { Inter } from 'next/font/google'; // import { Inter } from 'next/font/google';
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
import { syncCollections } from 'services/collectionService'; import { syncCollections } from 'services/collectionService';
import { syncFiles } from 'services/fileService'; import { syncFiles } from 'services/fileService';
import { EnteFile } from 'types/file';
import { downloadFileAsBlob } from 'utils/file';
// const inter = Inter({ subsets: ['latin'] }); // const inter = Inter({ subsets: ['latin'] });
export default function Home() { export default function Home() {
const [collectionFiles, setCollectionFiles] = useState<EnteFile[]>([]);
const [currentFile, setCurrentFile] = useState<EnteFile | undefined>(
undefined
);
const init = async () => { const init = async () => {
const collections = await syncCollections(); const collections = await syncCollections();
@ -14,19 +22,75 @@ export default function Home() {
const files = await syncFiles('normal', collections, () => {}); const files = await syncFiles('normal', collections, () => {});
console.log(files);
if (requestedCollectionID) { if (requestedCollectionID) {
const collectionFiles = files.filter( const collectionFiles = files.filter(
(file) => file.collectionID === Number(requestedCollectionID) (file) => file.collectionID === Number(requestedCollectionID)
); );
console.log('collectionFiles', collectionFiles); setCollectionFiles(collectionFiles);
} }
}; };
useEffect(() => { useEffect(() => {
init(); init();
}, []); }, []);
return <></>;
useEffect(() => {
// create interval to change slide
const interval = setInterval(() => {
// set the currentFile to the next file in the collection for the slideshow
const currentIndex = collectionFiles.findIndex(
(file) => file.id === currentFile?.id
);
const nextIndex = (currentIndex + 1) % collectionFiles.length;
const nextFile = collectionFiles[nextIndex];
setCurrentFile(nextFile);
}, 5000);
return () => {
clearInterval(interval);
};
}, [collectionFiles, currentFile]);
const [renderableFileURL, setRenderableFileURL] = useState<string>('');
const getRenderableFileURL = async () => {
const blob = await downloadFileAsBlob(currentFile as EnteFile);
const url = URL.createObjectURL(blob);
setRenderableFileURL(url);
};
useEffect(() => {
if (currentFile) {
console.log(currentFile);
getRenderableFileURL();
}
}, [currentFile]);
return (
<>
<div
style={{
width: '100vw',
height: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
}}>
<img
src={renderableFileURL}
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
/>
</div>
</>
);
} }

View file

@ -925,6 +925,28 @@ const deleteFileHelper = async (
} }
}; };
export const downloadFileAsBlob = async (file: EnteFile): Promise<Blob> => {
try {
let fileBlob: Blob;
// const fileReader = new FileReader();
const fileURL = await DownloadManager.getCachedOriginalFile(file)[0];
if (!fileURL) {
fileBlob = await new Response(
await DownloadManager.downloadFile(file)
).blob();
} else {
fileBlob = await (await fetch(fileURL)).blob();
}
const fileType = await getFileType(
new File([fileBlob], file.metadata.title)
);
fileBlob = new Blob([fileBlob], { type: fileType.mimeType });
return fileBlob;
} catch (e) {
logError(e, 'failed to download file');
}
};
const hideFilesHelper = async ( const hideFilesHelper = async (
selectedFiles: EnteFile[], selectedFiles: EnteFile[],
setHiddenFileIds: ( setHiddenFileIds: (