Add a "toggle fullscreen" button to the lightbox

src/services/lightbox.js

@@ -4,6 +4,11 @@ import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import Mousetrap from 'mousetrap';
 import 'photoswipe/photoswipe.css';
 import '../../styles/shared/lighbox.scss';
+import { renderToString } from 'react-dom/server';
+import { createElement } from 'react';
+import { faCompress, faExpand } from '@fortawesome/free-solid-svg-icons';
+import { getFullscreenAPI } from '../utils/fullscreen';
+import { Icon } from '../components/fontawesome-icons';
 
 const prevHotKeys = ['a', 'ф', 'h', 'р', '4'];
 const nextHotKeys = ['d', 'в', 'k', 'л', '6'];
@@ -12,12 +17,47 @@ export function openLightbox(index, dataSource) {
   initLightbox().loadAndOpen(index, dataSource);
 }
 
+const fsApi = getFullscreenAPI();
+
+const expandIconHTML = renderToString(createElement(Icon, { icon: faExpand }));
+const compressIconHTML = renderToString(createElement(Icon, { icon: faCompress }));
+
 function initLightbox() {
   const lightbox = new PhotoSwipeLightbox({
     clickToCloseNonZoomable: false,
     pswpModule: () => import('photoswipe'),
   });
 
+  // Add fullscreen button
+  lightbox.on('uiRegister', () => {
+    if (!fsApi) {
+      return;
+    }
+    lightbox.pswp.ui.registerElement({
+      name: 'fs',
+      ariaLabel: 'Full screen',
+      order: 9,
+      isButton: true,
+      html: expandIconHTML,
+      onClick: () => {
+        if (fsApi.isFullscreen()) {
+          fsApi.exit();
+        } else {
+          fsApi.request(lightbox.pswp.element);
+        }
+      },
+    });
+
+    const h = () => {
+      const btn = document.querySelector('.pswp__button--fs');
+      btn.innerHTML = fsApi.isFullscreen() ? compressIconHTML : expandIconHTML;
+    };
+
+    document.addEventListener(fsApi.changeEvent, h);
+    lightbox.on('destroy', () => document.removeEventListener(fsApi.changeEvent, h));
+    lightbox.on('close', () => fsApi.isFullscreen() && fsApi.exit());
+  });
+
   // Add filters for the correct open/close animation
   lightbox.addFilter('placeholderSrc', (placeholderSrc, content) => {
     const thumb = document.getElementById(content.data.pid);

src/utils/fullscreen.js

@@ -0,0 +1,51 @@
+/**
+ * Simple fullscreen API helper,
+ * supports unprefixed and webkit-prefixed versions
+ * @see https://photoswipe.com/native-fullscreen-on-open/
+ */
+export function getFullscreenAPI() {
+  let api;
+  let enterFS;
+  let exitFS;
+  let elementFS;
+  let changeEvent;
+  let errorEvent;
+
+  if (document.documentElement.requestFullscreen) {
+    enterFS = 'requestFullscreen';
+    exitFS = 'exitFullscreen';
+    elementFS = 'fullscreenElement';
+    changeEvent = 'fullscreenchange';
+    errorEvent = 'fullscreenerror';
+  } else if (document.documentElement.webkitRequestFullscreen) {
+    enterFS = 'webkitRequestFullscreen';
+    exitFS = 'webkitExitFullscreen';
+    elementFS = 'webkitFullscreenElement';
+    changeEvent = 'webkitfullscreenchange';
+    errorEvent = 'webkitfullscreenerror';
+  }
+
+  if (enterFS) {
+    api = {
+      request(el) {
+        if (enterFS === 'webkitRequestFullscreen') {
+          return el[enterFS](Element.ALLOW_KEYBOARD_INPUT);
+        }
+        return el[enterFS]();
+      },
+
+      exit() {
+        return document[exitFS]();
+      },
+
+      isFullscreen() {
+        return document[elementFS];
+      },
+
+      changeEvent,
+      errorEvent,
+    };
+  }
+
+  return api;
+}

styles/shared/lighbox.scss

@@ -37,3 +37,17 @@
 .pswp__img {
   cursor: default;
 }
+
+.pswp__button--zoom {
+  order: 1;
+}
+
+.pswp__button--fs {
+  font-size: 20px;
+  color: #fff;
+  order: 2;
+}
+
+.pswp__button--close {
+  order: 3;
+}