soundcloak/templates/track.templ

package templates

import (
	"github.com/maid-zone/soundcloak/lib/sc"
	"strconv"
	"strings"
)

templ TrackEmbed(t sc.Track) {
	<meta name="og:site_name" content={ t.Author.Username + " ~ soundcloak" }/>
	<meta name="og:title" content={ t.Title }/>
	<meta name="og:description" content={ t.FormatDescription() }/>
	<meta name="og:image" content={ t.Artwork }/>
	<link rel="icon" type="image/x-icon" href={ t.Artwork }/>
	<script src="/js/hls.js/hls.light.js"></script>
}

templ Track(t sc.Track, stream string) {
	if t.Artwork != "" {
		<img src={t.Artwork} class={ViewTransition("t" + t.ID)}>
	}
	<h1>{ t.Title }</h1>
	<audio id="track" data-stream={ stream } controls></audio>
	if t.Genre != "" {
		<p class="tag">{ t.Genre }</p>
	} else {
		<br/>
		<br/>
	}
	<a class="listing" href={ templ.URL("/" + t.Author.Permalink) }>
		<img src={ t.Author.Avatar }/>
		<div class="meta">
			<h3>{ t.Author.Username }</h3>
			if t.Author.FullName != "" {
				<span>{ t.Author.FullName }</span>
			}
		</div>
	</a>
	if t.Description != "" {
		<details>
			<summary>Toggle description</summary>
			<p style="white-space: pre-wrap">{ t.Description }</p>
		</details>
	}
	<p>{ strconv.FormatInt(t.Likes, 10) } likes</p>
	<p>{ strconv.FormatInt(t.Played, 10) } plays</p>
	<p>Created: { t.CreatedAt }</p>
	<p>Last modified: { t.LastModified }</p>
	if t.TagList != "" {
		<p>Tags: { strings.Join(sc.TagListParser(t.TagList), ", ") }</p>
	}
	<script>
		var audio = document.getElementById('track');
		var audioSrc = audio.getAttribute('data-stream');
		if (Hls.isSupported()) {
			var hls = new Hls();
			hls.loadSource(audioSrc);
			hls.attachMedia(audio);
		} else if (audio.canPlayType('application/vnd.apple.mpegurl')) {
			audio.src = audioSrc;
		} else {
			alert('hls not supported');
		}
	</script>
}