Watch Next behavior and settings

2025-08-09 20:24:06 +00:00 · 2022-12-18 19:39:03 +01:00
parent b90c856e21
commit 39fc23c5dc
23 changed files with 487 additions and 451 deletions
--- a/Shared/Constants.swift
+++ b/Shared/Constants.swift
@@ -43,4 +43,12 @@ struct Constants {
            true
        #endif
    }
+
+    static var nextSystemImage: String {
+        if #available(iOS 16, macOS 13, tvOS 16, *) {
+            return "film.stack"
+        } else {
+            return "list.and.film"
+        }
+    }
 }
--- a/Shared/Defaults.swift
+++ b/Shared/Defaults.swift
@@ -107,8 +107,6 @@ extension Defaults.Keys {
    static let chargingNonCellularProfile = Key<QualityProfile.ID>("chargingNonCellularProfile", default: chargingNonCellularProfileDefault)
    static let forceAVPlayerForLiveStreams = Key<Bool>("forceAVPlayerForLiveStreams", default: true)
    static let playerSidebar = Key<PlayerSidebarSetting>("playerSidebar", default: .defaultValue)
-    static let showInspector = Key<ShowInspectorSetting>("showInspector", default: .onlyLocal)
-    static let detailsToolbarPosition = Key<DetailsToolbarPositionSetting>("detailsToolbarPosition", default: .center)
    static let playerInstanceID = Key<Instance.ID?>("playerInstance")

    #if os(iOS)
@@ -142,20 +140,6 @@ extension Defaults.Keys {
    #if !os(macOS)
        static let pauseOnEnteringBackground = Key<Bool>("pauseOnEnteringBackground", default: true)
    #endif
-    #if os(tvOS)
-        static let closeLastItemOnPlaybackEndDefault = true
-    #else
-        static let closeLastItemOnPlaybackEndDefault = false
-    #endif
-    static let closeLastItemOnPlaybackEnd = Key<Bool>("closeLastItemOnPlaybackEnd", default: closeLastItemOnPlaybackEndDefault)
-
-    #if os(tvOS)
-        static let closePlayerOnItemCloseDefault = true
-    #else
-        static let closePlayerOnItemCloseDefault = false
-    #endif
-    static let closePlayerOnItemClose = Key<Bool>("closePlayerOnItemClose", default: closePlayerOnItemCloseDefault)
-
    static let closePiPOnNavigation = Key<Bool>("closePiPOnNavigation", default: false)
    static let closePiPOnOpeningPlayer = Key<Bool>("closePiPOnOpeningPlayer", default: false)
    #if !os(macOS)
@@ -198,7 +182,6 @@ extension Defaults.Keys {
        static let playerDetailsPageButtonLabelStyleDefault = UIDevice.current.userInterfaceIdiom == .phone ? ButtonLabelStyle.iconOnly : .iconAndText
    #endif
    static let playerActionsButtonLabelStyle = Key<ButtonLabelStyle>("playerActionsButtonLabelStyle", default: .iconAndText)
-    static let playerDetailsPageButtonLabelStyle = Key<ButtonLabelStyle>("playerDetailsPageButtonLabelStyle", default: playerDetailsPageButtonLabelStyleDefault)

    static let systemControlsCommands = Key<SystemControlsCommands>("systemControlsCommands", default: .restartAndAdvanceToNext)
    static let mpvCacheSecs = Key<String>("mpvCacheSecs", default: "120")
@@ -216,6 +199,10 @@ extension Defaults.Keys {
    static let playlistListingStyle = Key<ListingStyle>("playlistListingStyle", default: .cells)
    static let channelPlaylistListingStyle = Key<ListingStyle>("channelPlaylistListingStyle", default: .cells)
    static let searchListingStyle = Key<ListingStyle>("searchListingStyle", default: .cells)
+
+    static let openWatchNextOnFinishedWatching = Key<Bool>("openWatchNextOnFinishedWatching", default: true)
+    static let openWatchNextOnClose = Key<Bool>("openWatchNextOnClose", default: false)
+    static let openWatchNextOnFinishedWatchingDelay = Key<String>("openWatchNextOnFinishedWatchingDelay", default: "5")
 }

 enum ResolutionSetting: String, CaseIterable, Defaults.Serializable {
--- a/Shared/Navigation/AppSidebarSubscriptions.swift
+++ b/Shared/Navigation/AppSidebarSubscriptions.swift
@@ -15,17 +15,18 @@ struct AppSidebarSubscriptions: View {
                    LazyView(ChannelVideosView(channel: channel))
                } label: {
                    HStack {
-                        if channel.thumbnailURL != nil {
+                        if channel.thumbnailURLOrCached != nil {
                            ChannelAvatarView(channel: channel, subscribedBadge: false)
                                .frame(width: Constants.sidebarChannelThumbnailSize, height: Constants.sidebarChannelThumbnailSize)
-
                            Text(channel.name)
                        } else {
                            Label(channel.name, systemImage: RecentsModel.symbolSystemImage(channel.name))
                        }

-                        feedCount.unwatchedByChannelText(channel)
+                        Spacer()
                    }
+                    .backport
+                    .badge(feedCount.unwatchedByChannelText(channel))
                }
                .contextMenu {
                    if subscriptions.isSubscribing(channel.id) {
--- a/Shared/Player/Controls/PlayerControls.swift
+++ b/Shared/Player/Controls/PlayerControls.swift
@@ -26,12 +26,9 @@ struct PlayerControls: View {
        @FocusState private var focusedField: Field?
    #endif

-    #if !os(macOS)
-        @Default(.closePlayerOnItemClose) private var closePlayerOnItemClose
-    #endif
-
    @Default(.playerControlsLayout) private var regularPlayerControlsLayout
    @Default(.fullScreenPlayerControlsLayout) private var fullScreenPlayerControlsLayout
+    @Default(.openWatchNextOnClose) private var openWatchNextOnClose

    private let controlsOverlayModel = ControlOverlaysModel.shared

@@ -164,6 +161,7 @@ struct PlayerControls: View {
            #if os(tvOS)
                .onChange(of: model.presentingControls) { newValue in
                    if newValue { focusedField = .play }
+                    else { focusedField = nil }
                }
                .onChange(of: focusedField) { _ in model.resetTimer() }
            #else
@@ -222,6 +220,8 @@ struct PlayerControls: View {
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .transition(.opacity)
                .animation(.default)
+        } else if player.videoForDisplay == nil {
+            Color.black
        }
    }

@@ -320,10 +320,12 @@ struct PlayerControls: View {

    private var closeVideoButton: some View {
        button("Close", systemImage: "xmark") {
-//            TODO: Setting
-//            WatchNextViewModel.shared.prepareForEmptyPlayerPlaceholder(player.currentItem)
-//            WatchNextViewModel.shared.open()
-            player.closeCurrentItem()
+            if openWatchNextOnClose {
+                player.pause()
+                WatchNextViewModel.shared.closed(player.currentItem)
+            } else {
+                player.closeCurrentItem()
+            }
        }
        #if os(tvOS)
        .focused($focusedField, equals: .close)
--- a/Shared/Player/Controls/VideoDetailsOverlay.swift
+++ b/Shared/Player/Controls/VideoDetailsOverlay.swift
@@ -5,7 +5,7 @@ struct VideoDetailsOverlay: View {
    @ObservedObject private var controls = PlayerControlsModel.shared

    var body: some View {
-        VideoDetails(video: PlayerModel.shared.currentVideo, fullScreen: fullScreenBinding)
+        VideoDetails(video: controls.player.videoForDisplay, fullScreen: fullScreenBinding)
            .clipShape(RoundedRectangle(cornerRadius: 4))
    }

--- a/Details/VideoActions.swift
+++ b/Details/VideoActions.swift
@@ -9,13 +9,14 @@ struct VideoActions: View {

    var video: Video?

+    @Default(.openWatchNextOnClose) private var openWatchNextOnClose
    @Default(.playerActionsButtonLabelStyle) private var playerActionsButtonLabelStyle

    var body: some View {
-        HStack {
+        HStack(spacing: 6) {
            if let video {
                #if !os(tvOS)
-                    if !video.isLocal || video.localStreamIsRemoteURL {
+                    if video.isShareable {
                        ShareButton(contentItem: .init(video: video)) {
                            actionButton("Share", systemImage: "square.and.arrow.up")
                        }
@@ -50,21 +51,29 @@ struct VideoActions: View {
                        Spacer()
                    }
                }
+            } else {
+                Spacer()
            }
+            actionButton("Next", systemImage: Constants.nextSystemImage) {
+                WatchNextViewModel.shared.userInteractedOpen(player.currentItem)
+            }
+
+            Spacer()

            actionButton("Hide", systemImage: "chevron.down") {
                player.hide(animate: true)
            }

            Spacer()
+
            actionButton("Close", systemImage: "xmark") {
-//                TODO: setting
-//                    player.pause()
-//                    WatchNextViewModel.shared.prepareForEmptyPlayerPlaceholder(player.currentItem)
-//                    WatchNextViewModel.shared.open()
-                player.closeCurrentItem()
+                if openWatchNextOnClose {
+                    player.pause()
+                    WatchNextViewModel.shared.closed(player.currentItem)
+                } else {
+                    player.closeCurrentItem()
+                }
            }
-            .disabled(player.currentItem == nil)
        }
        .padding(.horizontal)
        .multilineTextAlignment(.center)
--- a/Details/VideoDetails.swift
+++ b/Details/VideoDetails.swift
@@ -27,10 +27,9 @@ struct VideoDetails: View {

    @ObservedObject private var accounts = AccountsModel.shared
    let comments = CommentsModel.shared
-    var player = PlayerModel.shared
+    @ObservedObject private var player = PlayerModel.shared

    @Default(.enableReturnYouTubeDislike) private var enableReturnYouTubeDislike
-    @Default(.detailsToolbarPosition) private var detailsToolbarPosition
    @Default(.playerSidebar) private var playerSidebar

    var body: some View {
@@ -46,7 +45,7 @@ struct VideoDetails: View {
            )
            .animation(nil, value: player.currentItem)

-            VideoActions(video: video)
+            VideoActions(video: player.videoForDisplay)
                .animation(nil, value: player.currentItem)

            detailsPage
--- a/Details/VideoDetailsTool.swift
+++ b/Details/VideoDetailsTool.swift
@@ -1,46 +0,0 @@
-import Defaults
-import Foundation
-
-struct VideoDetailsTool: Identifiable {
-    static let all = [
-        Self(icon: "info.circle", name: "Info", page: .info),
-        Self(icon: "wand.and.stars", name: "Inspector", page: .inspector),
-        Self(icon: "bookmark", name: "Chapters", page: .chapters),
-        Self(icon: "text.bubble", name: "Comments", page: .comments),
-        Self(icon: "rectangle.stack.fill", name: "Related", page: .related),
-        Self(icon: "list.number", name: "Queue", page: .queue)
-    ]
-
-    static func find(for page: VideoDetails.DetailsPage) -> Self? {
-        all.first { $0.page == page }
-    }
-
-    var id: String {
-        page.rawValue
-    }
-
-    var icon: String
-    var name: String
-    var toolPostion: CGRect = .zero
-    var page = VideoDetails.DetailsPage.info
-
-    func isAvailable(for video: Video?, sidebarQueue: Bool) -> Bool {
-        guard !YatteeApp.isForPreviews else {
-            return true
-        }
-        switch page {
-        case .info:
-            return true
-        case .inspector:
-            return video == nil || Defaults[.showInspector] == .always || video!.isLocal
-        case .chapters:
-            return video != nil && !video!.chapters.isEmpty
-        case .comments:
-            return video != nil && !video!.isLocal
-        case .related:
-            return !sidebarQueue && video != nil && !video!.isLocal
-        case .queue:
-            return !sidebarQueue
-        }
-    }
-}
--- a/Details/VideoDetailsToolbar.swift
+++ b/Details/VideoDetailsToolbar.swift
@@ -1,154 +0,0 @@
-import Defaults
-import SwiftUI
-
-struct VideoDetailsToolbar: View {
-    static let lowOpacity = 0.5
-    var video: Video?
-    @Binding var page: VideoDetails.DetailsPage
-    var sidebarQueue: Bool
-
-    @State private var tools = VideoDetailsTool.all
-
-    @State private var activeTool: VideoDetailsTool?
-    @State private var startedToolPosition: CGRect = .zero
-    @State private var opacity = 1.0
-
-    @ObservedObject private var player = PlayerModel.shared
-    @Default(.playerDetailsPageButtonLabelStyle) private var playerDetailsPageButtonLabelStyle
-
-    var body: some View {
-        VStack {
-            HStack(spacing: 12) {
-                ForEach($tools) { $tool in
-                    if $tool.wrappedValue.isAvailable(for: video, sidebarQueue: sidebarQueue) {
-                        ToolView(tool: $tool)
-                            .padding(.vertical, 10)
-                    }
-                }
-            }
-            .id(video?.id)
-            .onAppear {
-                activeTool = .find(for: page)
-            }
-            .onChange(of: page) { newValue in
-                activeTool = tools.first { $0.id == newValue.rawValue }
-            }
-            .coordinateSpace(name: "toolbarArea")
-            #if !os(tvOS)
-                .gesture(
-                    DragGesture(minimumDistance: 0)
-                        .onChanged { value in
-                            withAnimation(.linear(duration: 0.2)) {
-                                opacity = 1
-                            }
-
-                            guard let firstTool = tools.first else { return }
-                            if startedToolPosition == .zero {
-                                startedToolPosition = firstTool.toolPostion
-                            }
-                            let location = CGPoint(x: value.location.x, y: value.location.y)
-
-                            if let index = tools.firstIndex(where: { $0.toolPostion.contains(location) }),
-                               activeTool?.id != tools[index].id,
-                               tools[index].isAvailable(for: video, sidebarQueue: sidebarQueue)
-                            {
-                                withAnimation(.interpolatingSpring(stiffness: 230, damping: 22)) {
-                                    activeTool = tools[index]
-                                }
-                                withAnimation(.linear(duration: 0.25)) {
-                                    page = activeTool?.page ?? .info
-                                }
-                            }
-                        }
-                        .onEnded { _ in
-                            withAnimation(.interactiveSpring(response: 0.5, dampingFraction: 1, blendDuration: 1)) {
-                                startedToolPosition = .zero
-                            }
-                            Delay.by(2) {
-                                lowerOpacity()
-                            }
-                        }
-                )
-            #endif
-        }
-        #if !os(tvOS)
-        .onHover { hovering in
-            hovering ? resetOpacity(0.2) : lowerOpacity(0.2)
-        }
-        #endif
-        .onAppear {
-            Delay.by(2) { lowerOpacity() }
-        }
-        .opacity(opacity)
-        .background(
-            Rectangle()
-                .contentShape(Rectangle())
-                .foregroundColor(.clear)
-        )
-    }
-
-    func lowerOpacity(_ duration: Double = 1.0) {
-        withAnimation(.linear(duration: duration)) {
-            opacity = Self.lowOpacity
-        }
-    }
-
-    func resetOpacity(_ duration: Double = 1.0) {
-        withAnimation(.linear(duration: duration)) {
-            opacity = 1
-        }
-    }
-
-    @ViewBuilder func ToolView(tool: Binding<VideoDetailsTool>) -> some View {
-        HStack(spacing: 0) {
-            Image(systemName: tool.wrappedValue.icon)
-                .font(.title2)
-                .foregroundColor(.white)
-                .frame(width: 30, height: 30)
-                .layoutPriority(1)
-
-            if activeToolID == tool.wrappedValue.id,
-               playerDetailsPageButtonLabelStyle.text,
-               player.playerSize.width > 450
-            {
-                Text(tool.wrappedValue.name.localized())
-                    .font(.system(size: 14).bold())
-                    .padding(.trailing, 4)
-                    .foregroundColor(.white)
-                    .allowsTightening(true)
-                    .lineLimit(1)
-            }
-        }
-        .padding(.horizontal, 10)
-        .padding(.vertical, 6)
-        .background(
-            RoundedRectangle(cornerRadius: 10, style: .continuous)
-                .fill(activeToolID == tool.wrappedValue.id ? Color.accentColor : Color.secondary)
-        )
-        .background(
-            GeometryReader { proxy in
-                let frame = proxy.frame(in: .named("toolbarArea"))
-                Color.clear
-                    .preference(key: RectKey.self, value: frame)
-                    .onPreferenceChange(RectKey.self) { rect in
-                        tool.wrappedValue.toolPostion = rect
-                    }
-            }
-        )
-    }
-
-    var visibleToolsCount: Int {
-        tools.filter { $0.isAvailable(for: video, sidebarQueue: sidebarQueue) }.count
-    }
-
-    var activeToolID: VideoDetailsTool.ID {
-        activeTool?.id ?? "info"
-    }
-}
-
-struct VideoDetailsToolbar_Previews: PreviewProvider {
-    static var previews: some View {
-        VideoDetailsToolbar(page: .constant(.queue), sidebarQueue: false)
-            .injectFixtureEnvironmentObjects()
-    }
-}
--- a/Shared/Player/VideoPlayerView.swift
+++ b/Shared/Player/VideoPlayerView.swift
@@ -126,6 +126,11 @@ struct VideoPlayerView: View {
                }
            }
            .onAppear {
+                #if os(macOS)
+                    if player.videoForDisplay.isNil {
+                        player.hide()
+                    }
+                #endif
                viewDragOffset = 0

                Delay.by(0.2) {
@@ -178,6 +183,9 @@ struct VideoPlayerView: View {
        .backport
        .persistentSystemOverlays(!fullScreenPlayer)
        #endif
+        #if os(macOS)
+        .frame(minWidth: 1000, minHeight: 700)
+        #endif
    }

    func updateSidebarQueue() {
--- a/Shared/Player/WatchNextView.swift
+++ b/Shared/Player/WatchNextView.swift
@@ -14,15 +14,36 @@ struct WatchNextView: View {
            #if os(iOS)
                NavigationView {
                    watchNext
+                        .toolbar {
+                            ToolbarItem(placement: .principal) {
+                                watchNextMenu
+                            }
+                        }
                }
            #else
                VStack {
                    HStack {
-                        closeButton
+                        hideCloseButton
+                            .labelStyle(.iconOnly)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+
                        Spacer()
-                        reopenButton
+
+                        watchNextMenu
+                            .frame(maxWidth: .infinity)
+
+                        Spacer()
+
+                        HStack {
+                            if model.isRestartable {
+                                reopenButton
+                            }
+                        }
+                        .frame(maxWidth: .infinity, alignment: .trailing)
                    }
+                    #if os(macOS)
                    .padding()
+                    #endif
                    watchNext
                }
            #endif
@@ -32,143 +53,215 @@ struct WatchNextView: View {
        #else
        .background(Color.background)
        #endif
-        .opacity(model.presentingOutro ? 1 : 0)
+        .opacity(model.isPresenting ? 1 : 0)
    }

    var watchNext: some View {
        ScrollView {
            VStack(alignment: .leading) {
                if model.isAutoplaying,
-                   let item = nextFromTheQueue
+                   let item = model.nextFromTheQueue
                {
                    HStack {
-                        Text("Playing Next in 5...")
-                            .font(.headline)
+                        Text("Playing Next in \(Int(model.countdown.rounded()))...")
+                            .font(.headline.monospacedDigit())
                        Spacer()

                        Button {
-                            model.cancelAutoplay()
+                            model.keepFromAutoplaying()
                        } label: {
-                            Label("Cancel", systemImage: "xmark")
+                            Label("Cancel", systemImage: "pause.fill")
+                            #if os(iOS)
+                                .imageScale(.large)
+                                .padding([.vertical, .leading])
+                                .font(.headline.bold())
+                            #endif
                        }
                    }
+                    #if os(tvOS)
+                    .padding(.top, 10)
+                    #endif

                    PlayerQueueRow(item: item)
-                        .padding(.bottom, 10)
                }
+
                moreVideos
+                    .padding(.top, 15)
            }
            .padding(.horizontal)
        }
        #if os(iOS)
        .navigationBarTitleDisplayMode(.inline)
        #endif
-        .navigationTitle("Watch Next")
        #if !os(macOS)
-            .toolbar {
-                ToolbarItem(placement: .cancellationAction) {
-                    closeButton
-                }
-
-                ToolbarItem(placement: .primaryAction) {
-                    reopenButton
-                }
+        .navigationTitle(model.page.title)
+        .toolbar {
+            ToolbarItem(placement: .cancellationAction) {
+                hideCloseButton
            }
+
+            ToolbarItem(placement: .primaryAction) {
+                reopenButton
+            }
+        }
        #endif
    }

+    var watchNextMenu: some View {
+        #if os(tvOS)
+            Button {
+                model.page = model.page.next()
+            } label: {
+                menuLabel
+            }
+        #elseif os(macOS)
+            pagePicker
+                .modifier(SettingsPickerModifier())
+            #if os(macOS)
+                .frame(maxWidth: 150)
+            #endif
+        #else
+            Menu {
+                pagePicker
+            } label: {
+                HStack(spacing: 12) {
+                    menuLabel
+                        .foregroundColor(.primary)
+
+                    Image(systemName: "chevron.down.circle.fill")
+                        .foregroundColor(.accentColor)
+                        .imageScale(.small)
+                }
+                .transaction { t in t.animation = nil }
+            }
+
+        #endif
+    }
+
+    var menuLabel: some View {
+        HStack {
+            Image(systemName: model.page.systemImageName)
+                .imageScale(.small)
+            Text(model.page.title)
+                .font(.headline)
+        }
+    }
+
+    var pagePicker: some View {
+        Picker("Page", selection: $model.page) {
+            ForEach(WatchNextViewModel.Page.allCases, id: \.rawValue) { page in
+                Label(page.title, systemImage: page.systemImageName)
+                    .tag(page)
+            }
+        }
+    }
+
+    @ViewBuilder var hideCloseButton: some View {
+        if model.isHideable {
+            hideButton
+        } else {
+            closeButton
+        }
+    }
+
+    var hideButton: some View {
+        Button {
+            model.hide()
+        } label: {
+            Label("Hide", systemImage: "chevron.down")
+        }
+    }
+
    var closeButton: some View {
        Button {
-            player.closeCurrentItem()
-            player.hide()
-            Delay.by(0.8) {
-                model.presentingOutro = false
-            }
+            model.close()
        } label: {
            Label("Close", systemImage: "xmark")
        }
    }

    @ViewBuilder var reopenButton: some View {
-        if player.currentItem != nil, model.item != nil {
+        if model.isRestartable {
            Button {
-                model.close()
+                model.restart()
            } label: {
-                Label("Back to last video", systemImage: "arrow.counterclockwise")
+                Label(model.reason == .userInteracted ? "Back" : "Reopen", systemImage: "arrow.counterclockwise")
            }
        }
    }

    @ViewBuilder var moreVideos: some View {
        VStack(spacing: 12) {
-            let queueForMoreVideos = player.queue.isEmpty ? [] : player.queue.suffix(from: model.isAutoplaying ? 1 : 0)
-            if !queueForMoreVideos.isEmpty {
-                VStack(spacing: 12) {
-                    Text("Next in Queue")
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .font(.headline)
-
+            switch model.page {
+            case .queue:
+                let queueForMoreVideos = player.queue.isEmpty ? [] : player.queue.suffix(from: model.isAutoplaying ? 1 : 0)
+                if !queueForMoreVideos.isEmpty {
                    ForEach(queueForMoreVideos) { item in
-                        ContentItemView(item: .init(video: item.video))
-                            .environment(\.listingStyle, .list)
+                        PlayerQueueRow(item: item)
+                            .contextMenu {
+                                removeButton(item)
+                                removeAllButton()
+
+                                if let video = item.video {
+                                    VideoContextMenuView(video: video)
+                                }
+                            }
+                        #if os(tvOS)
+                            .padding(.horizontal, 30)
+                        #endif
+
+                        #if !os(tvOS)
+                            Divider()
+                        #endif
                    }
+                } else if player.playbackMode != .related && player.playbackMode != .loopOne {
+                    Label(
+                        model.isAutoplaying ? "Nothing more in the queue" : "Queue is empty",
+                        systemImage: WatchNextViewModel.Page.queue.systemImageName
+                    )
+                    .foregroundColor(.secondary)
                }
-            }
-
-            if let item = model.item {
-                VStack(spacing: 12) {
-                    Text("Related videos")
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .font(.headline)
-
+            case .related:
+                if let item = model.item {
                    ForEach(item.video.related) { video in
                        ContentItemView(item: .init(video: video))
                            .environment(\.listingStyle, .list)
                    }
-                    .padding(.bottom, 4)
+                } else {
+                    Label("Nothing was played",
+                          systemImage: WatchNextViewModel.Page.related.systemImageName)
+                        .foregroundColor(.secondary)
                }
-            }
-
-            if saveHistory {
-                VStack(spacing: 12) {
-                    Text("History")
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .font(.headline)
-
-                    HStack {
-                        Text("Playing Next in 5...")
-                            .font(.headline)
-                        Spacer()
-
-                        Button {
-                            model.cancelAutoplay()
-                        } label: {
-                            Label("Cancel", systemImage: "pause.fill")
-                        }
-                    }
-
+            case .history:
+                if saveHistory {
                    HistoryView(limit: 15)
                }
            }
        }
    }

-    var nextFromTheQueue: PlayerQueueItem? {
-        if player.playbackMode == .related {
-            return player.autoplayItem
-        } else if player.playbackMode == .queue {
-            return player.queue.first
+    private func removeButton(_ item: PlayerQueueItem) -> some View {
+        Button {
+            player.remove(item)
+        } label: {
+            Label("Remove from the queue", systemImage: "trash")
        }
+    }

-        return nil
+    private func removeAllButton() -> some View {
+        Button {
+            player.removeQueueItems()
+        } label: {
+            Label("Clear the queue", systemImage: "trash.fill")
+        }
    }
 }

-struct OutroView_Previews: PreviewProvider {
+struct WatchNextView_Previews: PreviewProvider {
    static var previews: some View {
        WatchNextView()
            .onAppear {
-                WatchNextViewModel.shared.prepareForNextItem(.init(.fixture))
+                WatchNextViewModel.shared.finishedWatching(.init(.fixture))
            }
    }
 }
--- a/Shared/Settings/PlayerSettings.swift
+++ b/Shared/Settings/PlayerSettings.swift
@@ -6,10 +6,6 @@ struct PlayerSettings: View {
    @Default(.playerInstanceID) private var playerInstanceID

    @Default(.playerSidebar) private var playerSidebar
-    @Default(.playerActionsButtonLabelStyle) private var playerActionsButtonLabelStyle
-    @Default(.playerDetailsPageButtonLabelStyle) private var playerDetailsPageButtonLabelStyle
-    @Default(.detailsToolbarPosition) private var detailsToolbarPosition
-    @Default(.showInspector) private var showInspector
    @Default(.playerControlsLayout) private var playerControlsLayout
    @Default(.fullScreenPlayerControlsLayout) private var fullScreenPlayerControlsLayout
    @Default(.horizontalPlayerGestureEnabled) private var horizontalPlayerGestureEnabled
@@ -17,7 +13,6 @@ struct PlayerSettings: View {
    @Default(.seekGestureSensitivity) private var seekGestureSensitivity
    @Default(.showKeywords) private var showKeywords
    @Default(.pauseOnHidingPlayer) private var pauseOnHidingPlayer
-    @Default(.closeLastItemOnPlaybackEnd) private var closeLastItemOnPlaybackEnd
    #if os(iOS)
        @Default(.honorSystemOrientationLock) private var honorSystemOrientationLock
        @Default(.enterFullscreenInLandscape) private var enterFullscreenInLandscape
@@ -27,7 +22,6 @@ struct PlayerSettings: View {
    @Default(.closePiPOnOpeningPlayer) private var closePiPOnOpeningPlayer
    @Default(.closePlayerOnOpeningPiP) private var closePlayerOnOpeningPiP
    #if !os(macOS)
-        @Default(.closePlayerOnItemClose) private var closePlayerOnItemClose
        @Default(.pauseOnEnteringBackground) private var pauseOnEnteringBackground
        @Default(.closePiPAndOpenPlayerOnEnteringForeground) private var closePiPAndOpenPlayerOnEnteringForeground
    #endif
@@ -35,6 +29,10 @@ struct PlayerSettings: View {
    @Default(.enableReturnYouTubeDislike) private var enableReturnYouTubeDislike
    @Default(.systemControlsCommands) private var systemControlsCommands

+    @Default(.openWatchNextOnClose) private var openWatchNextOnClose
+    @Default(.openWatchNextOnFinishedWatching) private var openWatchNextOnFinishedWatching
+    @Default(.openWatchNextOnFinishedWatchingDelay) private var openWatchNextOnFinishedWatchingDelay
+
    @ObservedObject private var accounts = AccountsModel.shared
    private var player = PlayerModel.shared

@@ -73,12 +71,16 @@ struct PlayerSettings: View {
                pauseOnHidingPlayerToggle
                #if !os(macOS)
                    pauseOnEnteringBackgroundToogle
-                    closePlayerOnItemCloseToggle
                #endif
-                closeLastItemOnPlaybackEndToggle
                systemControlsCommandsPicker
            }

+            Section(header: SettingsHeader(text: "Watch Next")) {
+                openWatchNextOnFinishedWatchingToggle
+                openWatchNextOnFinishedWatchingDelayTextField
+                openWatchNextOnCloseToggle
+            }
+
            #if !os(tvOS)
                Section(header: SettingsHeader(text: "Controls".localized()), footer: controlsLayoutFooter) {
                    horizontalPlayerGestureEnabledToggle
@@ -122,21 +124,6 @@ struct PlayerSettings: View {
                }
            #endif

-            #if !os(tvOS)
-                Section(header: SettingsHeader(text: "Video Details").padding(.bottom, videoDetailsHeaderPadding)) {
-                    SettingsHeader(text: "Actions buttons".localized(), secondary: true)
-                    playerActionsButtonLabelStylePicker
-                    SettingsHeader(text: "Pages buttons".localized(), secondary: true)
-                    detailsButtonLabelStylePicker
-
-                    SettingsHeader(text: "Show Inspector".localized(), secondary: true)
-                    showInspectorPicker
-
-                    SettingsHeader(text: "Pages toolbar position".localized(), secondary: true)
-                    detailsToolbarPositionPicker
-                }
-            #endif
-
            #if os(iOS)
                Section(header: SettingsHeader(text: "Orientation".localized())) {
                    if idiom == .pad {
@@ -196,6 +183,33 @@ struct PlayerSettings: View {
        .modifier(SettingsPickerModifier())
    }

+    private var openWatchNextOnCloseToggle: some View {
+        Toggle("Open after manual close of video", isOn: $openWatchNextOnClose)
+    }
+
+    private var openWatchNextOnFinishedWatchingToggle: some View {
+        Toggle("Open after watching video", isOn: $openWatchNextOnFinishedWatching)
+    }
+
+    private var openWatchNextOnFinishedWatchingDelayTextField: some View {
+        HStack {
+            Text("Autoplay delay")
+                .frame(minWidth: 140, alignment: .leading)
+            #if !os(iOS)
+                Spacer()
+            #endif
+            TextField("Delay", text: $openWatchNextOnFinishedWatchingDelay)
+            #if !os(iOS)
+                .frame(maxWidth: 100, alignment: .trailing)
+            #endif
+                .labelsHidden()
+            #if !os(macOS)
+                .keyboardType(.numberPad)
+            #endif
+        }
+        .multilineTextAlignment(.trailing)
+    }
+
    private var sidebarPicker: some View {
        Picker("Sidebar", selection: $playerSidebar) {
            #if os(macOS)
@@ -211,39 +225,6 @@ struct PlayerSettings: View {
        .modifier(SettingsPickerModifier())
    }

-    private var playerActionsButtonLabelStylePicker: some View {
-        Picker("Video actions buttons", selection: $playerActionsButtonLabelStyle) {
-            Text("Show only icons").tag(ButtonLabelStyle.iconOnly)
-            Text("Show icons and text when space permits").tag(ButtonLabelStyle.iconAndText)
-        }
-        .modifier(SettingsPickerModifier())
-    }
-
-    private var detailsButtonLabelStylePicker: some View {
-        Picker("Pages buttons", selection: $playerDetailsPageButtonLabelStyle) {
-            Text("Show only icons").tag(ButtonLabelStyle.iconOnly)
-            Text("Show icons and text when space permits").tag(ButtonLabelStyle.iconAndText)
-        }
-        .modifier(SettingsPickerModifier())
-    }
-
-    private var showInspectorPicker: some View {
-        Picker("Inspector visibility", selection: $showInspector) {
-            Text("Always").tag(ShowInspectorSetting.always)
-            Text("Only for local files and URLs").tag(ShowInspectorSetting.onlyLocal)
-        }
-        .modifier(SettingsPickerModifier())
-    }
-
-    private var detailsToolbarPositionPicker: some View {
-        Picker("Pages toolbar position", selection: $detailsToolbarPosition) {
-            ForEach(DetailsToolbarPositionSetting.allCases, id: \.self) { setting in
-                Text(setting.rawValue.capitalized.localized()).tag(setting)
-            }
-        }
-        .modifier(SettingsPickerModifier())
-    }
-
    private var horizontalPlayerGestureEnabledToggle: some View {
        Toggle("Seek with horizontal swipe on video", isOn: $horizontalPlayerGestureEnabled)
    }
@@ -310,16 +291,8 @@ struct PlayerSettings: View {
        private var pauseOnEnteringBackgroundToogle: some View {
            Toggle("Pause when entering background", isOn: $pauseOnEnteringBackground)
        }
-
-        private var closePlayerOnItemCloseToggle: some View {
-            Toggle("Close player when closing video", isOn: $closePlayerOnItemClose)
-        }
    #endif

-    private var closeLastItemOnPlaybackEndToggle: some View {
-        Toggle("Close video after playing last in the queue", isOn: $closeLastItemOnPlaybackEnd)
-    }
-
    #if os(iOS)
        private var honorSystemOrientationLockToggle: some View {
            Toggle("Honor orientation lock", isOn: $honorSystemOrientationLock)
--- a/Shared/Settings/SettingsView.swift
+++ b/Shared/Settings/SettingsView.swift
@@ -38,7 +38,7 @@ struct SettingsView: View {
                .tabItem {
                    Label("Browsing", systemImage: "list.and.film")
                }
-                .tag(Optional(Tabs.browsing))
+                .tag(Tabs.browsing)

                Form {
                    PlayerSettings()
@@ -46,7 +46,7 @@ struct SettingsView: View {
                .tabItem {
                    Label("Player", systemImage: "play.rectangle")
                }
-                .tag(Optional(Tabs.player))
+                .tag(Tabs.player)

                Form {
                    QualitySettings()
@@ -54,7 +54,7 @@ struct SettingsView: View {
                .tabItem {
                    Label("Quality", systemImage: "4k.tv")
                }
-                .tag(Optional(Tabs.quality))
+                .tag(Tabs.quality)

                Form {
                    HistorySettings()
@@ -62,7 +62,7 @@ struct SettingsView: View {
                .tabItem {
                    Label("History", systemImage: "clock.arrow.circlepath")
                }
-                .tag(Optional(Tabs.history))
+                .tag(Tabs.history)

                if !accounts.isEmpty {
                    Form {
@@ -71,7 +71,7 @@ struct SettingsView: View {
                    .tabItem {
                        Label("SponsorBlock", systemImage: "dollarsign.circle")
                    }
-                    .tag(Optional(Tabs.sponsorBlock))
+                    .tag(Tabs.sponsorBlock)
                }
                Form {
                    LocationsSettings()
@@ -79,7 +79,7 @@ struct SettingsView: View {
                .tabItem {
                    Label("Locations", systemImage: "globe")
                }
-                .tag(Optional(Tabs.locations))
+                .tag(Tabs.locations)

                Group {
                    AdvancedSettings()
@@ -87,7 +87,7 @@ struct SettingsView: View {
                .tabItem {
                    Label("Advanced", systemImage: "wrench.and.screwdriver")
                }
-                .tag(Optional(Tabs.advanced))
+                .tag(Tabs.advanced)

                Form {
                    Help()
@@ -95,7 +95,7 @@ struct SettingsView: View {
                .tabItem {
                    Label("Help", systemImage: "questionmark.circle")
                }
-                .tag(Optional(Tabs.help))
+                .tag(Tabs.help)
            }
            .padding(20)
            .frame(width: 600, height: windowHeight)
@@ -225,9 +225,9 @@ struct SettingsView: View {
        private var windowHeight: Double {
            switch selection {
            case .browsing:
-                return 680
+                return 700
            case .player:
-                return 900
+                return 730
            case .quality:
                return 420
            case .history: