Giter VIP home page Giter VIP logo

easel's Introduction

Easel

CI Build Downloads Firefox Users Version Licence

A suite of enhancements for watching lecture recordings at the University of Auckland.

easel (ea•sel ē′zəl) n. An upright frame for displaying or supporting something, such as a Canvas.

Screenshot

Note: This extension simply wraps the existing lecture recording interface. You must be a current student at the University of Auckland in order to use this tool.

Get the Addon

Easel is available on Mozilla Addons. A chrome version is in the works, awaiting review for the Chrome Web Store (stay tuned!).

How to Use

Open the lecture recordings tab on Canvas. If everything is set up correctly, you will see the following button:

Open in Easel Button

Click this and you're done!

For Developers

Obtaining the Source

Clone the repository and install dependencies with npm. You will need either node.js 14 or 15 installed for this.

# Clone repository
$ git clone https://github.com/mjakeman/easel

# Install dependencies
$ npm install

Development/Debugging

Run concurrently (in two separate terminals at the same time):

# Terminal 1
$ npm run watch

# Terminal 2
$ web-ext run -s src --no-config-discovery

Building

$ npm run build
$ web-ext build -s src --no-config-discovery

Testing

In addition to the University's lecture recording infrastructure, easel can also be tested on easel-mock which does not need a University-issued account to use. It is a simple static website that emulates the layout of the official university tool and provides 'fake data' to test the browser extension.

Disclaimer

Easel is not associated with the University. It does not host any copyrighted material and does not allow or faciliate bypassing University authentication in any way, shape, or form. That aside, enjoy! :)

easel's People

Contributors

mjakeman avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

easel's Issues

Support Chrome/Edge

The extension itself works out of the box on edge and chrome.

This'll need a few changes before we can distribute though:

  • All extension files should be in dist, not just javascript
    • Otherwise node_modules gets included
  • Video player isn't very good - Use custom player?
  • Video player does not take up full screen width until playback starts

Chapters UI

Create a user interface for creating/editing/deleting chapters. This should allow users to jump to certain parts of a lecture, as well as show current progress through a given chapter.

Fix lecture IDs

Handle multiple courses (or rather, fall back gracefully)

It's a bit confusing at the moment, and doesn't support the old mediastore website.

Support Lecture Metadata

The first step towards supporting collaborative chapters/annotations.

Have a way to store metadata about a particular lecture (probably by url/id), and let the user manipulate this metadata.

  • For example, maybe we want to allow users to rename lectures
    • e.g. [ L01C ] 20 Jul 12:00 (Part 1) v.1 could become renamed to Introduction Lecture
  • Associate last watched time
    • User can resume from where they left off
  • Store timestamps and associate labels with them
    • Effectively "bookmarks" into a lecture
    • Treat these bookmarks like YouTube chapters

Video Speed Controls

Rather than having to right click the video, it would be nice to have speed control buttons.

Most likely:

  • 0.5X
  • 1.0X
  • 1.5X
  • 2X

Could also have 4X speed just for the fun of it :)

Tutorial / User's Guide

Easel is pretty straightforward to use, but it might be worth typing up a tutorial somewhere.

For now it would cover:

  • Where to find the Open in Easel button
  • Common issues / troubleshooting

And later on, it would deal with (not-yet-implemented) features like chapters/annotations/etc.

Import/Export Metadata

Have some way to import/export lecture metadata. Useful for sharing, debugging, backup, etc.

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.