Support embedded images/albums (closes #41)
This commit is contained in:
		
							parent
							
								
									3f29e71876
								
							
						
					
					
						commit
						95eaf959b0
					
				
							
								
								
									
										5
									
								
								main.go
								
								
								
								
							
							
						
						
									
										5
									
								
								main.go
								
								
								
								
							| 
						 | 
				
			
			@ -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))
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"),
 | 
			
		||||
	})
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
		Loading…
	
		Reference in New Issue