add hd video!!

This commit is contained in:
ashley 2024-07-02 22:09:19 +00:00
parent be0fd4ae31
commit 6658fdc5a7

View file

@ -589,8 +589,258 @@ background-color: #0000;
position: sticky;
background:#0009;
top: 0;
}
#controls {
display: flex;
visibility: hidden;
position: absolute;
bottom: 0;
margin-bottom: 70px !important;
margin: 0 20px;
width: 100%;
align-items:flex-end;
}
video:hover~#controls, #controls:hover {
visibility: visible;
}
.control-button {
width: 40px;
border-radius: 5px;
margin-bottom: 6px;
padding: 3px
}
.video-player-container {
position: relative;
}
.control-button svg {
fill: #c59cd0;
width: 40px;
margin-bottom: -6px;
}
#seekbar {
display: flex;
margin-left: 20px;
margin-right: 20px;
width: 100%;
}
input[id*="-slider"] {
flex-grow: 1;
-webkit-appearance: none;
appearance: none;
background: #ffffff;
border: 1px solid #000000;
margin-bottom: 23px;
cursor: pointer;
width: 0.5rem;
height: 5px !important;
display: block;
border-radius: 50px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 21px;
width: 21px;
border-radius: 20px;
background: var(--div-gradient);
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #000000;
height: 21px;
width: 21px;
border-radius: 20px;
background: var(--div-gradient);
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#timestamps {
margin-right: 40px;
}
html:fullscreen video {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999999 !important;
}
html:fullscreen *:not(html, video, body, ptd-app-ejs, .app, .watch-page, .primary, .video-player-container, #popupMenu, #popupMenu *) {
visibility: hidden !important;
}
</style>
<noscript>
<style>
#controls {
display: none !important;
}
</style>
</noscript>
<script>
const playSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>'
const pauseSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause-circle-outline</title><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
function csts(seconds) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
if (hours === 0) {
var timeString = minutes.toString().padStart(2, '0') + ':' +
secs.toString().padStart(2, '0');
} else {
var timeString = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
secs.toString().padStart(2, '0');
}
return timeString;
}
document.addEventListener("DOMContentLoaded", () => {
//FIXME: saved playback intentionally overwritten
localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
// Controls and high-res playback
//TODO - a
let setTime = false
const seekbar = document.getElementById("duration-slider")
const video = document.getElementById("video");
let previousTimestamp = 0;
video.addEventListener("timeupdate", (event) => {
seekbar.value = event.target.currentTime;
const timestamps = document.getElementById("timestamps");
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
if(event.target.currentTime - previousTimestamp >= 5 || event.target.currentTime - previousTimestamp <= -5) {
console.log("GAY")
aud.currentTime = event.target.currentTime;
}
previousTimestamp = event.target.currentTime;
});
seekbar.addEventListener("input", (event) => {
video.pause()
aud.pause()
aud.currentTime = event.target.value
video.currentTime = event.target.value
});
// Play/Pause
const playPauseButton = document.getElementById("play-pause");
playPauseButton.innerHTML = pauseSVG;
function toggleVideo() {
if(document.getElementById("popupMenu").style.display == "none") {
if(!document.fullscreen) {
if(!video.paused) {
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
}
else {
video.play(); aud.play(); playPauseButton.innerHTML = pauseSVG;
}
}
}
else {
document.getElementById("popupMenu").style.display = "none"
}
}
playPauseButton.addEventListener("click", () => {
toggleVideo()
});
video.addEventListener("click", toggleVideo);
video.addEventListener("dblclick", () => {
document.documentElement.requestFullscreen();
});
document.getElementById("muteOption").addEventListener("click", () => {
aud.volume == 0 ? aud.volume = 1 : aud.volume = 0;
});
document.getElementById("syncOption").addEventListener("click", () => {
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime;
});
document.addEventListener("fullscreenchange", function() {
if(document.fullscreen) {
video.controlsList = "noplaybackrate nodownload"
window.onscroll = function () { window.scrollTo(0, 0); };
document.documentElement.style.overflow = "hidden"
video.controls = true;
}
if(!document.fullscreen) {
video.controlsList = ""
window.onscroll = null;
document.documentElement.style.overflow = null
video.controls = false;
}
});
video.addEventListener("fullscreenchange", () => {
video.fullscreen = false;
document.exitFullscreen();
});
video.addEventListener("contextmenu", (event) => {
if(document.fullscreen) {
event.preventDefault()
const popupMenu = document.getElementById('popupMenu');
if (popupMenu) {
const xPosition = event.clientX + window.pageXOffset;
const yPosition = event.clientY + window.pageYOffset;
popupMenu.style.left = `${xPosition}px`;
popupMenu.style.top = `${yPosition}px`;
}
popupMenu.style.display = "block"
}
});
function startPlayback() {
// Final prepare
seekbar.max = video.duration
const timestamps = document.getElementById("timestamps");
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
// Media controls fix
aud.addEventListener("pause", () => {
vid.pause(); playPauseButton.innerHTML = playSVG;
});
aud.addEventListener("play", () => {
vid.play(); playPauseButton.innerHTML = pauseSVG;
});
vid.addEventListener("pause", () => {
aud.pause(); playPauseButton.innerHTML = playSVG;
});
vid.addEventListener("play", () => {
aud.play(); playPauseButton.innerHTML = pauseSVG;
});
aud.addEventListener("timechange", () => {
vid.currentTime = aud.currentTime;
});
// Show controls
try {
aud.play();
vid.play();
}
catch {}
if(!setTime) {
//FIXME: saved playback intentionally overwritten
aud.currentTime = 0
vid.currentTime = 0
seekbar.value = 0
setTime = true
}
}
let shouldPlay = 0;
const aud = document.getElementById("aud");
const vid = document.getElementById("video");
aud.addEventListener("canplay", () => {
shouldPlay++;
if(shouldPlay >= 2) {
startPlayback();
shouldPlay = 0;
}
});
vid.addEventListener("canplay", () => {
shouldPlay++;
if(shouldPlay >= 2) {
startPlayback();
shouldPlay = 0;
}
});
})
</script>
<% if(shortsui) { %>
<script>
// Function to apply styles after DOM has loaded
@ -955,7 +1205,7 @@ Offical Discord Server! :3
<% if (isvidious) { %>
<% if (!qua) { %>
<a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" style="color: #fff;" target="_blank">
<a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" style="color: #fff;" target="_blank">
<i class="fa-light fa-arrow-up-right-from-square"></i> Open video in new tab
</a>
@ -992,6 +1242,12 @@ Offical Discord Server! :3
</div>
<div id="loopOption">
<i class="fa-light fa-repeat"> </i> Loop Video
</div>
<div id="muteOption">
<i class="fa-light fa-volume-xmark"> </i> Mute/Unmute
</div>
<div id="syncOption">
<i class="fa-light fa-rotate"> </i> Sync Audio/Video
</div>
<div id="speedOption">
<i class="fa-light fa-gauge"></i> Speed: 1.00x
@ -1010,14 +1266,23 @@ Offical Discord Server! :3
<i class="fa-brands fa-discord"></i> Discord Server</a>
</div>
</div>
<div id="<%=sha384(inv_vid.videoId)%>" class="video-player-container">
<video class="player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" autoplay controls>
<% if (!qua) { //TODO - a %>
<audio id="aud" preload>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=140&local=true" type="video/mp4"/>
</audio>
<% } else { %>
<audio id="aud"></audio>
<% } %>
<video class="player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" preload>
<% if (isvidious) { %>
<% if (!qua) { %>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=136&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<% } %>
<% if (qua === "medium") { %>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
@ -1027,7 +1292,7 @@ Offical Discord Server! :3
<% if (!isSchoolProxy) { %>
<% if (!isvidious) { %>
<% if (!qua) { %>
<source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/22" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<% } %>
<% if (qua === "medium") { %>
<source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
@ -1054,7 +1319,23 @@ Offical Discord Server! :3
<track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= %>" label="<%= video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">
<% } %>
</video>
<div id="controls"> <!-- TODO: CONTROLS -->
<button id="play-pause" class="control-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>
</button>
<div id="seekbar">
<input type="range" min="0" step="any" value="0" id="duration-slider">
</div>
<p id="timestamps">...</p>
<!--
<div>
<span>volume</span>
<input type="range" min="0" max="1" step="any" value="1" id="volume-slider">
</div>
-->
</div>
<% if (!a) { %>
<canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-1"></canvas>
<canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-2"></canvas>
@ -1084,6 +1365,7 @@ Offical Discord Server! :3
<a onclick="toggleTheaterMode()"" class="theather"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Theater</a>
<a onclick="document.documentElement.requestFullscreen()" class="theather"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Full screen</a>
<% if (inv.comments) { %>
<input type="checkbox" class="hj" id="j" style="display:none">
@ -2096,7 +2378,6 @@ const drawPause = () => {
}
const init = () => {
video.pause();video.play();
AMvideo.addEventListener("play", drawStart, false)
AMvideo.addEventListener("pause", drawPause, false)
AMvideo.addEventListener("ended", drawPause, false)
@ -2136,11 +2417,13 @@ window.addEventListener("unload", cleanup)
<!-- BUNDLE -->
<!-- BUNDLE -->
<!-- BUNDLE -->
<!-- BUNDLE --><script src="/static/app.bundle.js?version=08.05.2024&bundledate=080524_1657" > </script><!-- BUNDLE -->
<!-- BUNDLE --><script src="/static/app.bundle.js?version=08.05.2024&bundledate=080524_1657a" > </script><!-- BUNDLE -->
<!-- BUNDLE -->
<!-- BUNDLE -->
<!-- BUNDLE -->
<% if(secure) { %>
<% if(!dnt_val) { %>
@ -2401,7 +2684,7 @@ a {
<source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<% } %>
@ -3402,13 +3685,17 @@ if (userID) {
// Optionally, you can set a default href or display an error message.
}
const aud = document.getElementById("aud");
const vid = document.getElementById("video");
// Save and resume video progress
const videoId = new URLSearchParams(window.location.search).get('v');
const localStorageKey = `progress-${videoId}`;
function saveProgress() {
console.log(`Saved progress @ ${video.currentTime}`)
localStorage.setItem(localStorageKey, video.currentTime);
}
@ -3419,7 +3706,8 @@ function removeProgress() {
function resumeProgress() {
const progress = localStorage.getItem(localStorageKey);
if (progress) {
video.currentTime = progress;
aud.currentTime = progress;
vid.currentTime = progress;
}
}
@ -3430,6 +3718,7 @@ function resumeProgress() {
video.addEventListener('timeupdate', () => {
if (Math.floor(video.currentTime) % 1 === 0) {
saveProgress();
}
});
@ -3437,10 +3726,8 @@ video.addEventListener('timeupdate', () => {
video.addEventListener('ended', () => {
removeProgress();
});
window.addEventListener('load', () => {
resumeProgress();
});
window.addEventListener('DOMContentLoaded', () => {
throw 1;
</script>
@ -3457,6 +3744,7 @@ window.addEventListener('load', () => {
<% if (!optout) { %>
<script src="/static/data-mobile.js"></script>
<% } %>
</div>
</body>