Skip to content

Commit 932eb36

Browse files
molokomoloko
authored
v3+ compatible updates (#11)
* added 'skip to transcript' functionality * switch to using core code's `inview` completion * update to v4-style a11y * indentation, spacing tidy-up * default `_setCompletionOn` to 'play' for consistency * version bump
1 parent 1948d96 commit 932eb36

File tree

4 files changed

+44
-47
lines changed

4 files changed

+44
-47
lines changed

‎bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"type": "git",
55
"url": "git://github.com/cgkineo/adapt-youtube.git"
66
},
7-
"framework": ">=2.0.17",
8-
"version": "1.1.0",
7+
"framework": ">=3.3",
8+
"version": "1.2.0",
99
"homepage": "https://github.com/cgkineo/adapt-youtube",
1010
"displayName": "YouTube Player",
1111
"component": "youtube",

‎js/adapt-youtube.js

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ define([
99

1010
events: {
1111
'click .youtube-inline-transcript-button': 'onToggleInlineTranscript',
12-
'click .youtube-external-transcript-button': 'onExternalTranscriptClicked'
12+
'click .youtube-external-transcript-button': 'onExternalTranscriptClicked',
13+
'click .js-skip-to-transcript': 'onSkipToTranscript'
1314
},
1415

1516
initialize: function() {
@@ -67,28 +68,10 @@ define([
6768
},
6869

6970
setupEventListeners: function() {
70-
this.completionEvent = (!this.model.get('_setCompletionOn')) ? 'play' : this.model.get('_setCompletionOn');
71-
if (this.completionEvent === 'inview') {
72-
this.$('.component-widget').on('inview', this.onInview);
73-
}
74-
},
75-
76-
// TODO use the new core inview code instead (this will require FW dependency bump)
77-
onInview: function(event, visible, visiblePartX, visiblePartY) {
78-
if (visible) {
79-
if (visiblePartY === 'top') {
80-
this._isVisibleTop = true;
81-
} else if (visiblePartY === 'bottom') {
82-
this._isVisibleBottom = true;
83-
} else {
84-
this._isVisibleTop = true;
85-
this._isVisibleBottom = true;
86-
}
71+
this.completionEvent = (this.model.get('_setCompletionOn') || 'play');
8772

88-
if (this._isVisibleTop && this._isVisibleBottom) {
89-
this.$('.component-inner').off('inview');
90-
this.setCompletionStatus();
91-
}
73+
if (this.completionEvent === 'inview') {
74+
this.setupInviewCompletion('.component-widget');
9275
}
9376
},
9477

@@ -132,8 +115,8 @@ define([
132115
* https://code.google.com/p/gdata-issues/issues/detail?id=5788
133116
* but I haven't managed to get any of the workarounds to work... :-(
134117
*/
135-
onPlayerStateChange: function(event) {
136-
switch(event.data) {
118+
onPlayerStateChange: function(e) {
119+
switch(e.data) {
137120
case YT.PlayerState.PLAYING:
138121
Adapt.trigger('media:stop', this);
139122

@@ -160,8 +143,16 @@ define([
160143
}
161144
},
162145

146+
onSkipToTranscript: function() {
147+
// need slight delay before focussing button to make it work when JAWS is running
148+
// see https://github.com/adaptlearning/adapt_framework/issues/2427
149+
_.delay(function() {
150+
this.$('.media-transcript-container button').a11y_focus();
151+
}.bind(this), 250);
152+
},
153+
163154
onToggleInlineTranscript: function(e) {
164-
if (e) e.preventDefault();
155+
if (e && e.preventDefault) e.preventDefault();
165156

166157
var $transcriptBodyContainer = this.$('.youtube-inline-transcript-body-container');
167158
var $button = this.$('.youtube-inline-transcript-button');

‎properties.schema

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@
1010
"default": "Media component which displays a YouTube video. Select the play / pause button to watch it.",
1111
"inputType": "Text",
1212
"validators": []
13+
},
14+
"skipToTranscript": {
15+
"type": "string",
16+
"required": true,
17+
"default": "Skip to transcript",
18+
"inputType": "Text",
19+
"validators": [],
20+
"translatable": true
1321
}
1422
},
1523
"properties": {
@@ -31,7 +39,7 @@
3139
"type": "string",
3240
"required": true,
3341
"enum": ["inview", "play", "ended"],
34-
"default": "inview",
42+
"default": "play",
3543
"title": "Completion trigger",
3644
"inputType": {"type": "Select", "options":["inview", "play", "ended"]},
3745
"validators": ["required"],
@@ -52,7 +60,7 @@
5260
"help": "The 'embed' URL of the YouTube video you want to be displayed"
5361
},
5462
"_controls": {
55-
"type":"boolean",
63+
"type": "boolean",
5664
"required": false,
5765
"default": "true",
5866
"title": "Show Player Controls",
@@ -61,7 +69,7 @@
6169
"help": "Specifies whether or not the player controls are displayed."
6270
},
6371
"_allowFullscreen": {
64-
"type":"boolean",
72+
"type": "boolean",
6573
"required": false,
6674
"default": "true",
6775
"title": "Allow Fullscreen?",

‎templates/youtube.hbs

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,37 @@
1-
<div class="youtube-inner component-inner" role="region" aria-label="{{_globals._components._youtube.ariaRegion}}" {{#if _globals._components._youtube.ariaRegion}}tabindex="0"{{/if}}>
1+
{{import_globals}}
2+
<div class="youtube-inner component-inner">
23
{{> component this}}
4+
{{#any _transcript._externalTranscript _transcript._inlineTranscript}}
5+
<button class="aria-label js-skip-to-transcript" tabindex="-1" aria-label="{{_globals._components._youtube.skipToTranscript}}"></button>
6+
{{/any}}
37
<div class="youtube-widget component-widget">
48
<iframe width="640px" height="360px" style="width:100%;" src="{{_media._source}}?&autoplay={{#if _media._autoplay}}1{{else}}0{{/if}}&rel={{#if _media._showRelated}}1{{else}}0{{/if}}&loop={{#if _loop}}1{{else}}0{{/if}}&modestbranding={{#if _media._modestBranding}}1{{else}}0{{/if}}&color={{#if _media._progressColor}}{{_media._progressColor}}{{/if}}&controls={{#if _media._controls}}1{{else}}0{{/if}}&enablejsapi=1&playsinline=1&iv_load_policy={{#if _media._showAnnotations}}1{{else}}3{{/if}}" frameborder="0" {{#if _media._allowFullscreen}}allowfullscreen{{/if}}></iframe>
59

610
{{#if _transcript}}
711
<div class="youtube-transcript-container">
812
<div class="youtube-transcript-button-container">
913
{{#if _transcript._inlineTranscript}}
10-
<button class="youtube-inline-transcript-button button">
11-
<div class="transcript-text-container">
12-
{{#if _transcript.inlineTranscriptButton}}
13-
{{_transcript.inlineTranscriptButton}}
14-
{{else}}
15-
{{_transcript.transcriptLink}}
16-
{{/if}}
17-
</div>
14+
<button class="youtube-inline-transcript-button button" aria-expanded="false">
15+
<div class="transcript-text-container">{{_transcript.inlineTranscriptButton}}</div>
1816
</button>
1917
{{/if}}
2018
{{#if _transcript._externalTranscript}}
21-
<button onclick="top.window.open('{{_transcript.transcriptLink}}')" class="youtube-external-transcript-button button">
19+
<button onclick="top.window.open('{{_transcript.transcriptLink}}')" class="youtube-external-transcript-button button" role="link">
2220
<div class="transcript-text-container">
23-
{{#if _transcript.transcriptLinkButton}}
24-
{{_transcript.transcriptLinkButton}}
25-
{{else}}
26-
{{_transcript.transcriptLink}}
27-
{{/if}}
21+
{{#if _transcript.transcriptLinkButton}}
22+
{{_transcript.transcriptLinkButton}}
23+
{{else}}
24+
{{_transcript.transcriptLink}}
25+
{{/if}}
2826
</div>
2927
</button>
3028
{{/if}}
3129
</div>
3230

3331
{{#if _transcript._inlineTranscript}}
34-
<div class="youtube-inline-transcript-body-container">
32+
<div class="youtube-inline-transcript-body-container" role="region"{{#if _transcript.inlineTranscriptButton}} aria-label="{{_transcript.inlineTranscriptButton}}"{{/if}}>
3533
<div class="youtube-inline-transcript-body">
36-
{{{a11y_text _transcript.inlineTranscriptBody}}}
34+
{{{compile _transcript.inlineTranscriptBody}}}
3735
</div>
3836
</div>
3937
{{/if}}

0 commit comments

Comments
 (0)