Compare commits
5 Commits
da9f4bb0ec
...
8e226e9ea1
| Author | SHA1 | Date | |
|---|---|---|---|
| 8e226e9ea1 | |||
| 2c84d3d818 | |||
| c7dc944264 | |||
| 286a01c4d6 | |||
| 3d92096bb8 |
40
main.go
40
main.go
@@ -11,6 +11,7 @@ import (
|
||||
"os"
|
||||
"path"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
_ "time/tzdata"
|
||||
@@ -19,6 +20,24 @@ import (
|
||||
_ "github.com/mattn/go-sqlite3"
|
||||
)
|
||||
|
||||
type OrderType = string
|
||||
|
||||
const (
|
||||
OrderTypeAsc OrderType = "ASC"
|
||||
OrderTypeDesc OrderType = "DESC"
|
||||
)
|
||||
|
||||
func validateOrderType(orderType string) OrderType {
|
||||
switch strings.ToLower(orderType) {
|
||||
case "asc":
|
||||
return OrderTypeAsc
|
||||
case "desc":
|
||||
return OrderTypeDesc
|
||||
default:
|
||||
return OrderTypeAsc
|
||||
}
|
||||
}
|
||||
|
||||
type Podcast struct {
|
||||
ID int64 `json:"id" db:"id"`
|
||||
Name string `json:"name" db:"name"`
|
||||
@@ -198,8 +217,23 @@ func downloadEpisodeAudioFile(url string) ([]byte, error) {
|
||||
return data, nil
|
||||
}
|
||||
|
||||
func getPodcastEpisodes(db *sqlx.DB, podcastId int64) ([]*Episode, error) {
|
||||
rows, err := db.Queryx("SELECT * FROM episodes WHERE podcast_id = ?", podcastId)
|
||||
func getPodcastEpisodes(db *sqlx.DB, podcastId int64, orderBy string, orderType OrderType) ([]*Episode, error) {
|
||||
allowedColumns := map[string]bool{
|
||||
"title": true,
|
||||
"pubdate": true,
|
||||
"number": true,
|
||||
"created_at": true,
|
||||
}
|
||||
if !allowedColumns[orderBy] {
|
||||
orderBy = "pubdate"
|
||||
}
|
||||
|
||||
orderType = validateOrderType(orderType)
|
||||
|
||||
query := fmt.Sprintf("SELECT * FROM episodes WHERE podcast_id = :podcast_id ORDER BY %s %s", orderBy, orderType)
|
||||
rows, err := db.NamedQuery(query, map[string]any{
|
||||
"podcast_id": podcastId,
|
||||
})
|
||||
if err != nil {
|
||||
return nil, fmt.Errorf("failed to query db: %v", err)
|
||||
}
|
||||
@@ -425,7 +459,7 @@ func main() {
|
||||
return
|
||||
}
|
||||
|
||||
episodes, err := getPodcastEpisodes(db, int64(id))
|
||||
episodes, err := getPodcastEpisodes(db, int64(id), "pubdate", OrderTypeDesc)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), 500)
|
||||
return
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>podcaster</title>
|
||||
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1440px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.podcast-form {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.podcast-form__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.podcast-form__btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.podcasts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 250px);
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.podcast {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.podcast__cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.podcast-form {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.podcast-form__btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 528px) {
|
||||
.podcasts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>podcaster</h1>
|
||||
|
||||
<form method="POST" action="/podcasts" class="podcast-form">
|
||||
<input
|
||||
type="text"
|
||||
inputmode="url"
|
||||
placeholder="rss feed"
|
||||
name="feed"
|
||||
class="podcast-form__input"
|
||||
/>
|
||||
<button type="submit" class="podcast-form__btn">Add podcast</button>
|
||||
</form>
|
||||
|
||||
<div class="podcasts">
|
||||
{{range .Podcasts}}
|
||||
<a href="/podcasts/{{.ID}}" class="podcast">
|
||||
<img src="{{.Image}}" alt="" class="podcast__cover" />
|
||||
<span>{{.Name}}</span>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,74 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{.Podcast.Name}}</title>
|
||||
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1440px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header img {
|
||||
width: 300px;
|
||||
aspect-ration: 1/1;
|
||||
}
|
||||
|
||||
.header .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.episodes {
|
||||
margin-top: 24px;
|
||||
padding: 10px;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
.episode {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="/">podcaster</a></h1>
|
||||
|
||||
<div class="header">
|
||||
<img src="{{.Podcast.Image}}" alt="" />
|
||||
<div class="info">
|
||||
<h2>{{.Podcast.Name}}</h2>
|
||||
<p>{{.Podcast.Description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes">
|
||||
{{range .Episodes}}
|
||||
<div class="episode">
|
||||
<span>{{.Title}}</span>
|
||||
<span>Added {{.CreatedAt.Format "Mon, Jan 2, 2006 15:04"}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -52,7 +52,7 @@ export const PodcastPage = () => {
|
||||
)}
|
||||
<span>{episode.title}</span>
|
||||
</div>
|
||||
<span>Added {new Date(episode.createdAt).toLocaleString()}</span>
|
||||
<span>{new Date(episode.createdAt).toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -68,8 +68,10 @@ export const Player = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-50 max-w-[1440px] w-full mx-auto">
|
||||
<div className="bg-white py-2 px-4 flex items-center gap-4">
|
||||
<div className="fixed bottom-0 left-0 right-0 z-50">
|
||||
<div className="max-w-[1440px] w-full mx-auto">
|
||||
<div className="bg-white py-2 px-4 flex flex-col">
|
||||
<div className="w-full flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
{status === "playing" ? (
|
||||
<button onClick={() => setStatus("paused")}>
|
||||
@@ -115,14 +117,29 @@ export const Player = () => {
|
||||
className="bg-red-500 h-full"
|
||||
></div>
|
||||
</div>
|
||||
<p className="min-w-[50px] text-right">{formatTime(currentTime)}</p>
|
||||
<p
|
||||
className={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
|
||||
>
|
||||
{formatTime(currentTime)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-semibold mt-2">{episode?.title}</h3>
|
||||
<p className="opacity-50 mt-1">{formatTime(duration)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const formatTime = (seconds: number): string => {
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
return `${m}:${String(s).padStart(2, "0")}`;
|
||||
const formatTime = (time: number): string => {
|
||||
let hours = Math.floor(time / 3600);
|
||||
let minutes = Math.floor((time % 3600) / 60);
|
||||
let seconds = Math.floor(time % 60);
|
||||
|
||||
const h = String(hours).padStart(2, "0");
|
||||
const m = String(minutes).padStart(2, "0");
|
||||
const s = String(seconds).padStart(2, "0");
|
||||
|
||||
return [h, m, s].join(":");
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user