web/notify.moe
Code Issues Pull Requests Activity

Anime cover preview in player

Browse Source
This commit is contained in:
Eduard Urbach 2018-03-11 23:12:21 +01:00
parent 8898413804
commit 943ee427d6
3 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/sidebar/audioplayer.pixy
View File

@ -2,7 +2,7 @@ component AudioPlayer
#audio-player
#audio-player-anime-info
a#audio-player-anime-link.ajax(href="", title="")
img#audio-player-anime-image.hidden(data-src="", data-webp="true", alt="Anime cover")
img#audio-player-anime-image.lazy.hidden(data-src="", data-webp="true", alt="Anime cover")
a#audio-player-track-title.ajax(href="")

2
layout/sidebar/audioplayer.scarlet
View File

@ -4,7 +4,7 @@
justify-content center
position relative
margin 0.8rem 0
min-height 147px
flex-shrink 0
#audio-player-anime-info
display flex

32
scripts/Actions/Audio.ts
View File

@ -4,11 +4,15 @@ var audioContext: AudioContext
var audioNode: AudioBufferSourceNode
var gainNode: GainNode
var volume = 0.5
var volumeTimeConstant = 0.01
var volumeSmoothingDelay = 0.05
var playId = 0
var audioPlayer = document.getElementById("audio-player")
var audioPlayerPlay = document.getElementById("audio-player-play")
var audioPlayerPause = document.getElementById("audio-player-pause")
var trackLink = document.getElementById("audio-player-track-title") as HTMLLinkElement
var animeLink = document.getElementById("audio-player-anime-link") as HTMLLinkElement
var animeImage = document.getElementById("audio-player-anime-image") as HTMLImageElement
// Play audio
export function playAudio(arn: AnimeNotifier, element: HTMLElement) {
@ -20,7 +24,7 @@ function playAudioFile(arn: AnimeNotifier, trackId: string, trackUrl: string) {
if(!audioContext) {
audioContext = new AudioContext()
gainNode = audioContext.createGain()
gainNode.gain.value = volume
gainNode.gain.setTargetAtTime(volume, audioContext.currentTime + volumeSmoothingDelay, volumeTimeConstant)
}
playId++
@ -70,6 +74,26 @@ function playAudioFile(arn: AnimeNotifier, trackId: string, trackUrl: string) {
let track = await trackInfoResponse.json()
trackLink.href = "/soundtrack/" + track.id
trackLink.innerText = track.title
let animeId = ""
for(let tag of (track.tags as string[])) {
if(tag.startsWith("anime:")) {
animeId = tag.split(":")[1]
break
}
}
// Set anime info
if(animeId !== "") {
let animeResponse = await fetch("/api/anime/" + animeId)
let anime = await animeResponse.json()
animeLink.title = anime.title.canonical
animeLink.href = "/anime/" + anime.id
animeImage.dataset.src = "//media.notify.moe/images/anime/small/" + anime.id + anime.imageExtension
animeImage.classList.remove("hidden")
animeImage["became visible"]()
}
}, console.error)
}
@ -103,6 +127,10 @@ export function stopAudio(arn: AnimeNotifier) {
trackLink.href = ""
trackLink.innerText = ""
// Hide anime info
animeLink.href = ""
animeImage.classList.add("hidden")
if(gainNode) {
gainNode.disconnect()
}
@ -147,7 +175,7 @@ export function setVolume(arn: AnimeNotifier, element: HTMLInputElement) {
volume = parseFloat(element.value) / 100.0
if(gainNode) {
gainNode.gain.value = volume
gainNode.gain.setTargetAtTime(volume, audioContext.currentTime + volumeSmoothingDelay, volumeTimeConstant)
}
}