keyboard events

Author: filipemelo2002

desktop/src/views/main/js/actions.js

@@ -26,6 +26,7 @@ const click = async () => {
     const sanitizedPath = filePaths[0].replace(/\\/g, "/");
     video.src = `file:///${sanitizedPath}`;
     source.load();
+    video.focus();
     welcomeContainer.style.setProperty("display", "none");
   }
 };

desktop/src/views/main/js/controls.js

@@ -22,6 +22,7 @@ const handlePause = (e) => {
 };
 const fullscreen = (e) => {
   e.preventDefault();
+  video.focus();
   if (isVideoInFullscreen()) {
     minimize_maximize.setAttribute("src", "./assets/maximize.svg");
     document.webkitExitFullscreen();
@@ -33,9 +34,11 @@ const fullscreen = (e) => {
 video.addEventListener("click", handlePause);
 play_pause.addEventListener("click", handlePause);
 video.addEventListener("pause", () => {
+  video.focus();
   play_pause.setAttribute("src", "./assets/play-circle.svg");
 });
 video.addEventListener("play", () => {
+  video.focus();
   play_pause.setAttribute("src", "./assets/pause-circle.svg");
 });
 video.addEventListener("dblclick", fullscreen);
@@ -55,7 +58,7 @@ function seek(event) {
   const percent = event.offsetX / this.offsetWidth;
   media.currentTime = percent * media.duration;
   progress.value = percent / 100;
-
+  video.focus();
   socket.emit("media-seeking", {
     timeStamp: media.currentTime,
     id: friendId.value,
@@ -85,16 +88,42 @@ const muteVolume = (e) => {
     volumeIndicator.setAttribute("src", "./assets/volume-2.svg");
   }
 };
-volumeIndicator.addEventListener("click", muteVolume);
-volume.addEventListener("change", ({ target }) => {
+
+const handleVolume = ({ target }) => {
   video.volume = target.value;
   if (target.value == 0) {
     volumeIndicator.setAttribute("src", "./assets/volume-x.svg");
-  } else if (target.value > 0 && target.value <= 0.2) {
+  } else if (target.value > 0 && target.value <= 0.3) {
     volumeIndicator.setAttribute("src", "./assets/volume.svg");
-  } else if (target.value > 0.2 && target.value <= 0.5) {
+  } else if (target.value > 0.3 && target.value <= 0.5) {
     volumeIndicator.setAttribute("src", "./assets/volume-1.svg");
   } else {
     volumeIndicator.setAttribute("src", "./assets/volume-2.svg");
   }
-});
+};
+volumeIndicator.addEventListener("click", muteVolume);
+volume.addEventListener("input", handleVolume);
+volume.addEventListener("change", handleVolume);
+video.addEventListener("keydown", hadleKeyEvents);
+function hadleKeyEvents(e) {
+  e.preventDefault();
+  const { keyCode } = e;
+  switch (keyCode) {
+    case 39:
+      socket.emit("media-seeking", {
+        timeStamp: media.currentTime,
+        id: friendId.value,
+      });
+      break;
+    case 37:
+      socket.emit("media-seeking", {
+        timeStamp: media.currentTime,
+        id: friendId.value,
+      });
+      break;
+    case 32:
+      if (video.paused) socket.emit("media-play", friendId.value);
+      if (!video.paused) socket.emit("media-pause", friendId.value);
+      break;
+  }
+}