From 2ac845641c8eea9e67f17a1d471cfb9bab459fd1 Mon Sep 17 00:00:00 2001 From: ASAP Date: Tue, 26 Jan 2016 12:28:57 -0500 Subject: [PATCH] Initial commit of soundcloud --- examples/soundcloud.amp.html | 28 ++++++ .../amp-soundcloud/0.1/amp-soundcloud.js | 96 +++++++++++++++++++ .../0.1/test/test-amp-soundcloud.js | 83 ++++++++++++++++ extensions/amp-soundcloud/amp-soundcloud.md | 52 ++++++++++ gulpfile.js | 2 + test/integration/test-example-validation.js | 2 + test/manual/amp-soundcloud.amp.html | 45 +++++++++ 7 files changed, 308 insertions(+) create mode 100644 examples/soundcloud.amp.html create mode 100644 extensions/amp-soundcloud/0.1/amp-soundcloud.js create mode 100644 extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js create mode 100644 extensions/amp-soundcloud/amp-soundcloud.md create mode 100644 test/manual/amp-soundcloud.amp.html diff --git a/examples/soundcloud.amp.html b/examples/soundcloud.amp.html new file mode 100644 index 000000000000..93b25ede178c --- /dev/null +++ b/examples/soundcloud.amp.html @@ -0,0 +1,28 @@ + + + + + Soundcloud examples + + + + + + + + + +

Soundcloud

+ + + + + + + diff --git a/extensions/amp-soundcloud/0.1/amp-soundcloud.js b/extensions/amp-soundcloud/0.1/amp-soundcloud.js new file mode 100644 index 000000000000..d3e7c11d6cff --- /dev/null +++ b/extensions/amp-soundcloud/0.1/amp-soundcloud.js @@ -0,0 +1,96 @@ +/** + * Copyright 2016 The AMP HTML Authors. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS-IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +/** + * @fileoverview Embeds a Soundcloud clip + * + * Example: + * + * + * + * + * + */ + +import {Layout} from '../../../src/layout'; +import {loadPromise} from '../../../src/event-helper'; + + +class AmpSoundcloud extends AMP.BaseElement { + + /** @override */ + preconnectCallback(onLayout) { + this.preconnect.url('https://api.soundcloud.com/', onLayout); + } + + /** @override */ + isLayoutSupported(layout) { + return layout == Layout.FIXED_HEIGHT; + } + + /**@override*/ + layoutCallback() { + const height = this.element.getAttribute('height'); + const color = this.element.getAttribute('data-color'); + const visual = this.element.getAttribute('data-visual'); + const url = "https://api.soundcloud.com/tracks/"; + const trackid = AMP.assert( + (this.element.getAttribute('data-trackid')), + 'The data-trackid attribute is required for %s', + this.element); + + const iframe = document.createElement('iframe'); + + iframe.setAttribute('frameborder', 'no'); + iframe.setAttribute('scrolling', 'no'); + iframe.src = "https://w.soundcloud.com/player/?" + + "url=" + encodeURIComponent(url + trackid); + + if (visual) { + iframe.src += "&visual=true"; + } else if (color) { + iframe.src += "&color=" + encodeURIComponent(color); + } + + this.applyFillContent(iframe); + iframe.height = height; + this.element.appendChild(iframe); + + /** @private {?Element} */ + this.iframe_ = iframe; + + return loadPromise(iframe); + } + + /** @override */ + documentInactiveCallback() { + if (this.iframe_ && this.iframe_.contentWindow) { + this.iframe_.contentWindow./*OK*/postMessage( + JSON.stringify({method: 'pause'}), + 'https://w.soundcloud.com'); + } + + return true; + } +}; + +AMP.registerElement('amp-soundcloud', AmpSoundcloud); diff --git a/extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js b/extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js new file mode 100644 index 000000000000..0dabca0d02be --- /dev/null +++ b/extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js @@ -0,0 +1,83 @@ +/** + * Copyright 2016 The AMP HTML Authors. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS-IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {createIframePromise} from '../../../../testing/iframe'; +require('../amp-soundcloud'); +import {adopt} from '../../../../src/runtime'; + +adopt(window); + +describe('amp-soundcloud', () => { + + const embedUrl = "https://w.soundcloud.com/player/?url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F243169232"; + + function getIns(trackid, optVisualMode, optColor, optFixedHeight) { + return createIframePromise().then(iframe => { + const ins = iframe.doc.createElement('amp-soundcloud'); + ins.setAttribute('data-trackid', trackid); + ins.setAttribute('height', '237'); + + // Optionals + if (optVisualMode) { + ins.setAttribute('data-visual', optVisualMode); + } + if (optColor) { + ins.setAttribute('data-color', optColor); + } + if (optFixedHeight) { + ins.setAttribute('layout', 'fixed-height'); + } + + return iframe.addElement(ins); + }); + } + + it('renders', () => { + return getIns('243169232').then(ins => { + const iframe = ins.firstChild; + expect(iframe).to.not.be.null; + expect(iframe.tagName).to.equal('IFRAME'); + expect(iframe.src).to.equal(embedUrl); + }); + }); + + it('renders fixed-height', () => { + return getIns('243169232', true, "FF0000", true).then(ins => { + expect(ins.className).to.match(/amp-layout-fixed-height/); + }); + }); + + it('ignores color in visual mode', () => { + return getIns('243169232', "true", '00FF00').then(ins => { + const iframe = ins.firstChild; + expect(iframe.src).to.include('visual=true'); + expect(iframe.src).not.to.include('color=00FF00'); + }); + }); + + it('renders without optional params', () => { + return getIns('243169232').then(ins => { + const iframe = ins.firstChild; + expect(iframe.src).not.to.include('&visual=true'); + expect(iframe.src).not.to.include('&color=FF0000'); + }); + }); + + it('renders data-trackid', () => { + expect(getIns('')).to.be.rejectedWith( + /The data-trackid attribute is required for/); + }); +}); diff --git a/extensions/amp-soundcloud/amp-soundcloud.md b/extensions/amp-soundcloud/amp-soundcloud.md new file mode 100644 index 000000000000..1e2b1952e32c --- /dev/null +++ b/extensions/amp-soundcloud/amp-soundcloud.md @@ -0,0 +1,52 @@ + + +### amp-soundcloud + +Displays a Soundcloud clip + +Example Visual Mode: +```html + +``` + +Example Classic Mode: +```html + +``` + +#### Attributes + +**data-trackid** + +The ID of the track. + +**data-visual** + +Displays full width "Visual" mode. + +**data-color** + +Custom color override. Only works with "Classic" Mode. Will be ignored in "Visual" Mode. + +**width and height** +Layout is `fixed-height` and will fill all the available horizontal space. This is ideal for `classic mode`, but for `visual-mode`, height is recommended to be 300px, 450px or 600px, as per Soundcloud embed code. This will allow the clip's internal elements to resize properly on mobile. diff --git a/gulpfile.js b/gulpfile.js index e766db42fadb..acc81e0b42cf 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -92,6 +92,7 @@ function buildExtensions(options) { buildExtension('amp-list', '0.1', false, options); buildExtension('amp-mustache', '0.1', false, options); buildExtension('amp-pinterest', '0.1', true, options); + buildExtension('amp-soundcloud', '0.1', false, options); buildExtension('amp-install-serviceworker', '0.1', false, options); /** * @deprecated `amp-slides` is deprecated and will be deleted before 1.0. @@ -342,6 +343,7 @@ function buildExamples(watch) { buildExample('pinterest.amp.html'); buildExample('released.amp.html'); buildExample('twitter.amp.html'); + buildExample('soundcloud.amp.html'); buildExample('user-notification.amp.html'); buildExample('vimeo.amp.html'); buildExample('vine.amp.html'); diff --git a/test/integration/test-example-validation.js b/test/integration/test-example-validation.js index b7a704e72385..1b7b01702534 100644 --- a/test/integration/test-example-validation.js +++ b/test/integration/test-example-validation.js @@ -52,6 +52,7 @@ describe('example', function() { 'facebook.amp.html', 'instagram.amp.html', 'released.amp.html', + 'soundcloud.amp.html', 'twitter.amp.html', 'vine.amp.html', 'vimeo.amp.html', @@ -68,6 +69,7 @@ describe('example', function() { */ const errorWhitelist = [ /invalid value \'.\/viewer-integr.js\'/, + /amp-soundcloud/, /vimeo/, ]; diff --git a/test/manual/amp-soundcloud.amp.html b/test/manual/amp-soundcloud.amp.html new file mode 100644 index 000000000000..18c3c952095e --- /dev/null +++ b/test/manual/amp-soundcloud.amp.html @@ -0,0 +1,45 @@ + + + + + amp-soundcloud + + + + + + + + + +

Soundcloud test

+ +

Visual Mode with Color

+ + + +

Classic (non-visual) Mode

+ + + +

Minimum Viable Clip

+ + + + + +