Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 12:54:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Player mobile improvements (#3120)

Browse Source 
* Add videojs-mobile-ui
* Prevent marker wrapping and fix alignment
* Fix marker update on delete
* Change hotkey modifier behaviour
* Update KeyboardShortcuts.md
This commit is contained in:
DingDongSoLong4
2022-11-23 06:55:24 +02:00
committed by GitHub
parent b175f1865f
commit 821587b166
12 changed files with 268 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ui/v2.5/src/components/ScenePlayer/markers.ts
View File

@@ -48,7 +48,13 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
const marker = this.markers[i];
const markerDiv = this.markerDivs[i];
markerDiv.style.left = `${(marker.time / duration) * 100}%`;
if (duration) {
// marker is 6px wide - adjust by 3px to align to center not left side
markerDiv.style.left = `calc(${
(marker.time / duration) * 100
}% - 3px)`;
markerDiv.style.visibility = "visible";
}
if (seekBar) seekBar.appendChild(markerDiv);
}
});
@@ -58,6 +64,7 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
if (!this.markerTooltip) return;
this.markerTooltip.innerText = title;
this.markerTooltip.style.right = `${-this.markerTooltip.clientWidth / 2}px`;
this.markerTooltip.style.visibility = "visible";
// hide default tooltip
@@ -76,7 +83,11 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
markerDiv.className = "vjs-marker";
const duration = this.player.duration();
markerDiv.style.position = `${(marker.time / duration) * 100}%`;
if (duration) {
// marker is 6px wide - adjust by 3px to align to center not left side
markerDiv.style.left = `calc(${(marker.time / duration) * 100}% - 3px)`;
markerDiv.style.visibility = "visible";
}
// bind click event to seek to marker time
markerDiv.addEventListener("click", () =>
@@ -122,7 +133,7 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
}
clearMarkers() {
this.removeMarkers(this.markers);
this.removeMarkers([...this.markers]);
}
}