Merge branch 'feature/ambient-mode'

Player bug fixes and improvements
atharv-naik · Mar 26, 2024 · c70e9f9 · c70e9f9
2 parents 420df1a + 75c69b8
commit c70e9f9
Show file tree

Hide file tree

Showing 3 changed files with 385 additions and 247 deletions.
diff --git a/play/static/play/js/watch.js b/play/static/play/js/watch.js
@@ -26,6 +26,23 @@ const ptpPlayer = document.querySelector("#ptp-player");
 const ambientLight = document.querySelector(".ptp-ambient-light");
 const leftContainer = document.querySelector(".container-left");
 
+let clickTimer;
+const delay = 200;
+
+function handleSingleClick(func) {
+  clearTimeout(clickTimer);
+
+  clickTimer = setTimeout(() => {
+    func();
+  }, delay);
+}
+
+function handleDoubleClick(func) {
+  clearTimeout(clickTimer);
+
+  func();
+}
+
 document.addEventListener("keydown", (e) => {
   const tagName = document.activeElement.tagName.toLowerCase();
 
@@ -74,20 +91,19 @@ document.addEventListener("keydown", (e) => {
       toggleCaptions();
       showControls();
       break;
-    case "a":
-      // enableNextAudioTrack();
-      toggleAmbientMode();
-      // showControls();
-      break;
     case "arrowup":
+      // prevent default scrolling
+      e.preventDefault();
       changeVolume(0.05);
       showControls();
-      showVolumeAnimation((increase = true));
+      // showVolumeAnimation((increase = true));
       break;
     case "arrowdown":
+      // prevent default scrolling
+      e.preventDefault();
       changeVolume(-0.05);
       showControls();
-      showVolumeAnimation((increase = false));
+      // showVolumeAnimation((increase = false));
       break;
     case "0":
     case "1":
@@ -251,7 +267,7 @@ video.addEventListener("loadedmetadata", () => {
     captionsBtn.addEventListener("click", toggleCaptions);
   } else {
     captionsBtn.style.opacity = "0.65";
-    captionsUnavailble = true;
+    captionsUnavailable = true;
   }
 });
 
@@ -449,7 +465,10 @@ miniPlayerBtn.addEventListener("click", toggleMiniPlayerMode);
 
 // double click to toggle fullscreen mode
 // liste for double click event
-videoContainer.addEventListener("dblclick", toggleFullScreenMode);
+video.addEventListener(
+  "dblclick",
+  handleDoubleClick.bind(null, toggleFullScreenMode)
+);
 
 function toggleTheaterMode() {
   videoContainer.classList.toggle("theater");
@@ -504,7 +523,6 @@ function toggleMiniPlayerMode() {
 
 document.addEventListener("fullscreenchange", () => {
   videoContainer.classList.toggle("full-screen", document.fullscreenElement);
-  // thumbnailImg.classList.toggle("full-screen", document.fullscreenElement)
 });
 
 video.addEventListener("enterpictureinpicture", () => {
@@ -517,7 +535,7 @@ video.addEventListener("leavepictureinpicture", () => {
 
 // Play/Pause
 playPauseBtn.addEventListener("click", togglePlay);
-video.addEventListener("click", togglePlay);
+video.addEventListener("click", handleSingleClick.bind(null, togglePlay));
 
 function togglePlay() {
   if (video.paused) {
@@ -531,7 +549,7 @@ function togglePlay() {
 // first check if the video is playing
 const videoControls = document.querySelector(".video-controls-container");
 const videoTitle = document.querySelector(".video-title-container");
-let timeout;
+let timeout = undefined;
 
 function hideControls() {
   // hide only if not hovering over controls
@@ -558,6 +576,8 @@ function showControls() {
 
   // if the video is playing, hide controls after 3 seconds
   if (!video.paused) {
+    // clear previous timeout
+    if (timeout) clearTimeout(timeout);
     timeout = setTimeout(hideControls, 5000);
   }
 }

diff --git a/play/static/play/styles/watch.css b/play/static/play/styles/watch.css
@@ -156,6 +156,7 @@ body::-webkit-scrollbar {
   display: flex;
   align-items: center;
   justify-content: left;
+  display: none;
 }
 
 .video-title {
@@ -232,6 +233,10 @@ body::-webkit-scrollbar {
   margin-top: 0;
 }
 
+.video-container.full-screen .video-title-container {
+  display: block;
+}
+
 .video-container.theater + .video-meta-data-container {
   padding-inline: 1.5em;
 }
@@ -693,6 +698,55 @@ video {
   content: " >";
 }
 
+.ptp-menuitem-toggle-checkbox {
+  display: flex;
+}
+
+.ptp-menuitem-toggle-checkbox input[type="checkbox"] {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.ptp-menuitem-toggle-checkbox label {
+  height: 14px;
+  width: 36px;
+  float: right;
+  position: relative;
+  border-radius: 14px;
+  background-color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: all 0.08s cubic-bezier(0.4, 0, 1, 1);
+  -webkit-transition: all 0.08s cubic-bezier(0.4, 0, 1, 1);
+  -moz-transition: all 0.08s cubic-bezier(0.4, 0, 1, 1);
+  transform: scale(1);
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+}
+
+.ptp-menuitem-toggle-checkbox label::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  margin-top: -3px;
+  background-color: #bdbdbd;
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
+  transition: all 0.08s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.ptp-menuitem-toggle-checkbox input[type="checkbox"]:checked + label::after {
+  background-color: #fff;
+  transform: translateX(16px);
+}
+
+.ptp-menuitem-toggle-checkbox input[type="checkbox"]:checked + label {
+  background-color: red;
+}
+
 .ptp-submenu {
   display: none;
   border-radius: 10px;