Initial commit of soundcloud

ampproject · Feb 14, 2016 · 2ac8456 · 2ac8456
1 parent 402bb97
commit 2ac8456
Show file tree

Hide file tree

Showing 7 changed files with 308 additions and 0 deletions.
diff --git a/examples/soundcloud.amp.html b/examples/soundcloud.amp.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Soundcloud examples</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
+  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+
+  <h2>Soundcloud</h2>
+
+  <amp-soundcloud height="450"
+    layout="fixed-height"
+    data-trackid="243169232"
+    data-visual="true"></amp-soundcloud>
+
+  <amp-soundcloud height="166"
+    layout="fixed-height"
+    data-trackid="243169232"
+    data-color="336699"></amp-soundcloud>
+
+  </body>
+</html>
diff --git a/extensions/amp-soundcloud/0.1/amp-soundcloud.js 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:
+ * <code>
+ * <amp-soundcloud
+ *   height=166
+ *   data-trackid="243169232"
+ *   data-color="ff5500"
+ *   data-autoplay="true"
+ *   layout="fixed-height">
+ * </amp-soundcloud>
+ *
+ *
+ */
+
+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 <amp-soundcloud> %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
@@ -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
@@ -0,0 +1,52 @@
+<!---
+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.
+-->
+
+### <a name="amp-soundcloud"></a>amp-soundcloud
+
+Displays a Soundcloud clip
+
+Example Visual Mode:
+```html
+<amp-soundcloud height=657
+    layout="fixed-height"
+    data-trackid="243169232"
+    data-visual="true"></amp-soundcloud>
+```
+
+Example Classic Mode:
+```html
+<amp-soundcloud height=657
+    layout="fixed-height"
+    data-trackid="243169232"
+    data-color="ff5500"></amp-soundcloud>
+```
+
+#### 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
@@ -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
@@ -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
@@ -0,0 +1,45 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-soundcloud</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <script async custom-element="amp-soundcloud" src="../../dist/v0/amp-soundcloud-0.1.max.js"></script>
+  <style>
+    body {
+      max-width: 527px;
+      font-family: 'Questrial', Arial;
+    }
+  </style>
+  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
+  <script async src="../../dist/amp.js" development></script>
+</head>
+<body>
+  <h1>Soundcloud test</h1>
+
+  <h2>Visual Mode with Color</h2>
+
+  <amp-soundcloud height="450"
+    layout="fixed-height"
+    data-trackid="243169232"
+    data-color="0000FF"
+    data-visual="true"></amp-soundcloud>
+
+  <h2>Classic (non-visual) Mode</h2>
+
+  <amp-soundcloud height="166"
+    layout="fixed-height"
+    data-trackid="243169232"
+    data-color="336699"></amp-soundcloud>
+
+  <h2>Minimum Viable Clip</h2>
+
+  <amp-soundcloud height=166
+    layout="fixed-height"
+    data-trackid="243169232"></amp-soundcloud>
+</body>
+</html>
+
+