Fix rotate bug (aeharding#316)

package.json

@@ -64,6 +64,7 @@
     "lemmy-js-client": "0.18.0",
     "lodash": "^4.17.21",
     "mdast-util-gfm-autolink-literal-lemmy": "^1.0.3",
+    "photoswipe": "^5.3.8",
     "mdast-util-gfm-strikethrough": "^1.0.3",
     "mdast-util-gfm-table": "^1.0.7",
     "micromark": "^3.0.0",
@@ -77,7 +78,6 @@
     "react-animate-height": "^3.1.1",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
-    "react-photoswipe-gallery": "^2.2.7",
     "react-redux": "^8.1.1",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",

src/App.tsx

@@ -26,6 +26,7 @@ import Router from "./Router";
 import BeforeInstallPromptProvider from "./BeforeInstallPromptProvider";
 import { UpdateContextProvider } from "./pages/settings/update/UpdateContext";
 import GlobalStyles from "./GlobalStyles";
+import GalleryProvider from "./features/gallery/GalleryProvider";
 
 setupIonicReact({
   rippleEffect: false,
@@ -44,7 +45,9 @@ export default function App() {
               <Router>
                 <IonApp>
                   <Auth>
-                    <TabbedRoutes />
+                    <GalleryProvider>
+                      <TabbedRoutes />
+                    </GalleryProvider>
                   </Auth>
                 </IonApp>
               </Router>

src/features/auth/Login.tsx

@@ -25,7 +25,7 @@ import { getClient } from "../../services/lemmy";
 import { IonInputCustomEvent } from "@ionic/core";
 import TermsSheet from "../settings/terms/TermsSheet";
 import { LEMMY_SERVERS } from "../../helpers/lemmy";
-import { preventPhotoswipeGalleryFocusTrap } from "../gallery/Gallery";
+import { preventPhotoswipeGalleryFocusTrap } from "../gallery/GalleryImg";
 
 export const Spinner = styled(IonSpinner)`
   width: 1.5rem;

src/features/comment/reply/CommentReply.tsx

@@ -22,7 +22,7 @@ import { useAppSelector } from "../../../store";
 import { Centered, Spinner } from "../../auth/Login";
 import { handleSelector, jwtSelector } from "../../auth/authSlice";
 import { css } from "@emotion/react";
-import { preventPhotoswipeGalleryFocusTrap } from "../../gallery/Gallery";
+import { preventPhotoswipeGalleryFocusTrap } from "../../gallery/GalleryImg";
 
 export const Container = styled.div`
   position: absolute;

src/features/feed/Feed.tsx

@@ -173,7 +173,7 @@ export default function Feed<I>({
           fetchMore();
         }}
         components={{ Header: header, Footer: footer }}
-        increaseViewportBy={800}
+        increaseViewportBy={5000}
       />
     </>
   );

src/features/gallery/GalleryImg.tsx

@@ -0,0 +1,69 @@
+import React, { FocusEvent, KeyboardEvent, useContext, useRef } from "react";
+import "photoswipe/dist/photoswipe.css";
+import { useAppDispatch } from "../../store";
+import { imageLoaded } from "./gallerySlice";
+import { PostView } from "lemmy-js-client";
+import { GalleryContext } from "./GalleryProvider";
+import { PreparedPhotoSwipeOptions } from "photoswipe";
+
+export interface GalleryImgProps {
+  src?: string;
+  alt?: string;
+  className?: string;
+  post?: PostView;
+  animationType?: PreparedPhotoSwipeOptions["showHideAnimationType"];
+}
+
+/**
+ * TODO: photoswipe traps focus, so onFocusCapture and onKeyDown is a hack to prevent it
+ * from detecting that we're changing focus. It's not great.. but it's what we got
+ * https://github.com/dimsemenov/PhotoSwipe/issues/1968
+ */
+export const preventPhotoswipeGalleryFocusTrap = {
+  onFocusCapture: (e: FocusEvent) => e.stopPropagation(),
+  onKeyDown: (e: KeyboardEvent) => e.stopPropagation(),
+};
+
+export function GalleryImg({
+  src,
+  alt,
+  className,
+  post,
+  animationType,
+}: GalleryImgProps) {
+  const dispatch = useAppDispatch();
+  const loaded = useRef(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const { open } = useContext(GalleryContext);
+
+  return (
+    <img
+      ref={imgRef}
+      draggable="false"
+      alt={alt}
+      onClick={(e) => {
+        if (!loaded.current) return;
+
+        e.stopPropagation();
+
+        open(e.currentTarget, post, animationType);
+      }}
+      src={src}
+      className={className}
+      onLoad={(e) => {
+        if (!(e.target instanceof HTMLImageElement)) return;
+        if (!src) return;
+
+        loaded.current = true;
+
+        dispatch(
+          imageLoaded({
+            src,
+            width: e.target.naturalWidth,
+            height: e.target.naturalHeight,
+          })
+        );
+      }}
+    />
+  );
+}

src/features/gallery/GalleryPostActions.tsx

@@ -9,6 +9,8 @@ import { getHandle } from "../../helpers/lemmy";
 import MoreActions from "../post/shared/MoreActions";
 import { calculateCurrentVotesCount } from "../../helpers/vote";
 import { useLocation } from "react-router";
+import { useContext } from "react";
+import { GalleryContext } from "./GalleryProvider";
 
 const Container = styled.div`
   display: flex;
@@ -32,13 +34,9 @@ const Amount = styled.div`
 
 interface GalleryPostActionsProps {
   post: PostView;
-  close: () => void;
 }
 
-export default function GalleryPostActions({
-  post,
-  close,
-}: GalleryPostActionsProps) {
+export default function GalleryPostActions({ post }: GalleryPostActionsProps) {
   const postVotesById = useAppSelector((state) => state.post.postVotesById);
   const buildGeneralBrowseLink = useBuildGeneralBrowseLink();
   const link = buildGeneralBrowseLink(
@@ -47,6 +45,7 @@ export default function GalleryPostActions({
   const router = useIonRouter();
   const score = calculateCurrentVotesCount(post, postVotesById);
   const location = useLocation();
+  const { close } = useContext(GalleryContext);
 
   function share() {
     navigator.share({ url: post.post.ap_id });