Lightbox: Prevent flickering when playing animations #1307 photoprism#3372 photoprism#4698

lastzero · lastzero · commit b6cd4b765e81 · 2025-02-12T18:32:46.000+01:00
Signed-off-by: Michael Mayer &lt;michael@photoprism.app&gt;
diff --git a/frontend/src/css/lightbox.css b/frontend/src/css/lightbox.css
@@ -145,20 +145,24 @@
 
 .pswp__media.is-broken .pswp__image,
 .pswp__media.pswp__media--live .pswp__image,
+.pswp__media.pswp__media--animated .pswp__image,
 .pswp__media.pswp__media--image .pswp__image {
     visibility: visible;
 }
 
 .pswp__media.is-broken .pswp__video,
 .pswp__media.pswp__media--live .pswp__video,
+.pswp__media.pswp__media--animated .pswp__video,
 .pswp__media.pswp__media--image .pswp__video {
     visibility: hidden;
 }
 
+.pswp__media.pswp__media--animated.is-playing .pswp__image,
 .pswp__media.pswp__media--live.is-playing .pswp__image {
     visibility: hidden;
 }
 
+.pswp__media.pswp__media--animated.is-playing .pswp__video,
 .pswp__media.pswp__media--live.is-playing .pswp__video {
     visibility: visible;
 }

Original file line number	Diff line number	Diff line change
`@@ -145,20 +145,24 @@`
`145`	`145`
`146`	`146`	`.pswp__media.is-broken .pswp__image,`
`147`	`147`	`.pswp__media.pswp__media--live .pswp__image,`
	`148`	`+.pswp__media.pswp__media--animated .pswp__image,`
`148`	`149`	`.pswp__media.pswp__media--image .pswp__image {`
`149`	`150`	`visibility: visible;`
`150`	`151`	`}`
`151`	`152`
`152`	`153`	`.pswp__media.is-broken .pswp__video,`
`153`	`154`	`.pswp__media.pswp__media--live .pswp__video,`
	`155`	`+.pswp__media.pswp__media--animated .pswp__video,`
`154`	`156`	`.pswp__media.pswp__media--image .pswp__video {`
`155`	`157`	`visibility: hidden;`
`156`	`158`	`}`
`157`	`159`
	`160`	`+.pswp__media.pswp__media--animated.is-playing .pswp__image,`
`158`	`161`	`.pswp__media.pswp__media--live.is-playing .pswp__image {`
`159`	`162`	`visibility: hidden;`
`160`	`163`	`}`
`161`	`164`
	`165`	`+.pswp__media.pswp__media--animated.is-playing .pswp__video,`
`162`	`166`	`.pswp__media.pswp__media--live.is-playing .pswp__video {`
`163`	`167`	`visibility: visible;`
`164`	`168`	`}`