Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-25 11:04:00 +00:00
Code Issues Projects Releases Wiki Activity

Show skin icons

Browse source
This commit is contained in:
Jordan Eldredge 2020-08-26 14:01:35 -07:00
parent b8cb979ab4
commit d976c80665
4 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/webamp/demo/js/DemoDesktop.tsx
View file

@ -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 (

2
packages/webamp/demo/js/DesktopIcon.tsx
View file

@ -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>
);

8
packages/webamp/demo/js/SkinIcon.tsx
View file

@ -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 (

2
packages/webamp/demo/js/config.ts
View file

@ -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);