{"version":3,"file":"ReleaseGroup-5ef3949b.js","sources":["../../../resources/js/views/ReleaseGroup.vue"],"sourcesContent":["<template>\n    <div v-if=\"loaded\">\n        <header class=\"flex justify-start items-end relative h-[330px] md:h-[350px] lg:h-[460px]\">\n            <div class=\"absolute w-full h-full\" :style=\"{ backgroundColor: gradientColour }\" />\n\n            <div\n                class=\"absolute w-full h-full\"\n                style=\"\n                    background-image: linear-gradient(transparent 0, rgba(0, 0, 0, 0.5) 100%), var(--background-noise);\n                \"\n            />\n\n            <div\n                class=\"flex justify-start items-end relative mx-auto max-w-screen-xl w-full transition-opacity ease-in-out duration-500\"\n                :class=\"opacity\"\n            >\n                <Artwork\n                    v-if=\"showAnimation && activeRelease\"\n                    :release=\"activeRelease\"\n                    @animationLoaded=\"animationLoaded\"\n                />\n\n                <div class=\"flex-1 hidden md:block mb-14 ml-4\">\n                    <ReleaseTitles\n                        :page-name=\"pageName\"\n                        :page-thumb=\"pageThumb\"\n                        :page-url=\"pageUrl\"\n                        :release=\"activeRelease\"\n                        :main-genre=\"releaseGroup.main_genre\"\n                        :sub-genre=\"releaseGroup.sub_genre\"\n                        class=\"hidden md:block\"\n                    />\n                </div>\n            </div>\n        </header>\n\n        <section class=\"relative\">\n            <div\n                class=\"absolute w-full top-0 left-0 h-64 z-0\"\n                :style=\"{ backgroundColor: gradientColour }\"\n                style=\"background-image: linear-gradient(rgba(0, 0, 0, 0.7) 0, #121212 100%), var(--background-noise)\"\n            />\n\n            <div class=\"relative max-w-md md:max-w-screen-md m-auto p-4 z-10\">\n                <div class=\"mt-4 md:hidden\">\n                    <ReleaseTitles\n                        :page-name=\"pageName\"\n                        :page-thumb=\"pageThumb\"\n                        :page-url=\"pageUrl\"\n                        :release=\"activeRelease\"\n                        :main-genre=\"releaseGroup.main_genre\"\n                        :sub-genre=\"releaseGroup.sub_genre\"\n                    />\n                </div>\n\n                <div class=\"mt-8 md:mt-12 md:flex md:justify-between md:space-x-28\">\n                    <div class=\"flex-1 w-full md:w-60\">\n                        <ReleaseDetails\n                            v-if=\"activeRelease\"\n                            :active-release=\"activeRelease\"\n                            :releases=\"releases\"\n                            :description=\"isSmall || isMedium ? null : releaseGroup.description\"\n                            class=\"order-1\"\n                            @releaseChanged=\"chooseRelease\"\n                        />\n                    </div>\n                    <div class=\"flex-1 w-full md:w-60\">\n                        <TrackListing\n                            v-if=\"activeRelease\"\n                            :total-sides=\"totalSides\"\n                            :tracks=\"activeRelease.tracks\"\n                            :description=\"isSmall || isMedium ? releaseGroup.description : null\"\n                            :ownership=\"ownership\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </section>\n\n        <FooterPlayer />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ComputedRef, inject, nextTick, onMounted, ref, watch } from 'vue';\n    import { useStore } from 'vuex';\n\n    import useAudioPlayer from '@/composables/useAudioPlayer';\n    import useAxiosErrorHandler from '@/composables/useAxiosErrorHandler';\n    import useDeviceAware from '@/composables/useDeviceAware';\n    import { event } from '@/ga';\n    import { findIndex } from 'lodash';\n\n    import Artwork from '@/components/global/Artwork.vue';\n    import FooterPlayer from '@/components/global/FooterPlayer.vue';\n    import TrackListing from '@/components/retail/album/TrackListing.vue';\n    import ReleaseDetails from '@/components/retail/releaseGroup/ReleaseDetails.vue';\n    import ReleaseTitles from '@/components/retail/releaseGroup/ReleaseTitles.vue';\n\n    import { Release, ReleaseOwnership } from '@/types/release';\n\n    const { isSmall, isMedium } = useDeviceAware();\n    const store = useStore();\n\n    const { releaseGroupUuid, pageUuid, pageName, pageThumb, pageUrl } = defineProps<{\n        releaseGroupUuid: string;\n        pageUuid: string;\n        pageName: string;\n        pageThumb: string;\n        pageUrl: string;\n    }>();\n\n    const { stop, buildPlaylist, setTrack, hasTrack } = useAudioPlayer(inject('audio'));\n\n    const loaded = ref<boolean>(false);\n    const activeIndex = ref<number>(0);\n    const activeRelease = ref<any>(null);\n    const gradientColour = ref<string>('#000');\n    const showAnimation = ref<boolean>(true);\n    const opacity = ref<string>('opacity-0');\n\n    const releases = computed(() => store.getters['releaseGroups/getReleases']);\n    const releaseGroup = computed(() => store.getters['releaseGroups/getReleaseGroup']);\n    const tracks = computed(() => activeRelease.value.tracks);\n    const totalSides = computed(() => {\n        return tracks.value\n            .flat()\n            .reduce(\n                (accumulator: number, currentValue: { side: number }) =>\n                    currentValue.side > accumulator ? currentValue.side : accumulator,\n                0,\n            );\n    });\n\n    // Get from release store once release API mapping is complete\n    const ownership: ComputedRef<ReleaseOwnership> = computed(() => ({\n        c_year: activeRelease.value.c_year,\n        c_holder: activeRelease.value.c_holder,\n        p_year: activeRelease.value.p_year,\n        p_holder: activeRelease.value.p_holder,\n    }));\n\n    watch(activeRelease, async (release) => {\n        event('event', 'view_item', {\n            currency: 'GBP',\n            value: release.price.value / 100,\n            items: [\n                {\n                    item_id: release.uuid,\n                    item_name: `${release.primary_artist} - ${release.title}`,\n                    item_variant: release.release_type.description,\n                },\n            ],\n        });\n\n        await reset();\n    });\n\n    const chooseRelease = (releaseUuid: string) => {\n        const index = findIndex(releases.value, (o: Release) => {\n            return o.uuid === releaseUuid;\n        });\n\n        if (index === activeIndex.value) return;\n\n        opacity.value = 'opacity-0';\n\n        setTimeout(() => {\n            activeIndex.value = index;\n\n            activeRelease.value = releases.value[index];\n\n            setGradientColour();\n            resetAnimation(); // returns with animationLoaded()\n        }, 500);\n    };\n\n    const animationLoaded = () => {\n        setTimeout(() => {\n            opacity.value = 'opacity-100';\n        }, 100);\n    };\n\n    const resetAnimation = async () => {\n        showAnimation.value = false;\n        await nextTick();\n        await nextTick();\n        showAnimation.value = true;\n        await nextTick();\n    };\n\n    const setGradientColour = () => {\n        if (saturationAndLuminanceOk(activeRelease.value.main_colour)) {\n            gradientColour.value = activeRelease.value.main_colour;\n            return;\n        }\n\n        if (activeRelease.value.colour_palette) {\n            for (let x = 0; x < activeRelease.value.colour_palette.length - 2; x++) {\n                if (saturationAndLuminanceOk(activeRelease.value.colour_palette[x])) {\n                    gradientColour.value = activeRelease.value.colour_palette[x];\n                    return;\n                }\n            }\n\n            for (let x = 0; x < activeRelease.value.colour_palette.length - 2; x++) {\n                if (luminanceOk(activeRelease.value.colour_palette[x])) {\n                    gradientColour.value = activeRelease.value.colour_palette[x];\n                    return;\n                }\n            }\n        }\n\n        gradientColour.value = activeRelease.value.main_colour;\n    };\n\n    const saturationAndLuminanceOk = (c: string) => {\n        return saturation(c) > 35 && luminance(c) > 75;\n    };\n\n    const luminanceOk = (c: string) => {\n        return luminance(c) > 35 && luminance(c) < 100;\n    };\n\n    const luminance = (c: string) => {\n        c = c.substring(1); // strip #\n        const rgb = parseInt(c, 16); // convert rrggbb to decimal\n        const r = (rgb >> 16) & 0xff; // extract red\n        const g = (rgb >> 8) & 0xff; // extract green\n        const b = (rgb >> 0) & 0xff; // extract blue\n\n        return 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709\n    };\n\n    const saturation = (c: string) => {\n        c = c.substring(1); // strip #\n        const rgb = parseInt(c, 16); // convert rrggbb to decimal\n        let r = (rgb >> 16) & 0xff; // extract red\n        let g = (rgb >> 8) & 0xff; // extract green\n        let b = (rgb >> 0) & 0xff; // extract blue\n\n        // Make r, g, and b fractions of 1\n        r /= 255;\n        g /= 255;\n        b /= 255;\n\n        // Find greatest and smallest channel values\n        let cmin = Math.min(r, g, b);\n        let cmax = Math.max(r, g, b);\n        let delta = cmax - cmin;\n        let h = 0;\n        let s = 0;\n        let l = 0;\n\n        // Calculate hue\n        // No difference\n        if (delta === 0) h = 0;\n        // Red is max\n        else if (cmax === r) h = ((g - b) / delta) % 6;\n        // Green is max\n        else if (cmax === g) h = (b - r) / delta + 2;\n        // Blue is max\n        else h = (r - g) / delta + 4;\n\n        h = Math.round(h * 60);\n\n        // Make negative hues positive behind 360°\n        if (h < 0) h += 360;\n\n        // Calculate lightness\n        l = (cmax + cmin) / 2;\n\n        // Calculate saturation\n        s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n\n        // Multiply l and s by 100\n        s = +(s * 100).toFixed(1);\n        l = +(l * 100).toFixed(1);\n\n        return s;\n    };\n\n    const reset = async () => {\n        stop();\n\n        await buildPlaylist({ playlist: activeRelease.value.tracks.flat() });\n\n        if (hasTrack.value) {\n            await setTrack({ uuid: activeRelease.value.tracks[0][0].uuid, shouldPlay: false });\n        }\n    };\n\n    onMounted(async () => {\n        try {\n            await store.dispatch('releaseGroups/fetch', {\n                releaseGroupUuid: releaseGroupUuid,\n                pageUuid: pageUuid,\n            });\n\n            await store.dispatch('releaseGroups/fetchReleases', {\n                releaseGroupUuid: releaseGroupUuid,\n                pageUuid: pageUuid,\n            });\n\n            activeRelease.value = releases.value[activeIndex.value];\n\n            setGradientColour();\n\n            store.commit('navbar/SET_PAGENAME', pageName);\n            store.commit('navbar/SET_PAGEURL', pageUrl);\n            store.commit('navbar/SET_SHOWARTISTNAME', true);\n\n            loaded.value = true;\n        } catch (error: any) {\n            useAxiosErrorHandler(error, { notify: false });\n        }\n    });\n</script>\n"],"names":["isSmall","isMedium","useDeviceAware","store","useStore","releaseGroupUuid","pageUuid","pageName","pageThumb","pageUrl","__props","stop","buildPlaylist","setTrack","hasTrack","useAudioPlayer","inject","loaded","ref","activeIndex","activeRelease","gradientColour","showAnimation","opacity","releases","computed","releaseGroup","tracks","totalSides","accumulator","currentValue","ownership","watch","release","event","reset","chooseRelease","releaseUuid","index","findIndex","o","setGradientColour","resetAnimation","animationLoaded","nextTick","saturationAndLuminanceOk","x","luminanceOk","c","saturation","luminance","rgb","g","b","cmin","cmax","delta","s","l","onMounted","error","useAxiosErrorHandler"],"mappings":"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"}