Add options

lopezloo · Apr 9, 2017 · 8b33dd5 · 8b33dd5
1 parent 04b2d80
commit 8b33dd5
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 6 deletions.
diff --git a/manifest.json b/manifest.json
@@ -3,17 +3,22 @@
 
   "name": "YouTube live chat text2speech",
   "description": "This extension reads every message on YouTube live chat.",
-  "version": "0.6",
+  "version": "0.7",
   "author": "lopezloo",
   "homepage_url": "https://github.com/lopezloo/yt-live-text2speech",
 
-  "browser_action": {},
-  "permissions": [],
+  "browser_action": {
+    "default_popup": "options.html"
+  },
+  "permissions": [
+    "storage"
+  ],
   "content_scripts": [
     {
       "matches": ["https://www.youtube.com/live_chat?*"],
       "js": ["jquery-3.2.0.min.js", "script.js"],
       "all_frames": true
     }
-  ]
+  ],
+  "options_page": "options.html"
 }
diff --git a/options.html b/options.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head><title>YouTube live chat text2speech - options</title></head>
+<body>
+
+<p>Voice: <select id="voice"></select></p>
+<p>Emojis: <input type="checkbox" id="emojis"></p>
+<p id="status"></p>
+
+<script src="options.js"></script>
+</body>
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', function() {
+	var voiceSelect = document.getElementById('voice');
+	var emojisCheck = document.getElementById('emojis');
+	var statusText = document.getElementById('status');
+
+	function saveChanges() {
+		var voice = voiceSelect.options[voiceSelect.selectedIndex].value;
+		var emojis = emojisCheck.checked;
+
+		chrome.storage.sync.set({
+			voiceType: voice,
+			emojisEnabled: emojis
+		}, function() {
+			statusText.textContent = 'Options saved. Please refresh tab with chat.';
+			console.log('saveChanges: voice: ' + voice + ' emojis: ' + emojis);
+		});
+	}
+
+	function loadOptions() {
+		chrome.storage.sync.get({
+			// default values
+			voiceType: '',
+			emojisEnabled: true
+		}, function(items) {
+			console.log('loadOptions: voice: ' + items.voiceType + ' emojis: ' + items.emojisEnabled);
+			voiceSelect.value = items.voiceType;
+			emojisCheck.checked = items.emojisEnabled;
+		});
+	}
+	loadOptions();
+
+	voiceSelect.addEventListener('change', saveChanges);
+	emojisCheck.addEventListener('change', saveChanges);
+
+	window.speechSynthesis.onvoiceschanged = function() {
+		var voices = speechSynthesis.getVoices();
+		for(i = 0; i < voices.length; i++) {
+			var option = document.createElement('option');
+			option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+			option.value = voices[i].lang;
+			option.setAttribute('data-name', voices[i].name);
+			voiceSelect.appendChild(option);
+		}
+		console.log('Options: loaded ' + voices.length + ' voices.');
+	};
+});
diff --git a/script.js b/script.js
@@ -1,8 +1,27 @@
 /*
 TODO:
-options: language, auto mode, emojis
+auto mode
 */
 
+var options = {
+	voiceType: '',
+	emojisEnabled: true,
+	// automode
+}
+
+function loadOptions() {
+	chrome.storage.sync.get({
+		// default values
+		voiceType: '',
+		emojisEnabled: true
+	}, function(items) {
+		options.voiceType = items.voiceType;
+		options.emojisEnabled = items.emojisEnabled;
+		console.log('loadOptions: voice: ' + items.voiceType + ' emojis: ' + items.emojisEnabled);
+	});
+}
+loadOptions();
+
 class ChatWatcher {
 	constructor() {
 		this.queue = {};
@@ -32,6 +51,7 @@ class ChatWatcher {
 			speechSynthesis.cancel();
 			let u = new SpeechSynthesisUtterance(msgt);
 			u.onend = this.onSpeechEnd;
+			u.lang = options.voiceType;
 			speechSynthesis.speak(u);
 		}
 	}
@@ -103,7 +123,13 @@ $(document).ready(function() {
 					if ($(this).is('yt-live-chat-text-message-renderer')) {
 						let id = $(this)[0].id;
 						let author = $(this).find('#author-name').text();
-						let msg = getTextWithAlts($(this).find('#message'));
+
+						let msg;
+						if(options.emojisEnabled) {
+							msg = getTextWithAlts($(this).find('#message'));
+						} else {
+							msg = $(this).find('#message').text();
+						}
 						watcher.addToQueue(id, author, msg);
 					}
 				});