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

Revert dot marker styling changes (#5801)

Browse source 
* Move marker css into styles

Removes vjs-marker-dot styling, using existing vjs-marker class instead

* Revert dot marker changes
This commit is contained in:
WithoutPants 2025-04-02 16:13:54 +11:00 committed by GitHub
parent 6ed66f3275
commit 8efae13afb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/v2.5/src/components/ScenePlayer/markers.css
View file

@ -1,27 +0,0 @@
.vjs-marker-dot {
position: absolute;
background-color: #10b981;
width: 8px;
height: 8px;
border-radius: 50%;
cursor: pointer;
z-index: 2;
transform: translate(-50%, -50%);
top: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.vjs-marker-dot:hover {
transform: translate(-50%, -50%) scale(1.2);
}
.vjs-marker-range {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
height: 8px;
border-radius: 2px;
transform: translateY(-28px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: none;
}

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

@ -1,5 +1,4 @@
import videojs, { VideoJsPlayer } from "video.js"; import videojs, { VideoJsPlayer } from "video.js";
import "./markers.css";
import CryptoJS from "crypto-js"; import CryptoJS from "crypto-js";
export interface IMarker { export interface IMarker {
@ -67,14 +66,16 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
dot?: HTMLDivElement; dot?: HTMLDivElement;
range?: HTMLDivElement; range?: HTMLDivElement;
} = {}; } = {};
const seekBar = this.player.el().querySelector(".vjs-progress-control"); const seekBar = this.player.el().querySelector(".vjs-progress-holder");
markerSet.dot = videojs.dom.createEl("div") as HTMLDivElement; markerSet.dot = videojs.dom.createEl("div") as HTMLDivElement;
markerSet.dot.className = "vjs-marker-dot"; markerSet.dot.className = "vjs-marker";
if (duration) { if (duration) {
// marker is 6px wide - adjust by 3px to align to center not left side
markerSet.dot.style.left = `calc(${ markerSet.dot.style.left = `calc(${
(marker.seconds / duration) * 100 (marker.seconds / duration) * 100
}% - 3px)`; }% - 3px)`;
markerSet.dot.style.visibility = "visible";
} }
// Add event listeners to dot // Add event listeners to dot

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

@ -266,6 +266,16 @@ $sceneTabWidth: 450px;
} }
} }
.vjs-marker-range {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 2px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
height: 8px;
position: absolute;
transform: translateY(-28px);
transition: none;
}
.vjs-marker-tooltip { .vjs-marker-tooltip {
background-color: #fff; background-color: #fff;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);