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

Commit

Permalink
Merge pull request #8 from Mandrenkov/v2.1.0
Browse files Browse the repository at this point in the history
Release 2.1.0
  • Loading branch information
Mandrenkov authored Feb 14, 2022
2 parents 17c65ba + c3202db commit 4071b8e
Show file tree
Hide file tree
Showing 25 changed files with 1,793 additions and 822 deletions.
27 changes: 27 additions & 0 deletions .github/workflows/package.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: Package
on:
pull_request:
push:
branches:
- master
release:
workflow_dispatch:

jobs:
Zip:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2

- uses: actions/upload-artifact@v2
with:
name: FreshView
path: |
assets/
css/
html/
img/
js/
LICENSE
manifest.json
57 changes: 0 additions & 57 deletions .github/workflows/release.yml

This file was deleted.

92 changes: 46 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,49 @@
<img src="img/icon24.png"/> FreshView for YouTube™
</h1>

FreshView for YouTube™ is a [Chrome](https://chrome.google.com/webstore/detail/freshview-for-youtube/eckknmnfoohbeklmjlidmfdlakndcfkm) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/freshview-for-youtube/) extension that hides YouTube™ videos which users have already watched.

---

### Repository Layout

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

| **Directory** | **Contents** |
| :-------- | :-------- |
| [assets](assets) | Asset files |
| [css](css) | CSS files |
| [html](html) | HTML files |
| [img](img) | Icon files |
| [js](js) | JavaScript files |

The [js](js) directory contains the following scripts:

| **File** | **Purpose** |
| :--- | :--- |
| [album.js](js/album.js) | Implements a container for Videos. |
| [background.js](js/background.js) | Activates the extension in the browser toolbar. |
| [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. |
| [path.js](js/path.js) | 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. |
| [widget.js](js/widget.js) | Implements the state and lifecycle of UI widgets. |

### 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.

#### 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. 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

![FreshView for YouTube™ UI](assets/popups.png "The two different FreshView for YouTube™ themes.")
FreshView for YouTube™ is a [Chrome](https://chrome.google.com/webstore/detail/freshview-for-youtube/eckknmnfoohbeklmjlidmfdlakndcfkm) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/freshview-for-youtube/) extension that hides watched YouTube™ videos.

## Features

* *Simple* - Intuitive user interface, design, and controls.
* *Convenient* - Choose the minimum view progress of a watched video.
* *Customizable* - Select which types of videos should never be hidden by the extension.

## Installation

The easiest way to install this extension is to follow the instructions on the
[Chrome Web Store](https://chrome.google.com/webstore/detail/freshview-for-youtube/eckknmnfoohbeklmjlidmfdlakndcfkm) or [Add-ons for Firefox](https://addons.mozilla.org/en-US/firefox/addon/freshview-for-youtube/) pages. This is the preferred way to add the latest,
stable version of the extension to your browser.

> **Note:** The Chrome Web Store supports Google Chrome, Microsoft Edge, and
> other Chromium-based browsers.
To install the extension manually, simply clone this GitHub repository and then
refer to the instructions below.

#### Chrome

1. Navigate to `chrome://extensions` via the URL bar.
2. Ensure the **Developer mode** toggle is activated.
3. Click on **Load unpacked**.
4. Select the directory containing the cloned repository.

#### Firefox

1. Navigate to `about:debugging` via the URL bar.
2. Click on **This Firefox** from the left sidebar.
3. Click on **Load Temporary Add-on...**.
4. Select the [`manifest.json`](manifest.json) file from the cloned repository.

## Support

* Source Code: https://github.com/Mandrenkov/FreshView
* Issue Tracker: https://github.com/Mandrenkov/FreshView/issues

If you are having problems or would like to suggest a feature, please create an
issue using the GitHub issue tracker.

## License

FreshView for YouTube™ is **free** and **open source**, released under the
[GNU Public License v3.0](https://www.gnu.org/licenses/gpl-3.0.en.html).
Binary file added assets/popup_dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/popup_light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified 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.
141 changes: 141 additions & 0 deletions css/options.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
@import "shared.css";

/* Section 1: Global Styles --------------------------------------------------*/

body {
align-items: center;
background-color: var(--background-colour-primary);
color: var(--font-colour-primary);
display: flex;
flex-direction: column;
font-family: 'Roboto', sans-serif;
height: 100%;
margin: 0;
transition-duration: var(--transition-duration-colour);
}

a:link {
color: var(--link-colour);
}

a:visited {
color: var(--link-colour);
}

a:active {
color: var(--link-colour);
}


/* Section 2: Header Styles --------------------------------------------------*/

.header {
background-color: var(--background-colour-secondary);
display: flex;
height: 60px;
justify-content: center;
position: fixed;
transition-duration: var(--transition-duration-colour);
width: 100%;
}

.header-title {
color: var(--font-colour-title);
line-height: 60px;
font-size: 1.70rem;
font-weight: var(--font-weight-title);
height: 60px;
}

.header-subtitle {
color: var(--font-colour-secondary);
line-height: 60px;
font-size: 1.70rem;
height: 60px;
}

.header-logo {
display: inline-block;
height: 24px;
padding: 18px;
width: auto;
user-select: none;
}

.header-section-break {
height: 60px;
}

/* Section 3: Divider Styles -------------------------------------------------*/

.divider {
background-color: var(--divider-colour);
height: 1px;
transition-duration: var(--transition-duration-colour);
}

/* Section 4: Section Styles -------------------------------------------------*/

.divider, .section {
width: 800px;
}

.section-title {
color: var(--font-colour-primary);
line-height: 1.50rem;
font-size: 1.50rem;
font-weight: var(--font-weight-title);
padding: 24px 0 12px 0;
}

.section-description {
color: var(--font-colour-secondary);
line-height: 20px;
font-size: 1.20rem;
padding-bottom: 44px;
}

.section-group {
display: flex;
padding: 0 0 24px 0;
}

.section-group-left {
font-size: 1.20rem;
font-weight: var(--font-weight-primary);
width: 160px;
}

.section-group-right {
width: 100%
}

/* Section 5: Option Styles --------------------------------------------------*/

.section-option {
display: flex;
margin-bottom: 24px;
}

div.section-option-left {
margin-top: 2px;
width: 60px;
}

.section-option-right {
padding-left: 15px;
}

.section-option-title {
font-size: 1.20rem;
font-weight: var(--font-weight-primary);
line-height: 24px;
height: 24px;
}

.section-option-description {
color: var(--font-colour-secondary);
line-height: 14px;
font-size: 1.20rem;
}

Loading

0 comments on commit 4071b8e

Please sign in to comment.