Enhance Youtube without cookies

- enhances the default appearance of a Youtube video link in govspeak when a user has not consented to cookies - previously this simply showed the default non-JS enhanced link to Youtube - now replaces it with a whole new element both linking to the video and the cookie settings page, explaining why the video is not shown embedded
alphagov · Nov 14, 2024 · 1da246e · 1da246e
1 parent ab1f20e
commit 1da246e
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Enhance Youtube without cookies ([PR #4388](https://github.com/alphagov/govuk_publishing_components/pull/4388))
 * Add component wrapper helper to the footer ([PR #4380](https://github.com/alphagov/govuk_publishing_components/pull/4380))
 * Add component wrapper to the inset text component ([PR #4387](https://github.com/alphagov/govuk_publishing_components/pull/4387))
 * Rename gem-print-link and gem-print-links-within ([PR #4375](https://github.com/alphagov/govuk_publishing_components/pull/4375))

diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js
@@ -12,13 +12,40 @@
     if (!this.campaignCookiesAllowed()) {
       this.start = this.startModule.bind(this)
       window.addEventListener('cookie-consent', this.start)
+      this.decorateLink()
       return
     }
     this.startModule()
   }
 
+  YoutubeLinkEnhancement.prototype.decorateLink = function () {
+    var $youtubeLinks = this.$element.querySelectorAll('a[href*="youtube.com"], a[href*="youtu.be"]')
+    for (var i = 0; i < $youtubeLinks.length; ++i) {
+      var $link = $youtubeLinks[i]
+      var $linkParent = $link.closest('p')
+      var href = $link.getAttribute('href')
+      var text = $link.textContent
+      var placeholder = document.createElement('p')
+      placeholder.setAttribute('class', 'gem-c-govspeak__youtube-placeholder govuk-body')
+      var markup = `
+        <span class="govuk-heading-s">How to watch this YouTube video</span>
+        <span class="gem-c-govspeak__youtube-placeholder-text">There's a YouTube video on this page. You can't access it because of your cookie settings.</span>
+        <span class="gem-c-govspeak__youtube-placeholder-text">You can <a href="/help/cookies" class="govuk-link">change your cookie settings</a> or watch the video on YouTube instead:</span>
+        <a href="${href}" class="govuk-link">${text}</a>
+      `
+      placeholder.innerHTML = markup
+      $linkParent.after(placeholder)
+      $linkParent.classList.add('gem-c-govspeak__youtube-placeholder-link')
+    }
+  }
+
   YoutubeLinkEnhancement.prototype.startModule = function () {
     window.removeEventListener('cookie-consent', this.start)
+    var $placeholders = this.$element.querySelectorAll('.gem-c-govspeak__youtube-placeholder')
+    for (var p = 0; p < $placeholders.length; ++p) {
+      $placeholders[p].remove()
+    }
+
     var $youtubeLinks = this.$element.querySelectorAll('a[href*="youtube.com"], a[href*="youtu.be"]')
 
     if ($youtubeLinks.length > 0) {

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss
@@ -31,3 +31,20 @@
     break-inside: avoid;
   }
 }
+
+.gem-c-govspeak__youtube-placeholder {
+  position: relative;
+  padding: govuk-spacing(6);
+  padding-bottom: govuk-spacing(8);
+  background: govuk-colour("light-grey");
+  border: solid 2px $govuk-border-colour;
+}
+
+.gem-c-govspeak__youtube-placeholder-text {
+  display: block;
+  margin-bottom: govuk-spacing(2);
+}
+
+.gem-c-govspeak__youtube-placeholder-link {
+  display: none;
+}
diff --git a/spec/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement-spec.js b/spec/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement-spec.js
@@ -77,18 +77,25 @@ describe('Youtube link enhancement', function () {
     it('doesn\'t replace links when a user has revoked campaign cookie consent', function () {
       window.GOVUK.cookie('cookies_policy', JSON.stringify({ campaigns: false }))
 
-      container.innerHTML =
-        '<div class="gem-c-govspeak">' +
-          '<p><a href="https://www.youtube.com/watch?v=0XpAtr24uUQ">Agile at GDS</a></p>' +
-        '</div>'
+      container.innerHTML = `
+        <div class="gem-c-govspeak">
+          <p><a href="https://www.youtube.com/watch?v=0XpAtr24uUQ">Agile at GDS</a></p>
+          <p><a href="https://youtu.be/_cyI7DMhgYc?si=A3Z-BiCIDRtOu27t">What are the Discovery, Alpha, Beta and Live stages in developing a service?</a></p>
+        </div>
+      `
       document.body.appendChild(container)
 
       var element = document.querySelector('.gem-c-govspeak')
       var enhancement = new GOVUK.GovspeakYoutubeLinkEnhancement(element)
       enhancement.init()
 
       expect(document.querySelectorAll('.gem-c-govspeak__youtube-video').length).toBe(0)
-      expect(document.querySelectorAll('.gem-c-govspeak p, .gem-c-govspeak a').length).toBe(2)
+      expect(document.querySelectorAll('.gem-c-govspeak .gem-c-govspeak__youtube-placeholder-link').length).toBe(2)
+      expect(document.querySelectorAll('.gem-c-govspeak__youtube-placeholder').length).toBe(2)
+      expect(document.querySelectorAll('.gem-c-govspeak__youtube-placeholder a[href="https://www.youtube.com/watch?v=0XpAtr24uUQ"]').length).toBe(1)
+      expect(document.querySelector('.gem-c-govspeak__youtube-placeholder a[href="https://www.youtube.com/watch?v=0XpAtr24uUQ"]').textContent).toBe('Agile at GDS')
+      expect(document.querySelectorAll('.gem-c-govspeak__youtube-placeholder a[href="https://youtu.be/_cyI7DMhgYc?si=A3Z-BiCIDRtOu27t"]').length).toBe(1)
+      expect(document.querySelector('.gem-c-govspeak__youtube-placeholder a[href="https://youtu.be/_cyI7DMhgYc?si=A3Z-BiCIDRtOu27t"]').textContent).toBe('What are the Discovery, Alpha, Beta and Live stages in developing a service?')
     })
   })
 
@@ -168,18 +175,25 @@ describe('Youtube link enhancement', function () {
     it('doesn\'t replace livestream links when a user has revoked campaign cookie consent', function () {
       window.GOVUK.cookie('cookies_policy', JSON.stringify({ campaigns: false }))
 
-      container.innerHTML =
-        '<div class="gem-c-govspeak">' +
-          '<p><a href="https://www.youtube.com/embed/live_stream?channel=UCoMdktPbSTixAyNGwb-UYkQ">Agile at GDS</a></p>' +
-        '</div>'
+      container.innerHTML = `
+        <div class="gem-c-govspeak">
+          <p><a href="https://www.youtube.com/embed/live_stream?channel=UCoMdktPbSTixAyNGwb-UYkQ">Agile at GDS</a></p>
+          <p><a href="https://www.youtube.com/embed/live_stream?channel=notarealchannel">What are the Discovery, Alpha, Beta and Live stages in developing a service?</a></p>
+        </div>
+      `
       document.body.appendChild(container)
 
       var element = document.querySelector('.gem-c-govspeak')
       var enhancement = new GOVUK.GovspeakYoutubeLinkEnhancement(element)
       enhancement.init()
 
       expect(document.querySelectorAll('.gem-c-govspeak__youtube-video').length).toBe(0)
-      expect(document.querySelectorAll('.gem-c-govspeak p, .gem-c-govspeak a').length).toBe(2)
+      expect(document.querySelectorAll('.gem-c-govspeak .gem-c-govspeak__youtube-placeholder-link').length).toBe(2)
+      expect(document.querySelectorAll('.gem-c-govspeak__youtube-placeholder').length).toBe(2)
+      expect(document.querySelectorAll('.gem-c-govspeak__youtube-placeholder a[href="https://www.youtube.com/embed/live_stream?channel=UCoMdktPbSTixAyNGwb-UYkQ"]').length).toBe(1)
+      expect(document.querySelector('.gem-c-govspeak__youtube-placeholder a[href="https://www.youtube.com/embed/live_stream?channel=UCoMdktPbSTixAyNGwb-UYkQ"]').textContent).toBe('Agile at GDS')
+      expect(document.querySelectorAll('.gem-c-govspeak__youtube-placeholder a[href="https://www.youtube.com/embed/live_stream?channel=notarealchannel"]').length).toBe(1)
+      expect(document.querySelector('.gem-c-govspeak__youtube-placeholder a[href="https://www.youtube.com/embed/live_stream?channel=notarealchannel"]').textContent).toBe('What are the Discovery, Alpha, Beta and Live stages in developing a service?')
     })
   })