Search UI fixes

This commit is contained in:
Arkadiusz Fal
2021-09-13 22:41:16 +02:00
parent b00b54ad2a
commit 5e403c7f15
20 changed files with 188 additions and 50 deletions

View File

@@ -12,6 +12,7 @@ struct UnsubscribeAlertModifier: ViewModifier {
Button("Unsubscribe", role: .destructive) {
subscriptions.unsubscribe(channel.id) {
navigationState.openChannel(channel)
navigationState.tabSelection = .channel(channel.id)
navigationState.sidebarSectionChanged.toggle()
}
}

View File

@@ -4,12 +4,23 @@ import SwiftUI
#endif
struct AppSidebarNavigation: View {
enum SidebarGroup: String, Identifiable {
case main
var id: RawValue {
rawValue
}
}
@EnvironmentObject<NavigationState> private var navigationState
@EnvironmentObject<Playlists> private var playlists
@EnvironmentObject<SearchState> private var searchState
@EnvironmentObject<Subscriptions> private var subscriptions
@State private var didApplyPrimaryViewWorkAround = false
@State private var searchQuery = ""
var selection: Binding<TabSelection?> {
navigationState.tabSelectionOptionalBinding
}
@@ -41,61 +52,94 @@ struct AppSidebarNavigation: View {
Text("Select section")
}
.searchable(text: $searchQuery, placement: .sidebar) {
ForEach(searchState.querySuggestions.collection, id: \.self) { suggestion in
Text(suggestion)
.searchCompletion(suggestion)
}
}
.onChange(of: searchQuery) { query in
searchState.loadQuerySuggestions(query)
}
.onSubmit(of: .search) {
searchState.changeQuery { query in
query.query = self.searchQuery
}
navigationState.tabSelection = .search
}
}
var sidebar: some View {
ScrollViewReader { scrollView in
List {
mainNavigationLinks
Group {
AppSidebarRecentlyOpened(selection: selection)
.id("recentlyOpened")
AppSidebarSubscriptions(selection: selection)
AppSidebarPlaylists(selection: selection)
ForEach(sidebarGroups) { group in
sidebarGroupContent(group)
.id(group)
}
.onChange(of: navigationState.sidebarSectionChanged) { _ in
scrollScrollViewToItem(scrollView: scrollView, for: navigationState.tabSelection)
}
}
.background {
NavigationLink(destination: SearchView(), tag: TabSelection.search, selection: selection) {
Color.clear
}
.hidden()
}
.listStyle(.sidebar)
}
#if os(macOS)
.toolbar {
Button(action: toggleSidebar) {
Image(systemName: "sidebar.left").help("Toggle Sidebar")
.toolbar {
#if os(macOS)
ToolbarItemGroup {
Button(action: toggleSidebar) {
Image(systemName: "sidebar.left").help("Toggle Sidebar")
}
}
#endif
}
}
var sidebarGroups: [SidebarGroup] {
[.main]
}
func sidebarGroupContent(_ group: SidebarGroup) -> some View {
switch group {
case .main:
return Group {
mainNavigationLinks
AppSidebarRecentlyOpened(selection: selection)
.id("recentlyOpened")
AppSidebarSubscriptions(selection: selection)
AppSidebarPlaylists(selection: selection)
}
#endif
}
}
var mainNavigationLinks: some View {
Group {
NavigationLink(destination: SubscriptionsView(), tag: TabSelection.subscriptions, selection: selection) {
Section("Videos") {
NavigationLink(destination: LazyView(SubscriptionsView()), tag: TabSelection.subscriptions, selection: selection) {
Label("Subscriptions", systemImage: "star.circle.fill")
.accessibility(label: Text("Subscriptions"))
}
NavigationLink(destination: PopularView(), tag: TabSelection.popular, selection: selection) {
NavigationLink(destination: LazyView(PopularView()), tag: TabSelection.popular, selection: selection) {
Label("Popular", systemImage: "chart.bar")
.accessibility(label: Text("Popular"))
}
NavigationLink(destination: TrendingView(), tag: TabSelection.trending, selection: selection) {
NavigationLink(destination: LazyView(TrendingView()), tag: TabSelection.trending, selection: selection) {
Label("Trending", systemImage: "chart.line.uptrend.xyaxis")
.accessibility(label: Text("Trending"))
}
NavigationLink(destination: PlaylistsView(), tag: TabSelection.playlists, selection: selection) {
NavigationLink(destination: LazyView(PlaylistsView()), tag: TabSelection.playlists, selection: selection) {
Label("Playlists", systemImage: "list.and.film")
.accessibility(label: Text("Playlists"))
}
NavigationLink(destination: SearchView(), tag: TabSelection.search, selection: selection) {
Label("Search", systemImage: "magnifyingglass")
.accessibility(label: Text("Search"))
}
}
}

View File

@@ -10,7 +10,7 @@ struct AppSidebarPlaylists: View {
Section(header: Text("Playlists")) {
ForEach(playlists.all) { playlist in
NavigationLink(tag: TabSelection.playlist(playlist.id), selection: $selection) {
PlaylistVideosView(playlist)
LazyView(PlaylistVideosView(playlist))
} label: {
Label(playlist.title, systemImage: AppSidebarNavigation.symbolSystemImage(playlist.title))
.badge(Text("\(playlist.videos.count)"))

View File

@@ -14,7 +14,7 @@ struct AppSidebarRecentlyOpened: View {
Section(header: Text("Recently Opened")) {
ForEach(recentlyOpened) { channel in
NavigationLink(tag: TabSelection.channel(channel.id), selection: $selection) {
ChannelVideosView(channel)
LazyView(ChannelVideosView(channel))
} label: {
HStack {
Label(channel.name, systemImage: AppSidebarNavigation.symbolSystemImage(channel.name))

View File

@@ -10,7 +10,7 @@ struct AppSidebarSubscriptions: View {
Section(header: Text("Subscriptions")) {
ForEach(subscriptions.all) { channel in
NavigationLink(tag: TabSelection.channel(channel.id), selection: $selection) {
ChannelVideosView(channel)
LazyView(ChannelVideosView(channel))
} label: {
Label(channel.name, systemImage: AppSidebarNavigation.symbolSystemImage(channel.name))
}

View File

@@ -3,6 +3,9 @@ import SwiftUI
struct AppTabNavigation: View {
@EnvironmentObject<NavigationState> private var navigationState
@EnvironmentObject<SearchState> private var searchState
@State private var searchQuery = ""
var body: some View {
TabView(selection: $navigationState.tabSelection) {
@@ -44,6 +47,22 @@ struct AppTabNavigation: View {
NavigationView {
SearchView()
.searchable(text: $searchQuery, placement: .navigationBarDrawer(displayMode: .always)) {
ForEach(searchState.querySuggestions.collection, id: \.self) { suggestion in
Text(suggestion)
.searchCompletion(suggestion)
}
}
.onChange(of: searchQuery) { query in
searchState.loadQuerySuggestions(query)
}
.onSubmit(of: .search) {
searchState.changeQuery { query in
query.query = self.searchQuery
}
navigationState.tabSelection = .search
}
}
.tabItem {
Label("Search", systemImage: "magnifyingglass")

View File

@@ -12,7 +12,7 @@ struct PlaybackBar: View {
closeButton
.frame(width: 60, alignment: .leading)
Text(playbackFinishAtString)
Text(playbackStatus)
.foregroundColor(.gray)
.font(.caption2)
.frame(minWidth: 60, maxWidth: .infinity)
@@ -21,7 +21,11 @@ struct PlaybackBar: View {
if playbackState.stream != nil {
Text(currentStreamString)
} else {
Image(systemName: "bolt.horizontal.fill")
if video.live {
Image(systemName: "dot.radiowaves.left.and.right")
} else {
Image(systemName: "bolt.horizontal.fill")
}
}
}
.foregroundColor(.gray)
@@ -37,9 +41,13 @@ struct PlaybackBar: View {
playbackState.stream != nil ? "\(playbackState.stream!.resolution.height)p" : ""
}
var playbackFinishAtString: String {
var playbackStatus: String {
guard playbackState.time != nil else {
return "loading..."
if playbackState.live {
return "LIVE"
} else {
return "loading..."
}
}
let remainingSeconds = video.length - playbackState.time!.seconds

View File

@@ -119,12 +119,15 @@ struct VideoView: View {
#endif
.padding(.bottom)
if additionalDetailsAvailable {
additionalDetails
.padding(.bottom, 10)
} else {
Spacer()
Group {
if additionalDetailsAvailable {
additionalDetails
} else {
Spacer()
}
}
.frame(minHeight: 30, alignment: .top)
.padding(.bottom, 10)
}
#if os(tvOS)
.padding(.horizontal, 8)

View File

@@ -90,7 +90,7 @@ struct ChannelVideosView: View {
var subscriptionToolbarItemPlacement: ToolbarItemPlacement {
#if os(iOS)
if horizontalSizeClass == .regular {
return .primaryAction
return .primaryAction // swiftlint:disable:this implicit_return
}
#endif

View File

@@ -0,0 +1,13 @@
import Foundation
import SwiftUI
struct LazyView<Content: View>: View {
let build: () -> Content
init(_ build: @autoclosure @escaping () -> Content) {
self.build = build
}
var body: Content {
build()
}
}

View File

@@ -26,7 +26,6 @@ struct SearchView: View {
Spacer()
}
}
.searchable(text: $queryText)
.onAppear {
state.changeQuery { query in
query.query = queryText
@@ -35,7 +34,7 @@ struct SearchView: View {
query.duration = searchDuration
}
}
.onChange(of: queryText) { queryText in
.onChange(of: state.query.query) { queryText in
state.changeQuery { query in query.query = queryText }
}
.onChange(of: searchSortOrder) { order in
@@ -48,10 +47,14 @@ struct SearchView: View {
state.changeQuery { query in query.duration = duration }
}
#if !os(tvOS)
.navigationTitle("Search")
.navigationTitle(navigationTitle)
#endif
}
var navigationTitle: String {
state.query.query.isEmpty ? "Search" : "Search: \"\(state.query.query)\""
}
var searchFiltersActive: Bool {
searchDate != nil || searchDuration != nil
}

View File

@@ -34,6 +34,7 @@ struct VideoContextMenuView: View {
var openChannelButton: some View {
Button("\(video.author) Channel") {
navigationState.openChannel(video.channel)
navigationState.tabSelection = .channel(video.channel.id)
navigationState.sidebarSectionChanged.toggle()
}
}