From 30e6f1cf3c504f1bd1fedd30ec1f47a4ac3858cc Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 23 Mar 2019 14:23:18 -0700
Subject: [PATCH] Make Webamp image look nicer on retina displays

---
 demo/js/WebampIcon.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/demo/js/WebampIcon.tsx b/demo/js/WebampIcon.tsx
index 3bc2f9ca..c0fb6ff5 100644
--- a/demo/js/WebampIcon.tsx
+++ b/demo/js/WebampIcon.tsx
@@ -1,7 +1,11 @@
 import WebampLazy from "../../js/webampLazy";
 import React, { useEffect, useState, useRef } from "react";
 // @ts-ignore
-import icon from "../images/manifest/icon-48x48.png";
+import iconLarge from "../images/manifest/icon-96x96.png";
+// @ts-ignore
+import iconSmall from "../images/manifest/icon-48x48.png";
+
+const icon = window.devicePixelRatio > 1 ? iconLarge : iconSmall;
 
 interface Props {
   webamp: WebampLazy;
@@ -43,7 +47,7 @@ const WebampIcon = (props: Props) => {
         onClick={() => setSelected(true)}
         className={selected ? "selected" : ""}
       >
-        <img src={icon} />
+        <img src={icon} style={{ width: 48, height: 48 }} />
         <div className="webamp-icon-title">Webamp</div>
       </div>
     )