butterops / refer Goto Github PK

As a fellow learner on youtube.com, I want to clip details from YouTube videos at any timestamp as notes

While we are watching a youtube video, on click of refer button in the video player the extension should read the following data from web page-

• Video Title, Url
• Channel Name, Url
• Video player Screenshot
• Current time in player

Steps to do

1. Setup this project on your local dev machine README.md
2. Install dependencies and run the project README.md
3. Edit javascript files and add your own scripts source/scripts/youtube.js.

TODO Checklist

• Capture video title
• Capture video url
• Capture channel title
• Capture channel url
• Capture current time in video player
• Capture current screenshot in video player

Story

As a developer I want web-clipper dev version to send clipped content via a URL to a mock REST server's end-points.

Description

Running any of the dev commands line yarn dev:chrome should start a local REST server at http://localhost:3002 with following end-points:

1. GET /status response "OK"
2. POST /clip response "DONE"

Definition of done

1. Clone project and install dependencies
2. Run yarn dev:chrome
3. curl http://localhost:3002/status should respond with OK
4. curl --data-urlencode "{}" http://localhost:3002/clip should respond with DONE
5. Manually stop the command yarn dev:chrome
6. Do step 3 and step 4, should result in error Failed to connect to localhost port 3002: Connection refused

Configure two backends for storing captured clips:

1. LocalStorage
2. API Url

As a Lynda learner I want to clip timestamp details from Lyda tutorials so that I can use them as reference notes.
Clip from Lynda or LinkedIn Learning videos.

• create a new script file
• read the DOMS that have fields of interest

take reference from: https://github.com/rubenspgcavalcante/webpack-extension-reloader

• #6 As a user I want to clip timestamp details from YouTube videos so that I can use them for research
• #12 As a Lynda learner I want to clip timestamp details from Lyda tutorials so that I can use them as reference notes

Put a contributing.md with instructions in the root. Should be friendly to follow for our first time contributors.

Here are some good reference

1. https://github.com/atom/atom/blob/master/CONTRIBUTING.md
2. https://github.com/nayafia/contributing-template

The web clipper should support the following backends to store clipped contents

• #11 As a user I would like to send my web-clips to my Onenote account so that I can read them later
• #7 As a user I would like to send my web-clips to my Evernote account so that I can read them later
• #17 As a user I would like to send my web-clips to Reference app on my desktop so that I can read them later

Clicking on 'Take Notes Button' in video player captures some details as notes. We want to be able to send these notes to user's Evernote account.

In the extension pop up, add a button "share notes to evernote". On click of this button

• Redirect user to evernote auth login
• Create a new notebook in user's evernote account named "Refer Clips"
• On click of refere button in Youtube video player, the extension should sync all new notes to "Refer Clips" notebook of evernote.

To write scripts, we should create a new file source/scripts/evernote.js

• Flatten the nested json output recursively to collection of key, value pair
• Change default extension tiny name to "Reference"
• Add static, disabled options as settings for extension
• Change Copy JSON button to Download JSON
• Disable banner screenshot image
• Dynamically load screenshot image in the table of last captured items instead of showing long DataURL
• Support Downloading the Flattened version of the clipped data

The web clipper should support the following contents from over the internet in order to support initial youtube.com clips

• Screenshots (canvas)
• Texts
• Link (native location)
• Date (native Date())

Definition of done

• Each of the info clip must have it's clip-type as one of the above.

As a user I would like to send my web-clips to my Onenote account so that I can read them later