From c4757e3657d3386159e41e7531d69a7b303b96d7 Mon Sep 17 00:00:00 2001 From: Lauren Liberda Date: Sun, 14 Mar 2021 01:10:43 +0100 Subject: [PATCH] player that is very buggy but supports formats others than 18 --- webroot/js/player.js | 136 +++++++++++++++++++++++++++++++++---------- webroot/player.shs | 3 +- webroot/watch.shs | 7 ++- 3 files changed, 110 insertions(+), 36 deletions(-) diff --git a/webroot/js/player.js b/webroot/js/player.js index af7b299..07cb001 100644 --- a/webroot/js/player.js +++ b/webroot/js/player.js @@ -1,58 +1,78 @@ window.addEventListener('DOMContentLoaded', (event) => { - var video = document.getElementById('player'); + const video = document.getElementById('player_video'); + const audio = document.getElementById('player_audio'); if (localStorage.getItem("volume") != null) { setVolume(localStorage.getItem("volume")); } - function toggleVideo() { - if (video.paused) { - const classList = document.querySelector('.ytp-button-play').classList; - classList.remove('ytp-button-play'); - classList.add('ytp-button-pause'); - return video.play(); - } else { - const classList = document.querySelector('.ytp-button-pause').classList; - classList.remove('ytp-button-pause'); - classList.add('ytp-button-play'); - return video.pause(); + const playButton = document.querySelector('.ytp-button[aria-label="Play"]'); + function toggleVideo(play) { + const { classList } = playButton; + const shouldPlay = typeof play === 'boolean' ? play : video.paused; + try { + if (shouldPlay) { + classList.remove('ytp-button-play'); + classList.add('ytp-button-pause'); + if (video.ended) { + video.currentTime = 0; + audio.currentTime = 0; + } + video.play(); + if (audio.src) { + audio.play(); + } + } else { + classList.remove('ytp-button-pause'); + classList.add('ytp-button-play'); + video.pause(); + if (audio.src) { + audio.pause(); + } + } + } catch (e) { + console.error(e); } } function updateTime() { - v = document.querySelector('.html5-main-video'); document.querySelector('.ytp-time-current').innerHTML = - Math.floor(v.currentTime / 60) + + Math.floor(video.currentTime / 60) + ':' + - Math.floor(v.currentTime % 60) + Math.floor(video.currentTime % 60) .toString() .padStart(2, '0'); document.querySelector('.ytp-time-duration').innerHTML = - Math.floor(v.duration / 60) + + Math.floor(video.duration / 60) + ':' + - Math.floor(v.duration % 60) + Math.floor(video.duration % 60) .toString() .padStart(2, '0'); - document.querySelector('.ytp-play-progress').style.transform = 'scaleX(' + v.currentTime / v.duration + ')'; - document.querySelector('.html5-scrubber-button').style.left = (v.currentTime / v.duration) * 100 + '%'; + document.querySelector('.ytp-play-progress').style.transform = 'scaleX(' + video.currentTime / video.duration + ')'; + document.querySelector('.html5-scrubber-button').style.left = (video.currentTime / video.duration) * 100 + '%'; } function scrub(e) { - w = document.querySelector('.ytp-progress-list').getBoundingClientRect(); - amount = (e.clientX - w.x) / w.width; + const w = document.querySelector('.ytp-progress-list').getBoundingClientRect(); + const amount = (e.clientX - w.x) / w.width; video.currentTime = video.duration * amount; + audio.currentTime = audio.duration * amount; console.log(e); } function volume(e) { - v = document.querySelector('.ytp-volume-slider').getBoundingClientRect(); - amount = (e.clientX - v.x) / v.width; - setVolume(amount) - localStorage.setItem("volume", video.volume); + const v = document.querySelector('.ytp-volume-slider').getBoundingClientRect(); + const amount = (e.clientX - v.x) / v.width; + setVolume(amount); } function setVolume(amount) { - video.volume = amount; + if (audio.src) { + audio.volume = amount; + } else { + video.volume = amount; + } document.querySelector('.ytp-volume-slider-foreground').style.left = amount * 51 + 'px'; - icon = document.querySelector('.ytp-button-volume'); + localStorage.setItem("volume", video.volume); + const icon = document.querySelector('.ytp-button-volume'); if (amount == 0) { icon.dataset.value = 'off'; } else if (amount < 0.2) { @@ -90,14 +110,66 @@ window.addEventListener('DOMContentLoaded', (event) => { } } - toggleVideo(); + const formats = JSON.parse(document.getElementById('yt_formats').innerText) + .filter((fmt) => !['m3u8'].includes(fmt.protocol)) + .sort((a, b) => { + if (a.vcodec === 'none' && b.vcodec !== 'none') { + return -1; + } + if (a.vcodec !== 'none' && b.vcodec === 'none') { + return 1; + } + if (a.vcodec !== 'none' && b.vcodec !== 'none') { + return b.width - a.height; + } + if (a.acodec !== 'none' && b.acodec !== 'none') { + return b.abr - a.abr; + } + }); + console.log(formats); + const videoFormat = formats.find((fmt) => fmt.vcodec !== 'none'); + const audioFormat = videoFormat.acodec === 'none' ? formats.find((fmt) => fmt.acodec !== 'none') : null; + + video.src = videoFormat.url; + if (audioFormat) { + audio.src = audioFormat.url; + } + // document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo()); - document.querySelector('.ytp-button-pause').addEventListener('click', () => toggleVideo()); - document.getElementById('player').addEventListener('click', () => toggleVideo()); - document.getElementById('player').addEventListener('dblclick', () => toggleFullscreen()); - document.querySelector('.html5-main-video').addEventListener('timeupdate', () => updateTime()); + playButton.addEventListener('click', () => toggleVideo()); + video.addEventListener('click', () => toggleVideo()); + video.addEventListener('dblclick', () => toggleFullscreen()); + let videoWaiting = false; + let audioWaiting = false; + video.addEventListener('waiting', () => { + toggleVideo(false); + videoWaiting = true; + }); + video.addEventListener('playing', () => { + videoWaiting = false; + console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`); + if (!audioWaiting) { + toggleVideo(true); + } + }); + audio.addEventListener('waiting', () => { + toggleVideo(false); + audioWaiting = true; + }); + audio.addEventListener('playing', () => { + audioWaiting = false; + console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`); + if (!videoWaiting) { + toggleVideo(true); + } + }); + video.addEventListener('timeupdate', () => updateTime()); + video.addEventListener('ended', () => toggleVideo(false)); // just to change the classes document.querySelector('.ytp-progress-list').addEventListener('click', (e) => scrub(e)); // document.querySelector('.ytp-play-progress').addEventListener('click', (e) => scrub(e)); document.querySelector('.ytp-volume-slider').addEventListener('click', (e) => volume(e)); document.querySelector('.ytp-button-fullscreen-enter').addEventListener('click', () => toggleFullscreen()); + + // autoplay + toggleVideo(true); }); diff --git a/webroot/player.shs b/webroot/player.shs index b43dca3..ade4f5f 100755 --- a/webroot/player.shs +++ b/webroot/player.shs @@ -9,5 +9,6 @@ echo ' height: 480px; } -
[x]
Video ID:
Dimensions:
Resolution:
Volume:
Stream Type:
CPN:
Mime Type:
DASH:
Protected:
Bandwidth:
Decoded FramesDropped FramesParsed FramesPresented Frames
Video Bytes DecodedAudio Bytes DecodedPainted FramesPaint Delay
0:00
Me at the zoo
+
[x]
Video ID:
Dimensions:
Resolution:
Volume:
Stream Type:
CPN:
Mime Type:
DASH:
Protected:
Bandwidth:
Decoded FramesDropped FramesParsed FramesPresented Frames
Video Bytes DecodedAudio Bytes DecodedPainted FramesPaint Delay
0:00
Me at the zoo
+ ' diff --git a/webroot/watch.shs b/webroot/watch.shs index debb382..c3c5e29 100755 --- a/webroot/watch.shs +++ b/webroot/watch.shs @@ -32,6 +32,10 @@ if [[ "${get_data[v]}" ]]; then meta[title]="${strings[title]}" source templates/head.sh fi + formats=$(jq '.formats' <<< "$video") + fi + + if [[ "${r[host]}" == "${cfg[flash_host]}" ]]; then IFS=$'\n' urls=($(jq -r '.formats[] | select(.format_id == "22" or .format_id == "18").url' <<< "$video")) unset IFS @@ -40,9 +44,6 @@ if [[ "${get_data[v]}" ]]; then else url=${urls[0]} fi - fi - - if [[ "${r[host]}" == "${cfg[flash_host]}" ]]; then strings[player]=$(source "${cfg[namespace]}/webroot/player_flash.shs") else strings[player]=$(source "${cfg[namespace]}/webroot/player.shs")