Merge branch '738-better-youtube-thumbnail-quality' of https://github…

….com/SSWConsulting/SSW.Website into 738-better-youtube-thumbnail-quality
SSWConsulting · Jul 13, 2023 · 5d2ca57 · 5d2ca57
2 parents c344e3a + ac0888c
commit 5d2ca57
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/.tina/__generated__/_graphql.json b/.tina/__generated__/_graphql.json
diff --git a/.tina/__generated__/_schema.json b/.tina/__generated__/_schema.json
diff --git a/components/blocks/videoEmbed.tsx b/components/blocks/videoEmbed.tsx
@@ -1,15 +1,14 @@
-import React from "react";
+import classNames from "classnames";
 import type { Template } from "tinacms";
 import { VideoModal } from "../videoModal";
-import classNames from "classnames";
 
 export const VideoEmbed = ({ data }) => {
   const width = data.videoWidth || "w-3/4";
   const margin = data.removeMargin ? "" : "m-8";
 
   return (
     <div className={classNames("relative mx-auto aspect-video", width, margin)}>
-      <VideoModal url={data.url} />
+      <VideoModal url={data.url} duration={data.videoDuration} />
     </div>
   );
 };
@@ -58,5 +57,11 @@ export const videoEmbedBlockSchema: Template = {
       name: "removeMargin",
       required: false,
     },
+    {
+      type: "string",
+      label: "Video duration",
+      name: "videoDuration",
+      required: false,
+    },
   ],
 };
diff --git a/components/videoModal.tsx b/components/videoModal.tsx
@@ -11,8 +11,9 @@ const YouTubeEmbed = dynamic(
   }
 );
 
-export const VideoModal = ({ children = null, url }) => {
+export const VideoModal = ({ children = null, url, duration = null }) => {
   const id = url ? getYouTubeId(url) : null;
+  console.log(duration);
 
   const [clicked, setClicked] = useState<boolean>(false);
   const [imageSrc, setImageSrc] = useState<string>(
@@ -41,6 +42,11 @@ export const VideoModal = ({ children = null, url }) => {
                 }}
               />
               <PlayArrow />
+              {duration && (
+                <div className="absolute bottom-3 left-3 rounded-lg border-1 bg-sswRed px-4 py-1 text-white">
+                  {duration}
+                </div>
+              )}
             </div>
           ) : (
             <YouTubeEmbed

diff --git a/content/consulting/react.mdx b/content/consulting/react.mdx
@@ -59,7 +59,7 @@ seo:
 
 # The benefits of building your **UI in React** with SSW
 
-<VideoEmbed url="https://www.youtube.com/watch?v=3K4Gb54BFMo" />
+<VideoEmbed url="https://www.youtube.com/watch?v=3K4Gb54BFMo" videoDuration="28:22" />
 
 React is a JavaScript library that combines the speed of JavaScript with new ways of rendering web pages, making them highly dynamic and responsive to user input. This technology significantly changed Facebook approach to development. After the library was released as an open-source tool, it became extremely popular due to its revolutionary approach to programming user interfaces.