Fix server crash on bad file operation and other optimizations (#291)

* Fixed issue with generating thumbnail for video with 0 length cause undefined file and crash the server
* Added all file error handling operation
* Temporarily disabled WebSocket on the web because receiving a new upload event doesn't put the new file in the correct place. 
* Cosmetic fixed on the info panel

web/src/lib/components/shared/upload-panel.svelte

@@ -5,6 +5,8 @@
 	import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
 	import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
 	import type { UploadAsset } from '$lib/models/upload-asset';
+	import { getAssetsInfo } from '$lib/stores/assets';
+	import { session } from '$app/stores';
 
 	let showDetail = true;
 
@@ -73,8 +75,15 @@
 	}
 
 	let isUploading = false;
+	uploadAssetsStore.isUploading.subscribe((value) => {
+		isUploading = value;
 
-	uploadAssetsStore.isUploading.subscribe((value) => (isUploading = value));
+		if (isUploading == false) {
+			if ($session.user) {
+				getAssetsInfo($session.user.accessToken);
+			}
+		}
+	});
 </script>
 
 {#if isUploading}

web/src/lib/stores/assets.ts

@@ -2,8 +2,8 @@ import { writable, derived } from 'svelte/store';
 import { getRequest } from '$lib/api';
 import type { ImmichAsset } from '$lib/models/immich-asset';
 import lodash from 'lodash-es';
+import _ from 'lodash';
 import moment from 'moment';
-
 export const assets = writable<ImmichAsset[]>([]);
 
 export const assetsGroupByDate = derived(assets, ($assets) => {
@@ -14,7 +14,6 @@ export const assetsGroupByDate = derived(assets, ($assets) => {
 			.sortBy((group) => $assets.indexOf(group[0]))
 			.value();
 	} catch (e) {
-		console.log('error deriving state assets', e);
 		return [];
 	}
 });

web/src/lib/stores/websocket.ts

@@ -1,12 +1,16 @@
 import { Socket, io } from 'socket.io-client';
+import { writable } from 'svelte/store';
 import { serverEndpoint } from '../constants';
 import type { ImmichAsset } from '../models/immich-asset';
 import { assets } from './assets';
 
+let websocket: Socket;
+
 export const openWebsocketConnection = (accessToken: string) => {
 	const websocketEndpoint = serverEndpoint.replace('/api', '');
+
 	try {
-		const websocket = io(websocketEndpoint, {
+		websocket = io(websocketEndpoint, {
 			path: '/api/socket.io',
 			transports: ['polling'],
 			reconnection: true,
@@ -26,11 +30,14 @@ export const openWebsocketConnection = (accessToken: string) => {
 const listenToEvent = (socket: Socket) => {
 	socket.on('on_upload_success', (data) => {
 		const newUploadedAsset: ImmichAsset = JSON.parse(data);
-
-		assets.update((assets) => [...assets, newUploadedAsset]);
+		// assets.update((assets) => [...assets, newUploadedAsset]);
 	});
 
 	socket.on('error', (e) => {
 		console.log('Websocket Error', e);
 	});
 };
+
+export const closeWebsocketConnection = () => {
+	websocket?.close();
+};

web/src/lib/utils/file-uploader.ts

@@ -84,7 +84,7 @@ export async function fileUploader(asset: File, accessToken: string) {
 		request.upload.onload = () => {
 			setTimeout(() => {
 				uploadAssetsStore.removeUploadAsset(deviceAssetId);
-			}, 2500);
+			}, 1000);
 		};
 
 		// listen for `error` event

web/src/routes/photos/index.svelte

@@ -31,7 +31,7 @@
 
 	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
 	import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { session } from '$app/stores';
 	import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
@@ -42,7 +42,7 @@
 	import DownloadPanel from '../../lib/components/asset-viewer/download-panel.svelte';
 	import StatusBox from '../../lib/components/shared/status-box.svelte';
 	import { fileUploader } from '../../lib/utils/file-uploader';
-	import { openWebsocketConnection } from '../../lib/stores/websocket';
+	import { openWebsocketConnection, closeWebsocketConnection } from '../../lib/stores/websocket';
 
 	export let user: ImmichUser;
 	let selectedAction: AppSideBarSelection;
@@ -71,6 +71,10 @@
 		}
 	});
 
+	onDestroy(() => {
+		closeWebsocketConnection();
+	});
+
 	const thumbnailMouseEventHandler = (event: CustomEvent) => {
 		const { selectedGroupIndex }: { selectedGroupIndex: number } = event.detail;