[DONE] Fix the bug in the playlist application

.gitguardian.yml

@@ -0,0 +1,2 @@
+exclude_paths:
+  - pod/enrichment/tests/test_views.py

pod/enrichment/static/css/videojs-slides.css

@@ -75,6 +75,11 @@
   padding: 0 10px;
 }
 
+/********* To edit *********/
+.vjs-tech.to-edit {
+  width: 100% !important;
+}
+
 /********* Pip slide -> pip-slide *********/
 .vjs-tech.pip-slide {
   width: 80% !important;

pod/enrichment/templates/enrichment/edit_enrichment.html

@@ -1,99 +1,134 @@
-{% extends 'enrichment/video_enrichment.html' %} {% load i18n %} {% load static %} {% block page_title %}{% trans 'Enrichment of the video' %} "{{video.title}}"
-{% endblock page_title %} {% block page_extra_head %} {{ block.super }}
-
-<link
-  rel="stylesheet"
-  href="{% static 'css/enrichment.css' %}?ver={{VERSION}}"
->
-<script src="{% static 'js/enrichment.js' %}?ver={{VERSION}}"></script>
-
-<script>
-  var num = 0,
-  name = '';
-  /*** For the form ***/;
-  var video_duration = {{video.duration}};
-  /*** For the Cancel button ***/
-
-  document.addEventListener("reset",   (e) => {
-    if (e.target !== document.querySelector("#page-video form"))  return
-    document.getElementById("form_enrich").innerHTML = "";
-   document.querySelectorAll("form").forEach((form)=>{
-    form.style.display = "block";
-   })
-    document.querySelectorAll("table tr").forEach((tr) => {
-      tr.classList.remove("info");
+{% extends 'enrichment/video_enrichment.html' %}
+{% load i18n %}
+{% load static %}
+
+
+
+{% block page_title %}
+  {% trans 'Enrichment of the video' %} "{{video.title}}"
+{% endblock page_title %}
+
+
+
+{% block page_extra_head %}
+  {{ block.super }}
+
+  <link
+    rel="stylesheet"
+    href="{% static 'css/enrichment.css' %}?ver={{VERSION}}"
+  >
+  <script src="{% static 'js/enrichment.js' %}?ver={{VERSION}}"></script>
+
+  <script>
+    var num = 0,
+    name = '';
+    /*** For the form ***/;
+    var video_duration = {{video.duration}};
+    /*** For the Cancel button ***/
+
+    document.addEventListener("reset",   (e) => {
+      if (e.target !== document.querySelector("#page-video form"))  return
+      document.getElementById("form_enrich").innerHTML = "";
+    document.querySelectorAll("form").forEach((form)=>{
+      form.style.display = "block";
+    })
+      document.querySelectorAll("table tr").forEach((tr) => {
+        tr.classList.remove("info");
+      });
+
+      manageResize();
     });
+  </script>
+{% endblock page_extra_head %}
+
+
 
-    manageResize();
-  });
-</script>
-{% endblock page_extra_head %} {% block video-element %}
-<div id="page-video">
-  {% include 'enrichment/video-element-enrichment.html' %}
-  <hr>
-
-  <div id="info_video">
-    <div id="list_enrich">{% include 'enrichment/list_enrichment.html' %}</div>
-    <div id="form_enrich">
-      {% if form_enrichment %} {% include 'enrichment/form_enrichment.html' with form_enrichment=form_enrichment %}
+{% block page_content %}
+  <div id="video-player">
+    {% block video-element %}
+      <div id="page-video">
+        {% include 'enrichment/video-element-enrichment.html' %}
+        <hr>
+        <div id="info_video">
+          <div id="list_enrich">{% include 'enrichment/list_enrichment.html' %}</div>
+          <div id="form_enrich">
+            {% if form_enrichment %} {% include 'enrichment/form_enrichment.html' with form_enrichment=form_enrichment %}
+            {% endif %}
+          </div>
+          {% if not form_enrichment %}
+          <form
+            id="form_new"
+            class="get_form"
+            action="{% url 'enrichment:edit_enrichment' slug=video.slug %}"
+            method="POST"
+          >
+            {% csrf_token %}
+            <input type="hidden" name="action" value="new">
+            <input
+              type="submit"
+              id="add_new_enrichment"
+              value="{% trans 'Add a new enrichment' %}"
+              class="btn btn-primary btn-sm"
+            >
+          </form>
+          {% endif %}
+          <hr>
+          <div class="d-flex justify-content-between">
+            <a
+              href="{% url 'video:video_edit' slug=video.slug %}"
+              class="btn btn-secondary btn-sm"
+            >
+              {% trans 'Back to video edit' %}
+            </a>
+            <a
+              href="{% url 'enrichment:video_enrichment' slug=video.slug %}"
+              class="btn btn-primary btn-sm"
+            >
+              {% trans 'See the enrich video' %}
+            </a>
+          </div>
+        </div>
+      </div>
+    {% endblock video-element %}
+  </div>
+{% endblock page_content %}
+
+
+
+
+{% block page_aside %}
+  <div class="card" id="card-enrichmenteditinformations">
+    <h2 class="card-header card-title pod-card__title h4">
+      <i class="bi bi-info-circle"></i>&nbsp;{% trans 'Editing enrichments' %}
+    </h2>
+    <div class="card-body card-text small">
+      {% if video.owner == request.user or request.user.is_superuser or perms.enrichment.change_enrichment or request.user in video.additional_owners.all %}
+      <p>
+        <a href="{% url 'enrichment:group_enrichment' slug=video.slug %}"
+          ><i class="bi bi-people"></i>&nbsp;{% trans 'You can specify the group(s) of users who can access this page' %}</a
+        >
+      </p>
       {% endif %}
-    </div>
-    {% if not form_enrichment %}
-    <form
-      id="form_new"
-      class="get_form"
-      action="{% url 'enrichment:edit_enrichment' slug=video.slug %}"
-      method="POST"
-    >
-      {% csrf_token %}
-      <input type="hidden" name="action" value="new">
-      <input
-        type="submit"
-        id="add_new_enrichment"
-        value="{% trans 'Add a new enrichment' %}"
-        class="btn btn-primary btn-sm"
-      >
-    </form>
-    {% endif %}
-    <hr>
-    <div class="d-flex justify-content-between">
-      <a
-        href="{% url 'video:video_edit' slug=video.slug %}"
-        class="btn btn-secondary btn-sm"
-      >
-        {% trans 'Back to video edit' %}
-      </a>
-      <a
-        href="{% url 'enrichment:video_enrichment' slug=video.slug %}"
-        class="btn btn-primary btn-sm"
-      >
-        {% trans 'See the enrich video' %}
-      </a>
+      <p>
+        {% trans 'The title field is required and must contains from 2 to 100 characters.' %}
+      </p>
+      <p>
+        {% trans 'The fields "Start" and "End" must contain an indication value in seconds. Start playback of the video, pause the video and click on "Get time from the player" to fill in the field untitled "Start". Then do the same to fill in the field untitled "End".' %}
+      </p>
+      <p>{% trans 'You cannot overlap enrichments.' %}</p>
+      <p>{% trans 'You must save your enrichments to view the result.' %}</p>
     </div>
   </div>
-</div>
-{% endblock video-element %} {% block page_aside %}
-<div class="card" id="card-enrichmenteditinformations">
-  <h2 class="card-header card-title pod-card__title h4">
-    <i class="bi bi-info-circle"></i>&nbsp;{% trans 'Editing enrichments' %}
-  </h2>
-  <div class="card-body card-text small">
-    {% if video.owner == request.user or request.user.is_superuser or perms.enrichment.change_enrichment or request.user in video.additional_owners.all %}
-    <p>
-      <a href="{% url 'enrichment:group_enrichment' slug=video.slug %}"
-        ><i class="bi bi-people"></i>&nbsp;{% trans 'You can specify the group(s) of users who can access this page' %}</a
-      >
-    </p>
-    {% endif %}
-    <p>
-      {% trans 'The title field is required and must contains from 2 to 100 characters.' %}
-    </p>
-    <p>
-      {% trans 'The fields "Start" and "End" must contain an indication value in seconds. Start playback of the video, pause the video and click on "Get time from the player" to fill in the field untitled "Start". Then do the same to fill in the field untitled "End".' %}
-    </p>
-    <p>{% trans 'You cannot overlap enrichments.' %}</p>
-    <p>{% trans 'You must save your enrichments to view the result.' %}</p>
-  </div>
-</div>
-{{ block.super }} {% endblock page_aside %} {% block more_script %}
-{{block.super}} {% endblock more_script %}
+  {{ block.super }}
+{% endblock page_aside %}
+
+
+
+{% block more_script %}
+  {{block.super}}
+  <script>
+    player.on('play', function() {
+      document.getElementById('podvideoplayer_html5_api').classList.add('to-edit');
+    });
+  </script>
+{% endblock more_script %}

pod/enrichment/templates/enrichment/enrichmentinformations_card.html

@@ -0,0 +1,18 @@
+{% load i18n %}
+
+<h2 class="card-header card-title pod-card__title h4">
+    <i class="bi bi-info-circle" aria-hidden="true"></i>&nbsp;{% trans 'Informations' %}
+</h2>
+<div class="card-body card-text">
+    <p>{% trans 'To help you, the different types of enrichments have specific colors:' %}</p>
+    <p>
+        <ul>
+            <li class="enrich_image">{% trans 'Image' %}</li>
+            <li class="enrich_document">{% trans 'Document' %}</li>
+            <li class="enrich_richtext">{% trans 'Richtext' %}</li>
+            <li class="enrich_weblink">{% trans 'Weblink' %}</li>
+            <li class="enrich_embed">{% trans 'Embed' %}</li>
+        </ul>
+    </p>
+    <p>{% trans 'They are visible on the video playback bar.' %}</p>
+</div>

pod/enrichment/templates/enrichment/video_enrichment-script.html

@@ -1,59 +1,63 @@
-<script>
-{% if not video.is_video %}
-  slide_mode = 'video off';
-{% endif %}
-player.ready(function() {
-  const tracks = player.textTracks();
-  const trackElts = player.remoteTextTrackEls();
-  let metadataTrack, i, track;
+{% load static %}
 
-  for (i = 0; i < tracks.length; i++) {
-      track = tracks[i];
-      // console.log("track: ["+track.kind + "] " + track.label);
-      if (track.kind === 'metadata' && track.label === 'enrichment') {
-          metadataTrack = track;
-          metadataTrack.index = i;
-          metadataTrack.src = trackElts[i].src;
-          break;
-      }
-  }
+<script id="id_video_enrichment_script">
+  var linkForStyleSheetForEnrichment = "{% static 'css/videojs-slides.css' %}?ver={{VERSION}}";
+  {% if not video.is_video %}
+    slide_mode = 'video off';
+  {% endif %}
 
-  player.on('loadedmetadata', function() {
-      if(!metadataTrack){
-        console.log("No enrichment track found.")
-        return
-      }
-      let slide = [];
-      if(!metadataTrack.cues) { //Safari do not get cues
-          //let tracksrc = player.el().getElementsByTagName('TRACK')[metadataTrack.index].src;
-          //let tracksrc = player.el().querySelector("TRACK[kind='metadata'][label='enrichment']").src
-          loadEnrichmentVTTfile(metadataTrack.src, function(cues) {
-              if (typeof player.slides === "function") {
-                  player.slides(cues);
-              }
-          });
-      } else {
-        //console.log(metadataTrack.cues.length);
-        for (i = 0; i < metadataTrack.cues.length; i++) {
-          // Replace tabs by spaces to prevent a "JSON.parse: bad control character in string literal" error.
-          data = JSON.parse(metadataTrack.cues[i].text.replace(/\t/g, ' '));
-          //console.log('Parsed '+data.title)
-          slide.push({
-            title: data.title,
-            url: data.url,
-            type: data.type,
-            stop_video: data.stop_video,
-            start: metadataTrack.cues[i].startTime,
-            end: metadataTrack.cues[i].endTime
-          });
-        }
-      }
-      if (typeof player.slides === "function") {
-        //console.log('Call player.slides from video-script');
-        player.slides(slide);
-      }
-  });
+  if (typeof enrichmentIsOn !== 'undefined' && enrichmentIsOn) {
+    player.ready(function() {
+      const tracks = player.textTracks();
+      const trackElts = player.remoteTextTrackEls();
+      let metadataTrack, i, track;
 
+      for (i = 0; i < tracks.length; i++) {
+          track = tracks[i];
+          // console.log("track: ["+track.kind + "] " + track.label);
+          if (track.kind === 'metadata' && track.label === 'enrichment') {
+              metadataTrack = track;
+              metadataTrack.index = i;
+              metadataTrack.src = trackElts[i].src;
+              break;
+          }
+      }
 
-});
+      player.on('loadedmetadata', function() {
+          if(!metadataTrack){
+            console.log("No enrichment track found.")
+            return
+          }
+          let slide = [];
+          if(!metadataTrack.cues) { //Safari do not get cues
+              //let tracksrc = player.el().getElementsByTagName('TRACK')[metadataTrack.index].src;
+              //let tracksrc = player.el().querySelector("TRACK[kind='metadata'][label='enrichment']").src
+              loadEnrichmentVTTfile(metadataTrack.src, function(cues) {
+                  if (typeof player.slides === "function") {
+                      player.slides(cues);
+                  }
+              });
+          } else {
+            //console.log(metadataTrack.cues.length);
+            for (i = 0; i < metadataTrack.cues.length; i++) {
+              // Replace tabs by spaces to prevent a "JSON.parse: bad control character in string literal" error.
+              data = JSON.parse(metadataTrack.cues[i].text.replace(/\t/g, ' '));
+              //console.log('Parsed '+data.title)
+              slide.push({
+                title: data.title,
+                url: data.url,
+                type: data.type,
+                stop_video: data.stop_video,
+                start: metadataTrack.cues[i].startTime,
+                end: metadataTrack.cues[i].endTime
+              });
+            }
+          }
+          if (typeof player.slides === "function") {
+            //console.log('Call player.slides from video-script');
+            player.slides(slide);
+          }
+      });
+    });
+  }
 </script>