elm-twitch/index.html

138 lines
5.5 KiB
HTML
Raw Normal View History

2020-10-03 17:44:16 +01:00
<!doctype HTML>
<html>
<head>
<title>twitch.tforgione.fr</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
2020-11-05 16:23:42 +00:00
<link rel="icon" type="image/ico" href="/favicon.ico"/>
2021-05-29 14:38:59 +01:00
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.7/plyr.css" />
2020-10-04 20:09:13 +01:00
<link href="css/spinner.css" rel="stylesheet">
2021-05-29 14:38:59 +01:00
<style>
video, .plyr, .plyr__video-wrapper {
height: 100%;
max-height: 100%;
}
</style>
2020-10-03 17:44:16 +01:00
</head>
<body>
<div id="container"></div>
2021-05-29 14:38:59 +01:00
<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>
2020-10-03 17:44:16 +01:00
<script src="js/main.js"></script>
<script>
2021-05-29 14:38:59 +01:00
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;
}
});
}
}
}
}
);
2021-04-03 22:33:01 +01:00
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;
}
2020-10-04 15:37:01 +01:00
var app = Elm.Main.init({
2020-10-04 19:20:16 +01:00
node: document.getElementById('container'),
2021-04-03 22:33:01 +01:00
flags: {
width: window.innerWidth,
height: window.innerHeight,
darkMode: isDarkMode(),
darkSetting: JSON.parse(localStorage.getItem('darkMode'))
}
2020-10-03 17:44:16 +01:00
});
2020-10-04 15:37:01 +01:00
2021-05-29 14:38:59 +01:00
var lastId;
2020-10-04 20:31:16 +01:00
2021-04-03 22:33:01 +01:00
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);
2020-10-04 22:03:38 +01:00
}
2021-04-03 22:33:01 +01:00
app.ports.darkMode.send(isDarkMode());
2020-10-04 22:03:38 +01:00
});
2021-04-03 22:33:01 +01:00
}
2020-10-04 22:03:38 +01:00
}
2020-10-05 10:26:11 +01:00
2021-05-29 14:38:59 +01:00
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
app.ports.darkMode.send(isDarkMode(e));
});
2020-10-03 17:44:16 +01:00
</script>
</body>
</html>