Fix iframe icons (#1405)

Badatos · web-flow · commit 8ea099dfd5b4 · 2026-03-02T17:12:32.000+01:00
+ Bootstrap Icons were not displayed in iframe display. (css not loaded)
+ Replace old modals in "iframe" mode by BS5 modals.
+ Display icons on video metadatas
diff --git a/pod/live/templates/live/event-iframe.html b/pod/live/templates/live/event-iframe.html
diff --git a/pod/live/templates/live/event-info.html b/pod/live/templates/live/event-info.html
@@ -13,10 +13,13 @@
 
 <div id="video-meta">
   <div id="info" class="pod-info-video__info">
-    <h2 class="tab-title visually-hidden"><i class=" bi bi-info-circle"></i>&nbsp;{% trans 'Infos' %}</h2>
+    <h2 class="tab-title visually-hidden">{% trans 'Infos' %}</h2>
     <ul class="list-inline d-flex flex-wrap">
       <li class="col-6 col-md-4">
-        <span class="pod-meta-title">{% trans 'Broadcasted on:' %}</span>
+        <span class="pod-meta-title">
+          <i class="bi bi-calendar-event" aria-hidden="true"></i>
+          {% trans 'Broadcasted on:' %}
+        </span>
         <div>
           {% if event.start_date|date:"d/m/Y" == event.end_date|date:"d/m/Y" %}
             {% blocktrans with start_date=event.start_date|date:"d/m/Y" start_time=event.start_date|time:"H:i" end_time=event.end_date|time:"H:i" %}{{start_date}} from {{start_time}} to {{end_time}}{% endblocktrans %}
@@ -26,23 +29,34 @@ <h2 class="tab-title visually-hidden"><i class=" bi bi-info-circle"></i>&nbsp;{%
         </div>
       </li>
       <li class="col-6 col-md-4">
-        <span class="pod-meta-title">{% trans 'Location:' %}</span>
-          <div>{{ event.broadcaster.building.name }} - {{ event.broadcaster.name }}</div>
+        <span class="pod-meta-title">
+          <i class="bi bi-geo" aria-hidden="true"></i>
+          {% trans 'Location:' %}
+        </span>
+        <div>{{ event.broadcaster.building.name }} - {{ event.broadcaster.name }}</div>
       </li>
       <li class="col-6 col-md-4">
-        <span class="pod-meta-title">{% trans 'Added by:' %}</span>
-          <a class="btn btn-link btn-sm px-0" href="{% url 'videos:videos' %}?owner={{ event.owner.get_username}}" {% if request.GET.is_iframe %}target="_blank" {% endif %} title="{% blocktrans with video_user_name=video.owner %}Show video list of user “{{ video_user_name }}”{% endblocktrans %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
+        <span class="pod-meta-title">
+          <i class="bi bi-person-circle" aria-hidden="true"></i>
+          {% trans 'Added by:' %}
+        </span>
+        <a class="btn btn-link btn-sm px-0" href="{% url 'videos:videos' %}?owner={{ event.owner.get_username}}" {% if request.GET.is_iframe %}target="_blank" {% endif %} title="{% blocktrans with video_user_name=video.owner %}Show video list of user “{{ video_user_name }}”{% endblocktrans %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
           {% if event.owner.owner.userpicture.file %}
             {% thumbnail event.owner.owner.userpicture.file "x34" as im %}
               <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class='userpicture rounded' alt="" loading="lazy">
             {% endthumbnail %}
           {% endif %}
           {{ event.owner }}
-          </a>
+        </a>
       </li>
       <li class="col-6 col-md-4">
-        <span class="pod-meta-title">{% trans 'Type:' %}</span>
-        <a class="btn btn-link btn-sm px-0" href="{% url 'videos:videos' %}?type={{ event.type.slug }}" {% if request.GET.is_iframe %}target="_blank"{% endif %}>{{ event.type.title }}</a>
+        <span class="pod-meta-title">
+          <i class="bi bi-file-earmark" aria-hidden="true"></i>
+          {% trans 'Type:' %}
+        </span>
+        <a class="btn btn-link btn-sm px-0" href="{% url 'videos:videos' %}?type={{ event.type.slug }}" {% if request.GET.is_iframe %}target="_blank"{% endif %}>
+          {{ event.type.title }}
+        </a>
       </li>
     </ul>
   </div>
@@ -55,7 +69,8 @@ <h2 class="tab-title visually-hidden"><i class=" bi bi-info-circle"></i>&nbsp;{%
         <div class="modal-content">
           <div class="modal-header">
             <h2 class="modal-title h5" id="shareLabel">
-              <i class="bi bi-share" aria-hidden="true"></i>&nbsp;{% if event.is_draft %}{% trans 'Embed/Share (Draft Mode)' %}{% else %}{% trans 'Embed/Share' %}{% endif %}
+              <i class="bi bi-share" aria-hidden="true"></i>&nbsp;
+              {% if event.is_draft %}{% trans 'Embed/Share (Draft Mode)' %}{% else %}{% trans 'Embed/Share' %}{% endif %}
             </h2>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
           </div>
@@ -103,20 +118,23 @@ <h2 class="modal-title h5" id="shareLabel">
             {% endif %}
 
             <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 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 m-2">
-                  {% get_event_qrcode event.id as qrcode %}
-                  <label>{% trans 'QR code for this link:' %}</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>
+              <legend>
+                <i class="bi bi-link-45deg" aria-hidden="true"></i>
+                {% trans 'Share the link' %}
+              </legend>
+              <div class="form-group">
+                <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 m-2">
+                {% get_event_qrcode event.id as qrcode %}
+                <label>{% trans 'QR code for this link:' %}</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/locale/fr/LC_MESSAGES/django.po b/pod/locale/fr/LC_MESSAGES/django.po
@@ -10087,8 +10087,8 @@ msgid "Original version"
 msgstr "Version originale"
 
 #: pod/video/templates/videos/link_video_dropdown_menu.html
-msgid "Enhance the video with AI"
-msgstr "Améliorer la vidéo avec l’IA"
+msgid "Complete the video with AI"
+msgstr "Compléter la vidéo avec l’IA"
 
 #: pod/video/templates/videos/link_video_dropdown_menu.html
 msgid "Complete the video"
diff --git a/pod/main/settings.py b/pod/main/settings.py
@@ -321,7 +321,7 @@
 SOCIAL_SHARE = ["X", "FACEBOOK", "LINKEDIN", "BLUESKY", "MASTODON"]
 
 # Disable TinyMCE relative_urls to avoid auto replace self domain urls
-# i.e : http://pod.localhost:8000/video/0001-podmp4/ become ../../0001-podmp4/
+# i.e : http://pod.localhost/video/0001-podmp4/ become ../../0001-podmp4/
 TINYMCE_DEFAULT_CONFIG = {
     "theme": "silver",
     "height": 500,
diff --git a/pod/main/static/css/pod.css b/pod/main/static/css/pod.css
@@ -1336,10 +1336,8 @@ main {
 }
 
 .video-info_duration-view-share {
-  display: flex;
   font-size: 90%;
   gap: 0.75rem;
-  align-items: center;
   justify-content: flex-start;
   border-bottom: 1px solid var(--pod-background-neutre1-bloc);
   padding-bottom: 0.75rem;
@@ -1383,10 +1381,6 @@ main {
   margin-left: auto;
 }
 
-.pod-info-video__buttons {
-  margin-left: auto;
-}
-
 .pod-btn-share i,
 .pod-info-video__signal i {
   transition: all 0.2s ease-in;
diff --git a/pod/main/static/js/videojs-info-controlbar.js b/pod/main/static/js/videojs-info-controlbar.js
@@ -48,7 +48,7 @@ function showInfoVideo() {
  * Resize responsively the Pod video Information panel
  */
 function resizeInfo() {
-  const ihead = document.querySelector("#info-video-wrapper > .iframe-header");
+  const ihead = document.querySelector("#info-video-wrapper .iframe-header");
   const ph = player.el().offsetHeight;
   const pb = parseInt(player.el().style.top, 10) + ph - 30;
   const pw = ph * hdres; // ('#podvideoplayer .vjs-poster').width()
diff --git a/pod/settings.py b/pod/settings.py
@@ -19,7 +19,7 @@
 ##
 # Version of the project
 #
-VERSION = "4.1.0"
+VERSION = "4.2.0"
 
 ##
 # Installed applications list
diff --git a/pod/video/static/css/video-iframe.css b/pod/video/static/css/video-iframe.css
@@ -24,44 +24,18 @@ body {
   margin-right: auto;
 }
 
-#info-video-wrapper {
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 30px;
-  width: 100%;
-  border-radius: 0;
-  padding: 0;
-  margin: 0;
-  background-color: rgb(250 250 250 / 90%);
-  z-index: 10;
-}
-
-#info-video {
-  padding: 1em;
-  box-sizing: border-box;
-  overflow: auto;
-  position: absolute;
-
-  /* top: 3em; */
-  width: 100%;
-  bottom: 0;
-  z-index: 1000;
-  border-radius: 0;
-  margin: 0;
+.video-info_duration-view-share {
+  font-size: 90%;
+  gap: 0.75rem;
+  justify-content: flex-start;
+  border-bottom: 1px solid #DDD;
+  padding-bottom: 0.75rem;
 }
 
 .tab-title {
   font-size: 1.5em;
 }
 
-/*
-.meta-title {
-  font-size: 1.2rem;
-}
-*/
-
 .list-group-item {
   background-color: rgb(250 250 250 / 90%) !important;
 }
@@ -79,31 +53,6 @@ body {
   padding: 0.25em 5em 0 0;
 }
 
-.iframe-header .close {
-  /*
-  position: absolute;
-  top: .5em;
-  right: .5em;
-  margin: .395em 0 0 .75em;
-  padding: 0 .25em .15em;
-  overflow: hidden;
-  opacity: 1;
-  font-size: 1.1em;
-  */
-  float: right;
-  border: 1px solid var(--bs-light);
-  color: var(--bs-light);
-  background-color: var(--bs-dark);
-  border-radius: 2px;
-}
-
-.iframe-header .close:hover {
-  background-color: var(--bs-light);
-  color: var(--bs-dark);
-
-  /* opacity: 1; */
-}
-
 #div-video-wrapper #overlay-footer {
   /* bottom: 0; */
   position: absolute;
@@ -158,24 +107,6 @@ body {
   width: 1px;
 }
 
-/*
-#overlay-footer .vjs-info-button::before,
-.video-js .vjs-info-button::before {
-  content: '';
-  display: block;width: 100%;height: 100%;
-  background-color: #FFF;
-  mask-size: 20px;
-  -webkit-mask-size: 20px;
-}
-*/
-
-/*
-%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"%3E%3Cpath d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/%3E  %3Cpath d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/%3E%3C/svg%3E
-*/
-#div-video-wrapper #info-video-wrapper {
-  display: none;
-}
-
 #div-video-wrapper.overlay.info #info-video-wrapper,
 #div-video-wrapper.overlay #overlay-footer,
 #div-video-wrapper.vjs-not-started #overlay-footer {
diff --git a/pod/video/templates/videos/link_video_dropdown_menu.html b/pod/video/templates/videos/link_video_dropdown_menu.html
@@ -24,14 +24,14 @@
     {% if can_enhance_video_with_ai and not enr_is_already_asked and video.encoded and video.encoding_in_progress is False %}
       <li>
         <a href="{% url 'ai_enhancement:enhance_video' video_slug=video.slug %}"
-           title="{% trans 'Enhance the video with AI' %} — {{ video.title }}"
+           title="{% trans 'Complete the video with AI' %} — {{ video.title }}"
            class="dropdown-item"
            data-bs-toggle="tooltip"
-           aria-label="{% trans 'Enhance the video with AI' %} — {{ video.title }}"
-           data-bs-original-title="{% trans 'Enhance the video with AI' %} — {{ video.title }}"
+           aria-label="{% trans 'Complete the video with AI' %} — {{ video.title }}"
+           data-bs-original-title="{% trans 'Complete the video with AI' %} — {{ video.title }}"
         >
           <i class="bi bi-robot card-footer-link-i" aria-hidden="true"></i>
-          {% trans 'Enhance the video with AI' %}
+          {% trans 'Complete the video with AI' %}
         </a>
       </li>
     {% endif %}
diff --git a/pod/video/templates/videos/video-iframe.html b/pod/video/templates/videos/video-iframe.html
@@ -21,6 +21,8 @@
   <script src="{% static 'js/videojs-info-controlbar.js' %}?ver={{VERSION}}"></script>
 
   <link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}?ver={{VERSION}}" crossorigin="anonymous">
+  <link rel="stylesheet" href="{% static 'bootstrap-icons/font/bootstrap-icons.css' %}?ver={{VERSION}}" crossorigin="anonymous">
+
   <script src="{% static 'bootstrap/dist/js/bootstrap.bundle.min.js' %}?ver={{VERSION}}"></script>
   <script id="jsi18n" src="{% url 'javascript-catalog' %}?ver={{VERSION}}"></script>
 
@@ -44,16 +46,19 @@
     {% include 'videos/video-element.html' %}
   {% endblock video-element %}
 
-  <div id="info-video-wrapper" class="pod-inner">
-    <div class="iframe-header bg-dark text-white">
-      <h2 class="video-title">{{ video.title }}</h2>
-      <button type="button" class="close" aria-label="{% trans 'Close' %}">
-        <span aria-hidden="true">&times;</span>
-      </button>
+  <div id="info-video-wrapper" class="modal pod-inner">
+    <div class="modal-dialog modal-lg">
+      <div id="info-video" class="modal-content">
+        <div class="iframe-header modal-header">
+          <h2 class="video-title">{{ video.title }}</h2>
+          <button type="button" class="close btn-close" data-bs-dismiss="modal"
+            aria-label="{% trans 'Close' %}"></button>
+        </div>
+        <div class="pod-info-video modal-body">
+          {% include 'videos/video-info.html'%}
+        </div>
+      </div>
     </div>
-    <div id="info-video" class="pod-info-video">
-    {% include 'videos/video-info.html'%}
-  </div>
   </div>
 
 </div>
diff --git a/pod/video/templates/videos/video-info.html b/pod/video/templates/videos/video-info.html

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`##`
`20`	`20`	`# Version of the project`
`21`	`21`	`#`
`22`		`-VERSION = "4.1.0"`
	`22`	`+VERSION = "4.2.0"`
`23`	`23`
`24`	`24`	`##`
`25`	`25`	`# Installed applications list`