From b631fbd3e9c1fd277d79c877a6b230c16564fe0d Mon Sep 17 00:00:00 2001 From: atharv-naik Date: Tue, 26 Mar 2024 09:45:05 +0530 Subject: [PATCH 1/6] Fix typo in var captionsUnavailable resulting in captions available when shouldn't --- play/static/play/js/watch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/play/static/play/js/watch.js b/play/static/play/js/watch.js index a2be6a7..ca562dc 100644 --- a/play/static/play/js/watch.js +++ b/play/static/play/js/watch.js @@ -251,7 +251,7 @@ video.addEventListener("loadedmetadata", () => { captionsBtn.addEventListener("click", toggleCaptions); } else { captionsBtn.style.opacity = "0.65"; - captionsUnavailble = true; + captionsUnavailable = true; } }); From 4f8b0b7f6286d8ad81e7a2fb4412f1a9b37bfd24 Mon Sep 17 00:00:00 2001 From: atharv-naik Date: Tue, 26 Mar 2024 09:48:08 +0530 Subject: [PATCH 2/6] Fix: prevent default scrolling on player volume change --- play/static/play/js/watch.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/play/static/play/js/watch.js b/play/static/play/js/watch.js index ca562dc..4291110 100644 --- a/play/static/play/js/watch.js +++ b/play/static/play/js/watch.js @@ -80,14 +80,18 @@ document.addEventListener("keydown", (e) => { // 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": From 22816a594fc36b7f3bc7e2d3399d8e8a586d94e7 Mon Sep 17 00:00:00 2001 From: atharv-naik Date: Tue, 26 Mar 2024 09:51:05 +0530 Subject: [PATCH 3/6] Fix: timeout issue in player showControls() --- play/static/play/js/watch.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/play/static/play/js/watch.js b/play/static/play/js/watch.js index 4291110..e7f63ba 100644 --- a/play/static/play/js/watch.js +++ b/play/static/play/js/watch.js @@ -535,7 +535,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 @@ -562,6 +562,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); } } From 09a03049d3f334fd3876d29a825fab112ca66e7f Mon Sep 17 00:00:00 2001 From: atharv-naik Date: Tue, 26 Mar 2024 10:05:44 +0530 Subject: [PATCH 4/6] Show video title info only while player in full screen mode --- play/static/play/styles/watch.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/play/static/play/styles/watch.css b/play/static/play/styles/watch.css index 8c1dd04..4417747 100644 --- 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; } From a7c0441552355e58346016a081d741d03ce16554 Mon Sep 17 00:00:00 2001 From: atharv-naik Date: Tue, 26 Mar 2024 10:09:06 +0530 Subject: [PATCH 5/6] Add ambient mode toggle in ptp-settngs panel --- play/static/play/js/watch.js | 5 - play/static/play/styles/watch.css | 49 ++ play/templates/play/components/player.html | 534 ++++++++++++--------- 3 files changed, 348 insertions(+), 240 deletions(-) diff --git a/play/static/play/js/watch.js b/play/static/play/js/watch.js index e7f63ba..e0a0aaf 100644 --- a/play/static/play/js/watch.js +++ b/play/static/play/js/watch.js @@ -74,11 +74,6 @@ document.addEventListener("keydown", (e) => { toggleCaptions(); showControls(); break; - case "a": - // enableNextAudioTrack(); - toggleAmbientMode(); - // showControls(); - break; case "arrowup": // prevent default scrolling e.preventDefault(); diff --git a/play/static/play/styles/watch.css b/play/static/play/styles/watch.css index 4417747..bb74288 100644 --- a/play/static/play/styles/watch.css +++ b/play/static/play/styles/watch.css @@ -698,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; diff --git a/play/templates/play/components/player.html b/play/templates/play/components/player.html index c357977..d400d36 100644 --- a/play/templates/play/components/player.html +++ b/play/templates/play/components/player.html @@ -1,280 +1,344 @@ {% load custom_filters %} -
-
-
+
-
- -
-
-
- -
- Channel Pic -
-
{{ movie.title }} >
+
+ +
+
+
+
+ Channel Pic
+
{{ movie.title }} >
-
-
-
-
-
-
00:00:00
- -
-
+
+
+
+
+
+
+
00:00:00
+ +
-
- - + pause + + -
- - -
-
-
0:00
- / -
{{ movie.duration|get_duration_stamp }}
-
- - - - - +
+
+
0:00
+ / +
{{ movie.duration|get_duration_stamp }}
+
+ + + + +
- -
-
-
-
-
-
- - tune - -
-
- Quality -
-
-
- Auto +
+ +
+
+
+
+
+
+ + +
+
Ambient Mode
- {% if not movie.subtitle %} -
-
-
- - subtitles - -
-
- Subtitles/CC (1) -
-
-
- Unavailable -
-
- {% else %} -
-
-
- - subtitles - -
-
- Subtitles/CC (1) -
-
-
- Off -
-
- {% endif %} -
-
-
- - play_circle - -
-
- Playback speed -
-
-
- Normal +
+
+ +
-
-
-
- - chevron_left - - Quality -
-
- Auto -
-
- 720p -
-
- 480p -
-
- 240p +
+
+
+ tune
+
Quality
-
-
- - chevron_left - - Subtitles/CC -
-
- Off -
-
- English +
Auto
+
+ {% if not movie.subtitle %} +
+
+
+ subtitles
+
Subtitles/CC
-
-
- - chevron_left - - Playback speed -
-
- 0.25 -
-
- 0.5 -
-
- 0.75 -
-
- Normal -
-
- 1.25 -
-
- 1.5 -
-
- 1.75 +
+ Unavailable +
+
+ {% else %} +
+
+
+ subtitles
-
- 2 +
Subtitles/CC (1)
+
+
Off
+
+ {% endif %} +
+
+
+ play_circle
+
Playback speed
+
+
+ Normal +
+
+
+
+
+
+ chevron_left + Quality +
+
+ Auto +
+
+ 720p +
+
+ 480p +
+
+ 240p +
+
+
+
+ chevron_left + Subtitles/CC +
+
+ Off +
+
+ English +
+
+
+
+ chevron_left + Playback speed +
+
+ 0.25 +
+
+ 0.5 +
+
+ 0.75 +
+
+ Normal +
+
+ 1.25 +
+
+ 1.5 +
+
+ 1.75 +
+
+ 2
- +
+
From 75c69b8a69a23c14929bd9b974249a0751680582 Mon Sep 17 00:00:00 2001 From: atharv-naik Date: Tue, 26 Mar 2024 10:10:06 +0530 Subject: [PATCH 6/6] Fix: consecutive single click events trigger double click events in player --- play/static/play/js/watch.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/play/static/play/js/watch.js b/play/static/play/js/watch.js index e0a0aaf..109f81a 100644 --- 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(); @@ -448,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"); @@ -503,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", () => { @@ -516,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) {