diff --git a/example.json b/example.json index 0bd72e8..8f427ed 100644 --- a/example.json +++ b/example.json @@ -5,15 +5,16 @@ "_classes": "", "_layout": "full", "_component": "youtube", - "title": "Karle pyar karle", - "displayTitle": "Karle pyar karle", - "body": "The legendary Asha Bosle…", + "title": "The first video on YouTube", + "displayTitle": "The first video on YouTube", + "body": "Entitled 'Me at the zoo', this was the first video ever uploaded to YouTube, by platform co-founder Jawed Karim", "instruction": "", "_setCompletionOn": "play", "_media": { - "_source": "//www.youtube.com/embed/mDa42EkgO1A", + "_source": "//www.youtube.com/embed/jNQXAC9IVRw", "_controls": true, "_allowFullscreen": true, + "_playsinline": false, "_aspectRatio": 1.33, "_autoplay": false, "_showRelated": false, diff --git a/js/YouTubeView.js b/js/YouTubeView.js new file mode 100644 index 0000000..ea3cca4 --- /dev/null +++ b/js/YouTubeView.js @@ -0,0 +1,176 @@ +import Adapt from 'core/js/adapt'; +import ComponentView from 'core/js/views/componentView'; + +export default class YouTubeView extends ComponentView { + + get template() { + return 'youtube'; + } + + events() { + return { + 'click .js-youtube-inline-transcript-toggle': 'onToggleInlineTranscript', + 'click .js-youtube-external-transcript-click': 'onExternalTranscriptClicked', + 'click .js-skip-to-transcript': 'onSkipToTranscript' + }; + } + + initialize() { + super.initialize(); + _.bindAll(this, 'onPlayerStateChange', 'onPlayerReady', 'onInview'); + this.player = null; + this.debouncedTriggerGlobalEvent = _.debounce(this.triggerGlobalEvent.bind(this), 1000); + if (window.onYouTubeIframeAPIReady !== undefined) return; + window.onYouTubeIframeAPIReady = () => { + Adapt.log.info('YouTube iframe API loaded'); + Adapt.youTubeIframeAPIReady = true; + Adapt.trigger('youTubeIframeAPIReady'); + }; + $.getScript('//www.youtube.com/iframe_api'); + } + + preRender() { + this.listenTo(Adapt, { + 'device:resize device:changed': this.setIFrameSize, + 'media:stop': this.onMediaStop + }); + } + + setIFrameSize() { + const $iframe = this.$('iframe'); + const widgetWidth = this.$('.component__widget').width(); + $iframe.width(widgetWidth); + // default aspect ratio to 16:9 if not specified + const aspectRatio = (parseFloat(this.model.get('_media')._aspectRatio) || 1.778); + if (isNaN(aspectRatio)) return; + $iframe.height(widgetWidth / aspectRatio); + } + + postRender() { + // for HTML/HBS parameters: https://developers.google.com/youtube/player_parameters + if (!this.model.get('_media')?._source) { + this.setReadyStatus(); + this.model.setCompletionStatus(); + return; + } + if (Adapt.youTubeIframeAPIReady === true) { + this.onYouTubeIframeAPIReady(); + return; + } + this.listenToOnce(Adapt, 'youTubeIframeAPIReady', this.onYouTubeIframeAPIReady); + } + + remove() { + if (this.player !== null) { + this.player.destroy(); + } + super.remove(); + } + + setupEventListeners() { + this.completionEvent = (this.model.get('_setCompletionOn') || 'play'); + if (this.completionEvent !== 'inview') return; + this.setupInviewCompletion('.component__widget'); + } + + onYouTubeIframeAPIReady() { + this.player = new window.YT.Player(this.$('iframe').get(0), { + events: { + onStateChange: this.onPlayerStateChange, + onReady: this.onPlayerReady + } + }); + this.isPlaying = false; + this.setReadyStatus(); + this.setupEventListeners(); + this.setIFrameSize(); + } + + onMediaStop(view) { + // if it was this view that triggered the media:stop event, ignore it + if (view && view.cid === this.cid) return; + if (!this.isPlaying) return; + this.player.pauseVideo(); + } + + onPlayerReady() { + if (!this.model.get('_media')._playbackQuality) return; + this.player.setPlaybackQuality(this.model.get('_media')._playbackQuality); + } + + /** + * this seems to have issues in Chrome if the user is logged into YouTube (possibly any Google account) - the API just doesn't broadcast the events + * but instead throws the error: + * Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com'). + * This is documented here: + * https://code.google.com/p/gdata-issues/issues/detail?id=5788 + * but I haven't managed to get any of the workarounds to work... :-( + */ + onPlayerStateChange(e) { + switch (e.data) { + case window.YT.PlayerState.PLAYING: + Adapt.trigger('media:stop', this); + this.debouncedTriggerGlobalEvent('play');// use debounced version because seeking whilst playing will trigger two 'play' events + this.isPlaying = true; + if (this.model.get('_setCompletionOn') === 'play') { + this.setCompletionStatus(); + } + break; + case window.YT.PlayerState.PAUSED: + this.isPlaying = false; + this.triggerGlobalEvent('pause'); + break; + case window.YT.PlayerState.ENDED: + this.triggerGlobalEvent('ended'); + if (this.model.get('_setCompletionOn') === 'ended') { + this.setCompletionStatus(); + } + break; + } + } + + onSkipToTranscript() { + // need slight delay before focussing button to make it work when JAWS is running + // see https://github.com/adaptlearning/adapt_framework/issues/2427 + _.delay(() => { + Adapt.a11y.focusFirst(this.$('.youtube__transcript-btn'), { defer: true }); + }, 250); + } + + onToggleInlineTranscript(e) { + if (e && e.preventDefault) e.preventDefault(); + + const $transcriptBodyContainer = this.$('.youtube__transcript-body-inline'); + const $button = this.$('.youtube__transcript-btn-inline'); + const $buttonText = $button.find('.youtube__transcript-btn-text'); + const config = this.model.get('_transcript'); + const shouldOpen = !$transcriptBodyContainer.hasClass('inline-transcript-open'); + const buttonText = shouldOpen ? + config.inlineTranscriptCloseButton : + config.inlineTranscriptButton; + + $transcriptBodyContainer + .stop(true).slideToggle(() => $(window).resize()) + .toggleClass('inline-transcript-open', shouldOpen); + $button.attr('aria-expanded', shouldOpen); + $buttonText.html(buttonText); + + if (!shouldOpen || config._setCompletionOnView === false) return; + this.setCompletionStatus(); + } + + onExternalTranscriptClicked() { + if (this.model.get('_transcript')._setCompletionOnView === false) return; + this.setCompletionStatus(); + } + + triggerGlobalEvent(eventType) { + Adapt.trigger('media', { + isVideo: true, + type: eventType, + src: this.model.get('_media')._source, + platform: 'YouTube' + }); + } + +} diff --git a/js/adapt-youtube.js b/js/adapt-youtube.js index 95c9eeb..5d681bc 100644 --- a/js/adapt-youtube.js +++ b/js/adapt-youtube.js @@ -1,192 +1,6 @@ import Adapt from 'core/js/adapt'; -import ComponentView from 'core/js/views/componentView'; import ComponentModel from 'core/js/models/componentModel'; - -class YouTubeView extends ComponentView { - - get template() { - return 'youtube'; - } - - events() { - return { - 'click .js-youtube-inline-transcript-toggle': 'onToggleInlineTranscript', - 'click .js-youtube-external-transcript-click': 'onExternalTranscriptClicked', - 'click .js-skip-to-transcript': 'onSkipToTranscript' - }; - } - - initialize() { - super.initialize(); - - _.bindAll(this, 'onPlayerStateChange', 'onPlayerReady', 'onInview'); - - this.player = null; - this.debouncedTriggerGlobalEvent = _.debounce(this.triggerGlobalEvent.bind(this), 1000); - - if (window.onYouTubeIframeAPIReady !== undefined) return; - window.onYouTubeIframeAPIReady = () => { - Adapt.log.info('YouTube iframe API loaded'); - Adapt.youTubeIframeAPIReady = true; - Adapt.trigger('youTubeIframeAPIReady'); - }; - $.getScript('//www.youtube.com/iframe_api'); - } - - preRender() { - this.listenTo(Adapt, { - 'device:resize device:changed': this.setIFrameSize, - 'media:stop': this.onMediaStop - }); - } - - setIFrameSize() { - const $iframe = this.$('iframe'); - const widgetWidth = this.$('.component__widget').width(); - - $iframe.width(widgetWidth); - - // default aspect ratio to 16:9 if not specified - const aspectRatio = parseFloat(this.model.get('_media')._aspectRatio) || 1.778; - if (isNaN(aspectRatio)) return; - $iframe.height(widgetWidth / aspectRatio); - } - - postRender() { - // for HTML/HBS parameters: https://developers.google.com/youtube/player_parameters - if (Adapt.youTubeIframeAPIReady === true) { - this.onYouTubeIframeAPIReady(); - return; - } - Adapt.once('youTubeIframeAPIReady', this.onYouTubeIframeAPIReady, this); - } - - remove() { - if (this.player !== null) { - this.player.destroy(); - } - - super.remove(); - } - - setupEventListeners() { - this.completionEvent = (this.model.get('_setCompletionOn') || 'play'); - - if (this.completionEvent !== 'inview') return; - this.setupInviewCompletion('.component__widget'); - } - - onYouTubeIframeAPIReady() { - this.player = new window.YT.Player(this.$('iframe').get(0), { - events: { - onStateChange: this.onPlayerStateChange, - onReady: this.onPlayerReady - } - }); - - this.isPlaying = false; - - this.setReadyStatus(); - - this.setupEventListeners(); - - this.setIFrameSize(); - } - - onMediaStop(view) { - // if it was this view that triggered the media:stop event, ignore it - if (view && view.cid === this.cid) return; - - if (!this.isPlaying) return; - this.player.pauseVideo(); - } - - onPlayerReady() { - if (!this.model.get('_media')._playbackQuality) return; - this.player.setPlaybackQuality(this.model.get('_media')._playbackQuality); - } - - /** - * this seems to have issues in Chrome if the user is logged into YouTube (possibly any Google account) - the API just doesn't broadcast the events - * but instead throws the error: - * Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com'). - * This is documented here: - * https://code.google.com/p/gdata-issues/issues/detail?id=5788 - * but I haven't managed to get any of the workarounds to work... :-( - */ - onPlayerStateChange(e) { - switch (e.data) { - case window.YT.PlayerState.PLAYING: - Adapt.trigger('media:stop', this); - - this.debouncedTriggerGlobalEvent('play');// use debounced version because seeking whilst playing will trigger two 'play' events - - this.isPlaying = true; - - if (this.model.get('_setCompletionOn') === 'play') { - this.setCompletionStatus(); - } - break; - case window.YT.PlayerState.PAUSED: - this.isPlaying = false; - - this.triggerGlobalEvent('pause'); - break; - case window.YT.PlayerState.ENDED: - this.triggerGlobalEvent('ended'); - - if (this.model.get('_setCompletionOn') === 'ended') { - this.setCompletionStatus(); - } - break; - } - } - - onSkipToTranscript() { - // need slight delay before focussing button to make it work when JAWS is running - // see https://github.com/adaptlearning/adapt_framework/issues/2427 - _.delay(() => { - Adapt.a11y.focusFirst(this.$('.youtube__transcript-btn'), { defer: true }); - }, 250); - } - - onToggleInlineTranscript(e) { - if (e && e.preventDefault) e.preventDefault(); - - const $transcriptBodyContainer = this.$('.youtube__transcript-body-inline'); - const $button = this.$('.youtube__transcript-btn-inline'); - const $buttonText = $button.find('.youtube__transcript-btn-text'); - const config = this.model.get('_transcript'); - const shouldOpen = !$transcriptBodyContainer.hasClass('inline-transcript-open'); - const buttonText = shouldOpen ? - config.inlineTranscriptCloseButton : - config.inlineTranscriptButton; - - $transcriptBodyContainer - .stop(true).slideToggle(() => $(window).resize()) - .toggleClass('inline-transcript-open', shouldOpen); - $button.attr('aria-expanded', shouldOpen); - $buttonText.html(buttonText); - - if (!shouldOpen || config._setCompletionOnView === false) return; - this.setCompletionStatus(); - } - - onExternalTranscriptClicked() { - if (this.model.get('_transcript')._setCompletionOnView === false) return; - this.setCompletionStatus(); - } - - triggerGlobalEvent(eventType) { - Adapt.trigger('media', { - isVideo: true, - type: eventType, - src: this.model.get('_media')._source, - platform: 'YouTube' - }); - } - -} +import YouTubeView from './YouTubeView'; export default Adapt.register('youtube', { model: ComponentModel.extend({}), diff --git a/properties.schema b/properties.schema index 08d366c..d46595b 100644 --- a/properties.schema +++ b/properties.schema @@ -53,16 +53,19 @@ "_source": { "type": "string", "required": true, - "default": "//www.youtube.com/embed/6qzOMCIlzt4", + "default": "", "title": "Source URL", "inputType": "Text", + "editorAttrs": { + "placeholder": "//www.youtube.com/embed/jNQXAC9IVRw" + }, "validators": [], "help": "The 'embed' URL of the YouTube video you want to be displayed" }, "_controls": { "type": "boolean", "required": false, - "default": "true", + "default": true, "title": "Show Player Controls", "inputType": "Checkbox", "validators": [], @@ -71,11 +74,19 @@ "_allowFullscreen": { "type": "boolean", "required": false, - "default": "true", + "default": true, "title": "Allow Fullscreen?", "inputType": "Checkbox", "validators": [] }, + "_playsinline": { + "type": "boolean", + "required": false, + "default": false, + "title": "If enabled, videos will play 'inline' on iPhones (the same way they do on iPads).", + "inputType": "Checkbox", + "validators": [] + }, "_aspectRatio": { "type": "number", "required": false, @@ -88,7 +99,7 @@ "_autoplay": { "type": "boolean", "required": false, - "default": "false", + "default": false, "title": "Autoplay", "inputType": "Checkbox", "validators": [], @@ -97,7 +108,7 @@ "_showRelated": { "type": "boolean", "required": false, - "default": "false", + "default": false, "title": "Show related videos", "inputType": "Checkbox", "validators": [], @@ -106,7 +117,7 @@ "_loop": { "type": "boolean", "required": false, - "default": "false", + "default": false, "title": "Loop", "inputType": "Checkbox", "validators": [], @@ -115,7 +126,7 @@ "_modestBranding": { "type": "boolean", "required": false, - "default": "true", + "default": true, "title": "Modest branding", "inputType": "Checkbox", "validators": [], @@ -137,7 +148,7 @@ "_showAnnotations": { "type": "boolean", "required": false, - "default": "false", + "default": false, "title": "Video annotations", "inputType": "Checkbox", "validators": [], diff --git a/templates/youtube.hbs b/templates/youtube.hbs index 0ceda07..9aba031 100644 --- a/templates/youtube.hbs +++ b/templates/youtube.hbs @@ -9,7 +9,23 @@
- + {{#if _media._source}} + + {{else}} + ERROR: No media source set! + {{/if}}