byteyilabs / yi-note

YiNote browser extension - online video note taking tool

YiNote 2.0 Release Note: We are excited to announce the release of YiNote 2.0. This release brings a host of new features, improvements, and bug fixes. Get started with YiNote 2.0 to explore the enhance note-taking experience.

YiNote Browser Extension

YiNote, aka TurboNote Chrome Extension, is an effective tool to take and share notes while watching online videos.

Installation

Table of Contents

• Introduction
  • Purpose and history
  • Features
• Get started
  • How to use
  • Development
    • Prerequisite
    • Install dependencies
    • Start development
• About the project
  • Project components
  • Tech stack
  • Browser support
• Contribute
  • As a community
  • As a developer
  • Translate YiNote
• Support YiNote in your website
• Roadmap
• FAQs
• License

Introduction

Purpose and history

YiNote, aka TurboNote chrome extension, is developed to help online learner and video editor to bookmark thoughts and ideas in a fine-grained way while working or learning with online materials. It was developed in 2016 as a side project, and luckily loved by thousands users all around the world.

During the COVID-19 pandemic, I rewrote the extension in a more scalable and maintainable approach. Hopefully it can fill the needs from different users, and boost your learning experience to next level.

Features

• Take time-stamped note while watching online video, currently supported video formats/platform:
  • Youtube video
  • Embedded youtube iframe video
  • HTML5 video
  • Local video via browser
• Send notes to popular note platforms
  • Google Docs
  • MS OneNote
  • Evernote
• Support markdown styling in editor
• Generate PDF with video screenshot
• Annotate screenshot
• Bookmark video
• Tag bookmarks
• Search through bookmarks and notes
• Export and import of data

Get started

How to use

There are serveral options to use this extension:

• Install extension from web stores

  Please see Installation section to install extension from official platform stores. If you are user before v1.0.0, please checkout Migrations Guide for more information.

• Build and install extension locally

  You can also build the extension, then run it locally. Please see Development for more information.

Development

Prerequisite

Suggested environment:

• Node >= 10.0.0
• NPM >= 6.0.0

Install dependencies

yarn install

Start development

Run yarn start:ext.

For content script change, you need to reload the extension in chrome://extensions tab.

For background and options changes, just refresh the page should be able to load the changes.

playground mode is also provided to easy content script development. This mode simulates content script to inject UI widget in page served from webpack dev server

For more information about how to develop browser extensions, please refer to Chrome extension get started

About the project

Project components

This extension inject content script to display UI widget and interact with host page.

Background Scripts is used for message handling and handling data migrations.

Options page is provided to give more webpage real estate for data management and configuring settings.

YiNote store data in browser.storage on user's local device.

Tech stack

Thanks for the open source community. YiNote depends on lots of awesome open source modules. In the following part, I'll only list part of them to share base knowledge of the how this project is built.

• React for UI components
• React Router for routing. MemoryRouter is used for content script, HashRouter is used for options page
• Easy Peasy for state management
• react-i18next for internationalization
• Styled Components to write cssinjs styled styles
• Material UI for quickly wrapup complex UI components
• Webpack as bundler

Browser support

YiNote leverages mozilla's Web extension polyfill to achieve better support for Chrome, Firefox and other Chrome-compatible browsers. For detailed support informarion, please see Supported Browsers

Contribute

As a community

• Expose YiNote to more people, share it via blog post, facebook, twitter etc.
• Answer questions in the issue tracker
• Support financially on Patreon and GitHub Sponsor

As a developer

Please read the Contribution Guide

Translate YiNote

YiNote only supports English currently, please help translate YiNote to make it accessible to more users. To translate please follow the English message json file and translate the content in message field into other languages. For detailed information, please follow this Browser extension i18n doc

All kinds of contributions from anyone are always welcomed!

Support YiNote in your website

If you have a video website and want to make it work with YiNote, but unfortunately YiNote is not able to properly detect video on your website. There are serveral options you can try.

• Add a new Player to YiNote by following this pull request

• Add player hook in your website.

  1. Add data attribute, [data-yinote="yinote-hook-player"], to your video element. So YiNote can properly locate your video element.
  2. Add message listener to watch on video action messages from YiNote.

  window.addEventListener('message', event => {
    const { data } = event;
    if (data.from !== 'yi-note') {
      return;
    }
  
    switch (data.action) {
      case 'play':
        // handle play video
        return;
      case 'pause':
        // handle pause video
        return;
      case 'seek':
        // get secondsToSeek from data.data
        // then seek to certain time with your player
        return;
      case 'getCurrentTime':
        // get current time from your player, then
        window.postMessage({ ...data, data: $currentTime }, *);
        return;
      case 'getDuration':
        // get duration from your player, then
        window.postMessage({ ...data, data: $duration }, *);
        return;
    }
  }, false);

Roadmap

• (Done) Integration with popular note / document platforms, like Evernote, onenote, google doc.

• (Done) Sync notes from mooc platforms

• Web article annotation

• Cloud support

• Fine grained note sharing

• Multiple devices support (Desktop browser, mobile devices)

FAQs

How to share notes with others?

• YiNote can send notes to Evernote, MS OneNote, Google Docs since v1.2.0. You can firstly send notes to one of the supported services, then generate share link from there.
• You can also export notes as JSON file in options page, then send the exported JSON file out. Whoever get the exported file can then import it via options page.

What should I prepare if I decide not to use YiNote extension any more?

YiNote save users data in chrome local storage (per extension), which means delete the extension will also erase saved notes from your browser. YiNote provides a backup strategy in options page to export local data into a json file. Please make sure you backup your data before delete the extension. Cloud support will be provided in the future to achieve better sync and backup.

Why I bookmarked same title and thumbnail for different videos on Youtube?

Youtube don't update page metas, like title and thumbnails, when video changed in page. So reload page is needed to make sure YiNote can capture proper metadata for the video. YiNote also enabled settings in options page to enable auto reload when video change. Page domain, like www.youtube.com, need to be added when enable this setting. YiNote only applys reload behaviour to listed domains in the settings page.

License

Copyright (c) 2016 - now

Licensed under the GNU GPL3.0 License. View license

yi-note's Issues

Long word is wrapped into separate lines.

Describe the bug
A long word is wrapped into separate lines where it should be just put in one line.

To Reproduce
Steps to reproduce the behavior:
Type a long word

Expected behavior
It should be on just one line of it fits on its own.

Screenshots
Current Behavior:

Expected Behavior:

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 83

I think it can be fixed by adding the word-break: break-word CSS style into the textarea.

Function buttons missing if you add note by clicking confirm instead of tap enter

If you add note by clicking save instead of tap enter, as above, then panel look like below, function buttons missing!

Hope for fixing the bug early, thanks : )

Add setting to apply time preset to generate links

Setting should be provided in the options page to apply preset time to generated links in

• PDF
• Evernote
• OneNote
• Google Docs

Firefox support

• Modify dev and build scripts to support both chromium and firefox platform
• Fix Firefox compatibility issues
• Publish YiNote in Firefox addons store

Share YiNote

Share YiNote to

• Facebook
• Twitter
• Copy link

The new version is great, but how to jump after searching?

Open yinote in the youtubey page, after searching for a bookmark, click the time node to always open the page from the beginning. Instead of jumping to the time. It should be like https://youtu.be/FrCIUS8vpGY?t=13

MS Stream Support

Hello there,

I release video lessons to my students via MS Stream. I've tried using YiNote with it. I can take notes, but when I attempt playing a note, MS Stream shows an error message. A screenshot is here: (user-images.githubusercontent.com/15691746/84920714-8b2dc300-b091-11ea-8cf9-e5181a1dc23c.JPG)

My use-case is that I will record notes to breakdown a video into smaller chunks, export the notes, and then share the JSON file with my students. A student can import and add notes as they wish. This will be very helpful for the student learning.

MS Stream is part of MS Office 365 for enterprises and may not available to the public. I can help with testing. I'm a CS professor.

Thanks!

Title and link are taken from the first video that was played in that tab.

Works perfectly for first video played: title and links are correct in the notes created. But any further videos played in that tab then still use the same title and URL (from the first video) for their notes; so their notes therefore contain the wrong title and wrong links.

Manage bookmarks with tags in options page

• User should be able to add tags to bookmark
• User should be able to filter bookmarks by tags
• When multiple tags are selected, use && logic to filter bookmarks.

Sync notes from Udemy

Flow:

• detect if there are notes in the video page
• ask user for consent
• sync notes to YiNote

Add hook to let website video player communicate with YiNote

To support video websites that cannot be automatically supported by YiNote, YiNote should provide event hooks/interfaces to communicate with the native video player on the website, then developers can follow the hook to integrate the website with YiNote.

PDF time

Hi
Thanks for fixing the issues so quickly with the update, can the altered times in the timeline be reflected in the exported PDF file. i.e I enter a event at 30 secs into the video and in YiNote when i click on the event it plays 5/10/15 secs before whatever i've set it to in the settings which is perfect but the exported PDF will play from 30secs and not play from the preset time.
I work with football coaches and they analyse games, so they want to see/show build up play with the players, the exported PDF can be emailed out for players to review so they can just click on the link and it shows the build up play before the event.

Could a feature to add basic drawing tools be added maybe? At the moment I use Epic Pen to draw on the screen
Ability to import XML files that already has a timeline that would sync with an uploaded video and show in the you tube comments? i've attached a picture of the XML data

Ability to make custom preset event buttons i.e Goal, Offside, Corner, Yellow card etc

Many thanks

Misbehaviour of key event

1. the enter event maps to save note but also add an enter into note text.
   eg: | indicates the cursor position when I enter

test a |video.

turns into

test a 
video.

which is not I want.

Hope yi-note can, for example, discriminate enter and enter with decorate key, like shift+enter for save note and add an enter into note text.

2. On some websites, like https://v.qq.com/, when I click blank( ), it will pause the video too.

Could you add Zoom recording support

The screenshot of video at timestamp does not work for zoom video recording(web)

Can there be support for zoom video recording?

Thank you

All Notes are set to 00:00 in timeline

When i enter a highlight it sets at 00:00 as opposed to where it should be in the timeline

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Browser (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Maintain the structure from the markdown

Is your feature request related to a problem? Please describe.
I use Yi-Note to create notes, using Markdown. So I might use a header. Or make bullet points. This is good: it provides structure and it works, in that note. But then when I finish a playlist, I want to put my notes together, into a document that I can use to keep my knowledge. So I export the notes. But after export, I don't have the structure! No headings. Then it feels like using that Markdown is wasted effort.

Describe the solution you'd like
I would like to export to a format that kept the headings. I don't mind if I have to use something else, so if I export to Google docs, or Microsoft Word Online, it's perfect if it becomes a Google doc or Word doc, with the same structure: the headings and the bullet points.

Describe alternatives you've considered
But if I cannot have this perfect solution, then to export just raw markdown might be enough. For example, if sent to Google Docs, i would install a plugin for docs to allow me to read that markdown in the browser.

Additional context
An example is this playlist called "imaginary numbers are real"
You can see that for a subject like this, after making notes on each video, it is natural to want to combine the notes.

Investigate on converting notes to downloadable audio files

As requested from user

Text to speech feature can be used in scenarios like for creating a youtube video when we don't want to share our voice. For a feature, we can just type it and it will record automatically and we can download it as mp3 and put it in our youtube video without having to share our voice.

Option for jump several seconds back when play video at noted timestamp

Option should be provided in the Settings page.

Text overscanning, losing notes

I have encountered a pretty crucial issue with the interface of YI note. version 1.3.0 from chrome web store.

text within the notes does not wrap to accommodate the size of Yi-note interface. There is no control to navigate from one end of the interface to the other, or to expand the size of the sidebar.

The functions on the right side of the interface are then hidden from view or control unless tabbed over. notes become unreadable

To repeat the process all I had to do was write a note that was longer than the interface of YiNote

Share and export not visible with lots of text

Describe the bug
When there is a lot of text in a note entry, there is an overflow, but no ability to scroll in the x direction, so no ability to see the export or share buttons.

To Reproduce
Type a lot of text in an entry for a note and behavior is reproducible.

Expected behavior
Should show share and export always.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac OS Catalina
• Browser chrome
• Version newest

Additional context
I sent you an email with a video showing the problem as well. As well as my hacky solution with overflow-x. [harrisonfsmith95]

Exported data cannot be import

Currently, import only supports data exported from v1.0.0. All versions above v1.0.0 should be supported.

Auto backup data in Google Drive

Background:

Currently YiNote only storage notes data in the browser's local storage, which may get lost by accident due to uninstallation or bugs introduced with a new release.

Feature request:

• YiNote should be able to periodically sync notes data to users' cloud storage, like Google Drive.
• Sync should happen once a day.
• Cloud storages to support: Google drive.
• User should be able to turn on auto backup in options page.

malposition in option.html

when failing to get image, the SVG is in malposition.

[Extension] Use web component to keep extension widget styles consistence cross different web pages

Add visual bookmarks in the timeline

I found another extension, Smart Bookmarks for YouTube: Productivity Up - Chrome Web Store

That adds cues in the timeline of the video for the bookmarks, and also shortcuts to jump to before and after bookmarks in the video timeline.
I found that very useful and could be implemented in yi-note.

Export to One Note functionality is broken

Describe the bug
Got an error message when attempting to export to one note

To Reproduce
Authenticate with microsoft sign-in
attempt to send to one note
error occurs

Expected behavior
export succeeds

Desktop (please complete the following information):

• Windows
• Chrome
• Latest

First time user

---

Would also like to thank you for making this amazing app!

Support markdown in editor

add tag in the video window

Sometimes I add a video to bookmark to watch it and annotate later.
Could be great to add the tags from the add notes, also to get a pulldown menu from the already added tags to prevent duplicates of mispelled or caps tags.

Exported PDF timestamps different to original timestamps

Stellor v Norbury Cup.pdf

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Screenshots

Specifications

• Extension Version:
• Browser:

Support embedly player

YiNote should be able to auto detect embebly video in page, then initial player for embedly.

Ref: https://docs.embed.ly/docs/playerjs

YiNote bookmarks are mislabeled when bookmarking youtube video from playlist

When making notes of a video that was arrived to as a part of a playlist, YiNote records only the first video's name, and will only link to the first video when clicking on the bookmark. Note the many Duplicate bookmark titles

unique note pages are still generated

notes are retained on the correct pages

however, they are practically inaccessible from the bookmarks menu.

Sometimes there is a workaround where you can refresh the page and YiNote can record the bookmark as a new bookmark, but this does not correct notes that were mislabeled and doesn't seem to affect notes that were arrived to in a playlist

Provide setting to customize screenshot resolution

Provide setting in the options page to customize generated screenshots' resolution.

Words sometimes gets cut out in the note preview

Words sometimes get cut out in the note preview.

To Reproduce
Steps to reproduce the behavior:

1. Write the sentence "This is an example of a lorem ipsum long sentence."

The word "sentence" gets cut out.

Expected behavior
The word sentence should be on another line.

Screenshots

Browser (please complete the following information):

• Browser Chrome
• Version 84

Additional context
My desktop scaling is 150%.

Support export to Notion

Can the note be exported to Notion(https://www.notion.so) too?

Notion is another powerful note app like EverNote.

Sync notes from coursera

Flow:

• detect if there are notes in video page
• ask user for consent
• sync notes to YiNote

Save button keyboard shortcut

The "Save" button on page is hard to click.
And after typing with keyboard, it's more convenient use some keyboard shortcut to save note, like: Ctrl+Enter

Why Lost all notes after upgraded to YiNote v1.3.0?How can I find these note!!!?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Video is not detected when next video is auto played on Coursera.

YiNote should be able to detect video change on Coursera, then reload states.

Failed to send notes to googledocs when missing title or description

Describe the bug
Failed to send notes to google docs when missing title or description

Version
1.5.1

Could you please add“ bilibili.com" and "https://open.163.com/" to the supported player?

Could you please add“ bilibili.com" and "https://open.163.com/" to the supported player?
Here is the introduction:https://en.wikipedia.org/wiki/Bilibili
BiliBili is a very popular video website in China, with many users using it.
There are a lot of people in China who want to take notes on videos of these two websites with our Yi-note plug-in, even if we needs to buy VIP!
Thanks a lot!

Integrate with Google Docs

Integrate with MS OneNote

Not creating PDF

When I click "Create PDF" nothing happens.

When I click create Google Doc it does stuff.

I need to download and share my notes with a client via pdf

Thank you!

Hope for exporting to PDF

Hope for exporting to PDF, so we can save into Evernote etc., and search from one entry.

Shortcut

Is it possible to have a shortcut to be able to start writing a note?
When you are watching a video in full screen, it's actually quite annoying to click on the extension, and it takes half the screen.
A quick way to add a note will be more convenient (like how this extension does it : https://bookmark-it.happydevelopers.co/, you just have to press the "b" key to be able to add quickly a note. )

Thanks

Update website link in app

Update link to https://www.yinote.co/*

Support export to Evernote

• YiNote should let user create note in EverNote with screenshot properly attached.

• YiNote should sync between the extension and Evernote when export to evernote button been clicked.

Embed Screenshot on Google Docs Instead of Hyperlinking It

When I export to Google Docs, the screenshots are uploaded into a separate folder and linked to Google Docs. It would've been better if the screenshots are embedded directly in the document. Alternatively, there could've been an option to choose whether or not the image will be embedded.

Integrate SlideShare Clipper into YiNote

I developed SlideShare Clipper years ago, looks like both extensions share similar functionalities. It should be helpful to put two extensions together.

https://chrome.google.com/webstore/detail/slideshare-clipper/okaejpolmbadfbmnpnmdjdocdblgcija

reference video

when youtube automatically switched to next video i took notes for this video, but yinote related my notes to previous video