soundcloak/templates/track.templ

package templates

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

templ TrackHeader(prefs cfg.Preferences, 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 }/>
	if *prefs.Player == cfg.HLSPlayer {
		<script src="/js/hls.js/hls.light.min.js"></script>
	}
}

func next(t *sc.Track, p *sc.Playlist, autoplay bool, mode string, volume string) string {
	r := t.Href() + "?playlist=" + p.Href()[1:]
	if autoplay {
		r += "&autoplay=true"
	}
	if mode != "" {
		r += "&mode=" + mode
	}
	if volume != "" {
		r += "&volume=" + volume
	}
	return r
}

templ TrackPlayer(prefs cfg.Preferences, track sc.Track, stream string, displayErr string, autoplay bool, nextTrack *sc.Track, playlist *sc.Playlist, volume string, mode string) {
	if *prefs.Player == cfg.NonePlayer {
		{{ return }}
	}
	if displayErr == "" {
		if cfg.Restream && *prefs.Player == cfg.RestreamPlayer {
			<audio src={ "/_/restream" + track.Href() } controls autoplay?={ autoplay }></audio>
		} else if stream != "" {
			if nextTrack != nil {
				<audio id="track" src={ stream } controls autoplay?={ autoplay } data-next={next(nextTrack, playlist, true, mode, "")} volume={volume}></audio>
			} else {
				<audio id="track" src={ stream } controls autoplay?={ autoplay }></audio>
			}
			if *prefs.FullyPreloadTrack {
				<script async src="/player_preload.js"></script>
			} else {
				<script async src="/player.js"></script>
			}
			<noscript>
				<br/>
				JavaScript is disabled! Audio playback may not work without it enabled. 
				if cfg.Restream {
					<br/>
					<a class="link" href="/_/preferences">You can enable Restream player in the preferences. It works without JavaScript.</a>
				}
			</noscript>
		}
	} else {
		<div>
			<p style="white-space: pre-wrap;">{ displayErr }</p>
		</div>
	}
}

templ TrackItem(track *sc.Track, showUsername bool, overrideHref string) {
	if track.Title != "" {
		{{ if overrideHref == "" {
			overrideHref = track.Href()
		} }}
		<a class="listing" href={ templ.URL(overrideHref) }>
			if track.Artwork != "" {
				<img src={ track.Artwork }/>
			} else {
				<img src="/placeholder.jpg"/>
			}
			<div class="meta">
				<h3>{ track.Title }</h3>
				if showUsername {
					<span>{ track.Author.Username }</span>
				}
			</div>
		</a>
	}
}

templ Track(prefs cfg.Preferences, t sc.Track, stream string, displayErr string, autoplay bool, playlist *sc.Playlist, nextTrack *sc.Track, volume string, mode string) {
	if t.Artwork != "" {
		<img src={ t.Artwork } width="300px"/>
	}
	<h1>{ t.Title }</h1>
	@TrackPlayer(prefs, t, stream, displayErr, autoplay, nextTrack, playlist, volume, mode)
	if t.Genre != "" {
		<p class="tag">{ t.Genre }</p>
	} else {
		<br/>
		<br/>
	}
	if playlist != nil {
		<details open style="margin-bottom: 1rem;">
			<summary>Playback info</summary>

			<h2>In playlist:</h2>
			@PlaylistItem(playlist, true)

			<h2>Next track:</h2>
			@TrackItem(nextTrack, true, next(nextTrack, playlist, true, mode, volume))

			<a href={templ.URL(t.Href())} class="link">Stop playlist playback</a>
			<br>
			if mode != cfg.AutoplayRandom {
				<a href={templ.URL(next(&t, playlist, false, cfg.AutoplayRandom, volume))} class="link">Switch to random mode</a>
			} else {
				<a href={templ.URL(next(&t, playlist, false, cfg.AutoplayNormal, volume))} class="link">Switch to normal mode</a>
			}
		</details>
	}
	@UserItem(&t.Author)
	<div style="display: flex; gap: 1rem">
		<a class="btn" href={ templ.URL("https://soundcloud.com" + t.Href()) }>view on soundcloud</a>
		if cfg.Restream {
			<a class="btn" href={ templ.URL("/_/restream" + t.Href() + "?metadata=true") } download={ t.Author.Username + " - " + t.Title + ".mp3" }>download</a>
		}
	</div>
	<br/>
	@Description(prefs, t.Description, nil)
	<p>{ strconv.FormatInt(t.Likes, 10) } likes</p>
	<p>{ strconv.FormatInt(t.Played, 10) } plays</p>
	<p>{ strconv.FormatInt(t.Reposted, 10) } reposts</p>
	<p>Created: { t.CreatedAt }</p>
	<p>Last modified: { t.LastModified }</p>
	if t.License != "" {
		<p>License: { t.License }</p>
	}
	if t.TagList != "" {
		<p>Tags: { strings.Join(sc.TagListParser(t.TagList), ", ") }</p>
	}
}

templ TrackEmbed(prefs cfg.Preferences, t sc.Track, stream string, displayErr string) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<link rel="stylesheet" href="/global.css"/>
			<title>soundcloak</title>
			if *prefs.Player == cfg.HLSPlayer {
				<script src="/js/hls.js/hls.light.js"></script>
			}
		</head>
		<body>
			if t.Artwork != "" {
				<img src={ t.Artwork } width="300px"/>
			}
			<h1>{ t.Title }</h1>
			@TrackPlayer(prefs, t, stream, displayErr, false, nil, nil, "", "")
			@UserItem(&t.Author)
		</body>
	</html>
}

templ SearchTracks(p *sc.Paginated[*sc.Track]) {
	<span>Found { strconv.FormatInt(p.Total, 10) } tracks</span>
	<br/>
	<br/>
	if len(p.Collection) == 0 && p.Total != 0 {
		<p>no more results</p>
	} else {
		for _, track := range p.Collection {
			@TrackItem(track, true, "")
		}
		if p.Next != "" && len(p.Collection) != int(p.Total) {
			<a class="btn" href={ templ.URL("?type=tracks&pagination=" + url.QueryEscape(strings.Split(p.Next, "/tracks")[1])) } rel="noreferrer">more tracks</a>
		}
	}
}