NewsBlur/clients/ios/Classes/FeedDetailCardView.swift

719 lines
28 KiB
Swift
Raw Normal View History

//
// FeedDetailCardView.swift
// NewsBlur
//
// Created by David Sinclair on 2023-02-01.
// Copyright © 2023 NewsBlur. All rights reserved.
//
import SwiftUI
import SwipeCell
/// Card view within the feed detail view, representing a story row in list layout or a story card in grid layout.
struct CardView: View {
let cache: StoryCache
let story: Story
// @Binding var swipeState: SwipeState
// @Binding var currentUserInteractionCellID: String?
@State private var isPinned: Bool = false
var body: some View {
let swipeSaveButton = SwipeCellButton(
buttonStyle: .view,
title: "",
systemImage: "",
titleColor: .white,
imageColor: .white,
view: {
// AnyView(
// Circle()
// .fill(Color.blue)
// .frame(width: 40, height: 40)
// .overlay(
// Image(uiImage: UIImage(named: "saved-stories") ?? UIImage())
// .resizable()
// .frame(width: 32, height: 32)
// .font(.headline)
// .foregroundColor(.white)
// )
// )
// AnyView(
// Image(uiImage: UIImage(named: "saved-stories") ?? UIImage())
// .resizable()
// .frame(width: 32, height: 32)
// .font(.headline)
// .foregroundColor(.white)
// )
AnyView(
VStack(spacing: 5) {
Image(uiImage: UIImage(named: "saved-stories") ?? UIImage())
.resizable()
.frame(width: 32, height: 32)
.foregroundColor(.white)
Text(story.isSaved ? "Unsave" : "Save")
.font(.callout)
.bold()
.foregroundColor(.white)
}
)},
backgroundColor: .purple,
action: {
cache.appDelegate.storiesCollection.toggleStorySaved(story.dictionary)
cache.appDelegate.feedDetailViewController.reload()
},
feedback: true
)
let swipeReadButton = SwipeCellButton(
buttonStyle: .view,
title: "",
systemImage: "",
titleColor: .white,
imageColor: .white,
view: {
AnyView(
VStack(spacing: 5) {
Image(uiImage: UIImage(named: "mark-read") ?? UIImage())
.resizable()
.frame(width: 32, height: 32)
.foregroundColor(.white)
Text(story.isRead ? "Unread" : "Read")
.font(.callout)
.bold()
.foregroundColor(.white)
}
)},
// AnyView(
// Image(uiImage: UIImage(named: "mark-read") ?? UIImage())
// .resizable()
// .frame(width: 32, height: 32)
// .font(.headline)
// .foregroundColor(.white)
// )
// },
backgroundColor: .blue,
action: {
cache.appDelegate.storiesCollection.toggleStoryUnread(story.dictionary)
cache.appDelegate.feedDetailViewController.reload()
},
feedback: true
)
ZStack(alignment: .leading) {
if story.isSelected || cache.isGrid {
RoundedRectangle(cornerRadius: 10).foregroundColor(highlightColor)
CardFeedBarView(cache: cache, story: story)
.padding(.leading, 2)
} else {
CardFeedBarView(cache: cache, story: story)
.padding(.leading, 2)
}
VStack {
if cache.isGrid, let previewImage {
gridPreview(image: previewImage)
// Image(uiImage: previewImage)
// .resizable()
// .scaledToFill()
// .frame(height: cache.settings.gridHeight / 3)
// .cornerRadius(12, corners: [.topLeft, .topRight])
// .padding(0)
}
HStack {
if !cache.isGrid, cache.settings.preview.isLeft, let previewImage {
listPreview(image: previewImage)
}
CardContentView(cache: cache, story: story)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.padding([.leading, .trailing], 15)
.padding([.top, .bottom], cache.settings.spacing == .compact ? 10 : 15)
if !cache.isGrid, !cache.settings.preview.isLeft, let previewImage {
listPreview(image: previewImage)
// Image(uiImage: previewImage)
// .resizable()
// .scaledToFill()
// .frame(width: 80)
// .clipShape(RoundedRectangle(cornerRadius: 10))
// .padding([.top, .bottom, .trailing], 10)
}
}
}
}
.opacity(story.isRead ? 0.7 : 1)
.if(cache.isGrid || story.isSelected) { view in
view.clipShape(RoundedRectangle(cornerRadius: 10))
}
.if(story.isSelected) { view in
view.padding(10)
}
// .addFullSwipeAction(swipeColor: .clear, swipeRole: .defaults, state: $swipeState) {
// Leading {
// Button {
// print("edit \(story)")
// } label: {
// Image(systemName: "pencil")
// .foregroundColor(.white)
// }
// .frame(width: 80, alignment: .center)
// .frame(maxHeight: .infinity)
// .contentShape(Rectangle())
// .background(Color.green)
// }
// Trailing {
// Button {
// print("remove \(story)")
// } label: {
// Image(systemName: "trash")
// .foregroundColor(.white)
// }
// .frame(width: 80, alignment: .center)
// .frame(maxHeight: .infinity)
// .contentShape(Rectangle())
// .background(Color.blue)
// }
// }
// .swipeCell(id: story.id.uuidString, cellWidth: 60, leadingSideGroup: leftGroup(), trailingSideGroup: rightGroup(), currentUserInteractionCellID: $currentUserInteractionCellID, settings: SwipeCellSettings())
// .onSwipe(leading: slots, trailing: slots)
.swipeCell(cellPosition: .both, leftSlot: SwipeCellSlot(slots: [swipeSaveButton], slotStyle: .destructive, buttonWidth: 80), rightSlot: SwipeCellSlot(slots: [swipeReadButton], slotStyle: .destructive, buttonWidth: 80))
.dismissSwipeCellForScrollViewForLazyVStack()
.contextMenu {
Button {
cache.appDelegate.storiesCollection.toggleStoryUnread(story.dictionary)
cache.appDelegate.feedDetailViewController.reload()
} label: {
Label(story.isRead ? "Mark as unread" : "Mark as read", image: "mark-read")
}
Button {
cache.appDelegate.feedDetailViewController.markFeedsRead(fromTimestamp: story.timestamp, andOlder: false)
cache.appDelegate.feedDetailViewController.reload()
} label: {
Label("Mark newer stories read", image: "mark-read")
}
Button {
cache.appDelegate.feedDetailViewController.markFeedsRead(fromTimestamp: story.timestamp, andOlder: true)
cache.appDelegate.feedDetailViewController.reload()
} label: {
Label("Mark older stories read", image: "mark-read")
}
Button {
cache.appDelegate.storiesCollection.toggleStorySaved(story.dictionary)
cache.appDelegate.feedDetailViewController.reload()
} label: {
Label(story.isSaved ? "Unsave this story" : "Save this story", image: "saved-stories")
}
Button {
cache.appDelegate.showSend(to: cache.appDelegate.feedDetailViewController, sender: cache.appDelegate.feedDetailViewController.view)
} label: {
Label("Send this story to…", image: "email")
}
Button {
cache.appDelegate.openTrainStory(nil)
} label: {
Label("Train this story", image: "train")
}
}
}
// var body: some View {
// if cache.isGrid {
// ZStack(alignment: .leading) {
// RoundedRectangle(cornerRadius: 12).foregroundColor(.init(white: 0.9))
//
// CardFeedBarView(cache: cache, story: story)
// .clipShape(RoundedRectangle(cornerRadius: 12))
// .padding(.leading, 1)
//
// VStack {
// // RoundedRectangle(cornerRadius: 12).foregroundColor(.random)
// // .frame(height: 200)
//
// if let previewImage {
// Image(uiImage: previewImage)
// .resizable()
// .scaledToFill()
// .frame(height: 200)
// // .clipped()
// // .clipShape(RoundedRectangle(cornerRadius: 12))
// .cornerRadius(12, corners: [.topLeft, .topRight])
// .padding(0)
// }
//
// CardContentView(cache: cache, story: story)
// .frame(maxHeight: .infinity, alignment: .leading)
// .padding(10)
// }
// }
// } else {
// ZStack(alignment: .leading) {
// if story.isSelected {
// RoundedRectangle(cornerRadius: 12).foregroundColor(.init(white: 0.9))
// // .padding(10)
//
// CardFeedBarView(cache: cache, story: story)
// .clipShape(RoundedRectangle(cornerRadius: 12))
// // .padding(10)
// } else {
// CardFeedBarView(cache: cache, story: story)
// .padding(.leading, 2)
// }
//
// HStack {
// CardContentView(cache: cache, story: story)
// .frame(maxWidth: .infinity, alignment: .leading)
// .padding([.top, .bottom], 10)
// .padding(.leading, 15)
//
// if let previewImage {
// Image(uiImage: previewImage)
// .resizable()
// .scaledToFill()
// .frame(width: 80)
// .clipShape(RoundedRectangle(cornerRadius: 10))
// .padding([.top, .bottom, .trailing], 10)
// }
// }
// }
// .if(story.isSelected) { view in
// view.padding(10)
// }
// }
// }
var highlightColor: Color {
if cache.isGrid {
return Color.themed([0xFDFCFA, 0xFFFDEF, 0x4F4F4F, 0x292B2C])
} else {
return Color.themed([0xFFFDEF, 0xEEECCD, 0x303A40, 0x303030])
}
}
var previewImage: UIImage? {
guard cache.settings.preview != .none, let image = cache.appDelegate.cachedImage(forStoryHash: story.hash), image.isKind(of: UIImage.self) else {
return nil
}
return image
}
@ViewBuilder
func gridPreview(image: UIImage) -> some View {
Image(uiImage: image)
.resizable()
.scaledToFill()
.frame(height: cache.settings.gridHeight / 3)
.cornerRadius(10, corners: .topRight)
.padding(0)
.padding(.leading, 8)
}
@ViewBuilder
func listPreview(image: UIImage) -> some View {
let isLeft = cache.settings.preview.isLeft
if cache.settings.preview.isSmall {
Image(uiImage: image)
.resizable()
.scaledToFill()
.frame(width: 80)
.clipShape(RoundedRectangle(cornerRadius: 10))
.padding([.top, .bottom], 10)
.padding(.leading, isLeft ? 15 : -10)
.padding(.trailing, isLeft ? -10 : 10)
} else {
Image(uiImage: image)
.resizable()
.scaledToFill()
.frame(width: 90)
.clipped()
.padding(.leading, isLeft ? 8 : -10)
.padding(.trailing, isLeft ? -10 : 0)
}
// if cache.settings.listPreview.isLeft {
// return image.padding(.trailing, 10)
// } else {
// return image.padding(.leading, 10)
// }
// //these cause it to crash; too complex? could try assigning the above to variable then add these
// .if(cache.settings.listPreview.isLeft) { view in
// self.padding(.trailing, 10)
// }
// .if(!cache.settings.listPreview.isLeft) { view in
// self.padding(.leading, 10)
// }
}
// func leftGroup()->[SwipeCellActionItem] {
// return [SwipeCellActionItem(buttonView: {
//
// VStack(spacing: 2) {
// Image(systemName: "person.crop.circle.badge.plus").font(.system(size: 22)).foregroundColor(.white)
// Text("Share").fixedSize().font(.system(size: 12)).foregroundColor(.white)
// }.frame(maxHeight: 80).castToAnyView()
//
// }, backgroundColor: .blue)
// {
// print("share action!")
// }]
// return [ SwipeCellActionItem(buttonView: {
//
// self.pinView(swipeOut: false)
//
// }, swipeOutButtonView: {
// self.pinView(swipeOut: true)
// }, buttonWidth: 80, backgroundColor: .yellow, swipeOutAction: true, swipeOutHapticFeedbackType: .success, swipeOutIsDestructive: false)
// {
// print("pin action!")
// self.isPinned.toggle()
// }]
// }
//
// func pinView(swipeOut: Bool)->AnyView {
//
// Group {
// Spacer()
// VStack(spacing: 2) {
// Image(systemName: self.isPinned ? "pin.slash": "pin").font(.system(size: 24)).foregroundColor(.white)
// Text(self.isPinned ? "Unpin": "Pin").fixedSize().font(.system(size: 14)).foregroundColor(.white)
// }.frame(maxHeight: 80).padding(.horizontal, swipeOut ? 20 : 5)
// if swipeOut == false {
// Spacer()
// }
// }.animation(.default).castToAnyView()
//
// }
//
//
// func rightGroup()->[SwipeCellActionItem] {
//
// let items = [
// SwipeCellActionItem(buttonView: {
//
// VStack(spacing: 2) {
// Image(systemName: "person.crop.circle.badge.plus").font(.system(size: 22)).foregroundColor(.white)
// Text("Share").fixedSize().font(.system(size: 12)).foregroundColor(.white)
// }.frame(maxHeight: 80).castToAnyView()
//
// }, backgroundColor: .blue)
// {
// print("share action!")
// },
// SwipeCellActionItem(buttonView: {
// VStack(spacing: 2) {
// Image(systemName: "folder.fill").font(.system(size: 22)).foregroundColor(.white)
// Text("Move").fixedSize().font(.system(size: 12)).foregroundColor(.white)
// }.frame(maxHeight: 80).castToAnyView()
//
// }, backgroundColor: .purple, actionCallback: {
// print("folder action")
// }),
//
// SwipeCellActionItem(buttonView: {
// self.trashView(swipeOut: false)
// }, swipeOutButtonView: {
// self.trashView(swipeOut: true)
// }, backgroundColor: .red, swipeOutAction: true, swipeOutHapticFeedbackType: .warning, swipeOutIsDestructive: true) {
// print("delete action")
//// self.deletionCallback(item)
// }
// ]
//
// return items
// }
//
// func trashView(swipeOut: Bool)->AnyView {
// VStack(spacing: 3) {
// Image(systemName: "trash").font(.system(size: swipeOut ? 28 : 22)).foregroundColor(.white)
// Text("Delete").fixedSize().font(.system(size: swipeOut ? 16 : 12)).foregroundColor(.white)
// }.frame(maxHeight: 80).animation(.default).castToAnyView()
//
// }
// var slots = [
// // First item
// Slot(
// image: {
// Image(systemName: "envelope.open.fill")
// },
// title: {
// Text("Read")
// .foregroundColor(.white)
// .font(.footnote)
// .fontWeight(.semibold)
// .embedInAnyView()
// },
// action: { print("Read Slot tapped") },
// style: .init(background: .orange)
// ),
// // Second item
// Slot(
// image: {
// Image(systemName: "hand.raised.fill")
// },
// title: {
// Text("Block")
// .foregroundColor(.white)
// .font(.footnote)
// .fontWeight(.semibold)
// .embedInAnyView()
// },
// action: { print("Block Slot Tapped") },
// style: .init(background: .blue, imageColor: .red)
// )
// ]
//struct CardView_Previews: PreviewProvider {
// static var previews: some View {
// CardView(cache: StoryCache(), story: Story(index: 0))
// }
}
struct CardContentView: View {
let cache: StoryCache
let story: Story
var body: some View {
VStack(alignment: .leading) {
if story.isRiverOrSocial, let feedImage {
HStack {
Image(uiImage: feedImage)
.resizable()
.frame(width: 16, height: 16)
.padding(.leading, 24)
Text(story.feedName)
.font(font(named: "WhitneySSm-Medium", size: 12))
.lineLimit(1)
.foregroundColor(feedColor)
}
}
HStack(alignment: .top) {
if let unreadImage {
Image(uiImage: unreadImage)
.resizable()
.opacity(story.isRead ? 0.15 : 1)
.frame(width: 16, height: 16)
.padding(.top, 3)
}
VStack(alignment: .leading) {
HStack(alignment: .top) {
if story.isSaved, let image = UIImage(named: "saved-stories") {
Image(uiImage: image)
.resizable()
.opacity(story.isRead ? 0.15 : 1)
.frame(width: 16, height: 16)
.padding(.top, 3)
}
if story.isShared, let image = UIImage(named: "share") {
Image(uiImage: image)
.resizable()
.opacity(story.isRead ? 0.15 : 1)
.frame(width: 16, height: 16)
.padding(.top, 3)
}
Text(story.title)
.font(font(named: "WhitneySSm-Medium", size: 18).bold())
.foregroundColor(titleColor)
.lineLimit(cache.isGrid ? StorySettings.Content.titleLimit : cache.settings.content.limit)
.truncationMode(.tail)
}
.padding(.bottom, cache.settings.spacing == .compact ? -5 : 0)
if cache.isGrid || cache.settings.content != .title {
Text(story.content)
.font(font(named: "WhitneySSm-Book", size: 13))
.foregroundColor(contentColor)
.lineLimit(cache.isGrid ? StorySettings.Content.contentLimit : cache.settings.content.limit)
.truncationMode(.tail)
.padding(.top, 5)
.padding(.bottom, cache.settings.spacing == .compact ? -5 : 0)
}
Spacer()
Text(story.dateAndAuthor)
.font(font(named: "WhitneySSm-Medium", size: 12))
.foregroundColor(dateAndAuthorColor)
.padding(.top, 5)
}
}
}
}
var feedImage: UIImage? {
if let image = cache.appDelegate.getFavicon(story.feedID) {
return Utilities.roundCorneredImage(image, radius: 4, convertTo: CGSizeMake(16, 16))
} else {
return nil
}
}
var unreadImage: UIImage? {
guard story.isReadAvailable else {
return nil
}
switch story.score {
case -1:
return UIImage(named: "indicator-hidden")
case 1:
return UIImage(named: "indicator-focus")
default:
return UIImage(named: "indicator-unread")
}
}
func font(named: String, size: CGFloat) -> Font {
return Font.custom(named, size: size + cache.settings.fontSize.offset, relativeTo: .caption)
}
var feedColor: Color {
return contentColor
}
var titleColor: Color {
if story.isSelected {
return Color.themed([0x686868, 0xA0A0A0])
} else if story.isRead {
return Color.themed([0x585858, 0x585858, 0x989898, 0x888888])
} else {
return Color.themed([0x111111, 0x333333, 0xD0D0D0, 0xCCCCCC])
}
}
var contentColor: Color {
if story.isSelected, story.isRead {
return Color.themed([0xB8B8B8, 0xB8B8B8, 0xA0A0A0, 0x707070])
} else if story.isSelected {
return Color.themed([0x888785, 0x686868, 0xA9A9A9, 0x989898])
} else if story.isRead {
return Color.themed([0xB8B8B8, 0xB8B8B8, 0xA0A0A0, 0x707070])
} else {
return Color.themed([0x404040, 0x404040, 0xC0C0C0, 0xB0B0B0])
}
}
var dateAndAuthorColor: Color {
return contentColor
}
}
struct CardFeedBarView: View {
let cache: StoryCache
let story: Story
var body: some View {
GeometryReader { geometry in
if let color = story.feedColorBarLeft {
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 0, y: geometry.size.height))
}
.stroke(Color(color), lineWidth: 4)
}
if let color = story.feedColorBarRight {
Path { path in
path.move(to: CGPoint(x: 4, y: 0))
path.addLine(to: CGPoint(x: 4, y: geometry.size.height))
}
.stroke(Color(color), lineWidth: 4)
}
}
// if #available(iOS 15.0, *) {
// Canvas { context, size in
// context.stroke(
// Path(CGRect(origin: .zero, size: CGSize(width: 0, height: size.height))),
// with: .color(.green),
// lineWidth: 4)
//
// context.stroke(
// Path(CGRect(origin: CGPoint(x: 5, y: 0), size: CGSize(width: 0, height: size.height))),
// with: .color(.blue),
// lineWidth: 4)
// }
// Canvas { context, size in
// let frame = CGRect(x: 0, y: 0, width: size.width, height: size.height)
//
// Path { path in
// path.move(to: CGPoint(x: 0, y: 0))
// path.addLine(to: CGPoint(x: 0, y: size.height))
// }
// .stroke(.blue, lineWidth: 10)
//
// Path { path in
// path.move(to: CGPoint(x: 10, y: 0))
// path.addLine(to: CGPoint(x: 10, y: size.height))
// }
// .stroke(.green, lineWidth: 10)
// }
// } else {
// EmptyView()
// }
// Path { path in
// path.move(to: CGPoint(x: 0, y: 0))
// path.addLine(to: CGPoint(x: 100, y: 300))
// path.addLine(to: CGPoint(x: 300, y: 300))
// path.addLine(to: CGPoint(x: 200, y: 100))
// path.closeSubpath()
// }
// .stroke(.blue, lineWidth: 10)
// CGFloat feedBarOffset = isHighlighted ? 2 : 0;
// CGContextSetStrokeColor(context, CGColorGetComponents([self.feedColorBarTopBorder CGColor]));
// if (self.isRead) {
// CGContextSetAlpha(context, 0.15);
// }
// CGContextSetLineWidth(context, 4.0f);
// CGContextBeginPath(context);
// CGContextMoveToPoint(context, 2.0f + feedBarOffset, 0);
// CGContextAddLineToPoint(context, 2.0f + feedBarOffset, self.frame.size.height);
// CGContextStrokePath(context);
//
// CGContextSetStrokeColor(context, CGColorGetComponents([self.feedColorBar CGColor]));
// CGContextBeginPath(context);
// CGContextMoveToPoint(context, 6.0f + feedBarOffset, 0);
// CGContextAddLineToPoint(context, 6.0 + feedBarOffset, self.frame.size.height);
// CGContextStrokePath(context);
}
}
//extension ShapeStyle where Self == Color {
// static var darkBackground: Color {
// Color(red: 0.1, green: 0.1, blue: 0.2)
// }
// static var lightBackground: Color {
// Color(red: 0.2, green: 0.2, blue: 0.3)
// }
//}