LastAudios.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* ************************************************************************** */
/* LastAudios.js ******************************************* */
// Description: queries the last n recordings, creates elegant audio boxes, inject into dom.
// Manual: n.a.
// Usage: open [[LL:Main_page]]
// Hack pad: n.a.
// Documentations: n.a.
// Author: 0x010C (very likely)

/* *************************************************************** */
/* MAIN PAGE SUGAR *********************************************** */
// Display last records on main page
var ab1, ab2, lastRecords;

var AudioBox = function(recordQid, $node) {
  this.wbRecord = new mw.recordWizard.wikibase.Item(recordQid);

  this.$node = $node;
  this.audioNode = document.createElement('audio');
  this.audioNode.preload = 'auto';

  this.api = new mw.Api();

  this.recordQid = recordQid;
  this.langQid = null;
  this.speakerQid = null;

  this.label = '';
  this.media = '';
  this.lang = '';
  this.speaker = '';

  this.wbRecord.getFromApi(this.api).then(this.processRecord.bind(this), displayError);
}

AudioBox.prototype.processRecord = function() {
  this.label = this.wbRecord.getLabel('en');
  this.media = 'https://commons.wikimedia.org/wiki/Special:FilePath/' + this.wbRecord.getStatements('P3')[0].getValue();
  this.langQid = this.wbRecord.getStatements('P4')[0].getValue();
  this.speakerQid = this.wbRecord.getStatements('P5')[0].getValue();

  this.api.get({
    action: "wbgetentities",
    format: "json",
    ids: this.langQid + '|' + this.speakerQid,
    props: "labels",
    languages: mw.config.get('wgUserLanguage') + "|en",
    languagefallback: 1,
  }).then(this.processLabels.bind(this), displayError);
}

AudioBox.prototype.processLabels = function(data) {
  var langLabels;
  if (data.entities === undefined || data.entities[this.langQid] === undefined || data.entities[this.speakerQid] === undefined) {
    displayError('dataerror');
    return;
  }
  langLabels = data.entities[this.langQid].labels;
  if (langLabels[mw.config.get('wgUserLanguage')] !== undefined) {
    this.lang = langLabels[mw.config.get('wgUserLanguage')].value;
  } else {
    this.lang = langLabels['en'].value;
  }
  this.speaker = data.entities[this.speakerQid].labels['en'].value;
  this.display();
}

AudioBox.prototype.display = function() {
  this.$node.find('.ab-title').text(this.label);  // temporary
  this.$node.find('.ab-title-link').text(this.label);
  this.$node.find('.ab-title-link').attr('href', 'https://lingualibre.org/wiki/'+this.recordQid); 
  this.$node.find('.ab-metadata').text(this.lang + ' - ' + this.speaker);
  this.audioNode.src = this.media;
  this.$node.find('.ab-playbutton').click(this.audioNode.play.bind(this.audioNode));
}

function createAudioBoxes(data) {
  if (data.query === undefined || data.query.rwrecords === undefined || data.query.rwrecords.length < 2) {
    displayError('nodata');
    return;
  }
  lastRecords = data.query.rwrecords;
  console.log('var lastRecords = ', lastRecords);
  ab1 = new AudioBox(lastRecords[0], $('.audiobox').eq(0));
  ab2 = new AudioBox(lastRecords[1], $('.audiobox').eq(1));
}

function getLastRecords() {
  var api = new mw.Api();
  api.get({
    action: 'query',
    format: 'json',
    list: 'rwrecords',
    rwrlimit: '2',
    rwrsort: 'pageid',
    rwrdir: 'descending',
    rwrformat: 'qid'
  }).then(createAudioBoxes, displayError);
}

function displayError(code, error) {
  console.warn(code, error);
}

if (mw.config.get('wgPageName') === 'LinguaLibre:Main_Page') {
    mw.loader.using(['mediawiki.api', 'ext.recordWizard.wikibase']).then(getLastRecords);
}