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 src="{{ static('core/js/jszip/jszip.min.js') }}"></script>
  <script defer src="{{ static('core/js/jszip/jszip-utils.min.js') }}"></script>
  <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>
{% endblock %}

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

{% block content %}
  <main>
    {% if can_edit(profile, user) %}
      <button disabled id="download" onclick="download('{{ url('api:pictures') }}?users_identified={{ object.id }}')">{% trans %}Download all my pictures{% endtrans %}</button>
    {% endif %}
    {% for album, pictures in albums|items %}
      <h4>{{ album }}</h4>
      <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 %}
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        /* Enable button once everything is loaded and if JSZip is supported */
        document.getElementById("download").disabled = !JSZip.support.blob;
      });
      async function download(url) {

        let zip = new JSZip();
        let size = 0;
        let pictures = await (await fetch(url)).json();
        pictures.forEach(async (picture) => {
          size += picture.size;
          zip.file(
            "IMG_" + picture.date + picture.name.slice(picture.name.lastIndexOf(".")),
            new Promise(function (resolve, reject) {
              JSZipUtils.getBinaryContent(picture.full_size_url, (err, data) => {
                if (err) {
                  reject(err);
                  return;
                }
                resolve(data);
              })
            }),
            { binary: true }
          );
        });

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

        await zip.generateInternalStream({
          type: "uint8array",
          streamFiles: true,
          compression: "DEFLATE",
          compressionOptions: { level: 9 }
        })
          .on("data", (data) => writeStream.write(data))
          .on("error", (err) => console.error(err))
          .on("end", () => writeStream.close())
          .resume();
      }
    </script>
  </main>
{% endblock %}