Add custom video controls

packages/desktop/src/renderer/src/main.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import 'ipmc-ui/style.css';
 
 function tryRender() {
 	if (!window.configService) {
 		setTimeout(tryRender, 100);
 	} else {
 		ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-		  <React.StrictMode>
-			<App />
-		  </React.StrictMode>
-		)
-
+			<React.StrictMode>
+				<App />
+			</React.StrictMode>
+		);
 	}
 }
 
-tryRender();
+tryRender();

packages/ui/package.json

@@ -3,16 +3,17 @@
 	"type": "module",
 	"main": "./dist/index.umd.cjs",
 	"module": "./dist/index.js",
-	"typings": "./dist/index.d.ts",
 	"types": "./dist/index.d.ts",
 	"files": [
 		"dist"
 	],
 	"exports": {
 		".": {
 			"import": "./dist/index.js",
-			"require": "./dist/index.umd.cjs"
-		}
+			"require": "./dist/index.umd.cjs",
+			"types": "./dist/index.d.ts"
+		},
+		"./style.css": "./dist/style.css"
 	},
 	"scripts": {
 		"watch": "vite build --watch --mode dev",

packages/ui/src/components/atoms/FileInfoDisplay.tsx

@@ -1,4 +1,5 @@
 import { Box, Stack, Typography } from '@mui/material';
+import { useComputed } from '@preact/signals-react';
 import { IFileInfo, isPosterFeature } from 'ipmc-interfaces';
 import React from 'react';
 import { useFileUrl } from '../../hooks';
@@ -14,7 +15,7 @@ export function FileInfoDisplay(props: { file: IFileInfo; }) {
 
 	return isPosterFeature(file) && file.posters.length > 0 ? (
 		<Stack direction={'row'} spacing={1}>
-			<img src={posterUrl.value} style={{ height: 250, flexGrow: 0 }} />
+			{useComputed(() => (<img src={posterUrl.value} style={{ height: 250, flexGrow: 0 }} />))}
 			{title}
 		</Stack>
 	) : (

packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css

@@ -0,0 +1,55 @@
+.outerContainer {
+	width: 100%;
+	height: 100%;
+	text-align: center;
+}
+
+.innerContainer {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+}
+
+.videoOverlay {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	visibility: hidden;
+	color: #fff;
+	background-color: #3232324d;
+}
+
+.innerContainer:hover .videoOverlay {
+	visibility: visible;
+}
+
+.video {
+	height: 100%;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.spacer {
+	flex-grow: 1;
+}
+
+.toolbar {
+	display: flex;
+}
+
+.progress,
+.progressFilled {
+	height: 25px;
+	background-color: darkgray;
+}
+
+.progressFilled {
+	background-color: white;
+	width: 0;
+}

packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css.d.ts

@@ -0,0 +1,11 @@
+declare const styles: {
+	readonly outerContainer: string;
+	readonly innerContainer: string;
+	readonly videoOverlay: string;
+	readonly video: string;
+	readonly spacer: string;
+	readonly toolbar: string;
+	readonly progress: string;
+	readonly progressFilled: string;
+};
+export default styles;