mirror of
https://github.com/yattee/yattee.git
synced 2025-08-09 20:24:06 +00:00
Unify forms, add to/remove from playlist on all platforms, UI improvements
This commit is contained in:
178
Shared/Playlists/AddToPlaylistView.swift
Normal file
178
Shared/Playlists/AddToPlaylistView.swift
Normal file
@@ -0,0 +1,178 @@
|
||||
import Defaults
|
||||
import Siesta
|
||||
import SwiftUI
|
||||
|
||||
struct AddToPlaylistView: View {
|
||||
@EnvironmentObject<PlaylistsModel> private var model
|
||||
|
||||
@State var video: Video
|
||||
|
||||
@Environment(\.dismiss) private var dismiss
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
VStack {
|
||||
if model.isEmpty {
|
||||
emptyPlaylistsMessage
|
||||
} else {
|
||||
header
|
||||
Spacer()
|
||||
form
|
||||
Spacer()
|
||||
footer
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: 1000, maxHeight: height)
|
||||
}
|
||||
.onAppear {
|
||||
model.load {
|
||||
if let playlist = model.all.first {
|
||||
model.selectedPlaylistID = playlist.id
|
||||
}
|
||||
}
|
||||
}
|
||||
#if os(macOS)
|
||||
.frame(width: 500, height: 270)
|
||||
.padding(.vertical)
|
||||
#elseif os(tvOS)
|
||||
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
|
||||
.background(.thickMaterial)
|
||||
#else
|
||||
.padding(.vertical)
|
||||
#endif
|
||||
}
|
||||
|
||||
var height: Double {
|
||||
#if os(tvOS)
|
||||
600
|
||||
#else
|
||||
.infinity
|
||||
#endif
|
||||
}
|
||||
|
||||
private var emptyPlaylistsMessage: some View {
|
||||
VStack(spacing: 20) {
|
||||
Text("You have no Playlists")
|
||||
.font(.title2.bold())
|
||||
Text("Open \"Playlists\" tab to create new one")
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
}
|
||||
|
||||
private var header: some View {
|
||||
HStack(alignment: .center) {
|
||||
Text("Add to Playlist")
|
||||
.font(.title2.bold())
|
||||
|
||||
Spacer()
|
||||
|
||||
#if !os(tvOS)
|
||||
Button("Cancel") {
|
||||
dismiss()
|
||||
}
|
||||
.keyboardShortcut(.cancelAction)
|
||||
#endif
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
private var form: some View {
|
||||
VStack(alignment: formAlignment) {
|
||||
VStack(alignment: .leading, spacing: 10) {
|
||||
Text(video.title)
|
||||
.font(.headline)
|
||||
Text(video.author)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(.vertical, 40)
|
||||
|
||||
VStack(alignment: formAlignment) {
|
||||
#if os(tvOS)
|
||||
|
||||
selectPlaylistButton
|
||||
#else
|
||||
Picker("Playlist", selection: $model.selectedPlaylistID) {
|
||||
ForEach(model.all) { playlist in
|
||||
Text(playlist.title).tag(playlist.id)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: 500)
|
||||
#if os(iOS)
|
||||
.pickerStyle(.inline)
|
||||
#elseif os(macOS)
|
||||
.labelsHidden()
|
||||
|
||||
#endif
|
||||
#endif
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
private var formAlignment: HorizontalAlignment {
|
||||
#if os(tvOS)
|
||||
.trailing
|
||||
#else
|
||||
.center
|
||||
#endif
|
||||
}
|
||||
|
||||
private var footer: some View {
|
||||
HStack {
|
||||
Spacer()
|
||||
Button("Add to Playlist", action: addToPlaylist)
|
||||
#if !os(tvOS)
|
||||
.keyboardShortcut(.defaultAction)
|
||||
#endif
|
||||
.disabled(model.currentPlaylist.isNil)
|
||||
.padding(.top, 30)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
private var footerAlignment: HorizontalAlignment {
|
||||
#if os(tvOS)
|
||||
.trailing
|
||||
#else
|
||||
.leading
|
||||
#endif
|
||||
}
|
||||
|
||||
private var selectPlaylistButton: some View {
|
||||
Button(model.currentPlaylist?.title ?? "Select playlist") {
|
||||
guard model.currentPlaylist != nil else {
|
||||
return
|
||||
}
|
||||
|
||||
model.selectedPlaylistID = model.all.next(after: model.currentPlaylist!)!.id
|
||||
}
|
||||
.contextMenu {
|
||||
ForEach(model.all) { playlist in
|
||||
Button(playlist.title) {
|
||||
model.selectedPlaylistID = playlist.id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func addToPlaylist() {
|
||||
guard model.currentPlaylist != nil else {
|
||||
return
|
||||
}
|
||||
|
||||
model.addVideoToCurrentPlaylist(videoID: video.id) {
|
||||
dismiss()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct AddToPlaylistView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
AddToPlaylistView(video: Video.fixture)
|
||||
.environmentObject(PlaylistsModel([Playlist.fixture]))
|
||||
.environmentObject(SubscriptionsModel())
|
||||
.environmentObject(NavigationModel())
|
||||
}
|
||||
}
|
@@ -1,20 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct CoverSectionRowView<ControlContent: View>: View {
|
||||
let label: String?
|
||||
let controlView: ControlContent
|
||||
|
||||
init(_ label: String? = nil, @ViewBuilder controlView: @escaping () -> ControlContent) {
|
||||
self.label = label
|
||||
self.controlView = controlView()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
HStack {
|
||||
Text(label ?? "")
|
||||
|
||||
Spacer()
|
||||
controlView
|
||||
}
|
||||
}
|
||||
}
|
@@ -1,52 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct CoverSectionView<Content: View>: View {
|
||||
let title: String?
|
||||
|
||||
let actionsView: Content
|
||||
let divider: Bool
|
||||
let inline: Bool
|
||||
|
||||
init(_ title: String? = nil, divider: Bool = true, inline: Bool = false, @ViewBuilder actionsView: @escaping () -> Content) {
|
||||
self.title = title
|
||||
self.divider = divider
|
||||
self.inline = inline
|
||||
self.actionsView = actionsView()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading) {
|
||||
if inline {
|
||||
HStack {
|
||||
if title != nil {
|
||||
sectionTitle
|
||||
}
|
||||
|
||||
Spacer()
|
||||
actionsView
|
||||
}
|
||||
} else if title != nil {
|
||||
sectionTitle
|
||||
}
|
||||
|
||||
if !inline {
|
||||
actionsView
|
||||
}
|
||||
}
|
||||
|
||||
if divider {
|
||||
Divider()
|
||||
.padding(.vertical)
|
||||
}
|
||||
}
|
||||
|
||||
var sectionTitle: some View {
|
||||
Text(title ?? "")
|
||||
|
||||
.font(.title2)
|
||||
#if os(macOS)
|
||||
.bold()
|
||||
#endif
|
||||
.padding(.bottom)
|
||||
}
|
||||
}
|
@@ -73,37 +73,13 @@ struct PlaylistFormView: View {
|
||||
#endif
|
||||
|
||||
#else
|
||||
HStack {
|
||||
Spacer()
|
||||
|
||||
VStack {
|
||||
Spacer()
|
||||
|
||||
CoverSectionView(editing ? "Edit Playlist" : "Create Playlist") {
|
||||
CoverSectionRowView("Name") {
|
||||
TextField("Playlist Name", text: $name, onCommit: validate)
|
||||
.frame(maxWidth: 450)
|
||||
}
|
||||
|
||||
CoverSectionRowView("Visibility") { visibilityButton }
|
||||
}
|
||||
|
||||
CoverSectionRowView {
|
||||
Button("Save", action: submitForm).disabled(!valid)
|
||||
}
|
||||
|
||||
if editing {
|
||||
CoverSectionView("Delete Playlist", divider: false, inline: true) { deletePlaylistButton }
|
||||
.padding(.top, 50)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
VStack {
|
||||
Group {
|
||||
header
|
||||
form
|
||||
}
|
||||
.frame(maxWidth: 800)
|
||||
|
||||
Spacer()
|
||||
.frame(maxWidth: 1000)
|
||||
}
|
||||
.background(.thinMaterial)
|
||||
.onAppear {
|
||||
guard editing else {
|
||||
return
|
||||
@@ -114,9 +90,66 @@ struct PlaylistFormView: View {
|
||||
|
||||
validate()
|
||||
}
|
||||
|
||||
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
|
||||
.background(.thickMaterial)
|
||||
#endif
|
||||
}
|
||||
|
||||
var header: some View {
|
||||
HStack(alignment: .center) {
|
||||
Text(editing ? "Edit Playlist" : "Create Playlist")
|
||||
.font(.title2.bold())
|
||||
|
||||
Spacer()
|
||||
|
||||
Button("Cancel") {
|
||||
dismiss()
|
||||
}
|
||||
#if !os(tvOS)
|
||||
.keyboardShortcut(.cancelAction)
|
||||
#endif
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
var form: some View {
|
||||
VStack(alignment: .trailing) {
|
||||
VStack {
|
||||
Text("Name")
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
|
||||
TextField("Playlist Name", text: $name, onCommit: validate)
|
||||
}
|
||||
|
||||
HStack {
|
||||
Text("Visibility")
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
|
||||
visibilityButton
|
||||
}
|
||||
.padding(.top, 10)
|
||||
|
||||
HStack {
|
||||
Spacer()
|
||||
|
||||
Button("Save", action: submitForm).disabled(!valid)
|
||||
}
|
||||
.padding(.top, 40)
|
||||
|
||||
if editing {
|
||||
Divider()
|
||||
HStack {
|
||||
Text("Delete playlist")
|
||||
.font(.title2.bold())
|
||||
Spacer()
|
||||
deletePlaylistButton
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
func initializeForm() {
|
||||
focused = true
|
||||
|
||||
|
@@ -3,9 +3,10 @@ import Siesta
|
||||
import SwiftUI
|
||||
|
||||
struct PlaylistsView: View {
|
||||
@StateObject private var store = Store<[Playlist]>()
|
||||
@EnvironmentObject<PlaylistsModel> private var model
|
||||
|
||||
@EnvironmentObject<InvidiousAPI> private var api
|
||||
@EnvironmentObject<NavigationModel> private var navigation
|
||||
|
||||
@State private var showingNewPlaylist = false
|
||||
@State private var createdPlaylist: Playlist?
|
||||
@@ -13,14 +14,11 @@ struct PlaylistsView: View {
|
||||
@State private var showingEditPlaylist = false
|
||||
@State private var editedPlaylist: Playlist?
|
||||
|
||||
@Default(.selectedPlaylistID) private var selectedPlaylistID
|
||||
|
||||
var resource: Resource {
|
||||
api.playlists
|
||||
}
|
||||
@State private var showingAddToPlaylist = false
|
||||
@State private var videoIDToAddToPlaylist = ""
|
||||
|
||||
var videos: [Video] {
|
||||
currentPlaylist?.videos ?? []
|
||||
model.currentPlaylist?.videos ?? []
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
@@ -31,9 +29,9 @@ struct PlaylistsView: View {
|
||||
.font(.system(size: 28))
|
||||
|
||||
#endif
|
||||
if currentPlaylist != nil, videos.isEmpty {
|
||||
if model.currentPlaylist != nil, videos.isEmpty {
|
||||
hintText("Playlist is empty\n\nTap and hold on a video and then tap \"Add to Playlist\"")
|
||||
} else if store.collection.isEmpty {
|
||||
} else if model.all.isEmpty {
|
||||
hintText("You have no playlists\n\nTap on \"New Playlist\" to create one")
|
||||
} else {
|
||||
VideosCellsVertical(videos: videos)
|
||||
@@ -58,11 +56,11 @@ struct PlaylistsView: View {
|
||||
.toolbar {
|
||||
ToolbarItemGroup {
|
||||
#if !os(iOS)
|
||||
if !store.collection.isEmpty {
|
||||
if !model.isEmpty {
|
||||
selectPlaylistButton
|
||||
}
|
||||
|
||||
if currentPlaylist != nil {
|
||||
if model.currentPlaylist != nil {
|
||||
editPlaylistButton
|
||||
}
|
||||
#endif
|
||||
@@ -72,7 +70,7 @@ struct PlaylistsView: View {
|
||||
#if os(iOS)
|
||||
ToolbarItemGroup(placement: .bottomBar) {
|
||||
Group {
|
||||
if store.collection.isEmpty {
|
||||
if model.isEmpty {
|
||||
Text("No Playlists")
|
||||
.foregroundColor(.secondary)
|
||||
} else {
|
||||
@@ -84,7 +82,7 @@ struct PlaylistsView: View {
|
||||
|
||||
Spacer()
|
||||
|
||||
if currentPlaylist != nil {
|
||||
if model.currentPlaylist != nil {
|
||||
editPlaylistButton
|
||||
}
|
||||
}
|
||||
@@ -93,17 +91,13 @@ struct PlaylistsView: View {
|
||||
#endif
|
||||
}
|
||||
.onAppear {
|
||||
resource.addObserver(store)
|
||||
|
||||
resource.loadIfNeeded()?.onSuccess { _ in
|
||||
selectPlaylist(selectedPlaylistID)
|
||||
}
|
||||
model.load()
|
||||
}
|
||||
}
|
||||
|
||||
var toolbar: some View {
|
||||
HStack {
|
||||
if store.collection.isEmpty {
|
||||
if model.isEmpty {
|
||||
Text("No Playlists")
|
||||
.foregroundColor(.secondary)
|
||||
} else {
|
||||
@@ -117,7 +111,7 @@ struct PlaylistsView: View {
|
||||
Spacer()
|
||||
#endif
|
||||
|
||||
if currentPlaylist != nil {
|
||||
if model.currentPlaylist != nil {
|
||||
editPlaylistButton
|
||||
}
|
||||
|
||||
@@ -142,17 +136,15 @@ struct PlaylistsView: View {
|
||||
#endif
|
||||
}
|
||||
|
||||
func selectPlaylist(_ id: String?) {
|
||||
selectedPlaylistID = id
|
||||
}
|
||||
|
||||
func selectCreatedPlaylist() {
|
||||
guard createdPlaylist != nil else {
|
||||
return
|
||||
}
|
||||
|
||||
resource.load().onSuccess { _ in
|
||||
self.selectPlaylist(createdPlaylist?.id)
|
||||
model.load(force: true) {
|
||||
if let id = createdPlaylist?.id {
|
||||
self.model.selectPlaylist(id)
|
||||
}
|
||||
|
||||
self.createdPlaylist = nil
|
||||
}
|
||||
@@ -160,41 +152,37 @@ struct PlaylistsView: View {
|
||||
|
||||
func selectEditedPlaylist() {
|
||||
if editedPlaylist.isNil {
|
||||
selectPlaylist(nil)
|
||||
model.selectPlaylist(nil)
|
||||
}
|
||||
|
||||
resource.load().onSuccess { _ in
|
||||
selectPlaylist(editedPlaylist?.id)
|
||||
model.load(force: true) {
|
||||
model.selectPlaylist(editedPlaylist?.id)
|
||||
|
||||
self.editedPlaylist = nil
|
||||
}
|
||||
}
|
||||
|
||||
var currentPlaylist: Playlist? {
|
||||
store.collection.first { $0.id == selectedPlaylistID } ?? store.collection.first
|
||||
}
|
||||
|
||||
var selectPlaylistButton: some View {
|
||||
#if os(tvOS)
|
||||
Button(currentPlaylist?.title ?? "Select playlist") {
|
||||
guard currentPlaylist != nil else {
|
||||
Button(model.currentPlaylist?.title ?? "Select playlist") {
|
||||
guard model.currentPlaylist != nil else {
|
||||
return
|
||||
}
|
||||
|
||||
selectPlaylist(store.collection.next(after: currentPlaylist!)?.id)
|
||||
model.selectPlaylist(model.all.next(after: model.currentPlaylist!)?.id)
|
||||
}
|
||||
.contextMenu {
|
||||
ForEach(store.collection) { playlist in
|
||||
ForEach(model.all) { playlist in
|
||||
Button(playlist.title) {
|
||||
selectPlaylist(playlist.id)
|
||||
model.selectPlaylist(playlist.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
#else
|
||||
Menu(currentPlaylist?.title ?? "Select playlist") {
|
||||
ForEach(store.collection) { playlist in
|
||||
Button(action: { selectPlaylist(playlist.id) }) {
|
||||
if playlist == self.currentPlaylist {
|
||||
Menu(model.currentPlaylist?.title ?? "Select playlist") {
|
||||
ForEach(model.all) { playlist in
|
||||
Button(action: { model.selectPlaylist(playlist.id) }) {
|
||||
if playlist == model.currentPlaylist {
|
||||
Label(playlist.title, systemImage: "checkmark")
|
||||
} else {
|
||||
Text(playlist.title)
|
||||
@@ -207,7 +195,7 @@ struct PlaylistsView: View {
|
||||
|
||||
var editPlaylistButton: some View {
|
||||
Button(action: {
|
||||
self.editedPlaylist = self.currentPlaylist
|
||||
self.editedPlaylist = self.model.currentPlaylist
|
||||
self.showingEditPlaylist = true
|
||||
}) {
|
||||
HStack(spacing: 8) {
|
||||
|
Reference in New Issue
Block a user