Fixed a mass amount of bugs with the now playing bar! Fixed the parti…

…cle emitter on the video overlay.

Client.xcodeproj/project.pbxproj

@@ -698,6 +698,7 @@
 		5E46C37C234FB9A700ACA8C1 /* self-signed.cer in Resources */ = {isa = PBXBuildFile; fileRef = 5E46C37B234FB9A700ACA8C1 /* self-signed.cer */; };
 		5E4845C022DE381200372022 /* WindowRenderHelper.js in Resources */ = {isa = PBXBuildFile; fileRef = 5E4845BF22DE381200372022 /* WindowRenderHelper.js */; };
 		5E4845C222DE3DF800372022 /* WindowRenderHelperScript.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5E4845C122DE3DF800372022 /* WindowRenderHelperScript.swift */; };
+		5E5780B0243FA98F005D4EB1 /* PlaylistParticleEmitter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5E5780AF243FA98F005D4EB1 /* PlaylistParticleEmitter.swift */; };
 		5E612A8C234B7FC1007D12B5 /* OnboardingAdsAvailableController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5E1D8C66232BE43100BDE662 /* OnboardingAdsAvailableController.swift */; };
 		5E612A8E234B7FC8007D12B5 /* OnboardingAdsAvailableView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5E1D8C68232BE47A00BDE662 /* OnboardingAdsAvailableView.swift */; };
 		5E612A8F234B7FCA007D12B5 /* OnboardingRewardsAgreementViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5E1D8C6A232BF95200BDE662 /* OnboardingRewardsAgreementViewController.swift */; };
@@ -2212,6 +2213,7 @@
 		5E46C37B234FB9A700ACA8C1 /* self-signed.cer */ = {isa = PBXFileReference; lastKnownFileType = file; path = "self-signed.cer"; sourceTree = "<group>"; };
 		5E4845BF22DE381200372022 /* WindowRenderHelper.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; path = WindowRenderHelper.js; sourceTree = "<group>"; };
 		5E4845C122DE3DF800372022 /* WindowRenderHelperScript.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WindowRenderHelperScript.swift; sourceTree = "<group>"; };
+		5E5780AF243FA98F005D4EB1 /* PlaylistParticleEmitter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlaylistParticleEmitter.swift; sourceTree = "<group>"; };
 		5E6683A823D61CF7005B3A6C /* NTPDownloader.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NTPDownloader.swift; sourceTree = "<group>"; };
 		5E66CCB72432588B0076BA78 /* VideoPlayer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VideoPlayer.swift; sourceTree = "<group>"; };
 		5E66CCBA243259390076BA78 /* PlaylistNowPlayingBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlaylistNowPlayingBar.swift; sourceTree = "<group>"; };
@@ -4292,6 +4294,7 @@
 				5E66CCBA243259390076BA78 /* PlaylistNowPlayingBar.swift */,
 				5E66CCBC24336D2D0076BA78 /* PlaylistMultipleSelectionController.swift */,
 				5E3B876D243F0D79009BA5F5 /* DataURIParser.swift */,
+				5E5780AF243FA98F005D4EB1 /* PlaylistParticleEmitter.swift */,
 			);
 			path = Playlists;
 			sourceTree = "<group>";
 				E4A960061ABB9C450069AD6F /* ReaderModeUtils.swift in Sources */,
 				0A1E843E2190A57F0042F782 /* SyncCodewordsView.swift in Sources */,
 				E68F36981EA694000048CF44 /* PanelDataObservers.swift in Sources */,
+				5E5780B0243FA98F005D4EB1 /* PlaylistParticleEmitter.swift in Sources */,
 				0A3C789F23056C910022F6D8 /* OnboardingSearchEnginesView.swift in Sources */,
 				31ADB5DA1E58CEC300E87909 /* ClipboardBarDisplayHandler.swift in Sources */,
 				0A4B012020D02EC4004D4011 /* TabsBarViewController.swift in Sources */,

Client/Frontend/Browser/BrowserViewController.swift

@@ -489,9 +489,19 @@ class BrowserViewController: UIViewController {
         webViewContainer = UIView()
         view.addSubview(webViewContainer)
 
-        nowPlayingBar = NowPlayingBar()
-        nowPlayingBar.delegate = self
-        nowPlayingBar.translatesAutoresizingMaskIntoConstraints = false
+        nowPlayingBar = NowPlayingBar().then {
+            $0.isHidden = true
+            $0.delegate = self
+            $0.translatesAutoresizingMaskIntoConstraints = false
+
+            Playlist.shared.currentlyPlayingInfo.observe { [weak self] _, _ in
+                guard let self = self else { return }
+                if let tab = self.tabManager.selectedTab {
+                    self.onUpdateNowPlaying(tab: tab)
+                }
+
+            }.bind(to: $0)
+        }
         view.addSubview(nowPlayingBar)
 
         // Temporary work around for covering the non-clipped web view content
@@ -3529,26 +3539,53 @@ extension BrowserViewController: NowPlayingBarDelegate {
     }
 
     func onExpand() {
-
+        let controller = UINavigationController(rootViewController: PlaylistViewController(tabManager: self.tabManager))
+        self.present(controller, animated: true, completion: nil)
     }
 
     func onExit() {
-        self.presentedViewController?.dismiss(animated: true, completion: nil)
+        if self.presentedViewController == nil {
+            nowPlayingBar.isHidden = true
+        } else {
+            if let tab = self.tabManager.selectedTab {
+                self.onUpdateNowPlaying(tab: tab)
+            } else {
+                nowPlayingBar.isHidden = true
+            }
+
+            self.presentedViewController?.dismiss(animated: true, completion: nil)
+        }
     }
 
     func onUpdateNowPlaying(tab: Tab) {
         let items = tab.playlistItems.value
         if items.isEmpty {
-            if Playlist.shared.currentlyPlayingInfo != nil {
+            if Playlist.shared.currentlyPlayingInfo.value != nil {
                 nowPlayingBar.state = .nowPlaying
                 nowPlayingBar.isHidden = false
             } else {
                 nowPlayingBar.isHidden = true
             }
+        } else if items.count == 1 {
+            nowPlayingBar.isHidden = false
+
+            if Playlist.shared.itemExists(item: items[0]) {
+                if Playlist.shared.currentlyPlayingInfo.value != nil {
+                    nowPlayingBar.state = .addedNowPlaying
+                } else {
+                    nowPlayingBar.state = .existing
+                }
+            } else {
+                if Playlist.shared.currentlyPlayingInfo.value != nil {
+                    nowPlayingBar.state = .addNowPlaying
+                } else {
+                    nowPlayingBar.state = .add
+                }
+            }
         } else {
             nowPlayingBar.isHidden = false
 
-            if Playlist.shared.currentlyPlayingInfo != nil {
+            if Playlist.shared.currentlyPlayingInfo.value != nil {
                 nowPlayingBar.state = .addNowPlaying
             } else {
                 nowPlayingBar.state = .add

Client/Frontend/Browser/PlaylistManager.swift

@@ -151,6 +151,8 @@ class PlaylistManager: TabContentScript {
                         tab?.playlistItems.value.append(item)
                     }
                 }
+            } else {
+                tab?.existingPlaylistItems.value.append(item)
             }
         } catch {
             print(error)

Client/Frontend/Browser/Playlists/Playlist.swift

@@ -13,7 +13,7 @@ class Playlist {
     static let shared = Playlist()
     private let dbLock = NSRecursiveLock()
 
-    public var currentlyPlayingInfo: PlaylistInfo?
+    public var currentlyPlayingInfo = Observable<PlaylistInfo?>(nil)
 
     func addItem(item: PlaylistInfo, cachedData: Data?, completion: @escaping () -> Void) {
         if !self.itemExists(item: item) {

Client/Frontend/Browser/Playlists/PlaylistNowPlayingBar.swift

@@ -14,7 +14,6 @@ protocol NowPlayingBarDelegate: class {
 enum NowPlayingBarState {
     case add
     case existing
-    case addFirstSeen
     case addNowPlaying
     case addedNowPlaying
     case nowPlaying
@@ -39,9 +38,10 @@ class NowPlayingBar: UIView {
 
     private let mediaInfoStackView = UIStackView().then {
         $0.axis = .vertical
-        $0.distribution = .fillEqually
         $0.isLayoutMarginsRelativeArrangement = true
-        $0.layoutMargins = UIEdgeInsets(top: 10.0, left: 0.0, bottom: 10.0, right: 5.0)
+        $0.layoutMargins = UIEdgeInsets(top: 5.0, left: 0.0, bottom: 5.0, right: 5.0)
+        $0.setContentHuggingPriority(.required, for: .vertical)
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
     }
 
     private let buttonStackView = UIStackView().then {
@@ -73,7 +73,8 @@ class NowPlayingBar: UIView {
     private let mediaTitleLabel = UILabel().then {
         $0.textColor = .white
         $0.appearanceTextColor = .white
-        $0.font = .systemFont(ofSize: 11.0, weight: .medium)
+        $0.lineBreakMode = .byTruncatingTail
+        $0.font = .systemFont(ofSize: 12.0, weight: .medium)
     }
 
     private let mediaSubtitleLabel = UILabel().then {
@@ -112,7 +113,7 @@ class NowPlayingBar: UIView {
         }
 
         buttonStackView.snp.makeConstraints {
-            $0.left.greaterThanOrEqualTo(mediaInfoStackView.snp.right).offset(25.0)
+            $0.left.greaterThanOrEqualTo(infoStackView.snp.right).offset(25.0)
             $0.right.top.bottom.equalToSuperview()
         }
 
@@ -134,6 +135,10 @@ class NowPlayingBar: UIView {
             $0.numberOfTapsRequired = 1
         })
 
+        Playlist.shared.currentlyPlayingInfo.observe({ [weak self] _, _ in
+            self?.refreshUI()
+        }).bind(to: self)
+
         refreshUI()
     }
 
@@ -151,8 +156,8 @@ class NowPlayingBar: UIView {
     }
 
     private func refreshUI() {
-        mediaTitleLabel.text = Playlist.shared.currentlyPlayingInfo?.name
-        mediaSubtitleLabel.text = URL(string: Playlist.shared.currentlyPlayingInfo?.src ?? "")?.baseDomain
+        mediaTitleLabel.text = Playlist.shared.currentlyPlayingInfo.value?.name
+        mediaSubtitleLabel.text = URL(string: Playlist.shared.currentlyPlayingInfo.value?.src ?? "")?.baseDomain
 
         setupButtons()
 
@@ -168,12 +173,6 @@ class NowPlayingBar: UIView {
             titleLabel.text = "In Playlist"
             titleLabel.isHidden = false
             mediaInfoStackView.isHidden = true
-
-        case .addFirstSeen:
-            iconView.image = #imageLiteral(resourceName: "playlistsAdd")
-            titleLabel.text = "Add to playlist"
-            titleLabel.isHidden = false
-            mediaInfoStackView.isHidden = true
 
         case .addNowPlaying:
             iconView.image = #imageLiteral(resourceName: "playlistsAdd")
@@ -206,24 +205,18 @@ class NowPlayingBar: UIView {
             infoStackView.addArrangedSubview(mediaInfoStackView)
         }
 
-        if state == .addFirstSeen {
-            infoStackView.addArrangedSubview(titleLabel)
-            infoStackView.addArrangedSubview(mediaInfoStackView)
-            buttonStackView.addArrangedSubview(createSeparator())
-            buttonStackView.addArrangedSubview(soundBarButton)
-        }
-
         if state == .addNowPlaying || state == .addedNowPlaying {
             infoStackView.addArrangedSubview(createSeparator())
             infoStackView.addArrangedSubview(soundBarButton)
+            infoStackView.addArrangedSubview(mediaInfoStackView)
 
             soundBarButton.snp.remakeConstraints {
                 $0.width.equalTo(20.0)
             }
         }
 
         if state == .nowPlaying {
-
+            infoStackView.addArrangedSubview(mediaInfoStackView)
         }
 
         buttonStackView.addArrangedSubview(createSeparator())
@@ -236,7 +229,7 @@ class NowPlayingBar: UIView {
     
     @objc
     private func onAddToPlaylist(_ gestureRecognizer: UIGestureRecognizer) {
-        if state == .add || state == .addFirstSeen || state == .addNowPlaying {
+        if state == .add || state == .addNowPlaying {
             delegate?.onAddToPlaylist()
         } else {
             delegate?.onExpand()

Client/Frontend/Browser/Playlists/PlaylistParticleEmitter.swift

@@ -0,0 +1,86 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+import Foundation
+import UIKit
+
+class PlaylistParticleEmitter: UIView {
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        if let layer = self.layer as? CAEmitterLayer {
+            let cells = generateEmitterCells()
+            cells.base.emitterCells = [cells.trailing, cells.particle]
+            layer.emitterCells = [cells.base]
+        }
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override class var layerClass: AnyClass {
+        return CAEmitterLayer.self
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+
+        if let layer = self.layer as? CAEmitterLayer {
+            layer.emitterSize = bounds.size
+            layer.emitterPosition = CGPoint(x: bounds.width / 2, y: bounds.height / 2)
+            layer.renderMode = .additive
+        }
+    }
+
+    private func generateEmitterCells() -> (base: CAEmitterCell, trailing: CAEmitterCell, particle: CAEmitterCell) {
+        let baseEmitter = CAEmitterCell().then {
+            $0.color = #colorLiteral(red: 0.4980392157, green: 0.4980392157, blue: 0.4980392157, alpha: 0.5)
+            $0.redRange = 0.9
+            $0.greenRange = 0.9
+            $0.blueRange = 0.9
+            $0.lifetime = 2.5
+            $0.birthRate = 5
+            $0.velocity = 300
+            $0.velocityRange = 100
+            $0.emissionRange = .pi * 2
+            $0.spinRange = .pi * 4
+            $0.yAcceleration = 0
+        }
+
+        let trailingEmitter = CAEmitterCell().then {
+            $0.contents = #imageLiteral(resourceName: "shields-menu-icon").cgImage
+            $0.lifetime = 0.5
+            $0.birthRate = 45
+            $0.velocity = 80
+            $0.scale = 0.4
+            $0.alphaSpeed = -0.7
+            $0.scaleSpeed = -0.1
+            $0.scaleRange = 0.1
+            $0.beginTime = 0.01
+            $0.duration = 1.7
+            $0.emissionRange = .pi * 2
+            $0.spinRange = .pi * 4
+            $0.yAcceleration = 0
+        }
+
+        let particleEmitter = CAEmitterCell().then {
+            $0.contents = #imageLiteral(resourceName: "shields-menu-icon").cgImage
+            $0.lifetime = 100
+            $0.birthRate = 1000
+            $0.velocity = 130
+            $0.scale = 0.6
+            $0.spin = 2
+            $0.alphaSpeed = -0.2
+            $0.scaleSpeed = -0.1
+            $0.beginTime = 1.5
+            $0.duration = 0.1
+            $0.emissionRange = .pi * 2
+            $0.spinRange = .pi * 4
+            $0.yAcceleration = 0
+        }
+        return (baseEmitter, trailingEmitter, particleEmitter)
+    }
+}