Merge branch 'main' into feat/search-filter-album/web

web/Dockerfile

@@ -1,11 +1,17 @@
 FROM node:22.16.0-alpine3.20@sha256:2289fb1fba0f4633b08ec47b94a89c7e20b829fc5679f9b7b298eaa2f1ed8b7e
 
-RUN apk add --no-cache tini
+RUN apk add --no-cache tini bash
+
 USER node
 WORKDIR /usr/src/app
-COPY --chown=node:node package*.json ./
+
+COPY --chown=node:node ./web/package* ./web/
+
+WORKDIR /usr/src/app/web
 RUN npm ci
-ENV CHOKIDAR_USEPOLLING=true
+
+ENV CHOKIDAR_USEPOLLING=true \
+  PATH="${PATH}:/usr/src/app/web/bin"
 EXPOSE 24678
 EXPOSE 3000
-ENTRYPOINT ["/sbin/tini", "--", "/bin/sh"]
+ENTRYPOINT ["tini", "--", "/bin/bash", "-c"]

web/bin/immich-web

@@ -1,10 +1,11 @@
 #!/usr/bin/env sh
 
-TYPESCRIPT_SDK=/usr/src/open-api/typescript-sdk
+TYPESCRIPT_SDK=/usr/src/app/open-api/typescript-sdk
 
 npm --prefix "$TYPESCRIPT_SDK" install
 npm --prefix "$TYPESCRIPT_SDK" run build
 
+cd /usr/src/app/web || exit 1
 
 COUNT=0
 UPSTREAM="${IMMICH_SERVER_URL:-http://immich-server:2283/}"
@@ -18,4 +19,4 @@ done
 
 echo "Connected to $UPSTREAM"
 
-node ./node_modules/.bin/vite dev --host 0.0.0.0 --port 3000
+npx vite dev --host 0.0.0.0 --port 3000

web/src/app.html

@@ -21,6 +21,11 @@
       html {
         height: 100%;
         width: 100%;
+        background-color: rgb(255, 255, 255);
+      }
+
+      html.dark {
+        background-color: rgb(10, 10, 10);
       }
 
       body,
@@ -29,6 +34,10 @@
         padding: 0;
       }
 
+      body {
+        transition: background-color 0.15s ease;
+      }
+
       @keyframes delayedVisibility {
         to {
           visibility: visible;

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -343,11 +343,12 @@
         <div class="absolute top-0 h-full w-full">
           <VideoThumbnail
             url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
+            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
             pauseIcon={mdiMotionPauseOutline}
             playIcon={mdiMotionPlayOutline}
             showTime={false}
             curve={selected}
-            playbackOnIconHover
+            playbackOnIconHover={!$playVideoThumbnailOnHover}
           />
         </div>
       {/if}