added comments to code

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+package-lock.json

assets/MediaPlayer.js

@@ -1,38 +1,69 @@
+/**
+ * Media player recibe como parámetros un objeto que contiene: el video que va a controlar
+ * y funcionalidades especificas relacionadas con el control del elemento
+ * @param {object} config objeto de configuración
+ * @param {HTMLVideoElement} config.el elemento de video que sera manejado por el modulo 
+ * @param {object} config.plugins funciones especificas relacionadas con el AutoPlay 
+ */
 function MediaPlayer(config) {
-  this.media = config.el;
-  this.plugins = config.plugins || [];
+    this.media = config.el
+    this.plugins = config.plugins || []
 
-  this._initPlugins();
+    this._initPlugins()
 }
 
+/**
+ * Esta función incializa todos los plugins pasados por parámetro
+ */
 MediaPlayer.prototype._initPlugins = function() {
-  this.plugins.forEach(plugin => {
-    plugin.run(this);
-  });
-};
+    this.plugins.forEach(plugin => {
+        plugin.run(this)
+    })
+}
 
+/**
+ * Esta función reproduce el elemento
+ */
 MediaPlayer.prototype.play = function() {
-  this.media.play();
-};
+    this.media.play()
+}
 
+/**
+ * Esta función pausa el elemento
+ */
 MediaPlayer.prototype.pause = function() {
-  this.media.pause();
-};
+    this.media.pause()
+}
 
+/**
+ * Esta función alterna la reproducción o pausa del elemento
+ * dependiendo del estado en que este se encuentre.
+ */
 MediaPlayer.prototype.togglePlay = function() {
-  if (this.media.paused) {
-    this.play();
-  } else {
-    this.pause();
-  }
-};
+    if (this.media.paused) {
+        this.play()
+    } else {
+        this.pause()
+    }
+}
 
+/**
+ * Esta función silencia el elemento.
+ */
 MediaPlayer.prototype.mute = function() {
-  this.media.muted = true;
-};
+    this.media.muted = true
+}
 
+/**
+ * Esta función regresa el audio al elemento.
+ */
 MediaPlayer.prototype.unmute = function() {
-  this.media.muted = false;
-};
+    this.media.muted = false
+}
 
-export default MediaPlayer;
+/**
+ * La declaración export se utiliza al crear módulos de JavaScript p
+ * ara exportar funciones, objetos o tipos de dato primitivos del módulo
+ * para que puedan ser utilizados por otros programas con la sentencia import.
+ */
+export default MediaPlayer

assets/index.js

@@ -1,17 +1,30 @@
-import MediaPlayer from './MediaPlayer.js';
-import AutoPlay from './plugins/AutoPlay.js';
 
-const video = document.querySelector('video');
-const player = new MediaPlayer({ el: video, plugins: [new AutoPlay()] });
+/**
+ * ===================================================================
+ * El código esta comentado, coloca el mouse sobre las funciones o
+ * módulos o parámetros de la función para que veas su descripción y 
+ * puedas entender un poco mejor como funciona el modulo y el plugin.
+ * ===================================================================
+ */
 
-const playButton = document.querySelector('#playButton');
-playButton.onclick = () => player.togglePlay();
-
-const muteButton = document.querySelector('#muteButton');
+//importamos el modulo MediaPlayer
+import MediaPlayer from './MediaPlayer.js'
+//importamos el plugin Autoplay
+import AutoPlay from './plugins/AutoPlay.js'
+//obtenemos el video que va a ser administrado por nuestro modulo MediaPlayer
+const video = document.querySelector('video')
+//creamos una instancia de MediaPlayer y pasamos el elemento y los plugins, en este caso AutoPlay
+const player = new MediaPlayer({ el: video, plugins: Array(new AutoPlay()) })
+//obtenemos un elemento del DOM que usara funcionalidades de nuestro modulo MediaPlayer
+const playButton = document.querySelector('#playButton')
+//ejecutamos función togglePlay de nuestro modulo MediaPlayer
+playButton.onclick = () => player.togglePlay()
+//obtenemos otro elemento del DOM para  implementar mas funcionalidades de nuestro modulo
+const muteButton = document.querySelector('#muteButton')
 muteButton.onclick = () => {
-  if (player.media.muted) {
-    player.unmute();
-  } else {
-    player.mute();
-  }
-};
+    if (player.media.muted) {
+        player.unmute()
+    } else {
+        player.mute()
+    }
+}

assets/plugins/AutoPlay.js

@@ -1,7 +1,16 @@
+
+/**
+ * Maneja la reproducción automática del elemento.
+ */
 function AutoPlay() {}
+
+/**
+ * Esta función pausa el elemento para evitar errores cuando la pagina carga
+ * y después lo reproduce automáticamente.
+ */
 AutoPlay.prototype.run = function(player) {
-  player.mute();
-  player.play();
-};
+    player.mute()
+    player.play()
+}
 
-export default AutoPlay;
+export default AutoPlay

index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>PlatziMediaPlayer.js</title>