Add gallery link to image lightbox (#6012)

ui/v2.5/src/core/files.ts

@@ -6,7 +6,7 @@ export interface IFile {
 }
 
 interface IObjectWithFiles {
-  files?: IFile[];
+  files?: GQL.Maybe<IFile[]>;
 }
 
 export interface IObjectWithTitleFiles extends IObjectWithFiles {

ui/v2.5/src/core/galleries.ts

@@ -6,7 +6,7 @@ interface IFile {
 }
 
 interface IGallery {
-  files: IFile[];
+  files: GQL.Maybe<IFile[]>;
   folder?: GQL.Maybe<IFile>;
 }
 

ui/v2.5/src/hooks/Lightbox/Lightbox.tsx

@@ -44,11 +44,13 @@ import {
   faSearchMinus,
   faTimes,
   faBars,
+  faImages,
 } from "@fortawesome/free-solid-svg-icons";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { useDebounce } from "../debounce";
 import { isVideo } from "src/utils/visualFile";
 import { imageTitle } from "src/core/files";
+import { galleryTitle } from "src/core/galleries";
 
 const CLASSNAME = "Lightbox";
 const CLASSNAME_HEADER = `${CLASSNAME}-header`;
@@ -62,6 +64,8 @@ const CLASSNAME_OPTIONS_INLINE = `${CLASSNAME_OPTIONS}-inline`;
 const CLASSNAME_RIGHT = `${CLASSNAME_HEADER}-right`;
 const CLASSNAME_FOOTER = `${CLASSNAME}-footer`;
 const CLASSNAME_FOOTER_LEFT = `${CLASSNAME_FOOTER}-left`;
+const CLASSNAME_FOOTER_CENTER = `${CLASSNAME_FOOTER}-center`;
+const CLASSNAME_FOOTER_RIGHT = `${CLASSNAME_FOOTER}-right`;
 const CLASSNAME_DISPLAY = `${CLASSNAME}-display`;
 const CLASSNAME_CAROUSEL = `${CLASSNAME}-carousel`;
 const CLASSNAME_INSTANT = `${CLASSNAME_CAROUSEL}-instant`;
@@ -933,14 +937,30 @@ export const LightboxComponent: React.FC<IProps> = ({
               </>
             )}
           </div>
-          <div>
+          <div className={CLASSNAME_FOOTER_CENTER}>
             {currentImage && (
-              <Link to={`/images/${currentImage.id}`} onClick={() => close()}>
+              <>
+                <Link
+                  className="image-link"
+                  to={`/images/${currentImage.id}`}
+                  onClick={() => close()}
+                >
                   {title ?? ""}
                 </Link>
+                {currentImage.galleries?.length ? (
+                  <Link
+                    className="image-gallery-link"
+                    to={`/galleries/${currentImage.galleries[0].id}`}
+                    onClick={() => close()}
+                  >
+                    <Icon icon={faImages} />
+                    {galleryTitle(currentImage.galleries[0])}
+                  </Link>
+                ) : null}
+              </>
             )}
           </div>
-          <div></div>
+          <div className={CLASSNAME_FOOTER_RIGHT}></div>
         </div>
       </>
     );

ui/v2.5/src/hooks/Lightbox/lightbox.scss

@@ -105,10 +105,25 @@
       padding-left: 1em;
     }
 
+    &-center {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding-left: 1em;
+      text-align: center;
+    }
+
     a {
       color: $text-color;
-      font-weight: bold;
       text-decoration: none;
+
+      .fa-icon {
+        margin-right: 0.5rem;
+      }
+
+      &.image-link {
+        font-weight: bold;
+      }
     }
   }
 

ui/v2.5/src/hooks/Lightbox/types.ts

@@ -14,6 +14,17 @@ interface IFiles {
   video_codec?: GQL.Maybe<string>;
 }
 
+interface IWithPath {
+  path: string;
+}
+
+export interface IGallery {
+  id: string;
+  title?: GQL.Maybe<string>;
+  files?: GQL.Maybe<IWithPath[]>;
+  folder?: GQL.Maybe<IWithPath>;
+}
+
 export interface ILightboxImage {
   id?: string;
   title?: GQL.Maybe<string>;
@@ -21,6 +32,7 @@ export interface ILightboxImage {
   o_counter?: GQL.Maybe<number>;
   paths: IImagePaths;
   visual_files?: IFiles[];
+  galleries?: GQL.Maybe<IGallery[]>;
 }
 
 export interface IChapter {