Sith/core/templates/core/user_pictures.jinja

{% extends "core/base.jinja" %}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
{%- endblock -%}

{% block additional_js %}
  <script defer type="module">
    import { showSaveFilePicker } from "{{ static('core/js/native-file-system-adapter/mod.js') }}";
    window.showSaveFilePicker = showSaveFilePicker; /* Export function to normal javascript */
  </script>
  <script defer type="text/javascript" src="{{ static('core/js/zipjs/zip-fs-full.min.js') }}"></script>
  <script defer type="text/javascript" src="{{ static('core/js/alpine/intersect.min.js') }}"></script>
{% endblock %}

{% block title %}
  {% trans user_name=profile.get_display_name() %}{{ user_name }}'s pictures{% endtrans %}
{% endblock %}

{% block content %}
  <main x-data="user_pictures">
    {% if user.id == object.id %}
      <div x-show="pictures.length > 0" x-cloak>
        <button
          :disabled="is_downloading"
          class="btn btn-blue"
          @click="download_zip()"
        >
          <i class="fa fa-download"></i>
          {% trans %}Download all my pictures{% endtrans %}
        </button>
        <progress x-ref="progress" x-show="is_downloading"></progress>
      </div>
    {% endif %}

    <template x-for="[album, pictures] in Object.entries(albums)">
      <section x-data="{ shown: false }" x-intersect:enter="shown = true">
        <hgroup x-show="shown" x-transition x-cloak>
          <br />
          <h4 x-text="album"></h4>
          <div class="photos">
            <template x-for="picture in pictures">
              <a :href="`/sas/picture/${picture.id}#pict`">
                <div
                  class="photo"
                  :class="{not_moderated: !picture.is_moderated}"
                  :style="`background-image: url(${picture.thumb_url})`"
                >
                  <template x-if="!picture.is_moderated">
                    <div class="overlay">&nbsp;</div>
                    <div class="text">{% trans %}To be moderated{% endtrans %}</div>
                  </template>
                  <template x-if="picture.is_moderated">
                    <div class="text">&nbsp;</div>
                  </template>
                </div>
              </a>
            </template>
          </div>
        </hgroup>
      </section>
    </template>
    <div class="photos" :aria-busy="loading"></div>
  </main>
{% endblock content %}

{% block script %}

  {{ super() }}
  <script>
    /**
     * @typedef Picture
     * @property {number} id
     * @property {string} name
     * @property {number} size
     * @property {string} date
     * @property {Object} author
     * @property {string} full_size_url
     * @property {string} compressed_url
     * @property {string} thumb_url
     * @property {string} album
     */

    document.addEventListener("alpine:init", () => {
      Alpine.data("user_pictures", () => ({
        is_downloading: false,
        loading: true,
        pictures: [],
        albums: {},

        async init() {
          this.pictures = await this.get_pictures();
          this.albums = Object.groupBy(this.pictures, ({album}) => album);
          this.loading = false;
        },

        /**
         * @return {Promise<Picture[]>}
         */
        async get_pictures() {
          {# The API forbids to get more than 199 items at once
           from paginated routes.
           In order to download all the user pictures, it may be needed
           to performs multiple requests #}
          const max_per_page = 199;
          const url = "{{ url("api:pictures") }}"
          + "?users_identified={{ object.id }}"
          + `&page_size=${max_per_page}`;

          let first_page = (await ( await fetch(url)).json());
          let promises = [first_page.results];

          const nb_pictures = first_page.count
          const nb_pages = Math.ceil(nb_pictures / max_per_page);

          for (let i = 2; i <= nb_pages; i++) {
            promises.push(
              fetch(url + `&page=${i}`).then(res => res.json().then(json => json.results))
            );
          }
          return (await Promise.all(promises)).flat()
        },


        async download_zip(){
          this.is_downloading = true;
          const bar = this.$refs.progress;
          bar.value = 0;
          bar.max = this.pictures.length;

          const fileHandle = await window.showSaveFilePicker({
            _preferPolyfill: false,
            suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
            types: {},
            excludeAcceptAllOption: false,
          })
          const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());

          await Promise.all(this.pictures.map(p => {
            const img_name = p.album + "/IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
            return zipWriter.add(
              img_name,
              new zip.HttpReader(p.full_size_url),
              {level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
            );
          }));

          await zipWriter.close();
          this.is_downloading = false;
        }
      }))
    });
  </script>
{% endblock script %}