From fa97b3f611612abd4b48d898ebbd7751da5b6f29 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Fri, 9 Jul 2021 23:07:18 +0200
Subject: [PATCH] add: connect bar state

fix: elapsed time text
fix: bookmark select box text color
---
 dribbblish-dynamic.js |  2 +-
 dribbblish.js         | 16 ++++++++++++++--
 user.css              |  3 +++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js
index 298193e..cb7cd54 100644
--- a/dribbblish-dynamic.js
+++ b/dribbblish-dynamic.js
@@ -1,4 +1,4 @@
-let current = '1.6'
+let current = '1.7'
 
 /* css is injected so this works with untouched user.css from Dribbblish */
 /* dark theme */
diff --git a/dribbblish.js b/dribbblish.js
index f394a0b..8919ca4 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -140,8 +140,9 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
 
 (function Dribbblish() {
     const progBar = document.querySelector(".playback-bar");
+    const root = document.querySelector(".Root");
 
-    if (!Spicetify.Player.origin || !progBar) {
+    if (!Spicetify.Player.origin || !progBar || !root) {
         setTimeout(Dribbblish, 300);
         return;
     }
@@ -152,7 +153,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
 
     const progKnob = progBar.querySelector(".progress-bar__slider");
     
-    Spicetify.Player.addEventListener("onprogress", ({ data: e }) => {
+    function updateProgTime({ data: e }) {
         const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2;
         const maxWidth = progBar.offsetWidth;
         const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
@@ -166,6 +167,17 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
         }
         tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
             Spicetify.Player.formatTime(Spicetify.Player.getDuration());
+    }
+    Spicetify.Player.addEventListener("onprogress", updateProgTime);
+    updateProgTime({ data: Spicetify.Player.getProgress() });
+
+    Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
+        const isExternal = state.devices.some(a => a.is_active);
+        if (isExternal) {
+            root.classList.add("is-connectBarVisible");
+        } else {
+            root.classList.remove("is-connectBarVisible");
+        }
     });
 
     const filePickerForm = document.createElement("form");
diff --git a/user.css b/user.css
index d14517d..40f9fc5 100644
--- a/user.css
+++ b/user.css
@@ -817,6 +817,9 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     background-color: rgba(var(--spice-rgb-selected-row), .3);
 }
 
+.bookmark-filter {
+    color: var(--spice-main) !important;
+}
 
 /* 1.1.56 */
 .main-navBar-navBar {