Squashed commit of the following:

commit 3251cfd Author: github-actions <[email protected]> Date: Thu Jan 25 09:47:54 2024 +0000 Fixup. Format code with Prettier commit 9a492e4 Author: pampletousse <[email protected]> Date: Thu Jan 25 10:47:32 2024 +0100 [DONE] Pampletousse/feature download qrcode (EsupPortail#1015) * Add download button for qr code + fix border red too big * Mutualize qrcode generation and display between video and live(event) * Add same template modification to live event * Try to mutualize qr code generation between video and event * Add event slug to downloaded file name * éAdd alternative text to parameters * PEP8 conformity * Fix PEP8 E303 blank line * Fix PEP8 F811 * Uniformize QR code designation * Generate translations for QR Code managment * éAdd types into functions and doc + normalize id in template * Fix translations * Fix translation video into event in event-info template * Delete fuzzy translations * Add return types on functions in register tags (video and event) * Add quotes for alt in qr code img tag --------- Co-authored-by: pampletousse <[email protected]>
vsabatie · Jan 25, 2024 · 4220ae9 · 4220ae9
1 parent 86cf95b
commit 4220ae9
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 68 deletions.
diff --git a/pod/live/admin.py b/pod/live/admin.py
@@ -139,7 +139,7 @@ def formfield_for_foreignkey(self, db_field, request, **kwargs):
     def qrcode(self, obj):
         return obj.qrcode
 
-    qrcode.short_description = _("QR Code")
+    qrcode.short_description = _("QR code")
     qrcode.allow_tags = True
 
     class Media:

diff --git a/pod/live/models.py b/pod/live/models.py
@@ -1,8 +1,5 @@
 """Esup-Pod "live" models."""
-import base64
 import hashlib
-import io
-import qrcode
 import os
 
 from ckeditor.fields import RichTextField
@@ -21,12 +18,12 @@
 from django.urls import reverse
 from django.utils import timezone
 from django.utils.html import format_html
-from django.utils.safestring import mark_safe
 from django.utils.translation import ugettext_lazy as _
 
 from pod.main.lang_settings import ALL_LANG_CHOICES as __ALL_LANG_CHOICES__
 from pod.main.lang_settings import PREF_LANG_CHOICES as __PREF_LANG_CHOICES__
 from django.utils.translation import get_language
+from pod.main.utils import generate_qrcode
 from pod.authentication.models import AccessGroup
 from pod.main.models import get_nextautoincrement
 from pod.video.models import Video, Type
@@ -272,25 +269,8 @@ def is_recording_admin(self):
 
     @property
     def qrcode(self, request=None):
-        url_scheme = "https" if SECURE_SSL_REDIRECT else "http"
-        url_immediate_event = reverse("live:event_immediate_edit", args={self.id})
-        data = "".join(
-            [
-                url_scheme,
-                "://",
-                get_current_site(request).domain,
-                url_immediate_event,
-            ]
-        )
-        img = qrcode.make(data)
-        buffer = io.BytesIO()
-        img.save(buffer, format="PNG")
-        img_str = base64.b64encode(buffer.getvalue()).decode("utf-8")
         alt = _("QR code to record immediately an event")
-        return mark_safe(
-            f'<img src="data:image/png;base64, {img_str}" '
-            + f'width="300px" height="300px" alt={alt}>'
-        )
+        return generate_qrcode("live:event_immediate_edit", self.id, alt, request)
 
     def set_broadcaster_file(self, filename):
         trans_folder = os.path.join(MEDIA_ROOT, LIVE_TRANSCRIPTIONS_FOLDER)

diff --git a/pod/live/templates/live/event-info.html b/pod/live/templates/live/event-info.html
@@ -2,6 +2,7 @@
 {% load static %}
 {% load tagging_tags %}
 {% load thumbnail %}
+{% load event_tags %}
 
 <div class="tab-content w-100" id="video-meta">
   {% if event.description %}
@@ -58,7 +59,7 @@ <h3 class="meta-title">{% trans 'Type:' %}</h3>
   </div>
 
   {% if event.is_draft == False or event.owner == request.user or request.user in event.additional_owners.all or request.user.is_superuser %} <!-- Début modale -->
-    <div class="modal fade" id="share" tabindex="-1" aria-labelledby="shareLabel" aria-hidden="true" {% if event.is_draft %}style="border:1px solid red"{% endif %}>
+    <div class="modal fade" id="share" tabindex="-1" aria-labelledby="shareLabel" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
@@ -70,7 +71,7 @@ <h2 class="modal-title h5" id="shareLabel">
             <div class="modal-body">
 
               {% if event.is_draft %}
-                <div class="card text-white bg-danger mb-3">
+                <div class="card text-white border-danger mb-3">
                   <div class="card-body">
                   {% blocktrans %}Please note that your event is in draft mode.<br>The following links contain a key allowing access. Anyone with this links can access it.{% endblocktrans %}
                   </div>
@@ -117,17 +118,16 @@ <h2 class="modal-title h5" id="shareLabel">
               <fieldset class="pod-share-fieldset">
                 <legend><i class="bi bi-link-45deg" aria-hidden="true"></i>&nbsp;{% trans 'Share the link' %}</legend>
                   <div class="form-group">
-                    <label for="txtpartage">{% trans 'Use this link to share the video:' %}</label>
+                    <label for="txtpartage">{% trans 'Use this link to share the event:' %}</label>
                     <input class="form-control" type="text" name="txtpartage" id="txtpartage" value="{% if request.is_secure %}https{% else %}http{% endif %}://{{ request.META.HTTP_HOST }}{% url 'live:event' slug=event.slug %}{% if event.is_draft == True %}{{ event.get_hashkey }}/{% endif %}">
                   </div>
-                <div class="form-group">
-                  <label>{% trans 'QR code for this link:' %}&nbsp;
-                    <a href="#" class="btn pod-btn pod-btn-social m-1" title="{% trans 'Warning, it use google API' %}" role="button" data-bs-toggle="collapse" data-bs-target="#qrcode" aria-expanded="false" aria-controls="qrcode">
-                      <i class="bi bi-eye" aria-hidden="true"></i>
-                    </a>
-                  </label>
-                  <img src="//chart.apis.google.com/chart?cht=qr&amp;chs=200x200&amp;chl={% if request.is_secure %}https{% else %}http{% endif %}://{{ request.META.HTTP_HOST }}{% url 'live:event' slug=event.slug %}{% if event.is_draft == True %}{{ event.get_hashkey }}/{% endif %}" alt="qrcode" id="qrcode" loading="lazy">
-                </div>
+                  <div class="form-group m-2">
+                  {% get_event_qrcode event.id as qrcode %}
+                    <label>{% trans 'QR code for this link:' %}&nbsp;</label><br>
+                    {{ qrcode }}
+                    <br>
+                      <button id="btn-download-qr-code" type="submit" data-slug="{{ event.slug }}" class="btn btn-primary my-2" title="{% trans 'Download this QR code' %}">{% trans 'Download' %}</button>
+                  </div>
               </fieldset>
             </div> <!-- End modal body-->
         </div> <!-- End modal content-->

diff --git a/pod/live/templatetags/event_tags.py b/pod/live/templatetags/event_tags.py
@@ -1,8 +1,10 @@
 from django.template.defaultfilters import register
 from django.utils import timezone
 
+from django.utils.translation import ugettext_lazy as _
 from pod.live.models import Event
 from pod.live.views import can_manage_event
+from pod.main.utils import generate_qrcode
 
 
 @register.simple_tag(takes_context=True)
@@ -23,3 +25,18 @@ def get_next_events(context, broadcaster_id=None, limit_nb=4):
 @register.filter
 def can_manage_event_filter(user):
     return can_manage_event(user)
+
+
+@register.simple_tag(name="get_event_qrcode")
+def get_event_qrcode(event_id: int) -> str:
+    """Get the event generated QR code.
+
+    Args:
+        event_id (int): Identifier of event object
+
+    Returns:
+        string: HTML-formed generated qrcode
+
+    """
+    alt = _("QR code event's link")
+    return generate_qrcode("live:event_immediate_edit", event_id, alt)
diff --git a/pod/locale/fr/LC_MESSAGES/django.po b/pod/locale/fr/LC_MESSAGES/django.po
@@ -3035,8 +3035,8 @@ msgid "QR code to record immediately an event"
 msgstr "QR code pour la programmation d’un évènement immédiat"
 
 #: pod/live/admin.py
-msgid "QR Code"
-msgstr "QR Code"
+msgid "QR code"
+msgstr "QR code"
 
 #: pod/live/admin.py pod/live/models.py pod/recorder/models.py
 #: pod/video/models.py
@@ -3661,9 +3661,8 @@ msgid "Share the link"
 msgstr "Partager le lien"
 
 #: pod/live/templates/live/event-info.html
-#: pod/video/templates/videos/video-info.html
-msgid "Use this link to share the video:"
-msgstr "Utiliser ce lien pour partager la vidéo :"
+msgid "Use this link to share the event:"
+msgstr "Utiliser ce lien pour partager l'évènement :"
 
 #: pod/live/templates/live/event-info.html
 #: pod/video/templates/videos/video-info.html
@@ -3672,8 +3671,14 @@ msgstr "QR code pour le lien :"
 
 #: pod/live/templates/live/event-info.html
 #: pod/video/templates/videos/video-info.html
-msgid "Warning, it use google API"
-msgstr "Attention, utilise une API Google"
+msgid "Download this QR code"
+msgstr "Télécharger ce QR code"
+
+#: pod/live/templates/live/event-info.html
+#: pod/podfile/templates/podfile/list_folder_files.html
+#: pod/video/templates/videos/video-info.html
+msgid "Download"
+msgstr "Télécharger"
 
 #: pod/live/templates/live/event-script.html
 msgid "Recording not done: "
@@ -3948,6 +3953,10 @@ msgstr "Évènements à venir"
 msgid "Past events"
 msgstr "Évènements passés"
 
+#: pod/live/templatetags/event_tags.py
+msgid "QR code event's link:"
+msgstr "QR code pour le lien de l'évènement :"
+
 #: pod/live/utils.py
 #, python-format
 msgid "Registration of event #%(content_id)s"
@@ -4823,7 +4832,7 @@ msgstr ""
 "droite, mode sombre ou dyslexie etc.), gérer la session (authentification) "
 "et analyser le trafic du site (pour certaines instances)."
 
-#: pod/main/templates/base.html
+#: pod/main/templates/base.html pod/video/templates/videos/add_video.html
 msgid "Learn more"
 msgstr "En savoir plus"
 
@@ -6572,10 +6581,6 @@ msgstr "Partager le dossier « %(folder_name)s » avec un autre utilisateur"
 msgid "Upload Files"
 msgstr "Téléverser des fichiers"
 
-#: pod/podfile/templates/podfile/list_folder_files.html
-msgid "Download"
-msgstr "Télécharger"
-
 #: pod/podfile/templates/podfile/list_folder_files.html
 msgid "Delete file"
 msgstr "Supprimer le fichier"
@@ -8411,8 +8416,8 @@ msgstr ""
 "interactive H5P :"
 
 #: pod/video/templates/videos/video-info.html
-msgid "QR code"
-msgstr "QR code"
+msgid "Use this link to share the video:"
+msgstr "Utiliser ce lien pour partager la vidéo :"
 
 #: pod/video/templates/videos/video_collaborate.html
 msgid "Collaborate"
@@ -8606,6 +8611,10 @@ msgstr "Afficher les statistiques de visualisation de toutes les vidéos"
 msgid ": "
 msgstr " : "
 
+#: pod/video/templatetags/video_tags.py
+msgid "QR code video's link:"
+msgstr "QR code pour le lien de la vidéo :"
+
 #: pod/video/templatetags/video_tags.py
 msgid "This content is not password protected."
 msgstr "Ce contenu n'est pas protégé par un mot de passe."

diff --git a/pod/locale/nl/LC_MESSAGES/django.po b/pod/locale/nl/LC_MESSAGES/django.po
@@ -2843,7 +2843,7 @@ msgid "QR code to record immediately an event"
 msgstr ""
 
 #: pod/live/admin.py
-msgid "QR Code"
+msgid "QR code"
 msgstr ""
 
 #: pod/live/admin.py pod/live/models.py pod/recorder/models.py
@@ -3428,8 +3428,7 @@ msgid "Share the link"
 msgstr ""
 
 #: pod/live/templates/live/event-info.html
-#: pod/video/templates/videos/video-info.html
-msgid "Use this link to share the video:"
+msgid "Use this link to share the event:"
 msgstr ""
 
 #: pod/live/templates/live/event-info.html
@@ -3439,7 +3438,13 @@ msgstr ""
 
 #: pod/live/templates/live/event-info.html
 #: pod/video/templates/videos/video-info.html
-msgid "Warning, it use google API"
+msgid "Download this QR code"
+msgstr ""
+
+#: pod/live/templates/live/event-info.html
+#: pod/podfile/templates/podfile/list_folder_files.html
+#: pod/video/templates/videos/video-info.html
+msgid "Download"
 msgstr ""
 
 #: pod/live/templates/live/event-script.html
@@ -3702,6 +3707,10 @@ msgstr ""
 msgid "Past events"
 msgstr ""
 
+#: pod/live/templatetags/event_tags.py
+msgid "QR code event's link"
+msgstr ""
+
 #: pod/live/utils.py
 #, python-format
 msgid "Registration of event #%(content_id)s"
@@ -4567,7 +4576,7 @@ msgid ""
 "analyze site traffic."
 msgstr ""
 
-#: pod/main/templates/base.html
+#: pod/main/templates/base.html pod/video/templates/videos/add_video.html
 msgid "Learn more"
 msgstr ""
 
@@ -6209,10 +6218,6 @@ msgstr ""
 msgid "Upload Files"
 msgstr ""
 
-#: pod/podfile/templates/podfile/list_folder_files.html
-msgid "Download"
-msgstr ""
-
 #: pod/podfile/templates/podfile/list_folder_files.html
 msgid "Delete file"
 msgstr ""
@@ -7896,7 +7901,7 @@ msgid ""
 msgstr ""
 
 #: pod/video/templates/videos/video-info.html
-msgid "QR code"
+msgid "Use this link to share the video:"
 msgstr ""
 
 #: pod/video/templates/videos/video_collaborate.html
@@ -7935,6 +7940,25 @@ msgstr ""
 msgid "Add a new video"
 msgstr ""
 
+#: pod/video/templates/videos/video_edit.html
+#, python-format
+msgid ""
+"\n"
+"              By default, the deletion date of your video is set to "
+"%(counter)s year, in accordance with your profile. As a teacher, you can "
+"modify this date. If you are a student and wish to extend this period, add a "
+"teacher as an additional video owner\n"
+"          "
+msgid_plural ""
+"\n"
+"              By default, the deletion date of your video is set to "
+"%(counter)s years, in accordance with your profile. As a teacher, you can "
+"modify this date. If you are a student and wish to extend this period, add a "
+"teacher as an additional video owner\n"
+"          "
+msgstr[0] ""
+msgstr[1] ""
+
 #: pod/video/templates/videos/video_edit.html
 #: pod/video/templates/videos/video_page_content.html
 msgid "The video is currently waiting for encoding."
@@ -8085,6 +8109,10 @@ msgstr ""
 msgid ": "
 msgstr ""
 
+#: pod/video/templatetags/video_tags.py
+msgid "QR code video's link"
+msgstr ""
+
 #: pod/video/templatetags/video_tags.py
 msgid "This content is not password protected."
 msgstr ""

diff --git a/pod/main/static/js/main.js b/pod/main/static/js/main.js
@@ -300,6 +300,38 @@ document.addEventListener("hidden.bs.collapse", (e) => {
   if (e.target.id === "qrcode") e.target.setAttribute("src", "");
 });
 
+if (document.getElementById("btn-download-qr-code") !== null) {
+  document
+    .getElementById("btn-download-qr-code")
+    .addEventListener("click", (e) => {
+      let nameOfDownload = e.target.dataset.slug + "-qrcode.png";
+      downloadImage(document.getElementById("qrcode").src, nameOfDownload);
+    });
+}
+
+/**
+ * Download image function with url
+ *
+ * @param imageSrc Source of image
+ * @param nameOfDownload Given name for download
+ * @returns {Promise<void>}
+ */
+async function downloadImage(imageSrc, nameOfDownload = "default.png") {
+  const response = await fetch(imageSrc);
+  const blobImage = await response.blob();
+  const href = URL.createObjectURL(blobImage);
+
+  const anchorElement = document.createElement("a");
+  anchorElement.href = href;
+  anchorElement.download = nameOfDownload;
+
+  document.body.appendChild(anchorElement);
+  anchorElement.click();
+
+  document.body.removeChild(anchorElement);
+  window.URL.revokeObjectURL(href);
+}
+
 document.addEventListener("change", (e) => {
   if (e.target.id !== "displaytime") return;
   let displayTime = document.getElementById("displaytime");