player improvements, moved js to separate file
Dominika
parent
a020493973
commit
3b8d4e7e2d
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
trailingComma: "es5",
|
||||
useTabs: true,
|
||||
semi: true,
|
||||
singleQuote: true,
|
||||
printWidth: 160
|
||||
};
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
var video = document.getElementById('player');
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
function updateTime() {
|
||||
v = document.querySelector('.html5-main-video');
|
||||
document.querySelector('.ytp-time-current').innerHTML =
|
||||
Math.floor(v.currentTime / 60) +
|
||||
':' +
|
||||
Math.floor(v.currentTime % 60)
|
||||
.toString()
|
||||
.padStart(2, '0');
|
||||
document.querySelector('.ytp-time-duration').innerHTML =
|
||||
Math.floor(v.duration / 60) +
|
||||
':' +
|
||||
Math.floor(v.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 + '%';
|
||||
}
|
||||
|
||||
function scrub(e) {
|
||||
w = document.querySelector('.ytp-progress-list').getBoundingClientRect();
|
||||
amount = (e.clientX - w.x) / w.width;
|
||||
video.currentTime = video.duration * amount;
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function volume(e) {
|
||||
v = document.querySelector('.ytp-volume-slider').getBoundingClientRect();
|
||||
amount = (e.clientX - v.x) / v.width;
|
||||
video.volume = amount;
|
||||
document.querySelector('.ytp-volume-slider-foreground').style.left = amount * 51 + 'px';
|
||||
icon = document.querySelector('.ytp-button-volume');
|
||||
if (amount == 0) {
|
||||
icon.dataset.value = 'off';
|
||||
} else if (amount < 0.2) {
|
||||
icon.dataset.value = 'min';
|
||||
} else if (amount < 0.4) {
|
||||
icon.dataset.value = 'quiet';
|
||||
} else if (amount < 0.6) {
|
||||
icon.dataset.value = 'normal';
|
||||
} else if (amount < 0.8) {
|
||||
icon.dataset.value = 'loud';
|
||||
} else {
|
||||
icon.dataset.value = 'max';
|
||||
}
|
||||
|
||||
// max, loud, normal, quiet, min, off
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
|
||||
if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.cancelFullScreen) {
|
||||
document.cancelFullScreen();
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
}
|
||||
} else {
|
||||
movie = document.getElementById('movie_player');
|
||||
|
||||
if (movie.requestFullscreen) {
|
||||
movie.requestFullscreen();
|
||||
} else if (movie.mozRequestFullScreen) {
|
||||
movie.mozRequestFullScreen();
|
||||
} else if (movie.webkitRequestFullscreen) {
|
||||
movie.webkitRequestFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toggleVideo();
|
||||
// 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());
|
||||
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());
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,26 +7,34 @@
|
|||
#done
|
||||
|
||||
if [[ ${get_data[v]} ]]; then
|
||||
video=$(youtube-dl -J "http://youtube.com/watch?v=${get_data[v]}")
|
||||
if [[ $video == '' ]]; then
|
||||
video=$(youtube-dl -J "http://youtube.com/watch?v=${get_data[v]}")
|
||||
if [[ $video == '' ]]; then
|
||||
return
|
||||
fi
|
||||
fi
|
||||
#echo "http://youtube.com/watch?v=${get_data[v]}" > /dev/stderr
|
||||
channel_id=$(echo $video | jq -r '.channel_url' | sed -s 's/http:\/\/www.youtube.com\/channel\///')
|
||||
uploader=$(echo $video | jq -r '.uploader')
|
||||
title=$(echo $video | jq -r '.title')
|
||||
meta[title]=$title
|
||||
source templates/head.sh
|
||||
IFS=$'\n'
|
||||
urls=($(echo $video | jq -r '.formats[] | select(.format_id == "22" or .format_id == "18").url'))
|
||||
unset IFS
|
||||
if [[ ${urls[1]} != '' ]]; then
|
||||
url=${urls[1]}
|
||||
if [[ ${get_data[v]} == '18l' || ${get_data[v]} == '5eFdt6Y_34E' ]]; then
|
||||
uploader='MyMusicGroup'
|
||||
title='█▬█ █ ▀█▀ Jeden Osiem L - Jak Zapomnieć (Oficjalny Teledysk)'
|
||||
url='http://sakamoto.pl/tmp/videoplayback_.webm'
|
||||
meta[title]=$title
|
||||
source templates/head.sh
|
||||
else
|
||||
url=${urls[0]}
|
||||
video=$(youtube-dl -J "http://youtube.com/watch?v=${get_data[v]}")
|
||||
if [[ $video == '' ]]; then
|
||||
video=$(youtube-dl -J "http://youtube.com/watch?v=${get_data[v]}")
|
||||
if [[ $video == '' ]]; then
|
||||
return
|
||||
fi
|
||||
fi
|
||||
#echo "http://youtube.com/watch?v=${get_data[v]}" > /dev/stderr
|
||||
channel_id=$(echo $video | jq -r '.channel_url' | sed -s 's/http:\/\/www.youtube.com\/channel\///')
|
||||
uploader=$(echo $video | jq -r '.uploader')
|
||||
title=$(echo $video | jq -r '.title')
|
||||
meta[title]=$title
|
||||
source templates/head.sh
|
||||
IFS=$'\n'
|
||||
urls=($(echo $video | jq -r '.formats[] | select(.format_id == "22" or .format_id == "18").url'))
|
||||
unset IFS
|
||||
if [[ ${urls[1]} != '' ]]; then
|
||||
url=${urls[1]}
|
||||
else
|
||||
url=${urls[0]}
|
||||
fi
|
||||
fi
|
||||
echo "<form action='search.shs'>
|
||||
<input name='q' type='text'>
|
||||
|
|
@ -96,35 +104,7 @@ if [[ ${get_data[v]} ]]; then
|
|||
done
|
||||
fi
|
||||
|
||||
echo "<script type='text/javascript'>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
var video = document.getElementById('player');
|
||||
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();
|
||||
}
|
||||
}
|
||||
function updateTime() {
|
||||
v = document.querySelector('.html5-main-video');
|
||||
document.querySelector('.ytp-time-current').innerHTML = Math.round(v.currentTime/60)+':'+Math.round(v.currentTime%60).toString().padStart(2, '0');
|
||||
document.querySelector('.ytp-time-duration').innerHTML = Math.round(v.duration/60)+':'+Math.round(v.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+'%';
|
||||
}
|
||||
toggleVideo();
|
||||
// document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo());
|
||||
document.querySelector('.ytp-button-pause').addEventListener('click', () => toggleVideo());
|
||||
document.querySelector('.html5-main-video').addEventListener('timeupdate', () => updateTime());
|
||||
});
|
||||
</script>"
|
||||
echo "<script type='text/javascript' src='js/player.js'></script>"
|
||||
else
|
||||
source templates/head.sh
|
||||
echo "pls add ?v param i'm still WiP"
|
||||
|
|
|
|||
Loading…
Reference in New Issue