@things-factory/gallery 0.0.0-stage → 10.1.226

package/client/components/gallery-viewer.ts

@@ -0,0 +1,397 @@
+/*
+ * One post seen large (ADR-0165 decisions 4-6): its photos one by one, the like (the heart, or a double press on the
+ * photo), who posted it and when, its event and tags - each opens the gallery narrowed to it. Its owner changes or
+ * deletes it here; a moderator hides it here, with the reason, or shows it again. Where to go next is the popup's result
+ * - a popup closes by going back in the history, so a page opened before it is gone would be gone with it.
+ */
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+import '@material/web/icon/icon.js'
+import '@operato/popup/ox-popup-actions.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles'
+
+import { galleryApi, galleryChanged, type Post } from '../utils/gallery-api.js'
+import { day, days, reasonOf, t } from '../utils/gallery-words.js'
+
+@customElement('gallery-viewer')
+export class GalleryViewer extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonPopupStyles,
+    PopupBodyStyles,
+    css`
+      :host {
+        height: 100%;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+      }
+      .stage {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 240px;
+        max-height: 62vh;
+        background: var(--md-sys-color-surface-container-highest);
+        border-radius: var(--border-radius, 4px);
+        overflow: hidden;
+        user-select: none;
+      }
+      .stage img {
+        max-width: 100%;
+        max-height: 62vh;
+        object-fit: contain;
+        display: block;
+      }
+      .stage .turn {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-flex;
+        padding: 4px;
+        border: 0;
+        border-radius: 50%;
+        background: rgb(0 0 0 / 45%);
+        color: #fff;
+        cursor: pointer;
+      }
+      .stage .previous {
+        inset-inline-start: var(--spacing-small, 4px);
+      }
+      .stage .next {
+        inset-inline-end: var(--spacing-small, 4px);
+      }
+      .stage .index {
+        position: absolute;
+        bottom: var(--spacing-small, 4px);
+        inset-inline-end: var(--spacing-medium, 8px);
+        padding: 0 6px;
+        border-radius: 999px;
+        background: rgb(0 0 0 / 45%);
+        color: #fff;
+        font-size: var(--ui-t-small, 12px);
+      }
+      .burst {
+        position: absolute;
+        --md-icon-size: 72px;
+        color: #fff;
+        opacity: 0.9;
+        animation: burst 600ms ease-out forwards;
+        pointer-events: none;
+      }
+      @keyframes burst {
+        from {
+          transform: scale(0.6);
+          opacity: 0.9;
+        }
+        to {
+          transform: scale(1.3);
+          opacity: 0;
+        }
+      }
+      .line {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .heart {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: var(--ui-t-body, 14px);
+        cursor: pointer;
+      }
+      /* The app's icons are drawn filled; an empty heart says not liked yet. */
+      .heart md-icon {
+        --md-icon-size: 22px;
+        font-variation-settings: 'FILL' 0;
+      }
+      .heart[aria-pressed='true'] md-icon {
+        color: var(--md-sys-color-error);
+        font-variation-settings: 'FILL' 1;
+      }
+      .link {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: var(--md-sys-color-primary);
+        font: inherit;
+        cursor: pointer;
+      }
+      .link:hover {
+        text-decoration: underline;
+      }
+      .link md-icon {
+        --md-icon-size: 14px;
+      }
+      .caption {
+        margin: 0;
+        font-size: var(--ui-t-body, 14px);
+        line-height: 1.6;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        color: var(--md-sys-color-on-surface);
+      }
+      .hidden {
+        padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        border-radius: var(--border-radius, 4px);
+        background: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+        font-size: var(--ui-t-small, 12px);
+      }
+      .likers {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      textarea {
+        box-sizing: border-box;
+        width: 100%;
+        min-height: 56px;
+        font: inherit;
+        padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        border-radius: var(--border-radius, 4px);
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+      .spacer {
+        margin-inline-end: auto;
+      }
+    `
+  ]
+
+  @property({ attribute: false }) post!: Post
+
+  @state() private index = 0
+  @state() private likers?: { id: string; name?: string }[]
+  @state() private hiding = false
+  @state() private reason = ''
+  @state() private burst = 0
+  @state() private busy = false
+
+  render() {
+    const post = this.post
+    if (!post) return nothing
+    const photo = post.photos[this.index]
+    const many = post.photos.length > 1
+    return html`<div class="body">
+        ${post.hiddenAt ? html`<div class="hidden">${t('gallery.text.hidden-note')}${post.hiddenReason ? ` · ${post.hiddenReason}` : ''}</div>` : nothing}
+        <div class="stage" @dblclick=${() => this.like(true, true)}>
+          ${photo ? html`<img src=${photo.fullpath} alt=${post.caption ?? ''} />` : nothing}
+          ${this.burst ? html`<md-icon class="burst" style="font-variation-settings:'FILL' 1">favorite</md-icon>` : nothing}
+          ${
+            many
+              ? html`${this.index > 0 ? html`<button class="turn previous" aria-label=${t('gallery.button.previous')} @click=${() => (this.index -= 1)}><md-icon>chevron_left</md-icon></button>` : nothing}
+                  ${this.index < post.photos.length - 1 ? html`<button class="turn next" aria-label=${t('gallery.button.next')} @click=${() => (this.index += 1)}><md-icon>chevron_right</md-icon></button>` : nothing}
+                  <span class="index">${this.index + 1} / ${post.photos.length}</span>`
+              : nothing
+          }
+        </div>
+
+        <div class="line">
+          <button
+            class="heart"
+            aria-pressed=${String(post.liked)}
+            aria-label=${t('gallery.button.like')}
+            ?disabled=${this.busy}
+            @click=${() => this.like(!post.liked)}
+          >
+            <md-icon>favorite</md-icon>
+          </button>
+          <button class="link" ?disabled=${!post.likeCount} @click=${() => this.showLikers()}>
+            ${t('gallery.text.like-count', { count: post.likeCount })}
+          </button>
+          <span class="spacer"></span>
+          <button class="link" @click=${() => this.go(`gallery-page?author=${post.creator?.id}`)}>
+            ${post.creator?.name ?? ''}
+          </button>
+          <span>${day(post.takenAt)}</span>
+        </div>
+        ${this.likers ? html`<div class="likers">${this.likers.map(one => one.name).join(', ')}</div>` : nothing}
+        ${post.caption ? html`<p class="caption">${post.caption}</p>` : nothing}
+
+        <div class="line">
+          ${
+            post.event
+              ? html`<button class="link" @click=${() => this.go(`gallery-page?event=${post.event!.id}`)}>
+                  <md-icon>event</md-icon>${post.event.name} · ${days(post.event.startAt, post.event.endAt)}
+                </button>`
+              : nothing
+          }
+          ${(post.tags ?? []).map(tag => html`<button class="link" @click=${() => this.go(`gallery-page?tag=${encodeURIComponent(tag)}`)}>#${tag}</button>`)}
+          ${post.space === 'PERSONAL' ? html`<span>${t('gallery.space.PERSONAL')}</span>` : nothing}
+        </div>
+
+        ${
+          this.hiding
+            ? html`<div>
+                <textarea
+                  maxlength="200"
+                  placeholder=${t('gallery.text.hide-reason')}
+                  .value=${this.reason}
+                  @input=${(e: any) => (this.reason = e.target.value)}
+                ></textarea>
+              </div>`
+            : nothing
+        }
+      </div>
+      <ox-popup-actions>
+        ${
+          post.editable
+            ? html`<md-text-button ?disabled=${this.busy} @click=${() => this.edit()}
+                  >${t('gallery.button.edit')}</md-text-button
+                >
+                <md-text-button ?disabled=${this.busy} @click=${() => this.deletePost()}
+                  >${t('gallery.button.delete')}</md-text-button
+                >`
+            : nothing
+        }
+        ${
+          post.moderatable && !this.hiding
+            ? post.hiddenAt
+              ? html`<md-text-button ?disabled=${this.busy} @click=${() => this.unhide()}
+                  >${t('gallery.button.unhide')}</md-text-button
+                >`
+              : html`<md-text-button ?disabled=${this.busy} @click=${() => (this.hiding = true)}
+                  >${t('gallery.button.hide')}</md-text-button
+                >`
+            : nothing
+        }
+        ${
+          this.hiding
+            ? html`<md-text-button slot="cancel" @click=${() => (this.hiding = false)}
+                  >${t('gallery.button.cancel')}</md-text-button
+                >
+                <md-filled-button
+                  slot="confirm"
+                  ?disabled=${this.busy || !this.reason.trim()}
+                  @click=${() => this.hide()}
+                  >${t('gallery.button.hide')}</md-filled-button
+                >`
+            : html`<md-filled-button slot="confirm" @click=${() => this.close()}
+                >${t('gallery.button.close')}</md-filled-button
+              >`
+        }
+      </ox-popup-actions>`
+  }
+
+  private replace(post: Post) {
+    this.post = post
+    this.index = Math.min(this.index, Math.max(0, post.photos.length - 1))
+    galleryChanged()
+  }
+
+  /** Likes it, or takes the like back. A double press on the photo only likes - it never takes one back. */
+  private async like(like: boolean, fromPhoto = false) {
+    const post = this.post
+    if (fromPhoto) {
+      this.burst++
+      setTimeout(() => (this.burst = 0), 600)
+      if (post.liked) return
+    }
+    this.busy = true
+    try {
+      const state = await galleryApi.like(post.id, like)
+      this.post = { ...post, likeCount: state.likeCount, liked: state.liked }
+      if (this.likers) this.likers = await galleryApi.likers(post.id)
+      this.dispatchEvent(new CustomEvent('gallery-liked', { detail: this.post, bubbles: true, composed: true }))
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private async showLikers() {
+    if (this.likers) {
+      this.likers = undefined
+      return
+    }
+    try {
+      this.likers = await galleryApi.likers(this.post.id)
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    }
+  }
+
+  private edit() {
+    this.close({ edit: this.post })
+  }
+
+  private async deletePost() {
+    const sure = await OxPrompt.open({
+      title: t('gallery.button.delete'),
+      text: t('gallery.text.delete-confirm'),
+      confirmButton: { text: t('gallery.button.delete') },
+      cancelButton: { text: t('gallery.button.cancel') }
+    })
+    if (!sure) return
+    this.busy = true
+    try {
+      await galleryApi.remove(this.post.id)
+      notify({ message: t('gallery.text.deleted') })
+      galleryChanged()
+      this.close()
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private async hide() {
+    this.busy = true
+    try {
+      const own = this.post.editable
+      this.replace(await galleryApi.hide(this.post.id, this.reason.trim()))
+      this.hiding = false
+      this.reason = ''
+      /* Its owner is told - unless the one hiding it is its owner. */
+      notify({ message: own ? t('gallery.text.hidden-own') : t('gallery.text.hidden-done') })
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private async unhide() {
+    this.busy = true
+    try {
+      this.replace(await galleryApi.unhide(this.post.id))
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private go(address: string) {
+    this.close({ go: address })
+  }
+
+  /** The next step - a page to go to, or the post to change - goes as the popup's result: the page takes it once the popup is gone. */
+  private close(next?: { go?: string; edit?: Post }) {
+    this.dispatchEvent(new CustomEvent('done', { detail: next, bubbles: true, composed: true }))
+  }
+}

package/client/index.ts

@@ -0,0 +1 @@
+export { generateGalleryBadge, refreshGalleryBadge } from './utils/gallery-badge.js'