Add background + watching list & settings

besuper · May 17, 2022 · 0f86d0c · 0f86d0c
1 parent f15fd20
commit 0f86d0c
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 0 deletions.
diff --git a/src/background.js b/src/background.js
@@ -0,0 +1,68 @@
+var watch_list = {};
+
+// Fetch watching list from local storage
+chrome.storage.local.get(['tns_watching_list'], function (result) {
+    if (result.tns_watching_list != undefined) {
+        watch_list = result.tns_watching_list;
+    } else {
+        watch_list = result;
+    }
+});
+
+// Add listener to all messages
+chrome.runtime.onMessage.addListener(
+    function (request, _, sendResponse) {
+
+        // When watching a VOD the extension is sending update_time to keep the correct current VOD time
+        if (request.type === "update_time") {
+
+            const data = request.data;
+
+            watch_list[data["id"]] = {
+                "link": data["link"],
+                "title": data["title"],
+                "time": data["time"],
+                "max_time": data["max_time"],
+            };
+
+            //chrome.storage.local.set({ "tns_watching_list": watch_list }, () => { });
+        }
+
+        // Feth a specific data with ID
+        if (request.type === "fetch_data") {
+            if (watch_list.hasOwnProperty(request.id)) {
+                sendResponse({ success: true, data: watch_list[request.id] });
+                return;
+            }
+
+            sendResponse({ success: false });
+            return;
+        }
+
+        // Fetch the entire watching list
+        if (request.type === "fetch") {
+            sendResponse({ success: true, data: watch_list });
+            return;
+        }
+
+        // Update a VOD
+        if (request.type === "update") {
+            watch_list[request.id] = request.data;
+
+            //chrome.storage.local.set({ "tns_watching_list": watch_list }, () => { });
+        }
+
+        // Delete a VOD
+        if (request.type === "delete") {
+            delete watch_list[request.id];
+
+            //chrome.storage.local.set({ "tns_watching_list": watch_list }, () => { });
+        }
+
+        sendResponse({ success: true });
+    }
+);
+
+setInterval(() => {
+    chrome.storage.local.set({ "tns_watching_list": watch_list }, () => { });
+}, 1200);
diff --git a/src/content/popup.html b/src/content/popup.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TwitchNoSub</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h2>TwitchNoSub</h2>
+
+    <ul class="navbar">
+        <li><a href="watching_list.html">Watching list</a></li>
+        <li><a href="popup.html">Settings</a></li>
+    </ul>
+
+    <hr>
+
+
+    <label for="chat_toggle" class="toggle">Chat replay</label>
+    <input type="checkbox" id="chat_toggle" class="checkbox" />
+
+    <script src="popup.js"></script>
+    <script src="../scripts/jquery-3.6.0.min.js"></script>
+</body>
+
+</html>
diff --git a/src/content/popup.js b/src/content/popup.js
@@ -0,0 +1,11 @@
+const chat_toggle_box = document.getElementById("chat_toggle");
+
+chrome.storage.local.get(['chat_toggle'], function (result) {
+    chat_toggle_box.checked = result.chat_toggle;
+});
+
+chat_toggle_box.onchange = () => {
+    chrome.storage.local.set({ "chat_toggle": chat_toggle_box.checked }, function () {
+        console.log('Updated chat_toggle');
+    });
+}
diff --git a/src/content/style.css b/src/content/style.css
@@ -0,0 +1,83 @@
+* {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    width: 420px;
+}
+
+.navbar {
+    display: flex;
+
+    flex-direction: row;
+    align-items: center;
+
+    list-style-type: none;
+
+    padding-left: 10px;
+}
+
+.navbar>li {
+    margin-right: 20px;
+}
+
+a {
+    text-decoration: none;
+
+    color: black;
+}
+
+.watch>ul {
+    padding-left: 10px;
+}
+
+.watch_vod {
+    display: flex;
+
+    flex-direction: row;
+    text-decoration: none;
+    justify-content: space-between;
+
+    margin-bottom: 10px;
+}
+
+.btn {
+    float: right;
+}
+
+.btn>button {
+    cursor: pointer;
+}
+
+.duration {
+    padding-top: 30px;
+}
+
+.meta {
+    padding-top: 10px;
+}
+
+.watch {
+    max-height: 200px;
+    overflow-y: auto;
+
+    padding-right: 10px;
+}
+
+.watch::-webkit-scrollbar {
+    width: 8px;
+}
+
+.watch::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 2px;
+}
+
+.watch::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 2px;
+}
+
+.watch::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
diff --git a/src/content/watching_list.html b/src/content/watching_list.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TwitchNoSub</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h2>TwitchNoSub</h2>
+
+    <ul class="navbar">
+        <li><a href="watching_list.html">Watching list</a></li>
+        <li><a href="popup.html">Settings</a></li>
+    </ul>
+
+    <hr>
+
+    <h3>Watching list</h3>
+
+    <div class="watch">
+        <ul id="watch"></ul>
+    </div>
+
+    <script src="watching_list.js"></script>
+    <script src="../scripts/jquery-3.6.0.min.js"></script>
+</body>
+
+</html>
diff --git a/src/content/watching_list.js b/src/content/watching_list.js
@@ -0,0 +1,69 @@
+var watch_list = {};
+const watch_element = document.getElementById("watch");
+
+function delete_vod(id) {
+    chrome.runtime.sendMessage({ type: "delete", id: id }, function (response) {
+        if (response.success) {
+            delete watch_list[id]; // Remove the element locally
+
+            document.getElementById(id).remove();
+            document.getElementById(id + "-hr").remove();
+        }
+    });
+}
+
+// Fetch watching list from background
+chrome.runtime.sendMessage({ type: "fetch" }, function (response) {
+    if (response.success) {
+        watch_list = response.data;
+
+        console.log(watch_list);
+
+        for (const [id, vod] of Object.entries(watch_list)) {
+            const author = id.split("_")[1];
+            const title = vod["title"];
+            const formatted_title = title.length > 38 ? title.substring(0, 38) + "..." : title;
+
+            const start_time = toHHMMSS(vod["time"]);
+            const end_time = toHHMMSS(vod["max_time"]);
+
+            const element = `
+            <li class="watch_vod" id="${id}">
+                <div class="information">
+                    <div class="title" title="${title}">${formatted_title}</div>
+                    <div class="meta">
+                        <div class="channel_name">Channel: ${author}</div>
+                    </div>
+                </div>
+                <div class="utilities">
+                    <div class="btn">
+                        <button title="Continue watching">
+                            <a href="https://www.twitch.tv/videos/${vod["link"]}" target="_blank">Watch</a>
+                        </button>
+                        <button title="Delete VOD" id="delete_btn_${id}">X</button>
+                    </div>
+        
+                    <div class="duration">${start_time} / ${end_time}</div>
+                </div>
+            </li>
+            <hr id="${id}-hr">
+            `;
+
+            watch_element.innerHTML += element;
+
+            document.getElementById("delete_btn_" + id).onclick = () => {
+                delete_vod(id);
+            };
+        }
+    }
+});
+
+// Format time and max_time
+function toHHMMSS(sec_num) {
+    const date = new Date(0);
+    date.setSeconds(sec_num);
+    const hours = date.getUTCHours() < 10 ? "0" + date.getUTCHours() : date.getUTCHours();
+    const minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+    const seconds = date.getSeconds() < 10 ? "0" + date.getUTCHours() : date.getSeconds();
+    return hours + ":" + minutes + ":" + seconds;
+}