mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-29 15:09:01 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

TEST IGNORE

Browse source
This commit is contained in:
ashley 2024-06-26 14:54:34 +00:00
parent b6dda9ac2d
commit 5adb35ad94
1 changed files with 142 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
html/poketube.ejs
View file

@ -1011,10 +1011,8 @@ Offical Discord Server! :3
</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>
<video class="player video-ambient-container" id="videoPlayer" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" autoplay controls>
<% if (isvidious) { %>
<% if (!qua) { %>
<source src="<%= u %>/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">
@ -1045,7 +1043,7 @@ Offical Discord Server! :3
<% } %>
<% if (Array.isArray(inv_vid.captions)) { %>
<% inv_vid.captions?.forEach(x => { %>
<% inv_vid.captions.forEach(x => { %>
<track src="/api/subtitles?v=<%= inv_vid.videoId %>&h=<%= x.label %>" label="<%= x.label.replace("United States", "Simplified - USA") %>" kind="subtitles">
<% }) %>
<% } %>
@ -1055,6 +1053,113 @@ Offical Discord Server! :3
<% } %>
</video>
<!-- Custom Video Player Controls -->
<div class="custom-controls">
<button id="playPauseBtn" class="control-btn" aria-label="Play"><i class="fal fa-play fa-lg"></i></button>
<div class="time-display">
<span id="currentTime">0:00</span> / <span id="totalTime">0:00</span>
</div>
<input id="volumeControl" type="range" min="0" max="1" step="0.01" value="1">
</div>
</div>
<!-- Custom CSS for Video Player -->
<style>
.video-player-container {
position: relative;
width: 100%;
max-width: 640px; /* Adjust as needed */
margin: 0 auto; /* Center horizontally */
overflow: hidden;
}
.player {
width: 100%;
height: auto;
}
.custom-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
border-top: 1px solid #444;
}
.control-btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
outline: none;
}
.control-btn:hover {
opacity: 0.7;
}
.time-display {
display: flex;
align-items: center;
color: #fff;
font-size: 0.9em;
}
.time-display span {
margin: 0 5px;
}
/* Adjust other styles as needed */
</style>
<!-- Custom JavaScript for Video Player -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const video = document.getElementById('videoPlayer');
const playPauseBtn = document.getElementById('playPauseBtn');
const volumeControl = document.getElementById('volumeControl');
const currentTimeDisplay = document.getElementById('currentTime');
const totalTimeDisplay = document.getElementById('totalTime');
const seekbar = document.getElementById('seekbar');
// Play/Pause functionality
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.innerHTML = '<i class="fal fa-pause fa-lg"></i>';
} else {
video.pause();
playPauseBtn.innerHTML = '<i class="fal fa-play fa-lg"></i>';
}
});
// Synchronize controls with video
video.addEventListener('timeupdate', () => {
currentTimeDisplay.textContent = formatTime(video.currentTime);
totalTimeDisplay.textContent = formatTime(video.duration);
});
// Volume control
volumeControl.addEventListener('input', () => {
video.volume = volumeControl.value;
});
// Seekbar functionality
seekbar.addEventListener('input', () => {
const seekTo = (seekbar.value / 100) * video.duration;
video.currentTime = seekTo;
});
// Format time helper function
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}
});
</script>
<% 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>
@ -1893,6 +1998,7 @@ inv_vid?.recommendedVideos.forEach(video => {
<!-- SCRIPTS -->
<!-- AUTOPLAY -->
<script>
function removeParam(paramName) {