feat(web): obtainium download links page

i18n/en.json

@@ -1935,6 +1935,7 @@
   "view_album": "View Album",
   "view_all": "View All",
   "view_all_users": "View all users",
+  "view_download_links": "View download links",
   "view_in_timeline": "View in timeline",
   "view_link": "View link",
   "view_links": "View links",

server/Dockerfile

@@ -53,6 +53,7 @@ COPY --from=prod /usr/src/app/node_modules ./node_modules
 COPY --from=prod /usr/src/app/dist ./dist
 COPY --from=prod /usr/src/app/bin ./bin
 COPY --from=web /usr/src/app/build /build/www
+COPY --from=web /usr/src/app/node_modules /build/node_modules
 COPY server/resources resources
 COPY server/package.json server/package-lock.json ./
 COPY server/start*.sh ./

web/bin/immich-web

@@ -8,7 +8,7 @@ npm --prefix "$TYPESCRIPT_SDK" run build
 
 COUNT=0
 UPSTREAM="${IMMICH_SERVER_URL:-http://immich-server:2283/}"
-until wget --spider --quiet "${UPSTREAM}/api/server/config" > /dev/null 2>&1; do
+until wget --spider --quiet "${UPSTREAM}/api/server/ping" > /dev/null 2>&1; do
     if [ $((COUNT % 10)) -eq 0 ]; then
       echo "Waiting for $UPSTREAM to start..."
     fi

web/src/lib/components/utilities-page/utilities-menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { mdiContentDuplicate } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
+  import { mdiContentDuplicate, mdiLinkVariant, mdiOpenInNew } from '@mdi/js';
   import { t } from 'svelte-i18n';
 </script>
 
@@ -18,3 +18,20 @@
     {$t('review_duplicates')}
   </a>
 </div>
+<br />
+<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
+  <p class="text-xs font-medium p-4">{$t('advanced').toUpperCase()}</p>
+
+  <a
+    href={AppRoute.DOWNLOAD_LINKS}
+    target="_blank"
+    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
+  >
+    <span><Icon path={mdiLinkVariant} class="text-immich-primary dark:text-immich-dark-primary" size="24" /> </span>
+    {$t('view_download_links')}
+    <div class="flex-grow"></div>
+    <span>
+      <Icon path={mdiOpenInNew} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
+    </span>
+  </a>
+</div>

web/src/lib/constants.ts

@@ -49,6 +49,7 @@ export enum AppRoute {
 
   UTILITIES = '/utilities',
   DUPLICATES = '/utilities/duplicates',
+  DOWNLOAD_LINKS = '/download-links',
 
   FOLDERS = '/folders',
   TAGS = '/tags',

web/src/routes/(user)/+layout.ts

@@ -0,0 +1,3 @@
+// This is needed because we can't set this at a higher level or stuff breaks.
+export const ssr = false;
+export const csr = true;

web/src/routes/+layout.ts

@@ -1,7 +1,7 @@
 import { init } from '$lib/utils/server';
 import type { LayoutLoad } from './$types';
 
-export const ssr = false;
+//export const ssr = false;
 export const csr = true;
 
 export const load = (async ({ fetch }) => {

web/src/routes/admin/+layout.ts

@@ -0,0 +1,3 @@
+// This is needed because we can't set this at a higher level or stuff breaks.
+export const ssr = false;
+export const csr = true;

web/src/routes/auth/+layout.ts

@@ -0,0 +1,3 @@
+// This is needed because we can't set this at a higher level or stuff breaks.
+export const ssr = false;
+export const csr = true;

web/src/routes/download-links/+page.server.ts

@@ -0,0 +1,11 @@
+import { getAboutInfo } from '@immich/sdk';
+import type { PageServerLoad } from './$types';
+export const ssr = true;
+export const csr = false;
+export const load = (async () => {
+  // we do this before the page loads because the page is useless otherwise
+  const { version } = await getAboutInfo();
+  return {
+    version,
+  };
+}) satisfies PageServerLoad;

web/src/routes/download-links/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { PageProps } from './$types';
+
+  // load data (specifically version) from `+page.ts`
+  const { data }: PageProps = $props();
+  // initialize constants, apks and docker files are arrays so we can iterate later
+  // files should not have slashes in front (eg. `app-release.apk` not `/app-release.apk`)
+  const baseURL = 'https://github.com/immich-app/immich/releases/';
+  const APKs = [
+    'app-arm64-v8a-release.apk',
+    'app-armeabi-v7a-release.apk',
+    'app-release.apk',
+    'app-x86_64-release.apk',
+  ];
+  const dockerFiles = ['docker-compose.yml', 'example.env', 'hwaccel.ml.yml', 'hwaccel.transcoding.yml'];
+  const prometheus = 'prometheus.yml';
+
+  const downloadBaseURL = new URL('download/' + data.version + '/', baseURL);
+</script>
+
+<div>
+  <h1>GitHub Releases Page:</h1>
+  <a href={baseURL} class="underline text-sm immich-form-label" target="_blank" rel="noreferrer">
+    {data.version}
+    GitHub
+  </a>
+  <br />
+  <br />
+</div>
+<div>
+  <h1>Android APKs:</h1>
+  {#each APKs as file (file)}
+    <a href={downloadBaseURL + file} class="underline text-sm immich-form-label" target="_blank" rel="noreferrer">
+      {data.version}
+      {file}
+    </a>
+    <br />
+  {/each}
+</div>
+<br />
+<div>
+  <h1>Docker Files:</h1>
+  {#each dockerFiles as file (file)}
+    <a href={downloadBaseURL + file} class="underline text-sm immich-form-label" target="_blank" rel="noreferrer">
+      {data.version}
+      {file}
+    </a>
+    <br />
+  {/each}
+  <a href={downloadBaseURL + prometheus} class="underline text-sm immich-form-label" target="_blank" rel="noreferrer">
+    {data.version}
+    {prometheus}
+  </a>
+</div>

web/src/routes/link/+layout.ts

@@ -0,0 +1,3 @@
+// This is needed because we can't set this at a higher level or stuff breaks.
+export const ssr = false;
+export const csr = true;

web/svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-static';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import dotenv from 'dotenv';
 
@@ -15,7 +15,7 @@ const config = {
   preprocess: vitePreprocess(),
   kit: {
     adapter: adapter({
-      fallback: 'index.html',
+      //fallback: 'index.html',
       precompress: true,
     }),
     alias: {