Merge branch 'master' into 7-teachers-page

components/Gallery/Gallery.tsx

@@ -1,51 +1,35 @@
 'use client';
 
-import {MutableRefObject} from 'react';
 import clsx from 'clsx';
-import {Gallery as PSGallery, Item, GalleryProps} from 'react-photoswipe-gallery';
+import {Gallery as PSGallery, GalleryProps} from 'react-photoswipe-gallery';
 import 'photoswipe/dist/photoswipe.css';
-import useNetworkSpeed from '@/lib/shared/useNetworkSpeed';
 import config from './config';
 import GalleryItem from './GalleryItem';
 
 const containerCn = clsx('flex', 'flex-wrap', 'gap-4', 'justify-center');
-
+const galleryId = 'images';
 const photoSwipeOptions: GalleryProps['options'] = {
   zoom: false,
   bgOpacity: 0.9,
+  closeOnVerticalDrag: true,
 };
 
 /**
  * @returns React component.
  */
 export default function Gallery() {
-  const [, isFast] = useNetworkSpeed();
-
   return (
     <div className={containerCn}>
-      <PSGallery options={photoSwipeOptions}>
-        {config.map(({src, lowQualitySrc, dimensions: {width, height}, blurDataURL}) => {
-          const computedSrc = isFast ? src : lowQualitySrc;
-          return (
-            <Item
-              original={computedSrc}
-              thumbnail={computedSrc}
-              alt=""
-              width={width}
-              height={height}
-              key={computedSrc}
-            >
-              {({open, ref}) => (
-                <GalleryItem
-                  open={open}
-                  ref={ref as MutableRefObject<HTMLImageElement>}
-                  blurDataURL={blurDataURL}
-                  src={computedSrc}
-                />
-              )}
-            </Item>
-          );
-        })}
+      <PSGallery
+        options={photoSwipeOptions}
+        id={galleryId}
+      >
+        {config.map(props => (
+          <GalleryItem
+            key={props.src}
+            {...props}
+          />
+        ))}
       </PSGallery>
     </div>
   );

components/Gallery/GalleryImage.tsx

@@ -0,0 +1,85 @@
+import {MouseEvent} from 'react';
+import clsx from 'clsx';
+import Image from 'next/image';
+import {forwardRef} from 'react';
+import {useHotkeys} from 'react-hotkeys-hook';
+import {customCursorClickableClass} from '@/lib/customCursor/customCursorClickableClass';
+import useDisableRightClick from '@/lib/shared/useDisableRightClick';
+import {useAssignRefs} from '@/lib/shared/useAssignRefs';
+import useNetworkSpeed from '@/lib/shared/useNetworkSpeed';
+import AppearInViewport from '../AppearInViewport/AppearInViewport';
+
+/**
+ * Props.
+ */
+type GalleryItemProps = {
+  src: string;
+  blurDataURL: string;
+  open: (e: MouseEvent) => void;
+};
+
+const imgCn = clsx('rounded-md', 'overflow-hidden');
+const overflowCn = clsx(
+  customCursorClickableClass,
+  'relative',
+  'after:absolute',
+  'after:content-[""]',
+  'after:w-full',
+  'after:h-full',
+  'after:top-0',
+  'after:left-0',
+  'after:bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-white to-transparent',
+  'after:transition-opacity',
+  'after:duration-300',
+  'after:ease-out',
+  'after:opacity-0',
+  'hover:after:opacity-20',
+  'transition-transform',
+  'duration-500',
+  'ease-out',
+  'hover:translate-y-1',
+  'rounded-md',
+  'focus-ring',
+);
+
+/**
+ * @returns React component.
+ */
+const GalleryImage = forwardRef<HTMLImageElement, GalleryItemProps>(function GalleryItem(
+  {open, src, blurDataURL},
+  ref,
+) {
+  const hotkeysRef = useHotkeys<HTMLDivElement>(['enter', 'space'], open as any, {
+    preventDefault: true,
+  });
+  const disableRef = useDisableRightClick();
+  const finalRef = useAssignRefs(hotkeysRef, disableRef);
+  const [, isFast] = useNetworkSpeed();
+
+  return (
+    <AppearInViewport>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <div
+        className={overflowCn}
+        style={{height: 300, width: 400}}
+        onClick={open}
+        tabIndex={0}
+        role="link"
+        ref={finalRef}
+      >
+        <Image
+          className={imgCn}
+          ref={ref}
+          src={src}
+          placeholder="blur"
+          blurDataURL={blurDataURL}
+          quality={isFast ? 75 : 25}
+          alt=""
+          fill
+        />
+      </div>
+    </AppearInViewport>
+  );
+});
+
+export default GalleryImage;

components/Gallery/GalleryItem.tsx

@@ -1,78 +1,46 @@
-import {MouseEvent} from 'react';
-import clsx from 'clsx';
-import Image from 'next/image';
-import {forwardRef} from 'react';
-import {useHotkeys} from 'react-hotkeys-hook';
-import {customCursorClickableClass} from '@/lib/customCursor/customCursorClickableClass';
-import AppearInViewport from '../AppearInViewport/AppearInViewport';
+import {MutableRefObject} from 'react';
+import {Item} from 'react-photoswipe-gallery';
+import 'photoswipe/dist/photoswipe.css';
+import GalleryImage from './GalleryImage';
 
 /**
  * Props.
  */
 type GalleryItemProps = {
   src: string;
   blurDataURL: string;
-  open: (e: MouseEvent) => void;
+  dimensions: {
+    width: number;
+    height: number;
+  };
 };
 
-const imgCn = clsx('rounded-md', 'overflow-hidden');
-const overflowCn = clsx(
-  customCursorClickableClass,
-  'relative',
-  'after:absolute',
-  'after:content-[""]',
-  'after:w-full',
-  'after:h-full',
-  'after:top-0',
-  'after:left-0',
-  'after:bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-white to-transparent',
-  'after:transition-opacity',
-  'after:duration-300',
-  'after:ease-out',
-  'after:opacity-0',
-  'hover:after:opacity-20',
-  'transition-transform',
-  'duration-500',
-  'ease-out',
-  'hover:translate-y-1',
-  'rounded-md',
-  'focus-ring',
-);
-
 /**
+ * @param {GalleryItemProps} props Props.
  * @returns React component.
  */
-const GalleryItem = forwardRef<HTMLImageElement, GalleryItemProps>(function GalleryItem(
-  {open, src, blurDataURL},
-  ref,
-) {
-  const hotkeysRef = useHotkeys<HTMLDivElement>(['enter', 'space'], open as any, {
-    preventDefault: true,
-  });
-
+export default function GalleryItem({
+  src,
+  blurDataURL,
+  dimensions: {width, height},
+}: GalleryItemProps) {
   return (
-    <AppearInViewport>
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-      <div
-        className={overflowCn}
-        style={{height: 300, width: 400}}
-        onClick={open}
-        tabIndex={0}
-        role="link"
-        ref={hotkeysRef}
-      >
-        <Image
-          className={imgCn}
-          ref={ref}
-          src={src}
-          placeholder="blur"
+    <Item
+      original={src}
+      thumbnail={src}
+      alt=""
+      width={width}
+      height={height}
+      key={src}
+    >
+      {({open, ref}) => (
+        <GalleryImage
+          open={open}
+          ref={ref as MutableRefObject<HTMLImageElement>}
           blurDataURL={blurDataURL}
-          alt=""
-          fill
+          src={src}
         />
-      </div>
-    </AppearInViewport>
+      )}
+    </Item>
   );
-});
-
-export default GalleryItem;
+}

components/Gallery/config.ts

@@ -24,5 +24,4 @@ export default config.map(({fileName, dimensions}) => ({
   dimensions,
   src: `/images/${fileName}`,
   blurDataURL: `/images/blured/${fileName}`,
-  lowQualitySrc: `/images/low-quality/${fileName}`,
 }));

components/Menu/MenuDynamicBg.tsx

@@ -14,7 +14,6 @@ const dynamicBgCn = clsx('absolute', 'top-0', 'left-0', 'w-full', 'h-full', 'z-3
 export default function MenuDynamicBg() {
   const {menuBg} = useContext(MenuContext);
   const [, isFast] = useNetworkSpeed();
-  const src = isFast ? `/images/${menuBg}` : `/images/low-quality/${menuBg}`;
 
   return (
     <AnimatePresence mode="popLayout">
@@ -32,10 +31,11 @@ export default function MenuDynamicBg() {
           }}
         >
           <Image
-            src={src}
+            src={`/images/${menuBg}`}
             alt=""
             placeholder="blur"
             blurDataURL={`/images/blured/${menuBg}`}
+            quality={isFast ? 75 : 25}
             fill
           />
         </m.div>

lib/shared/useDisableRightClick.ts

@@ -0,0 +1,28 @@
+import {useEffect, useRef} from 'react';
+
+/**
+ * @returns Ref to register.
+ */
+export default function useDisableRightClick<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+
+    if (node) {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      const handleContextMenu = (e: Event) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      };
+
+      node.addEventListener('contextmenu', handleContextMenu);
+
+      return () => {
+        node.removeEventListener('contextmenu', handleContextMenu);
+      };
+    }
+  }, [ref]);
+
+  return ref;
+}