From 7fe34a4658e543fccabacf3c516709ae3501b2ec Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 7 Sep 2020 10:22:19 -0700
Subject: [PATCH] Add link to Winamp Skin Museum

---
 .../images/icons/internet-folder-32x32.png    | Bin 0 -> 670 bytes
 packages/webamp/demo/js/DemoDesktop.tsx       |  10 +++-
 packages/webamp/demo/js/DesktopLinkIcon.tsx   |  52 ++++++++++++++++++
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 packages/webamp/demo/images/icons/internet-folder-32x32.png
 create mode 100644 packages/webamp/demo/js/DesktopLinkIcon.tsx

diff --git a/packages/webamp/demo/images/icons/internet-folder-32x32.png b/packages/webamp/demo/images/icons/internet-folder-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9aac1f63954d4afd43d7ef006f99a2e4b223062
GIT binary patch
literal 670
zcmV;P0%84$P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80007INkl<Zc-rMx
zEpH<+5FJa6N{U-lQqmtVi;D6Cj)oLf2W(VS5>nJ(vHk&-s^f=>i((dBa^R$rI}jKt
zH)DG@w%6H@Y_6@;kyhEw+V8!2GxqKZ_}~zqPC!}0rfbsO-3hE#tAmJ-K$u)g=GU#0
zj4?2sJ|09w4bYeT&>}=l{{1h&(bJ&GhY%r{98r!*f`s&QEexex@?vZK`^IE4f%SSV
z#L(LJvxE-JoCnuhE4!M;38=u+-<*(Syf%tNz(@f>2!+x0Mw-|Kh{do2dkaX(YSPlw
zS@M|hI(2R@2P$Gr5z!DP@^Wyb6orzoDD}=#4Hi%o2!<w0I*<<Khx56yk`fUeeKDv6
zOm1mtySTo*gz4i+mAJ#?+oVidU}%a+`(UU8MFEz)l+Ie?(JGRHOGEdhM0-c8Z7D`O
zz}ZWwDLaHhOOFu{1mkdll$j?ni3otmjouE-=dUoEUC?0kIL!uhn92VgW$1Q*2G4&u
zat2dIdW3BWx}x3-!r?=Dz-E8(hsaAS!e#3OMBr(+x1IawCE(`f1+K1+X|VJHswIcp
zHSU3JBO(TWX#$4Wfk0@!1W7h5V0nCNpZj2b6aKfX3wD`e+yk`$fMywnIIvva!eU{F
zq*8~Gh{mp1k(W)|`}IKJ0yp9F^Nj3vnVy~9+ac%YKcnuiL>P~;kxjz151In_ttRt~
zaa*u)85w>a0G$51hqt!}avlA1z;}I_@AzD_mmui{w-vkKa^#vSx7oA_+3i5vvTAw3
z*tO^P+6VZhbe|W?v0(*RQP}-8^gn`DxA=VDhF?y=KT=J?(p=odmH+?%07*qoM6N<$
Eg1c5iqW}N^

literal 0
HcmV?d00001

diff --git a/packages/webamp/demo/js/DemoDesktop.tsx b/packages/webamp/demo/js/DemoDesktop.tsx
index ee5b4b23..4ce435cd 100644
--- a/packages/webamp/demo/js/DemoDesktop.tsx
+++ b/packages/webamp/demo/js/DemoDesktop.tsx
@@ -6,6 +6,8 @@ import SkinIcon from "./SkinIcon";
 import { /* defaultInitialTracks, */ SHOW_DESKTOP_ICONS } from "./config";
 import { useWindowSize } from "../../js/hooks";
 import avaliableSkins from "./avaliableSkins";
+import DesktopLinkIcon from "./DesktopLinkIcon";
+import museumIcon from "../images/icons/internet-folder-32x32.png";
 // import MilkIcon from "./MilkIcon";
 
 interface Props {
@@ -34,7 +36,7 @@ const DemoDesktop = ({ webamp }: Props) => {
       */
       ...avaliableSkins.map((skin) => {
         return <SkinIcon webamp={webamp} skin={skin} />;
-      })
+      }),
       /*
       <MilkIcon
         webamp={webamp}
@@ -44,7 +46,11 @@ const DemoDesktop = ({ webamp }: Props) => {
           name: "105",
         }}
       />
-      */
+      */ <DesktopLinkIcon
+        iconUrl={museumIcon}
+        name="Winamp Skin Musuem"
+        href={"https://skins.webamp.org"}
+      />
     );
   }
   return (
diff --git a/packages/webamp/demo/js/DesktopLinkIcon.tsx b/packages/webamp/demo/js/DesktopLinkIcon.tsx
new file mode 100644
index 00000000..7f88d95a
--- /dev/null
+++ b/packages/webamp/demo/js/DesktopLinkIcon.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState, useRef } from "react";
+import classnames from "classnames";
+
+interface Props {
+  iconUrl: string;
+  name: string;
+  href: string;
+}
+
+const DesktopLinkIcon = ({ iconUrl, href, name }: Props) => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const [selected, setSelected] = useState(false);
+
+  useEffect(() => {
+    if (!selected) {
+      return;
+    }
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current != null && ref.current.contains(e.target as Element)) {
+        return;
+      }
+      setSelected(false);
+    };
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, [selected]);
+
+  return (
+    <a
+      ref={ref}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ display: "block", textDecoration: "none" }}
+      onDoubleClick={() => {
+        setSelected(false);
+      }}
+      onClick={(e) => {
+        if (!selected) {
+          e.preventDefault();
+        }
+        setSelected(true);
+      }}
+      className={classnames("desktop-icon", { selected })}
+    >
+      <img src={iconUrl} style={{ width: 32, height: 32 }} />
+      <div className="desktop-icon-title">{name}</div>
+    </a>
+  );
+};
+
+export default DesktopLinkIcon;