Only show microphone when speech input is available

This commit is contained in:
Eduard Urbach 2018-04-20 20:24:42 +02:00
parent 16cc544314
commit 21f36ba299
3 changed files with 13 additions and 2 deletions

View File

@ -105,13 +105,18 @@ const sidebar-spacing-y = 0.7rem
// Microphone icon // Microphone icon
.speech-input .speech-input
opacity 0.5 display none
opacity 0
default-transition default-transition
:hover :hover
cursor pointer cursor pointer
opacity 1 opacity 1
.speech-input-available
display block
opacity 0.5
.speech-listening .speech-listening
color link-hover-color color link-hover-color
opacity 1 opacity 1

View File

@ -181,7 +181,8 @@ export function showSearchResults(arn: AnimeNotifier, element: HTMLElement) {
export function searchBySpeech(arn: AnimeNotifier, element: HTMLElement) { export function searchBySpeech(arn: AnimeNotifier, element: HTMLElement) {
let searchInput = document.getElementById("search") as HTMLInputElement let searchInput = document.getElementById("search") as HTMLInputElement
let oldPlaceholder = searchInput.placeholder let oldPlaceholder = searchInput.placeholder
let SpeechRecognition: SpeechRecognitionStatic = (window["SpeechRecognition"] || window["webkitSpeechRecognition"])
let SpeechRecognition: SpeechRecognitionStatic = window["SpeechRecognition"] || window["webkitSpeechRecognition"]
let recognition = new SpeechRecognition() let recognition = new SpeechRecognition()
recognition.continuous = false recognition.continuous = false
recognition.interimResults = false recognition.interimResults = false

View File

@ -205,6 +205,11 @@ export default class AnimeNotifier {
checkNewVersionDelayed("/scripts", this.statusMessage) checkNewVersionDelayed("/scripts", this.statusMessage)
checkNewVersionDelayed("/styles", 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 // // Download popular anime titles for the search
// let response = await fetch("/api/popular/anime/titles/500") // let response = await fetch("/api/popular/anime/titles/500")
// let titles = await response.json() // let titles = await response.json()