From d976c80665b7a8684540e768e81a659e09e0dedd Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 26 Aug 2020 14:01:35 -0700
Subject: [PATCH] Show skin icons

---
 packages/webamp/demo/js/DemoDesktop.tsx | 12 ++++++++----
 packages/webamp/demo/js/DesktopIcon.tsx |  2 +-
 packages/webamp/demo/js/SkinIcon.tsx    |  8 ++++----
 packages/webamp/demo/js/config.ts       |  2 +-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/webamp/demo/js/DemoDesktop.tsx b/packages/webamp/demo/js/DemoDesktop.tsx
index 8f6097e3..ee5b4b23 100644
--- a/packages/webamp/demo/js/DemoDesktop.tsx
+++ b/packages/webamp/demo/js/DemoDesktop.tsx
@@ -1,12 +1,12 @@
 import WebampLazy from "../../js/webampLazy";
 import React from "react";
 import WebampIcon from "./WebampIcon";
-import Mp3Icon from "./Mp3Icon";
+// import Mp3Icon from "./Mp3Icon";
 import SkinIcon from "./SkinIcon";
-import { defaultInitialTracks, SHOW_DESKTOP_ICONS } from "./config";
+import { /* defaultInitialTracks, */ SHOW_DESKTOP_ICONS } from "./config";
 import { useWindowSize } from "../../js/hooks";
 import avaliableSkins from "./avaliableSkins";
-import MilkIcon from "./MilkIcon";
+// import MilkIcon from "./MilkIcon";
 
 interface Props {
   webamp: WebampLazy;
@@ -27,12 +27,15 @@ const DemoDesktop = ({ webamp }: Props) => {
 
   if (SHOW_DESKTOP_ICONS) {
     icons.push(
+      /*
       ...defaultInitialTracks.map((track) => {
         return <Mp3Icon webamp={webamp} track={track} />;
       }),
+      */
       ...avaliableSkins.map((skin) => {
         return <SkinIcon webamp={webamp} skin={skin} />;
-      }),
+      })
+      /*
       <MilkIcon
         webamp={webamp}
         preset={{
@@ -41,6 +44,7 @@ const DemoDesktop = ({ webamp }: Props) => {
           name: "105",
         }}
       />
+      */
     );
   }
   return (
diff --git a/packages/webamp/demo/js/DesktopIcon.tsx b/packages/webamp/demo/js/DesktopIcon.tsx
index 40e415af..791caba8 100644
--- a/packages/webamp/demo/js/DesktopIcon.tsx
+++ b/packages/webamp/demo/js/DesktopIcon.tsx
@@ -37,7 +37,7 @@ const DesktopIcon = ({ iconUrl, onOpen, name, onDragStart }: Props) => {
       className={classnames("desktop-icon", { selected })}
       onDragStart={onDragStart}
     >
-      <img src={iconUrl} style={{ width: 48, height: 48 }} />
+      <img src={iconUrl} style={{ width: 32, height: 32 }} />
       <div className="desktop-icon-title">{name}</div>
     </div>
   );
diff --git a/packages/webamp/demo/js/SkinIcon.tsx b/packages/webamp/demo/js/SkinIcon.tsx
index 6a79825a..a8459ca0 100644
--- a/packages/webamp/demo/js/SkinIcon.tsx
+++ b/packages/webamp/demo/js/SkinIcon.tsx
@@ -1,12 +1,11 @@
 import WebampLazy from "../../js/webampLazy";
 import React from "react";
 // @ts-ignore
-import iconLarge from "../images/manifest/icon-96x96.png";
-// @ts-ignore
-import iconSmall from "../images/manifest/icon-48x48.png";
+import iconSmall from "../images/icons/paint-file-32x32.png";
 import DesktopIcon from "./DesktopIcon";
+import { log } from "./logger";
 
-const iconUrl = window.devicePixelRatio > 1 ? iconLarge : iconSmall;
+const iconUrl = iconSmall;
 
 interface Props {
   webamp: WebampLazy;
@@ -15,6 +14,7 @@ interface Props {
 
 const SkinIcon = ({ webamp, skin }: Props) => {
   function onOpen() {
+    log({ category: "SkinIcon", action: "click", label: skin.name });
     webamp.setSkinFromUrl(skin.url);
   }
   return (
diff --git a/packages/webamp/demo/js/config.ts b/packages/webamp/demo/js/config.ts
index 3592ebec..b6080adc 100644
--- a/packages/webamp/demo/js/config.ts
+++ b/packages/webamp/demo/js/config.ts
@@ -26,7 +26,7 @@ if (config.audioUrl && !config.initialTracks) {
   config.initialTracks = [{ url: config.audioUrl }];
 }
 
-export let SHOW_DESKTOP_ICONS = false;
+export let SHOW_DESKTOP_ICONS = true;
 
 if ("URLSearchParams" in window) {
   const params = new URLSearchParams(location.search);