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

Bugfix: Update Markers to % Base Calc (#6323)

Browse source 
* update to % base calc
* add min-width
This commit is contained in:
Gykes 2025-11-26 21:57:57 -06:00 committed by GitHub
parent f811590021
commit 4ef3a605dd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -142,18 +142,23 @@ 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";
// start/end percent is relative to the parent element, which is the vjs-progress-control // Use percentage-based positioning for proper scaling in fullscreen mode
// vjs-progress-control has 15px margins on each side // The range marker is inside vjs-progress-control, but needs to align with
const left = seekBar.clientWidth * (marker.seconds / duration) + 15; // vjs-progress-holder which has 15px margins on each side.
// We use calc() to combine percentage positioning with the fixed margin offset.
const startPercent = (marker.seconds / duration) * 100;
const widthPercent =
((marker.end_seconds - marker.seconds) / duration) * 100;
// minimum width of 8px // left: 15px margin + percentage of the progress holder width
const width = Math.max( // Since progress-holder has margin: 0 15px, we need calc(15px + X% of remaining width)
seekBar.clientWidth * ((marker.end_seconds - marker.seconds) / duration), // The progress-holder width is (100% - 30px), so the actual left position is:
8 // 15px + startPercent% * (100% - 30px) = 15px + startPercent% * 100% - startPercent% * 30px
); rangeDiv.style.left = `calc(15px + ${startPercent}% - ${
startPercent * 0.3
}px)`;
rangeDiv.style.left = `${left}px`; rangeDiv.style.width = `calc(${widthPercent}% - ${widthPercent * 0.3}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

1
ui/v2.5/src/components/ScenePlayer/styles.scss
View file

@ -271,6 +271,7 @@ $sceneTabWidth: 450px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
height: 8px; height: 8px;
min-width: 8px;
position: absolute; position: absolute;
transform: translateY(-28px); transform: translateY(-28px);
transition: none; transition: none;