Added video quality feature (#43)

* Fixed docker compose errors

* Added quality selector

* Remove log statement

Co-authored-by: Matthew Esposito <matt@matthew.science>

* Show kbps in quality

Co-authored-by: Matthew Esposito <matt@matthew.science>

* Make highest quality default

* Add styling, default option to highest

---------

Co-authored-by: Matthew Esposito <matt@matthew.science>
This commit is contained in:
Carbrex 2024-02-07 01:57:23 +05:30 committed by GitHub
parent fe6123e05f
commit c6030064f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 52 additions and 4 deletions

View File

@ -12,12 +12,11 @@ services:
read_only: true
security_opt:
- no-new-privileges:true
- seccomp="seccomp-redlib.json"
cap_drop:
- ALL
networks:
- redlib
security_opt:
- seccomp="seccomp-redlib.json"
healthcheck:
test: ["CMD", "wget", "--spider", "-q", "--tries=1", "http://localhost:8080/settings"]
interval: 5m

View File

@ -30,12 +30,21 @@
function initializeHls() {
newVideo.removeEventListener('play', initializeHls);
var hls = new Hls({ autoStartLoad: false });
hls.loadSource(playlist);
hls.attachMedia(newVideo);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
hls.loadLevel = hls.levels.length - 1;
var availableLevels = hls.levels.map(function(level) {
return {
height: level.height,
width: level.width,
bitrate: level.bitrate,
};
});
addQualitySelector(newVideo, hls, availableLevels);
hls.startLoad();
newVideo.play();
});
@ -61,6 +70,30 @@
});
}
function addQualitySelector(videoElement, hlsInstance, availableLevels) {
var qualitySelector = document.createElement('select');
qualitySelector.classList.add('quality-selector');
var last = availableLevels.length - 1;
availableLevels.forEach(function (level, index) {
var option = document.createElement('option');
option.value = index.toString();
var bitrate = (level.bitrate / 1_000).toFixed(0);
option.text = level.height + 'p (' + bitrate + ' kbps)';
if (index === last) {
option.selected = "selected";
}
qualitySelector.appendChild(option);
});
qualitySelector.selectedIndex = availableLevels.length - 1;
qualitySelector.addEventListener('change', function () {
var selectedIndex = qualitySelector.selectedIndex;
hlsInstance.nextLevel = selectedIndex;
hlsInstance.startLoad();
});
videoElement.parentNode.appendChild(qualitySelector);
}
newVideo.addEventListener('play', initializeHls);
if (autoplay) {

View File

@ -1714,3 +1714,19 @@ td, th {
justify-content: initial;
}
}
.quality-selector {
border: 2px var(--outside) solid;
margin-top: 8px;
float: right;
}
.quality-selector option {
background-color: var(--background);
color: var(--text);
}
.quality-selector option:hover {
background-color: var(--accent);
color: var(--text);
}