User Group - Adding Youtube Playlist (#2216)

* User Groups - Adding youtube playlist * Refactoring code for generic use * Adding Visual editing functionality for Youtube playlist component * Update schema.json * Fixing cursor pointer issue on video card * Fixing UI and adding readmore functionality * Fixing spacing between playlist button * Expanding map based on presenter's block * Mobile - Fixing button alignment on small screens * Fixing background for the contact us tab * Removing fields that are not in used * removing random field
SSWConsulting · Feb 29, 2024 · 951ffb9 · 951ffb9
1 parent fa32992
commit 951ffb9
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 188 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/.tina/collections/usergroup.tsx b/.tina/collections/usergroup.tsx
@@ -4,6 +4,7 @@ import { seoSchema } from "../../components/util/seo";
 
 import React from "react";
 import type { Collection } from "tinacms";
+import { youtubePlaylistSchema } from "../../components/blocks/youtubePlaylist";
 import { tipField } from "./shared-fields";
 
 export const userGroupPageSchema: Collection = {
@@ -242,46 +243,7 @@ export const userGroupGlobalSchema: Collection = {
         },
       ],
     },
-    {
-      type: "object",
-      label: "Videos",
-      name: "videos",
-      list: true,
-      fields: [
-        {
-          type: "string",
-          label: "Link",
-          name: "link",
-        },
-        {
-          type: "string",
-          label: "Title",
-          name: "title",
-        },
-      ],
-      ui: {
-        itemProps: (item) => ({
-          label: item?.title,
-        }),
-      },
-    },
-    {
-      type: "object",
-      label: "Featured Videos Button options",
-      name: "videosButton",
-      fields: [
-        {
-          type: "string",
-          label: "Link",
-          name: "link",
-        },
-        {
-          type: "string",
-          label: "Text",
-          name: "text",
-        },
-      ],
-    },
+    youtubePlaylistSchema,
     {
       type: "object",
       label: "Join Us Panel",

diff --git a/components/blocks/aboutUs.tsx b/components/blocks/aboutUs.tsx
@@ -223,7 +223,7 @@ const AccordionItem = ({
     <li>
       <div
         className={classNames(
-          "group mb-2 flex cursor-pointer items-center justify-between p-2 transition-all duration-500",
+          "group flex cursor-pointer items-center justify-between p-2 transition-all duration-500",
           currentlySelected
             ? "bg-sswRed"
             : onHover
@@ -254,7 +254,7 @@ const AccordionItem = ({
 
       <div
         className={classNames(
-          "overflow-hidden transition-all duration-500",
+          "overflow-hidden transition-all duration-500 mb-2 bg-white",
           currentlySelected ? "max-h-52" : "max-h-0"
         )}
       >

diff --git a/components/blocks/youtubePlaylist.tsx b/components/blocks/youtubePlaylist.tsx
@@ -2,23 +2,24 @@ import axios from "axios";
 import { Key, useEffect, useState } from "react";
 import { BsArrowRightCircle } from "react-icons/bs";
 import { Template, TinaField } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
 import { VideoLink } from "../../services/server/youtube";
 import { CustomLink } from "../customLink";
 import { VideoCard } from "../util/videoCards";
 
 export type YoutubePlaylistProps = {
   title?: string;
   playlistId: string;
-  numberOfVideos: number;
-  textForPlaylistLink?: string;
+  videosCount?: number;
+  playlistButton?: {
+    text?: string;
+    link?: string;
+    animated?: boolean;
+  };
 };
 
-export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = ({
-  title,
-  playlistId,
-  textForPlaylistLink,
-  numberOfVideos,
-}) => {
+export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = (props) => {
+  const { title, playlistId, videosCount, playlistButton } = props;
   const [playlistVideosLinks, setPlaylistVideosLinks] = useState([]);
 
   useEffect(() => {
@@ -28,7 +29,7 @@ export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = ({
           .get<VideoLink[]>("/api/get-youtube-playlist", {
             params: {
               playlistId: playlistId,
-              videosCount: numberOfVideos,
+              videosCount: videosCount,
             },
           })
           .then((response) => {
@@ -40,10 +41,10 @@ export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = ({
       }
     };
 
-    if (playlistId && numberOfVideos) {
+    if (playlistId && videosCount) {
       fetchPlaylist();
     }
-  }, [playlistId, numberOfVideos]);
+  }, [playlistId, videosCount]);
 
   if (!playlistId) {
     return <></>;
@@ -60,13 +61,17 @@ export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = ({
           <VideoCard {...video} theme="light" key={index} />
         ))}
       </div>
-      {textForPlaylistLink && (
+      {playlistButton?.text && (
         <div className="flex justify-center">
           <CustomLink
-            href={`https://www.youtube.com/playlist?list=${playlistId}`}
-            className="done relative mx-2 mt-8 inline-flex overflow-hidden rounded border-none bg-sswRed pl-3 text-white"
+            href={`https://www.youtube.com/playlist?list=${
+              playlistButton?.link || playlistId
+            }`}
+            className="done relative mx-2 mb-6 mt-8 inline-flex overflow-hidden rounded border-none bg-sswRed pl-3 text-white"
+            data-aos={playlistButton.animated ? "fade-up" : undefined}
+            data-tina-field={tinaField(props.playlistButton, "text")}
           >
-            {textForPlaylistLink}
+            {playlistButton.text}
             <BsArrowRightCircle className="ml-1 inline" />
           </CustomLink>
         </div>
@@ -98,14 +103,32 @@ export const youtubePlaylistSchema: TinaField = {
     },
     {
       type: "number",
-      label: "Number of vidoes",
-      name: "numberOfVideos",
+      label: "Videos Count",
+      name: "videosCount",
       required: true,
     },
     {
-      type: "string",
-      name: "textForPlaylistLink",
-      label: "Text for Playlist link",
+      type: "object",
+      label: "Playlist Button",
+      name: "playlistButton",
+      fields: [
+        {
+          type: "string",
+          name: "text",
+          label: "Text",
+        },
+        {
+          type: "string",
+          name: "link",
+          label: "Link",
+          description: "DEFAULT: PlaylistId.",
+        },
+        {
+          type: "boolean",
+          name: "animated",
+          label: "Animated?",
+        },
+      ],
     },
   ],
 };

diff --git a/components/usergroup/readMore.tsx b/components/usergroup/readMore.tsx
@@ -10,12 +10,14 @@ type ReadMoreProps = {
   className?: string;
 };
 
+const sentenceSeparator = /\. |\.\n|\.\r|! |!\n|!\r/; // Matches "." or "!" followed by a space or a new line
+
 const getCondensedText = (
   text: string,
   length: number,
   previewSentenceCount: number
 ) => {
-  const formatted = text.split(". ");
+  const formatted = text.split(sentenceSeparator);
   const selectedParagraphs = formatted.slice(0, previewSentenceCount);
   const condensedText = selectedParagraphs.join(". ");
 
@@ -41,7 +43,7 @@ export const ReadMore = ({
   const isReadMoreRequired = () =>
     (length > 0 && text.length > length) ||
     (previewSentenceCount > 1 &&
-      text.split(". ").length > previewSentenceCount);
+      text.split(sentenceSeparator).length > previewSentenceCount);
 
   const condensedText = isReadMoreRequired()
     ? getCondensedText(sanitizedText, length, previewSentenceCount)

diff --git a/components/usergroup/sections/videos.tsx b/components/usergroup/sections/videos.tsx
@@ -1,77 +1,47 @@
 import Image from "next/image";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
-import { UtilityButton } from "../../blocks";
+import {
+  YoutubePlaylistBlock,
+  YoutubePlaylistProps,
+} from "../../blocks/youtubePlaylist";
 import { Container } from "../../util/container";
-import { VideoCard } from "../../util/videoCards";
-
-type VideoType = {
-  link?: string;
-  title?: string;
-};
 
 type VideosSectionProps = {
   globalUserGroupInfo?: {
-    videos?: VideoType[];
-    videosButton?: {
-      link?: string;
-      text?: string;
-    };
+    youtubePlaylist: YoutubePlaylistProps;
   };
 };
 
 export const VideosSection = (props: VideosSectionProps) => {
-  const button = props.globalUserGroupInfo?.videosButton;
+  const youtubePlaylistProps = props.globalUserGroupInfo.youtubePlaylist;
 
   return (
-    <section>
-      <Container>
-        <div>
-          <div className="flex flex-col items-center">
-            <div className="mb-12 flex-row items-center justify-center text-center md:flex">
-              <h2 className="!my-0 text-4xl font-semibold">
-                <span className="text-sswRed">Featured Videos </span> from{" "}
-              </h2>{" "}
-              <Image
-                src="/images/sswtv_logo.png"
-                alt="SSW TV logo"
-                className="mx-auto shrink-0 grow-0 object-contain pl-4"
-                height={50}
-                width={200}
-              />
-            </div>
-            <div className="grid grid-cols-1 justify-center gap-8 lg:grid-cols-3">
-              {props.globalUserGroupInfo?.videos?.map((video, index) => (
-                <div
-                  data-tina-field={tinaField(
-                    props.globalUserGroupInfo?.videos[index],
-                    "title"
-                  )}
-                  key={index}
-                >
-                  <VideoCard {...video} theme="light" />
-                </div>
-              ))}
-            </div>
-            {button && button.text && button.link && (
-              <div
-                data-tina-field={tinaField(
-                  props.globalUserGroupInfo.videosButton,
-                  "text"
-                )}
-              >
-                <UtilityButton
-                  link={button.link}
-                  buttonText={button.text}
-                  className="mx-auto text-base font-semibold"
-                  animated
-                />
-              </div>
-            )}
-          </div>
+    <Container>
+      <div className="flex flex-col items-center">
+        <div className="mb-12 flex-row items-center justify-center text-center md:flex">
+          <h2 className="!my-0 text-4xl font-semibold">
+            <span className="text-sswRed">Featured Videos </span> from{" "}
+          </h2>{" "}
+          <Image
+            src="/images/sswtv_logo.png"
+            alt="SSW TV logo"
+            className="mx-auto shrink-0 grow-0 object-contain pl-4"
+            height={50}
+            width={200}
+          />
         </div>
-      </Container>
-    </section>
+        <section
+          data-tina-field={tinaField(
+            props.globalUserGroupInfo.youtubePlaylist,
+            "playlistId"
+          )}
+        >
+          {" "}
+          <YoutubePlaylistBlock {...youtubePlaylistProps} />
+        </section>
+      </div>
+    </Container>
   );
 };
 

diff --git a/components/util/videoCards.tsx b/components/util/videoCards.tsx
@@ -21,8 +21,7 @@ export const VideoCard: FC<VideoCardProps> = ({ link, title, theme }) => {
     <VideoModal
       url={link}
       className={
-        theme === "light" &&
-        "h-full !cursor-pointer rounded-sm border-1 border-gray-200"
+        theme === "light" && "h-full rounded-sm border-1 border-gray-200"
       }
     >
       <div className={classNames("flex justify-between bg-white p-5 h-full")}>

diff --git a/components/videoModal.tsx b/components/videoModal.tsx
@@ -75,7 +75,7 @@ export const VideoModal = ({
         className
       )}
     >
-      <div className="relative mx-auto aspect-video w-full">
+      <div className="relative mx-auto aspect-video w-full cursor-pointer">
         {!clicked ? (
           <div className="size-full" onClick={() => setClicked(true)}>
             {imageSrc && (

diff --git a/content/consulting/consulting.mdx b/content/consulting/consulting.mdx
@@ -76,7 +76,7 @@ If you are a new customer we need to schedule a free initial meeting. If you're
     <YoutubePlaylistBlock
     youtubePlaylist={{
     playlistId: "PLpiOR7CBNvlovBGeEB3vVhYzVWYnkFpA-",
-    numberOfVideos: 6
+    videosCount: 6
     }}
     />
   </>}

diff --git a/content/live/index.mdx b/content/live/index.mdx
@@ -7,9 +7,12 @@ sswTvButton:
 youtubePlaylist:
   title: Recent Broadcasts
   playlistId: PLpiOR7CBNvlpmhfwQeIVhbqZKxV-do0wY
-  numberOfVideos: 6
-  textForPlaylistLink: 'View more on Youtube'
+  videosCount: 6
+  playlistButton:
+    text: View more on Youtube
+    animated: false
 ---
+
 User Group Live
 
 Every 3rd Wednesday of the month at 6.30PM (Sydney time)

diff --git a/content/netug/global/global.json b/content/netug/global/global.json
@@ -60,23 +60,13 @@
     ],
     "random": false
   },
-  "videos": [
-    {
-      "link": "https://www.youtube.com/watch?v=dMgj1MdwrRE",
-      "title": "Pick a Side - Clean vs Vertical Slice Architecture | Luke Parker"
-    },
-    {
-      "link": "https://www.youtube.com/watch?v=gZ9VabDU81A",
-      "title": "Rules to Better Chat GPT and Using the Best API Ever | Adam Cogan"
-    },
-    {
-      "link": "https://www.youtube.com/watch?v=K1t73xArqs0",
-      "title": "Beyond Passwords: The Future (and Present) of Authentication | Matt Goldman"
+  "youtubePlaylist": {
+    "playlistId": "PLpiOR7CBNvlpmhfwQeIVhbqZKxV-do0wY",
+    "videosCount": 3,
+    "playlistButton": {
+      "text": "Watch more on the SSW TV YouTube channel",
+      "animated": true
     }
-  ],
-  "videosButton": {
-    "link": "https://www.youtube.com/watch?v=dMgj1MdwrRE&list=PLpiOR7CBNvlpmhfwQeIVhbqZKxV-do0wY",
-    "text": "Watch more on the SSW TV YouTube channel"
   },
   "joinUs": {
     "link": "https://ssw.com.au/netug/present",