Adición de reproductor de video fresón

source/main/static/css/main.css

@@ -214,6 +214,29 @@
   height: calc(100% - 3em);
 }
 
+/* Reproductor */
+
+section#notice {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+section#notice div {
+  padding: 1rem;
+}
+
+section#notice p {
+  font-weight: bold;
+  color: white;
+}
+
+section#notice a {
+  display: block;
+  width: fit-content;
+  margin: auto;
+}
+
 /* ICONS; cfr: https://css.gg */
 
 .gg-time {

source/main/static/js/player.js

@@ -0,0 +1,49 @@
+// Deshabilita scroll con la tecla de espacio
+// Esto es para que en 'player' quede habilitado para reproducción
+window.addEventListener('keydown', (e) => {  
+  if (e.keyCode === 32 && e.target === document.body) {  
+    e.preventDefault();  
+  }  
+});
+
+// Añade un aviso
+function add_notice () {
+  const divs = document.querySelectorAll('.plyr');
+  // Ejecuta de nuevo hasta que esté implementado el reproductor
+  if (divs.length == 0) {
+    setTimeout(add_notice, 500);
+  } else {
+    let hero_sec = document.createElement('section'),
+        hero_div = document.createElement('div'),
+        hero_tit = document.createElement('p'),
+        hero_btn = document.createElement('a');
+    hero_sec.id = 'notice';
+    hero_sec.classList.add('hero', 'is-small', 'is-warning', 'has-text-centered');
+    hero_div.classList.add('hero-body');
+    hero_btn.classList.add('button', 'is-small', 'is-success');
+    hero_btn.addEventListener('click', remove_notice);  
+    hero_tit.innerText = 'Mauflix funciona con pocos recursos. Para un uso más eficiente te recomendamos descargar la película.';
+    hero_btn.innerText = '¡Entendido!';
+    hero_tit.appendChild(hero_btn);
+    hero_div.appendChild(hero_tit);
+    hero_sec.appendChild(hero_div);
+    divs[0].appendChild(hero_sec);
+  }
+}
+
+// Elimina aviso
+function remove_notice () {
+  let notice = document.querySelector('#notice');
+  console.log('notice', notice)
+  if (notice !== null) {
+    notice.parentNode.removeChild(notice);
+  }
+}
+
+// Implementa el reproductor
+const player = new Plyr('#player', {
+  keyboard: { focused: true, global: true },
+  controls: ['play-large', 'play', 'progress', 'current-time', 'mute',
+    'volume', 'pip', 'airplay', 'download', 'fullscreen'],
+  listeners: { seek: add_notice() },
+});

source/templates/info-body.html

@@ -60,9 +60,14 @@
       {% endif %}
     </div>
     {% if user.is_superuser %}
-      <video controls>
+      <video id="player" playsinline controls data-poster="{{ movie.cartel }}">
         <source src="{{ movie.file_name }}"  type="video/mp4">
       </video>
+      {% load static %}
+      <!-- CSS y JS necesario paara el reproductor -->
+      <link rel="stylesheet" href="{% static 'css/plyr.css' %}">
+      <script type="text/javascript" src="{% static 'js/plyr.js' %}"></script>
+      <script type="text/javascript" src="{% static 'js/player.js' %}"></script>
     {% endif %}
   {% endif %}
 </div>