added audioplayer contrib module
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield build AudioJs audio player.
|
||||
*/
|
||||
|
||||
(($, Drupal) => {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldAudiojs = {};
|
||||
|
||||
/**
|
||||
* Generate an audio.js player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player.
|
||||
*/
|
||||
Drupal.AudiofieldAudiojs.generate = (context, settings) => {
|
||||
// Create the media player.
|
||||
$.each($(context).find(`#${settings.element}`).once('generate-audiojs'), (index, item) => {
|
||||
// Initialize the audio player.
|
||||
const audioPlayer = audiojs.create($(item).find('audio').get(0), {
|
||||
css: false,
|
||||
createPlayer: {
|
||||
markup: false,
|
||||
playPauseClass: 'play-pauseZ',
|
||||
scrubberClass: 'scrubberZ',
|
||||
progressClass: 'progressZ',
|
||||
loaderClass: 'loadedZ',
|
||||
timeClass: 'timeZ',
|
||||
durationClass: 'durationZ',
|
||||
playedClass: 'playedZ',
|
||||
errorMessageClass: 'error-messageZ',
|
||||
playingClass: 'playingZ',
|
||||
loadingClass: 'loadingZ',
|
||||
errorClass: 'errorZ',
|
||||
},
|
||||
// Handle the end of a track.
|
||||
trackEnded: () => {
|
||||
let next = $(context).find(`#${settings.element} ol li.playing`).next();
|
||||
if (!next.length) {
|
||||
next = $(context).find(`#${settings.element} ol li:first`);
|
||||
}
|
||||
next.addClass('playing').siblings().removeClass('playing');
|
||||
audioPlayer.load($('a', next).attr('data-src'));
|
||||
audioPlayer.play();
|
||||
},
|
||||
});
|
||||
|
||||
// Load in the first track.
|
||||
$(item).find('ol li:first').addClass('playing');
|
||||
audioPlayer.load($(item).find('ol a:first').attr('data-src'));
|
||||
|
||||
// Load in a track on click.
|
||||
$(item).find('ol li').click((event) => {
|
||||
event.preventDefault();
|
||||
$(event.currentTarget).addClass('playing').siblings().removeClass('playing');
|
||||
audioPlayer.load($('a', event.currentTarget).attr('data-src'));
|
||||
audioPlayer.play();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Attach the behaviors to generate the audio player.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches generation of audio.js audio players.
|
||||
*/
|
||||
Drupal.behaviors.audiofieldaudiojs = {
|
||||
attach: (context, settings) => {
|
||||
$.each(settings.audiofieldaudiojs, (key, settingEntry) => {
|
||||
Drupal.AudiofieldAudiojs.generate(context, settingEntry);
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldAudiojs = {};
|
||||
|
||||
Drupal.AudiofieldAudiojs.generate = function (context, settings) {
|
||||
$.each($(context).find('#' + settings.element).once('generate-audiojs'), function (index, item) {
|
||||
var audioPlayer = audiojs.create($(item).find('audio').get(0), {
|
||||
css: false,
|
||||
createPlayer: {
|
||||
markup: false,
|
||||
playPauseClass: 'play-pauseZ',
|
||||
scrubberClass: 'scrubberZ',
|
||||
progressClass: 'progressZ',
|
||||
loaderClass: 'loadedZ',
|
||||
timeClass: 'timeZ',
|
||||
durationClass: 'durationZ',
|
||||
playedClass: 'playedZ',
|
||||
errorMessageClass: 'error-messageZ',
|
||||
playingClass: 'playingZ',
|
||||
loadingClass: 'loadingZ',
|
||||
errorClass: 'errorZ'
|
||||
},
|
||||
|
||||
trackEnded: function trackEnded() {
|
||||
var next = $(context).find('#' + settings.element + ' ol li.playing').next();
|
||||
if (!next.length) {
|
||||
next = $(context).find('#' + settings.element + ' ol li:first');
|
||||
}
|
||||
next.addClass('playing').siblings().removeClass('playing');
|
||||
audioPlayer.load($('a', next).attr('data-src'));
|
||||
audioPlayer.play();
|
||||
}
|
||||
});
|
||||
|
||||
$(item).find('ol li:first').addClass('playing');
|
||||
audioPlayer.load($(item).find('ol a:first').attr('data-src'));
|
||||
|
||||
$(item).find('ol li').click(function (event) {
|
||||
event.preventDefault();
|
||||
$(event.currentTarget).addClass('playing').siblings().removeClass('playing');
|
||||
audioPlayer.load($('a', event.currentTarget).attr('data-src'));
|
||||
audioPlayer.play();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.behaviors.audiofieldaudiojs = {
|
||||
attach: function attach(context, settings) {
|
||||
$.each(settings.audiofieldaudiojs, function (key, settingEntry) {
|
||||
Drupal.AudiofieldAudiojs.generate(context, settingEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield build jPlayer audio players of various types.
|
||||
*/
|
||||
|
||||
(($, Drupal) => {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldJplayer = {};
|
||||
|
||||
/**
|
||||
* Generate a jplayer player for the default single file layout.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player.
|
||||
*/
|
||||
Drupal.AudiofieldJplayer.generate = (context, settings) => {
|
||||
// Create the media player.
|
||||
$(`#jquery_jplayer_${settings.unique_id}`, context).once('generate-jplayer').jPlayer(
|
||||
{
|
||||
cssSelectorAncestor: `#jp_container_${settings.unique_id}`,
|
||||
},
|
||||
{
|
||||
ready: () => {
|
||||
const mediaArray = {
|
||||
title: settings.description,
|
||||
};
|
||||
mediaArray[settings.filetype] = settings.file;
|
||||
$(`#jquery_jplayer_${settings.unique_id}`, context).jPlayer('setMedia', mediaArray);
|
||||
},
|
||||
canplay: () => {
|
||||
// Handle autoplay.
|
||||
if (!!settings.autoplay) {
|
||||
$(`#jquery_jplayer_${settings.unique_id}`, context).jPlayer('play');
|
||||
}
|
||||
},
|
||||
swfPath: '/libraries/jplayer/dist/jplayer',
|
||||
supplied: settings.filetype,
|
||||
wmode: 'window',
|
||||
useStateClassSkin: true,
|
||||
autoBlur: false,
|
||||
smoothPlayBar: true,
|
||||
keyEnabled: true,
|
||||
remainingDuration: false,
|
||||
toggleDuration: false,
|
||||
volume: settings.volume,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a jplayer formatter for a player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player.
|
||||
*/
|
||||
Drupal.AudiofieldJplayer.generatePlaylist = (context, settings) => {
|
||||
$.each($(context).find(`#jquery_jplayer_${settings.unique_id}`).once('generate-jplayer'), (index, item) => {
|
||||
// Initialize the container audio player.
|
||||
const thisPlaylist = new jPlayerPlaylist({
|
||||
jPlayer: $(item),
|
||||
cssSelectorAncestor: `#jp_container_${settings.unique_id}`,
|
||||
}, [], {
|
||||
canplay: () => {
|
||||
// Handle autoplay.
|
||||
if (!!settings.autoplay) {
|
||||
$(item).jPlayer('play');
|
||||
}
|
||||
},
|
||||
playlistOptions: {
|
||||
enableRemoveControls: false,
|
||||
},
|
||||
swfPath: '/libraries/jplayer/dist/jplayer',
|
||||
wmode: 'window',
|
||||
useStateClassSkin: true,
|
||||
autoBlur: false,
|
||||
smoothPlayBar: true,
|
||||
keyEnabled: true,
|
||||
volume: settings.volume,
|
||||
});
|
||||
|
||||
// Loop over each file.
|
||||
$.each(settings.files, (key, fileEntry) => {
|
||||
// Build the media array.
|
||||
const mediaArray = {
|
||||
title: fileEntry.description,
|
||||
};
|
||||
mediaArray[fileEntry.filetype] = fileEntry.file;
|
||||
// Add the file to the playlist.
|
||||
thisPlaylist.add(mediaArray);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a jplayer circle player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {array} file
|
||||
* The audio file for which we are generating a player.
|
||||
*/
|
||||
Drupal.AudiofieldJplayer.generateCircle = (context, file) => {
|
||||
// Create the media player.
|
||||
$.each($(context).find(`#jquery_jplayer_${file.fid}`).once('generate-jplayer'), (index, item) => {
|
||||
// Build the media array for this player.
|
||||
const mediaArray = {};
|
||||
mediaArray[file.filetype] = file.file;
|
||||
|
||||
// Initialize the player.
|
||||
new CirclePlayer(
|
||||
$(item),
|
||||
mediaArray,
|
||||
{
|
||||
cssSelectorAncestor: `#cp_container_${file.fid}`,
|
||||
canplay: () => {
|
||||
// Handle autoplay.
|
||||
if (!!file.autoplay) {
|
||||
$(item).jPlayer('play');
|
||||
}
|
||||
},
|
||||
swfPath: '/libraries/jplayer/dist/jplayer',
|
||||
wmode: 'window',
|
||||
keyEnabled: true,
|
||||
supplied: file.filetype,
|
||||
},
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Attach the behaviors to generate the audio player.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches generation of Jplayer audio players.
|
||||
*/
|
||||
Drupal.behaviors.audiofieldjplayer = {
|
||||
attach: (context, settings) => {
|
||||
$.each(settings.audiofieldjplayer, (key, settingEntry) => {
|
||||
// Default audio player.
|
||||
if (settingEntry.playertype === 'default') {
|
||||
// We can just initialize the audio player direcly.
|
||||
Drupal.AudiofieldJplayer.generate(context, settingEntry);
|
||||
}
|
||||
// Playlist audio player.
|
||||
else if (settingEntry.playertype === 'playlist') {
|
||||
Drupal.AudiofieldJplayer.generatePlaylist(context, settingEntry);
|
||||
}
|
||||
// Circle audio player.
|
||||
else if (settingEntry.playertype === 'circle') {
|
||||
// Loop over the files.
|
||||
$.each(settingEntry.files, (key2, fileEntry) => {
|
||||
// Create the player.
|
||||
Drupal.AudiofieldJplayer.generateCircle(context, fileEntry);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldJplayer = {};
|
||||
|
||||
Drupal.AudiofieldJplayer.generate = function (context, settings) {
|
||||
$('#jquery_jplayer_' + settings.unique_id, context).once('generate-jplayer').jPlayer({
|
||||
cssSelectorAncestor: '#jp_container_' + settings.unique_id
|
||||
}, {
|
||||
ready: function ready() {
|
||||
var mediaArray = {
|
||||
title: settings.description
|
||||
};
|
||||
mediaArray[settings.filetype] = settings.file;
|
||||
$('#jquery_jplayer_' + settings.unique_id, context).jPlayer('setMedia', mediaArray);
|
||||
},
|
||||
canplay: function canplay() {
|
||||
if (!!settings.autoplay) {
|
||||
$('#jquery_jplayer_' + settings.unique_id, context).jPlayer('play');
|
||||
}
|
||||
},
|
||||
swfPath: '/libraries/jplayer/dist/jplayer',
|
||||
supplied: settings.filetype,
|
||||
wmode: 'window',
|
||||
useStateClassSkin: true,
|
||||
autoBlur: false,
|
||||
smoothPlayBar: true,
|
||||
keyEnabled: true,
|
||||
remainingDuration: false,
|
||||
toggleDuration: false,
|
||||
volume: settings.volume
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.AudiofieldJplayer.generatePlaylist = function (context, settings) {
|
||||
$.each($(context).find('#jquery_jplayer_' + settings.unique_id).once('generate-jplayer'), function (index, item) {
|
||||
var thisPlaylist = new jPlayerPlaylist({
|
||||
jPlayer: $(item),
|
||||
cssSelectorAncestor: '#jp_container_' + settings.unique_id
|
||||
}, [], {
|
||||
canplay: function canplay() {
|
||||
if (!!settings.autoplay) {
|
||||
$(item).jPlayer('play');
|
||||
}
|
||||
},
|
||||
playlistOptions: {
|
||||
enableRemoveControls: false
|
||||
},
|
||||
swfPath: '/libraries/jplayer/dist/jplayer',
|
||||
wmode: 'window',
|
||||
useStateClassSkin: true,
|
||||
autoBlur: false,
|
||||
smoothPlayBar: true,
|
||||
keyEnabled: true,
|
||||
volume: settings.volume
|
||||
});
|
||||
|
||||
$.each(settings.files, function (key, fileEntry) {
|
||||
var mediaArray = {
|
||||
title: fileEntry.description
|
||||
};
|
||||
mediaArray[fileEntry.filetype] = fileEntry.file;
|
||||
|
||||
thisPlaylist.add(mediaArray);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.AudiofieldJplayer.generateCircle = function (context, file) {
|
||||
$.each($(context).find('#jquery_jplayer_' + file.fid).once('generate-jplayer'), function (index, item) {
|
||||
var mediaArray = {};
|
||||
mediaArray[file.filetype] = file.file;
|
||||
|
||||
new CirclePlayer($(item), mediaArray, {
|
||||
cssSelectorAncestor: '#cp_container_' + file.fid,
|
||||
canplay: function canplay() {
|
||||
if (!!file.autoplay) {
|
||||
$(item).jPlayer('play');
|
||||
}
|
||||
},
|
||||
swfPath: '/libraries/jplayer/dist/jplayer',
|
||||
wmode: 'window',
|
||||
keyEnabled: true,
|
||||
supplied: file.filetype
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.behaviors.audiofieldjplayer = {
|
||||
attach: function attach(context, settings) {
|
||||
$.each(settings.audiofieldjplayer, function (key, settingEntry) {
|
||||
if (settingEntry.playertype === 'default') {
|
||||
Drupal.AudiofieldJplayer.generate(context, settingEntry);
|
||||
} else if (settingEntry.playertype === 'playlist') {
|
||||
Drupal.AudiofieldJplayer.generatePlaylist(context, settingEntry);
|
||||
} else if (settingEntry.playertype === 'circle') {
|
||||
$.each(settingEntry.files, function (key2, fileEntry) {
|
||||
Drupal.AudiofieldJplayer.generateCircle(context, fileEntry);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield jPlayer Circleplayer issue fix.
|
||||
*
|
||||
* Circleplayer is not properly namespaced, it assumes $ = jQuery.
|
||||
* We have to define that namespace equivalence here to prevent issues.
|
||||
*/
|
||||
|
||||
var $ = jQuery;
|
||||
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
var $ = jQuery;
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield build MediaElement audio player.
|
||||
*/
|
||||
|
||||
(($, Drupal) => {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldMediaelement = {};
|
||||
|
||||
/**
|
||||
* Generate a mediaelement player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {array} file
|
||||
* The audio file for which we are generating a player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player..
|
||||
*/
|
||||
Drupal.AudiofieldMediaelement.generate = (context, file, settings) => {
|
||||
// Create the media player.
|
||||
$(file, context).once('generate-mediaelement').mediaelementplayer({
|
||||
startVolume: settings.volume,
|
||||
loop: false,
|
||||
enableAutosize: true,
|
||||
isVideo: false,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Attach the behaviors to generate the audio player.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches generation of MediaElement audio players.
|
||||
*/
|
||||
Drupal.behaviors.audiofieldmediaelement = {
|
||||
attach: (context, settings) => {
|
||||
$.each(settings.audiofieldmediaelement, (key, settingEntry) => {
|
||||
// Loop over each file.
|
||||
$.each(settingEntry.elements, (key2, fileEntry) => {
|
||||
// Create the media player.
|
||||
Drupal.AudiofieldMediaelement.generate(context, fileEntry, settingEntry);
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldMediaelement = {};
|
||||
|
||||
Drupal.AudiofieldMediaelement.generate = function (context, file, settings) {
|
||||
$(file, context).once('generate-mediaelement').mediaelementplayer({
|
||||
startVolume: settings.volume,
|
||||
loop: false,
|
||||
enableAutosize: true,
|
||||
isVideo: false
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.behaviors.audiofieldmediaelement = {
|
||||
attach: function attach(context, settings) {
|
||||
$.each(settings.audiofieldmediaelement, function (key, settingEntry) {
|
||||
$.each(settingEntry.elements, function (key2, fileEntry) {
|
||||
Drupal.AudiofieldMediaelement.generate(context, fileEntry, settingEntry);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield build Projekktor audio player.
|
||||
*/
|
||||
|
||||
(($, Drupal) => {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldProjekktor = {};
|
||||
|
||||
/**
|
||||
* Generate a projekktor player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {array} file
|
||||
* The audio file for which we are generating a player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player..
|
||||
*/
|
||||
Drupal.AudiofieldProjekktor.generate = (context, file, settings) => {
|
||||
$.each($(context).find(`#${file}`).once('generate-projekktor'), (index, item) => {
|
||||
projekktor($(item), {
|
||||
debug: false,
|
||||
playerFlashMP4: settings.swfpath,
|
||||
playerFlashMP3: settings.swfpath,
|
||||
enableFullscreen: false,
|
||||
streamType: 'http',
|
||||
controls: true,
|
||||
thereCanBeOnlyOne: true,
|
||||
volume: settings.volume,
|
||||
autoplay: !!settings.autoplay,
|
||||
plugin_display: {},
|
||||
}, {});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Attach the behaviors to generate the audio player.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches generation of Projekktor audio players.
|
||||
*/
|
||||
Drupal.behaviors.audiofieldprojekktor = {
|
||||
attach: (context, settings) => {
|
||||
// Have to encapsulate because of the way library is created.
|
||||
jQuery(() => {
|
||||
$.each(settings.audiofieldprojekktor, (key, settingEntry) => {
|
||||
// Loop over the attached files.
|
||||
$.each(settingEntry.files, (key2, file) => {
|
||||
// Create the audioplayer for each file.
|
||||
Drupal.AudiofieldProjekktor.generate(context, file, settingEntry);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldProjekktor = {};
|
||||
|
||||
Drupal.AudiofieldProjekktor.generate = function (context, file, settings) {
|
||||
$.each($(context).find('#' + file).once('generate-projekktor'), function (index, item) {
|
||||
projekktor($(item), {
|
||||
debug: false,
|
||||
playerFlashMP4: settings.swfpath,
|
||||
playerFlashMP3: settings.swfpath,
|
||||
enableFullscreen: false,
|
||||
streamType: 'http',
|
||||
controls: true,
|
||||
thereCanBeOnlyOne: true,
|
||||
volume: settings.volume,
|
||||
autoplay: !!settings.autoplay,
|
||||
plugin_display: {}
|
||||
}, {});
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.behaviors.audiofieldprojekktor = {
|
||||
attach: function attach(context, settings) {
|
||||
jQuery(function () {
|
||||
$.each(settings.audiofieldprojekktor, function (key, settingEntry) {
|
||||
$.each(settingEntry.files, function (key2, file) {
|
||||
Drupal.AudiofieldProjekktor.generate(context, file, settingEntry);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield build SoundManager audio player.
|
||||
*/
|
||||
|
||||
(($, Drupal) => {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Attach the behaviors to generate the audio player.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches generation of Soundmanager audio players.
|
||||
*/
|
||||
Drupal.behaviors.audiofieldsoundmanager = {
|
||||
attach: (context, settings) => {
|
||||
// Soundmanager intercepts everything so the setup is very simple.
|
||||
soundManager.setup({
|
||||
// Required: path to directory containing SM2 SWF files.
|
||||
url: settings.audiofieldsoundmanager.swfpath,
|
||||
preferFlash: false,
|
||||
defaultOptions: {
|
||||
volume: settings.audiofieldsoundmanager.volume,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
'use strict';
|
||||
|
||||
Drupal.behaviors.audiofieldsoundmanager = {
|
||||
attach: function attach(context, settings) {
|
||||
soundManager.setup({
|
||||
url: settings.audiofieldsoundmanager.swfpath,
|
||||
preferFlash: false,
|
||||
defaultOptions: {
|
||||
volume: settings.audiofieldsoundmanager.volume
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,231 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield build Wavesurfer audio player.
|
||||
*/
|
||||
|
||||
(($, Drupal) => {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldWavesurfer = {};
|
||||
|
||||
/**
|
||||
* Generate a wavesurfer player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {array} file
|
||||
* The audio file for which we are generating a player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player..
|
||||
*/
|
||||
Drupal.AudiofieldWavesurfer.generate = (context, file, settings) => {
|
||||
$.each($(context).find(`#${file.id}`).once('generate-waveform'), (index, wavecontainer) => {
|
||||
// Create waveform.
|
||||
const wavesurfer = WaveSurfer.create({
|
||||
container: `#${$(wavecontainer).attr('id')} .waveform`,
|
||||
});
|
||||
|
||||
// Load the file.
|
||||
wavesurfer.load(file.path);
|
||||
|
||||
// Set the default volume.
|
||||
wavesurfer.setVolume(settings.volume);
|
||||
|
||||
// Handle play/pause.
|
||||
$(wavecontainer).find('.player-button.playpause').on('click', () => {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
// Handle volume change.
|
||||
$(wavecontainer).find('.volume').on('change', () => {
|
||||
wavesurfer.setVolume(($(event.currentTarget).val() / 10));
|
||||
});
|
||||
|
||||
// Handle autoplay.
|
||||
if (!!settings.autoplay) {
|
||||
wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a wavesurfer playlist player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player.
|
||||
*/
|
||||
Drupal.AudiofieldWavesurfer.generatePlaylist = (context, settings) => {
|
||||
$.each($(context).find('#wavesurfer_playlist').once('generate-waveform'), (index, wavecontainer) => {
|
||||
// Create waveform.
|
||||
const wavesurfer = WaveSurfer.create({
|
||||
container: `#${$(wavecontainer).attr('id')} .waveform`,
|
||||
});
|
||||
|
||||
// Set the default volume.
|
||||
wavesurfer.setVolume(settings.volume);
|
||||
|
||||
// Load the first file.
|
||||
const first = $(wavecontainer).find('.playlist .track').first();
|
||||
// Get the label and update it with the first filename.
|
||||
const label = $(wavecontainer).find('label').first();
|
||||
label.html(`Playing: ${first.html()}`);
|
||||
// Set the playing class on the first element.
|
||||
first.addClass('playing');
|
||||
// Load the file.
|
||||
wavesurfer.load(first.attr('data-src'));
|
||||
|
||||
// Handle play/pause.
|
||||
$(wavecontainer).find('.player-button.playpause').on('click', () => {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
// Handle next/previous.
|
||||
$(wavecontainer).find('.player-button.next').on('click', () => {
|
||||
Drupal.AudiofieldWavesurfer.Next(wavecontainer, wavesurfer);
|
||||
});
|
||||
$(wavecontainer).find('.player-button.previous').on('click', () => {
|
||||
Drupal.AudiofieldWavesurfer.Previous(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
// Handle clicking track.
|
||||
$(wavecontainer).find('.playlist .track').on('click', () => {
|
||||
// Load the track.
|
||||
Drupal.AudiofieldWavesurfer.Load(wavecontainer, wavesurfer, $(event.currentTarget));
|
||||
// Play the track.
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
// Handle volume change.
|
||||
$(wavecontainer).find('.volume').on('change', () => {
|
||||
wavesurfer.setVolume(($(event.currentTarget).val() / 10));
|
||||
});
|
||||
|
||||
// Handle autoplay.
|
||||
if (!!settings.autoplay) {
|
||||
wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));
|
||||
}
|
||||
|
||||
// Handle track finishing.
|
||||
wavesurfer.on('finish', () => {
|
||||
Drupal.AudiofieldWavesurfer.Next(wavecontainer, wavesurfer);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Play or pause the wavesurfer and set appropriate classes.
|
||||
*
|
||||
* @param {jQuery} wavecontainer
|
||||
* The container of the wavesurfer element we are accessing.
|
||||
* @param {jQuery} wavesurfer
|
||||
* The wavesurfer player we are accessing.
|
||||
*/
|
||||
Drupal.AudiofieldWavesurfer.PlayPause = (wavecontainer, wavesurfer) => {
|
||||
wavesurfer.playPause();
|
||||
const button = $(wavecontainer).find('.player-button.playpause');
|
||||
if (wavesurfer.isPlaying()) {
|
||||
$(wavecontainer).addClass('playing');
|
||||
button.html('Pause');
|
||||
}
|
||||
else {
|
||||
$(wavecontainer).removeClass('playing');
|
||||
button.html('Play');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Load track on wavesurfer and set appropriate classes.
|
||||
*
|
||||
* @param {jQuery} wavecontainer
|
||||
* The container of the wavesurfer element we are accessing.
|
||||
* @param {jQuery} wavesurfer
|
||||
* The wavesurfer player we are accessing.
|
||||
* @param {jQuery} track
|
||||
* The track being loaded into the player.
|
||||
*/
|
||||
Drupal.AudiofieldWavesurfer.Load = (wavecontainer, wavesurfer, track) => {
|
||||
// Load the track.
|
||||
wavesurfer.on('ready', () => {
|
||||
wavesurfer.play();
|
||||
$(wavecontainer).removeClass('playing');
|
||||
$(wavecontainer).addClass('playing');
|
||||
$(wavecontainer).find('.player-button.playpause').html('Pause');
|
||||
});
|
||||
wavesurfer.load(track.attr('data-src'));
|
||||
// Remove playing from all other tracks.
|
||||
$(wavecontainer).find('.track').removeClass('playing');
|
||||
// Set the class on this track.
|
||||
track.addClass('playing');
|
||||
// Show what's playing.
|
||||
$(wavecontainer).find('label').first().html(`Playing: ${track.html()}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* Skip track forward on wavesurfer and set appropriate classes.
|
||||
*
|
||||
* @param {jQuery} wavecontainer
|
||||
* The container of the wavesurfer element we are accessing.
|
||||
* @param {jQuery} wavesurfer
|
||||
* The wavesurfer player we are accessing.
|
||||
*/
|
||||
Drupal.AudiofieldWavesurfer.Next = (wavecontainer, wavesurfer) => {
|
||||
if (wavesurfer.isPlaying()) {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
}
|
||||
// Find the next track.
|
||||
let track = $(wavecontainer).find('.track.playing').next();
|
||||
if (typeof track.attr('data-src') === 'undefined') {
|
||||
track = $(wavecontainer).find('.track').first();
|
||||
}
|
||||
// Load the track.
|
||||
Drupal.AudiofieldWavesurfer.Load(wavecontainer, wavesurfer, track);
|
||||
};
|
||||
|
||||
/**
|
||||
* Skip track back on wavesurfer and set appropriate classes.
|
||||
*
|
||||
* @param {jQuery} wavecontainer
|
||||
* The container of the wavesurfer element we are accessing.
|
||||
* @param {jQuery} wavesurfer
|
||||
* The wavesurfer player we are accessing.
|
||||
*/
|
||||
Drupal.AudiofieldWavesurfer.Previous = (wavecontainer, wavesurfer) => {
|
||||
if (wavesurfer.isPlaying()) {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
}
|
||||
// Find the next track.
|
||||
let track = $(wavecontainer).find('.track.playing').prev();
|
||||
if (typeof track.attr('data-src') === 'undefined') {
|
||||
track = $(wavecontainer).find('.track').last();
|
||||
}
|
||||
// Load the track.
|
||||
Drupal.AudiofieldWavesurfer.Load(wavecontainer, wavesurfer, track);
|
||||
};
|
||||
|
||||
/**
|
||||
* Attach the behaviors to generate the audio player.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches generation of Wavesurfer audio players.
|
||||
*/
|
||||
Drupal.behaviors.audiofieldwavesurfer = {
|
||||
attach: (context, settings) => {
|
||||
$.each(settings.audiofieldwavesurfer, (key, settingEntry) => {
|
||||
// Default audio player.
|
||||
if (settingEntry.playertype === 'default') {
|
||||
// Loop over the files.
|
||||
$.each(settingEntry.files, (key2, file) => {
|
||||
Drupal.AudiofieldWavesurfer.generate(context, file, settingEntry);
|
||||
});
|
||||
}
|
||||
else if (settingEntry.playertype === 'playlist') {
|
||||
Drupal.AudiofieldWavesurfer.generatePlaylist(context, settingEntry);
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldWavesurfer = {};
|
||||
|
||||
Drupal.AudiofieldWavesurfer.generate = function (context, file, settings) {
|
||||
$.each($(context).find('#' + file.id).once('generate-waveform'), function (index, wavecontainer) {
|
||||
var wavesurfer = WaveSurfer.create({
|
||||
container: '#' + $(wavecontainer).attr('id') + ' .waveform'
|
||||
});
|
||||
|
||||
wavesurfer.load(file.path);
|
||||
|
||||
wavesurfer.setVolume(settings.volume);
|
||||
|
||||
$(wavecontainer).find('.player-button.playpause').on('click', function () {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
$(wavecontainer).find('.volume').on('change', function () {
|
||||
wavesurfer.setVolume($(event.currentTarget).val() / 10);
|
||||
});
|
||||
|
||||
if (!!settings.autoplay) {
|
||||
wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.AudiofieldWavesurfer.generatePlaylist = function (context, settings) {
|
||||
$.each($(context).find('#wavesurfer_playlist').once('generate-waveform'), function (index, wavecontainer) {
|
||||
var wavesurfer = WaveSurfer.create({
|
||||
container: '#' + $(wavecontainer).attr('id') + ' .waveform'
|
||||
});
|
||||
|
||||
wavesurfer.setVolume(settings.volume);
|
||||
|
||||
var first = $(wavecontainer).find('.playlist .track').first();
|
||||
|
||||
var label = $(wavecontainer).find('label').first();
|
||||
label.html('Playing: ' + first.html());
|
||||
|
||||
first.addClass('playing');
|
||||
|
||||
wavesurfer.load(first.attr('data-src'));
|
||||
|
||||
$(wavecontainer).find('.player-button.playpause').on('click', function () {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
$(wavecontainer).find('.player-button.next').on('click', function () {
|
||||
Drupal.AudiofieldWavesurfer.Next(wavecontainer, wavesurfer);
|
||||
});
|
||||
$(wavecontainer).find('.player-button.previous').on('click', function () {
|
||||
Drupal.AudiofieldWavesurfer.Previous(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
$(wavecontainer).find('.playlist .track').on('click', function () {
|
||||
Drupal.AudiofieldWavesurfer.Load(wavecontainer, wavesurfer, $(event.currentTarget));
|
||||
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
});
|
||||
|
||||
$(wavecontainer).find('.volume').on('change', function () {
|
||||
wavesurfer.setVolume($(event.currentTarget).val() / 10);
|
||||
});
|
||||
|
||||
if (!!settings.autoplay) {
|
||||
wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));
|
||||
}
|
||||
|
||||
wavesurfer.on('finish', function () {
|
||||
Drupal.AudiofieldWavesurfer.Next(wavecontainer, wavesurfer);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.AudiofieldWavesurfer.PlayPause = function (wavecontainer, wavesurfer) {
|
||||
wavesurfer.playPause();
|
||||
var button = $(wavecontainer).find('.player-button.playpause');
|
||||
if (wavesurfer.isPlaying()) {
|
||||
$(wavecontainer).addClass('playing');
|
||||
button.html('Pause');
|
||||
} else {
|
||||
$(wavecontainer).removeClass('playing');
|
||||
button.html('Play');
|
||||
}
|
||||
};
|
||||
|
||||
Drupal.AudiofieldWavesurfer.Load = function (wavecontainer, wavesurfer, track) {
|
||||
wavesurfer.on('ready', function () {
|
||||
wavesurfer.play();
|
||||
$(wavecontainer).removeClass('playing');
|
||||
$(wavecontainer).addClass('playing');
|
||||
$(wavecontainer).find('.player-button.playpause').html('Pause');
|
||||
});
|
||||
wavesurfer.load(track.attr('data-src'));
|
||||
|
||||
$(wavecontainer).find('.track').removeClass('playing');
|
||||
|
||||
track.addClass('playing');
|
||||
|
||||
$(wavecontainer).find('label').first().html('Playing: ' + track.html());
|
||||
};
|
||||
|
||||
Drupal.AudiofieldWavesurfer.Next = function (wavecontainer, wavesurfer) {
|
||||
if (wavesurfer.isPlaying()) {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
}
|
||||
|
||||
var track = $(wavecontainer).find('.track.playing').next();
|
||||
if (typeof track.attr('data-src') === 'undefined') {
|
||||
track = $(wavecontainer).find('.track').first();
|
||||
}
|
||||
|
||||
Drupal.AudiofieldWavesurfer.Load(wavecontainer, wavesurfer, track);
|
||||
};
|
||||
|
||||
Drupal.AudiofieldWavesurfer.Previous = function (wavecontainer, wavesurfer) {
|
||||
if (wavesurfer.isPlaying()) {
|
||||
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
|
||||
}
|
||||
|
||||
var track = $(wavecontainer).find('.track.playing').prev();
|
||||
if (typeof track.attr('data-src') === 'undefined') {
|
||||
track = $(wavecontainer).find('.track').last();
|
||||
}
|
||||
|
||||
Drupal.AudiofieldWavesurfer.Load(wavecontainer, wavesurfer, track);
|
||||
};
|
||||
|
||||
Drupal.behaviors.audiofieldwavesurfer = {
|
||||
attach: function attach(context, settings) {
|
||||
$.each(settings.audiofieldwavesurfer, function (key, settingEntry) {
|
||||
if (settingEntry.playertype === 'default') {
|
||||
$.each(settingEntry.files, function (key2, file) {
|
||||
Drupal.AudiofieldWavesurfer.generate(context, file, settingEntry);
|
||||
});
|
||||
} else if (settingEntry.playertype === 'playlist') {
|
||||
Drupal.AudiofieldWavesurfer.generatePlaylist(context, settingEntry);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* @file
|
||||
* Audiofield build WordPress audio player.
|
||||
*/
|
||||
|
||||
(($, Drupal) => {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldWordpress = {};
|
||||
|
||||
/**
|
||||
* Generate a wordpress player.
|
||||
*
|
||||
* @param {jQuery} context
|
||||
* The Drupal context for which we are finding and generating this player.
|
||||
* @param {array} file
|
||||
* The audio file for which we are generating a player.
|
||||
* @param {jQuery} settings
|
||||
* The Drupal settings for this player.
|
||||
*/
|
||||
Drupal.AudiofieldWordpress.generate = (context, file, settings) => {
|
||||
let autostartSetting = 'no';
|
||||
if (!!settings.autoplay) {
|
||||
autostartSetting = 'yes';
|
||||
}
|
||||
$.each($(context).find(`#wordpressaudioplayer_${file.unique_id}`).once('generate-waveform'), (index, item) => {
|
||||
AudioPlayer.embed($(item).attr('id'), {
|
||||
soundFile: file.file,
|
||||
titles: file.title,
|
||||
autostart: autostartSetting,
|
||||
loop: 'no',
|
||||
initialvolume: settings.volume,
|
||||
checkpolicy: 'yes',
|
||||
animation: settings.animate,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Attach the behaviors to generate the audio player.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches generation of Wordpress audio players.
|
||||
*/
|
||||
Drupal.behaviors.audiofieldwordpress = {
|
||||
attach: function buildWordpressPlayers(context, settings) {
|
||||
$.each(settings.audiofieldwordpress, (key, settingEntry) => {
|
||||
// Initialize the audioplayer.
|
||||
AudioPlayer.setup('/libraries/wordpress-audio/player.swf', {
|
||||
width: 400,
|
||||
initialvolume: settingEntry.volume,
|
||||
transparentpagebg: 'yes',
|
||||
});
|
||||
// Loop over the files.
|
||||
$.each(settingEntry.files, (key2, fileEntry) => {
|
||||
// Generate the player for each file.
|
||||
Drupal.AudiofieldWordpress.generate(context, fileEntry, settingEntry);
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Drupal) {
|
||||
'use strict';
|
||||
|
||||
Drupal.AudiofieldWordpress = {};
|
||||
|
||||
Drupal.AudiofieldWordpress.generate = function (context, file, settings) {
|
||||
var autostartSetting = 'no';
|
||||
if (!!settings.autoplay) {
|
||||
autostartSetting = 'yes';
|
||||
}
|
||||
$.each($(context).find('#wordpressaudioplayer_' + file.unique_id).once('generate-waveform'), function (index, item) {
|
||||
AudioPlayer.embed($(item).attr('id'), {
|
||||
soundFile: file.file,
|
||||
titles: file.title,
|
||||
autostart: autostartSetting,
|
||||
loop: 'no',
|
||||
initialvolume: settings.volume,
|
||||
checkpolicy: 'yes',
|
||||
animation: settings.animate
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Drupal.behaviors.audiofieldwordpress = {
|
||||
attach: function buildWordpressPlayers(context, settings) {
|
||||
$.each(settings.audiofieldwordpress, function (key, settingEntry) {
|
||||
AudioPlayer.setup('/libraries/wordpress-audio/player.swf', {
|
||||
width: 400,
|
||||
initialvolume: settingEntry.volume,
|
||||
transparentpagebg: 'yes'
|
||||
});
|
||||
|
||||
$.each(settingEntry.files, function (key2, fileEntry) {
|
||||
Drupal.AudiofieldWordpress.generate(context, fileEntry, settingEntry);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
})(jQuery, Drupal);
|
||||
Reference in New Issue
Block a user