necessary changes for hooram/ownphotos@8a13cea

Author: Hooram Nam

src/actions/photosActions.js

@@ -162,7 +162,7 @@ export function setPhotosPublic(image_hashes, val_public) {
           // console.log(image_hashes.map(ih=>{return serverAddress+'/media/photos/'+ih+'.jpg'}).join(' '))
           const linksToCopy = image_hashes
             .map(ih => {
-              return serverAddress + "/media/photos/" + ih + ".jpg";
+              return serverAddress.slice(2,serverAddress.length) + "/media/photos/" + ih + ".jpg";
             })
             .join(" ");
 

src/actions/searchActions.js

@@ -15,7 +15,7 @@ export function searchPhotos(query) {
         .then((response) => {
           var groupedByDate = _.groupBy(response.data.results,(el)=>{
             if (el.exif_timestamp) {
-                return moment(el.exif_timestamp).format('YYYY-MM-DD')
+                return moment.utc(el.exif_timestamp).format('YYYY-MM-DD')
             } else {
                 return "No Timestamp"
             }

src/actions/utilActions.js

@@ -18,6 +18,20 @@ export function fetchJobList(page,page_size=10) {
   }
 }
 
+export function deleteJob(job_id,page=1,page_size=10) {
+  return function(dispatch) {
+    dispatch({ type: "DELETE_JOB" })
+    Server.delete(`jobs/${job_id}`)
+      .then(response=>{
+        dispatch(fetchJobList(page,page_size))
+        dispatch({ type: 'DELETE_JOB_FULFILLED', payload: response.data })
+      })
+      .catch(error=>{
+        dispatch({ type: 'DELETE_JOB_REJECTED', payload: error})
+      })
+  }
+}
+
 
 export function setSiteSettings(siteSettings) {
   return function(dispatch) {
@@ -189,6 +203,7 @@ export function fetchWorkerAvailability(prevRunningJob) {
           }
           if (prevRunningJob.job_type_str.toLowerCase() === "scan photos") {
             dispatch(fetchDateAlbumsPhotoHashList());
+            dispatch(rebuildSimilarityIndex())
           }
         }
 
@@ -435,3 +450,16 @@ export function fetchWordCloud() {
       });
   };
 }
+
+export function rebuildSimilarityIndex() {
+  return function(dispatch) {
+    dispatch({ type: "REBUILD_SIMILARITY_INDEX" });
+    Server.get(`rebuildfaissindex/`)
+      .then(response => {
+        dispatch({ type: "REBUILD_SIMILARITY_INDEX_FULFILLED", payload: response.data });
+      })
+      .catch(err => {
+        dispatch({ type: "REBUILD_SIMILARITY_INDEX_REJECTED", payload: err });
+      });
+  };
+}

src/components/lightBox.js

@@ -50,6 +50,7 @@ import styles from "../App.css";
 import Draggable from "react-draggable";
 import debounce from "lodash/debounce";
 import * as moment from "moment";
+import { Link } from "react-router-dom";
 
 var topMenuHeight = 55; // don't change this
 var leftMenuWidth = 85; // don't change this
@@ -100,7 +101,7 @@ export class LightBox extends Component {
       console.log("light box has got main photo detail");
       var mainSrc =
         serverAddress +
-        "/media/photos/" +
+        "/media/thumbnails_big/" +
         this.props.idx2hash.slice(this.props.lightboxImageIndex)[0] +
         ".jpg";
       var mainSrcThumbnail =
@@ -126,15 +127,15 @@ export class LightBox extends Component {
           mainSrc={mainSrc}
           nextSrc={
             serverAddress +
-            "/media/photos/" +
+            "/media/thumbnails_big/" +
             this.props.idx2hash.slice(
               (this.props.lightboxImageIndex + 1) % this.props.idx2hash.length
             )[0] +
             ".jpg"
           }
           prevSrc={
             serverAddress +
-            "/media/photos/" +
+            "/media/thumbnails_big/" +
             this.props.idx2hash.slice(
               (this.props.lightboxImageIndex - 1) % this.props.idx2hash.length
             )[0] +
@@ -266,7 +267,7 @@ export class LightBox extends Component {
                     const val = !this.props.photoDetails[image_hash].public;
                     this.props.dispatch(setPhotosPublic([image_hash], val));
                     copyToClipboard(
-                      serverAddress + "/media/photos/" + image_hash + ".jpg"
+                      serverAddress.replace('//','') + "/media/thumbnails_big/" + image_hash + ".jpg"
                     );
                   }}
                   color="black"
@@ -377,7 +378,7 @@ export class LightBox extends Component {
                           <Icon name="calendar" /> Time Taken
                         </Item.Header>
                         <Item.Description>
-                          {moment(
+                          {moment.utc(
                             this.props.photoDetails[
                               this.props.idx2hash[this.props.lightboxImageIndex]
                             ].exif_timestamp
@@ -393,6 +394,9 @@ export class LightBox extends Component {
                         </Item.Header>
                         <Item.Description>
                           <Breadcrumb
+                            as={Link}
+                            to={serverAddress+'/media/photos/'+this.props.idx2hash[this.props.lightboxImageIndex]+'.jpg'}
+                            target='_blank'
                             divider="/"
                             sections={this.props.photoDetails[
                               this.props.idx2hash[this.props.lightboxImageIndex]
@@ -406,7 +410,10 @@ export class LightBox extends Component {
                       </Item.Content>
                     </Item>
 
-                    <Item>
+                    { this.props.photoDetails[
+                              this.props.idx2hash[this.props.lightboxImageIndex]
+                            ].people.length > 0 &&
+                    (<Item>
                       <Item.Content verticalAlign="middle">
                         <Item.Header>
                           <Icon name="users" /> People
@@ -439,9 +446,14 @@ export class LightBox extends Component {
                           </Label.Group>
                         </Item.Description>
                       </Item.Content>
-                    </Item>
+                    </Item>)
+                    }
 
-                    <Item>
+                    {
+                            this.props.photoDetails[
+                              this.props.idx2hash[this.props.lightboxImageIndex]
+                            ].search_location &&
+                    (<Item>
                       <Item.Content verticalAlign="middle">
                         <Item.Header>
                           <Icon name="point" /> Location
@@ -454,7 +466,8 @@ export class LightBox extends Component {
                           }
                         </Item.Description>
                       </Item.Content>
-                    </Item>
+                    </Item>)
+                    }
 
                     <div
                       style={{
@@ -625,6 +638,28 @@ export class LightBox extends Component {
                         </Item.Description>
                       </Item.Content>
                     </Item>
+                    <Item>
+                      <Item.Content verticalAlign="middle">
+                        <Item.Header>
+                          <Icon name="images"/>Similar Photos
+                        </Item.Header>
+                        <Item.Description>
+                          <Image.Group>
+                          {
+                                this.props.photoDetails[
+                                  this.props.idx2hash[
+                                    this.props.lightboxImageIndex
+                                  ]
+                                ].similar_photos.slice(0,30).map(el=>(
+                                  <Image width={95} height={95} 
+                                    src={serverAddress+"/media/square_thumbnails_small/"+el.image_hash+".jpg"}/>
+                                ))
+                          }
+                          </Image.Group>
+                        </Item.Description>
+                      </Item.Content>
+                    </Item>
+
                   </Item.Group>
                 </div>
               </div>

src/layouts/AdminPage.js

@@ -22,7 +22,8 @@ import {
   Dropdown,
   Popup,
   Divider,
-  Pagination
+  Pagination,
+
 } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -43,6 +44,7 @@ import {
   updateUser,
   fetchNextcloudDirectoryTree,
   fetchJobList,
+  deleteJob,
   fetchUserList,
   fetchDirectoryTree,
   manageUpdateUser
@@ -155,7 +157,7 @@ export class AdminPage extends Component {
           />
         </Header>
 
-        <Table compact>
+        <Table compact celled>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Username</Table.HeaderCell>
@@ -247,22 +249,33 @@ class JobList extends Component {
     }
   }
 
+
+
   render() {
     return (
       <div>
-        <Table compact attached="top">
+        <Table compact attached="top" celled>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Status</Table.HeaderCell>
               <Table.HeaderCell>Job Type</Table.HeaderCell>
-              <Table.HeaderCell>Time Started</Table.HeaderCell>
-              <Table.HeaderCell>Time Finished</Table.HeaderCell>
+              <Table.HeaderCell width={5}>Progress</Table.HeaderCell>
+              <Table.HeaderCell>Started</Table.HeaderCell>
               <Table.HeaderCell>Duration</Table.HeaderCell>
               <Table.HeaderCell>Started By</Table.HeaderCell>
+              <Table.HeaderCell>Delete</Table.HeaderCell>
             </Table.Row>
           </Table.Header>
           <Table.Body>
             {this.props.jobList.map(job => {
+              let progressPerc = 0
+              if (job.result.progress) {
+                  progressPerc = job.result.progress.current.toFixed()/job.result.progress.target*100
+              }
+              if (job.finished && !job.failed){
+                  progressPerc = 100
+              }
+              const jobSuccess = job.finished && !job.failed
               return (
                 <Table.Row
                   key={job.job_id}
@@ -282,19 +295,22 @@ class JobList extends Component {
                   </Table.Cell>
                   <Table.Cell>{job.job_type_str}</Table.Cell>
                   <Table.Cell>
-                    {moment(job.started_at).format("YYYY-MM-DD") +
-                      " (" +
-                      moment(job.started_at).fromNow() +
-                      ")"}
+                  {job.result.progress ? ( 
+                     <Progress 
+                      indicating
+                      size='small'
+                      progress='ratio'
+                      value={job.result.progress.current}
+                      total={job.result.progress.target}
+                      active={!job.finished} 
+                      success={jobSuccess}>
+                      {(job.result.progress.current.toFixed(2)/job.result.progress.target).toFixed(2)*100}%
+                    </Progress>) : null}
                   </Table.Cell>
                   <Table.Cell>
-                    {job.finished_at
-                      ? moment(job.finished_at).format("YYYY-MM-DD") +
-                        " (" +
-                        moment(job.finished_at).fromNow() +
-                        ")"
-                      : "still running..."}
+                    {moment(job.started_at).fromNow()}
                   </Table.Cell>
+                   
                   <Table.Cell>
                     {job.finished
                       ? moment
@@ -305,6 +321,19 @@ class JobList extends Component {
                       : "still running..."}
                   </Table.Cell>
                   <Table.Cell>{job.started_by.username}</Table.Cell>
+                  <Table.Cell>
+                    <Popup 
+                      trigger={
+                        <Button 
+                          onClick={()=>{
+                            this.props.dispatch(
+                              deleteJob(job.id, this.state.activatePage, this.state.pageSize)
+                            )}}
+                          color='red' size='tiny'>
+                          Remove
+                        </Button>} 
+                      content="Does not actually stop the job, only removes this entry from DB. Use only in cases when you know that a job failed ungracefully, by inspecting the logs, etc."/>
+                  </Table.Cell>
                 </Table.Row>
               );
             })}

src/layouts/FaceDashboardV3.js

@@ -117,8 +117,12 @@ class ModalPersonEdit extends Component {
       this.props.labeledFacesList
     );
 
-    var selectedImageSrcs = this.props.selectedFaces.map(faceID => {
-      return allFaces.filter(face => face.id === faceID)[0].image;
+    var selectedImageIDs = this.props.selectedFaces.map(faceID => {
+      const res = allFaces.filter(face => face.id === faceID)[0].image; 
+      const splitBySlash = res.split('/')
+      console.log(splitBySlash[splitBySlash.length-1])
+      const faceImageID = splitBySlash[splitBySlash.length-1] 
+      return faceImageID
     });
     return (
       <Modal
@@ -146,8 +150,10 @@ class ModalPersonEdit extends Component {
           style={{ height: 100, padding: 5, height: 50, overflowY: "hidden" }}
         >
           <Image.Group>
-            {selectedImageSrcs.map(image => (
-              <SecuredImageJWT key={'selected_image'+image} height={40} width={40} src={image} />
+            {selectedImageIDs.map(image => (
+              <SecuredImageJWT 
+                key={'selected_image'+image} 
+                height={40} width={40} src={serverAddress + '/media/faces/' +image} />
             ))}
           </Image.Group>
         </div>

src/layouts/ReusablePhotoListView.js

@@ -501,7 +501,7 @@ export class PhotoListView extends Component {
                           setPhotosPublic([cell.image_hash], true)
                         );
                         copyToClipboard(
-                          serverAddress +
+                          serverAddress.replace('//','') +
                             "/media/photos/" +
                             cell.image_hash +
                             ".jpg"
@@ -1048,7 +1048,7 @@ export class PhotoListView extends Component {
                         );
                         const linksToCopy = this.state.selectedImageHashes
                           .map(
-                            ih => serverAddress + "/media/photos/" + ih + ".jpg"
+                            ih => serverAddress.replace('//','') + "/media/photos/" + ih + ".jpg"
                           )
                           .join("\n");
                         copyToClipboard(linksToCopy);

src/layouts/UserPublicPage.js

@@ -41,7 +41,7 @@ export class UserPublicPage extends Component {
         var t0 = performance.now();
         var groupedByDate = _.groupBy(photos, el => {
           if (el.exif_timestamp) {
-            return moment(el.exif_timestamp).format("YYYY-MM-DD");
+            return moment.utc(el.exif_timestamp).format("YYYY-MM-DD");
           } else {
             return "No Timestamp";
           }

src/layouts/albumPersonGallery.js

@@ -55,7 +55,7 @@ export class AlbumPersonGallery extends Component {
           var t0 = performance.now();
           var groupedByDate = _.groupBy(photos,(el)=>{
               if (el.exif_timestamp) {
-                  return moment(el.exif_timestamp).format('YYYY-MM-DD')
+                  return moment.utc(el.exif_timestamp).format('YYYY-MM-DD')
               } else {
                   return "No Timestamp"
               }

src/layouts/albumPlaceGallery.js

@@ -50,7 +50,7 @@ export class AlbumPlaceGallery extends Component {
                 var t0 = performance.now();
                 var groupedByDate = _.groupBy(photos,(el)=>{
                     if (el.exif_timestamp) {
-                        return moment(el.exif_timestamp).format('YYYY-MM-DD')
+                        return moment.utc(el.exif_timestamp).format('YYYY-MM-DD')
                     } else {
                         return "No Timestamp"
                     }