{"version":3,"file":"MusicSection-E-bCXHH1.js","sources":["../../../resources/js/Pages/Home/MusicSection/MusicSection.vue"],"sourcesContent":["<script setup>\nimport { socialClick } from \"@/Helpers/Api\";\nimport 'swiper/css';\nimport 'swiper/css/navigation';\n</script>\n\n<script>\nimport Button from \"@/Components/Button/Button.vue\";\nimport { Link } from '@inertiajs/inertia-vue3';\nimport App from \"@/Pages/App.vue\";\nimport { ref } from 'vue';\nimport Icon from '@/Components/Icon/Icon.vue'\nimport { send, spotify } from \"@/Helpers/Api\";\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { Pagination, Navigation, Autoplay, Keyboard } from 'swiper';\n\n\nexport default {\n    components: {\n        App,\n        Icon,\n        Link,\n        Swiper,\n        SwiperSlide,\n    },\n    data() {\n        return {\n            albuns: [],\n            artist: [],\n            config: this.$inertia.page.props.siteConfig.basic_configurations[0],\n            modules: [Autoplay, Navigation, Keyboard, Pagination],\n            breakpoints: {\n                '640': {\n                    slidesPerView: 3,\n                    spaceBetween: 10,\n                    centeredSlides: true,\n                },\n                '768': {\n                    slidesPerView: 1.75,\n                    spaceBetween: 10,\n                    centeredSlides: false,\n                },\n                '1024': {\n                    slidesPerView: 3,\n                    spaceBetween: 20,\n                    centeredSlides: false,\n                },\n                '1280': {\n                    slidesPerView: 4,\n                    spaceBetween: 20,\n                    centeredSlides: false,\n                },\n                '1536': {\n                    slidesPerView: 4,\n                    spaceBetween: 10,\n                    centeredSlides: false,\n                },\n            },\n            iframe: ref(''),\n            idAlbum: '',\n            imageAlbum: '',\n            nameAlbum: '',\n            idI: '',\n            music: [],\n            firstAlbum: '',\n\n        }\n    },\n    mounted() {\n        send('music')\n            .then((data) => {\n                this.music = data\n                // console.log(data)\n                this.spotifyData()\n            })\n        // console.log(this.config)\n\n    },\n    methods: {\n        iframeHtml(idAlbum, image, name) {\n            this.imageAlbum = image;\n            this.nameAlbum = name;\n            if (idAlbum) {\n                this.iframe = '<iframe class=\"h-full\" style=\"border-radius:12px\" src=\"https://open.spotify.com/embed/album/' + idAlbum + '?utm_source=generator&theme=0\" width=\"100%\" height=\"152\" frameBorder=\"0\" allowfullscreen=\"\" allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\" loading=\"lazy\"></iframe>'\n            }\n\n        },\n        goNext() {\n            this.$emit('prev');\n        },\n        goPrev() {\n            this.$emit('next');\n        },\n        async spotifyData() {\n\n            if (this.music.type === 'top_tracks') {\n                const resTop = await spotify('album_single_filter', {\n                    'limit': this.music.amount\n                })\n\n                this.albuns = resTop\n                this.firstAlbum = this.albuns[0]\n            } else {\n                const resAlbum = await spotify('album_single', {\n                    'type': this.music.type,\n                    'limit': this.music.amount\n                })\n\n                this.albuns = resAlbum\n\n                this.firstAlbum = this.albuns[0]\n            }\n\n            if (this.albuns.length > 0) {\n                this.idAlbum = this.albuns.find(({ id }) => id === this.music.music_id) ? this.albuns.find(({ id }) => id === this.music.music_id) : this.firstAlbum\n            }\n\n            if (this.idAlbum.images) {\n                this.imageAlbum = this.idAlbum.images[1].url\n            }\n\n            this.nameAlbum = this.idAlbum.name\n            this.iframe = '<iframe style=\"border-radius:12px\" src=\"https://open.spotify.com/embed/album/' + this.idAlbum.id + '?utm_source=generator&theme=0\" width=\"100%\" height=\"152\" frameBorder=\"0\" allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\" loading=\"lazy\"></iframe>'\n\n        },\n    }\n}\n</script>\n\n<template>\n    <section id=\"music\" class=\"c-music\">\n        <div class=\"md:container\">\n            <div class=\"flex items-center justify-between pb-10 md:pb-8\">\n                <h2 class=\"o-title uppercase text-secondary font-tertiary leading-none px-6 md:px-0\" data-aos=\"fade-up\"\n                    data-aos-delay=\"200\">\n                    Música\n                </h2>\n\n                <Icon name=\"icon-spotify\" class=\"hidden fill-green h-12 md:block\" />\n            </div>\n\n\n            <div class=\"flex items-center gap-5 w-full\">\n\n                <div class=\"hidden md:flex flex-col items-center gap-2\" v-if=\"imageAlbum\" data-aos=\"fade-up\"\n                    data-aos-delay=\"250\">\n                    <figure class=\"rounded-full overflow-hidden w-32 lg:w-36 h-32 lg:h-36\">\n                        <img class=\"object-cover pointer-events-none aspect-square\" :src=\"albuns[0].images[0].url\" :alt=\"nameAlbum\"\n                            width=\"300\" height=\"300\">\n                    </figure>\n                    <a :href=\"config.spotify\" target=\"_blank\"\n                        class=\" py-1 px-8 w-max font-semibold text-secondary uppercase bg-success rounded-full\">\n                        Seguir\n                    </a>\n                </div>\n\n                <div class=\"hidden md:block h-[152px]\" v-html=\"iframe\" data-aos=\"fade-up\" data-aos-delay=\"200\"></div>\n                \n                <swiper class=\"flex-1\" v-if=\"true\" ref=\"swiper\" :effect=\"'fade'\" :keyboard=\"true\" :slidesPerView=\"1.5\"\n                    :spaceBetween=\"30\" :allowTouchMove=\"true\" :grabCursor=\"true\" :centeredSlides=\"true\" :loop=\"false\"\n                    slideActiveClass=\"active\"\n                    :navigation=\"{ nextEl: '.custom-next-button', prevEl: '.custom-prev-button' }\"\n                    :breakpoints=\"breakpoints\" :modules=\"modules\">\n\n                    <swiper-slide v-for=\"(item, key) in albuns\" :key=\"key\">\n\n                        <div class=\"flex flex-col items-center gap-4\">\n                            <button v-if=\"item.images\" type=\"button\"\n                                @click=\"iframeHtml(item.id, item.images[0].url, item.name)\"\n                                class=\"hidden c-album__item md:block\" :aria-label=\"item.name\">\n                                <img :src=\"item.images[1].url\" :alt=\"item.name\" width=\"100\" height=\"100\">\n                            </button>\n                            <a v-if=\"item.images\" :href=\"item.external_urls.spotify\" target=\"_blank\"\n                                class=\"c-album__item md:hidden\" :aria-label=\"item.name\">\n                                <img :src=\"item.images[1].url\" :alt=\"item.name\" width=\"88\" height=\"88\">\n                            </a>\n\n                            <Button color=\"success\" type=\"a\" :href=\"item.external_urls.spotify\" target=\"_blank\"  class=\" block md:hidden w-full justify-center py-2\"\n                                 >\n                                Play\n                            </Button>\n\n                        </div>\n\n                    </swiper-slide>\n\n                    <div class=\"hidden swipper-navigation\">\n                        <div class=\"container flex justify-between\">\n                            <button type=\"button\" class=\"swiper-nav-button custom-prev-button\" @click=\"goPrev\">\n                                ANTERIOR\n                            </button>\n\n                            <button type=\"button\" class=\"swiper-nav-button custom-next-button\" @click=\"goNext\">\n                                PRÓXIMO\n                            </button>\n                        </div>\n                    </div>\n                </swiper>\n\n\n                \n            </div>\n            <div class=\"container mt-6\">\n                <div class=\"c-deslize \">\n                    <Icon name=\"icon-indicator\" class=\"c-deslize__indicator 0\" />\n                    Deslize para navegar\n                </div>\n            </div>\n\n        </div>\n\n        <div\n            class=\"c-music__footer flex flex-col md:flex-row items-center justify-center gap-1 md:gap-4 py-6 md:py-4 mt-14\">\n            <p\n                class=\"text-lg text-secondary font-secondary text-center md:text-end uppercase leading-6  relative z-[1]\">\n                Ouça\n                também em <br> outras\n                plataformas\n            </p>\n            <ul class=\"c-streaming  relative mt-2 md:mt-0 z-[1]\" data-aos=\"fade-up\" data-aos-delay=\"450\">\n\n                <li v-if=\"config.link_deezer\">\n                    <button type=\"button\" @click=\"socialClick(config.link_deezer, 'deezer')\" class=\"c-streaming__link\"\n                        aria-label=\"Deezer\">\n                        <Icon name=\"icon-deezer\" class=\"hidden h-7 md:block fill-white\" />\n                        <Icon name=\"icon-deezer-symbol\" class=\" fill-white h-6 w-6 md:hidden\" />\n                    </button>\n                </li>\n\n                <li v-if=\"config.link_music\">\n                    <button type=\"button\" @click=\"socialClick(config.link_music, 'apple_music')\"\n                        class=\"c-streaming__link\" aria-label=\"Apple Music\">\n                        <Icon name=\"icon-applemusic\" class=\"hidden h-6 md:block fill-white\" />\n                        <Icon name=\"icon-applemusic-symbol\" class=\"h-6 w-6 md:hidden fill-white\" />\n                    </button>\n                </li>\n\n\n                <li v-if=\"config.link_tidal\">\n                    <button type=\"button\" @click=\"socialClick(config.link_tidal, 'tidal')\" class=\"c-streaming__link\"\n                        aria-label=\"Tidal\">\n                        <Icon name=\"icon-tidal\" class=\"hidden h-6 md:block fill-white\" />\n                        <Icon name=\"icon-tidal-symbol\" class=\"h-6 w-6 fill-white md:hidden\" />\n                    </button>\n                </li>\n\n                <li v-if=\"config.link_napster\">\n                    <button type=\"button\" @click=\"socialClick(config.link_napster, 'napster')\" class=\"c-streaming__link\"\n                        aria-label=\"Napster\">\n                        <Icon name=\"icon-napster\" class=\"hidden h-7 md:block fill-white\" />\n                        <Icon name=\"icon-napster-symbol\" class=\"h-6 w-6 fill-white md:hidden\" />\n                    </button>\n                </li>\n\n\n                <li v-if=\"config.link_youtube_music\">\n                    <button type=\"button\" @click=\"socialClick(config.link_youtube_music, 'youtube_music')\"\n                        class=\"c-streaming__link\" aria-label=\"Youtube Music\">\n                        <Icon name=\"icon-youtubemusic\" class=\"hidden h-5 md:block fill-white\" />\n                        <Icon name=\"icon-youtubemusic-symbol\" class=\"fill-white w-6 h-6 md:hidden\" />\n                    </button>\n                </li>\n            </ul>\n        </div>\n\n\n    </section>\n</template>\n\n<style src=\"./style.scss\" lang=\"scss\" scoped />\n"],"names":["__default__","components","App","Icon","Link","Swiper","SwiperSlide","j","albuns","artist","config","this","$inertia","page","props","siteConfig","basic_configurations","modules","Autoplay","Navigation","Keyboard","Pagination","breakpoints","slidesPerView","spaceBetween","centeredSlides","iframe","ref","idAlbum","imageAlbum","nameAlbum","idI","music","firstAlbum","send","then","data","spotifyData","methods","image","name","goNext","$emit","goPrev","type","resTop","spotify","limit","amount","resAlbum","length","find","id","music_id","images","url"],"mappings":"2wDAiBAA,EAAAA,GAAe,CACXC,WAAY,CACRC,IAAAA,EACAC,OACAC,KACAC,EAAAA,OAAAA,EACAC,YAEJC,CAAA,EAAA,MACI,CAAA,MAAO,CACHC,OAAQ,CACRC,EAAAA,OAAQ,CACRC,EAAAA,OAAQC,KAAKC,SAASC,KAAKC,MAAMC,WAAWC,qBAAqB,CACjEC,EAAAA,QAAS,CAACC,EAAUC,EAAYC,EAAUC,CAC1CC,EAAAA,YAAa,CACT,IAAO,CACHC,cAAe,EACfC,aAAc,GACdC,eAAgB,EAAA,EAEpB,IAAO,CACHF,cAAe,KACfC,aAAc,GACdC,eAAgB,EAAA,EAEpB,KAAQ,CACJF,cAAe,EACfC,aAAc,GACdC,eAAgB,EAAA,EAEpB,KAAQ,CACJF,cAAe,EACfC,aAAc,GACdC,eAAgB,EAAA,EAEpB,KAAQ,CACJF,cAAe,EACfC,aAAc,GACdC,iBAGRC,CAAAA,EAAAA,OAAQC,EAAI,EAAA,EACZC,QAAS,GACTC,WAAY,GACZC,UAAW,GACXC,IAAK,GACLC,MAAO,CAAA,EACPC,WAAY,EAAA,CAGnB,EACD,SACIC,CAAAA,EAAK,OACAC,EAAAA,KAAMC,GACHzB,CAAAA,KAAKqB,MAAQI,EAEbzB,KAAK0B,YAAAA,CAAa,CAI7B,CAAA,EACDC,QAAS,CACL,WAAWV,EAASW,EAAOC,EACvB7B,CAAAA,KAAKkB,WAAaU,EAClB5B,KAAKmB,UAAYU,EACbZ,IACAjB,KAAKe,OAAS,+FAAiGE,EAAU,0MAGhI,EACD,QAAAa,CACI9B,KAAK+B,MAAM,MACd,CAAA,EACD,QAAAC,CACIhC,KAAK+B,MAAM,MACd,CAAA,EACD,MAAML,aAAAA,CAEF,GAAI1B,KAAKqB,MAAMY,OAAS,aAAc,CAClC,MAAMC,EAAeC,MAAAA,EAAQ,sBAAuB,CAChDC,MAASpC,KAAKqB,MAAMgB,MAAAA,CAAAA,EAGxBrC,KAAKH,OAASqC,EACdlC,KAAKsB,WAAatB,KAAKH,OAAO,CAAA,CAC9C,KAAmB,CACH,MAAMyC,EAAAA,MAAiBH,EAAQ,eAAgB,CAC3CF,KAAQjC,KAAKqB,MAAMY,KACnBG,MAASpC,KAAKqB,MAAMgB,MAAAA,CAAAA,EAGxBrC,KAAKH,OAASyC,EAEdtC,KAAKsB,WAAatB,KAAKH,OAAO,CAAA,CACjC,CAEGG,KAAKH,OAAO0C,OAAS,IACrBvC,KAAKiB,QAAUjB,KAAKH,OAAO2C,KAAK,CAAGC,CAAAA,GAAAA,CAAAA,IAASA,IAAOzC,KAAKqB,MAAMqB,QAAAA,EAAY1C,KAAKH,OAAO2C,KAAK,CAAA,CAAGC,QAASA,IAAOzC,KAAKqB,MAAMqB,QAAAA,EAAY1C,KAAKsB,YAG1ItB,KAAKiB,QAAQ0B,SACb3C,KAAKkB,WAAalB,KAAKiB,QAAQ0B,OAAO,CAAGC,EAAAA,KAG7C5C,KAAKmB,UAAYnB,KAAKiB,QAAQY,KAC9B7B,KAAKe,OAAS,gFAAkFf,KAAKiB,QAAQwB,GAAK,sLAErH"}