From 21f36ba299ea93503e799952f4e45278d7dd1890 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Fri, 20 Apr 2018 20:24:42 +0200
Subject: [PATCH] Only show microphone when speech input is available

---
 layout/sidebar/sidebar.scarlet | 7 ++++++-
 scripts/Actions/Search.ts      | 3 ++-
 scripts/AnimeNotifier.ts       | 5 +++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet
index acb33085..18b86ee9 100644
--- a/layout/sidebar/sidebar.scarlet
+++ b/layout/sidebar/sidebar.scarlet
@@ -105,13 +105,18 @@ const sidebar-spacing-y = 0.7rem
 
 // Microphone icon
 .speech-input
-	opacity 0.5
+	display none
+	opacity 0
 	default-transition
 
 	:hover
 		cursor pointer
 		opacity 1
 
+.speech-input-available
+	display block
+	opacity 0.5
+
 .speech-listening
 	color link-hover-color
 	opacity 1
diff --git a/scripts/Actions/Search.ts b/scripts/Actions/Search.ts
index 98523410..0021315b 100644
--- a/scripts/Actions/Search.ts
+++ b/scripts/Actions/Search.ts
@@ -181,7 +181,8 @@ export function showSearchResults(arn: AnimeNotifier, element: HTMLElement) {
 export function searchBySpeech(arn: AnimeNotifier, element: HTMLElement) {
 	let searchInput = document.getElementById("search") as HTMLInputElement
 	let oldPlaceholder = searchInput.placeholder
-	let SpeechRecognition: SpeechRecognitionStatic = (window["SpeechRecognition"] || window["webkitSpeechRecognition"])
+
+	let SpeechRecognition: SpeechRecognitionStatic = window["SpeechRecognition"] || window["webkitSpeechRecognition"]
 	let recognition = new SpeechRecognition()
 	recognition.continuous = false
 	recognition.interimResults = false
diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index 68d47f70..57d78d52 100644
--- a/scripts/AnimeNotifier.ts
+++ b/scripts/AnimeNotifier.ts
@@ -205,6 +205,11 @@ export default class AnimeNotifier {
 		checkNewVersionDelayed("/scripts", this.statusMessage)
 		checkNewVersionDelayed("/styles", this.statusMessage)
 
+		// Show microphone icon if speech input is available
+		if(window["SpeechRecognition"] || window["webkitSpeechRecognition"]) {
+			document.getElementsByClassName("speech-input")[0].classList.add("speech-input-available")
+		}
+
 		// // Download popular anime titles for the search
 		// let response = await fetch("/api/popular/anime/titles/500")
 		// let titles = await response.json()