Support embedded images/albums (closes #41)

This commit is contained in:
video-prize-ranch 2022-07-16 15:59:06 -04:00
parent 3f29e71876
commit 95eaf959b0
No known key found for this signature in database
GPG Key ID: D8EAA4C5B12A7281
5 changed files with 140 additions and 17 deletions

View File

@ -51,16 +51,19 @@ func main() {
})
app.Get("/", pages.HandleFrontpage)
app.Get("/:postID.gifv", pages.HandleEmbed)
app.Get("/:postID.gifv", pages.HandleGifv)
app.Get("/:baseName.:extension", pages.HandleMedia)
app.Get("/:postID", pages.HandlePost)
app.Get("/:postID/embed", pages.HandleEmbed)
app.Get("/a/:postID", pages.HandlePost)
app.Get("/a/:postID/embed", pages.HandleEmbed)
app.Get("/t/:tag", pages.HandleTag)
app.Get("/user/:userID", pages.HandleUser)
app.Get("/r/:sub/:postID", pages.HandlePost)
app.Get("/user/:userID/cover", pages.HandleUserCover)
app.Get("/user/:userID/avatar", pages.HandleUserAvatar)
app.Get("/gallery/:postID", pages.HandlePost)
app.Get("/gallery/:postID/embed", pages.HandleEmbed)
app.Listen(utils.Config["addr"].(string) + ":" + utils.Config["port"].(string))
}

View File

@ -1,6 +1,10 @@
package pages
import (
"strings"
"codeberg.org/video-prize-ranch/rimgo/api"
"codeberg.org/video-prize-ranch/rimgo/types"
"codeberg.org/video-prize-ranch/rimgo/utils"
"github.com/gofiber/fiber/v2"
)
@ -10,7 +14,34 @@ func HandleEmbed(c *fiber.Ctx) error {
c.Set("Cache-Control", "public,max-age=31557600")
c.Set("Content-Security-Policy", "default-src 'none'; media-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; block-all-mixed-content")
post, err := types.Album{}, error(nil)
switch {
case strings.HasPrefix(c.Path(), "/a"):
post, err = api.FetchAlbum(c.Params("postID"))
case strings.HasPrefix(c.Path(), "/gallery"):
post, err = api.FetchPosts(c.Params("postID"))
default:
post, err = api.FetchMedia(c.Params("postID"))
}
if post.Id == "" || (err != nil && strings.Contains(err.Error(), "404")) {
c.Status(404)
return c.Render("errors/404", nil)
}
if err != nil {
return err
}
return c.Render("embed", fiber.Map{
"post": post,
})
}
func HandleGifv(c *fiber.Ctx) error {
utils.SetHeaders(c)
c.Set("Cache-Control", "public,max-age=31557600")
c.Set("Content-Security-Policy", "default-src 'none'; media-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; block-all-mixed-content")
return c.Render("gifv", fiber.Map{
"id": c.Params("postID"),
})
}

View File

@ -2,12 +2,50 @@
filter: invert(180deg), hue-rotate(180deg);
}
.postLink {
body {
overflow: hidden;
}
.mediaWrapper {
display: flex;
justify-content: center;
}
.media {
display: flex;
overflow: scroll;
gap: 1rem;
align-items: center;
height: 90vh;
}
.media img, .media video {
height: 100%;
}
.logoContainer {
display: flex;
flex-direction: row;
align-items: center;
}
.rimgoLink {
width: 100%;
.views {
display: flex;
gap: 4px;
align-items: center;
}
.postDetails {
display: flex;
gap: 1rem;
}
h3 {
font-size: 1em;
}
.postMeta {
display: flex;
align-items: center;
justify-content: space-between;
height: 9vh;
}

View File

@ -4,22 +4,45 @@
<head>
{{> partials/head }}
<link rel="stylesheet" href="/static/fonts/Material-Icons-Outlined.css" />
<link rel="stylesheet" href="/static/css/embed.css" />
</head>
<body>
<video loop poster="/{{id}}.webp" autoplay width="100%">
<source src="/{{id}}.webm" type="video/webm" />
<source src="/{{id}}.mp4" type="video/mp4" />
<div class="mediaWrapper">
<div class="media">
{{#each post.Media}}
{{#equal this.Type "image"}}
<img src="{{this.Url}}" loading="lazy">
{{/equal}}
{{#equal this.Type "video"}}
<video controls loop>
<source type="{{this.MimeType}}" src="{{this.Url}}" />
</video>
<div class="postLink">
<a href="/{{id}}">
{{/equal}}
{{/each}}
</div>
</div>
<div class="postMeta">
<div class="postDetails">
{{#if post.TItle}}
<a href="/{{post.Id}}">
<h3>{{post.Title}}</h3>
</a>
{{/if}}
<div class="views">
<span class="material-icons-outlined" title="Views">visibility</span>
<p>{{post.Views}}</p>
</div>
</div>
<div class="logoContainer">
<a href="/{{post.Id}}">
<img src="/static/img/rimgo.svg" width="32px" height="32px" class="logo">
</a>
<a href="/{{id}}" class="rimgoLink">
<a href="/{{post.Id}}">
rimgo
</a>
<a href="/{{id}}.mp4?download=1">download</a>
</div>
</div>
</body>

28
views/gifv.hbs Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
{{> partials/head }}
<link rel="stylesheet" href="/static/css/embed.css" />
</head>
<body>
<video loop poster="/{{id}}.webp" autoplay width="100%">
<source src="/{{id}}.webm" type="video/webm" />
<source src="/{{id}}.mp4" type="video/mp4" />
</video>
<div class="postMeta">
<a href="/{{id}}.mp4?download=1">download</a>
<div class="logoContainer">
<a href="/{{post.Id}}">
<img src="/static/img/rimgo.svg" width="32px" height="32px" class="logo">
</a>
<a href="/{{post.Id}}">
rimgo
</a>
</div>
</div>
</body>
</html>