Allow videos in posts, simplify post image view
This commit is contained in:
@ -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)
|
||||
|
@ -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")
|
||||
}
|
||||
|
||||
|
@ -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:
|
||||
|
@ -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))
|
||||
}
|
||||
|
@ -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>"
|
||||
}
|
||||
}
|
@ -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)'\">"
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user