Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-06 16:34:02 +01:00
Code Issues Projects Releases Wiki Activity

Fix range marker alignment (#5804)

Browse source
This commit is contained in:
WithoutPants 2025-04-04 15:32:52 +11:00 committed by GitHub
parent e774706f43
commit 87d01e86fd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
ui/v2.5/src/components/ScenePlayer/markers.ts
View file

@ -111,11 +111,12 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
private renderRangeMarkers(markers: IMarker[], layer: number) { private renderRangeMarkers(markers: IMarker[], layer: number) {
const duration = this.player.duration(); const duration = this.player.duration();
const seekBar = this.player.el().querySelector(".vjs-progress-control"); const parent = this.player.el().querySelector(".vjs-progress-control");
if (!seekBar || !duration) return; const seekBar = this.player.el().querySelector(".vjs-progress-holder");
if (!seekBar || !parent || !duration) return;
markers.forEach((marker) => { markers.forEach((marker) => {
this.renderRangeMarker(marker, layer, duration, seekBar); this.renderRangeMarker(marker, layer, duration, seekBar, parent);
}); });
} }
@ -123,7 +124,8 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
marker: IMarker, marker: IMarker,
layer: number, layer: number,
duration: number, duration: number,
seekBar: Element seekBar: Element,
parent: Element
) { ) {
if (!marker.end_seconds) return; if (!marker.end_seconds) return;
@ -134,16 +136,18 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
const rangeDiv = videojs.dom.createEl("div") as HTMLDivElement; const rangeDiv = videojs.dom.createEl("div") as HTMLDivElement;
rangeDiv.className = "vjs-marker-range"; rangeDiv.className = "vjs-marker-range";
const startPercent = (marker.seconds / duration) * 100; // start/end percent is relative to the parent element, which is the vjs-progress-control
const endPercent = (marker.end_seconds / duration) * 100; // vjs-progress-control has 15px margins on each side
let width = endPercent - startPercent; const left = seekBar.clientWidth * (marker.seconds / duration) + 15;
// Ensure the width is at least 8px
const minWidth = (10 / seekBar.clientWidth) * 100; // Convert 8px to percentage // minimum width of 8px
if (width < minWidth) { const width = Math.max(
width = minWidth; seekBar.clientWidth * ((marker.end_seconds - marker.seconds) / duration),
} 8
rangeDiv.style.left = `${startPercent}%`; );
rangeDiv.style.width = `${width}%`;
rangeDiv.style.left = `${left}px`;
rangeDiv.style.width = `${width}px`;
rangeDiv.style.bottom = `${layer * this.layerHeight}px`; // Adjust height based on layer rangeDiv.style.bottom = `${layer * this.layerHeight}px`; // Adjust height based on layer
rangeDiv.style.display = "none"; // Initially hidden rangeDiv.style.display = "none"; // Initially hidden
@ -172,7 +176,7 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
this.hideMarkerTooltip(); this.hideMarkerTooltip();
markerSet.range?.toggleAttribute("marker-tooltip-shown", false); markerSet.range?.toggleAttribute("marker-tooltip-shown", false);
}); });
seekBar.appendChild(rangeDiv); parent.appendChild(rangeDiv);
this.markers.push(marker); this.markers.push(marker);
this.markerDivs.push(markerSet); this.markerDivs.push(markerSet);
} }