NattyNote
NattyNote copied to clipboard
Published
20 hours ago •
ahmedelq
ahmedelq
Take time-stamped YouTube notes
NattyNote
Take time-stamped YouTube notes
📦 Installation
⭐ Overview
NattyNote is a powerful yet minimalist, keyboard-centric browser extension. It enables keyboard-savvy users to take time-stamped notes while watching YouTube videos, and easily copy it to their preferred note-taking/knowledge base app.
Features
- Lightweight. (~20kb)
- Automatically pause/play the video while and after taking notes.
- Take video snapshots.
- Custumizable shortcuts.
- Custumizable templates.
- Caption autocomplete.
- Auto save.
- Clickable timestamps.
- RTL support.
⚙️ How it works
- Pause and capture: Quickly capture key points by pressing
Alt+Pto pause the video, write your note, and save it withAlt+Enter. Timestamped notes will appear below the video for easy reference. - On-the-fly capture: Use
Alt+Uto take notes directly without pausing the video. - Snapshots?: Press
Shiftwith any of the commands above to automatically take a snapshot of the video alongside your note.
👀 Preview
Tutorial
Keyboard bindings
You can customize keybindings (shortcuts) via NattyNote Icon ➡️ Settings ➡️ Keybindings.
Below are the default used keybindings:
| Name | Keybinding | Description |
|---|---|---|
| Prompt+Toggle | ALT+P |
Shows the note prompt and toggles the player; stops it if it is playing and starts it if it is stopped. |
| Prompt | ALT+U |
Shows the note prompt without toggling the player; if the player is playing it won't be paused and vice versa. |
| Prompt+Toggle+Snapshot | SHIFT+ALT+P |
Same behavior as Prompt+Toggle but also takes a snapshot of the video. |
| Prompt+Snapshot | SHIFT+ALT+U |
Same behavior as Prompt but also takes a snapshot of the video. |
| Exit prompt | None | Close the prompt, discarding current note. Optional since it can always be called by Escape. |
| Deck focus | ALT+K |
Focus on the notes deck. |
| Deck blur | ALT+K |
Removes focus from the notes deck and places it at the video player. It's optional since it can always be called by Escape |
| Copy deck content | ALT+C |
Copies the entire deck to clipboard in HTML format (plaintext in Firefox). A combination of CTRL+A and CTRL+C is preferred in Firefox |
Templates and variables
Templates allow you to fine-tune the output of the notes in HTML, with useful variables.
You can customize the templates via NattyNote Icon ➡️ Settings ➡️ Templates.
There are 3 templates
| Name | Description | Default value | Example |
|---|---|---|---|
| Deck initialization template | When you first take a note for the first time, this string will be added at the top of your notes. Useful to add metadata about the video. | (%NOW%) <strong>(%VID_TITLE%)</strong> (%CH_NAME%) |
 |
| Snapshot template | Describe how to wrap the base64 encoded image when a snapshot is created. |
<img src="(%SCREENSHOT_SRC%)"/> |
 |
| Note template | Describe how to format a note when it is comitted. Note that SCREENSHOT_FORMATTED might be empty and will be substited with the Snapshot template desribed above. |
<p><a href="https://www.youtube.com/watch?v=(%VID_ID%)&t=(%TS_RAW%)s">(%TS_FORMATTED%)</a>(%NOTE%)</p>(%SCREENSHOT_FORMATTED%) |
 |
Variables:
| Name | Code | Description | Example |
|---|---|---|---|
| Video ID | VID_ID |
Stores YouTube unique video ID | iw97uvIge7c |
| Raw timestamp | TS_RAW |
A in double-precision floating-point value that represents the timestamp in in seconds at which a particular note has been taken. | 47.543641 |
| Formatted timestamp | TS_FORMATTED |
Human-friendly representaiton of the raw timestamp | 00:46 |
| Note | NOTE |
This is the actual note taken by the user | This is a note with a snapshot! |
| Formatted snapshot | SCREENSHOT_FORMATTED |
*A substitution for the Snapshot template desribed above. It might be empty (null) in case no snapshots were taken. |
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA.../> |
| Snapshot sourcecode | SCREENSHOT_SRC |
A representaiton of a snapshot endeded in base64 |
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA.. |
| Current date and time | NOW |
Current date and time | 2/15/2024, 3:59:33 PM |
| Video title | VID_TITLE |
Video title | Using Caffeine to Optimize... |
| Channel name | CH_NAME |
Channel name | Andrew Huberman |
Auto-completion
To enable caption auto-completion:
- Turn-on YouTube captions, hit
c(YouTube shortcut) or click theCCicon to activate closed captions. - Captions will appear faintly within the NattyNote prompt.
- Auto-fill with
TaborEnterand it will insert the current caption text into prompt.
🌱 Contribution
Please open an issue to:
- Add / suggest a feature.
- Report an issue.
- Improve code quality.
Manual build
git clone https://github.com/ahmedelq/NattyNote.git
cd NattyNote/src
npm install
npm run serve:firefox
#Or, with chrome:
#npm run serve:chrome
🛣️ Future plans
- Add i18n support.
- Generalize to every video platform.
- Rewrite in TypeScript.
📜 License
NattyNote is released under GPL-3.0 License. Check the LICENSE file for details.
ahmedelq