138 lines
5.5 KiB
HTML
138 lines
5.5 KiB
HTML
<!doctype HTML>
|
|
<html>
|
|
<head>
|
|
<title>twitch.tforgione.fr</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/ico" href="/favicon.ico"/>
|
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.7/plyr.css" />
|
|
<link href="css/spinner.css" rel="stylesheet">
|
|
<style>
|
|
video, .plyr, .plyr__video-wrapper {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container"></div>
|
|
<script src="https://cdn.plyr.io/3.6.7/plyr.polyfilled.js"></script>
|
|
<script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
customElements.define('plyr-video',
|
|
class PlyrVideo extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.videoElement = document.createElement('video');
|
|
this.videoElement.setAttribute('controls', 'true');
|
|
}
|
|
|
|
static get observedAttributes() { return []; }
|
|
|
|
connectedCallback() {
|
|
this.appendChild(this.videoElement)
|
|
|
|
const hls = new Hls();
|
|
hls.loadSource(this.getAttribute('src'));
|
|
|
|
hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
|
|
|
|
// Transform available levels into an array of integers (height values).
|
|
const availableQualities = hls.levels.map((l) => l.height);
|
|
availableQualities.unshift(0);
|
|
|
|
// Initialize here
|
|
new Plyr(this.videoElement, {
|
|
quality: {
|
|
default: 0,
|
|
options: availableQualities,
|
|
// this ensures Plyr to use Hls to update quality level
|
|
forced: true,
|
|
onChange: updateQuality,
|
|
debug: true,
|
|
},
|
|
fullscreen: {
|
|
enabled: true,
|
|
fallback: true,
|
|
},
|
|
});
|
|
});
|
|
|
|
hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
|
|
var span = document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span");
|
|
if (hls.autoLevelEnabled) {
|
|
span.innerHTML = "Auto (" + hls.levels[data.level].height + "p)";
|
|
} else {
|
|
span.innerHTML = "Auto";
|
|
}
|
|
var x = document.querySelectorAll(".plyr__menu__container [data-plyr='settings'] span")[3];
|
|
if (x.innerHTML.startsWith("Auto") || x.innerHTML === "0p") {
|
|
x.innerHTML = span.innerHTML;
|
|
}
|
|
})
|
|
|
|
hls.attachMedia(this.videoElement);
|
|
|
|
function updateQuality(newQuality) {
|
|
if (newQuality === 0) {
|
|
hls.currentLevel = -1;
|
|
} else {
|
|
hls.levels.forEach((level, levelIndex) => {
|
|
if (level.height === newQuality) {
|
|
hls.currentLevel = levelIndex;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
function isDarkMode(e) {
|
|
var darkMode = JSON.parse(localStorage.getItem('darkMode'));
|
|
|
|
if (darkMode === null) {
|
|
if (e === undefined) {
|
|
e = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
|
|
}
|
|
|
|
darkMode = e.matches === true;
|
|
}
|
|
|
|
return darkMode;
|
|
}
|
|
|
|
var app = Elm.Main.init({
|
|
node: document.getElementById('container'),
|
|
flags: {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
darkMode: isDarkMode(),
|
|
darkSetting: JSON.parse(localStorage.getItem('darkMode'))
|
|
}
|
|
});
|
|
|
|
var lastId;
|
|
|
|
if (app.ports !== undefined) {
|
|
if (app.ports.setDarkMode !== undefined) {
|
|
app.ports.setDarkMode.subscribe(function(arg) {
|
|
if (arg === null) {
|
|
localStorage.removeItem('darkMode');
|
|
} else {
|
|
localStorage.setItem('darkMode', arg);
|
|
}
|
|
app.ports.darkMode.send(isDarkMode());
|
|
});
|
|
}
|
|
}
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
|
|
app.ports.darkMode.send(isDarkMode(e));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|