You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

apm-html5-player

Package Overview
Dependencies
Maintainers
3
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

apm-html5-player - npm Package Compare versions

Comparing version

1.0.0
to
1.0.1

dist/AudioAnalytics.js
dist/FormatTime.js
dist/index.js
dist/NielsenSetup.js
dist/Player.js
dist/Playlist.js
dist/test.js

129

dist/bundle.js

@@ -117,3 +117,3 @@ (function (global, factory) {

var MUTED_CLASS = 'is-muted';
var Player = function(el, options) {
var Player = function (el, options) {
this.el = el;

@@ -128,3 +128,3 @@ this.options = options;

};
Player.prototype.init = function() {
Player.prototype.init = function () {
this.selectElements()

@@ -138,3 +138,3 @@ .initPlaylist()

};
Player.prototype.selectElements = function() {
Player.prototype.selectElements = function () {
this.audioEl = this.el.querySelector('audio');

@@ -160,3 +160,3 @@ this.playButtonEls = this.el.querySelectorAll('.js-player-play');

};
Player.prototype.getSources = function() {
Player.prototype.getSources = function () {
try {

@@ -177,5 +177,5 @@ this.sources = JSON.parse(

};
Player.prototype.bindEventHandlers = function() {
Player.prototype.bindEventHandlers = function () {
var self = this;
Array.prototype.forEach.call(this.playButtonEls, function(el) {
Array.prototype.forEach.call(this.playButtonEls, function (el) {
el.addEventListener('click', self.onPlayClick.bind(self));

@@ -216,7 +216,7 @@ });

};
Player.prototype.initTime = function() {
Player.prototype.initTime = function () {
this.displayCurrentTime();
return this;
};
Player.prototype.initPlaylist = function() {
Player.prototype.initPlaylist = function () {
if (this.playlistEl) {

@@ -229,7 +229,7 @@ this.playlist = new Playlist(this);

};
Player.prototype.onPlayClick = function(e) {
Player.prototype.onPlayClick = function (e) {
e.preventDefault();
this.handlePlay();
};
Player.prototype.handlePlay = function() {
Player.prototype.handlePlay = function () {
if (this.isPlaying === false) {

@@ -248,3 +248,3 @@ if (this.audioEl.readyState === 0) {

};
Player.prototype.onSkipForwardClick = function(e) {
Player.prototype.onSkipForwardClick = function (e) {
var targetEl = e.currentTarget;

@@ -258,3 +258,3 @@ var seconds = targetEl.getAttribute('data-skip-forward');

};
Player.prototype.onSkipBackClick = function(e) {
Player.prototype.onSkipBackClick = function (e) {
var targetEl = e.currentTarget;

@@ -268,3 +268,3 @@ var seconds = targetEl.getAttribute('data-skip-back');

};
Player.prototype.onTimelineClick = function(e) {
Player.prototype.onTimelineClick = function (e) {
var targetEl = e.currentTarget;

@@ -276,3 +276,3 @@ var clickXPosition = e.pageX;

};
Player.prototype.onVolumeClick = function(e) {
Player.prototype.onVolumeClick = function (e) {
var targetEl = e.currentTarget;

@@ -290,3 +290,3 @@ var volume;

};
Player.prototype.onMuteClick = function(e) {
Player.prototype.onMuteClick = function (e) {
e.preventDefault();

@@ -299,21 +299,21 @@ if (this.audioEl.volume !== 0) {

};
Player.prototype.onAudioPlay = function() {
Player.prototype.onAudioPlay = function () {
this.isPlaying = true;
this.displayPlayedState();
};
Player.prototype.onAudioPause = function() {
Player.prototype.onAudioPause = function () {
this.isPlaying = false;
this.displayPausedState();
};
Player.prototype.onAudioTimeupdate = function() {
Player.prototype.onAudioTimeupdate = function () {
this.displayCurrentTime();
this.sendToNielsen('setPlayheadPosition', Date.now() / 1000);
};
Player.prototype.onAudioWaiting = function() {
Player.prototype.onAudioWaiting = function () {
this.displayBufferingState();
};
Player.prototype.onAudioPlaying = function() {
Player.prototype.onAudioPlaying = function () {
this.displayPlayingState();
};
Player.prototype.onAudioEnded = function() {
Player.prototype.onAudioEnded = function () {
this.displayStoppedState();

@@ -324,13 +324,13 @@ if (this.hasPlaylist === true) {

};
Player.prototype.onVolumeChange = function() {
Player.prototype.onVolumeChange = function () {
this.displayCurrentVolume();
};
Player.prototype.onLoadedMetadata = function() {
Player.prototype.onLoadedMetadata = function () {
this.displayDuration();
this.sendToNielsen('loadMetadata', window.nielsenMetadataObject);
};
Player.prototype.onProgress = function() {
Player.prototype.onProgress = function () {
this.displayTimeRanges();
};
Player.prototype.loadAudioFromSources = function(sources) {
Player.prototype.loadAudioFromSources = function (sources) {
this.audioEl.removeAttribute('src');

@@ -344,5 +344,5 @@ this.audioEl.innerHTML = '';

};
Player.prototype.createSourceEls = function(sources) {
Player.prototype.createSourceEls = function (sources) {
var self = this;
sources.forEach(function(source) {
sources.forEach(function (source) {
var sourceUrl;

@@ -365,3 +365,3 @@ var sourceType;

};
Player.prototype.getSourceType = function(source) {
Player.prototype.getSourceType = function (source) {
var aacReg = /\.aac/;

@@ -386,3 +386,3 @@ var mp4Reg = /\.mp4/;

};
Player.prototype.sendToNielsen = function(key, value) {
Player.prototype.sendToNielsen = function (key, value) {
if (window.nSdkInstance && this.audioEl.duration === Infinity) {

@@ -392,3 +392,3 @@ window.nSdkInstance.ggPM(key, value);

};
Player.prototype.unloadAudio = function() {
Player.prototype.unloadAudio = function () {
this.isPlaying = false;

@@ -400,7 +400,7 @@ this.audioEl.innerHTML = '';

};
Player.prototype.playAudio = function() {
Player.prototype.playAudio = function () {
this.pauseAllAudio();
this.audioEl.play();
};
Player.prototype.pauseAudio = function(currentAudio) {
Player.prototype.pauseAudio = function (currentAudio) {
if (typeof currentAudio !== 'undefined') {

@@ -412,10 +412,10 @@ currentAudio.pause();

};
Player.prototype.pauseAllAudio = function() {
Player.prototype.pauseAllAudio = function () {
var self = this;
var audioEls = document.querySelectorAll('audio');
Array.prototype.forEach.call(audioEls, function(el) {
Array.prototype.forEach.call(audioEls, function (el) {
self.pauseAudio(el);
});
};
Player.prototype.playNext = function() {
Player.prototype.playNext = function () {
var nextSrc = this.getNextPlaylistSrc();

@@ -433,6 +433,9 @@ var nextItemEl;

};
Player.prototype.findNext = function(src) {
Player.prototype.findNext = function (src) {
return this.playlistEl.querySelector('li[data-src="' + src + '"]');
};
Player.prototype.getSecondsByClickPosition = function(element, clickXPosition) {
Player.prototype.getSecondsByClickPosition = function (
element,
clickXPosition
) {
var timelineRect = element.getBoundingClientRect();

@@ -447,12 +450,12 @@ var timelineOffset = timelineRect.left;

};
Player.prototype.seekTime = function(seconds) {
Player.prototype.seekTime = function (seconds) {
this.audioEl.currentTime = seconds;
};
Player.prototype.skipForward = function(seconds) {
this.audioEl.currentTime = this.audioEl.currentTime + seconds;
Player.prototype.skipForward = function (seconds) {
this.audioEl.currentTime = this.audioEl.currentTime + Number(seconds);
};
Player.prototype.skipBack = function(seconds) {
this.audioEl.currentTime = this.audioEl.currentTime - seconds;
Player.prototype.skipBack = function (seconds) {
this.audioEl.currentTime = this.audioEl.currentTime - Number(seconds);
};
Player.prototype.getVolumeByHorizClickPosition = function(
Player.prototype.getVolumeByHorizClickPosition = function (
element,

@@ -469,3 +472,3 @@ clickXPosition

};
Player.prototype.getVolumeByVertClickPosition = function(
Player.prototype.getVolumeByVertClickPosition = function (
element,

@@ -483,5 +486,5 @@ clickYPosition

};
Player.prototype.getCurrentPlaylistItem = function() {
Player.prototype.getCurrentPlaylistItem = function () {
var srcString = this.el.getAttribute('data-src');
var items = Array.prototype.filter.call(this.playlist.itemEls, function(el) {
var items = Array.prototype.filter.call(this.playlist.itemEls, function (el) {
return el.matches('[data-src="' + srcString + '"]');

@@ -492,10 +495,10 @@ });

};
Player.prototype.getNextPlaylistSrc = function() {
Player.prototype.getNextPlaylistSrc = function () {
var itemEl = this.getCurrentPlaylistItem();
return itemEl.getAttribute('data-next');
};
Player.prototype.changeVolume = function(volume) {
Player.prototype.changeVolume = function (volume) {
this.audioEl.volume = volume;
};
Player.prototype.muteAudio = function() {
Player.prototype.muteAudio = function () {
this.storedVolume = this.audioEl.volume;

@@ -505,3 +508,3 @@ this.displayMutedState();

};
Player.prototype.unmuteAudio = function() {
Player.prototype.unmuteAudio = function () {
this.displayUnmutedState();

@@ -514,3 +517,3 @@ if (this.storedVolume) {

};
Player.prototype.displayDuration = function() {
Player.prototype.displayDuration = function () {
if (!this.durationEl) return;

@@ -523,3 +526,3 @@ var duration;

};
Player.prototype.displayCurrentTime = function() {
Player.prototype.displayCurrentTime = function () {
if (!this.currentTimeEl) return;

@@ -535,3 +538,3 @@ var currentTime = toFormatted(this.audioEl.currentTime);

};
Player.prototype.updateTimelineProgress = function() {
Player.prototype.updateTimelineProgress = function () {
if (!this.timelineEl) return;

@@ -541,3 +544,3 @@ var progress = (this.audioEl.currentTime / this.audioEl.duration) * 100;

};
Player.prototype.displayTimeRanges = function() {
Player.prototype.displayTimeRanges = function () {
if (!this.timelineBufferedEl) return;

@@ -565,3 +568,3 @@ if (this.isPlaying !== true) return;

};
Player.prototype.displayPlayedState = function() {
Player.prototype.displayPlayedState = function () {
this.el.classList.remove(PAUSED_CLASS);

@@ -573,3 +576,3 @@ this.el.classList.add(PLAYING_CLASS);

};
Player.prototype.displayPausedState = function() {
Player.prototype.displayPausedState = function () {
this.el.classList.remove(PLAYING_CLASS);

@@ -581,3 +584,3 @@ this.el.classList.add(PAUSED_CLASS);

};
Player.prototype.displayPlayingState = function() {
Player.prototype.displayPlayingState = function () {
this.removeBufferingState();

@@ -588,3 +591,3 @@ if (this.hasPlaylist === true) {

};
Player.prototype.displayStoppedState = function() {
Player.prototype.displayStoppedState = function () {
this.el.classList.remove(PLAYING_CLASS);

@@ -597,3 +600,3 @@ this.el.classList.remove(PAUSED_CLASS);

};
Player.prototype.displayBufferingState = function() {
Player.prototype.displayBufferingState = function () {
this.el.classList.add(LOADING_CLASS);

@@ -604,3 +607,3 @@ if (this.hasPlaylist === true) {

};
Player.prototype.removeBufferingState = function() {
Player.prototype.removeBufferingState = function () {
this.el.classList.remove(LOADING_CLASS);

@@ -611,3 +614,3 @@ if (this.hasPlaylist === true) {

};
Player.prototype.displayCurrentVolume = function() {
Player.prototype.displayCurrentVolume = function () {
if (!this.volumeBarEl) return;

@@ -627,6 +630,6 @@ var volumePercent = this.audioEl.volume * 100;

};
Player.prototype.displayMutedState = function() {
Player.prototype.displayMutedState = function () {
this.el.classList.add(MUTED_CLASS);
};
Player.prototype.displayUnmutedState = function() {
Player.prototype.displayUnmutedState = function () {
this.el.classList.remove(MUTED_CLASS);

@@ -633,0 +636,0 @@ };

2

package.json

@@ -31,3 +31,3 @@ {

"title": "APM HTML5 Player",
"version": "1.0.0",
"version": "1.0.1",
"devDependencies": {

@@ -34,0 +34,0 @@ "@babel/cli": "^7.4.4",

22

README.md

@@ -262,7 +262,7 @@ # APM Player

"url": "https://example.com/my-audio.aac",
"type": "audio/mp4"
"type": "audio/aac"
},
{
"url": "https://example.com/my-audio.mp3",
"type": "audio/mp3"
"type": "audio/mpeg"
}

@@ -272,3 +272,3 @@ ]

This provides a file in the AAC codec, which should use the `audio/mp4` file container type as the preferred format, and the browser will fall back to the MP3 file (type `audio/mp3`) if it can't play AAC audio.
This provides a file in the AAC codec, which should use the `audio/aac` file container type as the preferred format, and the browser will fall back to the MP3 file (type `audio/mpeg`) if it can't play AAC audio.

@@ -278,3 +278,3 @@ To apply this to the DOM it should look like this. The JSON can use single quotes here instead of double quotes if preferred:

```html
<div class="js-player" data-src="[{'url': 'https://example.com/my-audio.aac', 'type': 'audio/mp4'}, {'url': 'https://example.com/my-audio.mp3', 'type': 'audio/mp3'}]">
<div class="js-player" data-src="[{'url': 'https://example.com/my-audio.aac', 'type': 'audio/aac'}, {'url': 'https://example.com/my-audio.mp3', 'type': 'audio/mpeg'}]">
<audio></audio>

@@ -288,3 +288,3 @@ </div>

<audio>
<source src="https://example.com/my-audio.aac" type="audio/mp4">
<source src="https://example.com/my-audio.aac" type="audio/aac">
<source src="https://example.com/my-audio.mp3" type="audio/mpeg">

@@ -299,3 +299,3 @@ </audio>

```html
<div class="js-player" data-src="['https://example.com/my-audio.aac', 'https://example.com/my-audio.aac', 'https://example.com/my-audio.mp3']">
<div class="js-player" data-src="['https://example.com/my-audio.aac', 'https://example.com/my-audio.ogg', 'https://example.com/my-audio.mp3']">
<audio></audio>

@@ -309,3 +309,3 @@ </div>

<audio>
<source src="https://example.com/my-audio.aac" type="audio/mp4">
<source src="https://example.com/my-audio.aac" type="audio/aac">
<source src="https://example.com/my-audio.ogg" type="audio/ogg">

@@ -381,3 +381,3 @@ <source src="https://example.com/my-audio.mp3" type="audio/mpeg">

// The DOM element container
const playerElement = document.querySelector('js-player');
const playerElement = document.querySelector('.js-player');
// Create new instance of the Player class

@@ -397,3 +397,3 @@ const player = new Player(playerElement);

var playerElement = document.querySelector('js-player');
var playerElement = document.querySelector('.js-player');
var player = new window.ApmPlayer.Player(playerElement);

@@ -416,2 +416,4 @@

To get started, just clone this repo and then from the project directory run `npm install` or `yarn`. Then you can do the following:
### Linting

@@ -430,3 +432,3 @@

To build the library, run `npm run build` and it will update the `bundle.js` file in the `dist` directory.
The dist directory is included in
The dist directory is included in the repo so that the library can be used with Bower or without npm/yarn.

@@ -433,0 +435,0 @@ ### Testing