[feature/frontend] Add player for audio files; use thumbnail for `poster` (#3099)

* [feature/frontend] Audio player for audio media types

* use video preview images for previews instead of video itself

* don't preload

* update tests for new zork status

* collapse media gallery into single row when small

9 files changed, 40 insertions, 25 deletions

diff --git a/internal/api/activitypub/users/outboxget_test.go b/internal/api/activitypub/users/outboxget_test.go
index 521af0ff0..cba1ef31d 100644
--- a/internal/api/activitypub/users/outboxget_test.go
+++ b/internal/api/activitypub/users/outboxget_test.go
@@ -82,7 +82,7 @@ func (suite *OutboxGetTestSuite) TestGetOutbox() {
   "@context": "https://www.w3.org/ns/activitystreams",
   "first": "http://localhost:8080/users/the_mighty_zork/outbox?limit=40",
   "id": "http://localhost:8080/users/the_mighty_zork/outbox",
-  "totalItems": 7,
+  "totalItems": 8,
   "type": "OrderedCollection"
 }`, dst.String())
 
@@ -161,7 +161,7 @@ func (suite *OutboxGetTestSuite) TestGetOutboxFirstPage() {
   ],
   "partOf": "http://localhost:8080/users/the_mighty_zork/outbox",
   "prev": "http://localhost:8080/users/the_mighty_zork/outbox?limit=40\u0026min_id=01HH9KYNQPA416TNJ53NSATP40",
-  "totalItems": 7,
+  "totalItems": 8,
   "type": "OrderedCollectionPage"
 }`, dst.String())
 
@@ -224,7 +224,7 @@ func (suite *OutboxGetTestSuite) TestGetOutboxNextPage() {
   "id": "http://localhost:8080/users/the_mighty_zork/outbox?limit=40&max_id=01F8MHAMCHF6Y650WCRSCP4WMY",
   "orderedItems": [],
   "partOf": "http://localhost:8080/users/the_mighty_zork/outbox",
-  "totalItems": 7,
+  "totalItems": 8,
   "type": "OrderedCollectionPage"
 }`, dst.String())
 
diff --git a/internal/api/client/accounts/accountverify_test.go b/internal/api/client/accounts/accountverify_test.go
index eccda8b2e..cedc11916 100644
--- a/internal/api/client/accounts/accountverify_test.go
+++ b/internal/api/client/accounts/accountverify_test.go
@@ -79,7 +79,7 @@ func (suite *AccountVerifyTestSuite) TestAccountVerifyGet() {
 	suite.Equal("http://localhost:8080/fileserver/01F8MH1H7YV1Z7D2C8K2730QBF/header/small/01PFPMWK2FF0D9WMHEJHR07C3Q.jpg", apimodelAccount.HeaderStatic)
 	suite.Equal(2, apimodelAccount.FollowersCount)
 	suite.Equal(2, apimodelAccount.FollowingCount)
-	suite.Equal(7, apimodelAccount.StatusesCount)
+	suite.Equal(8, apimodelAccount.StatusesCount)
 	suite.EqualValues(gtsmodel.VisibilityPublic, apimodelAccount.Source.Privacy)
 	suite.Equal(testAccount.Settings.Language, apimodelAccount.Source.Language)
 	suite.Equal(testAccount.NoteRaw, apimodelAccount.Source.Note)
diff --git a/internal/api/client/admin/accountsgetv2_test.go b/internal/api/client/admin/accountsgetv2_test.go
index 85d58cce8..ca9573be5 100644
--- a/internal/api/client/admin/accountsgetv2_test.go
+++ b/internal/api/client/admin/accountsgetv2_test.go
@@ -240,8 +240,8 @@ func (suite *AccountsGetTestSuite) TestAccountsGetFromTop() {
       "header_description": "A very old-school screenshot of the original team fortress mod for quake",
       "followers_count": 2,
       "following_count": 2,
-      "statuses_count": 7,
-      "last_status_at": "2023-12-10T09:24:00.000Z",
+      "statuses_count": 8,
+      "last_status_at": "2024-01-10T09:24:00.000Z",
       "emojis": [],
       "fields": [],
       "enable_rss": true,
diff --git a/internal/api/client/instance/instancepatch_test.go b/internal/api/client/instance/instancepatch_test.go
index 605b056b9..5113e4c57 100644
--- a/internal/api/client/instance/instancepatch_test.go
+++ b/internal/api/client/instance/instancepatch_test.go
@@ -135,7 +135,7 @@ func (suite *InstancePatchTestSuite) TestInstancePatch1() {
   },
   "stats": {
     "domain_count": 2,
-    "status_count": 19,
+    "status_count": 20,
     "user_count": 4
   },
   "thumbnail": "http://localhost:8080/assets/logo.png",
@@ -256,7 +256,7 @@ func (suite *InstancePatchTestSuite) TestInstancePatch2() {
   },
   "stats": {
     "domain_count": 2,
-    "status_count": 19,
+    "status_count": 20,
     "user_count": 4
   },
   "thumbnail": "http://localhost:8080/assets/logo.png",
@@ -377,7 +377,7 @@ func (suite *InstancePatchTestSuite) TestInstancePatch3() {
   },
   "stats": {
     "domain_count": 2,
-    "status_count": 19,
+    "status_count": 20,
     "user_count": 4
   },
   "thumbnail": "http://localhost:8080/assets/logo.png",
@@ -549,7 +549,7 @@ func (suite *InstancePatchTestSuite) TestInstancePatch6() {
   },
   "stats": {
     "domain_count": 2,
-    "status_count": 19,
+    "status_count": 20,
     "user_count": 4
   },
   "thumbnail": "http://localhost:8080/assets/logo.png",
@@ -692,7 +692,7 @@ func (suite *InstancePatchTestSuite) TestInstancePatch8() {
   },
   "stats": {
     "domain_count": 2,
-    "status_count": 19,
+    "status_count": 20,
     "user_count": 4
   },
   "thumbnail": "http://localhost:8080/fileserver/01AY6P665V14JJR0AFVRT7311Y/attachment/original/`+instanceAccount.AvatarMediaAttachment.ID+`.gif",`+`
@@ -850,7 +850,7 @@ func (suite *InstancePatchTestSuite) TestInstancePatch9() {
   },
   "stats": {
     "domain_count": 2,
-    "status_count": 19,
+    "status_count": 20,
     "user_count": 4
   },
   "thumbnail": "http://localhost:8080/assets/logo.png",
diff --git a/internal/api/client/search/searchget_test.go b/internal/api/client/search/searchget_test.go
index 27e5f782d..ab4f46689 100644
--- a/internal/api/client/search/searchget_test.go
+++ b/internal/api/client/search/searchget_test.go
@@ -916,7 +916,7 @@ func (suite *SearchGetTestSuite) TestSearchAAny() {
 	}
 
 	suite.Len(searchResult.Accounts, 5)
-	suite.Len(searchResult.Statuses, 6)
+	suite.Len(searchResult.Statuses, 7)
 	suite.Len(searchResult.Hashtags, 0)
 }
 
@@ -959,7 +959,7 @@ func (suite *SearchGetTestSuite) TestSearchAAnyFollowingOnly() {
 	}
 
 	suite.Len(searchResult.Accounts, 2)
-	suite.Len(searchResult.Statuses, 6)
+	suite.Len(searchResult.Statuses, 7)
 	suite.Len(searchResult.Hashtags, 0)
 }
 
@@ -1002,7 +1002,7 @@ func (suite *SearchGetTestSuite) TestSearchAStatuses() {
 	}
 
 	suite.Len(searchResult.Accounts, 0)
-	suite.Len(searchResult.Statuses, 6)
+	suite.Len(searchResult.Statuses, 7)
 	suite.Len(searchResult.Hashtags, 0)
 }
 
diff --git a/internal/api/client/statuses/statushistory_test.go b/internal/api/client/statuses/statushistory_test.go
index a88abdb8f..0d9f6c979 100644
--- a/internal/api/client/statuses/statushistory_test.go
+++ b/internal/api/client/statuses/statushistory_test.go
@@ -114,8 +114,8 @@ func (suite *StatusHistoryTestSuite) TestGetHistory() {
       "header_description": "A very old-school screenshot of the original team fortress mod for quake",
       "followers_count": 2,
       "following_count": 2,
-      "statuses_count": 7,
-      "last_status_at": "2023-12-10T09:24:00.000Z",
+      "statuses_count": 8,
+      "last_status_at": "2024-01-10T09:24:00.000Z",
       "emojis": [],
       "fields": [],
       "enable_rss": true,
diff --git a/internal/api/client/statuses/statusmute_test.go b/internal/api/client/statuses/statusmute_test.go
index 83effd0c2..01bea4e5c 100644
--- a/internal/api/client/statuses/statusmute_test.go
+++ b/internal/api/client/statuses/statusmute_test.go
@@ -132,8 +132,8 @@ func (suite *StatusMuteTestSuite) TestMuteUnmuteStatus() {
     "header_description": "A very old-school screenshot of the original team fortress mod for quake",
     "followers_count": 2,
     "following_count": 2,
-    "statuses_count": 7,
-    "last_status_at": "2023-12-10T09:24:00.000Z",
+    "statuses_count": 8,
+    "last_status_at": "2024-01-10T09:24:00.000Z",
     "emojis": [],
     "fields": [],
     "enable_rss": true,
@@ -197,8 +197,8 @@ func (suite *StatusMuteTestSuite) TestMuteUnmuteStatus() {
     "header_description": "A very old-school screenshot of the original team fortress mod for quake",
     "followers_count": 2,
     "following_count": 2,
-    "statuses_count": 7,
-    "last_status_at": "2023-12-10T09:24:00.000Z",
+    "statuses_count": 8,
+    "last_status_at": "2024-01-10T09:24:00.000Z",
     "emojis": [],
     "fields": [],
     "enable_rss": true,
diff --git a/internal/api/model/attachment.go b/internal/api/model/attachment.go
index 7e81759f2..d0b0c81e5 100644
--- a/internal/api/model/attachment.go
+++ b/internal/api/model/attachment.go
@@ -90,12 +90,23 @@ type Attachment struct {
 	// A hash computed by the BlurHash algorithm, for generating colorful preview thumbnails when media has not been downloaded yet.
 	// See https://github.com/woltapp/blurhash
 	Blurhash *string `json:"blurhash"`
+}
+
+// WebAttachment is like Attachment, but with
+// additional fields not exposed via JSON;
+// used only internally for templating etc.
+//
+// swagger:ignore
+type WebAttachment struct {
+	*Attachment
 
-	// Additional fields not exposed via JSON
-	// (used only internally for templating etc).
+	// Parent status of this
+	// media is sensitive.
+	Sensitive bool
 
-	// Parent status of this media is sensitive.
-	Sensitive bool `json:"-"`
+	// MIME type of
+	// the attachment.
+	MIMEType string
 }
 
 // MediaMeta models media metadata.
diff --git a/internal/api/model/status.go b/internal/api/model/status.go
index a9c668565..e469835bd 100644
--- a/internal/api/model/status.go
+++ b/internal/api/model/status.go
@@ -111,6 +111,10 @@ type Status struct {
 type WebStatus struct {
 	*Status
 
+	// Web version of media
+	// attached to this status.
+	MediaAttachments []*WebAttachment `json:"media_attachments"`
+
 	// Template-ready language tag and
 	// string, based on *status.Language.
 	LanguageTag *language.Language