Display more details in player view

2025-08-09 20:24:06 +00:00 · 2021-08-22 21:13:33 +02:00
parent ea634390a6
commit f80b61f9c7
22 changed files with 716 additions and 36 deletions
--- a/Shared/Player/VideoDetails.swift
+++ b/Shared/Player/VideoDetails.swift
@@ -0,0 +1,132 @@
+import Foundation
+import SwiftUI
+
+struct VideoDetails: View {
+    var video: Video
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            Text(video.title)
+                .font(.title2.bold())
+
+            Text(video.author)
+                .foregroundColor(.secondary)
+
+            HStack(spacing: 4) {
+                if let published = video.publishedDate {
+                    Text(published)
+                }
+
+                if let publishedAt = video.publishedAt {
+                    if video.publishedDate != nil {
+                        Text("•")
+                            .foregroundColor(.secondary)
+                            .opacity(0.3)
+                    }
+                    Text(publishedAt.formatted(date: .abbreviated, time: .omitted))
+                }
+            }
+            .padding(.top, 4)
+            .font(.system(size: 12))
+            .foregroundColor(.secondary)
+
+            HStack {
+                if let views = video.viewsCount {
+                    VideoDetail(title: "Views", detail: views)
+                }
+
+                if let likes = video.likesCount {
+                    VideoDetail(title: "Likes", detail: likes, symbol: "hand.thumbsup.circle.fill", symbolColor: Color("VideoDetailLikesSymbolColor"))
+                }
+
+                if let dislikes = video.dislikesCount {
+                    VideoDetail(title: "Dislikes", detail: dislikes, symbol: "hand.thumbsdown.circle.fill", symbolColor: Color("VideoDetailDislikesSymbolColor"))
+                }
+            }
+            .padding(.horizontal, 1)
+            .padding(.vertical, 4)
+
+            #if os(macOS)
+                ScrollView(.vertical) {
+                    Text(video.description)
+                        .font(.caption)
+                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, alignment: .leading)
+                }
+            #else
+                Text(video.description)
+                    .font(.caption)
+            #endif
+
+            ScrollView(.horizontal, showsIndicators: showScrollIndicators) {
+                HStack {
+                    ForEach(video.keywords, id: \.self) { keyword in
+                        HStack(alignment: .center, spacing: 0) {
+                            Text("#")
+                                .font(.system(size: 11).bold())
+
+                            Text(keyword)
+                                .frame(maxWidth: 500)
+                        }.foregroundColor(.white)
+                            .padding(.vertical, 4)
+                            .padding(.horizontal, 8)
+
+                            .background(Color("VideoDetailLikesSymbolColor"))
+                            .mask(RoundedRectangle(cornerRadius: 3))
+
+                            .font(.caption)
+                    }
+                }
+                .padding(.bottom, 10)
+            }
+        }
+        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
+        .padding([.horizontal, .bottom])
+    }
+
+    var showScrollIndicators: Bool {
+        #if os(macOS)
+            false
+        #else
+            true
+        #endif
+    }
+}
+
+struct VideoDetail: View {
+    var title: String
+    var detail: String
+    var symbol = "eye.fill"
+    var symbolColor = Color.white
+
+    var body: some View {
+        VStack {
+            VStack(spacing: 0) {
+                HStack(alignment: .center, spacing: 4) {
+                    Image(systemName: symbol)
+                        .foregroundColor(symbolColor)
+
+                    Text(title.uppercased())
+
+                    Spacer()
+                }
+                .font(.caption2)
+                .padding([.leading, .top], 4)
+                .frame(alignment: .leading)
+
+                Divider()
+                    .background(.gray)
+                    .padding(.vertical, 4)
+
+                Text(detail)
+                    .shadow(radius: 1.0)
+                    .font(.title3.bold())
+            }
+        }
+        .foregroundColor(.white)
+        .background(Color("VideoDetailBackgroundColor"))
+        .cornerRadius(6)
+        .overlay(RoundedRectangle(cornerRadius: 6)
+            .stroke(Color("VideoDetailBorderColor"), lineWidth: 1))
+        .frame(maxWidth: 90)
+    }
+}