MediaWiki:Gadget-audioplayer-core.js

"use strict";

$(function () {
  /** Replace audio track links with the audio file when clicked **/
  function playTrack(e, playlist) {
    if ($(this).attr('target') == '_blank') {
      // do not play another track if the link opens in a new tab.
      return;
    }
    e.preventDefault();
    var filename = $(e.target).closest('a').attr('href').match(/File:(.*\.ogg)/)[1];
    var $audio = $('<audio>').attr({
      src: '/images/' + filename + '?11111',
      autoplay: playlist !== true,
      controls: true
    }).addClass('rsw-music-player'); // .rsw-music-player { height: 2em; vertical-align: middle; }
    $('.rsw-music-player').each(function () {
      if (playlist && $(this).is('#music-playlist audio')) {
        // do not pause the playlist player when listening to a list
        return;
      }
      // pause all other songs that are currently playing
      if (!this.paused) {
        this.pause();
      }
    });
    // load and start playing activated song
    $(e.target).replaceWith($audio);
    return $audio.attr('src');
  }

  // Apply onclick to audio links inside .embed-audio-links class
  $('body').on('click', '.embed-audio-links a[href^="/w/File:"][href$=".ogg"]', playTrack);

  /**  Script for handling playlists added through [[Template:Playlist]]. **/
  var $div = $('#music-playlist:not(.musicMap-playlist)');
  if ($div.length !== 0) {
    $div.show();
    var unlocked = $div.data('unlocked-button');
    var $play = $('<button>').attr('id', 'music-play').addClass('cdx-button').html('Shuffle play' + (unlocked ? ' all' : '')).appendTo($div);
    if (unlocked) {
      var $playunlocked = $('<button>').attr('id', 'music-playunlocked').addClass('cdx-button').html('Shuffle play unlocked').appendTo($div);
    }
    $('<br/>').appendTo($div);
    var $playing = $('<span>').attr('id', 'music-playing').appendTo($div);
    var $scroll = $('<span>').addClass('music-scroll-to').appendTo($div);
    $('<a>').attr('href', '#music-current-song').html('Scroll to song').appendTo($scroll).before(' (').after(')');
    $('<br/>').appendTo($div);
    var $player = $('<audio>').attr({
      id: 'music-player',
      autoplay: true,
      controls: true
    }).addClass('rsw-music-player').appendTo($div);

    // Event handlers
    $play.click(function (e) {
      if (playRandom.call($player.get(0), false, true)) {
        $(this).html('Shuffle playing').prop('disabled', true);
        if (unlocked) {
          $playunlocked.html('Shuffle play unlocked').prop('disabled', false);
        }
        // queue the next song after the previous one ends:
        $player.on('ended', playRandom.bind($player.get(0), false));
      }
    });
    if (unlocked) {
      $playunlocked.click(function (e) {
        if (playRandom.call($player.get(0), true, true)) {
          $(this).html('Shuffle playing unlocked').prop('disabled', true);
          $play.html('Shuffle play' + (unlocked ? ' all' : '')).prop('disabled', false);
        }
        // queue the next song after the previous one ends:
        $player.on('ended', playRandom.bind($player.get(0), true));
      });
    }
  }

  // Play a random song from the tables on the current page
  function playRandom(unlocked, firstsong) {
    var $player = $(this);
    var $songs = $('a[href^="/w/File:"][href$=".ogg"]');
    if (unlocked) {
      $songs = $songs.filter('.highlight-on a');
    }
    if ($songs.length == 0) {
      if (firstsong === true) {
        // give no-songs alert only when it was the user who started the song. If autoplay can't find more, end silently.
        alert('Could not find any ' + (unlocked ? 'unlocked ' : '') + 'music tracks to play. Reload the page to allow previous songs to be played again.');
      } else {
        $('#music-play').html('Shuffle play' + (unlocked ? ' all' : '')).prop('disabled', false);
        if (unlocked) {
          $playunlocked.html('Shuffle play unlocked').prop('disabled', false);
        }
      }
      return false;
    }
    var song = $songs.get(Math.floor(Math.random() * $songs.length));
    $('#music-current-song').removeAttr('id');
    $(song).closest('tr').attr('id', 'music-current-song');
    var $songlink = $(song).parents('tr').find('td:first-child a').eq(0).clone();
    $songlink.attr('target', '_blank');
    var e = {
      preventDefault: function preventDefault() {},
      target: song
    };
    var url = playTrack(e, true); // replace the link in the list with the music player
    $player.attr('src', url); // play the track in the playlist player at the top; autoplay-attribute makes this play automatically.

    var $playing = $('#music-playing');
    $playing.html("Now playing: "); // Indicate which song is playing
    $songlink.appendTo($playing); // link to song

    return true;
  }
});