w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show subtitles toggle & menu

Browse Source
This commit is contained in:
w33b
2026-07-29 22:12:51 +02:00
parent 6a9d3b25bf
commit f7c37df755
2 changed files with 61 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/player/player-core.js
+53 -10
View File
@@ -272,7 +272,7 @@ export class HStreamPlayer {
mainPanel.appendChild(addItem('Quality', this._qualityLabel(this._quality), 'quality'));
mainPanel.appendChild(addItem('Playback Speed', this._speedLabel(this.video.playbackRate), 'speed'));
if (this._subtitleTracks.length > 1) {
if (this._subtitleTracks.length >= 1) {
mainPanel.appendChild(addItem('Subtitles', this._captionLabel(), 'captions'));
}
@@ -436,6 +436,7 @@ export class HStreamPlayer {
}
item.type = 'button';
item.setAttribute('role', 'menuitemradio');
item.setAttribute('data-srclang', track.srclang);
item.innerHTML = `<span>${track.label}</span><span class="hstream-player__menu-item-radio"></span>`;
item.addEventListener('click', (e) => {
e.stopPropagation();
@@ -953,21 +954,21 @@ export class HStreamPlayer {
toggleCaptions() {
this._captionsActive = !this._captionsActive;
if (this.subtitleInstance && this.subtitleInstance.canvas) {
this.subtitleInstance.canvas.style.visibility = this._captionsActive ? 'visible' : 'hidden';
}
const libassParent = document.querySelector('.libassjs-canvas-parent');
if (libassParent) {
libassParent.style.visibility = this._captionsActive ? 'visible' : 'hidden';
}
if (this._captionsActive) {
this._captionsBtn.classList.add('hstream-player__button--active');
} else {
this._captionsBtn.classList.remove('hstream-player__button--active');
}
var libassParent = document.querySelector('.libassjs-canvas-parent');
if (libassParent) {
libassParent.style.visibility = this._captionsActive ? 'visible' : 'hidden';
} else if (this._captionsActive && this._onLanguageChange) {
this._onLanguageChange(this._captionLanguage);
}
localStorage.setItem('hstreamCaptions', this._captionsActive.toString());
this._updateCaptionsPanel();
if (this._onCaptionsToggle) {
this._onCaptionsToggle(this._captionsActive);
}
@@ -983,6 +984,7 @@ export class HStreamPlayer {
if (this._onLanguageChange) {
this._onLanguageChange(lang);
}
this._updateCaptionsPanel();
}
get captionLanguage() {
@@ -1062,6 +1064,43 @@ export class HStreamPlayer {
}
}
_updateCaptionsPanel() {
var captionsPanel = this._menuContainer.querySelector('[data-panel="captions"]');
if (!captionsPanel) return;
captionsPanel.querySelectorAll('.hstream-player__menu-item').forEach(function (item) {
item.classList.remove('hstream-player__menu-item--checked');
item.setAttribute('aria-checked', 'false');
});
if (!this._captionsActive) {
var offItem = captionsPanel.querySelector('.hstream-player__menu-item:not([data-srclang])');
if (offItem) {
offItem.classList.add('hstream-player__menu-item--checked');
offItem.setAttribute('aria-checked', 'true');
}
} else {
var langItem = captionsPanel.querySelector('.hstream-player__menu-item[data-srclang="' + this._captionLanguage + '"]');
if (langItem) {
langItem.classList.add('hstream-player__menu-item--checked');
langItem.setAttribute('aria-checked', 'true');
}
}
var mainPanel = this._menuContainer.querySelector('[data-panel="main"]');
if (mainPanel) {
var items = mainPanel.querySelectorAll('.hstream-player__menu-item');
for (var i = 0; i < items.length; i++) {
var text = items[i].textContent.trim();
if (text.startsWith('Subtitles')) {
var valueEl = items[i].querySelector('.hstream-player__menu-value');
if (valueEl) valueEl.textContent = this._captionLabel();
break;
}
}
}
}
get quality() {
return this._quality;
}
@@ -1070,6 +1109,10 @@ export class HStreamPlayer {
return !!document.fullscreenElement;
}
setSubtitleInstance(instance) {
this.subtitleInstance = instance;
}
toggleAmbientMode() {
this._ambientMode = !this._ambientMode;
localStorage.setItem('ambientMode', this._ambientMode.toString());
@@ -1202,7 +1245,7 @@ export class HStreamPlayer {
if (this._captionsActive) {
this._captionsBtn.classList.add('hstream-player__button--active');
}
if (this._subtitleTracks.length > 1) {
if (this._subtitleTracks.length >= 1) {
this._captionsBtn.style.display = '';
}