Dynamic favicon (POC)

src/index.html

@@ -17,13 +17,10 @@
 	<meta name="mobile-web-app-capable" content="yes" />
 	<meta name="theme-color" content="#222222" />
 	
-	<!-- Icons -->
 	<link rel="apple-touch-startup-image" href="/iris/assets/app-icon_512.png" />
 	<link rel="apple-touch-icon" sizes="192x192" href="/iris/assets/logo-app_192.png" />
 	<link rel="apple-touch-icon" sizes="512x512" href="/iris/assets/logo-app_512.png" />
-	<link rel="shortcut icon" type="image/ico" href="/iris/assets/app-icon_64.png" />
-	<link rel="shortcut icon" type="image/x-icon" href="/iris/assets/app-icon_64.png" />
-	<link rel="shortcut-icon" href="/iris/assets/app-icon_64.png" />
+	<link id="favicon" rel="shortcut icon" type="image/ico" href="/iris/assets/app-icon_64.png" />
 	<link rel="mask-icon" href="/iris/assets/app-icon.svg" color="#08d58f" />
 
 	<!-- Loading screen styles -->

src/js/helpers.js

@@ -144,6 +144,28 @@ export let toJSON = function(data){
 }
 
 
+/**
+ * Set the app's favicon to a specific image.
+ * 
+ * @param file String
+ * @return Boolean 
+ */
+export let setFavicon = function(favicon){
+	console.log(favicon);
+	let link = document.createElement('link'),
+	oldLink = document.getElementById('favicon');
+	link.id = 'favicon';
+	link.rel = 'shortcut icon';
+	link.href = "/iris/assets/"+favicon;
+
+	if (oldLink) {
+		document.head.removeChild(oldLink);
+	}
+
+	document.head.appendChild(link);
+}
+
+
 /**
  * Check if an image URL is cached or not
  * Useful for bypassing load animations for cached assets (eg parallax)

src/js/services/pusher/middleware.js

@@ -261,13 +261,6 @@ const PusherMiddleware = (function(){
                     setTimeout(() => {
                         store.dispatch(pusherActions.connect())
                     }, 5000);
-
-                    if (e.code !== 3001) {
-                        store.dispatch(coreActions.handleException(
-                            'Pusher websocket connection error',
-                            e
-                        ));
-                    };
                 };
 
                 socket.onerror = (e) => {

src/js/services/ui/middleware.js

@@ -1,9 +1,9 @@
 
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga';
+import * as helpers from '../../helpers';
 
 var uiActions = require('./actions.js')
 var mopidyActions = require('../mopidy/actions.js')
-var helpers = require('../../helpers.js')
 
 const UIMiddleware = (function(){
 
@@ -36,9 +36,13 @@ const UIMiddleware = (function(){
                 }
 
                 if (play_state == 'playing'){
-                    window_title = '\u25B6';
+                    helpers.setFavicon('favicon.png');
                 } else {
-                    window_title = '\u25A0';
+                    helpers.setFavicon('favicon_paused.png');
+                }
+
+                if (!store.getState().mopidy.connected){
+                    helpers.setFavicon('favicon_error.png');
                 }
 
                 if (action.title){