web/notify.moe
Code Issues Pull Requests Activity

Only show microphone when speech input is available

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
layout/sidebar/sidebar.scarlet
View File

@ -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

3
scripts/Actions/Search.ts
View File

@ -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

5
scripts/AnimeNotifier.ts
View File

@ -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()