Skip to content

Commit

Permalink
Merge pull request #4388 from alphagov/enhance-youtube-no-cookies
Browse files Browse the repository at this point in the history 
Enhance Youtube without cookies
  • Loading branch information
@andysellick
andysellick authored Nov 14, 2024
2 parents ab1f20e + 1da246e commit 337f68a
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 10 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
27 changes: 27 additions & 0 deletions app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
17 changes: 17 additions & 0 deletions app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
34 changes: 24 additions & 10 deletions spec/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?')
})
})

Expand Down Expand Up @@ -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?')
})
})

Expand Down

0 comments on commit 337f68a

Please sign in to comment.