import { WebampLazy } from "./Webamp" ; import { Suspense } from "react" ; import WebampIcon from "./WebampIcon" ; import SkinIcon from "./SkinIcon" ; import { 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 soundcloudIcon from "../images/icons/soundcloud-32x32.png" ; import { SoundCloudPlaylist } from "./SoundCloud" ; interface Props { webamp : WebampLazy ; soundCloudPlaylist : SoundCloudPlaylist | null ; } const ICON_WIDTH = 75 ; const ICON_HEIGHT = 100 ; const VERTICAL_MARGIN = 30 ; const HORIZONTAL_MARGIN = 10 ; const DemoDesktop = ( { webamp , soundCloudPlaylist } ) => { const { width } = useWindowSize ( ) ; const visibleWidth = width - VERTICAL_MARGIN * 2 ; const columns = Math . floor ( visibleWidth / ICON_WIDTH ) ; const icons = [ < WebampIcon webamp = { webamp } / > ] ; if ( SHOW_DESKTOP_ICONS ) { icons . push ( ... avaliableSkins . map ( ( skin ) => { return < SkinIcon webamp = { webamp } skin = { skin } / > ; } ) , < DesktopLinkIcon iconUrl = { museumIcon } name = "Winamp Skin Musuem" href = { "https://skins.webamp.org" } / > ) ; if ( soundCloudPlaylist != null ) { icons . push ( < DesktopLinkIcon iconUrl = { soundcloudIcon } name = { soundCloudPlaylist . title } href = { soundCloudPlaylist . permalink_url } / > ) ; } } return ( < div id = "desktop" style = { { position : "absolute" , top : 0 , left : 0 , right : 0 , marginTop : VERTICAL_MARGIN , marginLeft : HORIZONTAL_MARGIN , } } > < Suspense fallback = { null } > { icons . map ( ( icon , i ) => { const row = Math . floor ( i / columns ) ; const column = i % columns ; return ( < div className = "loaded-icon" key = { i } style = { { left : column * ICON_WIDTH , top : row * ICON_HEIGHT , width : ICON_WIDTH , position : "absolute" , } } > { icon } < /div>); } ) } < /Suspense> < /div>); } ; export default DemoDesktop ;