{"version":3,"file":"index.7b748f5f.js","sources":["../../../app/frontend/entrypoints/page/home/section/pickupMusics/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport axios, { AxiosResponse, AxiosError } from 'axios'\n\nimport { useRecoilState, useRecoilValue } from 'recoil'\nimport { playQueueState } from '../../../../../src/atoms/PlayQueueAtom'\nimport { walletState } from '../../../../../src/atoms/WalletAtom'\n\nimport Slick from 'react-slick'\nimport 'slick-carousel/slick/slick.css'\nimport 'slick-carousel/slick/slick-theme.css'\n\nimport MusicCard from './card'\n\ntype NFT = {\n  chain_id: number\n  chain_name: string\n  contract_address: string\n  token_id: string\n  name: string\n  image: string\n  trial_sound: string\n  sound: string\n  artist_name: string\n  artist_public_id: string\n  genres: Genre[]\n}\n\nfunction HomePickupMusics() {\n  const [pickupNfts, setPickupNfts] = useState<NFT[]>([])\n\n  // レコメンドエンジンを使用可能な状態かどうか\n  const [isRecommendable, setIsRecommendable] = useState<boolean>(false)\n\n  // レコメンドエンジンを使用した結果を渡されたかどうか\n  const [useRecommend, setUseRecommend] = useState<boolean>(false)\n\n  const [, setPlayList] = useRecoilState(playQueueState)\n  const walletAddress = useRecoilValue(walletState)\n\n  useEffect(() => {\n    fetchPicupMusics('')\n  }, [])\n\n  useEffect(() => {\n    if (walletAddress) fetchPicupMusics(walletAddress)\n  }, [walletAddress])\n\n  const fetchPicupMusics = (wa: string) => {\n    axios({\n      method: 'GET',\n      url: `${import.meta.env.VITE_API_BASE_URI}/api/v1/home/pickup_musics`,\n      params: {\n        wallet_address: wa,\n      },\n    })\n      .then(\n        (\n          response: AxiosResponse<{\n            nfts: NFT[]\n            use_recommend: boolean\n            is_recommendable: boolean\n          }>\n        ) => {\n          setPickupNfts(response.data.nfts)\n          setIsRecommendable(response.data.is_recommendable)\n          setUseRecommend(response.data.use_recommend)\n        }\n      )\n      .catch((error: AxiosError<{ error: string }>) => {\n        console.error('error', error)\n      })\n  }\n\n  const playMusic = (target: {\n    chain_id: number\n    contract_address: string\n    token_id: string\n  }) => {\n    // targetのchain_id,contract_address,token_idを持つNFTをpickupNftsから探す\n    const targetNft = pickupNfts.find(\n      (nft) =>\n        nft.chain_id === target.chain_id &&\n        nft.contract_address === target.contract_address &&\n        nft.token_id === target.token_id\n    )\n    if (targetNft === undefined) return\n\n    // targetNft以降のNFTをplayListに追加する\n    const playList = pickupNfts.slice(pickupNfts.indexOf(targetNft))\n\n    // targetNft以前のNFTをplayListに追加する\n    const beforePlayList = pickupNfts.slice(0, pickupNfts.indexOf(targetNft))\n\n    // playListとbeforePlayListを結合する\n    const newPlayList = playList.concat(beforePlayList)\n\n    setPlayList(\n      newPlayList.map((nft) => {\n        return {\n          chain_id: nft.chain_id,\n          contract_address: nft.contract_address,\n          token_id: nft.token_id,\n          name: nft.name,\n          image: nft.image,\n          sound: nft.trial_sound,\n          artist_name: nft.artist_name,\n          artist_public_id: nft.artist_public_id,\n        }\n      })\n    )\n  }\n\n  const postRecommendResult = () => {\n    if (!walletAddress || !isRecommendable) return\n    axios({\n      method: 'POST',\n      url: `${import.meta.env.VITE_API_BASE_URI}/api/v1/home/recommend_result`,\n      params: {\n        wallet_address: walletAddress,\n        use_recommend: useRecommend,\n      },\n    })\n      .then((response: AxiosResponse<{ message: string }>) => {\n        // console.log(response.data.message)\n      })\n      .catch((error: AxiosError<{ error: string }>) => {\n        console.error('error', error)\n      })\n  }\n\n  const settings = {\n    autoplay: true,\n    autoplaySpeed: 5000,\n    dots: true,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 3,\n    centerMode: true,\n    centerPadding: '0',\n    swipeToSlide: true,\n    arrows: false,\n  }\n\n  const musicContents = (\n    <div className=\"musics\">\n      <Slick {...settings}>\n        {pickupNfts.map((nft, index) => (\n          <MusicCard\n            key={index}\n            nft={nft}\n            playMusic={playMusic}\n            postRecommendResult={postRecommendResult}\n          />\n        ))}\n      </Slick>\n    </div>\n  )\n\n  return <section className=\"pickup-musics\">{musicContents}</section>\n}\n\nexport default HomePickupMusics\n"],"names":["HomePickupMusics","pickupNfts","setPickupNfts","useState","isRecommendable","setIsRecommendable","useRecommend","setUseRecommend","setPlayList","useRecoilState","playQueueState","walletAddress","useRecoilValue","walletState","useEffect","fetchPicupMusics","wa","axios","method","url","params","wallet_address","then","response","data","nfts","is_recommendable","use_recommend","catch","error","playMusic","target","targetNft","find","nft","chain_id","contract_address","token_id","undefined","playList","slice","indexOf","beforePlayList","newPlayList","concat","map","name","image","sound","trial_sound","artist_name","artist_public_id","postRecommendResult","musicContents","Slick","autoplay","autoplaySpeed","dots","infinite","slidesToShow","slidesToScroll","centerMode","centerPadding","swipeToSlide","arrows","index","MusicCard"],"mappings":"6eA2BA,SAASA,GAAmB,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAgB,CAAE,CAAA,EAGhD,CAACC,EAAiBC,CAAkB,EAAIF,WAAkB,EAAK,EAG/D,CAACG,EAAcC,CAAe,EAAIJ,WAAkB,EAAK,EAEzD,EAAGK,CAAW,EAAIC,EAAeC,CAAc,EAC/CC,EAAgBC,EAAeC,CAAW,EAEhDC,EAAAA,UAAU,IAAM,CACdC,EAAiB,EAAE,CACrB,EAAG,CAAE,CAAA,EAELD,EAAAA,UAAU,IAAM,CACVH,GAAeI,EAAiBJ,CAAa,CAAA,EAChD,CAACA,CAAa,CAAC,EAEZI,MAAAA,EAAoBC,GAAe,CACjCC,EAAA,CACJC,OAAQ,MACRC,IAAM,qDACNC,OAAQ,CACNC,eAAgBL,CAClB,CAAA,CACD,EACEM,KAEGC,GAKG,CACWA,EAAAA,EAASC,KAAKC,IAAI,EACbF,EAAAA,EAASC,KAAKE,gBAAgB,EACjCH,EAAAA,EAASC,KAAKG,aAAa,CAAA,CAC5C,EAEFC,MAAOC,GAAyC,CACvCA,QAAAA,MAAM,QAASA,CAAK,CAAA,CAC7B,CAAA,EAGCC,EAAaC,GAIb,CAEJ,MAAMC,EAAY/B,EAAWgC,KAC1BC,GACCA,EAAIC,WAAaJ,EAAOI,UACxBD,EAAIE,mBAAqBL,EAAOK,kBAChCF,EAAIG,WAAaN,EAAOM,QAAQ,EAEpC,GAAIL,IAAcM,OAAW,OAG7B,MAAMC,EAAWtC,EAAWuC,MAAMvC,EAAWwC,QAAQT,CAAS,CAAC,EAGzDU,EAAiBzC,EAAWuC,MAAM,EAAGvC,EAAWwC,QAAQT,CAAS,CAAC,EAGlEW,EAAcJ,EAASK,OAAOF,CAAc,EAGhDC,EAAAA,EAAYE,IAAaX,IAChB,CACLC,SAAUD,EAAIC,SACdC,iBAAkBF,EAAIE,iBACtBC,SAAUH,EAAIG,SACdS,KAAMZ,EAAIY,KACVC,MAAOb,EAAIa,MACXC,MAAOd,EAAIe,YACXC,YAAahB,EAAIgB,YACjBC,iBAAkBjB,EAAIiB,gBAAAA,EAEzB,CAAC,CAAA,EAIAC,EAAsB,IAAM,CAC5B,CAACzC,GAAiB,CAACP,GACjBa,EAAA,CACJC,OAAQ,OACRC,IAAM,wDACNC,OAAQ,CACNC,eAAgBV,EAChBgB,cAAerB,CACjB,CAAA,CACD,EACEgB,KAAMC,GAAiD,CAAA,CAEvD,EACAK,MAAOC,GAAyC,CACvCA,QAAAA,MAAM,QAASA,CAAK,CAAA,CAC7B,CAAA,EAgBCwB,IACJ,MAAA,CAAK,UAAU,SAAQ,WACpBC,EAAK,CAAA,GAfO,CACfC,SAAU,GACVC,cAAe,IACfC,KAAM,GACNC,SAAU,GACVC,aAAc,EACdC,eAAgB,EAChBC,WAAY,GACZC,cAAe,IACfC,aAAc,GACdC,OAAQ,EAAA,EAKa,SAChB/D,EAAW4C,IAAI,CAACX,EAAK+B,MACnBC,EAAS,CAER,IAAAhC,EACA,UAAAJ,EACA,oBAAAsB,CAAyC,EAHpCa,CAAK,CAKb,CAAA,CAAC,CAAA,CAGP,EAED,SAAO,UAAA,CAAS,UAAU,gBAAe,SAAEZ,CAAAA,CAAwB,CACrE"}