@things-factory/gallery 0.0.0-stage → 10.1.223

package/client/components/gallery-uploader.ts

@@ -0,0 +1,557 @@
+/*
+ * Posting photos (ADR-0165 decision 3) - and changing one's own post. Photos are all it needs; the caption, the tags
+ * and the event are there to add. When the photos were taken is read from the first one, and the events near that day
+ * are offered first - one press puts the post on one.
+ */
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+import '@material/web/icon/icon.js'
+import '@operato/input/ox-input-file.js'
+import '@operato/popup/ox-popup-actions.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+import {
+  galleryApi,
+  galleryChanged,
+  type EventChoice,
+  type Photo,
+  type Post,
+  type Space
+} from '../utils/gallery-api.js'
+import { day, reasonOf, t } from '../utils/gallery-words.js'
+import { shrunk, takenAtOf } from '../utils/photo-prep.js'
+
+const MAX_PHOTOS = 20
+const MAX_CAPTION = 500
+const MAX_TAGS = 10
+/* The events shown before 「more」 - the near ones are among them. */
+const FIRST_CHOICES = 4
+
+type Added = { file: File; url: string }
+
+/** yyyy-mm-dd of a date in the reader's own time. */
+const dateText = (value: Date) =>
+  `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}`
+
+@customElement('gallery-uploader')
+export class GalleryUploader extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonPopupStyles,
+    PopupBodyStyles,
+    css`
+      :host {
+        height: 100%;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large, 12px);
+      }
+      h4 {
+        margin: 0 0 var(--spacing-small, 4px);
+        font-size: var(--ui-t-small, 12px);
+        font-weight: 600;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .photos {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+        gap: var(--spacing-small, 4px);
+      }
+      .photo {
+        position: relative;
+        aspect-ratio: 1;
+        border-radius: var(--border-radius, 4px);
+        overflow: hidden;
+        background: var(--md-sys-color-surface-container-high);
+      }
+      .photo img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+      .photo button {
+        position: absolute;
+        top: 2px;
+        inset-inline-end: 2px;
+        display: inline-flex;
+        padding: 2px;
+        border: 0;
+        border-radius: 50%;
+        background: rgb(0 0 0 / 55%);
+        color: #fff;
+        cursor: pointer;
+      }
+      .photo button md-icon {
+        --md-icon-size: 16px;
+      }
+      .add {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 2px;
+        aspect-ratio: 1;
+        border: 1px dashed var(--ui-line, var(--md-sys-color-outline));
+        border-radius: var(--border-radius, 4px);
+        background: none;
+        color: var(--md-sys-color-primary);
+        font: inherit;
+        font-size: var(--ui-t-small, 12px);
+        cursor: pointer;
+      }
+      .add[disabled] {
+        opacity: 0.4;
+        cursor: default;
+      }
+      ox-input-file {
+        display: contents;
+      }
+      textarea,
+      input {
+        box-sizing: border-box;
+        width: 100%;
+        font: inherit;
+        font-size: var(--ui-t-body, 14px);
+        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);
+      }
+      textarea {
+        min-height: 64px;
+        resize: vertical;
+      }
+      input[type='date'] {
+        width: auto;
+      }
+      .count {
+        text-align: end;
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+        align-items: center;
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 2px var(--spacing-medium, 8px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        border-radius: 999px;
+        background: none;
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: var(--ui-t-small, 12px);
+        line-height: 1.6;
+        cursor: pointer;
+      }
+      .chip[aria-pressed='true'] {
+        border-color: var(--md-sys-color-primary);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+      .chip md-icon {
+        --md-icon-size: 14px;
+      }
+      .chip .near {
+        color: var(--md-sys-color-primary);
+      }
+      .tag-input {
+        flex: 1;
+        min-width: 120px;
+        width: auto;
+        border: 0;
+        padding: 2px 0;
+        background: none;
+      }
+      .tag-input:focus {
+        outline: none;
+      }
+      .tags {
+        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);
+      }
+      .suggest {
+        margin-top: var(--spacing-small, 4px);
+      }
+      .suggest .chip {
+        border-style: dashed;
+      }
+      .muted {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-large, 12px);
+        align-items: flex-end;
+      }
+    `
+  ]
+
+  /** The post being changed - nothing when posting a new one. */
+  @property({ attribute: false }) post?: Post
+  /** The photos the page picked before the window opened. */
+  @property({ attribute: false }) files: File[] = []
+  /** Where a new post goes - the screen it was opened from. */
+  @property() space: Space = 'COMPANY'
+  @property() eventId?: string | null
+
+  @state() private added: Added[] = []
+  @state() private kept: Photo[] = []
+  @state() private caption = ''
+  @state() private tags: string[] = []
+  @state() private tagText = ''
+  @state() private suggestions: { tag: string; count: number }[] = []
+  @state() private chosenSpace: Space = 'COMPANY'
+  @state() private chosenEvent: string | null = null
+  @state() private takenOn = dateText(new Date())
+  @state() private choices: EventChoice[] = []
+  @state() private allChoices = false
+  @state() private progress?: number
+  @state() private busy = false
+
+  @query('#pick') private picker!: any
+  @query('#shoot') private camera!: any
+
+  private suggestTimer?: ReturnType<typeof setTimeout>
+
+  render() {
+    const total = this.kept.length + this.added.length
+    const full = total >= MAX_PHOTOS
+    const company = this.chosenSpace === 'COMPANY'
+    const shown = this.allChoices ? this.choices : this.choices.slice(0, FIRST_CHOICES)
+    const chosen = this.choices.find(one => one.id === this.chosenEvent)
+    return html`<div class="body">
+        <section>
+          <div class="photos">
+            ${this.kept.map(
+              one =>
+                html`<div class="photo">
+                  <img src=${one.thumbnail || one.fullpath} alt="" />
+                  <button
+                    aria-label=${t('gallery.button.remove-photo')}
+                    @click=${() => (this.kept = this.kept.filter(other => other !== one))}
+                  >
+                    <md-icon>close</md-icon>
+                  </button>
+                </div>`
+            )}
+            ${this.added.map(
+              one =>
+                html`<div class="photo">
+                  <img src=${one.url} alt="" />
+                  <button aria-label=${t('gallery.button.remove-photo')} @click=${() => this.drop(one)}>
+                    <md-icon>close</md-icon>
+                  </button>
+                </div>`
+            )}
+            <button class="add" ?disabled=${full || this.busy} @click=${() => this.picker?.pick()}>
+              <md-icon>add_photo_alternate</md-icon>${t('gallery.button.add-photos')}
+            </button>
+            ${
+              isMobileDevice()
+                ? html`<button class="add" ?disabled=${full || this.busy} @click=${() => this.camera?.pick()}>
+                    <md-icon>photo_camera</md-icon>${t('gallery.button.shoot-more')}
+                  </button>`
+                : nothing
+            }
+          </div>
+          <ox-input-file
+            id="pick"
+            quiet
+            outside-trigger
+            hide-filelist
+            multiple
+            accept="image/*"
+            .progress=${this.progress}
+            @change=${(e: CustomEvent) => this.take(e)}
+          ></ox-input-file>
+          <ox-input-file
+            id="shoot"
+            quiet
+            outside-trigger
+            hide-filelist
+            accept="image/*"
+            capture="environment"
+            @change=${(e: CustomEvent) => this.take(e)}
+          ></ox-input-file>
+          ${full ? html`<div class="muted">${t('gallery.text.photos-full', { count: MAX_PHOTOS })}</div>` : nothing}
+        </section>
+
+        <section>
+          <textarea
+            maxlength=${MAX_CAPTION}
+            placeholder=${t('gallery.text.caption-placeholder')}
+            .value=${this.caption}
+            @input=${(e: any) => (this.caption = e.target.value)}
+          ></textarea>
+          ${this.caption.length > MAX_CAPTION * 0.8 ? html`<div class="count">${this.caption.length} / ${MAX_CAPTION}</div>` : nothing}
+        </section>
+
+        <section>
+          <h4>${t('gallery.field.tags')}</h4>
+          <div class="chips tags">
+            ${this.tags.map(tag => html`<span class="chip">#${tag}<md-icon role="button" aria-label=${t('gallery.button.remove-tag')} @click=${() => (this.tags = this.tags.filter(one => one !== tag))}>close</md-icon></span>`)}
+            ${
+              this.tags.length < MAX_TAGS
+                ? html`<input
+                    class="tag-input"
+                    .value=${this.tagText}
+                    placeholder=${this.tags.length ? '' : t('gallery.text.tag-placeholder')}
+                    @input=${(e: any) => this.typeTag(e.target.value)}
+                    @keydown=${(e: KeyboardEvent) => this.tagKey(e)}
+                    @blur=${() => this.addTag(this.tagText)}
+                  />`
+                : nothing
+            }
+          </div>
+          ${
+            this.suggestions.length
+              ? html`<div class="chips suggest">
+                  ${this.suggestions.filter(one => !this.tags.some(tag => tag.toLowerCase() === one.tag.toLowerCase())).map(one => html`<button class="chip" @mousedown=${(e: Event) => e.preventDefault()} @click=${() => this.addTag(one.tag)}>#${one.tag}</button>`)}
+                </div>`
+              : nothing
+          }
+        </section>
+
+        <section class="row">
+          <div>
+            <h4>${t('gallery.field.space')}</h4>
+            <div class="chips">
+              ${(['COMPANY', 'PERSONAL'] as Space[]).map(
+                space =>
+                  html`<button
+                    class="chip"
+                    aria-pressed=${String(this.chosenSpace === space)}
+                    @click=${() => this.chooseSpace(space)}
+                  >
+                    ${t(`gallery.space.${space}`)}
+                  </button>`
+              )}
+            </div>
+          </div>
+          <div>
+            <h4>${t('gallery.field.taken-on')}</h4>
+            <input type="date" .value=${this.takenOn} @change=${(e: any) => this.changeDay(e.target.value)} />
+          </div>
+        </section>
+
+        ${
+          company
+            ? html`<section>
+                <h4>${t('gallery.field.event')}</h4>
+                <div class="chips">
+                  <button
+                    class="chip"
+                    aria-pressed=${String(!this.chosenEvent)}
+                    @click=${() => (this.chosenEvent = null)}
+                  >
+                    ${t('gallery.text.no-event')}
+                  </button>
+                  ${chosen && !shown.includes(chosen) ? this.choiceChip(chosen) : nothing}
+                  ${shown.map(one => this.choiceChip(one))}
+                  ${
+                    this.choices.length > FIRST_CHOICES && !this.allChoices
+                      ? html`<button class="chip" @click=${() => (this.allChoices = true)}>
+                          ${t('gallery.button.more-events', { count: this.choices.length - FIRST_CHOICES })}
+                        </button>`
+                      : nothing
+                  }
+                </div>
+              </section>`
+            : html`<div class="muted">${t('gallery.text.personal-note')}</div>`
+        }
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" ?disabled=${this.busy} @click=${() => this.close()}
+          >${t('gallery.button.cancel')}</md-text-button
+        >
+        <md-filled-button slot="confirm" ?disabled=${this.busy || total < 1} @click=${() => this.save()}
+          >${this.post ? t('gallery.button.save') : t('gallery.button.post-count', { count: total })}</md-filled-button
+        >
+      </ox-popup-actions>`
+  }
+
+  private choiceChip(one: EventChoice) {
+    return html`<button
+      class="chip"
+      aria-pressed=${String(this.chosenEvent === one.id)}
+      @click=${() => (this.chosenEvent = one.id)}
+    >
+      ${one.near ? html`<md-icon class="near">event_available</md-icon>` : nothing}${one.name}<span class="muted"
+        >· ${day(one.startAt)}</span
+      >
+    </button>`
+  }
+
+  async firstUpdated() {
+    const post = this.post
+    if (post) {
+      this.kept = [...post.photos]
+      this.caption = post.caption ?? ''
+      this.tags = [...(post.tags ?? [])]
+      this.chosenSpace = post.space
+      this.chosenEvent = post.event?.id ?? null
+      this.takenOn = dateText(new Date(post.takenAt))
+    } else {
+      this.chosenSpace = this.eventId ? 'COMPANY' : this.space
+      this.chosenEvent = this.eventId ?? null
+    }
+    await this.add(this.files ?? [])
+    await this.loadChoices()
+  }
+
+  disconnectedCallback() {
+    for (const one of this.added) URL.revokeObjectURL(one.url)
+    clearTimeout(this.suggestTimer)
+    super.disconnectedCallback()
+  }
+
+  private async take(e: CustomEvent) {
+    const picked = [...((e.detail as File[]) ?? [])]
+    /* The picker's own reset says `change` again, with nothing - that one is let go. */
+    if (!picked.length) return
+    ;(e.target as any).reset?.()
+    const before = this.kept.length + this.added.length
+    await this.add(picked)
+    /* The first photo says the day - the events near it come first. */
+    if (!before && !this.post) await this.loadChoices()
+  }
+
+  private async add(files: File[]) {
+    const room = MAX_PHOTOS - this.kept.length - this.added.length
+    const photos = files
+      .filter(file => /^image\//i.test(file.type) || /\.(jpe?g|png|gif|webp|heic|heif)$/i.test(file.name))
+      .slice(0, Math.max(0, room))
+    if (photos.length < files.length)
+      notify({ level: 'warn', message: t('gallery.text.photos-skipped', { count: files.length - photos.length }) })
+    if (!photos.length) return
+    const first = !this.kept.length && !this.added.length && !this.post
+    this.added = [...this.added, ...photos.map(file => ({ file, url: URL.createObjectURL(file) }))]
+    if (first) {
+      const takenAt = await takenAtOf(photos[0])
+      if (takenAt) this.takenOn = dateText(takenAt)
+    }
+  }
+
+  private drop(one: Added) {
+    URL.revokeObjectURL(one.url)
+    this.added = this.added.filter(other => other !== one)
+  }
+
+  private takenAt(): string {
+    const [y, m, d] = this.takenOn.split('-').map(Number)
+    const now = new Date()
+    /* A day chosen without its hour keeps the hour it was posted - today's photo is not dated midnight. */
+    const at = y ? new Date(y, m - 1, d, now.getHours(), now.getMinutes()) : now
+    return at.toISOString()
+  }
+
+  private async loadChoices() {
+    try {
+      /* Offered, not chosen: the events near that day come first, and one press puts the post on one. */
+      this.choices = await galleryApi.eventChoices(this.takenAt())
+    } catch {
+      this.choices = []
+    }
+  }
+
+  private async changeDay(value: string) {
+    if (!value) return
+    this.takenOn = value
+    await this.loadChoices()
+  }
+
+  private chooseSpace(space: Space) {
+    this.chosenSpace = space
+    if (space === 'PERSONAL') this.chosenEvent = null
+  }
+
+  private typeTag(value: string) {
+    if (/[,\s]$/.test(value) && value.trim()) {
+      this.addTag(value)
+      return
+    }
+    this.tagText = value
+    clearTimeout(this.suggestTimer)
+    this.suggestTimer = setTimeout(async () => {
+      try {
+        this.suggestions = await galleryApi.tags(this.tagText)
+      } catch {
+        this.suggestions = []
+      }
+    }, 200)
+  }
+
+  private tagKey(e: KeyboardEvent) {
+    if (e.isComposing) return
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      this.addTag(this.tagText)
+    } else if (e.key === 'Backspace' && !this.tagText && this.tags.length) {
+      this.tags = this.tags.slice(0, -1)
+    }
+  }
+
+  private addTag(raw: string) {
+    const tag = raw.replace(/[,]/g, ' ').trim().replace(/^#+/, '').replace(/\s+/g, ' ').trim()
+    this.tagText = ''
+    if (!tag || this.tags.length >= MAX_TAGS || this.tags.some(one => one.toLowerCase() === tag.toLowerCase())) return
+    this.tags = [...this.tags, tag.slice(0, 30)]
+  }
+
+  private async save() {
+    this.addTag(this.tagText)
+    this.busy = true
+    try {
+      const files = await Promise.all(this.added.map(one => shrunk(one.file)))
+      const input = {
+        space: this.chosenSpace,
+        caption: this.caption.trim(),
+        takenAt: this.takenAt(),
+        tags: this.tags,
+        eventId: this.chosenSpace === 'COMPANY' ? this.chosenEvent : null
+      }
+      const uploading = (fraction: number) => (this.progress = fraction)
+      const post = this.post
+        ? await galleryApi.update(
+            this.post.id,
+            input,
+            files,
+            this.post.photos.filter(one => !this.kept.includes(one)).map(one => one.id),
+            uploading
+          )
+        : await galleryApi.create(input, files, uploading)
+      notify({ message: this.post ? t('gallery.text.saved') : t('gallery.text.posted') })
+      galleryChanged()
+      this.dispatchEvent(new CustomEvent('gallery-posted', { detail: post, bubbles: true, composed: true }))
+      this.close()
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.progress = undefined
+      this.busy = false
+    }
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+  }
+}