From 4b34f017ca3b4b5a5e7ac493c2b4b06dbcd1ae3b Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Fri, 12 Aug 2022 21:19:54 -0500
Subject: [PATCH] cosmetic change

---
 .../asset-viewer/asset-viewer.svelte          | 329 +++++++++---------
 web/src/routes/admin/index.svelte             |   4 +-
 2 files changed, 165 insertions(+), 168 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 129683565e..79b5f0d453 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,208 +1,207 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	import { fly } from 'svelte/transition';
-	import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
-	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
-	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
-	import PhotoViewer from './photo-viewer.svelte';
-	import DetailPanel from './detail-panel.svelte';
-	import { downloadAssets } from '$lib/stores/download';
-	import VideoViewer from './video-viewer.svelte';
-	import { api, AssetResponseDto, AssetTypeEnum } from '@api';
-	import { browser } from '$app/env';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
+  import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
+  import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
+  import PhotoViewer from './photo-viewer.svelte';
+  import DetailPanel from './detail-panel.svelte';
+  import { downloadAssets } from '$lib/stores/download';
+  import VideoViewer from './video-viewer.svelte';
+  import { api, AssetResponseDto, AssetTypeEnum } from '@api';
+  import { browser } from '$app/env';
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	export let asset: AssetResponseDto;
+  export let asset: AssetResponseDto;
 
-	let halfLeftHover = false;
-	let halfRightHover = false;
-	let isShowDetail = false;
+  let halfLeftHover = false;
+  let halfRightHover = false;
+  let isShowDetail = false;
 
-	onMount(() => {
-		if (browser) {
-			document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
-		}
-	});
+  onMount(() => {
+    if (browser) {
+      document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
+    }
+  });
 
-	const handleKeyboardPress = (key: string) => {
-		switch (key) {
-			case 'Escape':
-				closeViewer();
-				return;
-			case 'i':
-				isShowDetail = !isShowDetail;
-				return;
-			case 'ArrowLeft':
-				navigateAssetBackward();
-				return;
-			case 'ArrowRight':
-				navigateAssetForward();
-				return;
-		}
-	};
+  const handleKeyboardPress = (key: string) => {
+    switch (key) {
+      case 'Escape':
+        closeViewer();
+        return;
+      case 'i':
+        isShowDetail = !isShowDetail;
+        return;
+      case 'ArrowLeft':
+        navigateAssetBackward();
+        return;
+      case 'ArrowRight':
+        navigateAssetForward();
+        return;
+    }
+  };
 
-	const closeViewer = () => {
-		dispatch('close');
-	};
+  const closeViewer = () => {
+    dispatch('close');
+  };
 
-	const navigateAssetForward = (e?: Event) => {
-		e?.stopPropagation();
-		dispatch('navigate-forward');
-	};
+  const navigateAssetForward = (e?: Event) => {
+    e?.stopPropagation();
+    dispatch('navigate-forward');
+  };
 
-	const navigateAssetBackward = (e?: Event) => {
-		e?.stopPropagation();
-		dispatch('navigate-backward');
-	};
+  const navigateAssetBackward = (e?: Event) => {
+    e?.stopPropagation();
+    dispatch('navigate-backward');
+  };
 
-	const showDetailInfoHandler = () => {
-		isShowDetail = !isShowDetail;
-	};
+  const showDetailInfoHandler = () => {
+    isShowDetail = !isShowDetail;
+  };
 
-	const downloadFile = async () => {
-		try {
-			const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
-			const imageExtension = asset.originalPath.split('.')[1];
-			const imageFileName = imageName + '.' + imageExtension;
+  const downloadFile = async () => {
+    try {
+      console.log(asset.exifInfo);
+      const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
+      const imageExtension = asset.originalPath.split('.')[1];
+      const imageFileName = imageName + '.' + imageExtension;
 
-			// If assets is already download -> return;
-			if ($downloadAssets[imageFileName]) {
-				return;
-			}
+      // If assets is already download -> return;
+      if ($downloadAssets[imageFileName]) {
+        return;
+      }
 
-			$downloadAssets[imageFileName] = 0;
+      $downloadAssets[imageFileName] = 0;
 
-			const { data, status } = await api.assetApi.downloadFile(
-				asset.deviceAssetId,
-				asset.deviceId,
-				false,
-				false,
-				{
-					responseType: 'blob',
-					onDownloadProgress: (progressEvent) => {
-						if (progressEvent.lengthComputable) {
-							const total = progressEvent.total;
-							const current = progressEvent.loaded;
-							let percentCompleted = Math.floor((current / total) * 100);
+      const {data, status} = await api.assetApi.downloadFile(
+        asset.deviceAssetId,
+        asset.deviceId,
+        false,
+        false,
+        {
+          responseType: 'blob',
+          onDownloadProgress: (progressEvent) => {
+            if (progressEvent.lengthComputable) {
+              const total = progressEvent.total;
+              const current = progressEvent.loaded;
+              $downloadAssets[imageFileName] = Math.floor((current / total) * 100);
+            }
+          }
+        }
+      );
 
-							$downloadAssets[imageFileName] = percentCompleted;
-						}
-					}
-				}
-			);
+      if (!(data instanceof Blob)) {
+        return;
+      }
 
-			if (!(data instanceof Blob)) {
-				return;
-			}
+      if (status === 200) {
+        const fileUrl = URL.createObjectURL(data);
+        const anchor = document.createElement('a');
+        anchor.href = fileUrl;
+        anchor.download = imageFileName;
 
-			if (status === 200) {
-				const fileUrl = URL.createObjectURL(data);
-				const anchor = document.createElement('a');
-				anchor.href = fileUrl;
-				anchor.download = imageFileName;
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
 
-				document.body.appendChild(anchor);
-				anchor.click();
-				document.body.removeChild(anchor);
+        URL.revokeObjectURL(fileUrl);
 
-				URL.revokeObjectURL(fileUrl);
-
-				// Remove item from download list
-				setTimeout(() => {
-					const copy = $downloadAssets;
-					delete copy[imageFileName];
-					$downloadAssets = copy;
-				}, 2000);
-			}
-		} catch (e) {
-			console.log('Error downloading file ', e);
-		}
-	};
+        // Remove item from download list
+        setTimeout(() => {
+          const copy = $downloadAssets;
+          delete copy[imageFileName];
+          $downloadAssets = copy;
+        }, 2000);
+      }
+    } catch (e) {
+      console.log('Error downloading file ', e);
+    }
+  };
 </script>
 
 <section
-	id="immich-asset-viewer"
-	class="fixed h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4  "
+        id="immich-asset-viewer"
+        class="fixed h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4  "
 >
-	<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
-		<AsserViewerNavBar
-			on:goBack={closeViewer}
-			on:showDetail={showDetailInfoHandler}
-			on:download={downloadFile}
-		/>
-	</div>
+    <div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
+        <AsserViewerNavBar
+                on:goBack={closeViewer}
+                on:showDetail={showDetailInfoHandler}
+                on:download={downloadFile}
+        />
+    </div>
 
-	<div
-		class={`row-start-2 row-span-end col-start-1 col-span-2 flex place-items-center hover:cursor-pointer w-3/4 ${
-			asset.type == AssetTypeEnum.Video ? '' : 'z-[999]'
+    <div
+            class={`row-start-2 row-span-end col-start-1 col-span-2 flex place-items-center hover:cursor-pointer w-3/4 ${
+			asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
 		}`}
-		on:mouseenter={() => {
+            on:mouseenter={() => {
 			halfLeftHover = true;
 			halfRightHover = false;
 		}}
-		on:mouseleave={() => {
+            on:mouseleave={() => {
 			halfLeftHover = false;
 		}}
-		on:click={navigateAssetBackward}
-	>
-		<button
-			class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000]  text-gray-500 mx-4"
-			class:navigation-button-hover={halfLeftHover}
-			on:click={navigateAssetBackward}
-		>
-			<ChevronLeft size="36" />
-		</button>
-	</div>
+            on:click={navigateAssetBackward}
+    >
+        <button
+                class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000]  text-gray-500 mx-4"
+                class:navigation-button-hover={halfLeftHover}
+                on:click={navigateAssetBackward}
+        >
+            <ChevronLeft size="36"/>
+        </button>
+    </div>
 
-	<div class="row-start-1 row-span-full col-start-1 col-span-4">
-		{#key asset.id}
-			{#if asset.type == AssetTypeEnum.Image}
-				<PhotoViewer assetId={asset.id} deviceId={asset.deviceId} on:close={closeViewer} />
-			{:else}
-				<VideoViewer assetId={asset.id} on:close={closeViewer} />
-			{/if}
-		{/key}
-	</div>
+    <div class="row-start-1 row-span-full col-start-1 col-span-4">
+        {#key asset.id}
+            {#if asset.type === AssetTypeEnum.Image}
+                <PhotoViewer assetId={asset.id} deviceId={asset.deviceId} on:close={closeViewer}/>
+            {:else}
+                <VideoViewer assetId={asset.id} on:close={closeViewer}/>
+            {/if}
+        {/key}
+    </div>
 
-	<div
-		class={`row-start-2 row-span-full col-start-3 col-span-2 flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end ${
-			asset.type == AssetTypeEnum.Video ? '' : 'z-[500]'
+    <div
+            class={`row-start-2 row-span-full col-start-3 col-span-2 flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end ${
+			asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
 		}`}
-		on:click={navigateAssetForward}
-		on:mouseenter={() => {
+            on:click={navigateAssetForward}
+            on:mouseenter={() => {
 			halfLeftHover = false;
 			halfRightHover = true;
 		}}
-		on:mouseleave={() => {
+            on:mouseleave={() => {
 			halfRightHover = false;
 		}}
-	>
-		<button
-			class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4 z-[1000]"
-			class:navigation-button-hover={halfRightHover}
-			on:click={navigateAssetForward}
-		>
-			<ChevronRight size="36" />
-		</button>
-	</div>
+    >
+        <button
+                class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4 z-[1000]"
+                class:navigation-button-hover={halfRightHover}
+                on:click={navigateAssetForward}
+        >
+            <ChevronRight size="36"/>
+        </button>
+    </div>
 
-	{#if isShowDetail}
-		<div
-			transition:fly={{ duration: 150 }}
-			id="detail-panel"
-			class="bg-immich-bg w-[360px] row-span-full transition-all "
-			translate="yes"
-		>
-			<DetailPanel {asset} on:close={() => (isShowDetail = false)} />
-		</div>
-	{/if}
+    {#if isShowDetail}
+        <div
+                transition:fly={{ duration: 150 }}
+                id="detail-panel"
+                class="bg-immich-bg w-[360px] row-span-full transition-all "
+                translate="yes"
+        >
+            <DetailPanel {asset} on:close={() => (isShowDetail = false)}/>
+        </div>
+    {/if}
 </section>
 
 <style>
-	.navigation-button-hover {
-		background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-		color: rgb(55 65 81 / var(--tw-text-opacity));
-		transition: all 150ms;
-	}
+    .navigation-button-hover {
+        background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+        color: rgb(55 65 81 / var(--tw-text-opacity));
+        transition: all 150ms;
+    }
 </style>
diff --git a/web/src/routes/admin/index.svelte b/web/src/routes/admin/index.svelte
index 8220a7c3f7..35ec3a691f 100644
--- a/web/src/routes/admin/index.svelte
+++ b/web/src/routes/admin/index.svelte
@@ -12,10 +12,8 @@
     }
 
     try {
-
-
       const user: UserResponseDto = await fetch('/data/user/get-my-user-info').then((r) => r.json());
-      const allUsers: UserResponseDto[] = await fetch<UserResponseDto[]>('/data/user/get-all-users?isAll=false').then((r) => r.json());
+      const allUsers: UserResponseDto[] = await fetch('/data/user/get-all-users?isAll=false').then((r) => r.json());
 
       if (!user.isAdmin) {
         return {