Add PWA functionality to app and notifications capabilities

Owners can set their notification preference. Notifications are sent when video encoding is complete. Co-authored-by: Éloi Rivard <[email protected]> Co-authored-by: Loan Robert <[email protected]>
EsupPortail · Sep 20, 2023 · 6113409 · 6113409
1 parent bc57638
commit 6113409
Show file tree

Hide file tree

Showing 38 changed files with 540 additions and 5 deletions.
diff --git a/dockerfile-dev-with-volumes/README.adoc b/dockerfile-dev-with-volumes/README.adoc
@@ -108,6 +108,13 @@ MIGRATION_MODULES = {'flatpages': 'pod.db_migrations'}
 # pour avoir le maximum de log sur la console
 LOGGING = {}
 
+# PUSH NOTIFICATIONS
+# Les clés VAPID peuvent être générées avec https://web-push-codelab.glitch.me/
+WEBPUSH_SETTINGS = {
+    "VAPID_PUBLIC_KEY": "",
+    "VAPID_PRIVATE_KEY": "",
+    "VAPID_ADMIN_EMAIL": "[email protected]"
+}
 ----
 
 == Commandes

diff --git a/pod/authentication/forms.py b/pod/authentication/forms.py
@@ -49,6 +49,17 @@ class Meta(object):
         fields = []
 
 
+class SetNotificationForm(forms.ModelForm):
+    """Push notification preferences form."""
+
+    def __init__(self, *args, **kwargs):
+        super(SetNotificationForm, self).__init__(*args, **kwargs)
+
+    class Meta(object):
+        model = Owner
+        fields = ["accepts_notifications"]
+
+
 User = get_user_model()
 
 

diff --git a/pod/authentication/models.py b/pod/authentication/models.py
@@ -105,6 +105,12 @@ class Owner(models.Model):
     )
     accessgroups = models.ManyToManyField("authentication.AccessGroup", blank=True)
     sites = models.ManyToManyField(Site)
+    accepts_notifications = models.BooleanField(
+        verbose_name=_("Accept notifications"),
+        default=None,
+        null=True,
+        help_text=_("Receive push notifications on your devices."),
+    )
 
     class Meta:
         verbose_name = _("Owner")

diff --git a/pod/locale/fr/LC_MESSAGES/django.mo b/pod/locale/fr/LC_MESSAGES/django.mo
diff --git a/pod/locale/fr/LC_MESSAGES/django.po b/pod/locale/fr/LC_MESSAGES/django.po
@@ -100,6 +100,14 @@ msgstr "Commentaire"
 msgid "Picture"
 msgstr "Image"
 
+#: pod/authentication/models.py
+msgid "Accept notifications"
+msgstr "Accepter les notifications"
+
+#: pod/authentication/models.py
+msgid "Receive push notifications on your devices."
+msgstr "Recevez des notifications push sur vos appareils"
+
 #: pod/authentication/models.py pod/live/models.py pod/meeting/models.py
 #: pod/podfile/models.py pod/video/admin.py pod/video/models.py
 #: pod/video_search/templates/search/search.html
@@ -4729,6 +4737,10 @@ msgstr "Mes fichiers"
 msgid "Claim a record"
 msgstr "Revendiquer un enregistrement"
 
+#: pod/main/templates/navbar.html pod/progressive_web_app/templates/debug.html
+msgid "Notifications settings"
+msgstr "Paramètres de notifications"
+
 #: pod/main/templates/navbar.html
 msgid "Log out"
 msgstr "Déconnexion"
@@ -6208,6 +6220,26 @@ msgstr "Vous ne pouvez pas voir ce dossier."
 msgid "You cannot edit this file."
 msgstr "Vous ne pouvez pas éditer ce fichier."
 
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid "Get application notifications"
+msgstr "Recevez les notifications de l'application"
+
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid ""
+"Get notified for specific events (when one of your video encoding is "
+"completed)."
+msgstr ""
+"Recevez des notifications pour des événements spécifiques (lorsque "
+"l'encodage d'une de vos vidéos est terminé)"
+
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid "Allow"
+msgstr "Autoriser"
+
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid "Deny on all devices"
+msgstr "Refuser sur tous les appareils"
+
 #: pod/recorder/admin.py
 msgid "Delete selected Recording file treatments + source files"
 msgstr ""
@@ -6588,6 +6620,17 @@ msgstr "L’enregistrement a été supprimé."
 msgid "Recorder for Studio not found."
 msgstr "Enregistreur studio non trouvé."
 
+#: pod/settings.py
+msgid ""
+"Podeduc is aimed at users of our institutions, by allowing the publication "
+"of videos in the fields of research (promotion of platforms, etc.), training "
+"(tutorials, distance training, student reports, etc.), institutional life "
+"(video of events), offering several days of content."
+msgstr ""
+"Podeduc a pour but de faciliter la mise à disposition de vidéo et de ce fait, "
+"d’encourager l’utilisation de celles-ci dans le cadre de l’enseignement et "
+"la recherche."
+
 #: pod/urls.py
 msgid "Pod Administration"
 msgstr "Administration de Pod"

diff --git a/pod/locale/fr/LC_MESSAGES/djangojs.mo b/pod/locale/fr/LC_MESSAGES/djangojs.mo
diff --git a/pod/locale/fr/LC_MESSAGES/djangojs.po b/pod/locale/fr/LC_MESSAGES/djangojs.po
@@ -546,6 +546,22 @@ msgstr "Voir plus"
 msgid "This folder is empty"
 msgstr "Ce dossier est vide"
 
+#: pod/progressive_web_app/static/js/notification-toast.js
+msgid "Error"
+msgstr "Erreur"
+
+#: pod/progressive_web_app/static/js/notification-toast.js
+msgid ""
+"Don't forget to allow notifications from this website in your browser's "
+"settings!"
+msgstr ""
+"N'oubliez pas d'autoriser les notifications provenant de ce site web dans "
+"votre navigateur !"
+
+#: pod/progressive_web_app/static/js/notification-toast.js
+msgid "Error during unsubscription..."
+msgstr "Erreur durant la désinscription..."
+
 #: pod/video/static/js/ajax-display-channels.js
 msgid "Channel"
 msgstr "Chaîne"
@@ -757,6 +773,10 @@ msgstr "Créer catégorie"
 msgid "Select the general type of the video."
 msgstr "Sélectionnez le type général de vidéo."
 
+#: pod/video/static/js/video_edit.js
+msgid "Get notified when the video encoding is finished."
+msgstr "Recevez une notification lorsque l'encodage de la vidéo est terminé."
+
 #: pod/video/static/js/video_stats_view.js
 msgid "Title"
 msgstr "Titre"

diff --git a/pod/locale/nl/LC_MESSAGES/django.po b/pod/locale/nl/LC_MESSAGES/django.po
@@ -100,6 +100,14 @@ msgstr ""
 msgid "Picture"
 msgstr ""
 
+#: pod/authentication/models.py
+msgid "Accept notifications"
+msgstr ""
+
+#: pod/authentication/models.py
+msgid "Receive push notifications on your devices."
+msgstr ""
+
 #: pod/authentication/models.py pod/live/models.py pod/meeting/models.py
 #: pod/podfile/models.py pod/video/admin.py pod/video/models.py
 #: pod/video_search/templates/search/search.html
@@ -4486,6 +4494,10 @@ msgstr ""
 msgid "Claim a record"
 msgstr ""
 
+#: pod/main/templates/navbar.html pod/progressive_web_app/templates/debug.html
+msgid "Notifications settings"
+msgstr ""
+
 #: pod/main/templates/navbar.html
 msgid "Log out"
 msgstr "Uitloggen"
@@ -5873,6 +5885,24 @@ msgstr ""
 msgid "You cannot edit this file."
 msgstr ""
 
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid "Get application notifications"
+msgstr ""
+
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid ""
+"Get notified for specific events (when one of your video encoding is "
+"completed)."
+msgstr ""
+
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid "Allow"
+msgstr ""
+
+#: pod/progressive_web_app/templates/notification_toast.html
+msgid "Deny on all devices"
+msgstr ""
+
 #: pod/recorder/admin.py
 msgid "Delete selected Recording file treatments + source files"
 msgstr ""
@@ -6220,6 +6250,14 @@ msgstr ""
 msgid "Recorder for Studio not found."
 msgstr ""
 
+#: pod/settings.py
+msgid ""
+"Podeduc is aimed at users of our institutions, by allowing the publication "
+"of videos in the fields of research (promotion of platforms, etc.), training "
+"(tutorials, distance training, student reports, etc.), institutional life "
+"(video of events), offering several days of content."
+msgstr ""
+
 #: pod/urls.py
 msgid "Pod Administration"
 msgstr ""

diff --git a/pod/locale/nl/LC_MESSAGES/djangojs.po b/pod/locale/nl/LC_MESSAGES/djangojs.po
@@ -521,6 +521,20 @@ msgstr ""
 msgid "This folder is empty"
 msgstr ""
 
+#: pod/progressive_web_app/static/js/notification-toast.js
+msgid "Error"
+msgstr ""
+
+#: pod/progressive_web_app/static/js/notification-toast.js
+msgid ""
+"Don't forget to allow notifications from this website in your browser's "
+"settings!"
+msgstr ""
+
+#: pod/progressive_web_app/static/js/notification-toast.js
+msgid "Error during unsubscription..."
+msgstr ""
+
 #: pod/video/static/js/ajax-display-channels.js
 msgid "Channel"
 msgstr ""
@@ -731,6 +745,10 @@ msgstr ""
 msgid "Select the general type of the video."
 msgstr ""
 
+#: pod/video/static/js/video_edit.js
+msgid "Get notified when the video encoding is finished."
+msgstr ""
+
 #: pod/video/static/js/video_stats_view.js
 msgid "Title"
 msgstr "Titel"

diff --git a/pod/main/configuration.json b/pod/main/configuration.json
@@ -1714,6 +1714,28 @@
                         "fr": "Configuration application podfile"
                     }
                 },
+                "progressive_web_app": {
+                    "description": {},
+                    "settings": {
+                        "WEBPUSH_SETTINGS": {
+                            "default_value": "```python\n{\n    'VAPID_PUBLIC_KEY': '',\n    'VAPID_PRIVATE_KEY': '',\n    'VAPID_ADMIN_EMAIL': '[email protected]'\n}\n```",
+                            "description": {
+                                "en": [
+                                    ""
+                                ],
+                                "fr": [
+                                    "Les clés VAPID sont nécessaires à la lib [django-webpush](https://github.com/safwanrahman/django-webpush). Elles peuvent être générées avec [https://web-push-codelab.glitch.me/]()"
+                                ]
+                            },
+                            "pod_version_end": "",
+                            "pod_version_init": ""
+                        }
+                    },
+                    "title": {
+                        "en": "",
+                        "fr": "Configuration application progressive_web_app"
+                    }
+                },
                 "recorder": {
                     "description": {},
                     "settings": {
@@ -4965,4 +4987,4 @@
             }
         }
     }
-]
+]
diff --git a/pod/main/templates/base.html b/pod/main/templates/base.html
@@ -1,4 +1,6 @@
 {% load static i18n custom_tags %}
+{% load pwa %}
+{% load webpush_notifications %}
 {% get_current_language as LANGUAGE_CODE %}
 <!DOCTYPE html>
 <html lang="{{ LANGUAGE_CODE }}">
@@ -46,8 +48,9 @@
   {% if request.GET.is_iframe %}
     <link rel="stylesheet" href="{% static 'css/iframe.css' %}?ver={{VERSION}}" media="screen">
   {% endif %}
+  {% progressive_web_app_meta %}
   {% endspaceless %}
-
+  {% webpush_header %}
 </head>
 
 <body>
@@ -116,6 +119,7 @@ <h1 class="page_title">{{page_title|capfirst}}</h1>
         {% endif %}
       </div> <!-- fin div pod-grid-content -->
     </main>
+    {% include "notification_toast.html" %}
   </div> <!-- fin container -->
   {% endblock content %}
   {% if not request.GET.is_iframe %}

diff --git a/pod/main/templates/navbar.html b/pod/main/templates/navbar.html
@@ -243,6 +243,11 @@ <h5 id="pod-navbar__menuuserLabel">{% if user.get_full_name != '' %}{{ user.get_
                   <a class="nav-item nav-link" href="{% url 'bbb:live_list_meeting' %}"><i class="bi bi-lightning-charge pod-nav-link-icon mx-1" aria-hidden="true"></i>{% trans 'Perform a BigBlueButton live' %}</a>
                 {% endif %}
               {% endif %}
+              <div class="nav-item">
+                <button class="nav-link" onclick="new bootstrap.Toast(document.querySelector('#notification-toast')).show()">
+                  <i class="bi bi-bell pod-nav-link-icon mx-1" aria-hidden="true"></i>{% trans 'Notifications settings' %}
+                </button>
+              </div>
               {% comment %}
                 <a class="nav-item nav-link" href="#">Gestion de mon compte</a> {% endcomment %}
               <hr class="dropdown-divider">

diff --git a/pod/main/views.py b/pod/main/views.py
@@ -34,7 +34,7 @@
 from wsgiref.util import FileWrapper
 from django.db.models import Q, Count
 from pod.video.models import Video, remove_accents
-from pod.authentication.forms import FrontOwnerForm
+from pod.authentication.forms import FrontOwnerForm, SetNotificationForm
 from django.db.models import Sum
 import os
 import mimetypes
@@ -395,3 +395,24 @@ def userpicture(request):
         "userpicture/userpicture.html",
         {"frontOwnerForm": frontOwnerForm},
     )
+
+
+@csrf_protect
+@login_required(redirect_field_name="referrer")
+def set_notifications(request):
+    """Sets 'accepts_notifications' attribute on owner instance."""
+    setNotificationForm = SetNotificationForm(instance=request.user.owner)
+
+    if request.method == "POST":
+        setNotificationForm = SetNotificationForm(request.POST, instance=request.user.owner)
+        if setNotificationForm.is_valid():
+            setNotificationForm.save()
+            return JsonResponse({"success": True, "user_accepts_notifications": request.user.owner.accepts_notifications})
+        else:
+            messages.add_message(
+                request,
+                messages.ERROR,
+                _("One or more errors have been found in the form."),
+            )
+
+    return JsonResponse({"success": False})
diff --git a/pod/progressive_web_app/__init__.py b/pod/progressive_web_app/__init__.py
diff --git a/pod/progressive_web_app/apps.py b/pod/progressive_web_app/apps.py
@@ -0,0 +1,8 @@
+from django.apps import AppConfig
+
+
+class ProgressiveWebAppConfig(AppConfig):
+    """Push notification preferences."""
+
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "pod.progressive_web_app"
diff --git a/pod/progressive_web_app/static/img/icon_x1024.png b/pod/progressive_web_app/static/img/icon_x1024.png
diff --git a/pod/progressive_web_app/static/img/icon_x128.png b/pod/progressive_web_app/static/img/icon_x128.png
diff --git a/pod/progressive_web_app/static/img/icon_x192.png b/pod/progressive_web_app/static/img/icon_x192.png
diff --git a/pod/progressive_web_app/static/img/icon_x384.png b/pod/progressive_web_app/static/img/icon_x384.png
diff --git a/pod/progressive_web_app/static/img/icon_x48.png b/pod/progressive_web_app/static/img/icon_x48.png
diff --git a/pod/progressive_web_app/static/img/icon_x512.png b/pod/progressive_web_app/static/img/icon_x512.png
diff --git a/pod/progressive_web_app/static/img/icon_x72.png b/pod/progressive_web_app/static/img/icon_x72.png
diff --git a/pod/progressive_web_app/static/img/icon_x96.png b/pod/progressive_web_app/static/img/icon_x96.png
diff --git a/pod/progressive_web_app/static/img/splash-512.png b/pod/progressive_web_app/static/img/splash-512.png