Merge pull request #1032 from jakejarrett/settings-api-key

Introduce a setting for the API Key

Author: jakejarrett

app/public/js/common/openExternalLinkDirective.js

@@ -12,7 +12,7 @@ app.directive('openExternal', function () {
                 if ( this.hasAttribute('data-link') ) {
                     el = attrs.href;
                 } else {
-                    el = attrs.href + '?client_id=' + window.scClientId;
+                    el = attrs.href + '?client_id=' + window.localStorage.scClientId;
                 }
                 gui.Shell.openExternal( el );
             });

app/public/js/common/playerService.js

@@ -151,7 +151,7 @@ app.factory('playerService', function (
       trackObj.songThumbnail = 'public/img/song-placeholder.png';
     }
 
-    trackUrl = trackObj.songUrl + '?client_id=' + $window.scClientId;
+    trackUrl = trackObj.songUrl + '?client_id=' + window.localStorage.scClientId;
 
     // check rate limit
     utilsService.isPlayable(trackUrl).then(function () {

app/public/js/settings/settingsCtrl.js

@@ -2,6 +2,7 @@
 
 app.controller('SettingsCtrl', function ($scope, notificationFactory) {
     $scope.title = "Settings";
+    $scope.client_id = window.localStorage.scClientId;
 
     /**
      * Enable or disable song notification
@@ -16,6 +17,10 @@ app.controller('SettingsCtrl', function ($scope, notificationFactory) {
         window.localStorage.notificationToggle = $scope.notification;
     };
 
+    $scope.scClientId = function () {
+        window.localStorage.scClientId = $scope.client_id;
+    };
+
     /**
      * Clea storage which remove everything stored in window.localStorage
      */

app/public/js/system/settings.js

@@ -17,4 +17,4 @@ window.settings.visitor = ua('UA-67310953-1');
 window.scAccessToken = userConfig.accessToken;
 
 // set window clientId
-window.scClientId = userConfig.clientId;
+window.localStorage.setItem('scClientId', userConfig.clientId);

app/public/stylesheets/sass/_components/_settings.scss

@@ -12,6 +12,11 @@
     justify-content: center;
     margin: 10px 0 10px;
 }
+
+.flex-column {
+    flex-direction: column;
+}
+
 // Switch for Settings
 .onoffswitch {
     position: relative;
@@ -64,3 +69,13 @@
     box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(0, 0, 0, .3);
 }
+
+.settings-secondary-container {
+    width: 590px;
+}
+
+input[type="text"].full-width {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    width: 100%;
+}

app/views/settings/settings.html

@@ -16,6 +16,15 @@ <h2>Notifications</h2>
                 </div>
             </div>
         </li>
+        <li class="full-flex flex-column">
+            <div class="settings-secondary-container leftSide">
+                <h2>API Key</h2>
+                <label>Swap out API Key for your own.</label>
+            </div>
+            <div class="settings-secondary-container leftSide">
+                <input type="text" class="full-width" name="client_id" id="client_id" ng-model="client_id" ng-change="scClientId()" ng-value="client_id">
+            </div>
+        </li>
         <li class="full-flex">
             <div class="settings-container leftSide">
                 <h2>Clean local storage</h2>