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>
{% endblock %}

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

{% block content %}
  <main>
    {% if user.id == object.id and albums|length > 0 %}
      <div x-data="picture_download" x-cloak>
        <button
          :disabled="in_progress"
          class="btn btn-blue"
          @click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
        >
          <i class="fa fa-download"></i>
          {% trans %}Download all my pictures{% endtrans %}
        </button>
        <progress x-ref="progress" x-show="in_progress"></progress>
      </div>
    {% endif %}
    {% for album, pictures in albums|items %}
      <h4>{{ album }}</h4>
      <br />
      <div class="photos">
        {% for picture in pictures %}
          {% if picture.can_be_viewed_by(user) %}
            <a href="{{ url("sas:picture", picture_id=picture.id) }}#pict">
              <div
                class="photo{% if not picture.is_moderated %} not_moderated{% endif %}"
                style="background-image: url('{% if picture.file %}{{ picture.get_download_thumb_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
              >
                {% if not picture.is_moderated %}
                  <div class="overlay">&nbsp;</div>
                  <div class="text">{% trans %}To be moderated{% endtrans %}</div>
                {% else %}
                  <div class="text">&nbsp;</div>
                {% endif %}
              </div>
            </a>
          {% else %}
            <div>
              <div class="photo">
                <div class="text">{% trans %}Picture Unavailable{% endtrans %}</div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
      <br>
    {% endfor %}
  </main>
{% endblock content %}

{% block script %}

  {{ super() }}
  {% if user.id == object.id %}
    <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("picture_download", () => ({
          in_progress: false,

          async download(url) {
            this.in_progress = true;
            const bar = this.$refs.progress;
            bar.value = 0;

            /** @type Picture[] */
            const pictures = await (await fetch(url)).json();
            bar.max = 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(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.in_progress = false;
          }
        }))
      });
    </script>
  {% endif %}
{% endblock script %}