From 2de06c4f4e39d95140833cfc6278cf201934e353 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <76488110+michael-odonovan@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:03:03 +0000
Subject: [PATCH 1/2] fix: SingleMessage video render issue - move id sourcing
 into own useEffect (#700)

* move id sourcing into own useEffect

* move id function further up

* fix old youtube links that don't work

* lint

* better file names

* sort id naming

* remove unused lodash import

* change !! to Boolean
---
 .../Molecules/SingleMessage/SingleMessage.js  | 56 ++++++++++---------
 .../Molecules/SingleMessage/SingleMessage.md  | 26 ++++++---
 .../SingleMessage/_ExampleYoutubeIds.js       | 10 ++++
 3 files changed, 58 insertions(+), 34 deletions(-)
 create mode 100644 src/components/Molecules/SingleMessage/_ExampleYoutubeIds.js

diff --git a/src/components/Molecules/SingleMessage/SingleMessage.js b/src/components/Molecules/SingleMessage/SingleMessage.js
index eb1b88200..c24ef83e0 100644
--- a/src/components/Molecules/SingleMessage/SingleMessage.js
+++ b/src/components/Molecules/SingleMessage/SingleMessage.js
@@ -35,7 +35,7 @@ const SingleMessage = ({
 }) => {
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
-  const hasVideo = !!(videoID !== null && videoID !== '');
+  const hasVideo = Boolean(videoID !== null && videoID !== '');
 
   // States to track video status
   const [isInitialised, setIsInitialised] = useState(false);
@@ -54,26 +54,36 @@ const SingleMessage = ({
         && /iPad|iPhone|iPod/.test(navigator.platform)
     : false;
 
-  // Break-out video markup into its own function
-  const renderVideoPlayers = thisRowID => {
-    // Store the dynamically-created UUID (from the main render func) in our state
-    // so useEffect can access it
-    const thisVideoID = `${thisRowID}__video`;
-
-    setUniqueID(thisVideoID);
-
-    return (
-      <VideoWrapper
-        isPlaying={isPlaying}
-        isBuffering={isBuffering}
-        key={thisVideoID}
-        landscapeVideo={landscapeVideo}
-      >
-        <div id={thisVideoID} />
-      </VideoWrapper>
-    );
+  /* Dynamically retrieve ID that Gatsby has already baked into the page,
+  need to null check for initial render */
+  const getID = refWithID => {
+    const thisID = refWithID !== null ? refWithID.getAttribute('id') : null;
+
+    return thisID;
   };
 
+  // Create the id string for the youtube video
+  useEffect(() => {
+    if (thisRef.current) {
+      const thisID = getID(thisRef.current);
+      if (thisID) {
+        setUniqueID(`${thisID}__video`);
+      }
+    }
+  }, [thisRef]);
+
+  // Break-out video markup into its own function
+  const renderVideoPlayers = () => (
+    <VideoWrapper
+      isPlaying={isPlaying}
+      isBuffering={isBuffering}
+      key={uniqueID}
+      landscapeVideo={landscapeVideo}
+    >
+      <div id={uniqueID} />
+    </VideoWrapper>
+  );
+
   /* Waiting on a usable ref from render before setting our flag used in other functions */
   useEffect(() => {
     setHasParentID(true);
@@ -115,14 +125,6 @@ const SingleMessage = ({
     setIsBuffering(true);
   };
 
-  /* Dynamically retrieve ID that Gatsby has already baked into the page,
-  need to null check for initial render */
-  const getID = refWithID => {
-    const thisID = refWithID !== null ? refWithID.getAttribute('id') : null;
-
-    return thisID;
-  };
-
   return (
     // Creates namespaced UUIDs for each row
     <UID name={id => `single-msg__${id}`}>
diff --git a/src/components/Molecules/SingleMessage/SingleMessage.md b/src/components/Molecules/SingleMessage/SingleMessage.md
index 694aedd53..fe9857b4b 100644
--- a/src/components/Molecules/SingleMessage/SingleMessage.md
+++ b/src/components/Molecules/SingleMessage/SingleMessage.md
@@ -124,7 +124,7 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - no top and bottom padding 
+Single Message with no Image - no top and bottom padding
 
 ```js
 import Text from '../../Atoms/Text/Text';
@@ -184,13 +184,15 @@ Single Message with 16:9 video
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[0]}
   landscapeVideo
 >
   <Text tag="p" color="black" size="xxl">
@@ -202,13 +204,15 @@ const defaultData = require('../../../styleguide/data/data').defaultData;
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={false}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[1]}
   landscapeVideo
 >
   <Text tag="p" color="black" size="xxl">
@@ -222,13 +226,15 @@ Single Message with portrait video
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="FoMlSB6ftQg"
+  videoID={exampleYoutubeIds[2]}
 >
   <Text tag="p" color="black" size="xxl">
     Single Message with portrait video
@@ -240,14 +246,16 @@ Single Message with portrait video, 100VH
 
 ```js
 import Text from '../../Atoms/Text/Text';
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="fwCQRMlKBnA"
+  videoID={exampleYoutubeIds[3]}
   vhFull
 >
   <Text tag="p" color="black" size="xxl">
@@ -261,13 +269,15 @@ Single Message with landscape video, 100VH, fullwidth image
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[4]}
   vhFull
   fullImage={true}
 >
@@ -283,13 +293,15 @@ Single Message with landscape video, 50VH, fullwidth image
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[5]}
   fullImage={true}
 >
   <Text tag="p" color="black" size="xxl">
diff --git a/src/components/Molecules/SingleMessage/_ExampleYoutubeIds.js b/src/components/Molecules/SingleMessage/_ExampleYoutubeIds.js
new file mode 100644
index 000000000..a6352e693
--- /dev/null
+++ b/src/components/Molecules/SingleMessage/_ExampleYoutubeIds.js
@@ -0,0 +1,10 @@
+const exampleYoutubeIds = [
+  'fwCQRMlKBnA',
+  'ZlGgFEDYKlY',
+  'yKADOGvq1Hs',
+  'Il9jhN2-PMA',
+  'So-GyrcQtK8',
+  'DjTmbU9nZNk'
+];
+
+export default exampleYoutubeIds;

From f1bc8f81f699f0f15c2e9117b947886f4ad70462 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <76488110+michael-odonovan@users.noreply.github.com>
Date: Fri, 31 Jan 2025 09:27:12 +0000
Subject: [PATCH 2/2] fix: update upload-artifact@v3 to v4 as recommended by
 github. (#702)

* update upload-artifact@v4

* Empty commit to trigger build
---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 98b2f7255..0e1c881b8 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -89,7 +89,7 @@ jobs:
 
       # Test run video was always captured, so this action uses "always()" condition
       - name: Upload videos
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report