Skip to content
This repository has been archived by the owner on Aug 20, 2023. It is now read-only.

Commit

Permalink
Updated the README to reflect the new UI and technical changes.
Browse files Browse the repository at this point in the history
  • Loading branch information
Mandrenkov committed Oct 16, 2020
1 parent 855db0b commit be78f69
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 13 deletions.
24 changes: 11 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ FreshView for YouTube™ is a [Chrome](https://chrome.google.com/webstore/detail

---

#### Repository Layout
### Repository Layout

The contents of the top-level directories match their names exactly:

Expand All @@ -27,25 +27,23 @@ The [js](js) directory contains the following scripts:
| [injection.js](js/injection.js) | Attaches listeners to browser storage events. |
| [logger.js](js/logger.js) | Wraps `console` to control the visibility of messages. |
| [manager.js](js/manager.js) | Finds and manages Videos on a page. |
| [popup.js](js/popup.js) | Attaches listeners to the extension UI. |
| [path.js](js/path.js) | Path parses the URL of a YouTube™ page. |
| [popup.js](js/popup.js) | Attaches event listeners and initializes animations. |
| [storage.js](js/storage.js) | Adapts the browser local storage API. |
| [video.js](js/video.js) | Implements a model for YouTube™ videos. |

#### How it Works
### How it Works
When the DOM is mutated, FreshView polls the DOM for HTML elements that match the expected structure of a YouTube™ video. Each HTML element that matches the structure of a YouTube™ video is converted into a `Video` object. All Videos with a view progress that meets or exceeds the current view threshold are added to a dynamic collection of Videos known as an `Album`. When a Video is added to an Album, it is displayed or hidden depending on the state of the *Hide Videos* toggle. Similarly, when a Video is removed from an Album, it is reverted to a visible state.

When the DOM is mutated, FreshView polls the DOM for HTML elements that match the expected structure of a YouTube™ video. Each HTML element that matches the structure of a YouTube™ video is converted into a `Video` object. All Videos with a view progress that meets or exceeds the current view threshold are added to a dynamic collection of Videos known as an `Album`. When a Video is added to an Album, it is displayed or hidden depending on the state of the UI checkbox. Similarly, when a Video is removed from an Album, it is reverted to a visible state.

##### Technical Notes
#### Technical Notes
1. The visibility of a Video is controlled by setting the `display` attribute of a YouTube™ video element's `style`.
1. The view progress of a Video is derived from the red bar shown along the bottom of a YouTube™ video element.
1. Only DOM `childList` mutations trigger a poll request.
1. DOM mutations that occur within 200 milliseconds of one another are batched into a single poll request.
1. The view threshold slider is only synced on `mouseup` events to avoid exceeding the `storage.sync` quota.
1. YouTube™ videos that appear in the Autoplay panel or the History tab are ignored.
1. YouTube™ videos that appear in the Autoplay panel are ignored.
1. A YouTube™ page is identified by the concatenation of its path and query arguments.
1. The durations of the CSS transitions are initialized *after* the first animation frame to enable instantaneous loading.

### Screenshots

#### User Interface
![FreshView for YouTube™ UI](assets/popup.png "FreshView for YouTube™ User Interface")

#### Watch Progress
![Video Progress Demonstration](assets/progress.png "Watch Progress")
![FreshView for YouTube™ UI](assets/popups.png "The two different FreshView for YouTube™ themes.")
Binary file removed assets/popup.png
Binary file not shown.
Binary file added assets/popups.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit be78f69

Please sign in to comment.