[DONE] RGAA 03.02 (#951)

* * add "getfromvideo" in tabindex navigation * clean some useless css rule * Use boostrap to collapse relevant help message in completion forms * Render some submit as visually-hidden-focusable in aside menu * Add missing Title in Channel list modal * Use ngettext to translate plurals in ajax-display-channels.js * Correct languages typo * Remove merge artifacts * correct a typo in ajax-display + remove duplicated aria-hidden + correct wrong id on playlist-modal + replace p by div in video-info * update .po lang files * Push Compiled .mo lang files
EsupPortail · Sep 21, 2023 · 84406de · 84406de
1 parent 3d227bc
commit 84406de
Show file tree

Hide file tree

Showing 25 changed files with 361 additions and 344 deletions.
diff --git a/pod/chapter/static/js/chapters.js b/pod/chapter/static/js/chapters.js
@@ -21,7 +21,7 @@ function show_form(data) {
   if (inputStart) {
     inputStart.insertAdjacentHTML(
       "beforebegin",
-      "&nbsp;<span class='getfromvideo'><a id='getfromvideo_start' class='btn btn-primary btn-sm'>" +
+      "&nbsp;<span class='getfromvideo'><a id='getfromvideo_start' class='btn btn-primary btn-sm' href='#form_chapter'>" +
         gettext("Get time from the player") +
         "</a><span class='timecode' id='chapter_time_start'>&nbsp;</span></span>",
     );

diff --git a/pod/chapter/templates/video_chapter.html b/pod/chapter/templates/video_chapter.html
@@ -63,12 +63,12 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
   {% endif %}
   <div id="chapter-info" class="card">
     <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
-    <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
+    <button class="btn btn-link rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
       {% trans 'Chapters' %}
     </button>
     <div id="collapse-0" class="card-body collapse card-text small">
-      <p>{% trans '"Add a new chapter" allows you to add a new chapter, "modify" allows you to modify it and "delete" allows you to remove the chapter.' %}</p>
-      <p>{% trans 'Start playback of the video, pause the video and click on "Get time from the player" to fill in the field untitled "Start time".' %}</p>
+      <p>{% trans '“Add a new chapter” allows you to add a chapter to the video, “modify” allows you to edit it and “delete” allows you to remove the chapter.' %}</p>
+      <p>{% trans 'Start playback of the video, pause the video and click on “Get time from the player” to fill in the field untitled “Start time”.' %}</p>
       <p>{% trans 'The chapters cannot start at the same time.' %}</p>
       <p>{% trans 'You must save your chapters to view the result.' %}</p>
     </div>

diff --git a/pod/completion/static/css/completion.css b/pod/completion/static/css/completion.css
@@ -120,13 +120,6 @@ table#table_list_contributors thead th.contributor_name {
 .grid-list-track .track_kind.options > form,
 .grid-list-track .track_kind.options > #modifCapSubFile{ display: none;}
 }
-/** Forms **/
-
-
-/** Aside **/
-.info-card {
-	display: none;
-}
 
 /** Filepicker override **/
 div.file-picker-overlay,
@@ -142,4 +135,3 @@ textarea#id_description {
 .card-title {
 	margin: .45rem;
 }
-
diff --git a/pod/completion/static/js/completion.js b/pod/completion/static/js/completion.js
@@ -131,10 +131,13 @@ var sendandgetform = async function (elt, action, name, form, list) {
   if (action == "new" || action == "form_save_new") {
     document.getElementById(form).innerHTML =
       '<div style="width:100%; margin: 2rem;"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>';
-    document.querySelectorAll(".info-card").forEach(function (element) {
-      element.style.display = "none";
+
+    document.querySelectorAll(`#card-completion-tips div:not(#${name}-info) .collapse`).forEach((collapsable) => {
+      bootstrap.Collapse.getOrCreateInstance(collapsable, { toggle: false }).hide();
     });
-    document.getElementById(name + "-info").style.display = "block";
+    /* Display associated help in side menu */
+    var compInfo = document.querySelector(`#${name}-info>.collapse`);
+    bootstrap.Collapse.getOrCreateInstance(compInfo).show();
 
     let url = window.location.origin + href;
     let token = elt.csrfmiddlewaretoken.value;

diff --git a/pod/completion/templates/video_completion.html b/pod/completion/templates/video_completion.html
@@ -134,53 +134,57 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
   </div>
 </div>
 {% endif %}
-<div id="contributor-info" class="card">
+<div class="card mb-2" id="card-completion-tips">
   <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
-  <button class="btn rounded-0 pod-btn" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
-    {% trans 'Contributor(s)' %}
-  </button>
-  <div id="collapse-1" class="card-body collapse card-text small">
-    <p>{% trans 'List of people related to this video.' %}</p>
-    <p>{% trans 'A contributor must at least have a name and a role. You can also join the email of this contributor as well as a link (professional website for example).' %}</p>
-  </div>
-</div>
-<div id="track-info" class="card">
-  <button class="btn rounded-0 pod-btn" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
-    {% trans 'Subtitle(s) and Caption(s)' %}
-  </button>
-  <div id="collapse-2" class="card-body collapse card-text small">
-    <p>{% trans 'Subtitle(s) and/or captions(s) related to this video.' %}</p>
-    <!-- <p>{% trans 'Several web sites allows you to subtitle or caption videos (for example: Amara)' %}</p> -->
-    <p>{% trans 'You can add several subtitle or caption files to a single video (for example, in order to subtitle or caption this video in several languages' %}</p>
-    <p>{% trans 'Subtitle and/or caption file(s) must be in “.vtt” format.' %}</p>
-    <p>{% trans 'You can use' %} <a href="{% url 'video:completion:video_caption_maker' slug=video.slug %}">{% trans 'Video Caption Maker' %}</a> {% trans 'to create your subtitle(s) and/or caption(s) file(s).' %}</p>
-    <p>{% trans 'You will need the URL of this video to make subtitles and/or captions. This URL is a direct access to this video. Please do not communicate it outside of this site to avoid any misuse.' %}</p>
-    <ul class="list-group">
-      {% for vid in video.get_video_mp4 %}
-      <li class="list-group-item">{{vid.name}}: <input type="text" value="{% if request.is_secure %}https{% else %}http{% endif %}://{{ request.META.HTTP_HOST }}{{vid.source_file.url}}" readonly></li>
-      {% endfor %}
-      {% if video.is_video == False and video.get_video_mp3 %}
-      <li class="list-group-item">{{video.get_video_mp3.name}}: <input type="text" value="{% if request.is_secure %}https{% else %}http{% endif %}://{{ request.META.HTTP_HOST }}{{video.get_video_mp3.source_file.url}}" readonly></li>
-      {% endif %}
-    </ul>
-  </div>
-</div>
-<div id="document-info" class="card">
-  <button class="btn rounded-0 pod-btn" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
-    {% trans 'Additional resource(s)' %}
-  </button>
-  <div id="collapse-3" class="card-body collapse card-text small">
-    <p>{% trans 'Document(s) related to this video. These documents will be downloadable by users.' %}</p>
-    <p>{% trans 'Be careful, not to be confused with enrichment. These documents are attached to the video, not integrated.' %}</p>
-  </div>
-</div>
-<div id="overlay-info" class="card">
-  <button class="btn rounded-0 pod-btn" id="heading-4" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
-    {% trans 'Overlay(s)' %}
-  </button>
-  <div id="collapse-4" class="card-body collapse card-text small">
-    <p>{% trans 'Overlay allows you to display text (with ou without html tag) over the video at specific times and positions.' %}</p>
-    <p>{% trans 'You can add a solid background or a transparent background to the text you want to display with the option "Show background"' %}</p>
+  <div class="card-body">
+    <div id="contributor-info">
+      <button class="btn btn-link rounded-0 pod-btn" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
+        {% trans 'Contributor(s)' %}
+      </button>
+      <div id="collapse-1" class="collapse card-text small">
+        <p>{% trans 'List of people related to this video.' %}</p>
+        <p>{% trans 'A contributor must at least have a name and a role. You can also join the email of this contributor as well as a link (professional website for example).' %}</p>
+      </div>
+    </div>
+    <div id="track-info">
+      <button class="btn btn-link rounded-0 pod-btn" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
+        {% trans 'Subtitle(s) and Caption(s)' %}
+      </button>
+      <div id="collapse-2" class="collapse card-text small">
+        <p>{% trans 'Subtitle(s) and/or captions(s) related to this video.' %}</p>
+        <!-- <p>{% trans 'Several web sites allows you to subtitle or caption videos (for example: Amara)' %}</p> -->
+        <p>{% trans 'You can add several subtitle or caption files to a single video (for example, in order to subtitle or caption this video in several languages' %}</p>
+        <p>{% trans 'Subtitle and/or caption file(s) must be in “.vtt” format.' %}</p>
+        <p>{% trans 'You can use' %} <a href="{% url 'video:completion:video_caption_maker' slug=video.slug %}">{% trans 'Video Caption Maker' %}</a> {% trans 'to create your subtitle(s) and/or caption(s) file(s).' %}</p>
+        <p>{% trans 'You will need the URL of this video to make subtitles and/or captions. This URL is a direct access to this video. Please do not communicate it outside of this site to avoid any misuse.' %}</p>
+        <ul class="list-group">
+          {% for vid in video.get_video_mp4 %}
+          <li class="list-group-item">{{vid.name}}: <input type="text" value="{% if request.is_secure %}https{% else %}http{% endif %}://{{ request.META.HTTP_HOST }}{{vid.source_file.url}}" readonly></li>
+          {% endfor %}
+          {% if video.is_video == False and video.get_video_mp3 %}
+          <li class="list-group-item">{{video.get_video_mp3.name}}: <input type="text" value="{% if request.is_secure %}https{% else %}http{% endif %}://{{ request.META.HTTP_HOST }}{{video.get_video_mp3.source_file.url}}" readonly></li>
+          {% endif %}
+        </ul>
+      </div>
+    </div>
+    <div id="document-info">
+      <button class="btn btn-link rounded-0 pod-btn" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
+        {% trans 'Additional resource(s)' %}
+      </button>
+      <div id="collapse-3" class="collapse card-text small">
+        <p>{% trans 'Document(s) related to this video. These documents will be downloadable by users.' %}</p>
+        <p>{% trans 'Be careful, not to be confused with enrichment. These documents are attached to the video, not integrated.' %}</p>
+      </div>
+    </div>
+    <div id="overlay-info">
+      <button class="btn btn-link rounded-0 pod-btn" id="heading-4" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
+        {% trans 'Overlay(s)' %}
+      </button>
+      <div id="collapse-4" class="collapse card-text small">
+        <p>{% trans 'Overlay allows you to display text (with ou without html tag) over the video at specific times and positions.' %}</p>
+        <p>{% trans 'You can add a solid background or a transparent background to the text you want to display with the option "Show background"' %}</p>
+      </div>
+    </div>
   </div>
 </div>
 {% endblock page_aside %}

diff --git a/pod/cut/templates/video_cut.html b/pod/cut/templates/video_cut.html
@@ -121,7 +121,7 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
   {% endif %}
   <div id="cut-info" class="card">
   <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
-  <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
+  <button class="btn btn-link rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
     {% trans 'Cut' %}
   </button>
   <div id="collapse-0" class="card-body collapse card-text small">

diff --git a/pod/import_video/views.py b/pod/import_video/views.py
@@ -426,7 +426,7 @@ def upload_bbb_recording_to_pod(request, record_id):
         recording = ExternalRecording.objects.get(id=record_id)
         source_url = request.POST.get("source_url")
 
-        # Step 1 : Download and parse the remote HTML file if necessary
+        # Step 1: Download and parse the remote HTML file if necessary
         # Check if extension is a video extension
         extension = source_url.split(".")[-1].lower()
         if extension in VIDEO_ALLOWED_EXTENSIONS:
@@ -440,7 +440,7 @@ def upload_bbb_recording_to_pod(request, record_id):
         # Verify that video exists and not oversised
         verify_video_exists_and_size(source_video_url)
 
-        # Step 2 : Define destination source file
+        # Step 2: Define destination source file
         extension = source_video_url.split(".")[-1].lower()
         discrim = datetime.now().strftime("%Y%m%d%H%M%S")
         dest_file = os.path.join(
@@ -452,16 +452,16 @@ def upload_bbb_recording_to_pod(request, record_id):
 
         os.makedirs(os.path.dirname(dest_file), exist_ok=True)
 
-        # Step 3 : Download the video file
+        # Step 3: Download the video file
         download_video_file(source_video_url, dest_file)
 
-        # Step 4 : Save informations about the recording
+        # Step 4: Save informations about the recording
         recording_title = request.POST.get("recording_name")
         save_external_recording(request, record_id)
 
-        # Step 5 : Save and encode Pod video
+        # Step 5: Save and encode Pod video
         description = _(
-            "This video was uploaded to Pod; its origin is %(type)s : "
+            "This video was uploaded to Pod; its origin is %(type)s: "
             '<a href="%(url)s" target="_blank">%(url)s</a>'
         ) % {"type": recording.get_type_display(), "url": source_video_url}
 
@@ -489,7 +489,7 @@ def upload_youtube_recording_to_pod(request, record_id):
     """Upload Youtube recording to Pod.
 
     Use PyTube with its API
-    More information : https://pytube.io/en/latest/api.html
+    More information: https://pytube.io/en/latest/api.html
     Args:
         request (Request): HTTP request
         record_id (Integer): id record in the database
@@ -511,8 +511,8 @@ def upload_youtube_recording_to_pod(request, record_id):
             # use_oauth=True,
             # allow_oauth_cache=True
         )
-        # Publish date (format : 2023-05-13 00:00:00)
-        # Event date (format : 2023-05-13)
+        # Publish date (format: 2023-05-13 00:00:00)
+        # Event date (format: 2023-05-13)
         date_evt = str(yt_video.publish_date)[0:10]
 
         # Setting video resolution
@@ -540,13 +540,13 @@ def upload_youtube_recording_to_pod(request, record_id):
         # Download video
         yt_stream.download(dest_dir, filename=filename)
 
-        # Step 4 : Save informations about the recording
+        # Step 4: Save informations about the recording
         save_external_recording(request, record_id)
 
-        # Step 5 : Save and encode Pod video
+        # Step 5: Save and encode Pod video
         description = _(
             "This video '%(name)s' was uploaded to Pod; "
-            'its origin is Youtube : <a href="%(url)s" target="_blank">%(url)s</a>'
+            'its origin is Youtube: <a href="%(url)s" target="_blank">%(url)s</a>'
         ) % {"name": yt_video.title, "url": source_url}
         recording_title = request.POST.get("recording_name")
         save_video(request, dest_file, recording_title, description, date_evt)
@@ -592,7 +592,7 @@ def upload_youtube_recording_to_pod(request, record_id):
 def upload_peertube_recording_to_pod(request, record_id):  # noqa: C901
     """Upload Peertube recording to Pod.
 
-    More information : https://docs.joinpeertube.org/api/rest-getting-started
+    More information: https://docs.joinpeertube.org/api/rest-getting-started
     Args:
         request (Request): HTTP request
         record_id (Integer): id record in the database
@@ -610,11 +610,11 @@ def upload_peertube_recording_to_pod(request, record_id):  # noqa: C901
         # Check if extension is a video extension
         extension = source_url.split(".")[-1].lower()
         if extension in VIDEO_ALLOWED_EXTENSIONS:
-            # URL corresponds to a video file. Format example :
+            # URL corresponds to a video file. Format example:
             #  - https://xxxx.fr/download/videos/id-quality.mp4
-            # with : id = id/uuid/shortUUID, quality=480/720/1080
+            # with: id = id/uuid/shortUUID, quality=480/720/1080
             source_video_url = source_url
-            # PeerTube API for this video :
+            # PeerTube API for this video:
             # https://xxxx.fr/api/v1/videos/id
             pos_pt = source_url.rfind("-")
             if pos_pt != -1:
@@ -630,11 +630,11 @@ def upload_peertube_recording_to_pod(request, record_id):  # noqa: C901
                 msg["proposition"] = _("Try changing the address of the recording.")
                 raise ValueError(msg)
         else:
-            # URL corresponds to a PeerTube URL. Format example :
+            # URL corresponds to a PeerTube URL. Format example:
             #  - https://xxx.fr/w/id
             #  - https://xxx.fr/videos/watch/id
-            # with : id = id/uuid/shortUUID
-            # PeerTube API for this video :
+            # with: id = id/uuid/shortUUID
+            # PeerTube API for this video:
             # https://xxxx.fr/api/v1/videos/id
             url_api_video = source_url.replace("/w/", "/api/v1/videos/")
             url_api_video = url_api_video.replace("/videos/watch/", "/api/v1/videos/")
@@ -663,17 +663,17 @@ def upload_peertube_recording_to_pod(request, record_id):  # noqa: C901
                     pt_video_description = ""
                 else:
                     pt_video_description = pt_video_description.replace("\r\n", "<br>")
-                # Creation date (format : 2023-05-23T08:16:34.690Z)
+                # Creation date (format: 2023-05-23T08:16:34.690Z)
                 pt_video_created_at = pt_video_json["createdAt"]
-                # Evant date (format : 2023-05-23)
+                # Evant date (format: 2023-05-23)
                 date_evt = pt_video_created_at[0:10]
                 # Source video file
                 source_video_url = pt_video_json["files"][0]["fileDownloadUrl"]
 
         # Verify that video exists and not oversized
         verify_video_exists_and_size(source_video_url)
 
-        # Step 2 : Define destination source file
+        # Step 2: Define destination source file
         discrim = datetime.now().strftime("%Y%m%d%H%M%S")
         extension = source_video_url.split(".")[-1].lower()
         dest_file = os.path.join(
@@ -684,16 +684,16 @@ def upload_peertube_recording_to_pod(request, record_id):  # noqa: C901
         )
         os.makedirs(os.path.dirname(dest_file), exist_ok=True)
 
-        # Step 3 : Download the video file
+        # Step 3: Download the video file
         download_video_file(source_video_url, dest_file)
 
-        # Step 4 : Save informations about the recording
+        # Step 4: Save informations about the recording
         recording_title = request.POST.get("recording_name")
         save_external_recording(request, record_id)
 
-        # Step 5 : Save and encode Pod video
+        # Step 5: Save and encode Pod video
         description = _(
-            "This video '%(name)s' was uploaded to Pod; its origin is PeerTube : "
+            "This video '%(name)s' was uploaded to Pod; its origin is PeerTube: "
             "<a href='%(url)s' target='blank'>%(url)s</a>."
         ) % {"name": pt_video_name, "url": pt_video_url}
         description = ("%s<br>%s") % (description, pt_video_description)

diff --git a/pod/locale/fr/LC_MESSAGES/django.mo b/pod/locale/fr/LC_MESSAGES/django.mo