75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
|
import { createMemo, createSignal, onMount } from 'solid-js'
|
||
|
|
import { For } from 'solid-js/web'
|
||
|
|
import type { Shout } from '../../graphql/types.gen'
|
||
|
|
import { drawAudio } from '../../utils/soundwave'
|
||
|
|
type MediaItem = any
|
||
|
|
|
||
|
|
export default (props: { shout: Shout }) => {
|
||
|
|
const media = createMemo<any[]>(() => {
|
||
|
|
if (props.shout.media) {
|
||
|
|
console.debug(props.shout.media)
|
||
|
|
return [...JSON.parse(props.shout.media)]
|
||
|
|
}
|
||
|
|
return []
|
||
|
|
})
|
||
|
|
const [currentTrack, setCurrentTrack] = createSignal(media()[0])
|
||
|
|
const [paused, setPaused] = createSignal(true)
|
||
|
|
const togglePlayPause = () => setPaused(!paused())
|
||
|
|
const playMedia = (m: MediaItem) => {}
|
||
|
|
const [audioContext, setAudioContext] = createSignal<AudioContext>()
|
||
|
|
const currentTimer = createMemo(() => {
|
||
|
|
// TODO: return current audio player track position
|
||
|
|
return 1
|
||
|
|
})
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
const actx = new AudioContext()
|
||
|
|
setAudioContext(actx)
|
||
|
|
drawAudio(actx, currentTrack().src)
|
||
|
|
})
|
||
|
|
|
||
|
|
const SoundWave = () => <canvas></canvas>
|
||
|
|
return (
|
||
|
|
<div class="audio-container">
|
||
|
|
<div class="audio-img">
|
||
|
|
<img
|
||
|
|
class="ligthbox-img lazyload zoom-in"
|
||
|
|
width="320"
|
||
|
|
height="320"
|
||
|
|
alt={props.shout.title}
|
||
|
|
title={props.shout.title}
|
||
|
|
src={props.shout.cover}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="audio-player-list">
|
||
|
|
<div class="player ng-scope">
|
||
|
|
<div class="player-title ng-binding ng-scope">{currentTrack().title}</div>
|
||
|
|
<i class="fas fa-pause fa-3x fa-fw ng-scope" onClick={togglePlayPause} style=""></i>
|
||
|
|
<div class="player-progress">
|
||
|
|
<SoundWave />
|
||
|
|
<span class="position ng-binding">{currentTimer() / currentTrack().length}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul
|
||
|
|
class="other-songs ng-scope is-playing"
|
||
|
|
ng-class="{ 'is-playing': post._id === $root.currentMusicPostId }"
|
||
|
|
style=""
|
||
|
|
>
|
||
|
|
<For each={media()}>
|
||
|
|
{(m: MediaItem) => (
|
||
|
|
<li ng-repeat="mediaItem in post.media" class="ng-scope">
|
||
|
|
<div class="player-status">
|
||
|
|
<i class="fas fa-play fa-fw ng-scope" onClick={() => playMedia(m)}></i>
|
||
|
|
</div>
|
||
|
|
<span class="track-title ng-binding">{m.title}</span>
|
||
|
|
</li>
|
||
|
|
)}
|
||
|
|
</For>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|