Code Monkey home page Code Monkey logo

aiana-player's Introduction

Aiana Web Player

What is Aiana

Aiana is a web media player meant to consume MOOC resources. It started as a research project at Inria Bordeaux in the POTIOC team. Its aim is to propose new design principles for MOOCs in order to let people with disabilities have a better experience when consuming the contents.

The player focuses on trying to improve the general MOOC experience for people with cognitive impairments for whom accessibility standards are far from being established.


How to Use it

There are two recommended ways to integrate the player when you want to use the main channel releases.

Integrating the JavaScript Code to Your Web Pages

This integration lets you use your own JavaScript files and use your own servers to host it.

  1. Download the target version release archive. The "Releases" page is where all archives can be downloaded from.

  2. Extract scripts so they can be accessed from your pages. For example, /public/js, at the root of your web server.

  3. Add an element with id="root" to your pages. The player will load its content inside this element, so it is important that is remains empty, unless of course you want to overwrite its content.

  4. Update your pages by adding <script> tags to include the JavaScript files.

The Inria MOOC about digital accessibility courses are made this way and may be a good example to get started.

Fallback

To provide content to the users who do not have JavaScript enabled, we recommend that you use a noscript tag containing a video tag.

public/index.html file does provide an example of what can be provided as a fallback.

A Note About Styles

Needed styles are contained within the application using styled components, and you should not need to override them.

Other Use Cases

If you intend on using this player in a native environment (React Native), please note that the player was not architectured to be used outside a web browser.

It may work, but some unexpected problems may happen and no support will be provided.


Development

Development Resources

This repository does not include development resources excepted the index.html file and basic styles.

The development resources are a set of static files sufficient to work offline and avoid network issues. Simply extract the archive and copy its dev directory in public.

The player configuration set in the index.html file expects to find these files and does not require any update.

Start Development Server

  1. Install development resources.

  2. Install npm dependencies:

    npm install

  3. Run development server:

    npm run start

  4. Go to http://localhost:3000.

  5. Follow the guidelines to start developing. You may find the following resources handy:

Create a Release

Test Build Locally

INLINE_RUNTIME_CHUNK=false npm run build
rm -rf release
mkdir release
node scripts/extract-scripts.js

Continuous Integration

Travis CI is used as continuous integration platform.

Whenever a Git tag is pushed, Travis will perform tests and build an archive containing the files to be included in web pages.

Note that due to a react-scripts limitation and the will to not eject the project, a manifest.yml file is included to know what files are necessary to load the player.

Releases can be found on the project release page.

Note that there is a static link to the latest release which is used for website deployment.


Project Documentation


Code Status

Build Status

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.