The itslanguage-js from itslanguage

AudioPlayer logs wrong start position after "ended" event.

When the player stops with an "ended" event, and after use player.play() to start the player again, the shown starting point (in the console) is the ending time. Should be "0".

example:

import { AudioPlayer } from 'itslanguage';

const player = new AudioPlayer();
player.load('some audio.mp3');

player.addEventListener('ended', () => {
  player.play();
  // outputs "Start playing from position: XXX". Should be "Start playing from position: 0".
});

player.play();
// outputs "Start playing from position: 0" on first run

Change 'listX' methods to 'getX' or 'getAllX'

It's more conventional this way.

Add audiorecorder tests

There are no tests yet for audio-recorder.js

Add EmailCredentials model and controller

Add EmailCredentials model with

Email
Password

and controller class

Create

Add wave-packer tests

There are no tests yet for wave-packer.js

Istanbul not generating full coverage reports.

When trying to generate coverage html reports Istanbul spits out
TypeError: Cannot read property 'text' of undefined

thus the html report is incomplete as it links to nonexistant pages.

Same as karma-runner/karma-coverage#157

Implement promises instead of callbacks

Create Pofile Controller

Controller methods:

Get a single profile
List all profiles in organisation

Add media-recorder tests

There are no tests yet for media-recorder.js

Use event emitters

Currently the SDK uses custom implementations of addEventListener and removeEventListener.

It's probably better to use more standarized event emitters (Events). There's a popular port for browsers as well (event-emitter).

Remove organisation from WAMP calls and replace with OAuth2 scope

Whenever @dcsiebe merges the relevant commits into its-ws, remove the organisation ID from wamp calls.

Instead add the OAuth2 scope into the Autobahn connection construction.

Rename Student to User

In order to fit new requirements. Student has to be refactored to User.

Remove getUserMedia checks

I suggest to remove any checks regarding the existence of any form of getUserMedia and just assume that navigator.mediaDevices.getUserMedia is available.

There is a polyfill available for this (md-gum-polyfill).

The SDK should not depend on this polyfill. It might recommend it in the readme.

Create 'Role' model and Controller

User get's a new "role" field. A user can have multiple roles.
A role has a name
A role can have multiple permissions

Remove "organisation" from the pronuncation challenge/analysis URLs

The URLs for the pronunciation challenges and analyses start with "/organisations/{organisation}". In the new API this is removed so that part of the URL should be removed.

The relevant information should be passed in the OAuth2 scope (e.g. /tenant/demo/organisation/org).

Remove organisation ID from challenges.

Once #163 is done, remove organisation ID from speech-, choice- and pronunciation-challenges entirely as they are no longer needed.

The new GUI has an option to playback audio at an increased rate. HTML5 audio seems to provide this option. Perhaps it's best to expose the option through our components so it's there for @joggienl to use.

Create 'Profile' model

Extra information the user now has (name, gender, etc) will be converted to a Profile Class nested in the User object.

Refactor Category to comply to the API docs

Refactor the Category class and controller to match the definition in the API docs.

For example, a category doesn't have the field "categories" anymore, but it has a field "parent" now.

Possibly more changes are required.

AudioPlayer enhancement: volume

I would like to enhance the audio player with volume functionality. This means I can turn up or down the volume, or mute the sound all at once (while still playing).

I think we could implement the following methods for the AudioPlayer:

getVolume, gets the current volume level (guess in %?).
setVolume, sets the volume level.
isMuted, returns bool whether muted or not. Muted means volume level == 0.
mute, pass bool to mute (or un-mute) the sound.
toggleMute, toggle the current state.

Suggested (example) usage:

import { AudioPlayer } from 'itslanguage';

const player = new AudioPlayer();
player.load('some file.wav');
player.play();

player.getVolume(); // get current volume, default at 100%
player.toggleMute(); // set the volume to 0% at once, or return at previous level
player.setVolume(10); // set the volume to 10%
player.mute(0); // set the volume back to previous level or 100% if there wasn't one
player.setVolume(100); // set the volume to 100%

Fix all eslint-disable comments

Most, if not all, eslint-disable comments actually exist for no good reason. They should be removed and the real errors should be fixed.

This includes the rules disabled in .eslintrc.

Create 'Group' model and Controller

-users can be in multiple groups
-group has an id
-group has a name

Split code into smaller files

Some files are huge, especially administrative-sdk.js.

$ git ls-files | xargs wc -l
     4 .babelrc
    22 .eslintrc
     2 .gitignore
     5 .travis.yml
    21 LICENSE
    25 README.md
  2748 administrative-sdk.js
   750 audio-sdk.js
   183 audio-tools.js
   277 cordova-media-player.js
   157 cordova-media-recorder.js
    47 index.js
    56 karma.conf.js
    83 media-recorder.js
    44 package.json
   149 test/basicAuthSpec.js
   255 test/choiceChallengeSpec.js
   207 test/choiceRecognitionSpec.js
    86 test/connectionSpec.js
   195 test/organisationSpec.js
   373 test/pronunciationAnalysisSpec.js
   344 test/pronunciationChallengeSpec.js
   265 test/speechChallengeSpec.js
   275 test/speechRecordingSpec.js
   207 test/studentSpec.js
    82 tools.js
   194 wave-packer.js
   313 web-audio-player.js
   128 web-audio-recorder.js

To quote the Angular2 style guide

Do define one thing (e.g. service or component) per file.

Consider limiting files to 400 lines of code.

I think this is a good guide line for non-angular projects as well.

Add cordova-media-player tests

There are no tests yet for cordova-media-player.js

Add cordova-media-recorder tests

There are no tests yet for cordova-media-recorder.js

Failed to construct 'AudioContext': number of hardware contexts reached maximum

Got a message in Chrome saying "Failed to construct 'AudioContext': number of hardware contexts reached maximum". Apparently setting the AudioRecorder to null doesn't free hardware resources. This could be done with _AudioContext_.close().

I've tested this by calling the AudioRecoder this way:

import { AudioRecorder } from 'itslanguage';

const audioRecorder = new AudioRecorder();

// Doing things, like recording audio...

// Then, close
audioRecorder.audioContext.close();
audioRecorder = null;

This is relevant for example if you use the SDK with React. A component with an audio recorder could be mounted / unmounted several times. After a couple of times this message pops up.

Using the audioRecorder.audioContext property is unwanted. It's undocumented and exposes to much inner workings. It also doesn't guarantee breakage in future versions.

For the consuming part, a solution could be to use a single AudioRecording instance in the whole app. But even better would be to have a function that calls the _AudioContext_.close() function from the SDK (like audioRecorder.close() or something like that.

Another solution could be that the SDK itself manages this to create a single AudioContext instance (in stead of multiple per new AudioRecorder() calls. That way the underlying technology stays in the SDK and doesn't "bother" the consumer.

One final note, the _AudioContext_.close() doesn't have broad browser support. The "SDK manages my context" has my preference.

I've not seen this behaviour with the AudioPlayer component but changes are that some better garbage collection could be done there as well.

More info:

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/close

Some Stack Overflow:

Improve downsampling

https://github.com/jussi-kalliokoski/audiolib.js/

Use this lib or anything better if one is found for better downsampling in wavepacker.js

Use ES6 Imports and exports

Instead of using module.exports = class X{} and const X = require(...), use export default class X {} and import X from ....

Use OAuth2 in REST API requests

When making requests to the REST API, use the new OAuth2 tokens for authentication.

This means requesting an OAuth2 access token and putting it in the Authorization header to make an authenticated request.

Identify unwanted code

Not necessarily all code is wanted. For example tools.extend() is simply a reimplementation of lodash.merge(), and it's unused in our code base.

Unwanted code should be identified and removed.

Add audio-tools tests

There are no tests yet for audio-tools.js

feature: authenticate student with student code

Make sure students can authenticate without a global unique username. The username should be unique within the organisation the user resides in. Request to the API should look something like this:

POST https://api.itslanguage.nl/tokens HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Accept: application/json

grant_type=password&username=username&password=password&scope=tenant%2Fdemo%2Forganisation%2Fabc123%2Fuser%2Fusername

The principal and credentials params from BasicAuth can be used for this feature. Example usage:

// somefile.js

import { Connection, BasicAuth } from 'itslanguage';

const connection = new Connection({...information});
const basicAuth = new BasicAuth('tenant', 'loek', 'here');
connection.getUserAuth(basicAuth, 'org123').then(() => {
  // Hooray!
});

Add web-audio-player tests

There are no tests yet for web-audio-player.js

Add web-audio-recorder tests

There are no tests yet for web-audio-recorder.js

Create 'Category' Model and Controller

As a teacher I want to categorize challenges and be able to plan them across the year.

Characteristics:

A theme will be known as a Category
Categories can be nested
A category can have one or more categories.
A category can have one or more challenges.

Add audioplayer tests

There are no tests yet for audio-player.js

Remove logging

This project has very verbose logging and there's no way to disable this. This spams the console rendering it pretty much useless, especially when recording.

A configurable logger could be used. However, I think it would be best to simply remove all console calls.

Mirror code layout in specs

Each test file should be mirrored by a spec file. This makes it clear which spec is testing which piece of code.

E.g., it there is a file tools.js, there it should be accompanied by a file test/toolsSpec.js.

Refactor analysis code

The SDK should probably be refactored in order to work with the latest refactors in its-ws-server and its-gae: https://build.d-centralize.nl/gerrit/#/c/12573/2
Please validate if a full roundtrip can be made for the analysis functionality in the new backend code all the way to the itslanguage-js-examples.

Enhance SpeechChallange

The recording challenge needs additional fields that the backend will provide soon

SRT file
Image

Process comments from #59

Reflect was incorrectly introduced at some points in #59. It was merged anyway.

The comments from that PR should be fixed.

Travis publishes entire directory to npm

Travis should only deploy the generated build directory.

Apparently the local_dir tag in .travis.yml does not work.

Use binary audio transfer instead of base64 encoding

Please try out msgpack serialisation when submitting binary audio that's currently base64 encoded. This is less efficient. PR #43 reminded me of this.

It previously wasn't possible. See upstream:
crossbario/autobahn-js#67

See also the notes on this subject in https://build.d-centralize.nl/redmine/issues/1475
The backend supports both forms already (base64 and binary), see https://build.d-centralize.nl/redmine/projects/its-ws-server/repository/revisions/fbea39762a514a70ce8cb028d26e1ecfde53e8a7/diff

Travis deploy scripts

Travis is having issues running the deploy scripts when releasing with a tagged commit.

When npm run esdoc is run from the deploy.sh file Travis gives sh: 1: esdoc: not found

Along with Local package.json exists, but node_modules missing, did you mean to install?

Relevant build: https://travis-ci.org/itslanguage/itslanguage-js/builds/181582835

Create build script

By introducing ES6 imports / exports, the code doesn't simply run as-is anymore. Version 0.2.0 can only be used when transpiled at runtime. This can be a choice, but is mostly unwanted and unexpected behaviour.

The code should be transpiled using babel before publishing to npm.

I think it makes sense to move the code into a src directory and output the build in a gitignored build directory. This will require some customization in the release process.

Adapt Profile and User

itslanguage/itslanguage-docs#39 Introduced new changes to the Profile and User domain models and methods. Adapt the sdk to fit the new requirements.

Rewrite constructor method assignments to proper methods

There are places in the current code base where methods are assigned to an instance in the constructor. This is simply weird.

The methods should be rewritten as simple es6 methods. For example:

class AudioPlayer {
  constructor() {
    this.removeEventListener = function(name, handler) {
      self.emitter.off(name, handler);
    };
  }
}

should be written as:

class AudioPlayer {
  removeEventListener(name, handler) {
    this.emitter.off(name, handler);
  }
}

Apply oauth2 changes

In our private its-sdk-js repo, the oauth2 branch contains some changes that could also be applied to master (since oauth2 is now the default).
If these are merged, the private repo can be ditched.

itslanguage / itslanguage-js Goto Github PK

itslanguage-js's People

Contributors

Watchers

Forkers

itslanguage-js's Issues

Recommend Projects

Recommend Topics

Recommend Org