[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

1 files changed, 80 insertions, 0 deletions

diff --git a/testrig/testmodels.go b/testrig/testmodels.go
index 5f41ed190..efd4785a5 100644
--- a/testrig/testmodels.go
+++ b/testrig/testmodels.go
@@ -989,6 +989,53 @@ func NewTestAttachments() map[string]*gtsmodel.MediaAttachment {
 			Header: util.Ptr(true),
 			Cached: util.Ptr(true),
 		},
+		"local_account_1_status_8_attachment_1": {
+			ID:        "01J2M20K6K9XQC4WSB961YJHV6",
+			StatusID:  "01J2M1HPFSS54S60Y0KYV23KJE",
+			URL:       "http://localhost:8080/fileserver/01F8MH1H7YV1Z7D2C8K2730QBF/attachment/original/01J2M20K6K9XQC4WSB961YJHV6.mp3",
+			RemoteURL: "",
+			CreatedAt: TimeMustParse("2024-01-10T11:24:00+02:00"),
+			UpdatedAt: TimeMustParse("2024-01-10T11:24:00+02:00"),
+			Type:      gtsmodel.FileTypeAudio,
+			FileMeta: gtsmodel.FileMeta{
+				Original: gtsmodel.Original{
+					Width:  500,
+					Height: 500,
+					Size:   0,
+					Aspect: 0,
+				},
+				Small: gtsmodel.Small{
+					Width:  500,
+					Height: 500,
+					Size:   250000,
+					Aspect: 1,
+				},
+				Focus: gtsmodel.Focus{
+					X: 0,
+					Y: 0,
+				},
+			},
+			AccountID:         "01F8MH1H7YV1Z7D2C8K2730QBF",
+			Description:       "This is a track from Nine Inch Nail's \"Ghosts I-V\" album. This is the third track from \"Ghosts II\".",
+			ScheduledStatusID: "",
+			Blurhash:          "LeDvfpayIUof01j[xuayxuayaxj[",
+			Processing:        2,
+			File: gtsmodel.File{
+				Path:        "01F8MH1H7YV1Z7D2C8K2730QBF/attachment/original/01J2M20K6K9XQC4WSB961YJHV6.mp3",
+				ContentType: "audio/mpeg",
+				FileSize:    7483917,
+			},
+			Thumbnail: gtsmodel.Thumbnail{
+				Path:        "01F8MH1H7YV1Z7D2C8K2730QBF/attachment/small/01J2M20K6K9XQC4WSB961YJHV6.jpg",
+				ContentType: "image/jpeg",
+				FileSize:    6132,
+				URL:         "http://localhost:8080/fileserver/01F8MH1H7YV1Z7D2C8K2730QBF/attachment/small/01J2M20K6K9XQC4WSB961YJHV6.jpg",
+				RemoteURL:   "",
+			},
+			Avatar: util.Ptr(false),
+			Header: util.Ptr(false),
+			Cached: util.Ptr(true),
+		},
 		"remote_account_1_status_1_attachment_1": {
 			ID:        "01FVW7RXPQ8YJHTEXYPE7Q8ZY0",
 			StatusID:  "01FVW7JHQFSFK166WWKR8CBA6M",
@@ -1347,6 +1394,10 @@ func newTestStoredAttachments() map[string]filenames {
 			Original: "team-fortress-original.jpg",
 			Small:    "team-fortress-small.jpg",
 		},
+		"local_account_1_status_8_attachment_1": {
+			Original: "ghosts-original.mp3",
+			Small:    "ghosts-small.jpg",
+		},
 		"remote_account_1_status_1_attachment_1": {
 			Original: "thoughtsofdog-original.jpg",
 			Small:    "thoughtsofdog-small.jpg",
@@ -1644,6 +1695,31 @@ func NewTestStatuses() map[string]*gtsmodel.Status {
 			Federated:                util.Ptr(true),
 			ActivityStreamsType:      ap.ObjectNote,
 		},
+		"local_account_1_status_8": {
+			ID:                       "01J2M1HPFSS54S60Y0KYV23KJE",
+			URI:                      "http://localhost:8080/users/the_mighty_zork/statuses/01J2M1HPFSS54S60Y0KYV23KJE",
+			URL:                      "http://localhost:8080/@the_mighty_zork/statuses/01J2M1HPFSS54S60Y0KYV23KJE",
+			Content:                  "<p>Thanks! Here's a NIN track</p>",
+			Text:                     "Thanks! Here's a NIN track",
+			AttachmentIDs:            []string{"01J2M20K6K9XQC4WSB961YJHV6"},
+			CreatedAt:                TimeMustParse("2024-01-10T11:24:00+02:00"),
+			UpdatedAt:                TimeMustParse("2024-01-10T11:24:00+02:00"),
+			Local:                    util.Ptr(true),
+			AccountURI:               "http://localhost:8080/users/the_mighty_zork",
+			AccountID:                "01F8MH1H7YV1Z7D2C8K2730QBF",
+			InReplyToID:              "01FF25D5Q0DH7CHD57CTRS6WK0",
+			InReplyToAccountID:       "01F8MH17FWEB39HZJ76B6VXSKF",
+			InReplyToURI:             "http://localhost:8080/users/admin/statuses/01FF25D5Q0DH7CHD57CTRS6WK0",
+			BoostOfID:                "",
+			ThreadID:                 "01HCWDKKBWECZJQ93E262N36VN",
+			ContentWarning:           "",
+			Visibility:               gtsmodel.VisibilityPublic,
+			Sensitive:                util.Ptr(false),
+			Language:                 "en",
+			CreatedWithApplicationID: "01F8MGY43H3N2C8EWPR2FPYEXG",
+			Federated:                util.Ptr(true),
+			ActivityStreamsType:      ap.ObjectNote,
+		},
 		"local_account_2_status_1": {
 			ID:                       "01F8MHBQCBTDKN6X5VHGMMN4MA",
 			URI:                      "http://localhost:8080/users/1happyturtle/statuses/01F8MHBQCBTDKN6X5VHGMMN4MA",
@@ -2209,6 +2285,10 @@ func NewTestThreadToStatus() []*gtsmodel.ThreadToStatus {
 			StatusID: "01FCQSQ667XHJ9AV9T27SJJSX5",
 		},
 		{
+			ThreadID: "01HCWDKKBWECZJQ93E262N36VN",
+			StatusID: "01J2M1HPFSS54S60Y0KYV23KJE",
+		},
+		{
 			ThreadID: "01HCWE71MGRRDSHBKXFD5DDSWR",
 			StatusID: "01FN3VJGFH10KR7S2PB0GFJZYG",
 		},