add more emphasis to current song (#283)

* add more emphasis to current song

* add css indicator (rivolumelineup)

* don't use absolute position, support album track number

* Respect order of set-queue function (fix race condition)

* Fix table row actions button on album detail and play queue

* Fix album detail table customizations

* Bump to v0.4.1

* Fix opacity mask for unsynced lyrics container

* Separate sidebar icons to new component

- Fixes react render issue

* Add app focus hook

* Remove css play image

* Add player status as cell refresh condition for queue

* Add current song images

* Add current song styles for all song tables

* Revert row index cell width

* Remove animated svg on browser

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>

src/renderer/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-should-pad-titlebar';
 export * from './use-container-query';
 export * from './use-fast-average-color';
 export * from './use-hide-scrollbar';
+export * from './use-app-focus';

src/renderer/hooks/use-app-focus.ts

@@ -0,0 +1,22 @@
+// From https://learnersbucket.com/examples/interview/usehasfocus-hook-in-react/
+
+import { useState, useEffect } from 'react';
+
+export const useAppFocus = () => {
+    const [focus, setFocus] = useState(document.hasFocus());
+
+    useEffect(() => {
+        const onFocus = () => setFocus(true);
+        const onBlur = () => setFocus(false);
+
+        window.addEventListener('focus', onFocus);
+        window.addEventListener('blur', onBlur);
+
+        return () => {
+            window.removeEventListener('focus', onFocus);
+            window.removeEventListener('blur', onBlur);
+        };
+    }, []);
+
+    return focus;
+};