Merge pull request #457 from diggsweden/DIGG-451

DIGG-451: Update display of screen9 videos in frontend
diggsweden · Oct 8, 2024 · 82d6a83 · 82d6a83
2 parents ff9f364 + 6ee78b8
commit 82d6a83
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 84 deletions.
diff --git a/components/content/blocks/BlockList/index.tsx b/components/content/blocks/BlockList/index.tsx
@@ -11,6 +11,7 @@ import { RelatedContentBlock } from "@/components/content/blocks/RelatedContentB
 import { TextBlock } from "@/components/content/blocks/TextBlock";
 import { AccordionBlock } from "@/components/content/blocks/AccordionBlock";
 import { MediaBlock } from "@/components/content/blocks/MediaBlock";
+import { VideoBlock } from "@/components/content/blocks/VideoBlock";
 import { FormPage } from "@/components/content/FormPage";
 import { QuoteBlock } from "@/components/content/blocks/QuoteBlock";
 import { PromotedContentBlock } from "@/components/content/blocks/PromotedContentBlock";
@@ -83,6 +84,8 @@ export const BlockList: React.FC<blockListProps> = ({
             return <QuoteBlock {...block} key={`${id}-${index}`} />;
           case "dataportal_Digg_Media":
             return <MediaBlock {...block} key={`${id}-${index}`} />;
+          case "dataportal_Digg_Video":
+            return <VideoBlock {...block} key={`${id}-${index}`} />;
           case "dataportal_Digg_PromotedContent":
             return <PromotedContentBlock {...block} key={`${id}-${index}`} />;
           case "dataportal_Digg_Faq":

diff --git a/components/content/blocks/MediaBlock/index.tsx b/components/content/blocks/MediaBlock/index.tsx
@@ -8,7 +8,6 @@ import { Heading } from "@/components/global/Typography/Heading";
 import Link from "next/link";
 import DocumentIcon from "@/assets/icons/document.svg";
 import PDFIcon from "@/assets/icons/PDF.svg";
-import { VideoPlayer } from "@/components/global/VideoPlayer";
 
 export const handleUrl = ({ screen9, url, __typename }: MediaBaseFragment) => {
   const documentBaseUrl = env("DOCUMENT_BASE_URL");
@@ -51,20 +50,6 @@ const renderMedia = (
           )}
         </figure>
       );
-    case "dataportal_Digg_Video":
-      return (
-        <figure className="border-b border-brown-200 pb-sm">
-          <div className="pb-sm">
-            <VideoPlayer media={media} />
-          </div>
-          {mediaDescription && (
-            <figcaption className="text-brown-600">
-              {checkLang(mediaDescription)}
-            </figcaption>
-          )}
-        </figure>
-      );
-
     case "dataportal_Digg_File":
       return (
         <Link

diff --git a/components/content/blocks/VideoBlock/index.tsx b/components/content/blocks/VideoBlock/index.tsx
@@ -0,0 +1,31 @@
+import { VideoFragment } from "@/graphql/__generated__/operations";
+import { checkLang } from "@/utilities";
+import { Heading } from "@/components/global/Typography/Heading";
+import { VideoPlayer } from "@/components/global/VideoPlayer";
+
+export const VideoBlock: React.FC<VideoFragment> = ({
+  heading,
+  description,
+  video_id,
+}) => {
+  return (
+    <div className="max-w-md">
+      {heading && (
+        <Heading level={2} size={"md"} className="mb-md md:mb-lg">
+          {heading}
+        </Heading>
+      )}
+
+      <figure className="border-b border-brown-200 pb-sm">
+        <div className="pb-sm">
+          <VideoPlayer video_id={video_id ?? ""} />
+        </div>
+        {description && (
+          <figcaption className="text-brown-600">
+            {checkLang(description)}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+};
diff --git a/components/global/VideoPlayer/index.tsx b/components/global/VideoPlayer/index.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { MediaType_Dataportal_Digg_Video_Fragment as IVideo } from "@/graphql/__generated__/operations";
 
-export const VideoPlayer: React.FC<{ media: IVideo }> = ({ media }) => {
-  const containerid = `video_screen9_${media.screen9.id}`;
+export const VideoPlayer: React.FC<{ video_id: string }> = ({ video_id }) => {
+  const containerid = `video_screen9_${video_id}`;
   let player: any;
 
   const useScript = (src: string) => {
@@ -57,9 +56,9 @@ export const VideoPlayer: React.FC<{ media: IVideo }> = ({ media }) => {
   const status = useScript("https://cdn.screen9.com/players/amber-player.js");
 
   useEffect(() => {
-    if (status === "ready" && media.screen9?.id) {
+    if (status === "ready" && video_id) {
       const options = {
-        mediaid: media.screen9.id,
+        mediaid: video_id,
         containerid,
         token: process.env.NEXT_PUBLIC_SCREEN9_API_TOKEN,
       };

diff --git a/graphql/__generated__/operations.ts b/graphql/__generated__/operations.ts
diff --git a/graphql/fragments.ts b/graphql/fragments.ts
@@ -197,17 +197,21 @@ export const IMAGE_FRAGMENT = gql`
   }
 `;
 
+// Video
+export const VIDEO_FRAGMENT = gql`
+  fragment Video on dataportal_Digg_Video {
+    heading
+    description
+    video_id
+  }
+`;
+
 // Union
 export const MEDIA_TYPE_FRAGMENT = gql`
   fragment MediaType on dataportal_Digg_MediaType {
     ... on dataportal_Digg_Image {
       ...Image
     }
-
-    ... on dataportal_Digg_Video {
-      ...MediaBase
-    }
-
     ... on dataportal_Digg_File {
       ...MediaBase
     }
@@ -360,6 +364,9 @@ export const BLOCK_FRAGMENT = gql`
       ...Media
     }
 
+    ... on dataportal_Digg_Video {
+      ...Video
+    }
     ... on dataportal_Digg_RelatedContent {
       ...RelatedContent
     }
@@ -385,6 +392,7 @@ export const BLOCK_FRAGMENT = gql`
   ${MEDIA_BASE_FRAGMENT}
   ${MEDIA_TYPE_FRAGMENT}
   ${IMAGE_FRAGMENT}
+  ${VIDEO_FRAGMENT}
   ${FORM_BLOCK_FRAGMENT}
   ${FORM_ELEMENT_FRAGMENT}
   ${CHOICE_FRAGMENT}

diff --git a/graphql/schema.json b/graphql/schema.json
@@ -3472,6 +3472,11 @@
             "kind": "OBJECT",
             "name": "dataportal_Digg_Text",
             "ofType": null
+          },
+          {
+            "kind": "OBJECT",
+            "name": "dataportal_Digg_Video",
+            "ofType": null
           }
         ]
       },
@@ -3878,6 +3883,11 @@
             "kind": "OBJECT",
             "name": "dataportal_Digg_Text",
             "ofType": null
+          },
+          {
+            "kind": "OBJECT",
+            "name": "dataportal_Digg_Video",
+            "ofType": null
           }
         ]
       },
@@ -4646,11 +4656,6 @@
             "kind": "OBJECT",
             "name": "dataportal_Digg_Image",
             "ofType": null
-          },
-          {
-            "kind": "OBJECT",
-            "name": "dataportal_Digg_Video",
-            "ofType": null
           }
         ]
       },
@@ -5516,6 +5521,18 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "video_id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -5537,7 +5554,7 @@
       {
         "kind": "UNION",
         "name": "dataportal_Digg_MediaType",
-        "description": "A mediatype of image, video or file",
+        "description": "A mediatype of image or file",
         "fields": null,
         "inputFields": null,
         "interfaces": null,
@@ -5552,11 +5569,6 @@
             "kind": "OBJECT",
             "name": "dataportal_Digg_Image",
             "ofType": null
-          },
-          {
-            "kind": "OBJECT",
-            "name": "dataportal_Digg_Video",
-            "ofType": null
           }
         ]
       },
@@ -7076,13 +7088,17 @@
         "description": null,
         "fields": [
           {
-            "name": "alt",
+            "name": "createdAt",
             "description": null,
             "args": [],
             "type": {
-              "kind": "SCALAR",
-              "name": "String",
-              "ofType": null
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "dataportal_DateTime",
+                "ofType": null
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -7100,7 +7116,7 @@
             "deprecationReason": null
           },
           {
-            "name": "ext",
+            "name": "heading",
             "description": null,
             "args": [],
             "type": {
@@ -7112,57 +7128,61 @@
             "deprecationReason": null
           },
           {
-            "name": "mime",
+            "name": "id",
             "description": null,
             "args": [],
             "type": {
               "kind": "NON_NULL",
               "name": null,
               "ofType": {
                 "kind": "SCALAR",
-                "name": "String",
+                "name": "ID",
                 "ofType": null
               }
             },
             "isDeprecated": false,
             "deprecationReason": null
           },
           {
-            "name": "name",
-            "description": null,
+            "name": "locale",
+            "description": "two-letter lang",
             "args": [],
             "type": {
-              "kind": "SCALAR",
-              "name": "String",
-              "ofType": null
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
           },
           {
-            "name": "screen9",
-            "description": "Data from screen9 media",
+            "name": "updatedAt",
+            "description": null,
             "args": [],
             "type": {
-              "kind": "SCALAR",
-              "name": "dataportal_JSON",
-              "ofType": null
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "dataportal_DateTime",
+                "ofType": null
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
           },
           {
-            "name": "url",
+            "name": "video_id",
             "description": null,
             "args": [],
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -7172,7 +7192,12 @@
         "interfaces": [
           {
             "kind": "INTERFACE",
-            "name": "dataportal_Digg_IMediaBase",
+            "name": "dataportal_Digg_IBlock",
+            "ofType": null
+          },
+          {
+            "kind": "INTERFACE",
+            "name": "dataportal_Digg_IEntity",
             "ofType": null
           }
         ],