use media-chrome

components/object-explorer/object-preview-inner.tsx

@@ -4,6 +4,16 @@ import { memo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useLocation } from '../providers';
 import { getFileIcon } from './file-icons';
+import {
+	MediaControlBar,
+	MediaController,
+	MediaFullscreenButton,
+	MediaMuteButton,
+	MediaPlayButton,
+	MediaTimeDisplay,
+	MediaTimeRange,
+	MediaVolumeRange,
+} from 'media-chrome/react';
 
 type Props = {
 	className?: string;
@@ -48,6 +58,20 @@ export const ObjectPreviewInner = memo(
 					<>
 						{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
 						<video src={itemApiSrc} className="z-20 h-full w-full object-contain" />
+						<MediaController>
+							<video
+								slot="media"
+								src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
+							/>
+							<MediaControlBar>
+								<MediaPlayButton />
+								<MediaMuteButton />
+								<MediaVolumeRange />
+								<MediaTimeRange />
+								<MediaTimeDisplay />
+								<MediaFullscreenButton />
+							</MediaControlBar>
+						</MediaController>
 						<FallbackIcon type={itemType} />
 					</>
 				);

package.json

@@ -25,8 +25,10 @@
 		"@tanstack/react-form": "^0.0.12",
 		"@tanstack/react-table": "^8.9.3",
 		"@tanstack/react-virtual": "3.0.0-beta.56",
-		"cf-bindings-proxy": "0.5.0",
+		"better-sqlite3": "^11.5.0",
+		"cf-bindings-proxy": "0.7.1",
 		"kysely": "^0.26.3",
+		"media-chrome": "^4.3.1",
 		"next": "14.2.4",
 		"next-auth": "0.0.0-manual.ffd05533",
 		"next-safe-action": "^7.1.3",
@@ -41,6 +43,7 @@
 		"@cloudflare/next-on-pages": "beta",
 		"@cloudflare/workers-types": "^4.20240620.0",
 		"@tsconfig/strictest": "^2.0.1",
+		"@types/better-sqlite3": "^7.6.12",
 		"@types/node": "20.5.6",
 		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",