Improve video banner and playback queue view

This commit is contained in:
Arkadiusz Fal 2021-10-23 12:13:05 +02:00
parent 8a43ed9503
commit 28709a2c80
8 changed files with 124 additions and 103 deletions

View File

@ -26,7 +26,7 @@ final class PlaylistsModel: ObservableObject {
}
func load(force: Bool = false, onSuccess: @escaping () -> Void = {}) {
let request = force ? resource.load() : resource.loadIfNeeded()
let request = force ? resource?.load() : resource?.loadIfNeeded()
request?
.onSuccess { resource in
@ -66,8 +66,8 @@ final class PlaylistsModel: ObservableObject {
selectedPlaylistID = id ?? ""
}
private var resource: Resource {
accounts.api.playlists!
private var resource: Resource? {
accounts.api.playlists
}
private var selectedPlaylist: Playlist? {

View File

@ -292,7 +292,6 @@
37CC3F47270CE30600608308 /* PlayerQueueItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CC3F44270CE30600608308 /* PlayerQueueItem.swift */; };
37CC3F4C270CFE1700608308 /* PlayerQueueView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CC3F4B270CFE1700608308 /* PlayerQueueView.swift */; };
37CC3F4D270CFE1700608308 /* PlayerQueueView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CC3F4B270CFE1700608308 /* PlayerQueueView.swift */; };
37CC3F4E270CFE1700608308 /* PlayerQueueView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CC3F4B270CFE1700608308 /* PlayerQueueView.swift */; };
37CC3F50270D010D00608308 /* VideoBanner.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CC3F4F270D010D00608308 /* VideoBanner.swift */; };
37CC3F51270D010D00608308 /* VideoBanner.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CC3F4F270D010D00608308 /* VideoBanner.swift */; };
37CC3F52270D010D00608308 /* VideoBanner.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37CC3F4F270D010D00608308 /* VideoBanner.swift */; };
@ -1714,7 +1713,6 @@
37AAF2A226741C97007FC770 /* SubscriptionsView.swift in Sources */,
37484C1B26FC837400287258 /* PlaybackSettingsView.swift in Sources */,
372915E82687E3B900F5A35B /* Defaults.swift in Sources */,
37CC3F4E270CFE1700608308 /* PlayerQueueView.swift in Sources */,
37BAB54C269B39FD00E75ED1 /* TVNavigationView.swift in Sources */,
3797758D2689345500DD52A8 /* Store.swift in Sources */,
37484C2F26FC844700287258 /* AccountsSettingsView.swift in Sources */,

View File

@ -8,14 +8,21 @@ struct PlayerQueueView: View {
var body: some View {
List {
playingNext
playedPreviously
Group {
playingNext
playedPreviously
}
.padding(.vertical, 5)
.listRowInsets(EdgeInsets())
#if os(iOS)
.padding(.horizontal, 10)
#endif
}
#if os(macOS)
.listStyle(.inset)
#elseif os(iOS)
.listStyle(.insetGrouped)
.listStyle(.grouped)
#else
.listStyle(.plain)
#endif
@ -44,23 +51,22 @@ struct PlayerQueueView: View {
}
var playedPreviously: some View {
Section(header: Text("Played Previously")) {
if player.history.isEmpty {
Text("History is empty")
.foregroundColor(.secondary)
}
ForEach(player.history) { item in
PlayerQueueRow(item: item, history: true, fullScreen: $fullScreen)
.contextMenu {
removeButton(item, history: true)
removeAllButton(history: true)
Group {
if !player.history.isEmpty {
Section(header: Text("Played Previously")) {
ForEach(player.history) { item in
PlayerQueueRow(item: item, history: true, fullScreen: $fullScreen)
.contextMenu {
removeButton(item, history: true)
removeAllButton(history: true)
}
#if os(iOS)
.swipeActions(edge: .trailing, allowsFullSwipe: true) {
removeButton(item, history: true)
}
#endif
}
#if os(iOS)
.swipeActions(edge: .trailing, allowsFullSwipe: true) {
removeButton(item, history: true)
}
#endif
}
}
}
}

View File

@ -6,7 +6,6 @@ final class PlayerViewController: UIViewController {
var playerLoaded = false
var playerModel: PlayerModel!
var playerViewController = AVPlayerViewController()
var shouldResume = false
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
@ -73,15 +72,9 @@ extension PlayerViewController: AVPlayerViewControllerDelegate {
false
}
func playerViewControllerWillBeginDismissalTransition(_: AVPlayerViewController) {
shouldResume = playerModel.isPlaying
}
func playerViewControllerWillBeginDismissalTransition(_: AVPlayerViewController) {}
func playerViewControllerDidEndDismissalTransition(_: AVPlayerViewController) {
if shouldResume {
playerModel.play()
}
dismiss(animated: false)
}

View File

@ -87,6 +87,10 @@ struct VideoDetails: View {
}
}
.onAppear {
if video.isNil {
currentPage = .queue
}
guard video != nil, accounts.app.supportsSubscriptions else {
subscribed = false
return
@ -94,6 +98,15 @@ struct VideoDetails: View {
subscribed = subscriptions.isSubscribing(video!.channel.id)
}
.onChange(of: sidebarQueue) { queue in
#if !os(macOS)
if queue {
currentPage = .details
} else {
currentPage = .queue
}
#endif
}
.edgesIgnoringSafeArea(.horizontal)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
}
@ -112,11 +125,6 @@ struct VideoDetails: View {
} else {
Text("Not playing")
.foregroundColor(.secondary)
.onAppear {
#if !os(macOS)
currentPage = .queue
#endif
}
}
Spacer()

View File

@ -3,15 +3,16 @@ import Siesta
import SwiftUI
struct PlaylistsView: View {
@EnvironmentObject<PlayerModel> private var player
@EnvironmentObject<PlaylistsModel> private var model
@State private var showingNewPlaylist = false
@State private var createdPlaylist: Playlist?
@State private var showingEditPlaylist = false
@State private var editedPlaylist: Playlist?
@EnvironmentObject<AccountsModel> private var accounts
@EnvironmentObject<PlayerModel> private var player
@EnvironmentObject<PlaylistsModel> private var model
@Namespace private var focusNamespace
var items: [ContentItem] {
@ -101,6 +102,9 @@ struct PlaylistsView: View {
.onAppear {
model.load()
}
.onChange(of: accounts.current) { _ in
model.load(force: true)
}
}
#if os(tvOS)

View File

@ -15,15 +15,13 @@ struct VideoBanner: View {
}
var body: some View {
HStack(alignment: .top, spacing: 12) {
HStack(alignment: stackAlignment, spacing: 12) {
VStack(spacing: thumbnailStackSpacing) {
smallThumbnail
if !playbackTime.isNil {
ProgressView(value: progressViewValue, total: progressViewTotal)
.progressViewStyle(.linear)
.frame(maxWidth: thumbnailWidth)
}
#if !os(tvOS)
progressView
#endif
}
VStack(alignment: .leading, spacing: 4) {
Text(video.title)
@ -38,6 +36,10 @@ struct VideoBanner: View {
Spacer()
#if os(tvOS)
progressView
#endif
if let time = (videoDuration ?? video.length).formattedAsPlaybackTime() {
Text(time)
.fontWeight(.light)
@ -52,11 +54,19 @@ struct VideoBanner: View {
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 100, alignment: .center)
}
private var stackAlignment: VerticalAlignment {
#if os(macOS)
playbackTime.isNil ? .center : .top
#else
.center
#endif
}
private var thumbnailStackSpacing: Double {
#if os(tvOS)
8
#else
3
2
#endif
}
@ -68,22 +78,32 @@ struct VideoBanner: View {
}
.indicator(.activity)
#if os(tvOS)
.frame(width: thumbnailWidth, height: 100)
.frame(width: thumbnailWidth, height: 140)
.mask(RoundedRectangle(cornerRadius: 12))
#else
.frame(width: thumbnailWidth, height: 50)
.frame(width: thumbnailWidth, height: 60)
.mask(RoundedRectangle(cornerRadius: 6))
#endif
}
private var thumbnailWidth: Double {
#if os(tvOS)
177
230
#else
88
100
#endif
}
private var progressView: some View {
Group {
if !playbackTime.isNil {
ProgressView(value: progressViewValue, total: progressViewTotal)
.progressViewStyle(.linear)
.frame(maxWidth: thumbnailWidth)
}
}
}
private var progressViewValue: Double {
[playbackTime?.seconds, videoDuration].compactMap { $0 }.min() ?? 0
}

View File

@ -16,12 +16,10 @@ struct NowPlayingView: View {
}
var content: some View {
ScrollView(.vertical) {
VStack(alignment: .leading) {
List {
Group {
if !inInfoViewController, let item = player.currentItem {
Group {
header("Now Playing")
Section(header: Text("Now Playing")) {
Button {
player.presentPlayer()
} label: {
@ -29,72 +27,66 @@ struct NowPlayingView: View {
}
}
.onPlayPauseCommand(perform: player.togglePlay)
.padding(.bottom, 20)
}
header("Playing Next")
if player.queue.isEmpty {
Spacer()
Text("Playback queue is empty")
.padding([.vertical, .leading], 40)
.foregroundColor(.secondary)
}
ForEach(player.queue) { item in
Button {
player.advanceToItem(item)
player.presentPlayer()
} label: {
VideoBanner(video: item.video)
Section(header: Text("Playing Next")) {
if player.queue.isEmpty {
Text("Playback queue is empty")
.padding([.vertical, .leading], 40)
.foregroundColor(.secondary)
}
.contextMenu {
Button("Delete", role: .destructive) {
player.remove(item)
ForEach(player.queue) { item in
Button {
player.advanceToItem(item)
player.presentPlayer()
} label: {
VideoBanner(video: item.video)
}
.contextMenu {
Button("Delete", role: .destructive) {
player.remove(item)
}
}
}
}
header("Played Previously")
if !player.history.isEmpty {
Section(header: Text("Played Previously")) {
ForEach(player.history) { item in
Button {
player.playHistory(item)
player.presentPlayer()
} label: {
VideoBanner(video: item.video, playbackTime: item.playbackTime, videoDuration: item.videoDuration)
}
.contextMenu {
Button("Delete", role: .destructive) {
player.removeHistory(item)
}
if player.history.isEmpty {
Spacer()
Text("History is empty")
.padding([.vertical, .leading], 40)
.foregroundColor(.secondary)
}
ForEach(player.history) { item in
Button {
player.playHistory(item)
player.presentPlayer()
} label: {
VideoBanner(video: item.video, playbackTime: item.playbackTime, videoDuration: item.videoDuration)
}
.contextMenu {
Button("Delete", role: .destructive) {
player.removeHistory(item)
}
Button("Delete History", role: .destructive) {
player.removeHistoryItems()
Button("Delete History", role: .destructive) {
player.removeHistoryItems()
}
}
}
}
}
}
.padding(.vertical)
.padding(.horizontal, 40)
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 20))
.padding(.vertical, 20)
// .padding(.horizontal, 40)
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 260, maxHeight: .infinity, alignment: .leading)
.padding(.horizontal, inInfoViewController ? 40 : 0)
.listStyle(.grouped)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 560, maxHeight: .infinity, alignment: .leading)
}
func header(_ text: String) -> some View {
Text(text)
.font((inInfoViewController ? Font.system(size: 40) : .title3).bold())
.foregroundColor(.secondary)
.padding(.leading, 40)
// .padding(.leading, 40)
}
}