Merge branch 'master' into stable24

src/components/PsVideo.ts

@@ -213,13 +213,13 @@ class VideoContentSetup {
     content.videojs.on("loadedmetadata", () => {
       canPlay = true;
       this.updateRotation(content); // also gets the correct video elem as a side effect
-      this.initPlyr(content);
+
+      // Wait (also below) for the transition to end
+      window.setTimeout(() => this.initPlyr(content), 250);
     });
 
     content.videojs.qualityLevels()?.on("addqualitylevel", (e) => {
-      window.setTimeout(() => {
-        this.initPlyr(content);
-      }, 0);
+      window.setTimeout(() => this.initPlyr(content), 250);
     });
 
     // Get correct orientation

src/components/SelectionManager.vue

@@ -298,7 +298,6 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
     this.rows[rowIdx].virtualSticky = true;
 
     this.resetTouchParams();
-    globalThis.touchingPhoto = true;
 
     this.touchAnchor = photo;
     this.prevOver = photo;
@@ -318,10 +317,6 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
 
     if (this.touchTimer) this.clickPhoto(photo, {} as any, rowIdx);
     this.resetTouchParams();
-
-    window.setTimeout(() => {
-      if (!this.touchAnchor) globalThis.touchingPhoto = false;
-    }, 1000);
   }
 
   private resetTouchParams() {

src/components/Viewer.vue

@@ -306,7 +306,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
       appendToEl: this.$refs.inner as HTMLElement,
       preload: [2, 2],
 
-      easing: "cubic-bezier(.22,.51,.48,1.01)",
+      easing: "cubic-bezier(.49,.85,.55,1)",
       showHideAnimationType: "zoom",
       showAnimationDuration: 250,
       hideAnimationDuration: 250,

src/components/frame/Photo.vue

@@ -231,11 +231,8 @@ export default class Photo extends Mixins(GlobalMixin) {
   }
 
   contextmenu(e: Event) {
-    // user is trying to select the photo
-    if (globalThis.touchingPhoto) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
+    e.preventDefault();
+    e.stopPropagation();
   }
 
   /** Start preview video */
@@ -298,8 +295,10 @@ $icon-size: $icon-half-size * 2;
   cursor: pointer;
 
   display: none;
-  .p-outer:hover > & {
-    display: flex;
+  @media (hover: hover) {
+    .p-outer:hover > & {
+      display: flex;
+    }
   }
 
   opacity: 0.7;
@@ -411,8 +410,10 @@ div.img-outer {
 
     display: none;
     transition: border-radius 0.1s ease-in;
-    .p-outer:not(.selected):hover > & {
-      display: block;
+    @media (hover: hover) {
+      .p-outer:not(.selected):hover > & {
+        display: block;
+      }
     }
   }
 

src/main.ts

@@ -40,14 +40,12 @@ declare global {
   var editDate: (photo: IPhoto) => void;
   var currentViewerPhoto: IPhoto;
 
-  var touchingPhoto: boolean;
   var windowInnerWidth: number; // cache
   var windowInnerHeight: number; // cache
 }
 
 globalThis.vuerouter = router;
 
-globalThis.touchingPhoto = false;
 globalThis.windowInnerWidth = window.innerWidth;
 globalThis.windowInnerHeight = window.innerHeight;