jclic 2.2.0 → 2.3.0

package/src/media/MidiAudioPlayer.js

@@ -1,254 +0,0 @@
-/**
- *  File    : media/MidiAudioPlayer.js
- *  Created : 11/10/2018
- *  By      : Francesc Busquets <francesc@gmail.com>
- *
- *  JClic.js
- *  An HTML5 player of JClic activities
- *  https://projectestac.github.io/jclic.js
- *
- *  @source https://github.com/projectestac/jclic.js
- *
- *  @license EUPL-1.2
- *  @licstart
- *  (c) 2000-2020 Educational Telematic Network of Catalonia (XTEC)
- *
- *  Licensed under the EUPL, Version 1.1 or -as soon they will be approved by
- *  the European Commission- subsequent versions of the EUPL (the "Licence");
- *  You may not use this work except in compliance with the Licence.
- *
- *  You may obtain a copy of the Licence at:
- *  https://joinup.ec.europa.eu/software/page/eupl
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the Licence is distributed on an "AS IS" basis, WITHOUT
- *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- *  Licence for the specific language governing permissions and limitations
- *  under the Licence.
- *  @licend
- *  @module
- */
-
-/* global window */
-
-import MidiPlayer from '@francesc/basic-midi-player-js';
-import { log } from '../Utils.js';
-
-// TODO: Use multiple instruments, at least one for each track
-// TODO: Use multiple midi channels (currently flattened to a single channel)
-// TODO: Use of channel 10 for percussion instruments
-// TODO: ... build a real MIDI player!!
-
-/**
- * A simple MIDI player based on MidiPlayerJS
- * https://github.com/grimmdude/MidiPlayerJS
- * See also: http://www.midijs.net (https://github.com/babelsberg/babelsberg-js/tree/master/midijs)
- */
-export class MidiAudioPlayer {
-  /**
-   * MidiAudioPlayer constructor
-   * @param {external:ArrayBuffer} data - The MIDI file content, in ArrayBuffer format
-   * @param {object} [options={}] - Optional params related to the type of soundfont used. Valid options inside this object are:<br>
-   * - `MIDISoundFontObject`: An object containing the full soundfont data. When this param is provided, no other one will be used.
-   * - `MIDISoundFontBase`: The URL used as base for the current collection of MIDI soundfonts. Defaults to `https://clic.xtec.cat/dist/jclic.js/soundfonts/MusyngKite`
-   * - `MIDISoundFontName`: The MIDI instrument name. Defaults to `acoustic_grand_piano`. See [MIDI.js Soundfonts](https://github.com/gleitz/midi-js-soundfonts) for full lists of MIDI instrument names.
-   * - `MIDISoundFontExtension`: An extension to be added to `MIDISoundFontName` in order to build the full file name of the soundfont JS file. Defaults to `-mp3.js`
-   */
-  constructor(data, options = {}) {
-    const AudioContext = window && (window.AudioContext || window.webkitAudioContext);
-    if (AudioContext) {
-      // Build instrument on first call to constructor
-      MidiAudioPlayer.prepareInstrument(options, new AudioContext());
-      this.data = data;
-      this.player = new MidiPlayer.Player(ev => this.playEvent(ev));
-      if (this.player)
-        this.player.loadArrayBuffer(data);
-    }
-  }
-
-  /**
-   * Initializes the soundfont instrument, loading data from GitHub
-   * NOTE: This will not work when off-line!
-   * TODO: Provided a basic, simple, static soundfont
-   * @param {object} options - Optional param with options related to the MIDI soundfont. See details in `constructor` description.
-   * @param {external:AudioContext} audioContext - The AudioContext object (see: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext)
-   */
-  static prepareInstrument(options = {}, audioContext) {
-    if (MidiAudioPlayer.loadingInstrument === false) {
-      MidiAudioPlayer.loadingInstrument = true;
-      MidiAudioPlayer.audioContext = audioContext;
-      MidiPlayer.Soundfont.instrument(
-        MidiAudioPlayer.audioContext,
-        options.MIDISoundFontObject || MidiAudioPlayer.MIDISoundFontObject ||
-        `${options.MIDISoundFontBase || MidiAudioPlayer.MIDISoundFontBase}/${options.MIDISoundFontName || MidiAudioPlayer.MIDISoundFontName}${options.MIDISoundFontExtension || MidiAudioPlayer.MIDISoundFontExtension}`)
-        .then(instrument => {
-          log('info', 'MIDI soundfont instrument loaded');
-          MidiAudioPlayer.instrument = instrument;
-        })
-        .catch(err => {
-          log('error', `Error loading soundfont base instrument: ${err}`);
-        });
-    }
-  }
-
-  /**
-   * Pauses the player
-   */
-  pause() {
-    if (this.player) {
-      this.player.pause();
-      this.startedNotes = [];
-    }
-  }
-
-  /**
-   * Starts or resumes playing
-   */
-  play() {
-    if (this.player) {
-      this.startedNotes = [];
-      this.player.play();
-    }
-  }
-
-  /**
-   * Gets the ' paused'  state of the current player
-   * @returns boolean
-   */
-  get paused() {
-    return this.player && !this.player.isPlaying();
-  }
-
-  /**
-   * Checks if the current player has ended or is already playing
-   * @returns boolean
-   */
-  get ended() {
-    return this.player && this.player.getSongTimeRemaining() <= 0;
-  }
-
-  /**
-   * Gets the current time
-   * @returns number
-   */
-  get currentTime() {
-    return this.player && (this.player.getSongTime() * 1000) || 0;
-  }
-
-  /**
-   * Sets the current time of this player (in milliseconds)
-   * @param {number} time - The time position where the player pointer must be placed
-   */
-  set currentTime(time) {
-    if (this.player)
-      this.player.skipToSeconds(time / 1000);
-  }
-
-  /**
-   * Plays a MIDI event
-   * @param {object} ev - The event data. See http://grimmdude.com/MidiPlayerJS/docs/index.html for details
-   */
-  playEvent(ev) {
-    if (this.player && MidiAudioPlayer.instrument) {
-      // Check for specific interval
-      if (this.playTo > 0 && this.currentTime >= this.playTo)
-        this.pause();
-      // Set main volume
-      else if (ev.name === 'Controller Change' && ev.number === 7)
-        this.mainVolume = ev.value / 127;
-      // Process 'Note on' messages. Max gain set to 2.0 for better results with the used soundfont
-      else if (ev.name === 'Note on' && ev.velocity > 0)
-        this.startedNotes[ev.noteNumber] = MidiAudioPlayer.instrument.play(ev.noteName, MidiAudioPlayer.audioContext.currentTime, { gain: 2 * (this.mainVolume * ev.velocity / 100) });
-      // Process 'Note off' messages
-      else if (ev.name === 'Note off' && ev.noteNumber && this.startedNotes[ev.noteNumber]) {
-        this.startedNotes[ev.noteNumber].stop();
-        delete (this.startedNotes[ev.noteNumber]);
-      }
-    }
-  }
-}
-
-Object.assign(MidiAudioPlayer.prototype, {
-  /**
-   * The MIDI file data used by this MIDI player
-   * @name module:media/MidiAudioPlayer.MidiAudioPlayer#data
-   * @type {external:ArrayBuffer} */
-  data: null,
-  /**
-   * The grimmdude's MidiPlayer used by this player
-   * @name module:media/MidiAudioPlayer.MidiAudioPlayer#player
-   * @type {external:MidiPlayerJS} */
-  player: null,
-  /**
-   * When >0, time position at which the music must end
-   * @name module:media/MidiAudioPlayer.MidiAudioPlayer#playTo
-   * @type {number} */
-  playTo: 0,
-  /**
-   * Main volume of this track (set with a MIDI message of type `Controller Change` #7)
-   * @name module:media/MidiAudioPlayer.MidiAudioPlayer#mainVolume
-   * @type {number} */
-  mainVolume: 1.0,
-  /**
-   * This array is used when processing 'Note off' events to stop notes that are currently playing.
-   * It contains a collection of 'instrument.play' instances, one for each active note
-   * @name module:media/MidiAudioPlayer.MidiAudioPlayer#startedNotes
-   * @type {function[]} */
-  startedNotes: [],
-});
-
-/**
- * The {@link external:AudioContext} used by this MIDI player.
- * @type {external:AudioContext}
- */
-MidiAudioPlayer.audioContext = null;
-
-/**
- * The "Instrument" object used by this MIDI player.
- * See: https://github.com/danigb/soundfont-player
- * @type {external:Instrument}
- */
-MidiAudioPlayer.instrument = null;
-
-/**
- * A flag used to avoid re-entrant calls to {@link module:media/MidiAudioPlayer.MidiAudioPlayer#prepareInstrument prepareInstrument}
- * @type {boolean}
- */
-MidiAudioPlayer.loadingInstrument = false;
-
-/**
- * An object containing the full soundfont data used by {@link module:media/MidiAudioPlayer.MidiAudioPlayer#instrument instrument}
- * When this member is set, no other settings related to the sounfFont will be used.
- * This value can be overwritten by the global parameter `MIDISoundFontObject`
- * @type {object}
- */
-MidiAudioPlayer.MIDISoundFontObject = null;
-
-/**
- * The URL used as base for the current collection of MIDI soundfonts.
- * This value can be overwritten by the global parameter `MIDISoundFontBase`
- * @type {string}
- */
-MidiAudioPlayer.MIDISoundFontBase = 'https://clic.xtec.cat/dist/jclic.js/soundfonts/MusyngKite';
-// Alternative sites are:
-// 'https://clic.xtec.cat/dist/jclic.js/soundfonts/FluidR3_GM'
-// 'https://raw.githubusercontent.com/gleitz/midi-js-soundfonts/gh-pages/FluidR3_GM'
-// 'https://raw.githubusercontent.com/gleitz/midi-js-soundfonts/gh-pages/MusyngKite'
-
-/**
- * The MIDI instrument name.
- * This value can be overwritten by the global parameter `MIDISoundFontName`
- * See [MIDI.js Soundfonts](https://github.com/gleitz/midi-js-soundfonts) for full lists of MIDI instrument names.
- * @type {string}
- */
-MidiAudioPlayer.MIDISoundFontName = 'acoustic_grand_piano';
-
-/**
- * An extension to be added to `MIDISoundFontName` in order to build the full file name of the soundfont JS file.
- * Current valid options are `-mp3.js` and `-ogg.js`
- * This value can be overwritten by the global parameter `MIDISoundFontExtension`
- * @type {string}
- */
-MidiAudioPlayer.MIDISoundFontExtension = '-mp3.js';
-
-export default MidiAudioPlayer;

package/src/media/icons/audio.svg

@@ -1,3 +0,0 @@
-<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
-</svg>

package/src/media/icons/generic.svg

@@ -1,3 +0,0 @@
-<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
-  <path d="M28.8 12L28 8H10v34h4V28h11.2l.8 4h14V12z" />
-</svg>

package/src/media/icons/mic.svg

@@ -1,3 +0,0 @@
-<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" />
-</svg>

package/src/media/icons/movie.svg

@@ -1,3 +0,0 @@
-<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
-  <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z" />
-</svg>

package/src/media/icons/music.svg

@@ -1,3 +0,0 @@
-<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
-</svg>

package/src/media/icons/url.svg

@@ -1,3 +0,0 @@
-<svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
-</svg>

package/src/project/JClicProject.js

@@ -1,282 +0,0 @@
-/**
- *  File    : project/JClicProject.js
- *  Created : 01/04/2015
- *  By      : Francesc Busquets <francesc@gmail.com>
- *
- *  JClic.js
- *  An HTML5 player of JClic activities
- *  https://projectestac.github.io/jclic.js
- *
- *  @source https://github.com/projectestac/jclic.js
- *
- *  @license EUPL-1.2
- *  @licstart
- *  (c) 2000-2020 Educational Telematic Network of Catalonia (XTEC)
- *
- *  Licensed under the EUPL, Version 1.1 or -as soon they will be approved by
- *  the European Commission- subsequent versions of the EUPL (the "Licence");
- *  You may not use this work except in compliance with the Licence.
- *
- *  You may obtain a copy of the Licence at:
- *  https://joinup.ec.europa.eu/software/page/eupl
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the Licence is distributed on an "AS IS" basis, WITHOUT
- *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- *  Licence for the specific language governing permissions and limitations
- *  under the Licence.
- *  @licend
- *  @module
- */
-
-import $ from 'jquery';
-import ProjectSettings from './ProjectSettings.js';
-import ActivitySequence from '../bags/ActivitySequence.js';
-import MediaBag from '../bags/MediaBag.js';
-import Activity from '../Activity.js';
-import { getBasePath, nSlash, getAttr, settings } from '../Utils.js';
-import { Font } from '../AWT.js';
-
-/**
- *  JClicProject contains all the components of a JClic project: activities, sequences, media
- *  files, descriptors and metadata.
- *
- *  This encapsulation is achieved by three auxiliary objects:
- *  - {@link module:project/ProjectSettings.ProjectSettings ProjectSettings}: stores metadata like full title, description, authors, languages,
- *  educational topics...
- *  - {@link module:bags/ActivitySequence.ActivitySequence ActivitySequence}: defines the order in which the activities must be shown.
- *  - {@link module:bags/MediaBag.MediaBag MediaBag}: contains the list of all media files used by the activities
- */
-export class JClicProject {
-  /**
-   * JClicProject constructor
-   */
-  constructor() {
-    this.settings = new ProjectSettings(this);
-    this.activitySequence = new ActivitySequence(this);
-    this._activities = {};
-    this.mediaBag = new MediaBag(this);
-  }
-
-  /**
-   * Loads the project settings from a main jQuery XML element
-   * @param {external:jQuery} $xml - The XML element
-   * @param {string} path - The full path of this project
-   * @param {external:JSZip} [zip] - An optional JSZip object where this project is encapsulated
-   * @param {object} [options] - An object with miscellaneous options
-   * @returns {module:project/JClicProject.JClicProject}
-   */
-  setProperties($xml, path, zip, options) {
-    if (path) {
-      this.path = path;
-      if (path.file)
-        this.basePath = path;
-      else
-        this.basePath = getBasePath(path);
-    }
-    this.zip = zip;
-    this.name = $xml.attr('name');
-    this.version = $xml.attr('version');
-    if ($xml.attr('type') !== undefined && $xml.attr('type') !== '')
-      this.type = $xml.attr('type');
-    if ($xml.attr('code') !== undefined && $xml.attr('code') !== '')
-      this.code = $xml.attr('code');
-    this.settings.setProperties($xml.children('settings'));
-    this.activitySequence.setProperties($xml.children('sequence'));
-    this.mediaBag.setProperties($xml.children('mediaBag'));
-    this.reportableActs = 0;
-    this._activities = {};
-    const $node = $xml.children('activities');
-    const $acts = $node.children('activity');
-    const ownFonts = this.mediaBag.getElementsOfType('font');
-    if (ownFonts.length > 0)
-      options.ownFonts = (options.ownFonts || []).concat(ownFonts);
-    // Skip checkTree when in NodeJS, due to a JSDOM error with jQuery in XML mode
-    if (!settings.NODEJS)
-      Font.checkTree($acts, options);
-    $acts.each((_n, act) => {
-      const $act = $(act);
-      this._activities[nSlash($act.attr('name'))] = $act;
-      if ($act.children('settings').attr('report') === 'true')
-        this.reportableActs++;
-    });
-    return this;
-  }
-
-  /**
-   * Gets a object with the basic attributes needed to rebuild this instance excluding functions,
-   * parent references, constants and also attributes retaining the default value.
-   * The resulting object is commonly usued to serialize elements in JSON format.
-   * @returns {object} - The resulting object, with minimal attrributes
-   */
-  getAttributes() {
-    const keys = Object.keys(this._activities);
-    this.activities = {};
-    keys.forEach(k => {
-      const act = this._activities[k];
-      this.activities[k] = act.jquery ? Activity.getActivity(act, this) : act;
-    });
-
-    return getAttr(this, ['name', 'version', 'type', 'code', 'settings', 'activitySequence', 'activities', 'mediaBag']);
-  }
-
-  /**
-   * Gets a JSON string representing the content of this project. This string can be transformed later into a data
-   * object suitable for `setAttributes`.
-   * @param {number} [space] - The number of white spaces to place between items. Defaults to zero (meaning all the JSON rendered in one single line)
-   * @returns {string} - The JSON text
-   */
-  getJSON(space = 0) {
-    return JSON.stringify(
-      this.getAttributes(),
-      (_key, val) => val.toFixed ? Number(val.toFixed(4)) : val,
-      space
-    );
-  }
-
-  /**
-   * Loads the project settings from a data object
-   * @param {object} data - The data object
-   * @param {string} path - The full path of this project
-   * @param {external:JSZip} [zip] - An optional JSZip object where this project is encapsulated
-   * @param {object} [options] - An object with miscellaneous options
-   * @returns {module:project/JClicProject.JClicProject}
-   */
-  setAttributes(data, path, zip, options) {
-    if (path) {
-      this.path = path;
-      if (path.file)
-        this.basePath = path;
-      else
-        this.basePath = getBasePath(path);
-    }
-    this.zip = zip;
-    this.name = data.name;
-    this.version = data.version;
-    if (data.type)
-      this.type = data.type;
-    if (data.code)
-      this.code = data.code;
-    this.settings.setAttributes(data.settings);
-    this.activitySequence.setAttributes(data.activitySequence);
-    this.mediaBag.setAttributes(data.mediaBag);
-    this.reportableActs = 0;
-    this._activities = data.activities;
-
-    const ownFonts = this.mediaBag.getElementsOfType('font');
-    if (ownFonts.length > 0)
-      options.ownFonts = (options.ownFonts || []).concat(ownFonts);
-    // TODO: Check fonts
-    Font.checkTree(this._activities, options);
-    this.reportableActs = Object.keys(this._activities)
-      .filter(k => this._activities[k].includeInReports)
-      .length;
-    return this;
-  }
-
-  /**
-   * Finds activities by name and builds the corresponding {@link module:Activity.Activity Activity} object.
-   * @param {string} name - The name of the requested activity
-   * @returns {module:Activity.Activity}
-   */
-  getActivity(name) {
-    return Activity.getActivity(this._activities[nSlash(name)], this);
-  }
-
-  /**
-   *
-   * Builds the {@link module:skins/Skin.Skin Skin}, {@link module:media/EventSounds.EventSounds EventSounds} and {@link module:bags/MediaBag.MediaBag MediaBag} fonts associated to this project.
-   * @param {module:JClicPlayer.JClicPlayer} ps - The PlayStation (usually a {@link module:JClicPlayer.JClicPlayer JClicPlayer}) linked to this project.
-   */
-  realize(ps) {
-    // Build skin
-    if (this.skin === null && this.settings.skinFileName !== null && this.settings.skinFileName.length > 0)
-      this.skin = this.mediaBag.getSkinElement(this.settings.skinFileName, ps);
-
-    this.settings.eventSounds.realize(ps, this.mediaBag);
-
-    // Build all elements of type `font`
-    this.mediaBag.buildAll('font', null, ps);
-  }
-
-  /**
-   * Run finalizers on realized objects
-   */
-  end() {
-    // TODO: Implement JClicProject.end()
-  }
-}
-
-Object.assign(JClicProject.prototype, {
-  /**
-   * The project's name
-   * @name module:project/JClicProject.JClicProject#name
-   * @type {string} */
-  name: 'unknown',
-  /**
-   * The version of the XML file format used to save the project (currently 0.1.3)
-   * @name module:project/JClicProject.JClicProject#version
-   * @type {string} */
-  version: '0.1.3',
-  /**
-   * Optional property that can be used by reporting systems
-   * @name module:project/JClicProject.JClicProject#type
-   * @type {string} */
-  type: null,
-  /**
-   * Optional property that can be used by reporting systems
-   * @name module:project/JClicProject.JClicProject#code
-   * @type {string} */
-  code: null,
-  /**
-   * Object containing the project settings
-   * @name module:project/JClicProject.JClicProject#settings
-   * @type {module:project/ProjectSettings.ProjectSettings} */
-  settings: null,
-  /**
-   * Object containing the order in which the activities should be played
-   * @name module:project/JClicProject.JClicProject#activitySequence
-   * @type {module:bags/ActivitySequence.ActivitySequence} */
-  activitySequence: null,
-  /**
-   * Array of jQuery xml elements containing the data of each activity. Don't rely on this object
-   * to retrieve real activities. Use the method {@link module:project/JClicProject.JClicProject#getActivity getActivity} instead.
-   * @name module:project/JClicProject.JClicProject#_activities
-   * @private
-   * @type {external:jQuery[]} */
-  _activities: null,
-  /**
-   * Number of activities suitable to be included reports
-   * @name module:project/JClicProject.JClicProject#reportableActs
-   * @type {number}
-   */
-  reportableActs: 0,
-  /**
-   * The collection of all media elements used in this project
-   * @name module:project/JClicProject.JClicProject#mediaBag
-   * @type {module:bags/MediaBag.MediaBag} */
-  mediaBag: null,
-  /**
-   * The object that builds and manages the visual interface presented to users
-   * @name module:project/JClicProject.JClicProject#skin
-   * @type {module:skins/Skin.Skin} */
-  skin: null,
-  /**
-   * Relative path or absolute URL to be used as a base to access files, usually in conjunction
-   * with {@link module:JClicPlayer.JClicPlayer#basePath}
-   * @name module:project/JClicProject.JClicProject#basePath
-   * @type {string} */
-  basePath: '',
-  /**
-   * Full path of this project
-   * @name module:project/JClicProject.JClicProject#path
-   * @type {string} */
-  path: null,
-  /**
-   * The JSZip object where this project is stored (can be `null`)
-   * @name module:project/JClicProject.JClicProject#zip
-   * @type {external:JSZip} */
-  zip: null,
-});
-
-export default JClicProject;