feat: cast slideshow
This commit is contained in:
parent
993dd1e7f4
commit
ee4b091f01
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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: (
|
||||||
|
|
Loading…
Reference in a new issue