[#760] Add image titles and captions to the info panel.

.gitignore

@@ -1,3 +1,4 @@
+.angular/
 .idea/
 PiGallery2.iml
 node_modules/
@@ -30,3 +31,6 @@ test.*
 /test/cypress/screenshots/
 /extensions/
 /extension/lib/
+*.sublime-project
+*.sublime-workspace
+.DS_Store

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.16.0

angular.json

@@ -4,7 +4,8 @@
     "schematicCollections": [
       "@angular-eslint/schematics",
       "@schematics/angular"
-    ]
+    ],
+    "analytics": false
   },
   "version": 1,
   "newProjectRoot": "projects",

src/backend/model/database/enitites/MediaEntity.ts

@@ -86,6 +86,9 @@ export class MediaMetadataEntity implements MediaMetadata {
   @Column('text')
   caption: string;
 
+  @Column('text')
+  title?: string;
+
   @Column(() => MediaDimensionEntity)
   size: MediaDimensionEntity;
 

src/backend/model/fileaccess/MetadataLoader.ts

@@ -342,6 +342,9 @@ export class MetadataLoader {
               .replace(/\0/g, '')
               .trim();
           }
+          if (iptcData.object_name) {
+            metadata.title = iptcData.object_name.replace(/\0/g, '').trim();
+          }
           if (iptcData.caption) {
             metadata.caption = iptcData.caption.replace(/\0/g, '').trim();
           }

src/common/DataStructureVersion.ts

@@ -1,4 +1,4 @@
 /**
  * This version indicates that the sql/entities/*Entity.ts files got changed and the db needs to be recreated
  */
-export const DataStructureVersion = 34;
+export const DataStructureVersion = 35;

src/common/entities/MediaDTO.ts

@@ -19,6 +19,8 @@ export interface MediaMetadata {
   fileSize: number;
   keywords?: string[];
   rating?: RatingTypes;
+  title?: string;
+  caption?: string;
 }
 
 export interface MediaDimension {

src/common/entities/PhotoDTO.ts

@@ -27,6 +27,7 @@ export interface FaceRegion {
 }
 
 export interface PhotoMetadata extends MediaMetadata {
+  title?: string;
   caption?: string;
   cameraData?: CameraMetadata;
   positionData?: PositionMetaData;

src/frontend/app/app.module.ts

@@ -130,6 +130,7 @@ import {
   ionContractOutline,
   ionCopyOutline,
   ionDocumentOutline,
+  ionDocumentTextOutline,
   ionDownloadOutline,
   ionExpandOutline,
   ionFileTrayFullOutline,
@@ -243,7 +244,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionAlbumsOutline, ionSettingsOutline, ionLogOutOutline,
       ionChevronForwardOutline, ionChevronDownOutline, ionChevronBackOutline,
       ionTrashOutline, ionSaveOutline, ionAddOutline, ionRemoveOutline,
-      ionTextOutline, ionFolderOutline, ionDocumentOutline, ionImageOutline,
+      ionTextOutline, ionFolderOutline, ionDocumentOutline, ionDocumentTextOutline, ionImageOutline,
       ionPricetagOutline, ionLocationOutline,
       ionSunnyOutline, ionMoonOutline, ionVideocamOutline,
       ionInformationCircleOutline,

src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css

@@ -27,6 +27,10 @@
   padding-right: 5px;
 }
 
+.caption-body {
+  white-space: pre-wrap;
+}
+
 .yaga-map {
   width: 100%;
   height: 100%;

src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html

@@ -4,6 +4,21 @@
     <button type="button"  class="btn-close"  (click)="close()" aria-label="Close">
     </button>
   </div>
+
+  <div class="row" *ngIf="media.metadata.caption || media.metadata.title">
+    <div class="col-1 ps-0">
+      <ng-icon class="details-icon" name="ionDocumentTextOutline"></ng-icon>
+    </div>
+    <div class="col-11">
+      <h4 *ngIf="media.metadata.title">
+        {{media.metadata.title}}
+      </h4>
+      <div class="details-main" *ngIf="media.metadata.caption">
+        <div class="caption-body">{{media.metadata.caption}}</div>
+      </div>
+    </div>
+  </div>
+
   <div class="row" *ngIf="contentLoaderService.isSearchResult()">
     <div class="col-1 ps-0">
       <ng-icon class="details-icon" name="ionFolderOutline"></ng-icon>