refactor: better channel switching overlay

* hide channel switcher after 5s
* color channel switcher button based on hex, if available

Signed-off-by: eXhumer <exhumer@exhumer.cc>

src/Player/React/App.module.scss

@@ -1,4 +1,28 @@
+.additional-streams-overlay {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  width: Max(10vw, 64px);
+  height: 100vh;
+  right: 0;
+  justify-content: center;
+  animation: fadeOut 5s forwards;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 1;
+}
+
+.additional-streams-overlay:hover {
+  opacity: 1;
+  animation: none;
+}
+
 .additional-streams-overlay > button {
   pointer-events: auto;
   -webkit-app-region: no-drag;
 }
+
+@keyframes fadeOut {
+  0% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
+}

src/Player/React/App.tsx

@@ -118,8 +118,11 @@ const App = () => {
               onClick={() => {
                 switchChannel(stream.channelId);
               }}
+              style={{
+                backgroundColor: stream.hex,
+              }}
             >
-              {stream.title}
+              {stream.reportingName}
             </button>
           ))}
         </div>