Add partymode to webui

grzegorz_clients/constants.py

@@ -25,6 +25,7 @@ COLOR_LIGHT = "#f8f9fa"
 COLOR_DARK = "#343a40"
 
 # Font Awesome
+ICON_PARTY = '<i class="fas fa-hat-wizard"></i>'
 ICON_PREV = '<i class="fas fa-step-backward"></i>'
 ICON_NEXT = '<i class="fas fa-step-forward"></i>'
 ICON_PLAY = '<i class="fas fa-play"></i>'

grzegorz_clients/remi_ui.py

@@ -25,6 +25,9 @@ class RemiApp(App):
 		
 		self.playback.playing = gui.Label("Now playing: None")# (TODO): update this
 		
+		self.playback.party = gui.Button(ICON_PARTY)
+		self.playback.party.attributes["onclick"] = "document.body.classList.toggle('dancing');"
+		self.playback.party.attributes["title"] = "ENABLE PARTY MODE" # hover text
 		self.playback.previous = gui.Button(ICON_PREV)
 		self.playback.previous.set_on_click_listener(self.playback_previous)
 		self.playback.play = gui.Button(ICON_PLAY)
@@ -64,14 +67,18 @@ class RemiApp(App):
 	def make_gui_container(self):#placement and styling
 		# Logo image:
 		self.logo_image.style["width"] = f"100%"
-		for i in (self.playback.previous, self.playback.play, self.playback.next):
+		for i in (self.playback.previous, self.playback.play, self.playback.next, self.playback.party):
 			i.style["margin"] = "3px"
 			i.style["width"]  = "2.8em"
 		
 		# Playback:
+		self.playback.party.style["background"] \
+			= f"linear-gradient(40deg,{COLOR_PINK},{COLOR_TEAL})"
+
 		self.playback.play.style["background"] \
 			= f"linear-gradient(40deg,{COLOR_BLUE},{COLOR_PURPLE})"
 
+		
 		self.playback.volume_label.style["font-size"] = "0.8em"
 		
 		self.playback.volume_slider.style["width"] = "150px"
@@ -128,6 +135,7 @@ class RemiApp(App):
 		left_container.append(self.playback.playing)
 		
 		playback_container = gui.HBox()
+		playback_container.append(self.playback.party)
 		playback_container.append(self.playback.previous)
 		playback_container.append(self.playback.play)
 		playback_container.append(self.playback.next)

grzegorz_clients/res/style.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import url("https://use.fontawesome.com/releases/v5.0.7/css/all.css");
+@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css");
 
 @font-face {
     font-family: 'Roboto';
@@ -658,3 +658,44 @@ ul.TreeView{
 .TreeItem[has-subtree='true'][treeopen='true']:hover {
     background-color: transparent;
 }
+
+/* document.body.classList.toggle("dancing"); */
+body.dancing::before,
+body.dancing::after {
+    position: fixed !important;
+    display: block;
+    z-index: 1;
+    bottom:-0.2em;
+}
+
+body.dancing::before {
+    left:0;
+    content: url('/res/dance2.gif');
+}
+
+body.dancing::after {
+    right:0;
+    content: url('/res/dance1.gif');
+    transform: scale(0.5);
+    transform-origin: 100% 100%;
+}
+
+body.dancing {
+  animation-name: party_colors;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+
+}
+@keyframes party_colors {
+      0%{background-color: red;}
+     10%{background-color: blue;}
+     20%{background-color: green;}
+     30%{background-color: yellow;}
+     40%{background-color: pink;}
+     50%{background-color: white;}
+     60%{background-color: cyan;}
+     70%{background-color: purple;}
+     80%{background-color: lime;}
+     90%{background-color: #a0aaff;}
+    100%{background-color: red;}
+}