@things-factory/gallery 10.1.234 → 10.1.236

package/client/utils/gallery-saver.ts

@@ -0,0 +1,72 @@
+/*
+ * The gallery as the screen saver (ADR-0165 decision 9): after the minutes set on this device with no press, move or
+ * key, the gallery everyone sees - the company's and the shared own photos - plays over the window until the person
+ * comes back. Kept on the device (`clientSettingStore`),
+ * since it is the screen that is left - a meeting room's display, not the person - and off until it is turned on.
+ */
+import { clientSettingStore } from '@operato/shell'
+import { auth } from '@things-factory/auth-base/dist-client'
+
+import { GalleryShow } from '../components/gallery-show.js'
+
+const KEY = 'gallery-saver'
+/** The waits the setting offers, in minutes; 0 is off. */
+export const SAVER_MINUTES = [0, 5, 10, 30]
+/** What says the person is here. */
+const PRESENCE = ['pointermove', 'pointerdown', 'keydown', 'wheel', 'touchstart']
+
+export async function saverMinutes(): Promise<number> {
+  try {
+    const minutes = Number((await clientSettingStore.get(KEY))?.value?.minutes)
+    return SAVER_MINUTES.includes(minutes) ? minutes : 0
+  } catch {
+    return 0
+  }
+}
+
+export async function setSaverMinutes(minutes: number) {
+  await clientSettingStore.put({ key: KEY, value: { minutes } })
+  window.dispatchEvent(new CustomEvent('gallery-saver-changed'))
+}
+
+let minutes = 0
+let timer: ReturnType<typeof setTimeout> | undefined
+let signedIn = false
+let showing: GalleryShow | undefined
+
+function wait() {
+  clearTimeout(timer)
+  if (!minutes || !signedIn || showing) return
+  timer = setTimeout(start, minutes * 60_000)
+}
+
+function start() {
+  /* A hidden tab is not looked at; it waits for the next quiet stretch after it is shown. */
+  if (document.visibilityState !== 'visible' || document.querySelector('gallery-show')) return wait()
+  /* What everyone sees - never the photos the device's person keeps to themselves. */
+  showing = GalleryShow.open({ filter: { everyone: true }, saver: true })
+  showing.addEventListener('closed', () => {
+    showing = undefined
+    wait()
+  })
+}
+
+/** Watches for the quiet stretch, once per application. */
+export function watchForSaver() {
+  const read = async () => {
+    minutes = await saverMinutes()
+    wait()
+  }
+  for (const name of PRESENCE) window.addEventListener(name, () => !showing && wait(), { passive: true, capture: true })
+  document.addEventListener('visibilitychange', () => document.visibilityState === 'visible' && wait())
+  window.addEventListener('gallery-saver-changed', read)
+  auth.on('profile', () => {
+    signedIn = true
+    read()
+  })
+  auth.on('signout', () => {
+    signedIn = false
+    clearTimeout(timer)
+    showing?.close()
+  })
+}

package/dist-client/bootstrap.d.ts

@@ -1 +1,2 @@
+import './components/gallery-saver-setting-let.js';
 export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -1,5 +1,9 @@
+import { html } from 'lit';
 import { navigate, store } from '@operato/shell';
 import { ADD_USER_MENU } from '@things-factory/apptool-base/client';
+import { ADD_SETTING } from '@things-factory/setting-base/dist-client';
+import './components/gallery-saver-setting-let.js';
+import { watchForSaver } from './utils/gallery-saver.js';
 /* One's own gallery is in the menu the header's avatar opens, right after the profile (ADR-0165 decision 6). */
 export default function bootstrap() {
     store.dispatch({
@@ -12,5 +16,11 @@ export default function bootstrap() {
             action: () => navigate('gallery-page?tab=mine')
         }
     });
+    /* The screen saver is the device's, so it is set among one's own settings (ADR-0165 decision 9). */
+    store.dispatch({
+        type: ADD_SETTING,
+        setting: { seq: 30, template: html `<gallery-saver-setting-let></gallery-saver-setting-let>` }
+    });
+    watchForSaver();
 }
 //# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAEnE,gHAAgH;AAChH,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,0BAA0B;YACjC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,uBAAuB,CAAC;SAChD;KACF,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import { navigate, store } from '@operato/shell'\nimport { ADD_USER_MENU } from '@things-factory/apptool-base/client'\n\n/* One's own gallery is in the menu the header's avatar opens, right after the profile (ADR-0165 decision 6). */\nexport default function bootstrap() {\n  store.dispatch({\n    type: ADD_USER_MENU,\n    item: {\n      name: 'my-gallery',\n      icon: 'photo_library',\n      label: 'gallery.title.my-gallery',\n      order: 12,\n      action: () => navigate('gallery-page?tab=mine')\n    }\n  })\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAA;AAEtE,OAAO,2CAA2C,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExD,gHAAgH;AAChH,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,0BAA0B;YACjC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,uBAAuB,CAAC;SAChD;KACF,CAAC,CAAA;IACF,oGAAoG;IACpG,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAA,yDAAyD,EAAE;KAC9F,CAAC,CAAA;IACF,aAAa,EAAE,CAAA;AACjB,CAAC","sourcesContent":["import { html } from 'lit'\n\nimport { navigate, store } from '@operato/shell'\nimport { ADD_USER_MENU } from '@things-factory/apptool-base/client'\nimport { ADD_SETTING } from '@things-factory/setting-base/dist-client'\n\nimport './components/gallery-saver-setting-let.js'\nimport { watchForSaver } from './utils/gallery-saver.js'\n\n/* One's own gallery is in the menu the header's avatar opens, right after the profile (ADR-0165 decision 6). */\nexport default function bootstrap() {\n  store.dispatch({\n    type: ADD_USER_MENU,\n    item: {\n      name: 'my-gallery',\n      icon: 'photo_library',\n      label: 'gallery.title.my-gallery',\n      order: 12,\n      action: () => navigate('gallery-page?tab=mine')\n    }\n  })\n  /* The screen saver is the device's, so it is set among one's own settings (ADR-0165 decision 9). */\n  store.dispatch({\n    type: ADD_SETTING,\n    setting: { seq: 30, template: html`<gallery-saver-setting-let></gallery-saver-setting-let>` }\n  })\n  watchForSaver()\n}\n"]}

package/dist-client/components/gallery-saver-setting-let.d.ts

@@ -0,0 +1,11 @@
+import '@material/web/radio/radio.js';
+import { LitElement } from 'lit';
+declare const GallerySaverSettingLet_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class GallerySaverSettingLet extends GallerySaverSettingLet_base {
+    static styles: import("lit").CSSResult;
+    private minutes;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    private choose;
+}
+export {};

package/dist-client/components/gallery-saver-setting-let.js

@@ -0,0 +1,81 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * Settings › the gallery as the screen saver on this device (ADR-0165 decision 9): off, or after a few quiet minutes.
+ */
+import '@material/web/radio/radio.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { SAVER_MINUTES, saverMinutes, setSaverMinutes } from '../utils/gallery-saver.js';
+import { reasonOf, t } from '../utils/gallery-words.js';
+let GallerySaverSettingLet = class GallerySaverSettingLet extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.minutes = 0;
+    }
+    static { this.styles = css `
+    div[slot='content'] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-medium, 8px);
+    }
+    .choices {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px) var(--spacing-large, 12px);
+    }
+    label {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      font: var(--label-font);
+      color: var(--md-sys-color-on-surface);
+    }
+    .note {
+      margin: 0;
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `; }
+    render() {
+        return html `<setting-let>
+      <span slot="title">${t('gallery.title.saver')}</span>
+      <div slot="content">
+        <div class="choices" role="radiogroup">
+          ${SAVER_MINUTES.map(minutes => html `<label>
+              <md-radio
+                name="gallery-saver"
+                value=${String(minutes)}
+                ?checked=${this.minutes === minutes}
+                @change=${() => this.choose(minutes)}
+              ></md-radio>
+              ${minutes ? t('gallery.text.saver-after', { minutes }) : t('gallery.text.saver-off')}
+            </label>`)}
+        </div>
+        <p class="note">${t('gallery.text.saver-note')}</p>
+      </div>
+    </setting-let>`;
+    }
+    async firstUpdated() {
+        this.minutes = await saverMinutes();
+    }
+    async choose(minutes) {
+        try {
+            await setSaverMinutes(minutes);
+            this.minutes = minutes;
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GallerySaverSettingLet.prototype, "minutes", void 0);
+GallerySaverSettingLet = __decorate([
+    customElement('gallery-saver-setting-let')
+], GallerySaverSettingLet);
+export { GallerySaverSettingLet };
+//# sourceMappingURL=gallery-saver-setting-let.js.map

package/dist-client/components/gallery-saver-setting-let.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-saver-setting-let.js","sourceRoot":"","sources":["../../client/components/gallery-saver-setting-let.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AACxF,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,2BAA2B,CAAA;AAGhD,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAlE;;QA0BY,YAAO,GAAG,CAAC,CAAA;IAoC9B,CAAC;aA7DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBlB,AAvBY,CAuBZ;IAID,MAAM;QACJ,OAAO,IAAI,CAAA;2BACY,CAAC,CAAC,qBAAqB,CAAC;;;YAGvC,aAAa,CAAC,GAAG,CACjB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;;wBAGH,MAAM,CAAC,OAAO,CAAC;2BACZ,IAAI,CAAC,OAAO,KAAK,OAAO;0BACzB,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;;gBAEpC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC;qBAC7E,CACV;;0BAEe,CAAC,CAAC,yBAAyB,CAAC;;mBAEnC,CAAA;IACjB,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,OAAO,GAAG,MAAM,YAAY,EAAE,CAAA;IACrC,CAAC;IAEO,KAAK,CAAC,MAAM,CAAC,OAAe;QAClC,IAAI,CAAC;YACH,MAAM,eAAe,CAAC,OAAO,CAAC,CAAA;YAC9B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACxB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QACtD,CAAC;IACH,CAAC;;AAnCgB;IAAhB,KAAK,EAAE;;uDAAoB;AA1BjB,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA8DlC","sourcesContent":["/*\n * Settings › the gallery as the screen saver on this device (ADR-0165 decision 9): off, or after a few quiet minutes.\n */\nimport '@material/web/radio/radio.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { SAVER_MINUTES, saverMinutes, setSaverMinutes } from '../utils/gallery-saver.js'\nimport { reasonOf, t } from '../utils/gallery-words.js'\n\n@customElement('gallery-saver-setting-let')\nexport class GallerySaverSettingLet extends localize(i18next)(LitElement) {\n  static styles = css`\n    div[slot='content'] {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium, 8px);\n    }\n    .choices {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--spacing-small, 4px) var(--spacing-large, 12px);\n    }\n    label {\n      display: flex;\n      gap: 6px;\n      align-items: center;\n      font: var(--label-font);\n      color: var(--md-sys-color-on-surface);\n    }\n    .note {\n      margin: 0;\n      font-size: var(--ui-t-small, 12px);\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n  `\n\n  @state() private minutes = 0\n\n  render() {\n    return html`<setting-let>\n      <span slot=\"title\">${t('gallery.title.saver')}</span>\n      <div slot=\"content\">\n        <div class=\"choices\" role=\"radiogroup\">\n          ${SAVER_MINUTES.map(\n            minutes => html`<label>\n              <md-radio\n                name=\"gallery-saver\"\n                value=${String(minutes)}\n                ?checked=${this.minutes === minutes}\n                @change=${() => this.choose(minutes)}\n              ></md-radio>\n              ${minutes ? t('gallery.text.saver-after', { minutes }) : t('gallery.text.saver-off')}\n            </label>`\n          )}\n        </div>\n        <p class=\"note\">${t('gallery.text.saver-note')}</p>\n      </div>\n    </setting-let>`\n  }\n\n  async firstUpdated() {\n    this.minutes = await saverMinutes()\n  }\n\n  private async choose(minutes: number) {\n    try {\n      await setSaverMinutes(minutes)\n      this.minutes = minutes\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    }\n  }\n}\n"]}

package/dist-client/components/gallery-show.d.ts

@@ -0,0 +1,46 @@
+import '@material/web/icon/icon.js';
+import { LitElement, nothing } from 'lit';
+import { type Filter } from '../utils/gallery-api.js';
+export type ShowOptions = {
+    /** The posts the show walks through - the gallery's narrowing where it was opened. */
+    filter: Filter;
+    /** Where it starts: a post and the photo in it. Without it, the first photo. */
+    start?: {
+        postId: string;
+        index: number;
+    };
+    /** Plays at once. */
+    playing?: boolean;
+    /** The screen saver: plays in a random order, and closes at anything the person does. */
+    saver?: boolean;
+};
+declare const GalleryShow_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class GalleryShow extends GalleryShow_base {
+    static styles: import("lit").CSSResult;
+    /** Opens a show over the whole window, and the whole screen when the browser lets it. */
+    static open(options: ShowOptions): GalleryShow;
+    saver: boolean;
+    options: ShowOptions;
+    private frames;
+    private at;
+    private playing;
+    private loaded;
+    private timer?;
+    private wholeScreen;
+    private disposed;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    private renderBar;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private load;
+    private play;
+    /** The next photo after the dwell, asked ahead so it is there when it turns. */
+    private schedule;
+    private step;
+    private onKey;
+    /** Leaving the whole screen (Esc there is the browser's) leaves the show too. */
+    private onFullscreen;
+    private onWake;
+    close(): void;
+}
+export {};

package/dist-client/components/gallery-show.js

@@ -0,0 +1,316 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * The gallery's photos across the whole window, one at a time (ADR-0165 decision 9): seen large from a post, played as
+ * a slideshow from the gallery, and the screen saver after the person has been away. One show for the three - what
+ * differs is where it starts, whether it plays, and whether anything the person does closes it (the saver).
+ */
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { galleryApi } from '../utils/gallery-api.js';
+import { day, t } from '../utils/gallery-words.js';
+/** How long one photo stays while it plays. */
+const DWELL = 7000;
+/** The most photos one show walks through - pages of the gallery's own size are asked until this. */
+const MOST = 300;
+const PAGE = 60;
+let GalleryShow = class GalleryShow extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.saver = false;
+        this.frames = [];
+        this.at = 0;
+        this.playing = false;
+        this.loaded = false;
+        this.wholeScreen = false;
+        this.disposed = false;
+        this.onKey = (e) => {
+            if (this.saver)
+                return;
+            const handled = {
+                ArrowLeft: () => this.step(-1),
+                ArrowRight: () => this.step(1),
+                ' ': () => this.play(!this.playing),
+                Escape: () => this.close()
+            };
+            const act = handled[e.key];
+            if (!act)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            act();
+        };
+        /** Leaving the whole screen (Esc there is the browser's) leaves the show too. */
+        this.onFullscreen = () => {
+            if (this.wholeScreen && !document.fullscreenElement)
+                this.close();
+        };
+        this.onWake = (e) => {
+            /* The pointer resting on the screen still says it moved, by a pixel or so - a real move is farther. */
+            if (e.type === 'pointermove' && Math.abs(e.movementX) + Math.abs(e.movementY) < 4)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.close();
+        };
+    }
+    static { this.styles = css `
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      display: block;
+      background: #000;
+      color: #fff;
+      user-select: none;
+    }
+    :host([saver]) {
+      cursor: none;
+    }
+    img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      animation: appear 800ms ease-out;
+    }
+    @keyframes appear {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    .about {
+      position: absolute;
+      inset-inline: 0;
+      bottom: 0;
+      padding: 48px 24px 20px;
+      background: linear-gradient(transparent, rgb(0 0 0 / 60%));
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .about .caption {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      white-space: pre-wrap;
+      font-size: 16px;
+    }
+    .about .who {
+      opacity: 0.75;
+    }
+    .bar {
+      position: absolute;
+      top: 12px;
+      inset-inline-end: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .bar .count {
+      padding: 0 8px;
+      font-size: 13px;
+      opacity: 0.8;
+    }
+    button {
+      display: inline-flex;
+      padding: 8px;
+      border: 0;
+      border-radius: 50%;
+      background: rgb(0 0 0 / 45%);
+      color: #fff;
+      cursor: pointer;
+    }
+    button:hover {
+      background: rgb(255 255 255 / 20%);
+    }
+    .turn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .previous {
+      inset-inline-start: 12px;
+    }
+    .next {
+      inset-inline-end: 12px;
+    }
+    .empty {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.8;
+    }
+  `; }
+    /** Opens a show over the whole window, and the whole screen when the browser lets it. */
+    static open(options) {
+        const show = document.createElement('gallery-show');
+        show.options = options;
+        document.body.appendChild(show);
+        return show;
+    }
+    render() {
+        const frame = this.frames[this.at];
+        if (!frame)
+            return this.loaded
+                ? html `<div class="empty">${t('gallery.text.show-empty')}</div>${this.saver ? nothing : this.renderBar()}`
+                : nothing;
+        const { post, photo } = frame;
+        return html `
+      ${ /* A new element for each photo, so it fades in. */[photo.id].map(() => html `<img src=${photo.fullpath} alt=${post.caption ?? ''} />`)}
+      <div class="about">
+        ${post.caption ? html `<div class="caption">${post.caption}</div>` : nothing}
+        <div class="who">${post.creator?.name ?? ''} · ${day(post.takenAt)}${post.event ? ` · ${post.event.name}` : ''}</div>
+      </div>
+      ${this.saver
+            ? nothing
+            : html `${this.renderBar()}
+              ${this.frames.length > 1
+                ? html `<button class="turn previous" aria-label=${t('gallery.button.previous')} @click=${() => this.step(-1)}>
+                      <md-icon>chevron_left</md-icon>
+                    </button>
+                    <button class="turn next" aria-label=${t('gallery.button.next')} @click=${() => this.step(1)}>
+                      <md-icon>chevron_right</md-icon>
+                    </button>`
+                : nothing}`}
+    `;
+    }
+    renderBar() {
+        return html `<div class="bar">
+      ${this.frames.length ? html `<span class="count">${this.at + 1} / ${this.frames.length}</span>` : nothing}
+      ${this.frames.length > 1
+            ? html `<button
+              aria-label=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}
+              title=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}
+              @click=${() => this.play(!this.playing)}
+            >
+              <md-icon>${this.playing ? 'pause' : 'play_arrow'}</md-icon>
+            </button>`
+            : nothing}
+      <button aria-label=${t('gallery.button.close')} title=${t('gallery.button.close')} @click=${() => this.close()}>
+        <md-icon>close</md-icon>
+      </button>
+    </div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.saver = !!this.options?.saver;
+        window.addEventListener('keydown', this.onKey, true);
+        document.addEventListener('fullscreenchange', this.onFullscreen);
+        if (this.saver)
+            for (const name of WAKE)
+                window.addEventListener(name, this.onWake, true);
+        /* The whole screen needs the press that opened it - the saver has none, and covers the window only. */
+        if (!this.saver && this.requestFullscreen)
+            this.requestFullscreen()
+                .then(() => (this.wholeScreen = true))
+                .catch(() => { });
+        this.load();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.disposed = true;
+        clearTimeout(this.timer);
+        window.removeEventListener('keydown', this.onKey, true);
+        document.removeEventListener('fullscreenchange', this.onFullscreen);
+        for (const name of WAKE)
+            window.removeEventListener(name, this.onWake, true);
+    }
+    async load() {
+        const { filter, start, saver } = this.options;
+        const frames = [];
+        try {
+            for (let skip = 0; frames.length < MOST; skip += PAGE) {
+                const page = await galleryApi.posts(filter, skip, PAGE);
+                for (const post of page.items)
+                    if (!post.hiddenAt)
+                        for (const photo of post.photos)
+                            frames.push({ post, photo });
+                if (this.disposed || skip + PAGE >= page.total)
+                    break;
+            }
+        }
+        catch {
+            /* The show has what came; a saver with nothing closes itself below. */
+        }
+        if (this.disposed)
+            return;
+        if (saver)
+            shuffle(frames);
+        this.frames = frames.slice(0, MOST);
+        const found = start ? this.frames.findIndex(one => one.post.id === start.postId) : -1;
+        this.at = found < 0 ? 0 : Math.min(found + start.index, this.frames.length - 1);
+        this.loaded = true;
+        if (saver && !this.frames.length)
+            return this.close();
+        this.play(!!this.options.playing || !!saver);
+    }
+    play(on) {
+        this.playing = on;
+        this.schedule();
+    }
+    /** The next photo after the dwell, asked ahead so it is there when it turns. */
+    schedule() {
+        clearTimeout(this.timer);
+        if (!this.playing || this.frames.length < 2)
+            return;
+        const next = this.frames[(this.at + 1) % this.frames.length];
+        new Image().src = next.photo.fullpath;
+        this.timer = setTimeout(() => this.step(1), DWELL);
+    }
+    step(by) {
+        const count = this.frames.length;
+        if (!count)
+            return;
+        this.at = (this.at + by + count) % count;
+        this.schedule();
+    }
+    close() {
+        if (this.disposed)
+            return;
+        if (this.wholeScreen && document.fullscreenElement)
+            document.exitFullscreen().catch(() => { });
+        this.remove();
+        this.dispatchEvent(new CustomEvent('closed'));
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "saver", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryShow.prototype, "frames", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "at", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "playing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "loaded", void 0);
+GalleryShow = __decorate([
+    customElement('gallery-show')
+], GalleryShow);
+export { GalleryShow };
+/** What wakes the screen from the saver. */
+const WAKE = ['pointermove', 'pointerdown', 'keydown', 'wheel', 'touchstart'];
+function shuffle(list) {
+    for (let i = list.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [list[i], list[j]] = [list[j], list[i]];
+    }
+}
+//# sourceMappingURL=gallery-show.js.map

package/dist-client/components/gallery-show.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-show.js","sourceRoot":"","sources":["../../client/components/gallery-show.ts"],"names":[],"mappings":";AAAA;;;;GAIG;AACH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAsC,MAAM,yBAAyB,CAAA;AACxF,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,2BAA2B,CAAA;AAElD,+CAA+C;AAC/C,MAAM,KAAK,GAAG,IAAI,CAAA;AAClB,qGAAqG;AACrG,MAAM,IAAI,GAAG,GAAG,CAAA;AAChB,MAAM,IAAI,GAAG,EAAE,CAAA;AAgBR,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAvD;;QAwGuC,UAAK,GAAG,KAAK,CAAA;QAGxC,WAAM,GAAY,EAAE,CAAA;QACpB,OAAE,GAAG,CAAC,CAAA;QACN,YAAO,GAAG,KAAK,CAAA;QACf,WAAM,GAAG,KAAK,CAAA;QAGvB,gBAAW,GAAG,KAAK,CAAA;QACnB,aAAQ,GAAG,KAAK,CAAA;QAqHhB,UAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,IAAI,CAAC,KAAK;gBAAE,OAAM;YACtB,MAAM,OAAO,GAA+B;gBAC1C,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC9B,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC9B,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;gBACnC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;aAC3B,CAAA;YACD,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;YAC1B,IAAI,CAAC,GAAG;gBAAE,OAAM;YAChB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,GAAG,EAAE,CAAA;QACP,CAAC,CAAA;QAED,iFAAiF;QACzE,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,QAAQ,CAAC,iBAAiB;gBAAE,IAAI,CAAC,KAAK,EAAE,CAAA;QACnE,CAAC,CAAA;QAEO,WAAM,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC5B,uGAAuG;YACvG,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,GAAG,CAAE,CAAkB,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAE,CAAkB,CAAC,SAAS,CAAC,GAAG,CAAC;gBACnH,OAAM;YACR,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAA;IAQH,CAAC;aAzQQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FlB,AA7FY,CA6FZ;IAED,yFAAyF;IACzF,MAAM,CAAC,IAAI,CAAC,OAAoB;QAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAgB,CAAA;QAClE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAC/B,OAAO,IAAI,CAAA;IACb,CAAC;IAcD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QAClC,IAAI,CAAC,KAAK;YACR,OAAO,IAAI,CAAC,MAAM;gBAChB,CAAC,CAAC,IAAI,CAAA,sBAAsB,CAAC,CAAC,yBAAyB,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;gBAC1G,CAAC,CAAC,OAAO,CAAA;QACb,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;QAC7B,OAAO,IAAI,CAAA;QACP,CAAA,mDAAoD,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,YAAY,KAAK,CAAC,QAAQ,QAAQ,IAAI,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;;UAErI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,OAAO;2BACxD,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;;QAG9G,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;gBACtB,CAAC,CAAC,IAAI,CAAA,4CAA4C,CAAC,CAAC,yBAAyB,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;2DAGjE,CAAC,CAAC,qBAAqB,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;8BAElF;gBACd,CAAC,CAAC,OAAO,EACnB;KACD,CAAA;IACH,CAAC;IAEO,SAAS;QACf,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,OAAO;QAEtG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YACpB,CAAC,CAAC,IAAI,CAAA;2BACW,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,qBAAqB,CAAC;sBACrE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,qBAAqB,CAAC;uBAC/D,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;;yBAE5B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY;sBACxC;YACZ,CAAC,CAAC,OACN;2BACqB,CAAC,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;;;WAGzG,CAAA;IACT,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAA;QAClC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QACpD,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QAChE,IAAI,IAAI,CAAC,KAAK;YAAE,KAAK,MAAM,IAAI,IAAI,IAAI;gBAAE,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;QACzF,uGAAuG;QACvG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB;YACvC,IAAI,CAAC,iBAAiB,EAAE;iBACrB,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;iBACrC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;QACpB,IAAI,CAAC,IAAI,EAAE,CAAA;IACb,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxB,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QACvD,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QACnE,KAAK,MAAM,IAAI,IAAI,IAAI;YAAE,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;IAC9E,CAAC;IAEO,KAAK,CAAC,IAAI;QAChB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;QAC7C,MAAM,MAAM,GAAY,EAAE,CAAA;QAC1B,IAAI,CAAC;YACH,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC;gBACtD,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;gBACvD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK;oBAAE,IAAI,CAAC,IAAI,CAAC,QAAQ;wBAAE,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM;4BAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;gBAChH,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,KAAK;oBAAE,MAAK;YACvD,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,uEAAuE;QACzE,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;QACzB,IAAI,KAAK;YAAE,OAAO,CAAC,MAAM,CAAC,CAAA;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACnC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACrF,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,KAAM,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QAChF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QAClB,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACrD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,CAAA;IAC9C,CAAC;IAEO,IAAI,CAAC,EAAW;QACtB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,gFAAgF;IACxE,QAAQ;QACd,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAAE,OAAM;QACnD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;QAC5D,IAAI,KAAK,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QACrC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;IACpD,CAAC;IAEO,IAAI,CAAC,EAAU;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;QAChC,IAAI,CAAC,KAAK;YAAE,OAAM;QAClB,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,GAAG,KAAK,CAAA;QACxC,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IA+BD,KAAK;QACH,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;QACzB,IAAI,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,iBAAiB;YAAE,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;QAC7F,IAAI,CAAC,MAAM,EAAE,CAAA;QACb,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/C,CAAC;;AAjK2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;0CAAc;AAGxC;IAAhB,KAAK,EAAE;;2CAA6B;AACpB;IAAhB,KAAK,EAAE;;uCAAe;AACN;IAAhB,KAAK,EAAE;;4CAAwB;AACf;IAAhB,KAAK,EAAE;;2CAAuB;AA9GpB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA0QvB;;AAED,4CAA4C;AAC5C,MAAM,IAAI,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC,CAAA;AAE7E,SAAS,OAAO,CAAI,IAAS;IAC3B,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAC5C;QAAA,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC;AACH,CAAC","sourcesContent":["/*\n * The gallery's photos across the whole window, one at a time (ADR-0165 decision 9): seen large from a post, played as\n * a slideshow from the gallery, and the screen saver after the person has been away. One show for the three - what\n * differs is where it starts, whether it plays, and whether anything the person does closes it (the saver).\n */\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { galleryApi, type Filter, type Photo, type Post } from '../utils/gallery-api.js'\nimport { day, t } from '../utils/gallery-words.js'\n\n/** How long one photo stays while it plays. */\nconst DWELL = 7000\n/** The most photos one show walks through - pages of the gallery's own size are asked until this. */\nconst MOST = 300\nconst PAGE = 60\n\ntype Frame = { post: Post; photo: Photo }\n\nexport type ShowOptions = {\n  /** The posts the show walks through - the gallery's narrowing where it was opened. */\n  filter: Filter\n  /** Where it starts: a post and the photo in it. Without it, the first photo. */\n  start?: { postId: string; index: number }\n  /** Plays at once. */\n  playing?: boolean\n  /** The screen saver: plays in a random order, and closes at anything the person does. */\n  saver?: boolean\n}\n\n@customElement('gallery-show')\nexport class GalleryShow extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: fixed;\n      inset: 0;\n      z-index: 10000;\n      display: block;\n      background: #000;\n      color: #fff;\n      user-select: none;\n    }\n    :host([saver]) {\n      cursor: none;\n    }\n    img {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      animation: appear 800ms ease-out;\n    }\n    @keyframes appear {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n    .about {\n      position: absolute;\n      inset-inline: 0;\n      bottom: 0;\n      padding: 48px 24px 20px;\n      background: linear-gradient(transparent, rgb(0 0 0 / 60%));\n      font-size: 14px;\n      line-height: 1.5;\n    }\n    .about .caption {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      white-space: pre-wrap;\n      font-size: 16px;\n    }\n    .about .who {\n      opacity: 0.75;\n    }\n    .bar {\n      position: absolute;\n      top: 12px;\n      inset-inline-end: 12px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .bar .count {\n      padding: 0 8px;\n      font-size: 13px;\n      opacity: 0.8;\n    }\n    button {\n      display: inline-flex;\n      padding: 8px;\n      border: 0;\n      border-radius: 50%;\n      background: rgb(0 0 0 / 45%);\n      color: #fff;\n      cursor: pointer;\n    }\n    button:hover {\n      background: rgb(255 255 255 / 20%);\n    }\n    .turn {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n    .previous {\n      inset-inline-start: 12px;\n    }\n    .next {\n      inset-inline-end: 12px;\n    }\n    .empty {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0.8;\n    }\n  `\n\n  /** Opens a show over the whole window, and the whole screen when the browser lets it. */\n  static open(options: ShowOptions): GalleryShow {\n    const show = document.createElement('gallery-show') as GalleryShow\n    show.options = options\n    document.body.appendChild(show)\n    return show\n  }\n\n  @property({ type: Boolean, reflect: true }) saver = false\n  options!: ShowOptions\n\n  @state() private frames: Frame[] = []\n  @state() private at = 0\n  @state() private playing = false\n  @state() private loaded = false\n\n  private timer?: ReturnType<typeof setTimeout>\n  private wholeScreen = false\n  private disposed = false\n\n  render() {\n    const frame = this.frames[this.at]\n    if (!frame)\n      return this.loaded\n        ? html`<div class=\"empty\">${t('gallery.text.show-empty')}</div>${this.saver ? nothing : this.renderBar()}`\n        : nothing\n    const { post, photo } = frame\n    return html`\n      ${/* A new element for each photo, so it fades in. */ [photo.id].map(() => html`<img src=${photo.fullpath} alt=${post.caption ?? ''} />`)}\n      <div class=\"about\">\n        ${post.caption ? html`<div class=\"caption\">${post.caption}</div>` : nothing}\n        <div class=\"who\">${post.creator?.name ?? ''} · ${day(post.takenAt)}${post.event ? ` · ${post.event.name}` : ''}</div>\n      </div>\n      ${\n        this.saver\n          ? nothing\n          : html`${this.renderBar()}\n              ${this.frames.length > 1\n                ? html`<button class=\"turn previous\" aria-label=${t('gallery.button.previous')} @click=${() => this.step(-1)}>\n                      <md-icon>chevron_left</md-icon>\n                    </button>\n                    <button class=\"turn next\" aria-label=${t('gallery.button.next')} @click=${() => this.step(1)}>\n                      <md-icon>chevron_right</md-icon>\n                    </button>`\n                : nothing}`\n      }\n    `\n  }\n\n  private renderBar() {\n    return html`<div class=\"bar\">\n      ${this.frames.length ? html`<span class=\"count\">${this.at + 1} / ${this.frames.length}</span>` : nothing}\n      ${\n        this.frames.length > 1\n          ? html`<button\n              aria-label=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}\n              title=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}\n              @click=${() => this.play(!this.playing)}\n            >\n              <md-icon>${this.playing ? 'pause' : 'play_arrow'}</md-icon>\n            </button>`\n          : nothing\n      }\n      <button aria-label=${t('gallery.button.close')} title=${t('gallery.button.close')} @click=${() => this.close()}>\n        <md-icon>close</md-icon>\n      </button>\n    </div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.saver = !!this.options?.saver\n    window.addEventListener('keydown', this.onKey, true)\n    document.addEventListener('fullscreenchange', this.onFullscreen)\n    if (this.saver) for (const name of WAKE) window.addEventListener(name, this.onWake, true)\n    /* The whole screen needs the press that opened it - the saver has none, and covers the window only. */\n    if (!this.saver && this.requestFullscreen)\n      this.requestFullscreen()\n        .then(() => (this.wholeScreen = true))\n        .catch(() => {})\n    this.load()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.disposed = true\n    clearTimeout(this.timer)\n    window.removeEventListener('keydown', this.onKey, true)\n    document.removeEventListener('fullscreenchange', this.onFullscreen)\n    for (const name of WAKE) window.removeEventListener(name, this.onWake, true)\n  }\n\n  private async load() {\n    const { filter, start, saver } = this.options\n    const frames: Frame[] = []\n    try {\n      for (let skip = 0; frames.length < MOST; skip += PAGE) {\n        const page = await galleryApi.posts(filter, skip, PAGE)\n        for (const post of page.items) if (!post.hiddenAt) for (const photo of post.photos) frames.push({ post, photo })\n        if (this.disposed || skip + PAGE >= page.total) break\n      }\n    } catch {\n      /* The show has what came; a saver with nothing closes itself below. */\n    }\n    if (this.disposed) return\n    if (saver) shuffle(frames)\n    this.frames = frames.slice(0, MOST)\n    const found = start ? this.frames.findIndex(one => one.post.id === start.postId) : -1\n    this.at = found < 0 ? 0 : Math.min(found + start!.index, this.frames.length - 1)\n    this.loaded = true\n    if (saver && !this.frames.length) return this.close()\n    this.play(!!this.options.playing || !!saver)\n  }\n\n  private play(on: boolean) {\n    this.playing = on\n    this.schedule()\n  }\n\n  /** The next photo after the dwell, asked ahead so it is there when it turns. */\n  private schedule() {\n    clearTimeout(this.timer)\n    if (!this.playing || this.frames.length < 2) return\n    const next = this.frames[(this.at + 1) % this.frames.length]\n    new Image().src = next.photo.fullpath\n    this.timer = setTimeout(() => this.step(1), DWELL)\n  }\n\n  private step(by: number) {\n    const count = this.frames.length\n    if (!count) return\n    this.at = (this.at + by + count) % count\n    this.schedule()\n  }\n\n  private onKey = (e: KeyboardEvent) => {\n    if (this.saver) return\n    const handled: Record<string, () => void> = {\n      ArrowLeft: () => this.step(-1),\n      ArrowRight: () => this.step(1),\n      ' ': () => this.play(!this.playing),\n      Escape: () => this.close()\n    }\n    const act = handled[e.key]\n    if (!act) return\n    e.preventDefault()\n    e.stopPropagation()\n    act()\n  }\n\n  /** Leaving the whole screen (Esc there is the browser's) leaves the show too. */\n  private onFullscreen = () => {\n    if (this.wholeScreen && !document.fullscreenElement) this.close()\n  }\n\n  private onWake = (e: Event) => {\n    /* The pointer resting on the screen still says it moved, by a pixel or so - a real move is farther. */\n    if (e.type === 'pointermove' && Math.abs((e as PointerEvent).movementX) + Math.abs((e as PointerEvent).movementY) < 4)\n      return\n    e.preventDefault()\n    e.stopPropagation()\n    this.close()\n  }\n\n  close() {\n    if (this.disposed) return\n    if (this.wholeScreen && document.fullscreenElement) document.exitFullscreen().catch(() => {})\n    this.remove()\n    this.dispatchEvent(new CustomEvent('closed'))\n  }\n}\n\n/** What wakes the screen from the saver. */\nconst WAKE = ['pointermove', 'pointerdown', 'keydown', 'wheel', 'touchstart']\n\nfunction shuffle<T>(list: T[]) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1))\n    ;[list[i], list[j]] = [list[j], list[i]]\n  }\n}\n"]}

package/dist-client/components/gallery-uploader.d.ts

@@ -24,6 +24,8 @@ export declare class GalleryUploader extends GalleryUploader_base {
     private tagRefusal;
     private suggestions;
     private chosenSpace;
+    /** A post of the own gallery is the person's alone until shared (decision 2) - off when posting. */
+    private shared;
     private chosenEvent;
     private takenOn;
     private choices;