Merge branch 'varun-raj:main' into main

Author: sai80082

.github/workflows/release.yml

@@ -43,6 +43,6 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push Docker image
         run: |
-          docker build --build-arg VERSION=${{ needs.release.outputs.new-release-version }} \
+          docker build --build-arg BUILD_VERSION=${{ needs.release.outputs.new-release-version }} VERSION=${{ needs.release.outputs.new-release-version }} \
           -t ghcr.io/${{ github.repository }}:${{ needs.release.outputs.new-release-version }} \
           -t ghcr.io/${{ github.repository }}:latest .

bun.lockb

@@ -10,3 +10,5 @@ services:
       - "3000:3000"
     env_file:
       - .env
+    environment:
+      - BUILD_VERSION=${BUILD_VERSION}

docker-compose.build.yml

@@ -1,10 +1,20 @@
 /** @type {import('next').NextConfig} */
+
+import { readFileSync } from 'fs';
+
+const { version } = JSON.parse(readFileSync('./package.json', 'utf-8'));
+
+console.log(`Version: ${version}`);
+
 const nextConfig = {
   reactStrictMode: false,
   output: 'standalone',
   images: {
     unoptimized: true,
-  }
+  },
+  env: {
+    VERSION: process.env.BUILD_VERSION || version,
+  },
 };
 
 export default nextConfig;

next.config.mjs

@@ -1,6 +1,6 @@
 {
   "name": "immich-power-tools",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -31,6 +31,7 @@
     "@types/cookie": "^0.6.0",
     "@types/qs": "^6.9.15",
     "axios": "^1.7.4",
+    "chrono-node": "^1.4.9",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
@@ -46,6 +47,7 @@
     "react-day-picker": "9.0.8",
     "react-dom": "^18",
     "react-grid-gallery": "^1.0.1",
+    "react-query": "^3.39.3",
     "recharts": "^2.12.7",
     "sass": "^1.77.8",
     "tailwind-merge": "^2.5.2",

package.json

@@ -8,8 +8,11 @@ import Lightbox, { SlideImage, SlideTypes } from "yet-another-react-lightbox";
 import Captions from "yet-another-react-lightbox/plugins/captions";
 import { CalendarArrowDown, CalendarArrowUp, Hourglass } from "lucide-react";
 import Video from "yet-another-react-lightbox/plugins/video";
+import { useConfig } from "@/contexts/ConfigContext";
+import LazyImage from "@/components/ui/lazy-image";
 
 export default function PotentialAlbumsAssets() {
+  const { exImmichUrl } = useConfig();
   const { startDate, selectedIds, assets, updateContext } =
     usePotentialAlbumContext();
 
@@ -37,12 +40,22 @@ export default function PotentialAlbumsAssets() {
       width: p.exifImageWidth as number,
       height: p.exifImageHeight as number,
       isSelected: selectedIds.includes(p.id),
+      tags: [
+        {
+          title: "Immich Link",
+          value: (
+            <a href={exImmichUrl + "/photos/" + p.id} target="_blank">
+              Open in Immich
+            </a>
+          ),
+        },
+      ],
     }));
   }, [assets, selectedIds]);
 
   const slides = useMemo(
     () =>
-      images.map(({ original, width, height, type, videoURL }) => ({
+      images.map(({ original, width, height, type, videoURL}) => ({
         src: original,
         width,
         height,
@@ -111,6 +124,14 @@ export default function PotentialAlbumsAssets() {
           onClick={handleClick}
           enableImageSelection={true}
           onSelect={handleSelect}
+          thumbnailImageComponent={LazyImage}
+          tagStyle={{
+            color: "white",
+            fontSize: "12px",
+            backgroundColor: "rgba(0, 0, 0)",
+            padding: "2px",
+            borderRadius: "5px",
+          }}
         />
       </div>
     </>

src/components/albums/potential-albums/PotentialAlbumsAssets.tsx

@@ -5,8 +5,10 @@ import {
 import React, { use, useEffect, useState } from "react";
 import PotentialDateItem from "./PotentialDateItem";
 import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
+import { useRouter } from "next/router";
 
 export default function PotentialAlbumsDates() {
+  const router = useRouter();
   const { updateContext } = usePotentialAlbumContext();
   const [dateRecords, setDateRecords] = React.useState<
     IPotentialAlbumsDatesResponse[]
@@ -25,6 +27,11 @@ export default function PotentialAlbumsDates() {
 
   const handleSelect = (date: string) => {
     updateContext({ startDate: date });
+    router.push({
+      pathname: router.pathname,
+      query: { startDate: date },
+    })
+    
   };
 
   useEffect(() => {

src/components/albums/potential-albums/PotentialAlbumsDates.tsx

@@ -18,6 +18,7 @@ import { listMissingLocationAssets } from "@/handlers/api/asset.handler";
 import { formatDate, parseDate } from "@/helpers/date.helper";
 import { addDays } from "date-fns";
 import { useConfig } from "@/contexts/ConfigContext";
+import LazyImage from "@/components/ui/lazy-image";
 
 export default function MissingLocationAssets() {
   const { exImmichUrl } = useConfig();
@@ -125,6 +126,7 @@ export default function MissingLocationAssets() {
           onClick={handleClick}
           enableImageSelection={true}
           onSelect={handleSelect}
+          thumbnailImageComponent={LazyImage}
           tagStyle={{
             color: "white",
             fontSize: "12px",

src/components/assets/missing-location/MissingLocationAssets.tsx

@@ -3,13 +3,14 @@ import { usePotentialAlbumContext } from "@/contexts/PotentialAlbumContext";
 import { IMissingLocationDatesResponse, listMissingLocationDates } from "@/handlers/api/asset.handler";
 import MissingLocationDateItem from "./MissingLocationDateItem";
 import { useMissingLocationContext } from "@/contexts/MissingLocationContext";
+import { useRouter } from "next/router";
 
 export default function MissingLocationDates() {
   const { updateContext } = useMissingLocationContext();
+  const router = useRouter();
   const [dateRecords, setDateRecords] = React.useState<
     IMissingLocationDatesResponse[]
   >([]);
-
   const [loading, setLoading] = useState(false);
 
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -23,6 +24,10 @@ export default function MissingLocationDates() {
 
   const handleSelect = (date: string) => {
     updateContext({ startDate: date });
+    router.push({
+      pathname: router.pathname,
+      query: { startDate: date },
+    });
   };
 
   useEffect(() => {

src/components/assets/missing-location/MissingLocationDates.tsx

@@ -10,11 +10,14 @@ import { ArrowRight, TriangleAlert } from "lucide-react";
 import Link from "next/link";
 import { LoginForm } from "../auth/LoginForm";
 import { useConfig } from "@/contexts/ConfigContext";
+import { queryClient } from "@/config/rQuery";
+import { QueryClientProvider } from "react-query";
 
 type RootLayoutProps = {
   children: ReactNode;
 };
 
+
 export default function RootLayout({ children }: RootLayoutProps) {
   const { immichURL, exImmichUrl } = useConfig();
   const [user, setUser] = useState<IUser | null>(null);
@@ -34,9 +37,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
       .finally(() => setLoading(false));
   };
 
-  const handleLoginCompletion = (user: IUser) => {
-    setUser(user);
-  }
+  const handleLoginCompletion = (user: IUser) => setUser(user);
 
   useEffect(() => {
     fetchData();
@@ -86,15 +87,17 @@ export default function RootLayout({ children }: RootLayoutProps) {
   if (!user) return <LoginForm onLogin={handleLoginCompletion} />;
 
   return (
-    <UserContext.Provider value={{
-      ...user,
-      updateContext: setUser,
-    }}>
-      <div className="grid max-h-screen min-h-screen w-full md:grid-cols-[200px_1fr] lg:grid-cols-[240px_1fr]">
-        <Sidebar />
-        <div className="flex flex-col">{children}</div>
-        <Toaster />
-      </div>
-    </UserContext.Provider>
+    <QueryClientProvider client={queryClient}>
+      <UserContext.Provider value={{
+        ...user,
+        updateContext: setUser,
+      }}>
+        <div className="grid max-h-screen min-h-screen w-full md:grid-cols-[200px_1fr] lg:grid-cols-[240px_1fr]">
+          <Sidebar />
+          <div className="flex flex-col">{children}</div>
+          <Toaster />
+        </div>
+      </UserContext.Provider>
+    </QueryClientProvider>
   );
 }