Reduce amount of renders

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

@@ -1,20 +1,21 @@
+import { Signal, useComputed } from '@preact/signals-react';
 import React from 'react';
 
-export function TimeDisplay(props: { time: number; }) {
+export function TimeDisplay(props: { time: Signal<number>; }) {
 	const { time } = props;
 
 	function pad(num: number) {
-		const test = '00' + num;
-		return (test).substring(test.length - 2);
+		const str = '00' + num;
+		return (str).substring(str.length - 2);
 	}
 
-	const hours = Math.floor(time / 3600);
-	const minutes = Math.floor(time % 3600 / 60);
-	const seconds = Math.floor(time % 3600 % 60);
+	const hours = useComputed(() => pad(Math.floor(time.value / 3600)));
+	const minutes = useComputed(() => pad(Math.floor(time.value % 3600 / 60)));
+	const seconds = useComputed(() => pad(Math.floor(time.value % 3600 % 60)));
 
 	return (
 		<div>
-			{`${pad(hours)}:${pad(minutes)}:${pad(seconds)}`}
+			{hours}:{minutes}:{seconds}
 		</div>
 	);
 }

packages/ui/src/components/atoms/index.ts

@@ -1,4 +1,5 @@
 export { ErrorBoundary } from './ErrorBoundary';
+export { FileInfoDisplay } from './FileInfoDisplay';
 export { FileInput } from './FileInput';
 export { FormList } from './FormList';
 export { Identicon } from './Identicon';
@@ -8,3 +9,4 @@ export { SelectInput } from './SelectInput';
 export { Spacer } from './Spacer';
 export { TextInput } from './TextInput';
 export { ThemeToggle } from './ThemeToggle';
+export { TimeDisplay } from './TimeDisplay';

packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.tsx

@@ -7,9 +7,8 @@ import React from 'react';
 import shaka from 'shaka-player';
 import { useService } from '../../../context';
 import { useHotkey } from '../../../hooks';
-import { FileInfoDisplay } from '../../atoms/FileInfoDisplay';
+import { FileInfoDisplay, TimeDisplay } from '../../atoms';
 import styles from './VideoPlayer.module.css';
-import { TimeDisplay } from '../../atoms/TimeDisplay';
 
 function createShakaIpfsPlugin(ipfs: IIpfsService): shaka.extern.SchemePlugin {
 	return async (uri: string, request: shaka.extern.Request, requestType: shaka.net.NetworkingEngine.RequestType, progressUpdated: shaka.extern.ProgressUpdated, headersReceived: shaka.extern.HeadersReceived, config: shaka.extern.SchemePluginConfig) => {
@@ -168,20 +167,16 @@ export function VideoPlayer(props: { file: IVideoFile; autoPlay?: boolean; }) {
 	useHotkey({ key: 'F' }, () => toggleFullScreen());
 	useHotkey({ key: 'Space' }, () => togglePlay());
 
-	const progressBar = useComputed(() => (
-		<div className={styles.progress} ref={(ref) => progressRef.value = ref}>
-			<div className={styles.progressFilled} ref={(ref) => progressBarRef.value = ref} />
-		</div>
-	));
-
 	const progress = useComputed(() => (
 		<div className={styles.progressContainer}>
 			<TimeDisplay
-				time={currentPlayTime.value}
+				time={currentPlayTime}
 			/>
-			{progressBar}
+			<div className={styles.progress} ref={(ref) => progressRef.value = ref}>
+				<div className={styles.progressFilled} ref={(ref) => progressBarRef.value = ref} />
+			</div>
 			<TimeDisplay
-				time={movieDuration.value}
+				time={movieDuration}
 			/>
 		</div>
 	));