cosmo/dh-stream-overlay
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

Enhance carousel transitions with customizable duration and an option to disable fade for the slide effect.

Browse source
This commit is contained in:
CPTN Cosmo 2026-01-24 15:41:04 +01:00
parent bf1f956f2b
commit 43a7ef4f54
No known key found for this signature in database
4 changed files with 51 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

45
scripts/module.js
View file

@ -263,6 +263,27 @@ Hooks.once("init", () => {
onChange: () => { if (document.body.classList.contains("stream")) location.reload(); }
});
game.settings.register("dh-stream-overlay", "carouselDisableFade", {
name: "DH_STREAM_OVERLAY.Settings.CarouselDisableFade",
hint: "DH_STREAM_OVERLAY.Settings.CarouselDisableFadeHint",
scope: "world",
config: true,
type: Boolean,
default: false,
onChange: () => { if (document.body.classList.contains("stream")) location.reload(); }
});
game.settings.register("dh-stream-overlay", "carouselTransitionDuration", {
name: "DH_STREAM_OVERLAY.Settings.CarouselTransitionDuration",
hint: "DH_STREAM_OVERLAY.Settings.CarouselTransitionDurationHint",
scope: "world",
config: true,
type: Number,
default: 800,
range: { min: 200, max: 5000, step: 100 },
onChange: () => { if (document.body.classList.contains("stream")) location.reload(); }
});
game.settings.register("dh-stream-overlay", "carouselGMMode", {
name: "DH_STREAM_OVERLAY.Settings.CarouselGMMode",
hint: "DH_STREAM_OVERLAY.Settings.CarouselGMModeHint",
@ -1118,6 +1139,13 @@ function injectStyles() {
const useGreen = game.settings.get("dh-stream-overlay", "useGreenScreen");
const autoExpand = game.settings.get("dh-stream-overlay", "autoExpandChat");
const hideActions = game.settings.get("dh-stream-overlay", "hideChatActions");
// New Carousel Settings
const carouselEffect = game.settings.get("dh-stream-overlay", "carouselEffect");
const disableFade = game.settings.get("dh-stream-overlay", "carouselDisableFade"); // Only applies if Slide usually
const transitionDuration = game.settings.get("dh-stream-overlay", "carouselTransitionDuration") || 800;
const durationSec = transitionDuration / 1000;
const bgColor = useGreen ? "#00ff00" : "rgba(0, 0, 0, 0)";
const style = document.createElement("style");
@ -1662,10 +1690,17 @@ function injectStyles() {
.dh-party-grid.carousel-mode .dh-party-card {
grid-area: 1 / 1 / -1 / -1; /* Stack on top of each other */
opacity: 0;
/* Default State (Hidden/Exiting) */
${(disableFade && carouselEffect === 'slide') ? 'opacity: 1;' : 'opacity: 0;'}
visibility: hidden;
/* TRANSITION FIX: Delay visibility hide so it fades out first */
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out, visibility 0s linear 0.8s;
/* If Fade Disabled, we still need transition for Transform */
transition: ${(disableFade && carouselEffect === 'slide') ?
`transform ${durationSec}s ease-in-out, visibility 0s linear ${durationSec}s` :
`opacity ${durationSec}s ease-in-out, transform ${durationSec}s ease-in-out, visibility 0s linear ${durationSec}s`};
pointer-events: none;
width: 100%;
max-width: 600px; /* Constrain width in carousel */
@ -1677,7 +1712,9 @@ function injectStyles() {
opacity: 1;
visibility: visible;
/* Show immediately */
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out, visibility 0s linear;
transition: ${(disableFade && carouselEffect === 'slide') ?
`transform ${durationSec}s ease-in-out, visibility 0s linear` :
`opacity ${durationSec}s ease-in-out, transform ${durationSec}s ease-in-out, visibility 0s linear`};
pointer-events: auto;
z-index: 10;
transform: none;
@ -1689,7 +1726,7 @@ function injectStyles() {
/* Slide */
.dh-party-grid.carousel-mode.effect-slide .dh-party-card {
transform: translateX(50px);
transform: translateX(120%);
}
.dh-party-grid.carousel-mode.effect-slide .dh-party-card.active-slide {
transform: translateX(0);