From a3464422461187660052672ce033319a4f803cf5 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Mon, 7 Jan 2019 16:50:51 +0100
Subject: [PATCH] Draft for Snapcast UI style

---
 .../http/static/css/music.snapcast.css        | 34 ++++++++++++++
 .../backend/http/static/js/music.snapcast.js  | 44 +++++++++++++------
 .../templates/plugins/music.snapcast.html     |  2 +-
 3 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 platypush/backend/http/static/css/music.snapcast.css

diff --git a/platypush/backend/http/static/css/music.snapcast.css b/platypush/backend/http/static/css/music.snapcast.css
new file mode 100644
index 0000000000..f9351ba5e1
--- /dev/null
+++ b/platypush/backend/http/static/css/music.snapcast.css
@@ -0,0 +1,34 @@
+.snapcast-host-container {
+    min-width: 40em;
+    margin: 1em auto;
+    background: rgba(245,245,245,0.6);
+    border: 1px solid rgba(220,220,220,1.0);
+    border-radius: 10px;
+}
+
+.snapcast-host-header {
+    border-bottom: 1px solid rgba(220,220,220,1.0);
+    font-size: 1em;
+}
+
+.snapcast-group-header {
+    padding: 0.5em;
+}
+
+    .snapcast-group-settings {
+        text-align: center;
+        cursor: pointer;
+    }
+
+    .snapcast-group-header h2 {
+        font-size: 1.5em;
+    }
+
+.snapcast-client-container {
+    padding: 0 1.4em;
+}
+
+    .snapcast-client-header h3 {
+        font-size: 1.2em;
+    }
+
diff --git a/platypush/backend/http/static/js/music.snapcast.js b/platypush/backend/http/static/js/music.snapcast.js
index a59ead5677..2c5e3f0ca7 100644
--- a/platypush/backend/http/static/js/music.snapcast.js
+++ b/platypush/backend/http/static/js/music.snapcast.js
@@ -58,18 +58,26 @@ $(document).ready(function() {
                     .addClass('snapcast-group-header');
 
                 var $groupTitle = $('<h2></h2>')
-                    .addClass('eleven columns')
-                    .text(groupName);
+                    .addClass('ten columns');
 
                 var $groupSettings = $('<i></i>')
                     .addClass('snapcast-group-settings')
-                    .addClass('one column')
                     .addClass('fa fa-cog')
                     .data('name', groupName)
                     .data('id', group.id);
 
+                var $groupName = $('<span></span>')
+                    .html('&nbsp; ' + groupName);
+
+                var $groupMuteToggle = createPowerToggleElement({
+                    id: group.id,
+                    on: !group.muted,
+                }).addClass('two columns').addClass('snapcast-group-mute-toggle');
+
+                $groupSettings.appendTo($groupTitle);
+                $groupName.appendTo($groupTitle);
                 $groupTitle.appendTo($groupHeader);
-                $groupSettings.appendTo($groupHeader);
+                $groupMuteToggle.appendTo($groupHeader);
                 $groupHeader.appendTo($group);
 
                 for (var client of group.clients) {
@@ -79,23 +87,33 @@ $(document).ready(function() {
                         .data('name', clientName)
                         .data('id', client.id);
 
-                    var $clientHeader = $('<div></div>').addClass('row')
+                    var $clientRow = $('<div></div>').addClass('row')
                         .addClass('snapcast-client-header');
 
                     var $clientTitle = $('<h3></h3>')
-                        .addClass('eleven columns')
+                        .addClass('three columns')
                         .data('connected', client.connected)
                         .text(clientName);
 
+                    var $volumeSlider = $('<input></input>')
+                        .addClass('slider snapcast-volume-slider')
+                        .addClass('eight columns')
+                        .data('id', client.id)
+                        .attr('type', 'range')
+                        .attr('min', 0).attr('max', 100)
+                        .val(client.config.volume.percent);
+
                     var $clientMuteToggle = createPowerToggleElement({
-                        type: 'client',
                         id: client.id,
                         on: !client.config.volume.muted,
-                    }).addClass('one column');
+                    })
+                        .addClass('one column')
+                        .addClass('snapcast-client-mute-toggle');
 
-                    $clientTitle.appendTo($clientHeader);
-                    $clientMuteToggle.appendTo($clientHeader);
-                    $clientHeader.appendTo($client);
+                    $clientTitle.appendTo($clientRow);
+                    $volumeSlider.appendTo($clientRow);
+                    $clientMuteToggle.appendTo($clientRow);
+                    $clientRow.appendTo($client);
                     $client.appendTo($group);
                 }
 
@@ -106,7 +124,7 @@ $(document).ready(function() {
         }
     };
 
-    var initUi = function() {
+    var redraw = function() {
         var promises = [];
 
         for (var host of Object.keys(window.config.snapcast_hosts)) {
@@ -297,7 +315,7 @@ $(document).ready(function() {
     };
 
     var init = function() {
-        initUi();
+        redraw();
     };
 
     init();
diff --git a/platypush/backend/http/templates/plugins/music.snapcast.html b/platypush/backend/http/templates/plugins/music.snapcast.html
index 7b2baf6b12..9928b06468 100644
--- a/platypush/backend/http/templates/plugins/music.snapcast.html
+++ b/platypush/backend/http/templates/plugins/music.snapcast.html
@@ -1,5 +1,5 @@
 <script type="text/javascript" src="{{ url_for('static', filename='js/music.snapcast.js') }}"></script>
-<!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/light.hue.css') }}"></script> -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/music.snapcast.css') }}"></script>
 
 <script type="text/javascript">
     window.config = window.config || {};