Add series -> season browsing

JellyfinPlayer.xcodeproj/project.pbxproj

@@ -29,6 +29,8 @@
 		53892782263CC8770035E14B /* URLImage in Frameworks */ = {isa = PBXBuildFile; productRef = 53892781263CC8770035E14B /* URLImage */; };
 		538CD954263E3DC100BB5AF0 /* SDWebImageSwiftUI in Frameworks */ = {isa = PBXBuildFile; productRef = 538CD953263E3DC100BB5AF0 /* SDWebImageSwiftUI */; };
 		538CD957263E441500BB5AF0 /* ExyteGrid in Frameworks */ = {isa = PBXBuildFile; productRef = 538CD956263E441500BB5AF0 /* ExyteGrid */; };
+		53987CA426572C1300E7EA70 /* SeasonItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53987CA326572C1300E7EA70 /* SeasonItemView.swift */; };
+		53987CA626572F0700E7EA70 /* SeriesItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53987CA526572F0700E7EA70 /* SeriesItemView.swift */; };
 		539B2DA5263BA5B8007FF1A4 /* SettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 539B2DA4263BA5B8007FF1A4 /* SettingsView.swift */; };
 		53A089D0264DA9DA00D57806 /* MovieItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53A089CF264DA9DA00D57806 /* MovieItemView.swift */; };
 		53D2F74A264C69F6005792BB /* Introspect in Frameworks */ = {isa = PBXBuildFile; productRef = 53D2F749264C69F6005792BB /* Introspect */; };
@@ -74,6 +76,8 @@
 		53892771263C8C6F0035E14B /* LoadingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoadingView.swift; sourceTree = "<group>"; };
 		53892776263CBB000035E14B /* JellyApiTypings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JellyApiTypings.swift; sourceTree = "<group>"; };
 		5389277B263CC3DB0035E14B /* BlurHashDecode.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BlurHashDecode.swift; sourceTree = "<group>"; };
+		53987CA326572C1300E7EA70 /* SeasonItemView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SeasonItemView.swift; sourceTree = "<group>"; };
+		53987CA526572F0700E7EA70 /* SeriesItemView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SeriesItemView.swift; sourceTree = "<group>"; };
 		539B2DA4263BA5B8007FF1A4 /* SettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsView.swift; sourceTree = "<group>"; };
 		53A089CF264DA9DA00D57806 /* MovieItemView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MovieItemView.swift; sourceTree = "<group>"; };
 		53D5E3DA264B460200BADDC8 /* Cartfile */ = {isa = PBXFileReference; lastKnownFileType = text; path = Cartfile; sourceTree = "<group>"; };
@@ -150,6 +154,8 @@
 				535BAEA4264A151C005FA86D /* VLCPlayer.swift */,
 				535BAEA6264A18AA005FA86D /* PlayerDemo.swift */,
 				53EE24E5265060780068F029 /* LibrarySearchView.swift */,
+				53987CA326572C1300E7EA70 /* SeasonItemView.swift */,
+				53987CA526572F0700E7EA70 /* SeriesItemView.swift */,
 			);
 			path = JellyfinPlayer;
 			sourceTree = "<group>";
@@ -266,6 +272,7 @@
 				5377CBFE263B596B003A4E83 /* PersistenceController.swift in Sources */,
 				5389276E263C25100035E14B /* ContinueWatchingView.swift in Sources */,
 				535BAE9F2649E569005FA86D /* ItemView.swift in Sources */,
+				53987CA426572C1300E7EA70 /* SeasonItemView.swift in Sources */,
 				53892770263C25230035E14B /* NextUpView.swift in Sources */,
 				535BAEA5264A151C005FA86D /* VLCPlayer.swift in Sources */,
 				5377CC01263B596B003A4E83 /* Model.xcdatamodeld in Sources */,
@@ -277,6 +284,7 @@
 				53892777263CBB000035E14B /* JellyApiTypings.swift in Sources */,
 				5377CBF7263B596A003A4E83 /* ContentView.swift in Sources */,
 				5389277C263CC3DB0035E14B /* BlurHashDecode.swift in Sources */,
+				53987CA626572F0700E7EA70 /* SeriesItemView.swift in Sources */,
 				539B2DA5263BA5B8007FF1A4 /* SettingsView.swift in Sources */,
 				5338F74E263B61370014BF09 /* ConnectToServerView.swift in Sources */,
 				5377CBF5263B596A003A4E83 /* JellyfinPlayerApp.swift in Sources */,

JellyfinPlayer/ItemView.swift

@@ -23,6 +23,10 @@ struct ItemView: View {
     var body: some View {
         if(item.Type == "Movie") {
             MovieItemView(item: self.item)
+        } else if(item.Type == "Season") {
+            SeasonItemView(item: self.item)
+        } else if(item.Type == "Series") {
+            SeriesItemView(item: self.item)
         } else {
             Text("Type: \(item.Type) not implemented yet :(")
         }

JellyfinPlayer/MovieItemView.swift

@@ -487,7 +487,7 @@ struct MovieItemView: View {
                                                             .fontWeight(.semibold)
                                                             .foregroundColor(.primary)
                                                             .fixedSize(horizontal: false, vertical: true)
-                                                            .offset(x: 11, y: 0)
+                                                            .offset(x: 12, y: 0)
                                                         Spacer().frame(height: 1)
                                                         HStack() {
                                                             Text(String(fullItem.ProductionYear)).font(.subheadline)
@@ -521,7 +521,7 @@ struct MovieItemView: View {
                                                             }
                                                             Spacer()
                                                         }.frame(maxWidth: .infinity)
-                                                        .offset(x: 11)
+                                                        .offset(x: 12)
                                                     }.frame(maxWidth: .infinity)
                                                     Spacer()
                                                     HStack() {

JellyfinPlayer/SeasonItemView.swift

@@ -0,0 +1,272 @@
+//
+//  SeasonItemView.swift
+//  JellyfinPlayer
+//
+//  Created by Aiden Vigue on 5/13/21.
+//
+
+import SwiftUI
+import SwiftyRequest
+import SwiftyJSON
+import Introspect
+import SDWebImageSwiftUI
+
+struct SeasonItemView: View {
+    @EnvironmentObject var globalData: GlobalData
+    @State private var isLoading: Bool = true;
+    var item: ResumeItem;
+    var fullItem: DetailItem;
+    var episodes: [DetailItem];
+    @State private var progressString: String = "";
+    
+    init(item: ResumeItem) {
+        self.item = item;
+        self.fullItem = DetailItem();
+        self.episodes = [];
+    }
+    
+    func loadData() {
+        let url = "/Users/\(globalData.user?.user_id ?? "")/Items/\(item.Id)"
+        
+        let request = RestRequest(method: .get, url: (globalData.server?.baseURI ?? "") + url)
+        request.headerParameters["X-Emby-Authorization"] = globalData.authHeader
+        request.contentType = "application/json"
+        request.acceptType = "application/json"
+        
+        request.responseData() { (result: Result<RestResponse<Data>, RestError>) in
+            switch result {
+            case .success(let response):
+                let body = response.body
+                do {
+                    let json = try JSON(data: body)
+                    dump(json)
+                    fullItem.ProductionYear = json["ProductionYear"].int ?? 0
+                    fullItem.Poster = json["ImageTags"]["Primary"].string ?? ""
+                    fullItem.PosterBlurHash = json["ImageBlurHashes"]["Primary"][fullItem.Poster].string ?? ""
+                    fullItem.Backdrop = json["BackdropImageTags"][0].string ?? ""
+                    fullItem.BackdropBlurHash = json["ImageBlurHashes"]["Backdrop"][fullItem.Backdrop].string ?? ""
+                    fullItem.Name = json["Name"].string ?? ""
+                    fullItem.Type = json["Type"].string ?? ""
+                    fullItem.IndexNumber = json["IndexNumber"].int ?? nil
+                    fullItem.Id = json["Id"].string ?? ""
+                    fullItem.SeasonId = json["SeasonId"].string ?? nil
+                    fullItem.SeriesId = json["Id"].string ?? nil
+                    fullItem.Overview = json["Overview"].string ?? ""
+                    fullItem.Tagline = json["Taglines"][0].string ?? ""
+                    fullItem.SeriesName = json["SeriesName"].string ?? nil
+                    fullItem.ParentId = json["ParentId"].string ?? ""
+                    //People
+                    fullItem.Directors = []
+                    fullItem.Studios = []
+                    fullItem.Writers = []
+                    fullItem.Cast = []
+                    fullItem.Genres = []
+                    
+                    for (_,person):(String, JSON) in json["People"] {
+                        if(person["Type"].stringValue == "Director") {
+                            fullItem.Directors.append(person["Name"].string ?? "");
+                        } else if(person["Type"].stringValue == "Writer") {
+                            fullItem.Writers.append(person["Name"].string ?? "");
+                        } else if(person["Type"].stringValue == "Actor") {
+                            let cast = CastMember();
+                            cast.Name = person["Name"].string ?? "";
+                            cast.Id = person["Id"].string ?? "";
+                            let imageTag = person["PrimaryImageTag"].string ?? "";
+                            cast.ImageBlurHash = person["ImageBlurHashes"]["Primary"][imageTag].string ?? "";
+                            cast.Role = person["Role"].string ?? "";
+                            cast.Image = URL(string: "\(globalData.server?.baseURI ?? "")/Items/\(cast.Id)/Images/Primary?fillHeight=744&fillWidth=496&quality=96&tag=\(imageTag)")!
+                            fullItem.Cast.append(cast);
+                        }
+                    }
+                    
+                    let url2 = "/Shows/\(fullItem.SeriesId ?? "")/Episodes?SeasonId=\(fullItem.SeasonId ?? "")&UserId=\(globalData.user?.user_id ?? "")&Fields=ItemCounts%2CPrimaryImageAspectRatio%2CBasicSyncInfo%2CCanDelete%2CMediaSourceCount"
+                    
+                    let request2 = RestRequest(method: .get, url: (globalData.server?.baseURI ?? "") + url2)
+                    request2.headerParameters["X-Emby-Authorization"] = globalData.authHeader
+                    request2.contentType = "application/json"
+                    request2.acceptType = "application/json"
+                    
+                    request2.responseData() { (result: Result<RestResponse<Data>, RestError>) in
+                        switch result {
+                        case .success(let response):
+                            let body = response.body
+                            do {
+                                let json = try JSON(data: body)
+                                for (_,episode):(String, JSON) in json["Items"] {
+                                    dump(episode)
+                                }
+                                _isLoading.wrappedValue = false;
+                            } catch {
+                                
+                            }
+                            break
+                        case .failure(let error):
+                            debugPrint(error)
+                            break
+                        }
+                    }
+                } catch {
+                    
+                }
+                break
+            case .failure(let error):
+                debugPrint(error)
+                break
+            }
+        }
+    }
+    
+    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?
+    @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
+
+    var isPortrait: Bool {
+        let result = verticalSizeClass == .regular && horizontalSizeClass == .compact
+        return result
+    }
+    
+    var body: some View {
+        LoadingView(isShowing: $isLoading) {
+            VStack(alignment:.leading) {
+                if(!isLoading) {
+                    if(isPortrait) {
+                        GeometryReader { geometry in
+                            VStack() {
+                                WebImage(url: URL(string: "\(globalData.server?.baseURI ?? "")/Items/\(fullItem.Id)/Images/Backdrop?maxWidth=3840&quality=90&tag=\(fullItem.Backdrop)")!)
+                                    .resizable() // Resizable like SwiftUI.Image, you must use this modifier or the view will use the image bitmap size
+                                    .placeholder {
+                                        Image(uiImage: UIImage(blurHash: (fullItem.BackdropBlurHash == "" ?  "W$H.4}D%bdo#a#xbtpxVW?W?jXWsXVt7Rjf5axWqxbWXnhada{s-" : fullItem.BackdropBlurHash), size: CGSize(width: 32, height: 32))!)
+                                            .resizable()
+                                            .frame(width: geometry.size.width + geometry.safeAreaInsets.leading + geometry.safeAreaInsets.trailing, height: (geometry.size.width + geometry.safeAreaInsets.leading + geometry.safeAreaInsets.trailing) * 0.5625)
+                                    }
+                                    
+                                    .opacity(0.4)
+                                    .aspectRatio(contentMode: .fill)
+                                    .frame(width: geometry.size.width + geometry.safeAreaInsets.leading + geometry.safeAreaInsets.trailing, height: (geometry.size.width + geometry.safeAreaInsets.leading + geometry.safeAreaInsets.trailing) * 0.5625)
+                                    .shadow(radius: 5)
+                                    .overlay(
+                                        HStack() {
+                                            WebImage(url: URL(string: "\(globalData.server?.baseURI ?? "")/Items/\(fullItem.Id)/Images/Primary?fillWidth=300&fillHeight=450&quality=90&tag=\(fullItem.Poster)")!)
+                                                .resizable() // Resizable like SwiftUI.Image, you must use this modifier or the view will use the image bitmap size
+                                                .placeholder {
+                                                    Image(uiImage: UIImage(blurHash: (fullItem.PosterBlurHash == "" ?  "W$H.4}D%bdo#a#xbtpxVW?W?jXWsXVt7Rjf5axWqxbWXnhada{s-" : fullItem.PosterBlurHash), size: CGSize(width: 32, height: 32))!)
+                                                        .resizable()
+                                                        .frame(width: 120, height: 180)
+                                                        .cornerRadius(10)
+                                                }.aspectRatio(contentMode: .fill)
+                                                .frame(width: 120, height: 180)
+                                                .cornerRadius(10)
+                                            VStack(alignment: .leading) {
+                                                Spacer()
+                                                Text(fullItem.Name).font(.headline)
+                                                    .fontWeight(.semibold)
+                                                    .foregroundColor(.primary)
+                                                    .fixedSize(horizontal: false, vertical: true)
+                                                    .offset(y: -4)
+                                                HStack() {
+                                                    Text(String(fullItem.ProductionYear)).font(.subheadline)
+                                                        .fontWeight(.medium)
+                                                        .foregroundColor(.secondary)
+                                                        .lineLimit(1)
+                                                    Text(fullItem.Runtime).font(.subheadline)
+                                                        .fontWeight(.medium)
+                                                        .foregroundColor(.secondary)
+                                                        .lineLimit(1)
+                                                    if(fullItem.OfficialRating != "") {
+                                                        Text(fullItem.OfficialRating).font(.subheadline)
+                                                            .fontWeight(.semibold)
+                                                            .foregroundColor(.secondary)
+                                                            .lineLimit(1)
+                                                            .padding(EdgeInsets(top: 1, leading: 4, bottom: 1, trailing: 4))
+                                                            .overlay(
+                                                                RoundedRectangle(cornerRadius: 2)
+                                                                    .stroke(Color.secondary, lineWidth: 1)
+                                                            )
+                                                    }
+                                                    if(fullItem.CommunityRating != "") {
+                                                        HStack() {
+                                                            Image(systemName: "star").foregroundColor(.secondary)
+                                                            Text(fullItem.CommunityRating).font(.subheadline)
+                                                                .fontWeight(.semibold)
+                                                                .foregroundColor(.secondary)
+                                                                .lineLimit(1)
+                                                                .offset(x: -7, y: 0.7)
+                                                        }
+                                                    }
+                                                }
+                                                
+                                            }.offset(x: 0, y: -46)
+                                        }.offset(x: 16, y: 40)
+                                        , alignment: .bottomLeading)
+                                VStack(alignment: .leading) {
+                                    ScrollView() {
+                                        VStack(alignment: .leading) {
+                                            if(fullItem.Tagline != "") {
+                                                Text(fullItem.Tagline).font(.body).italic().padding(.top, 7).fixedSize(horizontal: false, vertical: true).padding(.leading, 16).padding(.trailing,16)
+                                            }
+                                            Text(fullItem.Overview).font(.footnote).padding(.top, 3).fixedSize(horizontal: false, vertical: true).padding(.bottom, 3).padding(.leading, 16).padding(.trailing,16)
+                                            if(fullItem.Cast.count != 0) {
+                                                ScrollView(.horizontal, showsIndicators: false) {
+                                                    VStack() {
+                                                        Spacer().frame(height: 8);
+                                                        HStack() {
+                                                            Spacer().frame(width: 16)
+                                                            ForEach(fullItem.Cast, id: \.Id) { cast in
+                                                                NavigationLink(destination: LibraryView(extraParams: "&PersonIds=\(cast.Id)", title: cast.Name)) {
+                                                                    VStack() {
+                                                                        WebImage(url: cast.Image)
+                                                                            .resizable() // Resizable like SwiftUI.Image, you must use this modifier or the view will use the image bitmap size
+                                                                            .placeholder {
+                                                                                Image(uiImage: UIImage(blurHash: (cast.ImageBlurHash == "" ?  "W$H.4}D%bdo#a#xbtpxVW?W?jXWsXVt7Rjf5axWqxbWXnhada{s-" : cast.ImageBlurHash), size: CGSize(width: 32, height: 32))!)
+                                                                                    .resizable()
+                                                                                    .aspectRatio(contentMode: .fill)
+                                                                                    .frame(width: 100, height: 100)
+                                                                                    .cornerRadius(10)
+                                                                            }
+                                                                            .aspectRatio(contentMode: .fill)
+                                                                            .frame(width: 100, height: 100)
+                                                                            .cornerRadius(10).shadow(radius: 6)
+                                                                        Text(cast.Name).font(.footnote).fontWeight(.regular).lineLimit(1).frame(width: 100).foregroundColor(Color.primary)
+                                                                        if(cast.Role != "") {
+                                                                            Text(cast.Role).font(.caption).fontWeight(.medium).lineLimit(1).foregroundColor(Color.secondary).frame(width: 100)
+                                                                        }
+                                                                    }
+                                                                }
+                                                                Spacer().frame(width: 10)
+                                                            }
+                                                            Spacer().frame(width: 16)
+                                                        }
+                                                    }
+                                                }.padding(.top, -3)
+                                            }
+                                            if(fullItem.Directors.count != 0) {
+                                                HStack() {
+                                                    Text("Directors:").font(.callout).fontWeight(.semibold)
+                                                    Text(fullItem.Directors.joined(separator: ", ")).font(.footnote).lineLimit(1).foregroundColor(Color.secondary)
+                                                }.padding(.leading, 16).padding(.trailing,16)
+                                            }
+                                            if(fullItem.Writers.count != 0) {
+                                                HStack() {
+                                                    Text("Writers:").font(.callout).fontWeight(.semibold)
+                                                    Text(fullItem.Writers.joined(separator: ", ")).font(.footnote).lineLimit(1).foregroundColor(Color.secondary)
+                                                }.padding(.leading, 16).padding(.trailing,16)
+                                            }
+                                            if(fullItem.Studios.count != 0) {
+                                                HStack() {
+                                                    Text("Studios:").font(.callout).fontWeight(.semibold)
+                                                    Text(fullItem.Studios.joined(separator: ", ")).font(.footnote).lineLimit(1).foregroundColor(Color.secondary)
+                                                }.padding(.leading, 16).padding(.trailing,16)
+                                            }
+                                            Spacer().frame(height: 3)
+                                        }
+                                    }
+                                }.padding(EdgeInsets(top: 24, leading: 0, bottom: 0, trailing: 0))
+                            }
+                        }
+                    }
+                }
+            }
+            .navigationBarTitleDisplayMode(.inline)
+            .navigationTitle(fullItem.Name)
+        }.onAppear(perform: loadData)
+    }
+}

JellyfinPlayer/SeriesItemView.swift

@@ -0,0 +1,125 @@
+//
+//  SeriesItemView.swift
+//  JellyfinPlayer
+//
+//  Created by Aiden Vigue on 5/1/21.
+//
+
+import SwiftUI
+import SwiftyRequest
+import SwiftyJSON
+import ExyteGrid
+import SDWebImageSwiftUI
+
+struct SeriesItemView: View {
+    @EnvironmentObject var globalData: GlobalData
+    @State private var isLoading: Bool = true;
+    var item: ResumeItem;
+    @State private var items: [ResumeItem] = [];
+    @State private var hasAppearedOnce: Bool = false;
+    func onAppear() {
+        if(hasAppearedOnce) {
+            return;
+        }
+        _isLoading.wrappedValue = true;
+        let url = "/Shows/\(item.Id )/Seasons?userId=\(globalData.user?.user_id ?? "")&Fields=ItemCounts%2CPrimaryImageAspectRatio%2CBasicSyncInfo%2CCanDelete%2CMediaSourceCount"
+        
+        let request = RestRequest(method: .get, url: (globalData.server?.baseURI ?? "") + url)
+        request.headerParameters["X-Emby-Authorization"] = globalData.authHeader
+        request.contentType = "application/json"
+        request.acceptType = "application/json"
+        
+        request.responseData() { (result: Result<RestResponse<Data>, RestError>) in
+            switch result {
+            case .success(let response):
+                let body = response.body
+                do {
+                    let json = try JSON(data: body)
+                    for (_,item):(String, JSON) in json["Items"] {
+                        // Do something you want
+                        let itemObj = ResumeItem()
+                        itemObj.Type = "Season"
+                        itemObj.Id = item["Id"].string ?? ""
+                        itemObj.ProductionYear = item["ProductionYear"].int ?? 0
+                        itemObj.ItemBadge = item["UserData"]["UnplayedItemCount"].int ?? 0
+                        itemObj.Image = item["ImageTags"]["Primary"].string ?? ""
+                        itemObj.ImageType = "Primary"
+                        itemObj.BlurHash = item["ImageBlurHashes"]["Primary"][itemObj.Image].string ?? ""
+                        itemObj.SeriesName = item["SeriesName"].string ?? ""
+                        itemObj.Name = item["Name"].string ?? ""
+                        _items.wrappedValue.append(itemObj)
+                    }
+                } catch {
+                    
+                }
+                break
+            case .failure(let error):
+                debugPrint(error)
+                break
+            }
+            _isLoading.wrappedValue = false;
+            _hasAppearedOnce.wrappedValue = true;
+        }
+    }
+    
+    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?
+    @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
+
+    var isPortrait: Bool {
+        let result = verticalSizeClass == .regular && horizontalSizeClass == .compact
+        return result
+    }
+    
+    var tracks: [GridTrack] {
+        self.isPortrait ? 3 : 6
+    }
+    
+    var body: some View {
+        LoadingView(isShowing: $isLoading) {
+            GeometryReader { geometry in
+                Grid(tracks: self.tracks, spacing: GridSpacing(horizontal: 0, vertical: 20)) {
+                    ForEach(items, id: \.Id) { item in
+                        NavigationLink(destination: ItemView(item: item )) {
+                            VStack(alignment: .leading) {
+                                WebImage(url: URL(string: "\(globalData.server?.baseURI ?? "")/Items/\(item.Id)/Images/\(item.ImageType)?fillWidth=300&fillHeight=450&quality=90&tag=\(item.Image)"))
+                                    .resizable()
+                                    .placeholder {
+                                        Image(uiImage: UIImage(blurHash: (item.BlurHash == "" ?  "W$H.4}D%bdo#a#xbtpxVW?W?jXWsXVt7Rjf5axWqxbWXnhada{s-" : item.BlurHash), size: CGSize(width: 32, height: 32))!)
+                                            .resizable()
+                                            .frame(width: 100, height: 150)
+                                            .cornerRadius(10)
+                                    }.overlay(
+                                        ZStack {
+                                            Text("\(String(item.ItemBadge ?? 0))")
+                                                .font(.caption)
+                                                .padding(3)
+                                                .foregroundColor(.white)
+                                        }.background(Color.black)
+                                        .opacity(0.8)
+                                        .cornerRadius(10.0)
+                                        .padding(3), alignment: .topTrailing
+                                    )
+                                    .frame(width:100, height: 150)
+                                    .cornerRadius(10)
+                                    .shadow(radius: 5)
+                                Text(item.Name)
+                                    .font(.caption)
+                                    .fontWeight(.semibold)
+                                    .foregroundColor(.primary)
+                                    .lineLimit(1)
+                                Text(String(item.ProductionYear))
+                                    .foregroundColor(.secondary)
+                                    .font(.caption)
+                                    .fontWeight(.medium)
+                            }.frame(width: 100)
+                        }
+                    }
+                    Spacer().frame(height: 2).gridSpan(column: self.isPortrait ? 3 : 6)
+                }.gridContentMode(.scroll)
+            }
+        }
+        .overrideViewPreference(.unspecified)
+        .onAppear(perform: onAppear)
+        .navigationTitle(item.Name)
+    }
+}