diff --git a/play/static/play/js/watch.js b/play/static/play/js/watch.js index a2be6a7..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(); @@ -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 index 8c1dd04..bb74288 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; } @@ -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; 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
- +
+