mirror of
https://github.com/yattee/yattee.git
synced 2025-08-06 10:44:06 +00:00
Search UI fixes
This commit is contained in:
@@ -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()
|
||||
}
|
||||
}
|
||||
|
@@ -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"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -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)"))
|
||||
|
@@ -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))
|
||||
|
@@ -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))
|
||||
}
|
||||
|
@@ -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")
|
||||
|
@@ -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
|
||||
|
@@ -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)
|
||||
|
@@ -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
|
||||
|
||||
|
13
Shared/Views/LazyView.swift
Normal file
13
Shared/Views/LazyView.swift
Normal 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()
|
||||
}
|
||||
}
|
@@ -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
|
||||
}
|
||||
|
@@ -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()
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user