+
+ );
+}
diff --git a/apps/cast/src/components/Theatre/VideoAuditorium.tsx b/apps/cast/src/components/Theatre/VideoAuditorium.tsx
new file mode 100644
index 000000000..230d30312
--- /dev/null
+++ b/apps/cast/src/components/Theatre/VideoAuditorium.tsx
@@ -0,0 +1,53 @@
+import mime from 'mime-types';
+import { SlideshowContext } from 'pages/slideshow';
+import { useContext, useEffect, useRef } from 'react';
+
+export default function VideoAuditorium({
+ name,
+ url,
+}: {
+ name: string;
+ url: string;
+}) {
+ const { showNextSlide } = useContext(SlideshowContext);
+
+ const videoRef = useRef
+ 
+ 
{
+ setNextSlidePrerendered(true);
+ setPrerenderTime(Date.now());
+ }}
+ />
+
+
+
+
+ );
+}
diff --git a/apps/cast/src/components/Theatre/index.tsx b/apps/cast/src/components/Theatre/index.tsx
new file mode 100644
index 000000000..d2c8e6ab4
--- /dev/null
+++ b/apps/cast/src/components/Theatre/index.tsx
@@ -0,0 +1,30 @@
+import { FILE_TYPE } from 'constants/file';
+import PhotoAuditorium from './PhotoAuditorium';
+// import VideoAuditorium from './VideoAuditorium';
+
+interface fileProp {
+ fileName: string;
+ fileURL: string;
+ type: FILE_TYPE;
+}
+
+interface IProps {
+ file1: fileProp;
+ file2: fileProp;
+}
+
+export default function Theatre(props: IProps) {
+ switch (props.file1.type && props.file2.type) {
+ case FILE_TYPE.IMAGE:
+ return (
+
+
+
+ );
+}
diff --git a/apps/cast/src/pages/slideshow.tsx b/apps/cast/src/pages/slideshow.tsx
new file mode 100644
index 000000000..f38fef6fe
--- /dev/null
+++ b/apps/cast/src/pages/slideshow.tsx
@@ -0,0 +1,186 @@
+import { logError } from '@ente/shared/sentry';
+import PairedSuccessfullyOverlay from 'components/PairedSuccessfullyOverlay';
+import Theatre from 'components/Theatre';
+import { FILE_TYPE } from 'constants/file';
+import { useRouter } from 'next/router';
+import { createContext, useEffect, useState } from 'react';
+import {
+ getCastCollection,
+ getLocalFiles,
+ syncPublicFiles,
+} from 'services/cast/castService';
+import { Collection } from 'types/collection';
+import { EnteFile } from 'types/file';
+import { getPreviewableImage, isRawFileFromFileName } from 'utils/file';
+
+export const SlideshowContext = createContext<{
+ showNextSlide: () => void;
+}>(null);
+
+const renderableFileURLCache = new Map
+ 
+
+
+ + Enter this code on ente to pair this TV +
+
+ {codePending ? (
+
+ + Visit{' '} + + ente.io/cast + {' '} + for help +
+
+ 
+
+
+
+ 
+
+ `;
+ }
+}
+
+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 = `
+
+ `;
+ } else if (file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) {
+ file.html = `
+
+ 
+
+
+ `;
+ } 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;
+ }
+}
diff --git a/apps/cast/src/utils/temp/index.ts b/apps/cast/src/utils/temp/index.ts
new file mode 100644
index 000000000..589c66d55
--- /dev/null
+++ b/apps/cast/src/utils/temp/index.ts
@@ -0,0 +1,14 @@
+const CHARACTERS =
+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+export function generateTempName(length: number, suffix: string) {
+ let tempName = '';
+
+ const charactersLength = CHARACTERS.length;
+ for (let i = 0; i < length; i++) {
+ tempName += CHARACTERS.charAt(
+ Math.floor(Math.random() * charactersLength)
+ );
+ }
+ return `${tempName}-${suffix}`;
+}
diff --git a/apps/cast/src/utils/time/format.ts b/apps/cast/src/utils/time/format.ts
new file mode 100644
index 000000000..59caefa80
--- /dev/null
+++ b/apps/cast/src/utils/time/format.ts
@@ -0,0 +1,78 @@
+import i18n, { t } from 'i18next';
+
+const dateTimeFullFormatter1 = new Intl.DateTimeFormat(i18n.language, {
+ weekday: 'short',
+ month: 'short',
+ day: 'numeric',
+});
+
+const dateTimeFullFormatter2 = new Intl.DateTimeFormat(i18n.language, {
+ year: 'numeric',
+});
+const dateTimeShortFormatter = new Intl.DateTimeFormat(i18n.language, {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+});
+
+const timeFormatter = new Intl.DateTimeFormat(i18n.language, {
+ timeStyle: 'short',
+});
+
+export function formatDateFull(date: number | Date) {
+ return [dateTimeFullFormatter1, dateTimeFullFormatter2]
+ .map((f) => f.format(date))
+ .join(' ');
+}
+
+export function formatDate(date: number | Date) {
+ const withinYear =
+ new Date().getFullYear() === new Date(date).getFullYear();
+ const dateTimeFormat2 = !withinYear ? dateTimeFullFormatter2 : null;
+ return [dateTimeFullFormatter1, dateTimeFormat2]
+ .filter((f) => !!f)
+ .map((f) => f.format(date))
+ .join(' ');
+}
+
+export function formatDateTimeShort(date: number | Date) {
+ return dateTimeShortFormatter.format(date);
+}
+
+export function formatTime(date: number | Date) {
+ return timeFormatter.format(date).toUpperCase();
+}
+
+export function formatDateTimeFull(dateTime: number | Date): string {
+ return [formatDateFull(dateTime), t('at'), formatTime(dateTime)].join(' ');
+}
+
+export function formatDateTime(dateTime: number | Date): string {
+ return [formatDate(dateTime), t('at'), formatTime(dateTime)].join(' ');
+}
+
+export function formatDateRelative(date: number) {
+ const units = {
+ year: 24 * 60 * 60 * 1000 * 365,
+ month: (24 * 60 * 60 * 1000 * 365) / 12,
+ day: 24 * 60 * 60 * 1000,
+ hour: 60 * 60 * 1000,
+ minute: 60 * 1000,
+ second: 1000,
+ };
+ const relativeDateFormat = new Intl.RelativeTimeFormat(i18n.language, {
+ localeMatcher: 'best fit',
+ numeric: 'always',
+ style: 'long',
+ });
+ const elapsed = date - Date.now(); // "Math.abs" accounts for both "past" & "future" scenarios
+
+ for (const u in units)
+ if (Math.abs(elapsed) > units[u] || u === 'second')
+ return relativeDateFormat.format(
+ Math.round(elapsed / units[u]),
+ u as Intl.RelativeTimeFormatUnit
+ );
+}
diff --git a/apps/cast/src/utils/time/index.ts b/apps/cast/src/utils/time/index.ts
new file mode 100644
index 000000000..11331a21b
--- /dev/null
+++ b/apps/cast/src/utils/time/index.ts
@@ -0,0 +1,136 @@
+export interface TimeDelta {
+ hours?: number;
+ days?: number;
+ months?: number;
+ years?: number;
+}
+
+interface DateComponent