Add profile photo to person page

src/api.js

@@ -149,25 +149,27 @@ export async function apiGet(endpoint)  {
 export function getMediaUrl(handle) {
   const jwt = localStorage.getItem('access_token');
   if (jwt === null) { return '' }
-  return `${__APIHOST__}/media/${handle}/file?jwt=${jwt}`
+  return `${__APIHOST__}/api/media/${handle}/file?jwt=${jwt}`
 }
 
 export function getMediaUrlCropped(handle, rect) {
-  const jwt = localStorage.getItem('access_token');
-  if (jwt === null) { return '' }
-  [x1, y1, x2, y2] = rect
-  return `${__APIHOST__}/media/${handle}/cropped/${x1}/${y1}/${x2}/${y2}?jwt=${jwt}`
+  const jwt = localStorage.getItem('access_token')
+  if (jwt === null) {
+    return ''
+  }
+  const [x1, y1, x2, y2] = rect
+  return `${__APIHOST__}/api/media/${handle}/cropped/${x1}/${y1}/${x2}/${y2}?jwt=${jwt}`
 }
 
-export function getThumbnailUrl(handle, size) {
-  const jet = localStorage.getItem('access_token');
-  if (jwt === null) { return '' }
-  return `${__APIHOST__}/media/${handle}/thumbnail/${size}?jwt=${jwt}`
-}
-
-export function getThumbnailUrlCropped(handle, rect, size) {
+export function getThumbnailUrl(handle, size, square=false) {
   const jwt = localStorage.getItem('access_token');
   if (jwt === null) { return '' }
-  [x1, y1, x2, y2] = rect
-  return `${__APIHOST__}/media/${handle}/cropped/${x1}/${y1}/${x2}/${y2}/thumbnail/${size}?jwt=${jwt}`
+  return `${__APIHOST__}/api/media/${handle}/thumbnail/${size}?jwt=${jwt}&square=${square}`
+}
+
+export function getThumbnailUrlCropped(handle, rect, size, square=false) {
+  const jwt = localStorage.getItem('access_token');
+  if (jwt === null) { return '' }
+  const [x1, y1, x2, y2] = rect
+  return `${__APIHOST__}/api/media/${handle}/cropped/${x1}/${y1}/${x2}/${y2}/thumbnail/${size}?jwt=${jwt}&square=${square}`
 }

src/components/GrampsJsImage.js

@@ -50,10 +50,10 @@ class GrampsjsImg extends LitElement {
   _renderImage() {
     return html`
       <img
-      srcset="${getThumbnailUrl(this.handle, this.size)},
-      ${getThumbnailUrl(this.handle, 1.5 * this.size)} 1.5x
-      ${getThumbnailUrl(this.handle, 2 * this.size)} 2x"
-      src="${getThumbnailUrl(this.handle, 2 * this.size)}"
+      srcset="${getThumbnailUrl(this.handle, this.size, this.square)},
+      ${getThumbnailUrl(this.handle, 1.5 * this.size, this.square)} 1.5x
+      ${getThumbnailUrl(this.handle, 2 * this.size, this.square)} 2x"
+      src="${getThumbnailUrl(this.handle, 2 * this.size, this.square)}"
       class="${this.circle ? 'round' : ''}"
       @error=${this._errorHandler} alt="">
       `
@@ -62,10 +62,10 @@ class GrampsjsImg extends LitElement {
   _renderImageCropped() {
     return html`
     <img
-    srcset="${getThumbnailUrlCropped(this.handle, this.size)},
-    ${getThumbnailUrl(this.handle, 1.5 * this.size)} 1.5x
-    ${getThumbnailUrl(this.handle, 2 * this.size)} 2x"
-    src="${getThumbnailUrl(this.handle, 2 * this.size)}"
+    srcset="${getThumbnailUrlCropped(this.handle, this.size, this.square)},
+    ${getThumbnailUrl(this.handle, 1.5 * this.size, this.square)} 1.5x
+    ${getThumbnailUrl(this.handle, 2 * this.size, this.square)} 2x"
+    src="${getThumbnailUrl(this.handle, 2 * this.size, this.square)}"
     class="${this.circle ? 'round' : ''}"
     @error=${this._errorHandler} alt="">
     `

src/components/GrampsjsObject.js

@@ -43,12 +43,22 @@ export class GrampsjsObject extends LitElement {
         margin-top: 25px;
       }
 
+      #tabs {
+        clear: both;
+      }
+
       mwc-tab-bar {
         border-top: solid #6D4C4133 1px;
         border-bottom: solid #6D4C4133 1px;
         margin-top: 15px;
         --mdc-tab-horizontal-padding: 16px;
       }
+
+      #picture {
+        float: right;
+        margin-bottom: 20px;
+        margin-left: 40px;
+      }
       `
     ];
   }
@@ -75,11 +85,17 @@ export class GrampsjsObject extends LitElement {
       return html``
     }
     return html`
+    <div id="picture">
+    ${this.renderPicture()}
+    </div>
+
     ${this.renderProfile()}
 
     ${this.renderTags()}
 
+    <div id="tabs">
     ${this.renderTabs()}
+    </div>
 
     <div class="tab-content">
       ${this.renderTabContent()}
@@ -87,6 +103,10 @@ export class GrampsjsObject extends LitElement {
     `;
   }
 
+  renderPicture() {
+    return html``
+  }
+
   renderTabs() {
     const tabKeys = this._getTabs()
     if (!tabKeys.includes(this._currentTab)) {

src/components/GrampsjsPerson.js

@@ -1,5 +1,6 @@
 import { html, css } from 'lit-element';
 import { GrampsjsObject } from './GrampsjsObject.js'
+import './GrampsJsImage.js'
 
 
 export class GrampsjsPerson extends GrampsjsObject {
@@ -7,30 +8,40 @@ export class GrampsjsPerson extends GrampsjsObject {
     return [
       super.styles,
       css`
-      :host {
-      }
     `];
   }
 
   renderProfile() {
     return html`
     <h2>${this._displayName()}</h2>
-    <!--<dl>
-      <dt>Born</dt>
-      <dd>${this._getProfileEvent(this._('Birth'))}</dd>
-      <dt>Died</dt>
-      <dd>${this._getProfileEvent(this._('Death'))}</dd>
-    </dl>-->
     `;
   }
 
+  renderPicture() {
+    if (!this.data?.media_list?.length) {
+      return html``
+    }
+    const ref = this.data.media_list[0]
+    const obj = this.data.extended.media[0]
+    return html`
+      <grampsjs-img
+        handle="${obj.handle}"
+        size="175"
+      .rect="${ref.rect || []}"
+        square
+        circle
+        mime="${obj.mime}"
+      ></grampsjs-img>
+    `
+  }
+
   _displayName() {
     if (!this.data.profile) {
       return ''
     }
-    const surname = this.data.profile.name_surname || 'NN';
-    const given = this.data.profile.name_given || 'NN';
-    return html`${surname}, ${given}`
+    const surname = this.data.profile.name_surname || html`&hellip;`
+    const given = this.data.profile.name_given || html`&hellip;`
+    return html`${given} ${surname}`
   }
 
   _getProfileEvent(type) {