[feature] Use blurhashes in frontend, tidy up gallery view a bit (#3948)

* [feature] Use blurhashes in frontend, tidy up gallery view a bit

* weeeeeeeeeeeeeeeee

* beep boop
This commit is contained in:
tobi 2025-03-31 15:51:17 +02:00 committed by GitHub
commit 3949117be0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 508 additions and 124 deletions

View file

@ -48,10 +48,10 @@ type WebPage struct {
// Can be nil.
Stylesheets []string
// Paths to JS files to add to
// the page as "script" entries.
// JS files to add to the
// page as "script" entries.
// Can be nil.
Javascript []string
Javascript []JavascriptEntry
// Extra parameters to pass to
// the template for rendering,
@ -60,6 +60,21 @@ type WebPage struct {
Extra map[string]any
}
type JavascriptEntry struct {
// Insert <script> tag at the end
// of <body> rather than in <head>.
Bottom bool
// Path to the js file.
Src string
// Use async="" attribute.
Async bool
// Use defer="" attribute.
Defer bool
}
// TemplateWebPage renders the given HTML template and
// page params within the standard GtS "page" template.
//

View file

@ -144,6 +144,7 @@ func (p *Processor) WebStatusesGet(
ctx context.Context,
targetAccountID string,
mediaOnly bool,
limit int,
maxID string,
) (*apimodel.PageableResponse, gtserror.WithCode) {
account, err := p.state.DB.GetAccountByID(ctx, targetAccountID)
@ -164,7 +165,7 @@ func (p *Processor) WebStatusesGet(
ctx,
account,
mediaOnly,
20,
limit,
maxID,
)
if err != nil && !errors.Is(err, db.ErrNoEntries) {

View file

@ -68,7 +68,6 @@ func (m *Module) domainBlockListGETHandler(c *gin.Context) {
Instance: instance,
OGMeta: apiutil.OGBase(instance),
Stylesheets: []string{cssFA},
Javascript: []string{jsFrontend},
Extra: map[string]any{"blocklist": domainBlocks},
}

View file

@ -142,11 +142,22 @@ func (m *Module) prepareProfile(c *gin.Context) *profile {
}
}
// Limit varies depending on whether this is a gallery view or not.
// If gallery view, we want a nice full screen of media, else we
// don't want to overwhelm the viewer with a shitload of posts.
var limit int
if account.WebLayout == "gallery" {
limit = 40
} else {
limit = 20
}
// Get statuses from maxStatusID onwards (or from top if empty string).
statusResp, errWithCode := m.processor.Account().WebStatusesGet(
ctx,
account.ID,
mediaOnly,
limit,
maxStatusID,
)
if errWithCode != nil {
@ -230,7 +241,17 @@ func (m *Module) profileMicroblog(c *gin.Context, p *profile) {
Instance: p.instance,
OGMeta: apiutil.OGBase(p.instance).WithAccount(p.account),
Stylesheets: stylesheets,
Javascript: []string{jsFrontend},
Javascript: []apiutil.JavascriptEntry{
{
Src: jsFrontend,
Async: true,
Defer: true,
},
{
Bottom: true,
Src: jsBlurhash,
},
},
Extra: map[string]any{
"account": p.account,
"rssFeed": p.rssFeed,
@ -294,7 +315,17 @@ func (m *Module) profileGallery(c *gin.Context, p *profile) {
Instance: p.instance,
OGMeta: apiutil.OGBase(p.instance).WithAccount(p.account),
Stylesheets: stylesheets,
Javascript: []string{jsFrontend},
Javascript: []apiutil.JavascriptEntry{
{
Src: jsFrontend,
Async: true,
Defer: true,
},
{
Bottom: true,
Src: jsBlurhash,
},
},
Extra: map[string]any{
"account": p.account,
"rssFeed": p.rssFeed,

View file

@ -54,7 +54,13 @@ func (m *Module) SettingsPanelHandler(c *gin.Context) {
cssStatus, // Used for rendering stub/fake statuses.
cssSettings,
},
Javascript: []string{jsSettings},
Javascript: []apiutil.JavascriptEntry{
{
Src: jsSettings,
Async: true,
Defer: true,
},
},
}
apiutil.TemplateWebPage(c, page)

View file

@ -146,7 +146,17 @@ func (m *Module) threadGETHandler(c *gin.Context) {
Instance: instance,
OGMeta: apiutil.OGBase(instance).WithStatus(context.Status),
Stylesheets: stylesheets,
Javascript: []string{jsFrontend},
Javascript: []apiutil.JavascriptEntry{
{
Src: jsFrontend,
Async: true,
Defer: true,
},
{
Bottom: true,
Src: jsBlurhash,
},
},
Extra: map[string]any{
"context": context,
},

View file

@ -68,6 +68,7 @@ const (
cssTag = distPathPrefix + "/tag.css"
jsFrontend = distPathPrefix + "/frontend.js" // Progressive enhancement frontend JS.
jsBlurhash = distPathPrefix + "/blurhash.js" // Blurhash rendering JS.
jsSettings = distPathPrefix + "/settings.js" // Settings panel React application.
)