Skip to content

Commit

Permalink
Amp-playbuzz item-id support (ampproject#7450)
Browse files Browse the repository at this point in the history 
* Added amp-playbuzz item id support

* Fixed amp-playbuzz preconnect

* Added item-id to documentation

* Added important remark to documentation

* Refactored amp-playbuzz iframe src compose logic
  • Loading branch information
@mrjoro
Dan Mordechay authored and mrjoro committed Apr 28, 2017
1 parent 7b29093 commit a2d7627
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 32 deletions.
2 changes: 1 addition & 1 deletion examples/playbuzz.amp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h2>Some Article</h2>

<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis arcu, vehicula sed pretium eget, pulvinar eu elit. Ut nibh nulla, pharetra at tristique at, pharetra et mi. Ut elementum quam eu feugiat varius. Vestibulum dui ligula, dapibus at suscipit venenatis, elementum vitae libero. Vivamus efficitur nibh et tortor semper, sit amet interdum augue tempor. Nulla vitae tempus dolor, ac molestie odio. Cras cursus, lectus ac consectetur scelerisque, mi arcu egestas velit, ac ultricies est mi aliquam enim. Aenean ac neque in arcu euismod ornare. Fusce sodales massa ac lectus finibus rutrum. Nunc laoreet nunc id rutrum vehicula. Sed tempor turpis posuere, auctor elit quis, ultricies ligula. Maecenas posuere pulvinar mi, ac congue nulla placerat nec.</p>
<amp-playbuzz
src="https://www.playbuzz.com/wespeakmusic10/can-you-name-these-debut-albums"
data-item="a6aa5a14-8888-4618-b2e3-fe6a30d8c51b"
layout="responsive"
height="300"
width="300"
Expand Down
27 changes: 18 additions & 9 deletions extensions/amp-playbuzz/0.1/amp-playbuzz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@
/**
* @fileoverview Embeds an playbuzz item.
* The src attribute can be easily copied from a normal playbuzz URL.
* data-item supports item id which can be taken from the item's embed code
* in case both are present data-item will be used
* Example:
* <code>
<amp-playbuzz
src="http://www.playbuzz.com/perezhilton/poll-which-presidential-candidate-did-ken-bone-vote-for"
data-item="a6aa5a14-8888-4618-b2e3-fe6a30d8c51b"
layout="responsive"
height="300"
width="300"
Expand Down Expand Up @@ -65,9 +68,6 @@ class AmpPlaybuzz extends AMP.BaseElement {
/** @private {?Promise} */
this.iframePromise_ = null;

/** @private {?string} */
this.item_ = '';

/** @private {?number} */
this.itemHeight_ = 300; //default

Expand All @@ -90,7 +90,7 @@ class AmpPlaybuzz extends AMP.BaseElement {
* @override
*/
preconnectCallback() {
this.preconnect.url(this.item_);
this.preconnect.url(this.iframeSrcUrl_);
}

/** @override */
Expand All @@ -106,10 +106,20 @@ class AmpPlaybuzz extends AMP.BaseElement {
`Enable ${EXPERIMENT} experiment`);

const e = this.element;
const src = e.getAttribute('src');
const itemId = e.getAttribute('data-item');

user().assert(src || itemId,
'Either src or data-item attribute is required for <amp-playbuzz> %s',
this.element);

if (src) {
assertAbsoluteHttpOrHttpsUrl(src);
}

this.item_ = assertAbsoluteHttpOrHttpsUrl(e.getAttribute('src'));
const parsedHeight = parseInt(e.getAttribute('height'), 10);

this.iframeSrcUrl_ = utils.composeItemSrcUrl(src, itemId);
this.itemHeight_ = isNaN(parsedHeight) ? this.itemHeight_ : parsedHeight;
this.displayItemInfo_ = e.getAttribute('data-item-info') === 'true';
this.displayShareBar_ = e.getAttribute('data-share-buttons') === 'true';
Expand Down Expand Up @@ -200,7 +210,7 @@ class AmpPlaybuzz extends AMP.BaseElement {
createElement('div', 'pb_feed_placeholder_inner',
createElement('div', 'pb_feed_placeholder_content',
createElement('div', 'pb_feed_placeholder_preloader', loaderImage)
)));
)));

return loadingPlaceholder;
}
Expand Down Expand Up @@ -240,11 +250,10 @@ class AmpPlaybuzz extends AMP.BaseElement {
*
*/
generateEmbedSourceUrl_() {
const itemSrc = parseUrl(this.item_);
const winUrl = this.win.location;
const params = {
itemUrl: removeFragment(itemSrc.href).replace(itemSrc.protocol, ''), //remove scheme (cors) & fragment
relativeUrl: itemSrc.pathname,
itemUrl: this.iframeSrcUrl_,
relativeUrl: parseUrl(this.iframeSrcUrl_).pathname,
displayItemInfo: this.displayItemInfo_,
displayShareBar: this.displayShareBar_,
displayComments: this.displayComments_,
Expand Down
67 changes: 54 additions & 13 deletions extensions/amp-playbuzz/0.1/test/test-amp-playbuzz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,29 @@ describe('amp-playbuzz', () => {
};
}

function getIns(itemUrl, params, opt_responsive, opt_beforeLayoutCallback) {
function createItemSrc() {
return {
withUrl: function(itemUrl) {
this.itemUrl = itemUrl;
return this;
},
withItemId: function(itemId) {
this.itemId = itemId;
return this;
},
};
}

function getIns(itemSrc, params, opt_responsive, opt_beforeLayoutCallback) {
return createIframePromise(true, opt_beforeLayoutCallback).then(iframe => {
doNotLoadExternalResourcesInTest(iframe.win);
const ins = iframe.doc.createElement('amp-playbuzz');
ins.setAttribute('src', itemUrl);
if (itemSrc.itemUrl) {
ins.setAttribute('src', itemSrc.itemUrl);
}
if (itemSrc.itemId) {
ins.setAttribute('data-item', itemSrc.itemId);
}
ins.setAttribute('width', '111');
ins.setAttribute('height', '222');
ins.setAttribute('alt', 'Testing');
Expand All @@ -62,8 +80,7 @@ describe('amp-playbuzz', () => {
});
}

function testIframe(iframe) {
const itemSrcUrl = '//www.playbuzz.com/bob/bobs-life';
function testIframe(iframe, itemSrcUrl) {
expect(iframe).to.not.be.null;
expect(startsWith(iframe.src, itemSrcUrl)).to.be.true;
expect(iframe.className).to.match(/i-amphtml-fill-content/);
Expand All @@ -76,28 +93,50 @@ describe('amp-playbuzz', () => {
});

it('renders', () => {
return getIns('https://www.playbuzz.com/bob/bobs-life').then(ins => {
const src = createItemSrc().withUrl('https://www.playbuzz.com/bob/bobs-life');
return getIns(src).then(ins => {
const iframe = ins.querySelector('iframe');
testIframe(iframe);
testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
// TODO: test playbuzz placeholder loader
});
});

it('renders with false for each optional param', () => {
return getIns('https://www.playbuzz.com/bob/bobs-life').then(ins => {
const src = createItemSrc().withUrl('https://www.playbuzz.com/bob/bobs-life');
return getIns(src).then(ins => {
const iframe = ins.querySelector('iframe');
testIframe(iframe);
testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
expect(iframe.src)
.to.contain('&useComments=false')
.and.to.contain('&gameInfo=false')
.and.to.contain('&useShares=false');
});
});

it('renders with item id instead of src', () => {
const src = createItemSrc().withItemId('some-item-id');
return getIns(src).then(ins => {
const iframe = ins.querySelector('iframe');
testIframe(iframe, '//www.playbuzz.com/item/some-item-id');
});
});

it('renders with item id when submitted both with item url & item id', () => {
const src = createItemSrc()
.withUrl('https://www.playbuzz.com/bob/bobs-life')
.withItemId('some-item-id');

return getIns(src).then(ins => {
const iframe = ins.querySelector('iframe');
testIframe(iframe, '//www.playbuzz.com/item/some-item-id');
});
});

it('renders with true for each true optional param', () => {
return getIns('https://www.playbuzz.com/bob/bobs-life', createOptionalParams(true, true, true)).then(ins => {
const src = createItemSrc().withUrl('https://www.playbuzz.com/bob/bobs-life');
return getIns(src, createOptionalParams(true, true, true)).then(ins => {
const iframe = ins.querySelector('iframe');
testIframe(iframe);
testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
expect(iframe.src)
.to.contain('&useComments=true')
.and.to.contain('&gameInfo=true')
Expand All @@ -106,7 +145,8 @@ describe('amp-playbuzz', () => {
});

it('builds a placeholder image without inserting iframe', () => {
return getIns('https://www.playbuzz.com/bob/bobs-life', createOptionalParams(), true, ins => {
const src = createItemSrc().withUrl('https://www.playbuzz.com/bob/bobs-life');
return getIns(src, createOptionalParams(), true, ins => {
// console.log(ins);
const placeholder = ins.querySelector('[placeholder]');
const iframe = ins.querySelector('iframe');
Expand All @@ -120,7 +160,7 @@ describe('amp-playbuzz', () => {
mutate: fn => fn(),
};
};
testIframe(iframe);
testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
//Should test placeholder too
ins.implementation_.iframePromise_.then(() => {
expect(placeholder.style.display).to.be.equal('none');
Expand All @@ -129,7 +169,8 @@ describe('amp-playbuzz', () => {
});

it('requires item attribute', () => {
expect(getIns('')).to.be.rejectedWith(
const src = createItemSrc().withUrl('');
expect(getIns(src)).to.be.rejectedWith(
/The item attribute is required for/);
});
});
25 changes: 22 additions & 3 deletions extensions/amp-playbuzz/0.1/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@
// leading edge, instead of the trailing.

import {rethrowAsync} from './../../../src/log';
import {serializeQueryString} from '../../../src/url';
import {
parseUrl,
removeFragment,
serializeQueryString,
} from '../../../src/url';

export function debounce(func, wait, immediate) {
let timeout;
Expand Down Expand Up @@ -105,11 +109,11 @@ function parsePlaybuzzEventData(data) {
}
}
catch (e) {
rethrowAsync('amp-playbuzz',err, e);
rethrowAsync('amp-playbuzz', err, e);
return {};
}

rethrowAsync('amp-playbuzz',err, data);
rethrowAsync('amp-playbuzz', err, data);
return {};
}

Expand Down Expand Up @@ -137,3 +141,18 @@ export function composeEmbedUrl(options) {
});
return embedUrl;
}

function sanitizeUrl(localtion) {
return removeFragment(localtion.href)
.replace(localtion.protocol, ''); //remove scheme (cors) & fragment
}

export function composeItemSrcUrl(src, itemId) {
const DEFAULT_BASE_URL = '//www.playbuzz.com/';

const iframeSrcUrl = itemId ?
DEFAULT_BASE_URL + 'item/' + itemId :
sanitizeUrl(parseUrl(src));

return iframeSrcUrl;
}
12 changes: 8 additions & 4 deletions extensions/amp-playbuzz/0.1/validator-amp-playbuzz.protoascii
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,12 @@ tags: { # <amp-playbuzz>
satisfies: "amp-playbuzz"
requires: "amp-playbuzz extension .js script"
attrs: {
name: "data-comments"
value_regex_casei: "(false|true)"
name: "src"
mandatory_oneof: "['src', 'data-item']"
}
attrs: {
name: "data-item"
mandatory_oneof: "['src', 'data-item']"
}
attrs: {
name: "data-item-info"
Expand All @@ -69,8 +73,8 @@ tags: { # <amp-playbuzz>
value_regex_casei: "(false|true)"
}
attrs: {
name: "src"
mandatory: true
name: "data-comments"
value_regex_casei: "(false|true)"
}
attr_lists: "extended-amp-global"
spec_url: "https://www.ampproject.org/docs/reference/components/amp-playbuzz"
Expand Down
20 changes: 18 additions & 2 deletions extensions/amp-playbuzz/amp-playbuzz.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ limitations under the License.

## Examples:

Playbuzz Item (without info, share-buttons, comments)
Playbuzz Item by plain url (without info, share-buttons, comments)

```html
<amp-playbuzz
Expand All @@ -49,6 +49,15 @@ Playbuzz Item (without info, share-buttons, comments)
</amp-playbuzz>
```

Playbuzz Item by item-id (can be found in the item's embed code)

```html
<amp-playbuzz
data-item="a6aa5a14-8888-4618-b2e3-fe6a30d8c51b"
height="500">
</amp-playbuzz>
```

With optional parameters (info, share-buttons, comments):

```html
Expand All @@ -62,12 +71,19 @@ With optional parameters (info, share-buttons, comments):
```

## Required Attributes
### One of the following is required:

**src** (required)
**src**

The URL for the Playbuzz item.
Can be any item URL taken from <a href="http://www.playbuzz.com">playbuzz.com</a>

**data-item**

The item id for the Playbuzz item.
Can be taken from the item's embed code (at the item's page at playbuzz website)

** in case both are present data-item will be used
## Optional Attributes

**data-item-info** (optional)
Expand Down

0 comments on commit a2d7627

Please sign in to comment.