use media-chrome

components/object-explorer/object-preview.tsx

@@ -4,6 +4,16 @@ import { addLeadingSlash } from '@/utils';
 import { useOnClickOutside } from '@/utils/hooks';
 import { XCircle } from '@phosphor-icons/react';
 import { useEffect, useRef, useState } from 'react';
+import {
+	MediaControlBar,
+	MediaController,
+	MediaFullscreenButton,
+	MediaMuteButton,
+	MediaPlayButton,
+	MediaTimeDisplay,
+	MediaTimeRange,
+	MediaVolumeRange,
+} from 'media-chrome/react';
 import { useLocation, useObjectExplorer } from '../providers';
 
 export const ObjectPreview = (): JSX.Element => {
@@ -115,12 +125,22 @@ export const ObjectPreview = (): JSX.Element => {
 				)}
 
 				{previewKey && data?.httpMetadata?.contentType?.startsWith('video') && (
-					// eslint-disable-next-line jsx-a11y/media-has-caption
-					<video
-						src={`/api/bucket/${currentBucket?.raw}${addLeadingSlash(previewKey)}`}
-						controls
-						className="max-h-[calc(100vh-10rem)] max-w-full"
-					/>
+					<MediaController>
+						{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+						<video
+							slot="media"
+							className="max-h-[calc(100vh-10rem)] max-w-full"
+							src={`/api/bucket/${currentBucket?.raw}${addLeadingSlash(previewKey)}`}
+						/>
+						<MediaControlBar>
+							<MediaPlayButton />
+							<MediaMuteButton />
+							<MediaVolumeRange />
+							<MediaTimeRange />
+							<MediaTimeDisplay />
+							<MediaFullscreenButton />
+						</MediaControlBar>
+					</MediaController>
 				)}
 			</div>
 		</dialog>

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",