vikelabs / lecshare

A React application with typescript implementation: Making lectures more accessible for students with auditory, visual, or learning impairments; and Improving learning outcomes for students in lecture-based courses.

This project was bootstrapped with Create React App.

Ensure that you have node(and npm) installed before proceeding with the rest of setup. Typing npm into console will confirm your installation.

run npm install in the root directory of the project (the one with package.json and package-lock.json). This will create a folder node_modules which will house our dependencies. When pulling new code from repo, remember to npm install to check for any requirements that you don't have.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Workflow

If involved with the team on this project follow the instructions to create new branches and push your work for review.

git branch -b <feature-name>

From your most up to date branch of master or dlv (git branch to check your current branch) type the above command to create a new branch then switch to it. Then, start making any changes you want! Add and commit your files, then...

git push origin <branch-name>

This command will create a new branch on the lecshare-main repo and push your local copy to it. Now it's on the repo for review!

This style of work will isolate feature additions into seperate copies of the code.

Taken from here

lecshare's Issues

CI/CD Setup

As of writing this, there is no CI/CD setup on this project. Since this is an open source project, we can use TravisCI or CircleCI as free options.

Security Model: Kinda Janking

Ability to preview

User Story

As a prof, I want to be able to see what my students see to ensure that what I upload works as expected.

Description

Need a way for professors to view the content they uploaded as a student in order to ensure quality. The professor should be able to upload content then make it available at a later date when they have ensured quality.

Additional Details

This is most likely a button that the professor can press when viewing the edit screen of the post or the default is this view and they just have the option to edit.

Acceptance Criteria

• Professor can view the lectures exactly as a student can for any of the content they upload.
• Ability to preview their post ahead of time (at least text)
• Ability to edit lectures

Audio player as Component

Get audio playing as a little popup component!

Auto Scrolling

When the audio is playing, make the text scroll to follow along.

Single line text highlighting

File upload and Indexing

User Story

I am a professor, and I would like to be able to upload my lectures to the website.

Description

We need a way to upload files (i.e. lecture notes) to the website.

Additional Details

We should also probably keep a database of the lecture files, with fields for the lecturer, the course, the lecture title, etc.

Acceptance Criteria

• User can upload files to the server.
• Files are indexed in a database with additional metadata.

Fix slider drag visual

AWS Access

As an developer we need AWS access probably under a VikeLabs org of some sort.

Lecture config

Create a config file for the application to use to load in lectures.

Currently, we reference two separate files to create one view (the audio and text). We would like to load in a single file that contains the necessary information to load in multiple lectures.

For the time being, this will be a static config json file.

{
    "econ180f2018": {
        "name": "ECON 180",
        "professor": "Christopher Willmore",
        "term": "f2018",
        "lectures": [
            {
                "name": "Lecture X",
                "textSrc": "path to find the text file",
                "audioSrc": "path to find the audio file"
            }
        ]
    }
}

Using axios.get('config.json') from the app, we can fill in the appropriate fields within the app.

Retrieve lecture information from backend GraphQL endpoint

• All lectures in a course will be retrieved from API and shown in the sidebar
• clicking a lecture will retrieve the audio file and transcription associated with a lecture.

Increase the lecture content font size to size 21px

Bigger fonts are easier to read.

Shrink slide into hovering window

When we scroll out of slide view, have the slides follow along in a shrunken hovering window. (like how twitch shrinks your current view)

• ensure this is isolated from issue #27

Change images in slide window

From a set list of photos, be able to iterate through them (back and forth) with 1 or 2 buttons

• Ensure that this is isolated from the shrinking functionality seen in issue #28

Login Form

Login form

A login form is needed for the users, the component should be a component that exists by itself and may mutate some global state, the initial development will just be a login form that takes in no props and has the methods for sending the sever the form (in whatever form ie. json, www-url-encoded) but no implementation.

Figure out hosting

Decide on a platform to host production, for first iteration will just be used to display our prototype and gather research

Basic Login

• Should not be able to access read page from url, needs to be a redirect from login page with verification.
• React router should be able to handle this, I will look into it
• Create new simple login page -basic credential something like guest pw: guest

Early Adopters: Cold Call List

Create a cold call list of professors who would make goo EAs.

Make the body of text as wide as the image.

Image margins that are less wide are easier to read and follow. See Medium's article format as an example: https://instagram-engineering.com/making-instagram-com-faster-part-1-62cc0c327538

Reduce the width of the main text to make the lecture content more readable.

Feature Research: Descript

Look into Descript
Take screenshots and think about what features might be useful for Lecshare.

https://www.descript.com/?ref=producthunt

Update the audio control component to more closely match the new UI

Width: Matches course content
Button color: 70C1B3
Unplayed bar color: 33F3FFBD
Played button color: C4C4C4
Bar outline: 1 pt, black, 15% opacity
Time keeper:

• Left is time played
  -Right is time total
  Color: black, 50% opacity.

Figma Demo: https://www.figma.com/proto/YmQBf3toZmWXPuKS5pcmSr/Lecshare-v2?node-id=1%3A3&viewport=483%2C444%2C0.3895685374736786&scaling=scale-down

Single Word Transcription Highlighting

As a user I need to be able to follow along with the lecture audio in the lecture transcription.

it should look something like it does in here: https://www.figma.com/proto/YmQBf3toZmWXPuKS5pcmSr/Lecshare-v2?node-id=1%3A3&viewport=536%2C432%2C0.6394200921058655&scaling=scale-down

We can mess around with text color later

Change screen content based on Lecture

In the sidebar buttons (lecture 1 and lecture 2) change text in LectureText component on button press.

• use one or two text files, no need to worry about formatting for now, unless you want to, throw into an isolated folder to be accessed later.

Developer environments

User Story

As a developer I want to be able to work in a standardized environment when developing that ensures that when someone else works on the code and when deployed it works the same as it did on my machine

Description

A docker file for development and testing ensures that each developer can use the application on their computer and it works the same.

Additional Details

Some possible issues with this is that windows users must have hyper-v installed.

Acceptance Criteria

• Everyone can run the application and develop it on their computer

optimize highlighting performance

• segment lecture text, slide format
• stop highlighting when finding the highlighted word
• array to store the multiple paragraphs

Formatting of html file

Routing

What are the plans for routing in this project?

Because it we are creating a decently large project a router could really help with keeping the code clean and simple.

Highlighting changes word placement sometimes

Slow audio loading.

For a full sized lecture (ie 50 minutes or so), it takes a while for the audio to load and be ready for playback. A simple solution to this is to enable the HTML5 option in the Howler.js lib.

However enabling this kills the loading all together and currently there is a bug in Howler.js.
There appears to be a workaround if the server can respond to partial content requests.

goldfire/howler.js#1110

goldfire/howler.js#1180

browser compatibility

Bug: No Playing after long pause

There is some weird behavior when I play and then pause for 40 seconds. When I press play again nothing happens.

Populate sidebar based on how many lectures have been uploaded for the course.

Code style guide

We should create a standard style guide for the project so we don't have to manually modify before merges. Something like a basic eslint would work great so we all use ' instead of " and other styles we want.

UI/UX Remodelling, play with CSS and share!

Want to refine how lechsare looks! Our own style and consistency across the whole project

audio player does not format well on small screens such as mobile

when opening site on smaller window or mobile the audio player glitches out, need a way to keep it fixed at the bottom and be responsive to screen size

Pitch Deck / Proposal for Potential Partners.

Create a Generic Proposal/Pitch Deck For Lecshare Partners and Early Adopters

Feature Research: Otter.ai

Look into Otters features: https://otter.ai/pricing

Take screenshots and think about how we might be able to repurpose some of these features for Lecsahre.

Create a read me for how to push new code to dev.

Lets make it really simple for people to contribute. forking, branching, whatever you guys were talking about the other night.

Left align text in the lecture content

From sample html file produced from otranscribe, display in text window (including tags)

Spike: Medium-ify the Lecshare lecture reading experience

Background: Medium.com has, without a doubt, got the best article reading experience on the internet. We wan't to know exactly what styling elements (CSS, HTML, etc.) make it such a great experience.

Article Example: https://onezero.medium.com/what-happens-if-you-try-to-hijack-a-zipcar-to-mexico-a514503b210

Objective: Figure out what makes medium articles so easy to read.

Output: The styling specs of a generic Medium article (font size, paragraph spacing, word spacing, font type, margins, etc.)

Why?: So that we can replicate that reading experience within our own application.

Accessibility

Our product is being built for people with accessibility challenges, research some of the ways that we can use a11y patterns to make sure we're accommodating for these people: https://a11yproject.com/patterns/

Check in with Bryce once you get started.

Deliverables:

• A google doc outlining what we should be doing to build for people with accessibility issues.

Text size changer tool

input a number (min and max) and then have the font on page change font size to that number

GraphQL Research

Research the GraphQL schema and prototype one that is for LecShare.

Readability, usability of text window (styling)

Playback Speed control

As a student, I want to control the playback speed of the lecture so that I can listen to the lecture faster or slower.

Highlighting text changes the dimensions of the text

Remove the image area from the content section

Remove the image and its background so it's just text

Material UI Props

Material UI uses a unique syntax for creating it's components and setting styling. Investigate how to carry props down from parent components to children in order to set up state management.

Authentication for users

Authentication

Soon we will have to implement some authentication functionality such as login, logout, and registering. We should consider how we will be interacting with the backend and how we are handling authentication on the front end.

Options (some):

• JWT
• Sessions
• Auth0 or other third party