add 360 photosphere element support

web/src/components/blocks/Blocks.tsx

@@ -6,6 +6,7 @@ import { FeaturedBlock } from "./FeaturedBlock";
 import { AccordionBlock } from "./AccordionBlock";
 import { EmbedBlock } from "./EmbedBlock";
 import { FactBoxBlock } from "./FactBoxBlock";
+import { PhotoSphereBlock } from "./PhotoSphereBlock";
 import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { ContactListBlock } from "./ContactListBlock";
@@ -44,6 +45,9 @@ export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boo
       case "FactBoxBlock":
         return <FactBoxBlock key={block.id} block={block} />;
         break;
+      case "PhotoSphereBlock":
+        return <PhotoSphereBlock key={block.id} block={block} />;
+        break;
       case "PageSectionBlock":
         return <PageSectionBlock key={block.id} block={block} />;
         break;

web/src/components/blocks/PhotoSphereBlock.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { PhotoSphereBlock as PhotoSphereBlockType } from "@/gql/graphql";
+import styles from "./photoSphereBlock.module.scss";
+
+const ReactPhotoSphereViewer = dynamic(
+  () =>
+    import("react-photo-sphere-viewer").then(
+      (mod) => mod.ReactPhotoSphereViewer
+    ),
+  {
+    ssr: false,
+    loading: () => (
+      <div className={styles.loading} aria-busy="true" aria-label="Laster 360°-bilde">
+        <span className={styles.loadingText}>Laster 360°-bilde…</span>
+      </div>
+    ),
+  }
+);
+
+type PhotoSphereBlockTypeWithAlias = PhotoSphereBlockType & {
+  photoSphereImage?: PhotoSphereBlockType["image"];
+  photoSphereTitle?: string | null;
+};
+
+export const PhotoSphereBlock = ({
+  block,
+}: {
+  block: PhotoSphereBlockTypeWithAlias;
+}) => {
+  const image = block.photoSphereImage ?? block.image;
+
+  if (!image?.url) {
+    return <></>;
+  }
+
+  return (
+    <figure className={styles.photoSphereWrapper}>
+      <div
+        className={styles.photoSphereViewer}
+        role="img"
+        aria-label={block.photoSphereTitle ?? image.alt ?? "360°-bilde"}
+      >
+        <ReactPhotoSphereViewer
+          src={image.url}
+          height="500px"
+          width="100%"
+          navbar={["zoom", "fullscreen"]}
+          littlePlanet={false}
+          touchmoveTwoFingers
+        />
+        <noscript>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={image.url}
+            alt={block.photoSphereTitle ?? image.alt ?? "360°-bilde"}
+            className={styles.fallbackImage}
+          />
+        </noscript>
+      </div>
+      {block.photoSphereTitle && <figcaption>{block.photoSphereTitle}</figcaption>}
+    </figure>
+  );
+};

web/src/components/blocks/photoSphereBlock.module.scss

@@ -0,0 +1,42 @@
+.photoSphereWrapper {
+  max-width: var(--size-width-p);
+  margin: 0 auto var(--spacing-m);
+}
+
+.photoSphereViewer {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 2px;
+  background: var(--color-betongGray);
+  position: relative;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 500px;
+  width: 100%;
+  background: var(--color-background-secondary);
+}
+
+.loadingText {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary, currentColor);
+}
+
+.photoSphereWrapper figcaption {
+  width: 100%;
+  max-width: var(--size-width-p);
+  margin: 0 auto;
+  padding: var(--spacing-xs) 0 var(--spacing-s);
+  font-size: var(--font-size-caption);
+  line-height: 1.4;
+  opacity: .8;
+}
+
+.fallbackImage {
+  width: 100%;
+  height: auto;
+  display: block;
+}