Allow videos in posts, simplify post image view

This commit is contained in:
Christoph Hagen
2025-01-17 23:24:56 +01:00
parent 60716fca20
commit bc3f21e7e4
10 changed files with 175 additions and 172 deletions

View File

@ -35,7 +35,7 @@ final class FeedPageGenerator {
linkPrefix: String) -> String {
var headers = content.postPageHeaders
var footer = ""
if posts.contains(where: { $0.images.count > 1 }) {
if posts.contains(where: { $0.requiresSwiper }) {
// Sort swiper style sheet before default style sheet
includeSwiper(in: &headers)
footer = swiperInitScript(posts: posts)
@ -82,7 +82,7 @@ final class FeedPageGenerator {
func swiperInitScript(posts: [FeedEntryData]) -> String {
var result = "<script> window.onload = () => { "
for post in posts {
guard post.images.count > 1 else {
guard post.requiresSwiper else {
continue
}
result += ImageGallery.swiperInit(id: post.entryId)

View File

@ -66,10 +66,19 @@ final class PostListPageGenerator {
url: tag.absoluteUrl(in: language))
}
let images = localized.images.map { image in
image.imageSet(width: mainContentMaximumWidth, height: mainContentMaximumWidth, language: language)
let media: FeedEntryData.Media?
if localized.hasImages {
let images = localized.images.map { image in
image.imageSet(width: mainContentMaximumWidth, height: mainContentMaximumWidth, language: language)
}
images.forEach(source.results.require)
media = .images(images)
} else if localized.hasVideos {
media = .video(localized.images)
localized.images.forEach(source.results.require)
} else {
media = nil
}
images.forEach(source.results.require)
return FeedEntryData(
entryId: post.id,
@ -78,7 +87,7 @@ final class PostListPageGenerator {
link: linkUrl,
tags: tags,
text: localized.text.components(separatedBy: "\n\n"),
images: images)
media: media)
#warning("Treat post text as markdown")
}

View File

@ -79,6 +79,17 @@ final class LoadingContext {
return nil
}
func postMedia(_ imageId: String) -> FileResource? {
guard let image = file(imageId) else {
return nil
}
if image.type.isImage || image.type.isVideo {
return image
}
error("Post Media \(imageId) is not an image or video")
return nil
}
func item(itemId: ItemId) -> Item? {
switch itemId.type {
case .post:

View File

@ -53,6 +53,16 @@ final class LocalizedPost: ObservableObject {
}
linkPreview.remove(file)
}
// MARK: Images
var hasImages: Bool {
images.contains { $0.type.isImage }
}
var hasVideos: Bool {
images.contains { $0.type.isVideo }
}
}
// MARK: Storage
@ -65,7 +75,7 @@ extension LocalizedPost {
title: data.title,
text: data.text,
lastModified: data.lastModifiedDate,
images: data.images.compactMap(context.image),
images: data.images.compactMap(context.postMedia),
pageLinkText: data.pageLinkText,
linkPreview: .init(context: context, data: data.linkPreview))
}

View File

@ -0,0 +1,14 @@
struct PostVideo: HtmlProducer {
let videos: [FileResource]
func populate(_ result: inout String) {
result += "<video autoplay loop muted>"
result += "Video not supported."
for video in videos {
result += "<source src='\(video.absoluteUrl)' type='\(video.type.htmlType!)'>"
}
result += "</video>"
}
}

View File

@ -14,7 +14,14 @@ struct FeedEntry {
var content: String {
var result = "<article><div class='card\(cardLinkClassText)'>"
ImageGallery(id: data.entryId, images: data.images).populate(&result)
switch data.media {
case .images(let images):
ImageGallery(id: data.entryId, images: images).populate(&result)
case .video(let videos):
PostVideo(videos: videos).populate(&result)
case .none:
break
}
if let url = data.link?.url {
result += "<div class='card-content' onclick=\"window.location.href='\(url)'\">"

View File

@ -13,16 +13,16 @@ struct FeedEntryData {
let text: [String]
let images: [ImageSet]
let media: Media?
init(entryId: String, title: String?, textAboveTitle: String, link: Link?, tags: [Tag], text: [String], images: [ImageSet]) {
init(entryId: String, title: String?, textAboveTitle: String, link: Link?, tags: [Tag], text: [String], media: Media?) {
self.entryId = entryId
self.title = title
self.textAboveTitle = textAboveTitle
self.link = link
self.tags = tags
self.text = text
self.images = images
self.media = media
}
struct Link {
@ -40,4 +40,16 @@ struct FeedEntryData {
let url: String
}
enum Media {
case images([ImageSet])
case video([FileResource])
}
var requiresSwiper: Bool {
if case .images(let images) = media, images.count > 1 {
return true
}
return false
}
}

View File

@ -15,7 +15,11 @@ struct PostContentView: View {
}
var body: some View {
LocalizedPostContentView(post: post)
LocalizedPostContentView(
post: post.localized(in: language),
other: post.localized(in: language.next),
tags: $post.tags,
page: $post.linkedPage)
}
}
@ -28,46 +32,6 @@ extension PostContentView: MainContentView {
static let itemDescription = "a post"
}
private struct LocalizedTitle: View {
@ObservedObject
private var post: LocalizedPost
init(post: LocalizedPost) {
self.post = post
}
var body: some View {
OptionalTextField("", text: $post.title)
.font(.system(size: 24, weight: .bold))
.foregroundStyle(Color.primary)
.textFieldStyle(.plain)
.lineLimit(2)
.frame(minHeight: 30)
}
}
private struct LocalizedContentEditor: View {
@ObservedObject
private var post: LocalizedPost
init(post: LocalizedPost) {
self.post = post
}
var body: some View {
TextEditor(text: $post.text)
.font(.body)
.frame(minHeight: 150)
.textEditorStyle(.plain)
.padding(.vertical, 8)
.padding(.leading, 3)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)
}
}
private struct LinkedPageTagView: View {
@ObservedObject
@ -80,42 +44,114 @@ private struct LinkedPageTagView: View {
struct LocalizedPostContentView: View {
@ObservedObject
var post: Post
@Environment(\.language)
private var language
@EnvironmentObject
private var content: Content
init(post: Post) {
@ObservedObject
var post: LocalizedPost
@ObservedObject
var other: LocalizedPost
@Binding
var tags: [Tag]
@Binding
var page: Page?
@State
private var fileTypeToSelect: FileTypeCategory = .image
@State
private var showImagePicker = false
init(post: LocalizedPost, other: LocalizedPost, tags: Binding<[Tag]>, page: Binding<Page?>) {
self.post = post
self.other = other
self._tags = tags
self._page = page
}
var body: some View {
VStack(alignment: .leading) {
HStack {
Text("Images")
Text("Images/Video")
.font(.headline)
Button("Transfer from \(language.next.text)", action: copyImagesFromOtherLanguage)
.disabled(post.localized(in: language.next).images.isEmpty)
Button("Images") {
fileTypeToSelect = .image
showImagePicker = true
}
.disabled(post.hasVideos)
Button("Videos") {
fileTypeToSelect = .video
showImagePicker = true
}
.disabled(post.hasImages)
Button("Transfer from \(language.next.text)") {
post.images = other.images
}
.disabled(other.images.isEmpty)
}
PostImagesView(post: post.localized(in: language))
LocalizedTitle(post: post.localized(in: language))
if let page = post.linkedPage {
ScrollView(.horizontal) {
HStack(alignment: .center, spacing: 8) {
ForEach(post.images) { image in
if image.type.isImage {
image.imageToDisplay
.resizable()
.aspectRatio(contentMode: .fill)
.frame(maxWidth: 300, maxHeight: 200)
.cornerRadius(8)
} else {
VStack {
Image(systemSymbol: .film)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 100)
Text(image.id)
.font(.title)
}
//.foregroundStyle(.secondary)
.frame(width: 300, height: 200)
.background(Color.gray)
.cornerRadius(8)
}
}
}
}
OptionalTextField("", text: $post.title)
.font(.system(size: 24, weight: .bold))
.foregroundStyle(Color.primary)
.textFieldStyle(.plain)
.lineLimit(2)
.frame(minHeight: 30)
if let page = page {
LinkedPageTagView(page: page)
} else {
TagDisplayView(tags: $post.tags)
TagDisplayView(tags: $tags)
}
LocalizedContentEditor(post: post.localized(in: language))
TextEditor(text: $post.text)
.font(.body)
.frame(minHeight: 150)
.textEditorStyle(.plain)
.padding(.vertical, 8)
.padding(.leading, 3)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)
}
.padding()
.sheet(isPresented: $showImagePicker) {
MultiFileSelectionView(
selectedFiles: $post.images,
allowedType: fileTypeToSelect)
}
}
private func copyImagesFromOtherLanguage() {
let images = post.localized(in: language.next).images
post.localized(in: language).images = images
post.images = other.images
}
}

View File

@ -1,96 +0,0 @@
import SwiftUI
struct PostImagesView: View {
@ObservedObject
var post: LocalizedPost
@State
private var showImagePicker = false
var body: some View {
ScrollView(.horizontal) {
HStack(alignment: .center, spacing: 8) {
ForEach(post.images) { image in
ZStack {
image.imageToDisplay
.resizable()
.aspectRatio(contentMode: .fill)
.frame(maxWidth: 300, maxHeight: 200)
.cornerRadius(8)
.layoutPriority(1)
VStack {
HStack(alignment: .top) {
Button(action: { remove(image) }) {
NavigationIcon(symbol: .trash, edge: .all)
}
.buttonStyle(.plain)
Spacer()
Text(image.id)
.padding(4)
.foregroundStyle(Color.white.opacity(0.8))
.background(RoundedRectangle(cornerRadius: 8).fill(Color.black.opacity(0.7)))
}
Spacer()
HStack {
Button(action: { shiftLeft(image) }) {
NavigationIcon(symbol: .chevronLeft, edge: .trailing)
}
.buttonStyle(.plain)
Spacer()
Button(action: { shiftRight(image) }) {
NavigationIcon(symbol: .chevronRight, edge: .leading)
}
.buttonStyle(.plain)
}
}
.padding()
}
}
Button(action: { showImagePicker = true }) {
NavigationIcon(symbol: .plus, edge: .all)
}
.buttonStyle(.plain)
.padding()
}
}
.sheet(isPresented: $showImagePicker) {
MultiFileSelectionView(selectedFiles: $post.images, allowedType: .image)
}
}
private func shiftLeft(_ image: FileResource) {
guard let index = post.images.firstIndex(of: image) else {
return
}
guard index > 0 else {
return
}
post.images.swapAt(index, index - 1)
}
private func shiftRight(_ image: FileResource) {
guard let index = post.images.firstIndex(of: image) else {
return
}
guard index < post.images.count - 1 else {
return
}
post.images.swapAt(index, index + 1)
}
private func remove(_ image: FileResource) {
guard let index = post.images.firstIndex(of: image) else {
return
}
post.images.remove(at: index)
}
}
#Preview {
VStack(alignment: .leading) {
Text("Images")
.font(.headline)
PostImagesView(post: .english)
}
}