Initial code commit. Welcome to GitHub!

StuartJAtkinson · May 1, 2019 · a8fe140 · a8fe140
1 parent 3a8382d
commit a8fe140
Show file tree

Hide file tree

Showing 18 changed files with 651 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+private/*
diff --git a/css/popup.css b/css/popup.css
@@ -0,0 +1,152 @@
+/*--------------------------------------
+ | Common styles
+ +----------------------------------------------------------------------------*/
+:root {
+    --ground-height: 30px;
+    --nether-height: 45px;
+
+    --control-width: 140px;
+    --panel-gap: 5px;
+    --help-width: 20px;
+}
+body {
+    height: 75px;
+    min-width: 165px;
+    width: 165px;
+}
+
+/*--------------------------------------
+ | "Control" panel styles
+ +----------------------------------------------------------------------------*/
+div.control {
+    background-color: #FFF;
+    float: left;
+    height: 100%;
+    width: var(--control-width);
+}
+
+/* "Hide Videos" styles */
+div.ground {
+    border-bottom: 1px solid #DDD;
+    display: block;
+    height: var(--ground-height);
+    text-align: center;
+}
+span.hidevid {
+    display: inline-block;
+    position: relative;
+    bottom: 1px;
+}
+
+/* "View Threshold" styles */
+div.nether {
+    display: block;
+    height: var(--nether-height);
+}
+div.threshold {
+    display: block;
+    padding-top: 8px;
+    text-align: center;
+}
+div.slidebox {
+    display: table-cell;
+    padding: 2px 0 0 2px;
+    vertical-align: middle;
+}
+input.slider {
+    background: #DDD;
+    height: 2px;
+    opacity: 0.75;
+    outline: none;
+    transition: opacity .2s;
+    vertical-align: middle;
+    -webkit-appearance: none;
+    -webkit-transition: .2s;
+    width: 99px;
+}
+input.slider:hover {
+    opacity: 1;
+}
+input.slider::-webkit-slider-thumb {
+    background: #D00;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 10px;
+    -webkit-appearance: none;
+    width: 10px;
+}
+label.percent {
+    vertical-align: middle;
+}
+
+/*--------------------------------------
+ | "Help" panel styles
+ +----------------------------------------------------------------------------*/
+div.help {
+    background-color: #FFF;
+    float: right;
+    margin-left: var(--panel-gap);
+    height: 100%;
+    width: var(--help-width);
+}
+div.symbol {
+    color: #AAA;
+    font-size: 140%;
+    text-align: center;
+    user-select: none;
+}
+div.symbol:hover {
+    color: #F00;
+}
+
+/* "Ground" help styles */
+div.ground-symbol {
+    position: relative;
+    bottom: 3px;
+}
+div.ground-help {
+    height: var(--ground-height);
+    line-height: var(--ground-height);
+}
+div.ground-help:hover div.ground-info::after {
+    background-color: #FFF;
+    color: #333;
+    content: "Toggle the visibility of watched videos.";
+    font-size: 90%;
+    height: var(--ground-height);
+    line-height: 15px;
+    left: 8px;
+    position: absolute;
+    text-align: center;
+    top: 4px;
+    width: var(--control-width);
+}
+div.ground-help div.ground-info:hover {
+    display: none;
+}
+
+/* "Nether" help styles */
+div.nether-symbol {
+    position: relative;
+}
+div.nether-help {
+    height: var(--nether-height);
+    line-height: var(--nether-height);
+}
+div.nether-help:hover div.nether-info::after {
+    background-color: #FFF;
+    bottom: 3px;
+    color: #333;
+    content: "Adjust the minimum \A view progress of a \A watched video.";
+    font-size: 90%;
+    height: var(--nether-height);
+    line-height: 15px;
+    left: 8px;
+    position: absolute;
+    text-align: center;
+    white-space: pre;
+    width: var(--control-width);
+}
+div.nether-help div.nether-info:hover {
+    display: none;
+}
diff --git a/html/popup.html b/html/popup.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="../css/popup.css">
+        <script src="../js/popup.js"></script>
+    </head>
+    <body>
+        <!-- "Control" panel -->
+        <div class="control">
+            <!-- "Hide Videos" checkbox -->
+            <div class="ground">
+                <input type="checkbox" id="hidebox"/>
+                <span class="hidevid">Hide Videos</span>
+            </div>
+            <!-- "View Threshold" slider -->
+            <div class="nether">
+                <div class="threshold">View Threshold</div>
+                <div class="slidebox">
+                    <input type="range" class="slider" id="slider" min="1" max="100" step="1" value="90">
+                    <label class="percent" id="percent" for="slider">100%</label>
+                </div>
+            </div>
+        </div>
+        <!-- "Help" panel -->
+        <div class="help">
+            <div class="ground-help">
+                <div class="symbol ground-symbol">&#9432;</div>
+                <div class="ground-info"></div>
+            </div>
+            <div class="nether-help">
+                <div class="symbol nether-symbol">&#9432;</div>
+                <div class="nether-info"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/icon.png b/icon.png
diff --git a/img/icon.png b/img/icon.png
diff --git a/img/icon128.png b/img/icon128.png
diff --git a/img/icon16.png b/img/icon16.png
diff --git a/img/icon19.png b/img/icon19.png
diff --git a/img/icon24.png b/img/icon24.png
diff --git a/img/icon32.png b/img/icon32.png
diff --git a/img/icon38.png b/img/icon38.png
diff --git a/img/icon48.png b/img/icon48.png
diff --git a/js/background.js b/js/background.js
@@ -0,0 +1,10 @@
+// This script monitors background events.  All it currently does is activate
+// the FreshView extension in the Chrome toolbar.
+// -----------------------------------------------------------------------------
+
+// Add a listener to activate the extension icon in the Chrome toolbar.
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.type === "showPageAction") {
+        chrome.pageAction.show(sender.tab.id);
+    }
+});
diff --git a/js/injection.js b/js/injection.js
@@ -0,0 +1,67 @@
+// This script implements listeners for the Chrome storage API and is executed
+// when the user navigates to a page on YouTube.
+// -----------------------------------------------------------------------------
+
+// Execution entry point.
+function main() {
+    // Activate the extension icon in the Chrome toolbar.
+    chrome.runtime.sendMessage({type: "showPageAction"});
+    // Add a listener for Chrome storage change events.
+    chrome.storage.onChanged.addListener(onStorageChangedListener);
+}
+
+// Listens to Chrome storage change events.
+function onStorageChangedListener(changes, namespace) {
+    console.post("onStorageChangedListener(): Processing event in namespace \"" + namespace + "\":", changes, ".");
+
+    const expected = namespace == "sync" || namespace == "local";
+    if (!expected) {
+        console.post("onStorageChangedListener(): Failed to process event: unexpected namespace \"%s\".", namespace);
+        return;
+    }
+
+    const handled = hideListener(changes) || thresholdListener(changes);
+    if (!handled) {
+       console.post("onStorageChangedListener(): Failed to process event: no keys matched", changes, ".");
+    }
+}
+
+// Listens for events related to the "Hide Videos" checkbox.
+function hideListener(changes) {
+    return listenerWrapper("hide", changes, (hidden) => {
+        manager.hidden = hidden;
+        manager.refreshVideos();
+    });
+}
+
+// Listens for events related to the "View Threshold" slider.
+function thresholdListener(changes) {
+    return listenerWrapper("threshold", changes, (threshold) => {
+        manager.threshold = threshold;
+    });
+}
+
+// Wrapper function that implements a Manager listener flow.
+function listenerWrapper(key, changes, callback) {
+    const handled = key in changes;
+    if (handled) {
+        const value = changes[key].newValue;
+        manager.stop();
+        callback(value);
+        manager.start();
+    }
+    return handled;
+}
+
+// -----------------------------------------------------------------------------
+
+// Toggles the display of debug messages.
+const DEBUG = false;
+
+// Forwards the given arguments to console.log() if debug mode is enabled.
+console.post = (...args) => { if (DEBUG) console.log(...args) };
+
+// Construct the Manager singleton.
+const manager = new Manager();
+
+main();