From 1da246eb8addda7ebf1753f928c3a571e561ac44 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 11 Nov 2024 16:59:04 +0000 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + .../lib/govspeak/youtube-link-enhancement.js | 27 +++++++++++++++ .../components/govspeak/_media-player.scss | 17 ++++++++++ .../govspeak/youtube-link-enhancement-spec.js | 34 +++++++++++++------ 4 files changed, 69 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3965693ba4..1397cd4044 100644 --- 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 index 6079d76aef..052abdf8a0 100644 --- 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 = ` + How to watch this YouTube video + There's a YouTube video on this page. You can't access it because of your cookie settings. + You can change your cookie settings or watch the video on YouTube instead: + ${text} + ` + 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 index 416d0e5d21..74bb313207 100644 --- 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 index d0ae3980b8..ffb62dfebf 100644 --- 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,10 +77,12 @@ 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 = - '
' + - '

Agile at GDS

' + - '
' + container.innerHTML = ` +
+

Agile at GDS

+

What are the Discovery, Alpha, Beta and Live stages in developing a service?

+
+ ` document.body.appendChild(container) var element = document.querySelector('.gem-c-govspeak') @@ -88,7 +90,12 @@ describe('Youtube link enhancement', function () { 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,10 +175,12 @@ 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 = - '
' + - '

Agile at GDS

' + - '
' + container.innerHTML = ` +
+

Agile at GDS

+

What are the Discovery, Alpha, Beta and Live stages in developing a service?

+
+ ` document.body.appendChild(container) var element = document.querySelector('.gem-c-govspeak') @@ -179,7 +188,12 @@ describe('Youtube link enhancement', function () { 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?') }) })