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]>

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

pod/authentication/forms.py

@@ -49,6 +49,15 @@ class Meta(object):
         fields = []
 
 
+class SetNotificationForm(forms.ModelForm):
+    def __init__(self, *args, **kwargs):
+        super(SetNotificationForm, self).__init__(*args, **kwargs)
+
+    class Meta(object):
+        model = Owner
+        fields = ["accepts_notifications"]
+
+
 User = get_user_model()
 
 

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=_("Get push notifications from your devices."),
+    )
 
     class Meta:
         verbose_name = _("Owner")

pod/locale/fr/LC_MESSAGES/django.po

@@ -5,7 +5,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Pod\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-09-04 09:43+0000\n"
+"POT-Creation-Date: 2023-09-04 12:50+0000\n"
 "PO-Revision-Date: \n"
 "Last-Translator: obado <[email protected]>\n"
 "Language-Team: Pod Team [email protected]\n"
@@ -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 "Get push notifications from 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
@@ -4721,6 +4729,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 notification"
+
 #: pod/main/templates/navbar.html
 msgid "Log out"
 msgstr "Déconnexion"
@@ -6188,6 +6200,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 ""

pod/locale/fr/LC_MESSAGES/djangojs.po

@@ -5,7 +5,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Esup-Pod\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-09-01 13:56+0000\n"
+"POT-Creation-Date: 2023-09-04 13:15+0000\n"
 "PO-Revision-Date: \n"
 "Last-Translator: obado <[email protected]>\n"
 "Language-Team: \n"
@@ -565,6 +565,18 @@ msgstr "Chaînes"
 msgid "Channel"
 msgstr "Chaîne"
 
+#: 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 "No channels found"
 msgstr "Aucun chaîne trouvée"
@@ -805,6 +817,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"

pod/locale/nl/LC_MESSAGES/django.po

@@ -5,7 +5,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Pod\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-09-04 09:43+0000\n"
+"POT-Creation-Date: 2023-09-04 12:50+0000\n"
 "PO-Revision-Date: 2023-06-08 14:37+0200\n"
 "Last-Translator: obado <[email protected]>\n"
 "Language-Team: \n"
@@ -100,6 +100,14 @@ msgstr ""
 msgid "Picture"
 msgstr ""
 
+#: pod/authentication/models.py
+msgid "Accept notifications"
+msgstr ""
+
+#: pod/authentication/models.py
+msgid "Get push notifications from 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
@@ -3480,10 +3488,6 @@ msgstr ""
 msgid "The video id is not valid."
 msgstr ""
 
-#: pod/main/admin.py pod/meeting/forms.py
-msgid "Advanced options"
-msgstr ""
-
 #: pod/main/apps.py
 msgid "Main configurations"
 msgstr ""
@@ -4482,6 +4486,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"
@@ -5859,6 +5867,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 ""

pod/locale/nl/LC_MESSAGES/djangojs.po

@@ -5,7 +5,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Esup-Pod\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-09-01 13:56+0000\n"
+"POT-Creation-Date: 2023-09-04 13:15+0000\n"
 "PO-Revision-Date: 2023-02-08 15:22+0100\n"
 "Last-Translator: obado <[email protected]>\n"
 "Language-Team: \n"
@@ -532,6 +532,16 @@ msgstr ""
 msgid "This folder is empty"
 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 "Channels"
 msgstr ""
@@ -779,6 +789,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"

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 @@
             }
         }
     }
-]
+]

pod/main/settings.py

@@ -306,3 +306,9 @@
 VIDEO_RECENT_VIEWCOUNT = 180
 
 HONEYPOT_FIELD_NAME = "firstname"
+
+WEBPUSH_SETTINGS = {
+    "VAPID_PUBLIC_KEY": "",
+    "VAPID_PRIVATE_KEY": "",
+    "VAPID_ADMIN_EMAIL": "[email protected]"
+}

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 %}
@@ -270,4 +274,3 @@ <h1 class="page_title">{{page_title|capfirst}}</h1>
 </body>
 
 </html>
-

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"></i>{% trans 'Notifications settings' %}
+                </button>
+              </div>
               {% comment %}
                 <a class="nav-item nav-link" href="#">Gestion de mon compte</a> {% endcomment %}
               <hr class="dropdown-divider">

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})

pod/progressive_web_app/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ProgressiveWebAppConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "pod.progressive_web_app"