Skip to content
This repository has been archived by the owner on May 10, 2023. It is now read-only.

Commit

Permalink
Merge pull request #430 from minvws/develop
Browse files Browse the repository at this point in the history 
Versie 5.0.12
  • Loading branch information
@mellewynia
mellewynia authored Oct 26, 2020
2 parents 42a03c0 + 05072e6 commit b0aee51
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 12 deletions.
20 changes: 18 additions & 2 deletions _data/translations.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ english:
tr: (ingilizce)

info-lead:
nl: Het coronavirus is er nog altijd. Dus is het belangrijk om juist nu alert te blijven. Daarom is CoronaMelder nu te gebruiken voor heel Nederland. Op 22 oktober hadden <strong>3.474.068</strong> mensen de app gedownload.
nl: Het coronavirus is er nog altijd. Dus is het belangrijk om juist nu alert te blijven. Daarom is CoronaMelder nu te gebruiken voor heel Nederland. Op 25 oktober hadden <strong>3.555.602</strong> mensen de app gedownload.
en: Coronavirus is still around and we need to stay alert, especially right now. The CoronaMelder app can help us all to do this and it is now available throughout the whole of the Netherlands.
ar: لا يزال فيروس كورونا موجودًا حتى يومنا هذا. من المهم إذًا أن تبقى يقظًا الآن. لذلك أصبح CoronaMelder متاحًا في هولندا كلها.
bg: Коронавирусът е все още тук. От особена важност сега е да запазиш бдителността си. Именно за тази цел приложението CoronaMelder вече е достъпно в цяла Нидерландия.
Expand Down Expand Up @@ -919,7 +919,23 @@ information-gps:

# Media element (used for videos)
# See _includes/components/mediaplayer.html


mediaelement-btn-enable-caption:
nl: Zet ondertiteling (CC) aan
en: Enable subtitles (CC)

mediaelement-btn-disable-caption:
nl: Zet ondertiteling (CC) uit
en: Disable subtitles (CC)

mediaelement-btn-enable-audio-description:
nl: Zet audiodescriptie (AD) aan
en: Enable audio description (AD)

mediaelement-btn-disable-audio-description:
nl: Zet audiodescriptie (AD) uit
en: Disable audio description (AD)

mediaelement-download-title:
nl: Download deze video
en: Download this video
Expand Down
4 changes: 4 additions & 0 deletions _includes/components/mediaelement.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
poster="{{ site.baseurl }}/{{ site.data.videos[include.key].video-preview-image['default'] }}"
data-audio-description='[{"src": "{{ site.baseurl }}/{{ site.data.videos[include.key].mp3-voiceover-src['default'] }}", "type": "audio/mp3"}]'
data-audio-description-voiceover="true"
data-translation-enable-caption="{{ site.data.translations.mediaelement-btn-enable-caption[page.lang] }}"
data-translation-disable-caption="{{ site.data.translations.mediaelement-btn-disable-caption[page.lang] }}"
data-translation-enable-audio-description="{{ site.data.translations.mediaelement-btn-enable-audio-description[page.lang] }}"
data-translation-disable-audio-description="{{ site.data.translations.mediaelement-btn-disable-audio-description[page.lang] }}"
>
<source type="video/mp4" src="{{ site.baseurl }}/{{ site.data.videos[include.key].mp4-src['default'] }}" />
{% for subtitle in site.data.videos[include.key].subtitles %}
Expand Down
1 change: 0 additions & 1 deletion _layouts/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@
</div>
</div>
</div>

</div>
{% include stories.html %}
{% include badges.html class="layout-app-badges--center-wrap" huawei="true" %}
Expand Down
3 changes: 2 additions & 1 deletion css-rtl/_footer-rtl.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@
width: 10px;
background: url(../img/chevron-left-white.svg) no-repeat 50% 50%;
transition: var(--transition-out);
padding: 10px;
display: inline-block;
margin-left: 5px;
}
}

Expand Down
3 changes: 2 additions & 1 deletion css/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,8 @@
width: 10px;
background: url(../img/chevron-right-white.svg) no-repeat 50% 50%;
transition: var(--transition-out);
padding: 10px;
display: inline-block;
margin-right: 5px;
}

h3 {
Expand Down
3 changes: 0 additions & 3 deletions css/_statements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,6 @@
display: block;
border: 0;
border-radius: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
padding: 0.8em 0.5em 1em 85px;
margin: 0;
Expand Down
25 changes: 23 additions & 2 deletions css/_video.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
ul {
margin: 14px 0 14px 20px;
}
}
}
}

.mejs__container {
Expand All @@ -81,6 +81,12 @@
text-indent: 0;
vertical-align: top;
margin-bottom: 40px;

&.focus-visible {
outline: 2px solid $color-focus;
outline-offset: 4px;
transition: 100ms ease-out;
}
}

.component-mediaelement .mejs__controls {
Expand Down Expand Up @@ -108,6 +114,17 @@
.mejs__overlay-button {
background-image: url('../img/play.svg');
background-position: center center;
transition: 162ms ease-out;

.mejs__container.focus-visible &,
&:focus {
transform: scale(1.26);
}

&:focus {
outline: 2px solid yellow;
outline-offset: 4px;
}
}

.mejs__overlay:hover > .mejs__overlay-button {
Expand Down Expand Up @@ -180,4 +197,8 @@ details.component-mediaelement__details[open] {
&.mejs__captions-enabled {
opacity: 1;
}
}
}

.mejs__captions-selector.mejs__offscreen {
display: none;
}
67 changes: 65 additions & 2 deletions js/mediaplayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,72 @@
shimScriptAccess: 'always',
features: ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'a11y', 'fullscreen'],
alwaysShowControls: true,
toggleCaptionsButtonWhenOnlyOne: true,
toggleCaptionsButtonWhenOnlyOne: true, // Note: >2 captions? Refactor accessibleCaptionButton()
success: function(mediaElement, originalNode, instance) {


// See <git>/_includes/_components/mediaelement.html
var translations = {
btnEnableCaption: originalNode.dataset.translationEnableCaption,
btnDisableCaption: originalNode.dataset.translationDisableCaption,
btnEnableAudioDescription: originalNode.dataset.translationEnableAudioDescription,
btnDisableAudioDescription: originalNode.dataset.translationDisableAudioDescription
};

// Subtitle toggle
// WCAG 4.1.2: label button correctly
// WCAG 2.1.4: toggle by space bar without pausing video
accessibleCaptionButton();
instance.controls.querySelector('.mejs__captions-button button')
.addEventListener('click', function() { setTimeout(accessibleCaptionButton, 50); });
instance.controls.querySelector('.mejs__captions-button button')
.addEventListener('keydown', function($e) {
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
});

function accessibleCaptionButton() {
var btn = instance.controls.querySelector('.mejs__captions-button button');
var enabled = btn.parentElement.classList.contains('mejs__captions-enabled');
var btnText = enabled ? translations.btnDisableCaption : translations.btnEnableCaption;
btn.setAttribute('aria-pressed', enabled);
btn.setAttribute('title', btnText);
btn.setAttribute('aria-label', btnText);
btn.textContent = btnText;
}

// Audio (mute) toggle
// WCAG 2.1.4: toggle by space bar without pausing video
instance.controls.querySelector('.mejs__volume-button button')
.addEventListener('keydown', function($e) {
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
});

// Audio description toggle
// WCAG 4.1.2: label button correctly
// WCAG 2.1.4: toggle by space bar without pausing video
accessibleAudioDescriptionButton();
instance.controls.querySelector('.mejs__audio-description-button button')
.addEventListener('click', function() { setTimeout(accessibleAudioDescriptionButton, 50); });
instance.controls.querySelector('.mejs__audio-description-button button')
.addEventListener('keydown', function($e) {
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
});

function accessibleAudioDescriptionButton() {
var btn = instance.controls.querySelector('.mejs__audio-description-button button');
var enabled = btn.parentElement.classList.contains('audio-description-on');
var btnText = enabled ? translations.btnDisableAudioDescription : translations.btnEnableAudioDescription;
btn.setAttribute('aria-pressed', enabled);
btn.setAttribute('title', btnText);
btn.setAttribute('aria-label', btnText);
btn.textContent = btnText;
}

// Audio (mute) toggle
// WCAG 2.1.4: toggle by space bar without pausing video
instance.controls.querySelector('.mejs__fullscreen-button button')
.addEventListener('keydown', function($e) {
if ($e.code === 'Space') { $e.stopPropagation(); } // Automatically generates click
});
}
});
}
Expand Down

0 comments on commit b0aee51

Please sign in to comment.