Skip to content

Commit

Permalink
♻️ amp-viqeo-player: placeholder and refactoring (ampproject#19885)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kinoshnik2070 @bramanudom
kinoshnik2070 authored and bramanudom committed Dec 19, 2018
1 parent d851cd3 commit 3303cb6
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 95 deletions.
118 changes: 28 additions & 90 deletions 3p/viqeoplayer.js
View file
Expand Up @@ -13,35 +13,34 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import {assertAbsoluteHttpOrHttpsUrl, tryDecodeUriComponent} from '../src/url';
import {getData} from '../src/event-helper';
import {loadScript} from './3p';
import {parseJson} from '../src/json';
import {setStyles} from '../src/style';
import {tryDecodeUriComponent} from '../src/url';

/**
* @param {Window} global
* @param {boolean} autoplay
* @param {Object} VIQEO
* @param {function(Object)} VIQEO.getPlayers - returns viqeo player
* @param {function(function(Object), Object)} VIQEO.subscribeTracking - subscriber
* @private
*/
function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
const {canonicalUrl, pageViewId} = global.context;
VIQEO['setConfig']({url: canonicalUrl, amp: {pageViewId}});
function viqeoPlayerInitLoaded(global, VIQEO) {
const {canonicalUrl, pageViewId, sourceUrl} = global.context;
const data = getData(global.context);
let viqeoPlayerInstance;
VIQEO['setConfig']({url: sourceUrl, amp: {pageViewId, canonicalUrl}});
VIQEO['subscribeTracking'](params => {
viqeoPlayerInstance = params['player'];
}, 'Player:added');
VIQEO['createPlayer']({
videoId: data['videoid'],
profileId: data['profileid'],
parent: global.document.getElementById('c'),
});

global.addEventListener('message', parseMessage, false);

subscribe('added', 'ready', () => {
const players = VIQEO['getPlayers']({container: 'stdPlayer'});
viqeoPlayerInstance = players && players[0];
});
subscribe('started', 'started', () => {
// if autoplay is off then player will be paused as it just has been started
!autoplay && viqeoPlayerInstance && viqeoPlayerInstance.pause();
});
subscribe('videoLoaded', 'ready');
subscribe('previewLoaded', 'ready');
subscribe('started', 'started');
subscribe('paused', 'pause');
subscribe('played', 'play');
subscribe('replayed', 'play');
Expand All @@ -54,19 +53,12 @@ function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
* Subscribe on viqeo's events
* @param {string} playerEventName
* @param {string} targetEventName
* @param {function()|undefined|null} extraHandler
* @private
*/
function subscribe(playerEventName, targetEventName, extraHandler = null) {
function subscribe(playerEventName, targetEventName) {
VIQEO['subscribeTracking'](
() => {
sendMessage(targetEventName);
if (extraHandler) {
extraHandler();
}
},
{eventName: `Player:${playerEventName}`, container: 'stdPlayer'}
);
() => { sendMessage(targetEventName); },
`Player:${playerEventName}`);
}

/**
Expand All @@ -79,7 +71,9 @@ function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
const name = params && params['trackingParams'] &&
params['trackingParams'].name;
const targetEventName = eventsDescription[name];
sendMessage(targetEventName);
if (targetEventName) {
sendMessage(targetEventName);
}
}, 'Player:userAction');
}

Expand Down Expand Up @@ -123,17 +117,6 @@ function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
*/
export function viqeoplayer(global) {
const data = getData(global.context);
let autoplay = false;
try {
autoplay = parseJson(global.name)['attributes']._context['autoplay'];
} catch (e) {
// do nothing
}
const videoId = data['videoid'];
const profileId = data['profileid'];

const markTagsAdvancedParams = data['tag-settings'];

const kindIsProd = data['data-kind'] !== 'stage';

let scriptPlayerInit = data['script-url'];
Expand All @@ -143,56 +126,11 @@ export function viqeoplayer(global) {
)
||
(kindIsProd
? 'https://cdn.viqeo.tv/js/vq_player_init.js?amp=true'
: 'https://static.viqeo.tv/js/vq_player_init.js?branch=dev1&amp=true'
? 'https://cdn.viqeo.tv/js/vq_starter.js'
: 'https://static.viqeo.tv/js/vq_player_init.js?branch=dev1'
);
// embed preview url
let previewUrl = data['player-url'];
previewUrl =
(previewUrl
&& previewUrl.length && decodeURI(previewUrl)
)
|| (kindIsProd ? 'https://cdn.viqeo.tv/embed' : 'https://stage.embed.viqeo.tv');

// Create preview iframe source path
previewUrl = assertAbsoluteHttpOrHttpsUrl(
`${previewUrl}/?vid=${videoId}&amp=true`);

const doc = global.document;
const mark = doc.createElement('div');

const markTagsStyle = Object.assign({
position: 'relative',
width: '100%',
height: '0',
paddingBottom: '100%',
}, markTagsAdvancedParams);

setStyles(mark, markTagsStyle);

mark.setAttribute('data-vnd', videoId);
mark.setAttribute('data-profile', profileId);
mark.classList.add('viqeo-embed');

const iframe = doc.createElement('iframe');

iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '100%');
iframe.setAttribute('style', 'position: absolute');
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('allowFullScreen', '');
iframe.src = previewUrl;

mark.appendChild(iframe);

doc.getElementById('c').appendChild(mark);

loadScript(global, scriptPlayerInit, () => {
if (!global['VIQEO']) {
global['onViqeoLoad'] =
viqeoPlayerInitLoaded.bind(null, global, autoplay);
} else {
viqeoPlayerInitLoaded(global, autoplay, global['VIQEO']);
}
});
global['onViqeoLoad'] = VIQEO =>
viqeoPlayerInitLoaded(global, VIQEO);
loadScript(global, scriptPlayerInit);
}
2 changes: 0 additions & 2 deletions examples/viqeo.amp.html
View file
Expand Up @@ -73,7 +73,6 @@ <h2>Autoplay</h2>
width="640"
height="400"
data-profileid="184"
data-tag-settings="paddingBottom:57%"
data-videoid="922d04f30b66f1a32eb2"
layout="responsive"
autoplay>
Expand All @@ -84,7 +83,6 @@ <h2>Without autoplay</h2>
width="640"
height="400"
data-profileid="184"
data-tag-settings="paddingBottom:57%"
data-videoid="922d04f30b66f1a32eb2"
layout="responsive"
rotate-to-fullscreen>
Expand Down
29 changes: 26 additions & 3 deletions extensions/amp-viqeo-player/0.1/amp-viqeo-player.js
View file
Expand Up @@ -62,15 +62,18 @@ class AmpViqeoPlayer extends AMP.BaseElement {

/** @private {boolean} */
this.hasAutoplay_ = false;

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

/**
* @param {boolean=} opt_onLayout
* @override
*/
preconnectCallback(opt_onLayout) {
this.preconnect.url('https://static.viqeo.tv', opt_onLayout);
this.preconnect.url('https://stage.embed.viqeo.tv', opt_onLayout);
this.preconnect.url('https://api.viqeo.tv', opt_onLayout);
this.preconnect.url('https://cdn.viqeo.tv', opt_onLayout);
}

/**
Expand All @@ -85,7 +88,7 @@ class AmpViqeoPlayer extends AMP.BaseElement {
/** @override */
buildCallback() {

user().assert(
this.videoId_ = user().assert(
this.element.getAttribute('data-videoid'),
'The data-videoid attribute is required for <amp-viqeo-player> %s',
this.element);
Expand Down Expand Up @@ -188,6 +191,26 @@ class AmpViqeoPlayer extends AMP.BaseElement {
return true; // Call layoutCallback again.
}

/** @override */
createPlaceholderCallback() {
const placeholder = this.element.ownerDocument.createElement('amp-img');
this.propagateAttributes(['aria-label'], placeholder);
if (placeholder.hasAttribute('aria-label')) {
placeholder.setAttribute('alt',
'Loading video - ' + placeholder.getAttribute('aria-label')
);
} else {
placeholder.setAttribute('alt', 'Loading video');
}
placeholder.setAttribute('src',
`http://cdn.viqeo.tv/preview/${encodeURIComponent(this.videoId_)}.jpg`);
placeholder.setAttribute('layout', 'fill');
placeholder.setAttribute('placeholder', '');
placeholder.setAttribute('referrerpolicy', 'origin');
this.applyFillContent(placeholder);
return placeholder;
}

/** @override */
supportsPlatform() {
return true;
Expand Down
15 changes: 15 additions & 0 deletions extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js
View file
Expand Up @@ -96,6 +96,21 @@ describes.realWin('amp-viqeo-player', {

});

describe('createPlaceholderCallback', () => {
it('should create a placeholder image', () => {
return getViqeo().then(p => {
const img = p.viqeoElement.querySelector('amp-img');
expect(img).to.not.be.null;
expect(img.getAttribute('src')).to.equal(
'http://cdn.viqeo.tv/preview/922d04f30b66f1a32eb2.jpg');
expect(img.getAttribute('layout')).to.equal('fill');
expect(img.hasAttribute('placeholder')).to.be.true;
expect(img.getAttribute('referrerpolicy')).to.equal('origin');
expect(img.getAttribute('alt')).to.equal('Loading video');
});
});
});

function getViqeo(params) {
const {id, viqeoProfileId, viqeoId, width, height, opt_params} =
Object.assign({
Expand Down

0 comments on commit 3303cb6

Please sign in to comment.