Bump build number

* Show text when there is no comments or comments are disabled
* Show progress indicator for loading comments/replies
* Improve layout of icons and text spacing

Extensions/Color+Background.swift

@@ -10,8 +10,8 @@ extension Color {
         static let secondaryBackground = Color(UIColor.secondarySystemBackground)
         static let tertiaryBackground = Color(UIColor.tertiarySystemBackground)
     #else
-        static let background = Color.black
+        static func background(scheme: ColorScheme) -> Color {
-        static let secondaryBackground = Color.black
+            scheme == .dark ? .black : .init(white: 0.8)
-        static let tertiaryBackground = Color.black
+        }
     #endif
 }

Model/Applications/InvidiousAPI.swift

@@ -27,7 +27,7 @@ final class InvidiousAPI: Service, ObservableObject, VideosAPI {
         self.account = account
 
         validInstance = false
-        signedIn = false
+        signedIn = !account.anonymous
 
         configure()
     }

Model/Applications/PipedAPI.swift

@@ -72,10 +72,12 @@ final class PipedAPI: Service, ObservableObject, VideosAPI {
         }
 
         configureTransformer(pathPattern("comments/*")) { (content: Entity<JSON>) -> CommentsPage in
-            let comments = content.json.dictionaryValue["comments"]?.arrayValue.map { PipedAPI.extractComment(from: $0)! } ?? []
+            let details = content.json.dictionaryValue
-            let nextPage = content.json.dictionaryValue["nextpage"]?.stringValue
+            let comments = details["comments"]?.arrayValue.map { PipedAPI.extractComment(from: $0)! } ?? []
+            let nextPage = details["nextpage"]?.stringValue
+            let disabled = details["disabled"]?.boolValue ?? false
 
-            return CommentsPage(comments: comments, nextPage: nextPage)
+            return CommentsPage(comments: comments, nextPage: nextPage, disabled: disabled)
         }
 
         if account.token.isNil {

Model/CommentsModel.swift

@@ -4,20 +4,37 @@ import SwiftyJSON
 
 final class CommentsModel: ObservableObject {
     @Published var all = [Comment]()
-    @Published var replies = [Comment]()
 
     @Published var nextPage: String?
     @Published var firstPage = true
 
-    @Published var loaded = false
+    @Published var loaded = true
+    @Published var disabled = false
+
+    @Published var replies = [Comment]()
+    @Published var repliesLoaded = false
 
     var accounts: AccountsModel!
     var player: PlayerModel!
 
-    static var enabled: Bool {
+    var instance: Instance? {
-        !Defaults[.commentsInstanceID].isNil
+        InstancesModel.find(Defaults[.commentsInstanceID])
     }
 
+    var api: VideosAPI? {
+        instance.isNil ? nil : PipedAPI(account: instance!.anonymousAccount)
+    }
+
+    static var enabled: Bool {
+        !Defaults[.commentsInstanceID].isNil && !Defaults[.commentsInstanceID]!.isEmpty
+    }
+
+    #if !os(tvOS)
+        static var placement: CommentsPlacement {
+            Defaults[.commentsPlacement]
+        }
+    #endif
+
     var nextPageAvailable: Bool {
         !(nextPage?.isEmpty ?? true)
     }
@@ -27,23 +44,23 @@ final class CommentsModel: ObservableObject {
             return
         }
 
-        loaded = false
+        reset()
-        clear()
 
-        guard let instance = InstancesModel.find(Defaults[.commentsInstanceID]),
+        guard !instance.isNil,
-              !player.currentVideo.isNil
+              !(player?.currentVideo.isNil ?? true)
         else {
             return
         }
 
         firstPage = page.isNil || page!.isEmpty
 
-        PipedAPI(account: instance.anonymousAccount).comments(player.currentVideo!.videoID, page: page)?
+        api?.comments(player.currentVideo!.videoID, page: page)?
             .load()
             .onSuccess { [weak self] response in
                 if let page: CommentsPage = response.typedContent() {
                     self?.all = page.comments
                     self?.nextPage = page.nextPage
+                    self?.disabled = page.disabled
                 }
             }
             .onCompletion { [weak self] _ in
@@ -61,19 +78,27 @@ final class CommentsModel: ObservableObject {
         }
 
         replies = []
+        repliesLoaded = false
 
-        accounts.api.comments(player.currentVideo!.videoID, page: page)?.load().onSuccess { response in
+        api?.comments(player.currentVideo!.videoID, page: page)?
-            if let page: CommentsPage = response.typedContent() {
+            .load()
-                self.replies = page.comments
+            .onSuccess { [weak self] response in
+                if let page: CommentsPage = response.typedContent() {
+                    self?.replies = page.comments
+                }
+            }
+            .onCompletion { [weak self] _ in
+                self?.repliesLoaded = true
             }
-        }
     }
 
-    func clear() {
+    func reset() {
         all = []
-        replies = []
+        disabled = false
         firstPage = true
         nextPage = nil
         loaded = false
+        replies = []
+        repliesLoaded = false
     }
 }

Model/CommentsPage.swift

@@ -3,4 +3,5 @@ import Foundation
 struct CommentsPage {
     var comments = [Comment]()
     var nextPage: String?
+    var disabled = false
 }

Model/Player/PlayerModel.swift

@@ -481,10 +481,9 @@ final class PlayerModel: ObservableObject {
 
     fileprivate func updateNowPlayingInfo() {
         let duration: Int? = currentItem.video.live ? nil : Int(currentItem.videoDuration ?? 0)
-        let nowPlayingInfo: [String: AnyObject] = [
+        var nowPlayingInfo: [String: AnyObject] = [
             MPMediaItemPropertyTitle: currentItem.video.title as AnyObject,
             MPMediaItemPropertyArtist: currentItem.video.author as AnyObject,
-            MPMediaItemPropertyArtwork: currentArtwork as AnyObject,
             MPMediaItemPropertyPlaybackDuration: duration as AnyObject,
             MPNowPlayingInfoPropertyIsLiveStream: currentItem.video.live as AnyObject,
             MPNowPlayingInfoPropertyElapsedPlaybackTime: player.currentTime().seconds as AnyObject,
@@ -492,6 +491,10 @@ final class PlayerModel: ObservableObject {
             MPMediaItemPropertyMediaType: MPMediaType.anyVideo.rawValue as AnyObject
         ]
 
+        if !currentArtwork.isNil {
+            nowPlayingInfo[MPMediaItemPropertyArtwork] = currentArtwork as AnyObject
+        }
+
         MPNowPlayingInfoCenter.default().nowPlayingInfo = nowPlayingInfo
     }
 

Model/Player/PlayerQueue.swift

@@ -29,6 +29,7 @@ extension PlayerModel {
     }
 
     func playNow(_ video: Video, at time: TimeInterval? = nil) {
+        player.replaceCurrentItem(with: nil)
         addCurrentItemToHistory()
 
         enqueueVideo(video, prepending: true) { _, item in
@@ -37,7 +38,7 @@ extension PlayerModel {
     }
 
     func playItem(_ item: PlayerQueueItem, video: Video? = nil, at time: TimeInterval? = nil) {
-        comments.clear()
+        comments.reset()
         currentItem = item
 
         if !time.isNil {
@@ -92,6 +93,7 @@ extension PlayerModel {
     }
 
     func advanceToItem(_ newItem: PlayerQueueItem, at time: TimeInterval? = nil) {
+        player.replaceCurrentItem(with: nil)
         addCurrentItemToHistory()
 
         remove(newItem)

Model/Search/SearchModel.swift

@@ -9,6 +9,7 @@ final class SearchModel: ObservableObject {
     @Published var query = SearchQuery()
     @Published var queryText = ""
     @Published var querySuggestions = Store<[String]>()
+    @Published var suggestionsText = ""
 
     @Published var fieldIsFocused = false
 
@@ -88,7 +89,7 @@ final class SearchModel: ObservableObject {
 
         suggestionsDebounceTimer?.invalidate()
 
-        suggestionsDebounceTimer = Timer.scheduledTimer(withTimeInterval: 1, repeats: false) { _ in
+        suggestionsDebounceTimer = Timer.scheduledTimer(withTimeInterval: 0.2, repeats: false) { _ in
             let resource = self.accounts.api.searchSuggestions(query: query)
 
             resource.addObserver(self.querySuggestions)
@@ -99,9 +100,11 @@ final class SearchModel: ObservableObject {
                     if let suggestions: [String] = response.typedContent() {
                         self.querySuggestions = Store<[String]>(suggestions)
                     }
+                    self.suggestionsText = query
                 }
             } else {
                 self.querySuggestions = Store<[String]>(self.querySuggestions.collection)
+                self.suggestionsText = query
             }
         }
     }

README.md

@@ -2,16 +2,14 @@
 
 Video player for [Invidious](https://github.com/iv-org/invidious) and [Piped](https://github.com/TeamPiped/Piped) instances built for iOS, tvOS and macOS.
 
-
 [![AGPL v3](https://shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0.en.html)
 [![GitHub issues](https://img.shields.io/github/issues/yattee/yattee)](https://github.com/yattee/yattee/issues)
 [![GitHub pull requests](https://img.shields.io/github/issues-pr/yattee/yattee)](https://github.com/yattee/yattee/pulls)
 [![Matrix](https://img.shields.io/matrix/yattee:matrix.org)](https://matrix.to/#/#yattee:matrix.org)
 
-
 ![Screenshot](https://r.yattee.stream/screenshots/all-platforms.png)
 
-## Features
+## Major Features
 * Native user interface built with [SwiftUI](https://developer.apple.com/xcode/swiftui/)
 * Multiple instances and accounts, fast switching
 * [SponsorBlock](https://sponsor.ajay.app/), configurable categories to skip
@@ -37,104 +35,15 @@ Video player for [Invidious](https://github.com/iv-org/invidious) and [Piped](ht
 | Subtitles | 🔴 | ✅ |
 | Comments | 🔴 | ✅ |
 
-## Installation
+You can browse and use accounts from one app and play videos with another (for example: use Invidious account for subscriptions and use Piped as playback source). Comments can be displayed from Piped even when Invidious is used for browsing/playing.
-### Requirements
-System requirements:
-* iOS 14 (or newer)
-* tvOS 15 (or newer)
-* macOS Big Sur (or newer)
 
-### How to install?
+## Documentation
-
+* [Installation Instructions](https://github.com/yattee/yattee/wiki/Installation-instructions)
-#### macOS
+* [Integrations](https://github.com/yattee/yattee/wiki/Integrations)
-Download and run latest version from the [Releases](https://github.com/yattee/yattee/releases) page.
+* [Screenshots Gallery](https://github.com/yattee/yattee/wiki/Screenshots-Gallery)
-
+* [Tips](https://github.com/yattee/yattee/wiki/Tips)
-#### iOS/tvOS: [AltStore](https://altstore.io/) (free)
+* [FAQ](https://github.com/yattee/yattee/wiki)
-You can sideload IPA files downloaded from the [Releases](https://github.com/yattee/yattee/releases) page to your iOS or tvOS device - check [AltStore FAQ](https://altstore.io/faq/) for more information.
+* [Donations](https://github.com/yattee/yattee/wiki/Donations)
-
-If you have to access to the beta AltStore version (v1.5, for Patreons only), you can add the following repository in `Browse > Sources` screen:
-
-`https://alt.yattee.stream`
-
-#### iOS/tvOS: Signing IPA files online (paid)
-[UDID Registrations](https://www.udidregistrations.com/) provides services to sign IPA files for your devices. Refer to: ***Break free from the App Store*** section of the website for more information.
-
-#### iOS/tvOS: Manual installation
-Download sources and compile them on a Mac using Xcode, install to your devices. Please note that if you are not registered in Apple Developer Program you will need to reinstall every 7 days.
-
-## Integrations
-### macOS
-With [Finicky](https://github.com/johnste/finicky) you can configure your system to open all the video links in the app. Example configuration:
-```js
-{
-  match: [
-    finicky.matchDomains(/(.*\.)?youtube.com/),
-    finicky.matchDomains(/(.*\.)?youtu.be/)
-  ],
-  browser: "/Applications/Yattee.app"
-}
-```
-
-## Screenshots
-### iOS
-| Player | Search | Playlists |
-| - | - | - |
-| [![Yattee Player iOS](https://r.yattee.stream/screenshots/iOS/player-thumb.png)](https://r.yattee.stream/screenshots/iOS/player.png) | [![Yattee Search iOS](https://r.yattee.stream/screenshots/iOS/search-suggestions-thumb.png)](https://r.yattee.stream/screenshots/iOS/search-suggestions.png) |  [![Yattee Subscriptions iOS](https://r.yattee.stream/screenshots/iOS/playlists-thumb.png)](https://r.yattee.stream/screenshots/iOS/playlists.png) |
-### iPadOS
-| Settings | Player | Subscriptions |
-| - | - | - |
-| [![Yattee Player iPadOS](https://r.yattee.stream/screenshots/iPadOS/settings-thumb.png)](https://r.yattee.stream/screenshots/iPadOS/settings.png) | [![Yattee Player iPadOS](https://r.yattee.stream/screenshots/iPadOS/player-thumb.png)](https://r.yattee.stream/screenshots/iPadOS/player.png) | [![Yattee Subscriptions iPad S](https://r.yattee.stream/screenshots/iPadOS/subscriptions-thumb.png)](https://r.yattee.stream/screenshots/iPadOS/subscriptions.png) |
-### tvOS
-| Player | Popular | Search | Now Playing | Settings |
-| - | - | - | - | - |
-| [![Yattee Player tvOS](https://r.yattee.stream/screenshots/tvOS/player-thumb.png)](https://r.yattee.stream/screenshots/tvOS/player.png) | [![Yattee Popular tvOS](https://r.yattee.stream/screenshots/tvOS/popular-thumb.png)](https://r.yattee.stream/screenshots/tvOS/popular.png) | [![Yattee Search tvOS](https://r.yattee.stream/screenshots/tvOS/search-thumb.png)](https://r.yattee.stream/screenshots/tvOS/search.png) | [![Yattee Now Playing tvOS](https://r.yattee.stream/screenshots/tvOS/now-playing-thumb.png)](https://r.yattee.stream/screenshots/tvOS/now-playing.png) | [![Yattee Settings tvOS](https://r.yattee.stream/screenshots/tvOS/settings-thumb.png)](https://r.yattee.stream/screenshots/tvOS/settings.png) |
-### macOS
-| Player | Channel | Search | Settings |
-| - | - | - | - |
-| [![Yattee Player macOS](https://r.yattee.stream/screenshots/macOS/player-thumb.png)](https://r.yattee.stream/screenshots/macOS/player.png) | [![Yattee Channel macOS](https://r.yattee.stream/screenshots/macOS/channel-thumb.png)](https://r.yattee.stream/screenshots/macOS/channel.png) | [![Yattee Search macOS](https://r.yattee.stream/screenshots/macOS/search-thumb.png)](https://r.yattee.stream/screenshots/macOS/search.png) | [![Yattee Settings macOS](https://r.yattee.stream/screenshots/macOS/settings-thumb.png)](https://r.yattee.stream/screenshots/macOS/settings.png) |
-
-## Tips
-### Settings
-* [tvOS] To open settings, press Play/Pause button while hovering over navigation menu or video
-### Navigation
-* Use videos context menus to add to queue, open or subscribe channel and add to playlist
-* [tvOS] Pressing buttons in the app trigger switch to next available option (for example: next account in Settings). If you want to access list of all options, press and hold to open the context menu.
-* [iOS] Swipe the player/title bar: up to open fullscreen details view, bottom to close fullscreen details or hide player
-### Favorites
-* Add more sections using ❤️ button in views channels, playlists, searches, subscriptions and popular
-* [iOS/macOS] Reorganize with dragging and dropping
-* [iOS/macOS] Remove section with right click/press and hold on section name
-* [tvOS] Reorganize and remove from `Settings > Edit Favorites...`
-### Keyboard shortcuts
-* `Command+1` - Favorites
-* `Command+2` - Subscriptions
-* `Command+3` - Popular
-* `Command+4` - Trending
-* `Command+F` - Search
-* `Command+P` - Play/Pause
-* `Command+S` - Play Next
-* `Command+O` - Toggle Player
-
-
-## Donations
-
-You can support development of this app with
-[Patreon](https://www.patreon.com/arekf) or cryptocurrencies:
-
-**Monero (XMR)**
-```
-48zfKjLmnXs21PinU2ucMiUPwhiKt5d7WJKiy3ACVS28BKqSn52c1TX8L337oESHJ5TZCyGkozjfWZG11h6C46mN9n4NPrD
-```
-**Bitcoin (BTC)**
-```
-bc1qe24zz5a5hm0trc7glwckz93py274eycxzju3mv
-```
-**Ethereum (ETH)**
-```
-0xa2f81A58Ec5E550132F03615c8d91954A4E37423
-```
-
-Donations will be used to cover development program access and domain renewal costs.
 
 ## Contributing
 If you're interestred in contributing, you can browse the [issues](https://github.com/yattee/yattee/issues) list or create a new one to discuss your feature idea. Every contribution is very welcome.

Shared/Defaults.swift

@@ -34,6 +34,9 @@ extension Defaults.Keys {
     static let playerInstanceID = Key<Instance.ID?>("playerInstance")
     static let showKeywords = Key<Bool>("showKeywords", default: false)
     static let commentsInstanceID = Key<Instance.ID?>("commentsInstance", default: kavinPipedInstanceID)
+    #if !os(tvOS)
+        static let commentsPlacement = Key<CommentsPlacement>("commentsPlacement", default: .separate)
+    #endif
 
     static let recentlyOpened = Key<[RecentItem]>("recentlyOpened", default: [])
 
@@ -129,3 +132,9 @@ enum VisibleSection: String, CaseIterable, Comparable, Defaults.Serializable {
         lhs.sortOrder < rhs.sortOrder
     }
 }
+
+#if !os(tvOS)
+    enum CommentsPlacement: String, CaseIterable, Defaults.Serializable {
+        case info, separate
+    }
+#endif

Shared/Favorites/FavoriteItemView.swift

@@ -66,6 +66,10 @@ struct FavoriteItemView: View {
                 #endif
             }
         }
+        .onChange(of: accounts.current) { _ in
+            resource?.addObserver(store)
+            resource?.load()
+        }
     }
 
     private var isVisible: Bool {

Shared/Navigation/AppTabNavigation.swift

@@ -67,6 +67,7 @@ struct AppTabNavigation: View {
                     NavigationView {
                         ChannelPlaylistView(playlist: playlist)
                             .environment(\.inNavigationView, true)
+                            .environmentObject(subscriptions)
                             .background(playerNavigationLink)
                     }
                 }

Shared/Player/CommentView.swift

@@ -40,7 +40,7 @@ struct CommentView: View {
 
                                 Spacer()
 
-                                VStack(spacing: 5) {
+                                VStack(alignment: .trailing, spacing: 8) {
                                     likes
                                     statusIcons
                                 }
@@ -65,7 +65,14 @@ struct CommentView: View {
                 commentText
 
                 if comment.hasReplies {
-                    repliesButton
+                    HStack(spacing: repliesButtonStackSpacing) {
+                        repliesButton
+
+                        ProgressView()
+                            .scaleEffect(progressViewScale, anchor: .center)
+                            .opacity(repliesID == comment.id && !comments.repliesLoaded ? 1 : 0)
+                            .frame(maxHeight: 0)
+                    }
 
                     if comment.id == repliesID {
                         repliesList
@@ -148,16 +155,15 @@ struct CommentView: View {
             comments.loadReplies(page: comment.repliesPage!)
         } label: {
             HStack(spacing: 5) {
-                Image(systemName: self.repliesID == comment.id ? "arrow.turn.left.up" : "arrow.turn.right.down")
+                Image(systemName: repliesID == comment.id ? "arrow.turn.left.up" : "arrow.turn.right.down")
                 Text("Replies")
             }
             #if os(tvOS)
             .padding(10)
             #endif
         }
-
         .buttonStyle(.plain)
-        .padding(.top, 2)
+        .padding(.vertical, 2)
         #if os(tvOS)
             .padding(.leading, 5)
         #else
@@ -165,6 +171,24 @@ struct CommentView: View {
         #endif
     }
 
+    private var repliesButtonStackSpacing: Double {
+        #if os(tvOS)
+            24
+        #elseif os(iOS)
+            4
+        #else
+            2
+        #endif
+    }
+
+    private var progressViewScale: Double {
+        #if os(macOS)
+            0.4
+        #else
+            0.8
+        #endif
+    }
+
     private var repliesList: some View {
         Group {
             let last = comments.replies.last
@@ -179,8 +203,8 @@ struct CommentView: View {
                         .padding(.vertical, 5)
                 }
             }
-            .padding(.leading, 22)
         }
+        .padding(.leading, 22)
     }
 
     private var commentText: some View {
@@ -219,3 +243,13 @@ struct CommentView: View {
         }
     }
 }
+
+struct CommentView_Previews: PreviewProvider {
+    static var fixture: Comment {
+        Comment.fixture
+    }
+
+    static var previews: some View {
+        CommentView(comment: fixture, repliesID: .constant(fixture.id))
+    }
+}

Shared/Player/CommentsView.swift

@@ -7,41 +7,73 @@ struct CommentsView: View {
     @EnvironmentObject<PlayerModel> private var player
 
     var body: some View {
-        ScrollView(.vertical, showsIndicators: false) {
+        Group {
-            VStack(alignment: .leading) {
+            if comments.disabled {
-                let last = comments.all.last
+                Text("Comments are disabled for this video")
-                ForEach(comments.all) { comment in
+                    .foregroundColor(.secondary)
-                    CommentView(comment: comment, repliesID: $repliesID)
+            } else if comments.loaded && comments.all.isEmpty {
+                Text("No comments")
+                    .foregroundColor(.secondary)
+            } else if !comments.loaded {
+                progressView
+            } else {
+                ScrollView(.vertical, showsIndicators: false) {
+                    VStack(alignment: .leading) {
+                        let last = comments.all.last
+                        ForEach(comments.all) { comment in
+                            CommentView(comment: comment, repliesID: $repliesID)
 
-                    if comment != last {
+                            if comment != last {
-                        Divider()
+                                Divider()
-                            .padding(.vertical, 5)
+                                    .padding(.vertical, 5)
+                            }
+                        }
+
+                        HStack {
+                            if comments.nextPageAvailable {
+                                Button {
+                                    repliesID = nil
+                                    comments.loadNextPage()
+                                } label: {
+                                    Label("Show more", systemImage: "arrow.turn.down.right")
+                                }
+                            }
+
+                            if !comments.firstPage {
+                                Button {
+                                    repliesID = nil
+                                    comments.load(page: nil)
+                                } label: {
+                                    Label("Show first", systemImage: "arrow.turn.down.left")
+                                }
+                            }
+                        }
+                        .buttonStyle(.plain)
+                        .padding(.vertical, 8)
+                        .foregroundColor(.secondary)
                     }
                 }
-
-                HStack {
-                    if comments.nextPageAvailable {
-                        Button {
-                            comments.loadNextPage()
-                        } label: {
-                            Label("Show more", systemImage: "arrow.turn.down.right")
-                        }
-                    }
-
-                    if !comments.firstPage {
-                        Button {
-                            comments.load(page: nil)
-                        } label: {
-                            Label("Show first", systemImage: "arrow.turn.down.left")
-                        }
-                    }
-                }
-                .buttonStyle(.plain)
-                .padding(.vertical, 5)
-                .foregroundColor(.secondary)
             }
         }
         .padding(.horizontal)
+        .onAppear {
+            if !comments.loaded {
+                comments.load()
+            }
+        }
+    }
+
+    private var progressView: some View {
+        VStack {
+            Spacer()
+
+            HStack {
+                Spacer()
+                ProgressView()
+                Spacer()
+            }
+            Spacer()
+        }
     }
 }
 

Shared/Player/PlayerViewController.swift

@@ -45,11 +45,16 @@ final class PlayerViewController: UIViewController {
 
         #if os(tvOS)
             playerModel.avPlayerViewController = playerViewController
-            playerViewController.customInfoViewControllers = [
+            var infoViewControllers = [UIHostingController<AnyView>]()
-                infoViewController([.comments], title: "Comments"),
+            if CommentsModel.enabled {
+                infoViewControllers.append(infoViewController([.comments], title: "Comments"))
+            }
+            infoViewControllers.append(contentsOf: [
                 infoViewController([.related], title: "Related"),
                 infoViewController([.playingNext, .playedPreviously], title: "Playing Next")
-            ]
+            ])
+
+            playerViewController.customInfoViewControllers = infoViewControllers
         #else
             embedViewController()
         #endif

Shared/Player/VideoDetails.swift

@@ -65,7 +65,7 @@ struct VideoDetails: View {
                 }
                 .padding(.horizontal)
 
-                if CommentsModel.enabled {
+                if CommentsModel.enabled, CommentsModel.placement == .separate {
                     pagePicker
                         .padding(.horizontal)
                 }
@@ -141,6 +141,8 @@ struct VideoDetails: View {
                             player.closeCurrentItem()
                             if !sidebarQueue {
                                 currentPage = .queue
+                            } else {
+                                currentPage = .info
                             }
                         } label: {
                             Label("Close Video", systemImage: "xmark.circle")
@@ -243,13 +245,13 @@ struct VideoDetails: View {
         Picker("Page", selection: $currentPage) {
             if !video.isNil {
                 Text("Info").tag(Page.info)
-                if !sidebarQueue {
+                if CommentsModel.enabled, CommentsModel.placement == .separate {
-                    Text("Related").tag(Page.related)
-                }
-                if CommentsModel.enabled {
                     Text("Comments")
                         .tag(Page.comments)
                 }
+                if !sidebarQueue {
+                    Text("Related").tag(Page.related)
+                }
             }
             if !sidebarQueue {
                 Text("Queue").tag(Page.queue)
@@ -364,65 +366,81 @@ struct VideoDetails: View {
 
     var detailsPage: some View {
         Group {
-            if let video = player.currentItem?.video {
+            Group {
-                Group {
+                if let video = player.currentItem?.video {
-                    HStack {
+                    Group {
-                        publishedDateSection
+                        HStack {
-                        Spacer()
+                            publishedDateSection
+                            Spacer()
+                        }
+
+                        Divider()
+
+                        countsSection
                     }
 
                     Divider()
 
-                    countsSection
+                    VStack(alignment: .leading, spacing: 10) {
-                }
+                        if let description = video.description {
-
+                            Group {
-                Divider()
+                                if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
-
+                                    Text(description)
-                VStack(alignment: .leading, spacing: 10) {
+                                        .textSelection(.enabled)
-                    if let description = video.description {
+                                } else {
-                        Group {
+                                    Text(description)
-                            if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
-                                Text(description)
-                                    .textSelection(.enabled)
-                            } else {
-                                Text(description)
-                            }
-                        }
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .font(.system(size: 14))
-                        .lineSpacing(3)
-                        .padding(.bottom, 4)
-                    } else {
-                        Text("No description")
-                            .foregroundColor(.secondary)
-                    }
-
-                    if showKeywords {
-                        ScrollView(.horizontal, showsIndicators: showScrollIndicators) {
-                            HStack {
-                                ForEach(video.keywords, id: \.self) { keyword in
-                                    HStack(alignment: .center, spacing: 0) {
-                                        Text("#")
-                                            .font(.system(size: 11).bold())
-
-                                        Text(keyword)
-                                            .frame(maxWidth: 500)
-                                    }
-                                    .font(.caption)
-                                    .foregroundColor(.white)
-                                    .padding(.vertical, 4)
-                                    .padding(.horizontal, 8)
-                                    .background(Color("VideoDetailLikesSymbolColor"))
-                                    .mask(RoundedRectangle(cornerRadius: 3))
                                 }
                             }
-                            .padding(.bottom, 10)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                            .font(.system(size: 14))
+                            .lineSpacing(3)
+                        } else {
+                            Text("No description")
+                                .foregroundColor(.secondary)
+                        }
+
+                        if showKeywords {
+                            ScrollView(.horizontal, showsIndicators: showScrollIndicators) {
+                                HStack {
+                                    ForEach(video.keywords, id: \.self) { keyword in
+                                        HStack(alignment: .center, spacing: 0) {
+                                            Text("#")
+                                                .font(.system(size: 11).bold())
+
+                                            Text(keyword)
+                                                .frame(maxWidth: 500)
+                                        }
+                                        .font(.caption)
+                                        .foregroundColor(.white)
+                                        .padding(.vertical, 4)
+                                        .padding(.horizontal, 8)
+                                        .background(Color("VideoDetailLikesSymbolColor"))
+                                        .mask(RoundedRectangle(cornerRadius: 3))
+                                    }
+                                }
+                                .padding(.bottom, 10)
+                            }
                         }
                     }
                 }
+
+                if !video.isNil, CommentsModel.placement == .info {
+                    Divider()
+                    #if os(macOS)
+                        .padding(.bottom, 20)
+                    #else
+                        .padding(.vertical, 10)
+                    #endif
+                }
+            }
+            .padding(.horizontal)
+
+            Group {
+                if !video.isNil, CommentsModel.placement == .info {
+                    CommentsView()
+                }
             }
         }
-        .padding(.horizontal)
     }
 
     func videoDetail(label: String, value: String, symbol: String) -> some View {

Shared/Playlists/AddToPlaylistView.swift

@@ -7,6 +7,7 @@ struct AddToPlaylistView: View {
 
     @State private var selectedPlaylistID: Playlist.ID = ""
 
+    @Environment(\.colorScheme) private var colorScheme
     @Environment(\.presentationMode) private var presentationMode
     @EnvironmentObject<PlaylistsModel> private var model
 
@@ -37,7 +38,7 @@ struct AddToPlaylistView: View {
         .padding(.vertical)
         #elseif os(tvOS)
         .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
-        .background(Color.tertiaryBackground)
+        .background(Color.background(scheme: colorScheme))
         #else
         .padding(.vertical)
         #endif

Shared/Playlists/PlaylistFormView.swift

@@ -10,6 +10,7 @@ struct PlaylistFormView: View {
     @State private var valid = false
     @State private var showingDeleteConfirmation = false
 
+    @Environment(\.colorScheme) private var colorScheme
     @Environment(\.presentationMode) private var presentationMode
 
     @EnvironmentObject<AccountsModel> private var accounts
@@ -77,7 +78,7 @@ struct PlaylistFormView: View {
                     .frame(maxWidth: 1000)
                 }
                 .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
-                .background(Color.tertiaryBackground)
+                .background(Color.background(scheme: colorScheme))
             #endif
         }
         .onChange(of: name) { _ in validate() }

Shared/Search/SearchField.swift

@@ -37,6 +37,7 @@ struct SearchTextField: View {
                     }
                 }
                 #if os(macOS)
+                .frame(maxWidth: 190)
                 .textFieldStyle(.plain)
                 #else
                 .textFieldStyle(.roundedBorder)
@@ -52,6 +53,11 @@ struct SearchTextField: View {
                             .padding(.trailing)
                     #endif
                     clearButton
+                } else {
+                    #if os(macOS)
+                        clearButton
+                            .opacity(0)
+                    #endif
                 }
             }
         }

Shared/Search/SearchSuggestions.swift

@@ -14,8 +14,9 @@ struct SearchSuggestions: View {
 
                 recents.addQuery(state.queryText)
             } label: {
-                HStack(spacing: 5) {
+                HStack {
-                    Label(state.queryText, systemImage: "magnifyingglass")
+                    Image(systemName: "magnifyingglass")
+                    Text(state.queryText)
                         .lineLimit(1)
                 }
             }
@@ -27,15 +28,19 @@ struct SearchSuggestions: View {
                 Button {
                     state.queryText = suggestion
                 } label: {
-                    HStack(spacing: 0) {
+                    HStack {
-                        Label(state.queryText, systemImage: "arrow.up.left.circle")
+                        Image(systemName: "arrow.up.left.circle")
-                            .lineLimit(1)
-                            .layoutPriority(2)
                             .foregroundColor(.secondary)
+                        HStack(spacing: 0) {
+                            Text(state.suggestionsText)
+                                .lineLimit(1)
+                                .layoutPriority(2)
+                                .foregroundColor(.secondary)
 
-                        Text(querySuffix(suggestion))
+                            Text(querySuffix(suggestion))
-                            .lineLimit(1)
+                                .lineLimit(1)
-                            .layoutPriority(1)
+                                .layoutPriority(1)
+                        }
                     }
                 }
                 #if os(macOS)
@@ -55,7 +60,7 @@ struct SearchSuggestions: View {
     }
 
     private func querySuffix(_ suggestion: String) -> String {
-        suggestion.replacingFirstOccurrence(of: state.queryText.lowercased(), with: "")
+        suggestion.replacingFirstOccurrence(of: state.suggestionsText.lowercased(), with: "")
     }
 
     #if os(macOS)

Shared/Settings/AccountForm.swift

@@ -15,6 +15,7 @@ struct AccountForm: View {
     @State private var validationError: String?
     @State private var validationDebounce = Debounce()
 
+    @Environment(\.colorScheme) private var colorScheme
     @Environment(\.presentationMode) private var presentationMode
 
     var body: some View {
@@ -30,7 +31,7 @@ struct AccountForm: View {
         .padding(.vertical)
         #elseif os(tvOS)
         .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
-        .background(Color.tertiaryBackground)
+        .background(Color.background(scheme: colorScheme))
         #else
         .frame(width: 400, height: 145)
         #endif

Shared/Settings/InstanceForm.swift

@@ -13,6 +13,7 @@ struct InstanceForm: View {
     @State private var validationError: String?
     @State private var validationDebounce = Debounce()
 
+    @Environment(\.colorScheme) private var colorScheme
     @Environment(\.presentationMode) private var presentationMode
 
     var body: some View {
@@ -32,7 +33,7 @@ struct InstanceForm: View {
             .padding(.vertical)
         #elseif os(tvOS)
             .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
-            .background(Color.tertiaryBackground)
+            .background(Color.background(scheme: colorScheme))
         #else
             .frame(width: 400, height: 190)
         #endif

Shared/Settings/ServicesSettings.swift

@@ -6,9 +6,17 @@ struct ServicesSettings: View {
     @Default(.sponsorBlockCategories) private var sponsorBlockCategories
     @Default(.commentsInstanceID) private var commentsInstanceID
 
+    #if !os(tvOS)
+        @Default(.commentsPlacement) private var commentsPlacement
+    #endif
+
     var body: some View {
         Section(header: SettingsHeader(text: "Comments")) {
             commentsInstancePicker
+            #if !os(tvOS)
+                commentsPlacementPicker
+                    .disabled(!CommentsModel.enabled)
+            #endif
         }
 
         Section(header: SettingsHeader(text: "SponsorBlock API")) {
@@ -58,8 +66,8 @@ struct ServicesSettings: View {
     }
 
     private var commentsInstancePicker: some View {
-        Picker("Comments", selection: $commentsInstanceID) {
+        Picker("Source", selection: $commentsInstanceID) {
-            Text("Disabled").tag(String?.none)
+            Text("Disabled").tag(Optional(""))
 
             ForEach(InstancesModel.all.filter { $0.app.supportsComments }) { instance in
                 Text(instance.description).tag(Optional(instance.id))
@@ -73,6 +81,19 @@ struct ServicesSettings: View {
         #endif
     }
 
+    #if !os(tvOS)
+        private var commentsPlacementPicker: some View {
+            Picker("Placement", selection: $commentsPlacement) {
+                Text("Below video description").tag(CommentsPlacement.info)
+                Text("Separate tab").tag(CommentsPlacement.separate)
+            }
+            .labelsHidden()
+            #if os(iOS)
+                .pickerStyle(.automatic)
+            #endif
+        }
+    #endif
+
     func toggleCategory(_ category: String, value: Bool) {
         if let index = sponsorBlockCategories.firstIndex(where: { $0 == category }), !value {
             sponsorBlockCategories.remove(at: index)

Shared/Settings/SettingsView.swift

@@ -9,6 +9,8 @@ struct SettingsView: View {
         }
     #endif
 
+    @Environment(\.colorScheme) private var colorScheme
+
     #if os(iOS)
         @Environment(\.presentationMode) private var presentationMode
     #endif
@@ -102,7 +104,7 @@ struct SettingsView: View {
                 InstanceForm(savedInstanceID: $savedFormInstanceID)
             }
             #if os(tvOS)
-            .background(Color.black)
+            .background(Color.background(scheme: colorScheme))
             #endif
         #endif
     }

Shared/Views/ChannelPlaylistView.swift

@@ -9,6 +9,8 @@ struct ChannelPlaylistView: View {
 
     @StateObject private var store = Store<ChannelPlaylist>()
 
+    @Environment(\.colorScheme) private var colorScheme
+
     #if os(iOS)
         @Environment(\.inNavigationView) private var inNavigationView
     #endif
@@ -83,7 +85,7 @@ struct ChannelPlaylistView: View {
         .navigationTitle(playlist.title)
 
         #else
-        .background(Color.tertiaryBackground)
+        .background(Color.background(scheme: colorScheme))
         #endif
     }
 

Shared/Views/ChannelVideosView.swift

@@ -9,6 +9,7 @@ struct ChannelVideosView: View {
 
     @StateObject private var store = Store<Channel>()
 
+    @Environment(\.colorScheme) private var colorScheme
     @Environment(\.presentationMode) private var presentationMode
     @Environment(\.inNavigationView) private var inNavigationView
 
@@ -105,8 +106,6 @@ struct ChannelVideosView: View {
                     }
                 }
             }
-        #else
-                .background(Color.tertiaryBackground)
         #endif
         #if os(iOS)
         .sheet(isPresented: $presentingShareSheet) {
@@ -126,6 +125,9 @@ struct ChannelVideosView: View {
         return Group {
             if #available(macOS 12.0, *) {
                 content
+                #if os(tvOS)
+                .background(Color.background(scheme: colorScheme))
+                #endif
                 #if !os(iOS)
                 .focusScope(focusNamespace)
                 #endif

Shared/Views/DetailBadge.swift

@@ -25,13 +25,19 @@ struct DetailBadge: View {
     }
 
     struct DefaultStyleModifier: ViewModifier {
+        @Environment(\.colorScheme) private var colorScheme
+
         func body(content: Content) -> some View {
             if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
                 content
                     .background(.thinMaterial)
             } else {
                 content
-                    .background(Color.background.opacity(0.95))
+                #if os(tvOS)
+                .background(Color.background(scheme: colorScheme))
+                #else
+                .background(Color.background.opacity(0.95))
+                #endif
             }
         }
     }

Shared/Views/PlayerControlsView.swift

@@ -106,7 +106,9 @@ struct PlayerControlsView<Content: View>: View {
                     .background(Material.ultraThinMaterial)
             } else {
                 controls
-                    .background(Color.tertiaryBackground)
+                #if !os(tvOS)
+                .background(Color.tertiaryBackground)
+                #endif
             }
         }
     }

Yattee.xcodeproj/project.pbxproj

@@ -2277,7 +2277,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Open in Yattee/Open in Yattee.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -2311,7 +2311,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Open in Yattee/Open in Yattee.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -2343,7 +2343,7 @@
 			buildSettings = {
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++17";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = "Open in Yattee/Info.plist";
@@ -2375,7 +2375,7 @@
 			buildSettings = {
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++17";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = "Open in Yattee/Info.plist";
@@ -2538,7 +2538,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				ENABLE_PREVIEWS = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -2569,7 +2569,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				ENABLE_PREVIEWS = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -2604,7 +2604,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				ENABLE_APP_SANDBOX = YES;
 				ENABLE_HARDENED_RUNTIME = YES;
@@ -2637,7 +2637,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = "";
 				ENABLE_APP_SANDBOX = YES;
 				ENABLE_HARDENED_RUNTIME = YES;
@@ -2768,7 +2768,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_ASSET_PATHS = "";
 				DEVELOPMENT_TEAM = "";
 				ENABLE_PREVIEWS = YES;
@@ -2800,7 +2800,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 6;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_ASSET_PATHS = "";
 				DEVELOPMENT_TEAM = "";
 				ENABLE_PREVIEWS = YES;